diff --git a/plugins/woocommerce-blocks/.eslintrc.js b/plugins/woocommerce-blocks/.eslintrc.js
index 6dbbe97731a..5e1e4e1843c 100644
--- a/plugins/woocommerce-blocks/.eslintrc.js
+++ b/plugins/woocommerce-blocks/.eslintrc.js
@@ -124,6 +124,7 @@ module.exports = {
extends: [
'plugin:@woocommerce/eslint-plugin/recommended',
'plugin:you-dont-need-lodash-underscore/compatible',
+ 'plugin:storybook/recommended',
],
globals: {
wcBlocksMiddlewareConfig: 'readonly',
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/button/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/button/stories/index.stories.tsx
similarity index 94%
rename from plugins/woocommerce-blocks/assets/js/base/components/button/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/button/stories/index.stories.tsx
index ecf3c5242c5..f445dbdca86 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/button/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/button/stories/index.stories.tsx
@@ -10,7 +10,7 @@ import Button, { ButtonProps } from '..';
const availableTypes = [ 'button', 'input', 'submit' ];
export default {
- title: 'WooCommerce Blocks/@base-components/Button',
+ title: 'Base Components/Button',
argTypes: {
children: {
control: 'text',
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/stories/index.stories.tsx
similarity index 95%
rename from plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/stories/index.stories.tsx
index e5bae041855..4806602caf4 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/stories/index.stories.tsx
@@ -13,7 +13,7 @@ import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
import { TotalsCoupon, TotalsCouponProps } from '..';
export default {
- title: 'WooCommerce Blocks/@base-components/cart-checkout/totals/Coupon',
+ title: 'Base Components/Totals/Coupon',
component: TotalsCoupon,
args: {
initialOpen: true,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/stories/index.stories.tsx
similarity index 97%
rename from plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/stories/index.stories.tsx
index 15525b95f57..7b274b27e72 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/stories/index.stories.tsx
@@ -67,7 +67,7 @@ function extractValuesFromCoupons(
}
export default {
- title: 'WooCommerce Blocks/@base-components/cart-checkout/totals/Discount',
+ title: 'Base Components/Totals/Discount',
component: Discount,
argTypes: {
currency: currencyControl,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.stories.tsx
similarity index 95%
rename from plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.stories.tsx
index 80b05c092a4..6442babe6c7 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.stories.tsx
@@ -21,7 +21,7 @@ const NZD: Currency = {
};
export default {
- title: 'WooCommerce Blocks/@base-components/cart-checkout/totals/FooterItem',
+ title: 'Base Components/Totals/FooterItem',
component: FooterItem,
args: {
currency: NZD,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/country-input/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/country-input/stories/index.stories.tsx
similarity index 96%
rename from plugins/woocommerce-blocks/assets/js/base/components/country-input/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/country-input/stories/index.stories.tsx
index 1818b52aa76..5afc34b79c2 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/country-input/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/country-input/stories/index.stories.tsx
@@ -15,7 +15,7 @@ import { countries } from './countries-filler';
type CountryCode = keyof typeof countries;
export default {
- title: 'WooCommerce Blocks/@base-components/CountryInput',
+ title: 'Base Components/CountryInput',
component: CountryInput,
args: {
countries,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/stories/index.stories.tsx
similarity index 92%
rename from plugins/woocommerce-blocks/assets/js/base/components/form-token-field/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/form-token-field/stories/index.stories.tsx
index b3e20e21461..00d66f6b7ec 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/stories/index.stories.tsx
@@ -10,7 +10,7 @@ import { useState } from '@wordpress/element';
import FormTokenField, { Props } from '..';
export default {
- title: 'WooCommerce Blocks/@base-components/FormTokenField',
+ title: 'Base Components/FormTokenField',
argTypes: {},
component: FormTokenField,
} as Meta< Props >;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/README.md b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/README.md
deleted file mode 100644
index 9345d194672..00000000000
--- a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/README.md
+++ /dev/null
@@ -1,138 +0,0 @@
-# NoticeBanner Component
-
-An informational UI displayed near the top of the store pages.
-
-## Table of contents
-
-- [Design Guidelines](#design-guidelines)
-- [Development Guidelines](#development-guidelines)
- - [Usage](#usage)
- - [Props](#props)
- - [`children`: `React.ReactNode`](#children-reactreactnode)
- - [`className`: `string`](#classname-string)
- - [`isDismissible`: `boolean`](#isdismissible-boolean)
- - [`onRemove`: `() => void`](#onremove---void)
- - [`politeness`: `'polite' | 'assertive'`](#politeness-polite--assertive)
- - [`spokenMessage`: `string`](#spokenmessage-string)
- - [`status`: `'success' | 'error' | 'info' | 'warning' | 'default'`](#status-success--error--info--warning--default)
- - [`summary`: `string`](#summary-string)
- - [Example](#example)
-
-## Design Guidelines
-
-Notices are informational UI displayed near the top of store pages. Notices are used to indicate the result of an action, or to draw the user’s attention to necessary information.
-
-Notices are color-coded to indicate the type of message being communicated, and also show an icon to reinforce the meaning of the message. The color and icon used for a notice are determined by the `status` prop.
-
-### Informational
-
-Blue notices used for general information for buyers that are not blocking and do not require action.
-
-
-
-### Error
-
-Red notices to show that an error has occurred and that the user needs to take action.
-
-
-
-### Success
-
-Green notices that show an action was successful.
-
-
-
-### Warning
-
-Yellow notices that show that the user may need to take action, or needs to be aware of something important.
-
-
-
-### Default
-
-Gray notice, similar to info, but used for less important messaging.
-
-
-
-## Development Guidelines
-
-### Usage
-
-To display a plain notice, pass the notice message as a string:
-
-```jsx
-import { NoticeBanner } from '@woocommerce/base-components';
-
-Your message here;
-```
-
-For more complex markup, you can pass any JSX element:
-
-```jsx
-import { NoticeBanner } from '@woocommerce/base-components';
-
-
-
- An error occurred: { errorDetails }.
-
-;
-```
-
-### Props
-
-#### `children`: `React.ReactNode`
-
-The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
-
-#### `className`: `string`
-
-Additional class name to give to the notice.
-
-#### `isDismissible`: `boolean`
-
-Determines whether the notice can be dismissed by the user. When set to true, a close icon will be displayed on the banner.
-
-#### `onRemove`: `() => void`
-
-Function called when dismissing the notice. When the close icon is clicked or the Escape key is pressed, this function will be called.
-
-#### `politeness`: `'polite' | 'assertive'`
-
-Determines the level of politeness for the notice for assistive technology. Acceptable values are 'polite' and 'assertive'. Default is 'polite'.
-
-#### `spokenMessage`: `string`
-
-Optionally provided to change the spoken message for assistive technology. If not provided, the `children` prop will be used as the spoken message.
-
-#### `status`: `'success' | 'error' | 'info' | 'warning' | 'default'`
-
-Status determines the color of the notice and the icon. Acceptable values are `success`, `error`, `info`, `warning`, and `default`.
-
-#### `summary`: `string`
-
-Optional summary text shown above notice content, used when several notices are listed together.
-
-##### Example
-
-```tsx
-import { NoticeBanner } from '@woocommerce/base-components';
-
-const errorMessages = [
- 'First error message',
- 'Second error message',
- 'Third error message',
-];
-
-
-
- { errorMessages.map( ( message ) => (
-
{ message }
- ) ) }
-
-;
-```
-
-In this example, the summary prop is used to indicate to the user that there are errors in the form submission. The list of error messages is rendered within the NoticeBanner component using an unordered list (`
`) and list items (`
`). The `status` prop is set to `error` to indicate that the notice represents an error message.
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/docs/docs.mdx b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/docs/docs.mdx
new file mode 100644
index 00000000000..3808037083a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/docs/docs.mdx
@@ -0,0 +1,112 @@
+import { Canvas, Meta, ArgTypes, Primary, Source } from '@storybook/blocks';
+
+import * as NoticeBannerStories from '../stories/index.stories.tsx';
+
+
+
+# NoticeBanner
+
+An informational UI displayed near the top of the store pages.
+
+
+
+## Design Guidelines
+
+`NoticeBanner` is an informational UI element displayed near the top of store pages used to indicate the result of an action, or to draw the user's attention to necessary information.
+
+Notices are color-coded to indicate the type of message being communicated, and also show an icon to reinforce the meaning of the message. The color and icon used for a notice are determined by the `status` prop.
+
+### Default Notices
+
+By default, noices are grey and used for less important messaging.
+
+
+
+### Informational Notices
+
+Blue notices with an info icon are used for general information for buyers, but do not require them to take an action.
+
+
+
+### Error Notices
+
+Red notices with an alert icon are used to show that an error has occurred and that the user needs to take action.
+
+
+
+### Success Notices
+
+Green notices with a success icon are used to show an action was successful.
+
+
+
+### Warning Notices
+
+Yellow notices with an alert icon are used to show that the user may need to take action, or needs to be aware of something important.
+
+
+
+### Error Summary
+
+If you provide a `summary` it will be displayed above the notice content. This can be useful for displaying a summary of errors in a list format.
+
+
+
+## Development Guidelines
+
+### Props
+
+
+
+### Usage examples
+
+#### Example: string based notices
+
+To display a basic notice, pass the notice message as a string:
+
+```jsx
+import { NoticeBanner } from '@woocommerce/base-components';
+
+Your message here;
+```
+
+#### Example: components within notices
+
+For more complex markup, you can wrap any JSX element:
+
+```jsx
+import { NoticeBanner } from '@woocommerce/base-components';
+
+
+
+ An error occurred: { errorDetails }.
+
+;
+```
+
+#### Example: list of notices
+
+In this example, the summary prop is used to indicate to the user that there are errors in the form submission.
+
+```typescript
+import { NoticeBanner } from '@woocommerce/base-components';
+
+const errorMessages = [
+ 'First error message',
+ 'Second error message',
+ 'Third error message',
+];
+
+
+
+ { errorMessages.map( ( message ) => (
+
{ message }
+ ) ) }
+
+;
+```
+
+The list of error messages is rendered within the NoticeBanner component using an unordered list (`
`) and list items (`
`). The `status` prop is set to `error` to indicate that the notice represents an error message.
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/index.tsx
index 50dcbac641b..91464d8dc78 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/index.tsx
@@ -14,29 +14,20 @@ import Button from '../button';
import { useSpokenMessage } from '../../hooks';
export interface NoticeBannerProps {
- // The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
children: React.ReactNode;
- // Additional class name to give to the notice.
- className?: string | undefined;
- // Determines whether the notice can be dismissed by the user.
- isDismissible?: boolean | undefined;
- // Function called when dismissing the notice.
- onRemove?: ( () => void ) | undefined;
- // Determines the level of politeness for the notice for assistive technology.
- politeness?: 'polite' | 'assertive' | undefined;
- // Optionally provided to change the spoken message for assistive technology.
- spokenMessage?: string | React.ReactNode | undefined;
- // Status determines the color of the notice and the icon.
+ className?: string;
+ isDismissible?: boolean;
+ onRemove?: () => void;
+ politeness?: 'polite' | 'assertive';
+ spokenMessage?: string | React.ReactNode;
status: 'success' | 'error' | 'info' | 'warning' | 'default';
- // Optional summary text shown above notice content, used when several notices are listed together.
- summary?: string | undefined;
+ summary?: string;
}
/**
- * NoticeBanner: An informational UI displayed near the top of the store pages.
+ * NoticeBanner component.
*
- * Notices are informational UI displayed near the top of store pages. WooCommerce blocks, themes, and plugins all use
- * notices to indicate the result of an action, or to draw the user’s attention to necessary information.
+ * An informational UI displayed near the top of the store pages.
*/
const NoticeBanner = ( {
className,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/default.png b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/default.png
deleted file mode 100644
index b332186648e..00000000000
Binary files a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/default.png and /dev/null differ
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/error.png b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/error.png
deleted file mode 100644
index 4de65910933..00000000000
Binary files a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/error.png and /dev/null differ
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/info.png b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/info.png
deleted file mode 100644
index de4ebc5124b..00000000000
Binary files a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/info.png and /dev/null differ
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/success.png b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/success.png
deleted file mode 100644
index dcb4536ee19..00000000000
Binary files a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/success.png and /dev/null differ
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/warning.png b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/warning.png
deleted file mode 100644
index 8fcf176155b..00000000000
Binary files a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/screenshots/warning.png and /dev/null differ
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/stories/index.stories.tsx
similarity index 73%
rename from plugins/woocommerce-blocks/assets/js/base/components/notice-banner/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/notice-banner/stories/index.stories.tsx
index 202a0088e5e..6e1cf16a349 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/stories/index.stories.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import type { Story, Meta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
/**
* Internal dependencies
@@ -10,7 +10,7 @@ import NoticeBanner, { NoticeBannerProps } from '../';
const availableStatus = [ 'default', 'success', 'error', 'warning', 'info' ];
export default {
- title: 'WooCommerce Blocks/@base-components/NoticeBanner',
+ title: 'Base Components/NoticeBanner',
argTypes: {
status: {
control: 'radio',
@@ -20,7 +20,8 @@ export default {
},
isDismissible: {
control: 'boolean',
- description: 'Determines whether the notice can be dismissed.',
+ description:
+ 'Determines whether the notice can be dismissed by the user. When set to true, a close icon will be displayed on the banner.',
},
summary: {
description:
@@ -33,7 +34,7 @@ export default {
},
spokenMessage: {
description:
- 'Optionally provided to change the spoken message for assistive technology.',
+ 'Optionally provided to change the spoken message for assistive technology. If not provided, the `children` prop will be used as the spoken message.',
control: 'text',
},
politeness: {
@@ -44,18 +45,19 @@ export default {
},
children: {
description:
- 'The content of the notice; either text or a React node such as a list of errors.',
+ 'The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.',
disable: true,
},
onRemove: {
- description: 'Function called when dismissing the notice.',
+ description:
+ 'Function called when dismissing the notice. When the close icon is clicked or the Escape key is pressed, this function will be called.',
disable: true,
},
},
component: NoticeBanner,
} as Meta< NoticeBannerProps >;
-const Template: Story< NoticeBannerProps > = ( args ) => {
+const Template: StoryFn< NoticeBannerProps > = ( args ) => {
return ;
};
@@ -84,7 +86,7 @@ Warning.args = {
export const Info = Template.bind( {} );
Info.args = {
- children: 'This is an info notice',
+ children: 'This is an informational notice',
status: 'info',
};
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/stories/index.stories.tsx
similarity index 95%
rename from plugins/woocommerce-blocks/assets/js/base/components/price-slider/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/price-slider/stories/index.stories.tsx
index 7aef92ad2d3..053dd1ac0d2 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/stories/index.stories.tsx
@@ -11,7 +11,7 @@ import { currencies, currencyControl } from '@woocommerce/storybook-controls';
import PriceSlider, { PriceSliderProps } from '..';
export default {
- title: 'WooCommerce Blocks/@base-components/PriceSlider',
+ title: 'Base Components/PriceSlider',
component: PriceSlider,
args: {
currency: currencies.USD,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-name/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-name/stories/index.stories.tsx
similarity index 88%
rename from plugins/woocommerce-blocks/assets/js/base/components/product-name/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/product-name/stories/index.stories.tsx
index ee5546d23f4..ff9551fcf34 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/product-name/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-name/stories/index.stories.tsx
@@ -9,7 +9,7 @@ import type { Story, Meta } from '@storybook/react';
import ProductName, { ProductNameProps } from '..';
export default {
- title: 'WooCommerce Blocks/@base-components/cart-checkout/ProductName',
+ title: 'Base Components/ProductName',
component: ProductName,
args: {
name: 'Test product',
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.stories.tsx
similarity index 82%
rename from plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.stories.tsx
index 736e2d8a850..a47a74570be 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.stories.tsx
@@ -12,7 +12,7 @@ import ProductPrice, { ProductPriceProps } from '..';
const ALLOWED_ALIGN_VALUES = [ 'left', 'center', 'right' ];
export default {
- title: 'WooCommerce Blocks/@base-components/ProductPrice',
+ title: 'Base Components/ProductPrice',
component: ProductPrice,
argTypes: {
align: {
@@ -25,6 +25,15 @@ export default {
align: 'left',
format: '',
price: 3000,
+ currency: {
+ code: 'USD',
+ symbol: '$',
+ thousandSeparator: ' ',
+ decimalSeparator: '.',
+ minorUnit: 2,
+ prefix: '$',
+ suffix: '',
+ },
},
} as Meta< ProductPriceProps >;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/stories/index.stories.tsx
similarity index 92%
rename from plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/stories/index.stories.tsx
index 13c1e48e3da..321c8404ae9 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/stories/index.stories.tsx
@@ -10,7 +10,7 @@ import type { Story, Meta } from '@storybook/react';
import QuantitySelector, { QuantitySelectorProps } from '..';
export default {
- title: 'WooCommerce Blocks/@base-components/QuantitySelector',
+ title: 'Base Components/QuantitySelector',
component: QuantitySelector,
args: {
itemName: 'widgets',
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/read-more/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/read-more/stories/index.stories.tsx
similarity index 96%
rename from plugins/woocommerce-blocks/assets/js/base/components/read-more/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/read-more/stories/index.stories.tsx
index c6d9470af83..c283dc56dfe 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/read-more/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/read-more/stories/index.stories.tsx
@@ -9,7 +9,7 @@ import type { Story, Meta } from '@storybook/react';
import ReadMore, { defaultProps, ReadMoreProps } from '..';
export default {
- title: 'WooCommerce Blocks/@base-components/ReadMore',
+ title: 'Base Components/ReadMore',
component: ReadMore,
args: defaultProps,
argTypes: {
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/README.md b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/README.md
deleted file mode 100644
index b3bc398b3ea..00000000000
--- a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/README.md
+++ /dev/null
@@ -1,62 +0,0 @@
-# SnackbarList Component
-
-A temporary informational UI displayed at the bottom of store pages.
-
-## Table of contents
-
-- [Design Guidelines](#design-guidelines)
-- [Development Guidelines](#development-guidelines)
- - [Usage](#usage)
- - [Props](#props)
- - [`className`: `string`](#classname-string)
- - [`onRemove`: `( noticeId ) => void`](#onremove--noticeid---void)
- - [`notices`: `NoticeType[]`](#notices-noticetype)
-
-## Design Guidelines
-
-The buyer notice snackbar is temporary informational UI displayed at the bottom of store pages. WooCommerce blocks, themes, and plugins all use snackbar notices to indicate the result of a successful action.
-
-Snackbar notices work in the same way as the NoticeBanner component, and support the same statuses and styles.
-
-## Development Guidelines
-
-### Usage
-
-To display snackbar notices, pass an array of `notices` to the `SnackbarList` component:
-
-```jsx
-import { SnackbarList } from '@woocommerce/base-components';
-
-const notices = [
- {
- id: '1',
- content: 'This is a snackbar notice.',
- status: 'default',
- isDismissible: true,
- }
-];
-
-;
-```
-
-The component consuming `SnackbarList` is responsible for managing the notices state. The `SnackbarList` component will automatically remove notices from the list when they are dismissed by the user using the provided `onRemove` callback, and also when the notice times out after 10000ms.
-
-### Props
-
-#### `className`: `string`
-
-Additional class name to give to the notice.
-
-#### `onRemove`: `( noticeId ) => void`
-
-Function called when dismissing the notice. When the close icon is clicked or the Escape key is pressed, this function will be called. This is also called when the notice times out after 10000ms.
-
-#### `notices`: `NoticeType[]`
-
-A list of notices to display as snackbars. Each notice must have an `id` and `content` prop.
-
-- The `id` prop is used to identify the notice and should be unique.
-- The `content` prop is the content to display in the notice.
-- The `status` prop is used to determine the color of the notice and the icon. Acceptable values are 'success', 'error', 'info', 'warning', and 'default'.
-- The `isDismissible` prop determines whether the notice can be dismissed by the user.
-- The `spokenMessage` prop is used to change the spoken message for assistive technology. If not provided, the `content` prop will be used as the spoken message.
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/docs/docs.mdx b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/docs/docs.mdx
new file mode 100644
index 00000000000..b52bb45da9d
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/docs/docs.mdx
@@ -0,0 +1,90 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as SnackbarListStories from '../stories/index.stories.tsx';
+import * as SnackbarStories from '../stories/snackbar.stories.tsx';
+
+
+
+# SnackbarList
+
+A temporary informational UI element displayed at the bottom of store pages.
+
+
+
+## Design Guidelines
+
+The Snackbar is a temporary informational UI element displayed at the bottom of store pages. WooCommerce blocks, themes, and plugins all use snackbar notices to indicate the result of a successful action. For example, adding something to the cart.
+
+Snackbar notices work in the same way as the NoticeBanner component, and support the same statuses and styles.
+
+### Default Snackbars
+
+By default, notices are grey and used for less important messaging.
+
+
+
+### Informational Snackbars
+
+Blue notices with an info icon are used for general information for buyers, but do not require action.
+
+
+
+### Error Snackbars
+
+Red notices with an alert icon are used to show that an error has occurred and that the user needs to take action.
+
+
+
+### Success Snackbars
+
+Green notices with a success icon are used to show an action was successful.
+
+
+
+### Warning Snackbars
+
+Yellow notices with an alert icon are used to show that the user may need to take action, or needs to be aware of something important.
+
+
+
+## Development Guidelines
+
+The component consuming `SnackbarList` is responsible for managing the notices state. The `SnackbarList` component will automatically remove notices from the list when they are dismissed by the user using the provided `onRemove` callback, and also when the notice times out after 10000ms.
+
+### Props
+
+
+
+### NoticeType
+
+Each notice can be provided with the following args.
+
+- The `id` (required) prop is used to identify the notice and should be unique.
+- The `content` (required) prop is the content to display in the notice.
+- The `status` prop is used to determine the color of the notice and the icon. Acceptable values are 'success', 'error', 'info', 'warning', and 'default'.
+- The `isDismissible` prop determines whether the notice can be dismissed by the user.
+- The `spokenMessage` prop is used to change the spoken message for assistive technology. If not provided, the `content` prop will be used as the spoken message.
+
+### Usage example
+
+To display snackbar notices, pass an array of `notices` to the `SnackbarList` component:
+
+```jsx
+import { SnackbarList } from '@woocommerce/base-components';
+
+const notices = [
+ {
+ id: '1',
+ content: 'This is a snackbar notice.',
+ status: 'default',
+ isDismissible: true,
+ spokenMessage: "Hello snackbar!"
+ }
+];
+
+;
+```
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx
index 41718d819cf..a4758e1ea2e 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx
@@ -2,6 +2,7 @@
* External dependencies
*/
import { useEffect } from '@wordpress/element';
+import classNames from 'classnames';
/**
* Internal dependencies
@@ -9,15 +10,18 @@ import { useEffect } from '@wordpress/element';
import NoticeBanner, { NoticeBannerProps } from '../notice-banner';
import { SNACKBAR_TIMEOUT } from './constants';
-const Snackbar = ( {
+export interface SnackbarProps extends NoticeBannerProps {
+ // A ref to the list that contains the snackbar.
+ listRef?: React.MutableRefObject< HTMLDivElement | null >;
+}
+
+export const Snackbar = ( {
onRemove = () => void 0,
children,
listRef,
+ className,
...notice
-}: {
- // A ref to the list that contains the snackbar.
- listRef?: React.MutableRefObject< HTMLDivElement | null >;
-} & NoticeBannerProps ) => {
+}: SnackbarProps ) => {
// Only set up the timeout dismiss if we're not explicitly dismissing.
useEffect( () => {
const timeoutHandle = setTimeout( () => {
@@ -29,6 +33,10 @@ const Snackbar = ( {
return (
{
// Prevent focus loss by moving it to the list element.
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/index.stories.tsx
similarity index 73%
rename from plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/index.stories.tsx
index 9c8df331e5d..73c4874efaa 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/index.stories.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import type { Story, Meta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
/**
* Internal dependencies
@@ -9,7 +9,7 @@ import type { Story, Meta } from '@storybook/react';
import SnackbarList, { SnackbarListProps } from '../';
export default {
- title: 'WooCommerce Blocks/@base-components/SnackbarList',
+ title: 'Base Components/SnackbarList',
args: {
notices: [
{
@@ -28,18 +28,20 @@ export default {
control: 'text',
},
notices: {
- description: 'List of notice objects to show as snackbar notices.',
+ description:
+ 'A list of notices to display as snackbars. Each notice must have an `id` and `content` prop.',
disable: true,
},
onRemove: {
- description: 'Function called when dismissing the notice(s).',
+ description:
+ 'Function called when dismissing the notice. When the close icon is clicked or the Escape key is pressed, this function will be called. This is also called when the notice times out after 10000ms.',
disable: true,
},
},
component: SnackbarList,
} as Meta< SnackbarListProps >;
-const Template: Story< SnackbarListProps > = ( args ) => {
+const Template: StoryFn< SnackbarListProps > = ( args ) => {
return ;
};
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/snackbar.stories.tsx b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/snackbar.stories.tsx
new file mode 100644
index 00000000000..5b9f7dd332f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/snackbar.stories.tsx
@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Snackbar, { SnackbarProps } from '../snackbar';
+const availableStatus = [ 'default', 'success', 'error', 'warning', 'info' ];
+
+export default {
+ title: 'Base Components/SnackbarList/Snackbar',
+ argTypes: {
+ status: {
+ control: 'radio',
+ options: availableStatus,
+ description:
+ 'Status determines the color of the notice and the icon.',
+ },
+ isDismissible: {
+ control: 'boolean',
+ description:
+ 'Determines whether the notice can be dismissed by the user. When set to true, a close icon will be displayed on the banner.',
+ },
+ summary: {
+ description:
+ 'Optional summary text shown above notice content, used when several notices are listed together.',
+ control: 'text',
+ },
+ className: {
+ description: 'Additional class name to give to the notice.',
+ control: 'text',
+ },
+ spokenMessage: {
+ description:
+ 'Optionally provided to change the spoken message for assistive technology. If not provided, the `children` prop will be used as the spoken message.',
+ control: 'text',
+ },
+ politeness: {
+ control: 'radio',
+ options: [ 'polite', 'assertive' ],
+ description:
+ 'Determines the level of politeness for the notice for assistive technology.',
+ },
+ children: {
+ description:
+ 'The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.',
+ disable: true,
+ },
+ onRemove: {
+ description:
+ 'Function called when dismissing the notice. When the close icon is clicked or the Escape key is pressed, this function will be called.',
+ disable: true,
+ },
+ },
+ component: Snackbar,
+} as Meta< SnackbarProps >;
+
+const Template: StoryFn< SnackbarProps > = ( args ) => {
+ return ;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+ children: 'This is a default snackbar notice',
+ status: 'default',
+ isDismissible: true,
+ summary: undefined,
+ className: undefined,
+ spokenMessage: undefined,
+ politeness: undefined,
+};
+
+export const Error = Template.bind( {} );
+Error.args = {
+ children: 'This is an error snackbar notice',
+ status: 'error',
+};
+
+export const Warning = Template.bind( {} );
+Warning.args = {
+ children: 'This is a warning snackbar notice',
+ status: 'warning',
+};
+
+export const Info = Template.bind( {} );
+Info.args = {
+ children: 'This is an informational snackbar notice',
+ status: 'info',
+};
+
+export const Success = Template.bind( {} );
+Success.args = {
+ children: 'This is a success snackbar notice',
+ status: 'success',
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/style.scss
index 75b68b8aec8..8cc5b70eba4 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/style.scss
@@ -9,25 +9,32 @@
bottom: $gap-large;
left: $gap-large;
right: $gap-large;
+}
- .wc-block-components-notice-banner {
- display: inline-flex;
- width: auto;
- max-width: 600px;
- pointer-events: all;
- border: 1px solid transparent;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
- position: relative;
- margin: $gap-large 0 0;
+.wc-block-components-notice-snackbar-list .wc-block-components-notice-banner,
+.wc-block-components-notice-banner.wc-block-components-notice-snackbar {
+ display: inline-flex;
+ width: auto;
+ max-width: 600px;
+ pointer-events: all;
+ border: 1px solid transparent;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ position: relative;
+ margin: $gap-large $gap 0 0;
- &.is-default {
- border-color: $gray-800;
- }
+ &.is-error,
+ &.is-info,
+ &.is-success {
+ border-color: transparent;
+ }
- @include breakpoint("<782px") {
- width: 100%;
- max-width: none;
- }
+ &.is-default {
+ border-color: $gray-800;
+ }
+
+ @include breakpoint("<782px") {
+ width: 100%;
+ max-width: none;
}
}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/tabs/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/tabs/stories/index.stories.tsx
similarity index 95%
rename from plugins/woocommerce-blocks/assets/js/base/components/tabs/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/base/components/tabs/stories/index.stories.tsx
index 880c2c54230..1be8237ade7 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/tabs/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/tabs/stories/index.stories.tsx
@@ -10,7 +10,7 @@ import { useState } from '@wordpress/element';
import { __TabsWithoutInstanceId as Tabs, TabsProps } from '..';
export default {
- title: 'WooCommerce Blocks/@base-components/Tabs',
+ title: 'Base Components/Tabs',
component: Tabs,
args: {
tabs: [
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/test/errors.js b/plugins/woocommerce-blocks/assets/js/base/utils/test/errors.js
index 50b5bd6a346..fca815580a7 100644
--- a/plugins/woocommerce-blocks/assets/js/base/utils/test/errors.js
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/test/errors.js
@@ -35,12 +35,10 @@ describe( 'formatError', () => {
const mockResponse = new Response( mockMalformedJson, { status: 400 } );
const error = await formatError( mockResponse );
- const expectedError = {
- message:
- 'invalid json response body at reason: Unexpected end of JSON input',
- type: 'general',
- };
- expect( error ).toEqual( expectedError );
+ expect( error.message ).toContain(
+ 'invalid json response body at reason:'
+ );
+ expect( error.type ).toEqual( 'general' );
} );
} );
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/index.tsx
index ff363b93e86..e284fa39f83 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/index.tsx
@@ -40,11 +40,11 @@ export interface ErrorPlaceholderProps {
/**
* Callback to retry an action.
*/
- onRetry?: () => void;
+ onRetry?: ( () => void ) | undefined;
}
const ErrorPlaceholder = ( {
- className,
+ className = '',
error,
isLoading = false,
onRetry,
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-message.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-message.stories.tsx
similarity index 88%
rename from plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-message.tsx
rename to plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-message.stories.tsx
index 03c43700202..94cc9368373 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-message.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-message.stories.tsx
@@ -9,7 +9,7 @@ import type { Story, Meta } from '@storybook/react';
import ErrorMessage, { ErrorMessageProps } from '../error-message';
export default {
- title: 'WooCommerce Blocks/editor-components/Errors/Base Error Atom',
+ title: 'Editor Components/Errors/Base Error Atom',
component: ErrorMessage,
} as Meta< ErrorMessageProps >;
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-placeholder.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-placeholder.stories.tsx
similarity index 84%
rename from plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-placeholder.tsx
rename to plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-placeholder.stories.tsx
index c56a1d7d28e..bd133168a3e 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-placeholder.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/error-placeholder/stories/error-placeholder.stories.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import type { Story, Meta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
import { useArgs } from '@storybook/client-api';
import { INTERACTION_TIMEOUT } from '@woocommerce/storybook-controls';
@@ -11,11 +11,11 @@ import { INTERACTION_TIMEOUT } from '@woocommerce/storybook-controls';
import ErrorPlaceholder, { ErrorPlaceholderProps } from '..';
export default {
- title: 'WooCommerce Blocks/editor-components/Errors',
+ title: 'Editor Components/Errors/Error Placeholder',
component: ErrorPlaceholder,
} as Meta< ErrorPlaceholderProps >;
-const Template: Story< ErrorPlaceholderProps > = ( args ) => {
+const Template: StoryFn< ErrorPlaceholderProps > = ( args ) => {
const [ { isLoading }, setArgs ] = useArgs();
const onRetry = args.onRetry
@@ -63,7 +63,7 @@ UnknownError.args = {
},
};
-export const NoRetry: Story< ErrorPlaceholderProps > = ( args ) => {
+export const NoRetry: StoryFn< ErrorPlaceholderProps > = ( args ) => {
return ;
};
NoRetry.args = {
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/external-link-card/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/external-link-card/stories/index.stories.tsx
similarity index 91%
rename from plugins/woocommerce-blocks/assets/js/editor-components/external-link-card/stories/index.tsx
rename to plugins/woocommerce-blocks/assets/js/editor-components/external-link-card/stories/index.stories.tsx
index 578b179eece..9bc59a27d06 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/external-link-card/stories/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/external-link-card/stories/index.stories.tsx
@@ -9,7 +9,7 @@ import type { Story, Meta } from '@storybook/react';
import ExternalLinkCard, { ExternalLinkCardProps } from '..';
export default {
- title: 'WooCommerce Blocks/editor-components/ExternalLinkCard',
+ title: 'Editor Components/ExternalLinkCard',
component: ExternalLinkCard,
} as Meta< ExternalLinkCardProps >;
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap b/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap
index b853b6a6eb9..bbe4da44b26 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap
@@ -47,13 +47,13 @@ Object {
class="woocommerce-search-list__search"
>