Storybook: Add margin checker tool (#43223)

storybook/decorators/with-margin-checker.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ *  A Storybook decorator to show a div before and after the story to check for unwanted margins.
+ */
+
+const Bumper = styled.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 32px;
+	background-image: repeating-linear-gradient(
+		45deg,
+		transparent,
+		transparent 2px,
+		#e0e0e0 2px,
+		#e0e0e0 14px
+	);
+	text-transform: uppercase;
+	font-size: 11px;
+	font-weight: 500;
+	color: #757575;
+`;
+
+export const WithMarginChecker = ( Story, context ) => {
+	if ( context.globals.marginChecker === 'hide' ) {
+		return <Story { ...context } />;
+	}
+
+	return (
+		<>
+			<Bumper>Margin Checker</Bumper>
+			<Story { ...context } />
+			<Bumper>Margin Checker</Bumper>
+		</>
+	);
+};

storybook/preview.js

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { WithGlobalCSS } from './decorators/with-global-css';
+import { WithMarginChecker } from './decorators/with-margin-checker';
 import { WithRTL } from './decorators/with-rtl';
 import './style.scss';
 
@@ -32,9 +33,22 @@ export const globalTypes = {
 			],
 		},
 	},
+	marginChecker: {
+		name: 'Margin Checker',
+		description:
+			'Show a div before and after the component to check for unwanted margins.',
+		defaultValue: 'hide',
+		toolbar: {
+			icon: 'collapse',
+			items: [
+				{ value: 'hide', title: 'Hide' },
+				{ value: 'show', title: 'Show' },
+			],
+		},
+	},
 };
 
-export const decorators = [ WithGlobalCSS, WithRTL ];
+export const decorators = [ WithGlobalCSS, WithMarginChecker, WithRTL ];
 
 export const parameters = {
 	controls: {