Fix ToggleSwitch stories for Storybook 7 (#3381)

* fixes stories

* cleans up ToggleSwitch feature stories

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: mperrotti <mperrotti@users.noreply.github.com>

generated/components.json

@@ -4446,7 +4446,7 @@
       "stories": [
         {
           "id": "components-toggleswitch--default",
-          "code": "<Box\n  display=\"grid\"\n  gridTemplateColumns={'max-content auto'}\n  maxWidth={'20rem'}\n  alignItems={'center'}\n  justifyContent={'space-between'}\n>\n  <Text id=\"toggle\" fontWeight={'bold'} fontSize={2}>\n    Toggle label\n  </Text>\n  <ToggleSwitch aria-labelledby=\"toggle\" />\n</Box>"
+          "code": "() => (\n  <>\n    <Text id=\"toggle\" fontWeight=\"bold\" fontSize={1}>\n      Toggle label\n    </Text>\n    <ToggleSwitch aria-labelledby=\"toggle\" />\n  </>\n)"
         }
       ],
       "props": [

src/ToggleSwitch/ToggleSwitch.features.stories.tsx

@@ -2,24 +2,19 @@ import React from 'react'
 import ToggleSwitch from './ToggleSwitch'
 import {Box, Text} from '..'
 import {action} from '@storybook/addon-actions'
+import ToggleSwitchStoryWrapper from './ToggleSwitchStoryWrapper'
 
 export default {
   title: 'Components/ToggleSwitch/Features',
 }
 
 export const Small = () => (
-  <Box
-    display="grid"
-    gridTemplateColumns="max-content auto"
-    maxWidth={'20rem'}
-    alignItems={'center'}
-    justifyContent={'space-between'}
-  >
+  <ToggleSwitchStoryWrapper>
     <Text id="toggle" fontWeight={'bold'} fontSize={1}>
       Toggle label
     </Text>
     <ToggleSwitch size="small" aria-labelledby="toggle" />
-  </Box>
+  </ToggleSwitchStoryWrapper>
 )
 
 export const WithCaption = () => (
@@ -37,78 +32,48 @@ export const WithCaption = () => (
 )
 
 export const Disabled = () => (
-  <Box
-    display="grid"
-    gridTemplateColumns={'max-content auto'}
-    maxWidth={'20rem'}
-    alignItems={'center'}
-    justifyContent={'space-between'}
-  >
+  <ToggleSwitchStoryWrapper>
     <Text id="toggle" fontWeight={'bold'} fontSize={1}>
       Toggle label
     </Text>
     <ToggleSwitch disabled aria-labelledby="toggle" />
-  </Box>
+  </ToggleSwitchStoryWrapper>
 )
 
 export const Checked = () => (
-  <Box
-    display="grid"
-    gridTemplateColumns={'max-content auto'}
-    maxWidth={'20rem'}
-    alignItems={'center'}
-    justifyContent={'space-between'}
-  >
+  <ToggleSwitchStoryWrapper>
     <Text id="toggle" fontWeight={'bold'} fontSize={1}>
       Toggle label
     </Text>
     <ToggleSwitch checked aria-labelledby="toggle" />
-  </Box>
+  </ToggleSwitchStoryWrapper>
 )
 
 export const CheckedDisabled = () => (
-  <Box
-    display="grid"
-    gridTemplateColumns={'max-content auto'}
-    maxWidth={'20rem'}
-    alignItems={'center'}
-    justifyContent={'space-between'}
-  >
+  <ToggleSwitchStoryWrapper>
     <Text id="toggle" fontWeight={'bold'} fontSize={1}>
       Toggle label
     </Text>
     <ToggleSwitch checked disabled aria-labelledby="toggle" />
-  </Box>
+  </ToggleSwitchStoryWrapper>
 )
 
 export const Loading = () => (
-  <Box
-    display="grid"
-    gridTemplateColumns={'max-content auto'}
-    maxWidth={'20rem'}
-    alignItems={'center'}
-    justifyContent={'space-between'}
-  >
+  <ToggleSwitchStoryWrapper>
     <Text id="toggle" fontWeight={'bold'} fontSize={1}>
       Toggle label
     </Text>
     <ToggleSwitch loading aria-labelledby="toggle" />
-  </Box>
+  </ToggleSwitchStoryWrapper>
 )
 
 export const LabelEnd = () => (
-  <Box
-    display="grid"
-    gridTemplateColumns={'max-content auto'}
-    maxWidth={'20rem'}
-    alignItems={'center'}
-    justifyContent={'space-between'}
-  >
+  <ToggleSwitchStoryWrapper>
     <Text id="toggle" fontWeight={'bold'} fontSize={1}>
       Toggle label
     </Text>
     <ToggleSwitch statusLabelPosition="end" aria-labelledby="toggle" />
-  </Box>
+  </ToggleSwitchStoryWrapper>
 )
 
 export const Controlled = () => {

src/ToggleSwitch/ToggleSwitch.stories.tsx

@@ -1,27 +1,27 @@
 import React from 'react'
-import {Meta, ComponentStory} from '@storybook/react'
+import {Meta, StoryFn} from '@storybook/react'
 import {ComponentProps} from '../utils/types'
-import {Box, Text} from '../'
 import ToggleSwitch from './ToggleSwitch'
+import {Text} from '..'
+import ToggleSwitchStoryWrapper from './ToggleSwitchStoryWrapper'
 
 export default {
   title: 'Components/ToggleSwitch',
   component: ToggleSwitch,
+  decorators: [
+    Story => {
+      return <ToggleSwitchStoryWrapper>{Story()}</ToggleSwitchStoryWrapper>
+    },
+  ],
 } as Meta<ComponentProps<typeof ToggleSwitch>>
 
-export const Playground: ComponentStory<typeof ToggleSwitch> = args => (
-  <Box
-    display="grid"
-    gridTemplateColumns={'max-content auto'}
-    maxWidth={'20rem'}
-    alignItems={'center'}
-    justifyContent={'space-between'}
-  >
+export const Playground: StoryFn<typeof ToggleSwitch> = args => (
+  <>
     <Text id="toggle" fontWeight={'bold'} fontSize={2}>
       Toggle label
     </Text>
     <ToggleSwitch {...args} aria-labelledby="toggle" />
-  </Box>
+  </>
 )
 
 Playground.args = {
@@ -54,17 +54,11 @@ Playground.argTypes = {
   },
 }
 
-export const Default = (
-  <Box
-    display="grid"
-    gridTemplateColumns={'max-content auto'}
-    maxWidth={'20rem'}
-    alignItems={'center'}
-    justifyContent={'space-between'}
-  >
-    <Text id="toggle" fontWeight={'bold'} fontSize={2}>
+export const Default = () => (
+  <>
+    <Text id="toggle" fontWeight="bold" fontSize={1}>
       Toggle label
     </Text>
     <ToggleSwitch aria-labelledby="toggle" />
-  </Box>
+  </>
 )

src/ToggleSwitch/ToggleSwitchStoryWrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {Box} from '..'
+
+const ToggleSwitchStoryWrapper: React.FC<React.PropsWithChildren> = ({children}) => (
+  <Box
+    display="grid"
+    gridTemplateColumns="max-content auto"
+    maxWidth="20rem"
+    alignItems="center"
+    justifyContent="space-between"
+  >
+    {children}
+  </Box>
+)
+
+export default ToggleSwitchStoryWrapper