Fix jsxImportSource in story files

sumup-oss · Jul 14, 2023 · d2e373a · d2e373a
1 parent 641324b
commit d2e373a
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 42 deletions.
diff --git a/packages/circuit-ui/components/List/List.stories.tsx b/packages/circuit-ui/components/List/List.stories.tsx
@@ -15,8 +15,7 @@
 
 import { Fragment } from 'react';
 
-import Body from '../Body/index.js';
-import { spacing } from '../../styles/style-mixins.js';
+import { Stack } from '../../../../.storybook/components/index.js';
 
 import { List, ListProps } from './List.js';
 
@@ -40,31 +39,27 @@ export const Base = (args: ListProps) => (
 
 const variants: ListProps['variant'][] = ['unordered', 'ordered'];
 
-export const Variants = (args: ListProps) =>
-  variants.map((variant) => (
-    <List
-      key={variant}
-      {...args}
-      variant={variant}
-      css={spacing({ bottom: 'giga' })}
-    >
-      <ListItems />
-    </List>
-  ));
+export const Variants = (args: ListProps) => (
+  <Stack vertical>
+    {variants.map((variant) => (
+      <List key={variant} {...args} variant={variant}>
+        <ListItems />
+      </List>
+    ))}
+  </Stack>
+);
 
 const sizes: ListProps['size'][] = ['one', 'two'];
 
-export const Sizes = (args: ListProps) =>
-  sizes.map((size) => (
-    <>
-      <Body size={size} css={spacing({ bottom: 'mega' })}>
-        Use List size {size} with Body {size} text.
-      </Body>
-      <List key={size} {...args} size={size} css={spacing({ bottom: 'giga' })}>
+export const Sizes = (args: ListProps) => (
+  <Stack vertical>
+    {sizes.map((size) => (
+      <List key={size} {...args} size={size}>
         <ListItems />
       </List>
-    </>
-  ));
+    ))}
+  </Stack>
+);
 
 export const Nested = (args: ListProps) => (
   <List {...args}>

diff --git a/packages/circuit-ui/components/Modal/Modal.stories.tsx b/packages/circuit-ui/components/Modal/Modal.stories.tsx
@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-/* eslint-disable react/display-name */
 import { Fragment } from 'react';
 
 import { Stack } from '../../../../.storybook/components/index.js';
@@ -22,7 +21,6 @@ import Headline from '../Headline/index.js';
 import Body from '../Body/index.js';
 import Image from '../Image/index.js';
 import { ModalProvider } from '../ModalContext/index.js';
-import { spacing } from '../../styles/style-mixins.js';
 
 import { Modal, ModalProps, useModal } from './Modal.js';
 
@@ -34,7 +32,7 @@ export default {
 
 const defaultModalChildren = () => (
   <Fragment>
-    <Headline as="h2" size="four" css={spacing({ bottom: 'giga' })}>
+    <Headline as="h2" size="four" style={{ marginBottom: '1rem' }}>
       Hello World!
     </Headline>
     <Body>I am a modal.</Body>
@@ -109,10 +107,10 @@ export const PreventClose = (modal: ModalProps): JSX.Element => {
 PreventClose.args = {
   children: ({ onClose }: { onClose: ModalProps['onClose'] }) => (
     <Fragment>
-      <Headline as="h2" size="four" css={spacing({ bottom: 'giga' })}>
+      <Headline as="h2" size="four" style={{ marginBottom: '1rem' }}>
         Complete the action
       </Headline>
-      <Body css={spacing({ bottom: 'giga' })}>
+      <Body style={{ marginBottom: '1rem' }}>
         Users have to complete the action inside the modal to close it. The
         close button is hidden and clicking outside the modal or pressing the
         escape key does not close the modal either.
@@ -169,10 +167,10 @@ CustomStyles.args = {
           borderTopRightRadius: 'var(--cui-border-radius-mega)',
         }}
       />
-      <Headline as="h2" size="four" css={spacing('giga')}>
+      <Headline as="h2" size="four" style={{ margin: '1rem' }}>
         Custom styles
       </Headline>
-      <Body css={spacing('giga')}>
+      <Body style={{ margin: '1rem' }}>
         Custom styles can be applied using the <code>css</code> prop.
       </Body>
     </Fragment>

diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx b/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx
@@ -24,7 +24,6 @@ import { TopNavigation } from '../TopNavigation/index.js';
 import { baseArgs as topNavigationProps } from '../TopNavigation/TopNavigation.stories.js';
 import { SideNavigation } from '../SideNavigation/index.js';
 import { baseArgs as sideNavigationProps } from '../SideNavigation/SideNavigation.stories.js';
-import { spacing } from '../../styles/style-mixins.js';
 
 import { SidePanelProvider } from './SidePanelContext.js';
 import {
@@ -69,7 +68,7 @@ const basePlay = ({ canvasElement }: { canvasElement: HTMLCanvasElement }) => {
 };
 
 const StoryInstructions = () => (
-  <Body css={spacing('mega')}>
+  <Body style={{ margin: '1rem' }}>
     Select an item to open its details in a side panel. When this story is
     viewed in canvas mode we simulate a selection of the third item.
   </Body>
@@ -98,12 +97,12 @@ const DefaultChildren = ({
 
   return (
     <>
-      <Body css={spacing({ bottom: 'mega' })}>
+      <Body style={{ marginBottom: '1rem' }}>
         {showMoreInfo
           ? `These are the details of ${label}.`
           : `This is more information about ${label}.`}
       </Body>
-      <Body css={spacing({ bottom: 'mega' })}>
+      <Body style={{ marginBottom: '1rem' }}>
         {
           'Lorem ipsum dolor amet swag pickled humblebrag retro farm-to-table, shoreditch typewriter deep v single-origin coffee green juice coloring book venmo chambray. Marfa authentic blue bottle mixtape tofu adaptogen. IPhone chia blog palo santo mlkshk tattooed jean shorts yr locavore ennui scenester. Wolf tousled pok pok sartorial scenester man bun salvia quinoa raclette sriracha roof party pour-over venmo hammock. Four dollar toast typewriter 3 wolf moon letterpress disrupt pabst. Neutra irony tousled iPhone banh mi wayfarers hoodie waistcoat.'
         }
@@ -127,7 +126,7 @@ const DefaultChildren = ({
               headline: 'More information',
             })
           }
-          css={spacing({ bottom: 'mega' })}
+          style={{ marginBottom: '1rem' }}
         >
           Show more
         </Button>
@@ -140,7 +139,7 @@ const DefaultChildren = ({
               variant="tertiary"
               size="kilo"
               onClick={onBack}
-              css={spacing({ bottom: 'mega' })}
+              style={{ marginBottom: '1rem' }}
             >
               Back
             </Button>
@@ -150,7 +149,7 @@ const DefaultChildren = ({
             variant="tertiary"
             size="kilo"
             onClick={onClose}
-            css={spacing({ left: 'mega', bottom: 'mega' })}
+            style={{ marginBottom: '1rem', marginLeft: '1rem' }}
           >
             Close
           </Button>
@@ -182,7 +181,7 @@ const ComponentWithSidePanel = (props: SidePanelHookProps) => {
       }))}
       label="List of items with details in a side panel"
       hideLabel
-      css={spacing('mega')}
+      style={{ margin: '1rem' }}
     />
   );
 };
@@ -216,7 +215,7 @@ export const WithTopNavigation = (props: SidePanelHookProps): JSX.Element => {
           onClose={() => setSideNavigationOpen(false)}
         />
         <div style={{ flex: '1' }}>
-          <SidePanelProvider withTopNavigation>
+          <SidePanelProvider>
             <StoryInstructions />
             <ComponentWithSidePanel {...props} />
           </SidePanelProvider>
@@ -279,7 +278,7 @@ const ComponentWithSidePanelExtended = (props: SidePanelHookProps) => {
       }))}
       label="List of items with details in a side panel"
       hideLabel
-      css={spacing('mega')}
+      style={{ margin: '1rem' }}
     />
   );
 };

diff --git a/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx b/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx
@@ -15,7 +15,6 @@
 
 import Body from '../../components/Body/index.js';
 import Button from '../../components/Button/index.js';
-import { spacing } from '../../styles/style-mixins.js';
 
 import { CollapsibleOptions, useCollapsible } from './useCollapsible.js';
 
@@ -24,14 +23,15 @@ export default {
 };
 
 export const Example = (args: CollapsibleOptions) => {
-  const { isOpen, getButtonProps, getContentProps } = useCollapsible(args);
+  const { isOpen, getButtonProps, getContentProps } =
+    useCollapsible<HTMLParagraphElement>(args);
 
   return (
     <section>
       <Button {...getButtonProps()}>
         {isOpen ? 'Close section' : 'Open section'}
       </Button>
-      <Body {...getContentProps()} css={spacing({ top: 'kilo' })}>
+      <Body {...getContentProps({ style: { marginTop: '1rem' } })}>
         {
           'Lorem ipsum dolor amet swag pickled humblebrag retro farm-to-table, shoreditch typewriter deep v single-origin coffee green juice coloring book venmo chambray. Marfa authentic blue bottle mixtape tofu adaptogen. IPhone chia blog palo santo mlkshk tattooed jean shorts yr locavore ennui scenester. Wolf tousled pok pok sartorial scenester man bun salvia quinoa raclette sriracha roof party pour-over venmo hammock. Four dollar toast typewriter 3 wolf moon letterpress disrupt pabst. Neutra irony tousled iPhone banh mi wayfarers hoodie waistcoat.'
         }

diff --git a/packages/circuit-ui/styles/style-mixins.stories.tsx b/packages/circuit-ui/styles/style-mixins.stories.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { Stack } from '../../../.storybook/components/index.js';
 import Button from '../components/Button/index.js';