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 |
||
|---|---|---|
| .. | ||
| activity-panel | ||
| header | ||
| README.md | ||
| controller.js | ||
| index.js | ||
| notices.js | ||
| section.js | ||
| style.scss | ||
README.md
Layout
This component handles the layout of the WooCommerce app. This also controls the routing, and which component should be shown on each page.
Layout
The Layout component sets up the structure of the page, using the components described below.
Header
The Header component used in each section automatically fills into the "header" slot defined here. We're using react-slot-fill to avoid a duplicated div wrapper from Gutenberg's implementation. See the header component docs for more information.
Notices
This component will house the list of high priority notices. This appears on every page. Currently just a placeholder div.
Activity Panel
This component contains the Activity Panel. This is shown on every page and is rendered as part of the header.
Controller
layout/controller.js has two exports, a <Controller /> component and a getPages function.
getPages
This function returns an array of objects, each describing a page in the app. The properties in each object are:
container: A component, rendered in the main content area of the Layoutpath: The path this component should show up on (this should be unique to each entry)wpMenu: The ID of the menu item in the wp-admin sidebar, used to toggle on/off the current menu item classes
<Controller />
This component pulls out the current page from getPages, and renders the container component defined in the object.
Section and H
These components are pulled from layout/section, and are used to frame out the page content for accessible heading hierarchy. Instead of defining fixed heading levels (h2, h3, …) you can use <H /> to create "section headings", which look to the parent <Section />s for the appropriate heading level.
For example…
<H>My important title</H>
<Section>
<H>This subtitle</H>
<p>Some content</p>
<H>Another subtitle</H>
<p>More content</p>
</Section>
will render as
<h2>My important title</h2>
<div>
<h3>This subtitle</h3>
<p>Some content</p>
<h3>Another subtitle</h3>
<p>More content</p>
</div>
Note that H starts at level 2, since there should be only 1 h1 on each page and we set that separately in <Header />.
Props for <H />
Any props passed to H will pass down to the h* element, so be sure to use only valid HTML properties.
Props for <Section />
component: The wrapper component for this section. Optional, defaults todiv. If passed false, no wrapper is used.children: The children inside this section, rendered in thecomponent. This increases the context level for the next heading used....props: All other props are passed to the wrapper component, or ignored ifcomponent === false.