Merge branch 'main' into sa-responsive-column-width

src/core/components/layout/columns.stories.tsx

@@ -1,15 +1,8 @@
-import React from 'react';
 import { Columns } from './index';
 
-const gridStoryWrapper = (storyFn: () => JSX.Element) => {
-	// override 8px margin applied globally to every preview body
-	return <div style={{ margin: '0 -8px' }}>{storyFn()}</div>;
-};
-
 export default {
 	title: 'Columns',
 	component: Columns,
-	decorators: [gridStoryWrapper],
 };
 
 export * from './stories/columns/default';

src/core/components/layout/container.stories.tsx

@@ -1,15 +1,8 @@
-import React from 'react';
 import { Container } from './index';
 
-const gridStoryWrapper = (storyFn: () => JSX.Element) => {
-	// override 8px margin applied globally to every preview body
-	return <div style={{ margin: '0 -8px' }}>{storyFn()}</div>;
-};
-
 export default {
 	title: 'Container',
 	component: Container,
-	decorators: [gridStoryWrapper],
 };
 
 export * from './stories/container/default';

src/core/components/layout/inline.stories.tsx

@@ -1,15 +1,8 @@
-import React from 'react';
 import { Inline } from './index';
 
-const gridStoryWrapper = (storyFn: () => JSX.Element) => {
-	// override 8px margin applied globally to every preview body
-	return <div style={{ margin: '0 -8px' }}>{storyFn()}</div>;
-};
-
 export default {
 	title: 'Inline',
 	component: Inline,
-	decorators: [gridStoryWrapper],
 };
 
 export * from './stories/inline/default';

src/core/components/layout/stack.stories.tsx

@@ -1,15 +1,8 @@
-import React from 'react';
 import { Stack } from './index';
 
-const gridStoryWrapper = (storyFn: () => JSX.Element) => {
-	// override 8px margin applied globally to every preview body
-	return <div style={{ margin: '0 -8px' }}>{storyFn()}</div>;
-};
-
 export default {
 	title: 'Stack',
 	component: Stack,
-	decorators: [gridStoryWrapper],
 };
 
 export * from './stories/stack/default';

src/core/components/layout/stories/columns/collapse-below.tsx

@@ -31,5 +31,6 @@ collapseBelowTablet.story = {
 	name: 'collapse below tablet',
 	parameters: {
 		viewport: { defaultViewport: 'phablet' },
+		layout: 'fullscreen',
 	},
 };

src/core/components/layout/stories/columns/with-width.tsx

@@ -89,6 +89,7 @@ withWidthDesktop.story = {
 	name: 'with width desktop',
 	parameters: {
 		viewport: { defaultViewport: 'desktop' },
+		layout: 'fullscreen',
 	},
 };
 
@@ -98,5 +99,6 @@ withWidthTablet.story = {
 	name: 'with width tablet',
 	parameters: {
 		viewport: { defaultViewport: 'tablet' },
+		layout: 'fullscreen',
 	},
 };

src/core/components/layout/tiles.stories.tsx

@@ -1,15 +1,8 @@
-import React from 'react';
 import { Tiles } from './index';
 
-const gridStoryWrapper = (storyFn: () => JSX.Element) => {
-	// override 8px margin applied globally to every preview body
-	return <div style={{ margin: '0 -8px' }}>{storyFn()}</div>;
-};
-
 export default {
 	title: 'Tiles',
 	component: Tiles,
-	decorators: [gridStoryWrapper],
 };
 
 export * from './stories/tiles/default';