woocommerce/packages/js/components
Maikel David Pérez Gómez abcedbefe0
[MVP QA #1] Visual: spacings (#38325)
* Update the margin-left on the buttons in the top bar from 16px to 8px

* On mobile, the left and right body margins should be 32 px

* The inner padding in the tab in the top bar should be 12px, not 16px

* In the edit product link modal, let's set this modal’s width to 650 px and remove the line separating the header from the contents

* All modals should now have 8 px window radius

* In the feedback form, can we fix the buttons at the bottom

* The help icon in checkboxes small, detached from the item label, and vertically misaligned. Left margin of 4 px, no vertical adjustment; somehow it has a -2px set for the top margin)

* Fix block-editor-block-contextual-toolbar top position

* When the product is in a draft state, the button in the top bar should say Add, not Save. It should change into Update once it's published on the store

* Fix layout margin top

* Add ection support for blockGap and set title and description to optional

* Remove non needed control field margin bottom

* Fix schedule sale block spacing

* Remove non needed control field help text margin bottom

* Remove the sub section outer spacing

* Move pricing fields into a sub section block

* Fix collapsible-contet margin top

* Remove invalid inner block layout spacing

* Wrap sku, stock toogle and quantity within a sub section

* Group inventory advance section inner blocks into a sub section

* Fix linter error

* Add changelog files

* Fix php lint error

* Change unit names to fit GB definitions
see: b2c16f3c68/packages/base-styles/_variables.scss\#L31-L41
2023-06-01 13:56:31 -04:00
..
changelog [MVP QA #1] Visual: spacings (#38325) 2023-06-01 13:56:31 -04:00
src [MVP QA #1] Visual: spacings (#38325) 2023-06-01 13:56:31 -04:00
typings Migrate Rating component to TS (#36301) 2023-04-26 15:21:16 -07:00
.eslintrc.js Update the @woocommerce/eslint-plugin and fix bugs (#36988) 2023-03-02 11:36:38 +13:00
.gitignore Update JS packages changelogs (#33412) 2022-06-16 10:06:31 +12:00
.npmrc Moved WCA Packages 2022-03-18 14:25:26 -07:00
CHANGELOG.md Prepare Packages for Release (#36210) 2023-01-03 18:53:06 +07:00
PREVIOUS_CHANGELOG.md @woocommerce/components: Prep changelog for release (#33359) 2022-06-14 14:21:02 +12:00
README.md Moved WCA Packages 2022-03-18 14:25:26 -07:00
babel.config.js Update/unify jest@27 across all packages (#34322) 2022-09-06 09:29:45 -05:00
composer.json Update changelogger to 3.3.0 to support PR number capturing with merge (#36266) 2023-01-05 14:42:51 +05:30
composer.lock Update changelogger to 3.3.0 to support PR number capturing with merge (#36266) 2023-01-05 14:42:51 +05:30
jest.config.json Enforce Strict `@types` Dependencies (#37351) 2023-03-23 18:02:20 -07:00
package.json Update monorepo to pnpm 8 and Node to 16.14 (#37915) 2023-04-25 18:49:30 +12:00
tsconfig-cjs.json Enforce Strict `@types` Dependencies (#37351) 2023-03-23 18:02:20 -07:00
tsconfig.json Fix TypeScript Incremental Build Regression (#37432) 2023-03-24 12:07:49 -07:00
webpack.config.js Emit error on webpack build when invalid export name used in import for JS (#37195) 2023-03-26 21:42:33 -04:00

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.