727654ff3b
* 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 |
||
|---|---|---|
| .. | ||
| README.md | ||
| index.js | ||
| item.js | ||
| style.scss | ||
README.md
SummaryList & SummaryNumber
A list of "summary numbers", performance indicators for a given store. SummaryList is a container element for a set of SummaryNumbers. Each SummaryNumber shows a value, label, and an optional change percentage.
How to use:
import { SummaryList, SummaryNumber } from 'components/summary';
render: function() {
return (
<SummaryList>
<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" />
</SummaryList>
);
}
SummaryList Props
children(required): A list of<SummaryNumber />slabel: 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.href(required): An internal link to the report focused on this number.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.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.