From 6ba8e0f3023445415e070e2fd44d2dc0bdd0b2d0 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 18 Dec 2024 11:06:24 +0200
Subject: [PATCH] keep string values

---
 storybook/decorators/with-max-width-wrapper.js | 9 ++++++++-
 storybook/preview.js                           | 8 ++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/storybook/decorators/with-max-width-wrapper.js b/storybook/decorators/with-max-width-wrapper.js
index 137fa97506c31a..db22d0b89ffaf1 100644
--- 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
index 704b2af9617f37..fb42a1a91d76ff 100644
--- 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' },
 			],
 		},
 	},