Added a story

WordPress · Aug 9, 2023 · 513f1ca · 513f1ca
1 parent 5440b1e
commit 513f1ca
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ### New Feature
 
+-   Add a new `ProgressBar` component. ([#53030](https://github.com/WordPress/gutenberg/pull/53030)).
+
 ### Enhancements
 
 -   `ColorPalette`, `BorderControl`: Don't hyphenate hex value in `aria-label` ([#52932](https://github.com/WordPress/gutenberg/pull/52932)).

diff --git a/packages/components/src/modal/stories/index.tsx b/packages/components/src/modal/stories/index.tsx
@@ -7,11 +7,13 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { help, starEmpty, starFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Button from '../../button';
+import Tooltip from '../../tooltip';
 import InputControl from '../../input-control';
 import Modal from '../';
 import type { ModalProps } from '../types';
@@ -87,6 +89,56 @@ const Template: ComponentStory< typeof Modal > = ( {
 	);
 };
 
+const TemplateWithAuxiliaryAction: ComponentStory< typeof Modal > = ( {
+	onRequestClose,
+	...args
+} ) => {
+	const [ isLiked, setIsLiked ] = useState( false );
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {
+		setOpen( false );
+		onRequestClose( event );
+	};
+	const auxiliaryActions = (
+		<>
+			<Button
+				icon={ isLiked ? starFilled : starEmpty }
+				label="Like"
+				onClick={ () => setIsLiked( ! isLiked ) }
+			/>
+			<Tooltip text="We are here to help!">
+				<Button icon={ help } label="Help" />
+			</Tooltip>
+		</>
+	);
+
+	return (
+		<>
+			<Button variant="secondary" onClick={ openModal }>
+				Open Modal with Auxiliary Actions
+			</Button>
+			{ isOpen && (
+				<Modal
+					style={ { maxWidth: '600px' } }
+					isDismissible={ false }
+					onRequestClose={ closeModal }
+					auxiliaryActions={ auxiliaryActions }
+					{ ...args }
+				>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+						sed do eiusmod tempor incididunt ut labore et magna
+						aliqua.
+					</p>
+					<Button variant="secondary" onClick={ closeModal }>
+						Close Modal
+					</Button>
+				</Modal>
+			) }
+		</>
+	);
+};
 export const Default: ComponentStory< typeof Modal > = Template.bind( {} );
 Default.args = {
 	title: 'Title',
@@ -98,3 +150,17 @@ Default.parameters = {
 		},
 	},
 };
+
+export const WithAuxiliaryActions: ComponentStory< typeof Modal > =
+	TemplateWithAuxiliaryAction.bind( {} );
+WithAuxiliaryActions.args = {
+	...Default.args,
+};
+WithAuxiliaryActions.argTypes = {
+	isDismissible: {
+		control: { type: 'boolean' },
+	},
+};
+WithAuxiliaryActions.parameters = {
+	...Default.parameters,
+};