keep string values

WordPress · Dec 18, 2024 · 6ba8e0f · 6ba8e0f
1 parent ea65cb6
commit 6ba8e0f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/storybook/decorators/with-max-width-wrapper.js b/storybook/decorators/with-max-width-wrapper.js
@@ -3,6 +3,13 @@
  */
 import styled from '@emotion/styled';
 
+const maxWidthWrapperMap = {
+	none: 0,
+	'wordpress-sidebar': 248,
+	'large-container': 960,
+	'small-container': 600,
+};
+
 const Indicator = styled.div`
 	display: flex;
 	justify-content: center;
@@ -22,7 +29,7 @@ export const WithMaxWidthWrapper = ( Story, context ) => {
 	 * 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;
+	const maxWidth = maxWidthWrapperMap[ context.globals.maxWidthWrapper ];
 	if ( ! maxWidth ) {
 		return <Story { ...context } />;
 	}

diff --git a/storybook/preview.js b/storybook/preview.js
@@ -84,10 +84,10 @@ export const globalTypes = {
 		toolbar: {
 			icon: 'outline',
 			items: [
-				{ value: 0, title: 'None' },
-				{ value: 248, title: 'WP Sidebar' },
-				{ value: 960, title: 'Large container' },
-				{ value: 600, title: 'Small container' },
+				{ value: 'none', title: 'None' },
+				{ value: 'wordpress-sidebar', title: 'WP Sidebar' },
+				{ value: 'large-container', title: 'Large container' },
+				{ value: 'small-container', title: 'Small container' },
 			],
 		},
 	},