Storybook: Add more max-width containers

WordPress · Dec 18, 2024 · 131baca · 131baca
1 parent 287d653
commit 131baca
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 deletions.
diff --git a/storybook/decorators/with-max-width-wrapper.js b/storybook/decorators/with-max-width-wrapper.js
@@ -3,16 +3,6 @@
  */
 import styled from '@emotion/styled';
 
-/**
- * A Storybook decorator to wrap a story in a div applying a max width and
- * padding. This can be used to simulate real world constraints on components
- * such as being located within the WordPress editor sidebars.
- */
-
-const Wrapper = styled.div`
-	max-width: 248px;
-`;
-
 const Indicator = styled.div`
 	display: flex;
 	justify-content: center;
@@ -27,14 +17,19 @@ const Indicator = styled.div`
 `;
 
 export const WithMaxWidthWrapper = ( Story, context ) => {
-	if ( context.globals.maxWidthWrapper === 'none' ) {
+	/**
+	 * A Storybook decorator to wrap a story in a div applying a max width.
+	 * This can be used to simulate real world constraints on components
+	 * such as being located within the WordPress editor sidebars.
+	 */
+	const maxWidth = context.globals.maxWidthWrapper;
+	if ( ! context.globals.maxWidthWrapper ) {
 		return <Story { ...context } />;
 	}
-
 	return (
-		<Wrapper>
+		<div style={ { maxWidth } }>
 			<Story { ...context } />
-			<Indicator>Max-Width Wrapper - 248px</Indicator>
-		</Wrapper>
+			<Indicator>{ `Max-Width Wrapper - ${ maxWidth }px` }</Indicator>
+		</div>
 	);
 };
diff --git a/storybook/preview.js b/storybook/preview.js
@@ -84,8 +84,10 @@ export const globalTypes = {
 		toolbar: {
 			icon: 'outline',
 			items: [
-				{ value: 'none', title: 'None' },
-				{ value: 'wordpress-sidebar', title: 'WP Sidebar' },
+				{ value: 0, title: 'None' },
+				{ value: 248, title: 'WP Sidebar' },
+				{ value: 960, title: 'Large container' },
+				{ value: 600, title: 'Small container' },
 			],
 		},
 	},