refactor(components): refactor location icon stories (#14896)

* refactor(components): refactor location icon stories
Opentrons · May 20, 2024 · 2dd0978 · 2dd0978
1 parent d5aa93e
commit 2dd0978
Showing 1 changed file with 22 additions and 28 deletions.
diff --git a/components/src/molecules/LocationIcon/LocationIcon.stories.tsx b/components/src/molecules/LocationIcon/LocationIcon.stories.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react'
-
-import { Flex, SPACING } from '@opentrons/components'
-
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
 import { GlobalStyle } from '../../../../app/src/atoms/GlobalStyle'
 import { customViewports } from '../../../../.storybook/preview'
-import { LocationIcon } from '.'
-
-import type { Story, Meta } from '@storybook/react'
 import { ICON_DATA_BY_NAME } from '../../icons'
+import { LocationIcon } from '.'
+import type { Meta, StoryObj } from '@storybook/react'
 
 const slots = [
   'A1',
@@ -28,26 +26,23 @@ const slots = [
   'D4',
 ]
 
-export default {
-  title: 'ODD/Molecules/LocationIcon',
+const meta: Meta<typeof LocationIcon> = {
+  title: 'Library/Molecules/LocationIcon',
   argTypes: {
     iconName: {
       control: {
         type: 'select',
-        options: Object.keys(ICON_DATA_BY_NAME),
       },
-      defaultValue: undefined,
+      options: Object.keys(ICON_DATA_BY_NAME),
     },
     slotName: {
       control: {
         type: 'select',
-        options: slots,
       },
-      defaultValue: undefined,
+      options: slots,
     },
   },
   component: LocationIcon,
-  // Note (kk:08/29/2023) this component is located in components so avoid importing const from app
   parameters: {
     viewport: {
       viewports: customViewports,
@@ -56,26 +51,25 @@ export default {
   },
   decorators: [
     Story => (
-      <>
+      <Flex padding={SPACING.spacing16} width="15rem" height="5rem">
         <GlobalStyle isOnDevice />
         <Story />
-      </>
+      </Flex>
     ),
   ],
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof LocationIcon>> = args => (
-  <Flex marginTop={SPACING.spacing16} width="15rem" height="5rem">
-    <LocationIcon {...args} />
-  </Flex>
-)
+}
+export default meta
+type Story = StoryObj<typeof LocationIcon>
 
-export const DisplaySlot = Template.bind({})
-DisplaySlot.args = {
-  slotName: 'A1',
+export const DisplaySlot: Story = {
+  args: {
+    slotName: 'A1',
+    iconName: undefined,
+  },
 }
 
-export const DisplayIcon = Template.bind({})
-DisplayIcon.args = {
-  iconName: 'ot-temperature-v2',
+export const DisplayIcon: Story = {
+  args: {
+    iconName: 'ot-temperature-v2',
+  },
 }