32de8bee6f
* Add initial SearchControl component * Add async example * Reorganize getItemPropsType type * Create separate MenuItem component * Update items to use value/label pairs * Add fuzzy matching example * Use MenuItem component in example * Add callback method example and onSelect prop * Add custom render example * Add styling * Simplify Menu component * Add changelog entry * Update SelectControl to DeprecatedSelectControl * Rename SearchControl to SelectControl * Add readme * Add placeholder prop * Add icon to combox box * Rename deprecated SelectControl classes * Add changelog entries * Pass menu props to menu to fix ref issues * Update lock file * Rebase and update lock file * Fix up IDs in e2e tests * Make list structure more semantic * Fix update conflict with pnpm-lock * Move new SelectControl to experimental * Change experimental class name to avoid style conflicts * Fix up latest lock file from rebase * Remove onboarding e2e changes * Update changelogs * Update lock file again * Update pnpm-lock and fix lint error Co-authored-by: Lourens Schep <lourensschep@gmail.com> |
||
---|---|---|
.. | ||
changelog | ||
src | ||
.eslintrc.js | ||
.gitignore | ||
.npmrc | ||
CHANGELOG.md | ||
PREVIOUS_CHANGELOG.md | ||
README.md | ||
composer.json | ||
composer.lock | ||
jest.config.json | ||
package.json | ||
tsconfig-cjs.json | ||
tsconfig.json | ||
webpack.config.js |
README.md
Components
This packages includes a library of components that can be used to create pages in the WooCommerce dashboard and reports pages.
Installation
Install the module
pnpm install @woocommerce/components --save
View the full Component documentation for usage information.
Usage
/**
* Woocommerce dependencies
*/
import { Card } from '@woocommerce/components';
export default function MyCard() {
return (
<Card title="Store Performance" description="Key performance metrics">
<p>Your stuff in a Card.</p>
</Card>
);
}
Many components include CSS to add style, you will need to add in order to appear correctly. Within WooCommerce, add the wc-components
stylesheet as a dependency of your plugin's stylesheet. See wp_enqueue_style documentation for how to specify dependencies.
In non-WordPress projects, link to the build-style/card/style.css
file directly, it is located at node_modules/@woocommerce/components/build-style/<component_name>/style.css
.