From 619c4256a125943ac6f591b97f282a1d05aef920 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Mon, 22 Apr 2024 09:44:41 -0400
Subject: [PATCH] fix(components): fix icon stories (#14969)

* fix(components): fix icon stories
---
 components/src/icons/Icon.stories.tsx | 33 +++++++++++++++------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/components/src/icons/Icon.stories.tsx b/components/src/icons/Icon.stories.tsx
index 1be5df8581c..9d7b0f1141a 100644
--- a/components/src/icons/Icon.stories.tsx
+++ b/components/src/icons/Icon.stories.tsx
@@ -1,33 +1,38 @@
 import * as React from 'react'
-
-import { Box, SIZE_3 } from '@opentrons/components'
+import { Flex } from '../primitives'
+import { SPACING } from '../ui-style-constants'
 import { ICON_DATA_BY_NAME } from './icon-data'
 import { Icon as IconComponent } from './Icon'
+import type { Meta, StoryObj } from '@storybook/react'
 
-import type { Story, Meta } from '@storybook/react'
-
-export default {
+const meta: Meta<typeof IconComponent> = {
   title: 'Library/Atoms/Icon',
+  component: IconComponent,
   argTypes: {
     name: {
+      options: Object.keys(ICON_DATA_BY_NAME),
       control: {
         type: 'select',
-        options: Object.keys(ICON_DATA_BY_NAME),
       },
-      defaultValue: 'alert',
     },
   },
   decorators: [
     Story => (
-      <Box size={SIZE_3}>
+      <Flex padding={SPACING.spacing16}>
         <Story />
-      </Box>
+      </Flex>
     ),
   ],
-} as Meta
+}
 
-const Template: Story<React.ComponentProps<typeof IconComponent>> = args => {
-  return <IconComponent {...args} />
+export default meta
+
+type Story = StoryObj<typeof IconComponent>
+
+export const Icon: Story = {
+  args: {
+    name: 'alert',
+    spin: false,
+    size: '4rem',
+  },
 }
-export const Icon = Template.bind({})
-Icon.args = { spin: false }