Update ToggleSwitch.features.stories.tsx stories to no longer use styled-components (#6414)

Author: llastflowers

packages/react/src/ToggleSwitch/ToggleSwitch.features.stories.module.css

@@ -0,0 +1,27 @@
+.Row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--base-size-16);
+}
+
+.ColGrow {
+  flex-grow: 1;
+}
+
+.ToggleLabel {
+  font-weight: var(--base-text-weight-semibold);
+  font-size: var(--text-body-size-medium);
+  display: block;
+}
+
+.SwitchLabel {
+  font-weight: var(--base-text-weight-semibold);
+  font-size: var(--text-title-size-small);
+  display: block;
+}
+
+.SwitchCaption {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-medium);
+  display: block;
+}

packages/react/src/ToggleSwitch/ToggleSwitch.features.stories.tsx

@@ -1,77 +1,78 @@
 import React from 'react'
 import ToggleSwitch from './ToggleSwitch'
-import {Box, Text} from '..'
 import {action} from 'storybook/actions'
 import ToggleSwitchStoryWrapper from './ToggleSwitchStoryWrapper'
+import {clsx} from 'clsx'
+import styles from './ToggleSwitch.features.stories.module.css'
 
 export default {
   title: 'Components/ToggleSwitch/Features',
 }
 
 export const Small = () => (
   <ToggleSwitchStoryWrapper>
-    <Text id="toggle" fontWeight={'bold'} fontSize={1}>
+    <span id="toggle" className={styles.ToggleLabel}>
       Toggle label
-    </Text>
+    </span>
     <ToggleSwitch size="small" aria-labelledby="toggle" />
   </ToggleSwitchStoryWrapper>
 )
 
 export const WithCaption = () => (
-  <Box display="flex" alignItems={'start'}>
-    <Box flexGrow={1}>
-      <Text fontSize={2} fontWeight="bold" id="switchLabel" display="block">
+  <div className={styles.Row}>
+    <div className={styles.ColGrow}>
+      <span className={styles.SwitchLabel} id="switchLabel">
         Notifications
-      </Text>
-      <Text color="fg.subtle" fontSize={1} id="switchCaption" display="block">
+      </span>
+      <span className={styles.SwitchCaption} id="switchCaption">
         Notifications will be delivered via email and the GitHub notification center
-      </Text>
-    </Box>
+      </span>
+    </div>
     <ToggleSwitch aria-labelledby="switchLabel" aria-describedby="switchCaption" />
-  </Box>
+  </div>
 )
 
 export const Disabled = () => (
   <ToggleSwitchStoryWrapper>
-    <Text id="toggle" fontWeight={'bold'} fontSize={1}>
+    <span id="toggle" className={styles.ToggleLabel}>
       Toggle label
-    </Text>
+    </span>
     <ToggleSwitch disabled aria-labelledby="toggle" />
   </ToggleSwitchStoryWrapper>
 )
 
 export const Checked = () => (
   <ToggleSwitchStoryWrapper>
-    <Text id="toggle" fontWeight={'bold'} fontSize={1}>
+    <span id="toggle" className={styles.ToggleLabel}>
       Toggle label
-    </Text>
+    </span>
     <ToggleSwitch checked aria-labelledby="toggle" />
   </ToggleSwitchStoryWrapper>
 )
 
 export const CheckedDisabled = () => (
   <ToggleSwitchStoryWrapper>
-    <Text id="toggle" fontWeight={'bold'} fontSize={1}>
+    <span id="toggle" className={styles.ToggleLabel}>
       Toggle label
-    </Text>
+    </span>
     <ToggleSwitch checked disabled aria-labelledby="toggle" />
   </ToggleSwitchStoryWrapper>
 )
 
 export const Loading = () => (
   <ToggleSwitchStoryWrapper>
-    <Text id="toggle" fontWeight={'bold'} fontSize={1}>
+    <span id="toggle" className={styles.ToggleLabel}>
       Toggle label
-    </Text>
+    </span>
     <ToggleSwitch loading aria-labelledby="toggle" />
   </ToggleSwitchStoryWrapper>
 )
 
 export const LabelEnd = () => (
   <ToggleSwitchStoryWrapper>
-    <Text id="toggle" fontWeight={'bold'} fontSize={1}>
+    <span id="toggle" className={styles.ToggleLabel}>
       Toggle label
-    </Text>
+    </span>
     <ToggleSwitch statusLabelPosition="end" aria-labelledby="toggle" />
   </ToggleSwitchStoryWrapper>
 )
@@ -89,12 +90,12 @@ export const Controlled = () => {
 
   return (
     <>
-      <Box display="flex" maxWidth="300px">
-        <Box flexGrow={1} fontSize={2} fontWeight="bold" id="switchLabel">
+      <div className={styles.Row} style={{maxWidth: '300px'}}>
+        <span className={clsx(styles.ColGrow, styles.SwitchLabel)} id="switchLabel">
           Notifications
-        </Box>
+        </span>
         <ToggleSwitch onClick={onClick} onChange={handleSwitchChange} checked={isOn} aria-labelledby="switchLabel" />
-      </Box>
+      </div>
       <p>The switch is {isOn ? 'on' : 'off'}</p>
     </>
   )