Storybook: Addon to wrap stories in max-width div (#45134)

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 <Story { ...context } />;
+	}
+
+	return (
+		<Wrapper>
+			<Story { ...context } />
+			<Indicator>Max-Width Wrapper - 248px</Indicator>
+		</Wrapper>
+	);
+};

storybook/preview.js

@@ -3,6 +3,7 @@
  */
 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 './style.scss';
@@ -63,13 +64,26 @@ export const globalTypes = {
 			],
 		},
 	},
+	maxWidthWrapper: {
+		name: 'Max-Width 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 = [
 	WithTheme,
 	WithGlobalCSS,
 	WithMarginChecker,
 	WithRTL,
+	WithMaxWidthWrapper,
 ];
 
 export const parameters = {