From e7aef6d75438fb262ac8343a666c556604908470 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 20 Oct 2022 10:37:22 +1000
Subject: [PATCH 1/2] Storybook: Addon to wrap stories in max-width div
---
storybook/decorators/with-wrapper.js | 29 ++++++++++++++++++++++++++++
storybook/preview.js | 14 ++++++++++++++
2 files changed, 43 insertions(+)
create mode 100644 storybook/decorators/with-wrapper.js
diff --git a/storybook/decorators/with-wrapper.js b/storybook/decorators/with-wrapper.js
new file mode 100644
index 0000000000000..c129b1ffe23c3
--- /dev/null
+++ b/storybook/decorators/with-wrapper.js
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+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;
+ padding: 16px;
+`;
+
+export const WithWrapper = ( Story, context ) => {
+ if ( context.globals.wrapper === 'none' ) {
+ return ;
+ }
+
+ return (
+ <>
+
+
+
+
+ );
+};
diff --git a/storybook/preview.js b/storybook/preview.js
index 71d673656505b..38572538d7d1d 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -5,6 +5,7 @@ import { WithGlobalCSS } from './decorators/with-global-css';
import { WithMarginChecker } from './decorators/with-margin-checker';
import { WithRTL } from './decorators/with-rtl';
import { WithTheme } from './decorators/with-theme';
+import { WithWrapper } from './decorators/with-wrapper';
import './style.scss';
export const globalTypes = {
@@ -63,6 +64,18 @@ export const globalTypes = {
],
},
},
+ wrapper: {
+ name: 'Wrapper',
+ description: 'Wrap the component in a div with a max-width.',
+ defaultValue: 'none',
+ toolbar: {
+ icon: 'outline',
+ items: [
+ { value: 'none', title: 'None' },
+ { value: 'wordpress-sidebar', title: 'WP Sidebar' },
+ ],
+ },
+ },
};
export const decorators = [
@@ -70,6 +83,7 @@ export const decorators = [
WithGlobalCSS,
WithMarginChecker,
WithRTL,
+ WithWrapper,
];
export const parameters = {
From a04734fd484433f0f489e08fb1b97b8a66d19776 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 21 Oct 2022 09:51:22 +1000
Subject: [PATCH 2/2] Rename and clean up max-width addon
---
.../decorators/with-max-width-wrapper.js | 40 +++++++++++++++++++
storybook/decorators/with-wrapper.js | 29 --------------
storybook/preview.js | 8 ++--
3 files changed, 44 insertions(+), 33 deletions(-)
create mode 100644 storybook/decorators/with-max-width-wrapper.js
delete mode 100644 storybook/decorators/with-wrapper.js
diff --git a/storybook/decorators/with-max-width-wrapper.js b/storybook/decorators/with-max-width-wrapper.js
new file mode 100644
index 0000000000000..ff979b93f213b
--- /dev/null
+++ b/storybook/decorators/with-max-width-wrapper.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+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;
+ align-items: center;
+ height: 32px;
+ background: #e0e0e0;
+ text-transform: uppercase;
+ font-size: 11px;
+ font-weight: 500;
+ color: #757575;
+ margin-top: 24px;
+`;
+
+export const WithMaxWidthWrapper = ( Story, context ) => {
+ if ( context.globals.maxWidthWrapper === 'none' ) {
+ return ;
+ }
+
+ return (
+
+
+ Max-Width Wrapper - 248px
+
+ );
+};
diff --git a/storybook/decorators/with-wrapper.js b/storybook/decorators/with-wrapper.js
deleted file mode 100644
index c129b1ffe23c3..0000000000000
--- a/storybook/decorators/with-wrapper.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-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;
- padding: 16px;
-`;
-
-export const WithWrapper = ( Story, context ) => {
- if ( context.globals.wrapper === 'none' ) {
- return ;
- }
-
- return (
- <>
-
-
-
-
- );
-};
diff --git a/storybook/preview.js b/storybook/preview.js
index 38572538d7d1d..16e8f71cf5346 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -3,9 +3,9 @@
*/
import { WithGlobalCSS } from './decorators/with-global-css';
import { WithMarginChecker } from './decorators/with-margin-checker';
+import { WithMaxWidthWrapper } from './decorators/with-max-width-wrapper';
import { WithRTL } from './decorators/with-rtl';
import { WithTheme } from './decorators/with-theme';
-import { WithWrapper } from './decorators/with-wrapper';
import './style.scss';
export const globalTypes = {
@@ -64,8 +64,8 @@ export const globalTypes = {
],
},
},
- wrapper: {
- name: 'Wrapper',
+ maxWidthWrapper: {
+ name: 'Max-Width Wrapper',
description: 'Wrap the component in a div with a max-width.',
defaultValue: 'none',
toolbar: {
@@ -83,7 +83,7 @@ export const decorators = [
WithGlobalCSS,
WithMarginChecker,
WithRTL,
- WithWrapper,
+ WithMaxWidthWrapper,
];
export const parameters = {