Add Notices Documentation to Storybook and upgrade to Storybook 7 (#1…

…1524)

* Rename stories

* MDX guidelines

* dedupe and fix dependencies

* Notice Banner Docs

* Fix root elements and icon library docs

* Fix ProductPrice stories

* Organise storybook structure

* Fix error placeholder story

* Snackbar docs

* Missing dotenv dependency

* Update storybook/main.js

Co-authored-by: Alex Florisca <[email protected]>

* Update assets/js/base/components/snackbar-list/docs/docs.mdx

Co-authored-by: Alex Florisca <[email protected]>

* Update assets/js/base/components/notice-banner/docs/docs.mdx

Co-authored-by: Alex Florisca <[email protected]>

* Update assets/js/base/components/snackbar-list/docs/docs.mdx

Co-authored-by: Alex Florisca <[email protected]>

* Update assets/js/base/components/snackbar-list/docs/docs.mdx

Co-authored-by: Alex Florisca <[email protected]>

* Update assets/js/base/components/snackbar-list/docs/docs.mdx

Co-authored-by: Alex Florisca <[email protected]>

* Update assets/js/base/components/snackbar-list/docs/docs.mdx

Co-authored-by: Alex Florisca <[email protected]>

* Update assets/js/base/components/snackbar-list/docs/docs.mdx

Co-authored-by: Alex Florisca <[email protected]>

* Update assets/js/base/components/snackbar-list/docs/docs.mdx

Co-authored-by: Alex Florisca <[email protected]>

* Update package lock

* update snaps

* fix json error check

---------

Co-authored-by: Alex Florisca <[email protected]>

.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',

assets/js/base/components/button/stories/index.tsx → 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',

assets/js/base/components/cart-checkout/totals/coupon/stories/index.tsx → 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,

assets/js/base/components/cart-checkout/totals/discount/stories/index.tsx → 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,

assets/js/base/components/cart-checkout/totals/footer-item/stories/index.tsx → 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,

assets/js/base/components/country-input/stories/index.tsx → 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,

assets/js/base/components/form-token-field/stories/index.tsx → 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 >;

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';
+
+<Meta name="Docs" of={ NoticeBannerStories } />
+
+# NoticeBanner
+
+An informational UI displayed near the top of the store pages.
+
+<Primary />
+
+## 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.
+
+<Canvas of={ NoticeBannerStories.Default } />
+
+### Informational Notices
+
+Blue notices with an info icon are used for general information for buyers, but do not require them to take an action.
+
+<Canvas of={ NoticeBannerStories.Info } />
+
+### 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.
+
+<Canvas of={ NoticeBannerStories.Error } />
+
+### Success Notices
+
+Green notices with a success icon are used to show an action was successful.
+
+<Canvas of={ NoticeBannerStories.Success } />
+
+### 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.
+
+<Canvas of={ NoticeBannerStories.Warning } />
+
+### 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.
+
+<Canvas of={ NoticeBannerStories.ErrorSummary } />
+
+## Development Guidelines
+
+### Props
+
+<ArgTypes />
+
+### 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';
+
+<NoticeBanner status="info">Your message here</NoticeBanner>;
+```
+
+#### Example: components within notices
+
+For more complex markup, you can wrap any JSX element:
+
+```jsx
+import { NoticeBanner } from '@woocommerce/base-components';
+
+<NoticeBanner status="error">
+	<p>
+		An error occurred: <code>{ errorDetails }</code>.
+	</p>
+</NoticeBanner>;
+```
+
+#### 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',
+];
+
+<NoticeBanner
+	status="error"
+	summary="There are errors in your form submission:"
+>
+	<ul>
+		{ errorMessages.map( ( message ) => (
+			<li key={ message }>{ message }</li>
+		) ) }
+	</ul>
+</NoticeBanner>;
+```
+
+The list of error messages is rendered within the NoticeBanner component using an unordered list (`<ul>`) and list items (`<li>`). The `status` prop is set to `error` to indicate that the notice represents an error message.

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,