refactor(components): refactor StyledText stories (#14899)

* refactor(components): refactor StyledText stories

components/src/atoms/StyledText/StyledText.stories.tsx

@@ -1,87 +1,107 @@
+/* eslint-disable storybook/prefer-pascal-case */
 import * as React from 'react'
-import { StyledText } from './'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import type { Story, Meta } from '@storybook/react'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { Flex } from '../../primitives'
+import { StyledText } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof StyledText> = {
   title: 'Library/Atoms/StyledText',
   component: StyledText,
-} as Meta
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
 
-const Template: Story<React.ComponentProps<typeof StyledText>> = args => (
-  <StyledText {...args} />
-)
+type Story = StoryObj<typeof StyledText>
 
 const dummyText =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus sapien nunc dolor, aliquet nibh placerat et nisl, arcu. Pellentesque blandit sollicitudin vitae morbi morbi vulputate cursus tellus. Amet proin donec proin id aliquet in nullam.'
 
-export const h1 = Template.bind({})
-h1.args = {
-  as: 'h1',
-  children: dummyText,
+export const h1: Story = {
+  args: {
+    as: 'h1',
+    children: dummyText,
+  },
 }
 
-export const h2 = Template.bind({})
-h2.args = {
-  as: 'h2',
-  children: dummyText,
+export const h2: Story = {
+  args: {
+    as: 'h2',
+    children: dummyText,
+  },
 }
 
-export const h3 = Template.bind({})
-h3.args = {
-  as: 'h3',
-  children: dummyText,
+export const h3: Story = {
+  args: {
+    as: 'h3',
+    children: dummyText,
+  },
 }
 
-export const h6 = Template.bind({})
-h6.args = {
-  as: 'h6',
-  children: dummyText,
+export const h6: Story = {
+  args: {
+    as: 'h6',
+    children: dummyText,
+  },
 }
 
-export const p = Template.bind({})
-p.args = {
-  as: 'p',
-  children: dummyText,
+export const p: Story = {
+  args: {
+    as: 'p',
+    children: dummyText,
+  },
 }
 
-export const label = Template.bind({})
-label.args = {
-  as: 'label',
-  children: dummyText,
+export const label: Story = {
+  args: {
+    as: 'label',
+    children: dummyText,
+  },
 }
 
-export const h2SemiBold = Template.bind({})
-h2SemiBold.args = {
-  as: 'h2',
-  fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-  children: dummyText,
+export const h2SemiBold: Story = {
+  args: {
+    as: 'h2',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
 }
 
-export const h3SemiBold = Template.bind({})
-h3SemiBold.args = {
-  as: 'h3',
-  fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-  children: dummyText,
+export const h3SemiBold: Story = {
+  args: {
+    as: 'h3',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
 }
 
-export const h6SemiBold = Template.bind({})
-h6SemiBold.args = {
-  as: 'h6',
-  fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-  children: dummyText,
+export const h6SemiBold: Story = {
+  args: {
+    as: 'h6',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
 }
 
-export const pSemiBold = Template.bind({})
-pSemiBold.args = {
-  as: 'p',
-  fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-  children: dummyText,
+export const pSemiBold: Story = {
+  args: {
+    as: 'p',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
 }
 
-export const labelSemiBold = Template.bind({})
-labelSemiBold.args = {
-  as: 'label',
-  fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-  children: dummyText,
+export const labelSemiBold: Story = {
+  args: {
+    as: 'label',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
 }