From 131bacaa4a1ae7277bc0636f909218399c16ee52 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 18 Dec 2024 10:19:13 +0200 Subject: [PATCH 1/4] Storybook: Add more `max-width` containers --- .../decorators/with-max-width-wrapper.js | 25 ++++++++----------- storybook/preview.js | 6 +++-- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/storybook/decorators/with-max-width-wrapper.js b/storybook/decorators/with-max-width-wrapper.js index ff979b93f213bf..9389f7aa5092dc 100644 --- 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 ; } - return ( - +
- Max-Width Wrapper - 248px - + { `Max-Width Wrapper - ${ maxWidth }px` } +
); }; diff --git a/storybook/preview.js b/storybook/preview.js index b29fceec846ffe..704b2af9617f37 100644 --- 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' }, ], }, }, From ea65cb6e0eab65181996d8e9657f4c5a8f05fdcd Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 18 Dec 2024 10:59:50 +0200 Subject: [PATCH 2/4] Update storybook/decorators/with-max-width-wrapper.js Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> --- storybook/decorators/with-max-width-wrapper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/decorators/with-max-width-wrapper.js b/storybook/decorators/with-max-width-wrapper.js index 9389f7aa5092dc..137fa97506c31a 100644 --- a/storybook/decorators/with-max-width-wrapper.js +++ b/storybook/decorators/with-max-width-wrapper.js @@ -23,7 +23,7 @@ export const WithMaxWidthWrapper = ( Story, context ) => { * such as being located within the WordPress editor sidebars. */ const maxWidth = context.globals.maxWidthWrapper; - if ( ! context.globals.maxWidthWrapper ) { + if ( ! maxWidth ) { return ; } return ( From 6ba8e0f3023445415e070e2fd44d2dc0bdd0b2d0 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 18 Dec 2024 11:06:24 +0200 Subject: [PATCH 3/4] 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 ; } 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' }, ], }, }, From 80c6ce4dafdbdddea5e38ed45dfabb7e18ce814b Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 18 Dec 2024 11:35:52 +0200 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> --- storybook/decorators/with-max-width-wrapper.js | 2 +- storybook/preview.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/storybook/decorators/with-max-width-wrapper.js b/storybook/decorators/with-max-width-wrapper.js index db22d0b89ffaf1..84fb73f20b68f7 100644 --- a/storybook/decorators/with-max-width-wrapper.js +++ b/storybook/decorators/with-max-width-wrapper.js @@ -6,8 +6,8 @@ import styled from '@emotion/styled'; const maxWidthWrapperMap = { none: 0, 'wordpress-sidebar': 248, - 'large-container': 960, 'small-container': 600, + 'large-container': 960, }; const Indicator = styled.div` diff --git a/storybook/preview.js b/storybook/preview.js index fb42a1a91d76ff..8372103cd99444 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -86,8 +86,8 @@ export const globalTypes = { items: [ { value: 'none', title: 'None' }, { value: 'wordpress-sidebar', title: 'WP Sidebar' }, - { value: 'large-container', title: 'Large container' }, { value: 'small-container', title: 'Small container' }, + { value: 'large-container', title: 'Large container' }, ], }, },