98162b9d42
* Add image section # Conflicts: # plugins/woocommerce-admin/client/products/add-product-page.tsx * Add `keepSpaceWhenDragging` to sortable # Conflicts: # packages/js/components/src/sortable/sortable-item.tsx # packages/js/components/src/sortable/sortable.tsx # Conflicts: # packages/js/components/src/sortable/sortable.tsx * Export ImageGalleryItem * Add props to `image-gallery` # Conflicts: # packages/js/components/src/image-gallery/image-gallery-item.tsx # packages/js/components/src/image-gallery/image-gallery.tsx * Changed `media-uploader` label * Add changelogs * Fix image-gallery and sortable components # Conflicts: # packages/js/components/src/sortable/sortable-item.tsx # packages/js/components/src/sortable/sortable.tsx # Conflicts: # packages/js/components/src/image-gallery/image-gallery.tsx # packages/js/components/src/sortable/sortable.tsx * Set gallery min-height * Add onOrderChange * Show images section edit-product # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx # Conflicts: # plugins/woocommerce-admin/client/products/edit-product-page.tsx * Fix styles * Fix styles * Fix image alt * Fix TS any * Add prop `onDragOver` # Conflicts: # packages/js/components/src/image-gallery/image-gallery.tsx * Fix styles * Fix padding * Fix image area min-height * Fix subtitle copy * Fix image margin * Change `draggedImageId` * Fix `setDraggedImageId` reset * Rename `isRemoveZoneVisible` * Add `CardBody` and remove redundant `setValue` * Fix card styles * Remove `getUniqueImages` * Use url as a key when there is no image id * Fix `orderedImages` * Add hover to gallery images * Fix gallery arrows and set cover problems * Altering blur handler to prevent toolbar closure on media modal * Fix toolbar drag and drop * Add replace fn * Restoring modal class for blur function * Fix storybook * Ensuring onBlur doesn't happen while dragging, resolving issue in Firefox * Adding expected event object to drag callbacks * Fix image size * Fix lint * Another fix lint * Update plugins/woocommerce-admin/client/products/sections/images-section.tsx Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> * Fix `draggedImageId` default value * Fix toolbar icon style * Rename consts * Update pnpm-lock.yaml Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com> Co-authored-by: Joel <dygerati@gmail.com> Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> |
||
---|---|---|
.. | ||
changelog | ||
src | ||
.eslintrc.js | ||
.gitignore | ||
.npmrc | ||
CHANGELOG.md | ||
PREVIOUS_CHANGELOG.md | ||
README.md | ||
babel.config.js | ||
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
.