Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-admin/client/components/summary/README.md

38 lines
2.1 KiB
Markdown
Raw Normal View History

Add Summary Number/Performance Tile component (https://github.com/woocommerce/woocommerce-admin/pull/109) * Add SummaryList and SummaryNumber components * Add a demo of SummaryList/SummaryNumbers * Pages without the sidebar displayed can use a larger max-width * Adjust layout styles for smaller screens
2018-06-14 15:16:57 +00:00
SummaryList & SummaryNumber
===========================
A list of "summary numbers", performance indicators for a given store. `SummaryList` is a container element for a set of `SummaryNumber`s. Each `SummaryNumber` shows a value, label, and an optional change percentage.
## How to use:
```jsx
import { SummaryList, SummaryNumber } from 'components/summary';
render: function() {
return (
<SummaryList>
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
<SummaryNumber value={ '$829.40' } label={ __( 'Gross Revenue', 'wc-admin' ) } delta={ 29 } href="/analytics/report" />
<SummaryNumber value={ '$24.00' } label={ __( 'Refunds', 'wc-admin' ) } delta={ -10 } href="/analytics/report" selected />
<SummaryNumber value={ '$49.90' } label={ __( 'Coupons', 'wc-admin' ) } href="/analytics/report" />
Add Summary Number/Performance Tile component (https://github.com/woocommerce/woocommerce-admin/pull/109) * Add SummaryList and SummaryNumber components * Add a demo of SummaryList/SummaryNumbers * Pages without the sidebar displayed can use a larger max-width * Adjust layout styles for smaller screens
2018-06-14 15:16:57 +00:00
</SummaryList>
);
}
```
## `SummaryList` Props
* `children` (required): A list of `<SummaryNumber />`s
* `label`: An optional label of this group, read to screen reader users. Defaults to "Performance Indicators".
## `SummaryNumber` Props
* `label` (required): A string description of this value, ex "Revenue", or "New Customers"
* `value` (required): A string or number value to display - a string is allowed so we can accept currency formatting.
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
* `href` (required): An internal link to the report focused on this number.
Add Summary Number/Performance Tile component (https://github.com/woocommerce/woocommerce-admin/pull/109) * Add SummaryList and SummaryNumber components * Add a demo of SummaryList/SummaryNumbers * Pages without the sidebar displayed can use a larger max-width * Adjust layout styles for smaller screens
2018-06-14 15:16:57 +00:00
* `delta`: A number to represent the percentage change since the last comparison period - positive numbers will show a green up arrow, negative numbers will show a red down arrow. If omitted, no change value will display.
SummaryNumber: Switch to dropdown display on small screens (https://github.com/woocommerce/woocommerce-admin/pull/265) * Move isMobileViewport to a helper function in lib * Switch SummaryList to use navigable menu to support up/down (or left/right) arrow key navigation * Switch to a dropdown menu/button combo when on a smaller screen * Ensure aria role & href are only added if the item is a link * Wrap the entire SummaryNumber in a link to match non-mobile use * Update card content to be single line on mobile * Add label to the popover title * Make SummaryNumbers edge-to-edge on smaller screens * Switch to the collapsed/dropdown view on screens <1100px * Adjust offset of arrow icon
2018-08-02 22:20:48 +00:00
* `onToggle`: A function used to switch the given SummaryNumber to a button, and called on click.
SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237) * Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps
2018-07-30 15:14:09 +00:00
* `prevLabel`: A string description of the previous value's timeframe, ex "Previous Year:". Defaults to "Previous Period:".
* `prevValue`: A string or number value to display - a string is allowed so we can accept currency formatting. If omitted, this section won't display.
* `selected`: A boolean used to show a highlight style on this number. Defaults to false.
* `reverseTrend`: A boolean used to indicate that a negative delta is "good", and should be styled like a positive (and vice-versa). Defaults to false.