@opentrons/components 0.1.7-alpha.0 → 0.2.0-alpha.0

package/src/atoms/ListButton/__tests__/ListButton.test.tsx

@@ -1,10 +1,12 @@
-import { vi, describe, it, expect, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
 import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-import { COLORS } from '../../../helix-design-system'
 
 import { ListButton } from '..'
+import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/ListButton/__tests__/ListButtonAccordion.test.tsx

@@ -1,8 +1,8 @@
-import { describe, it, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
+import { beforeEach, describe, it } from 'vitest'
 
 import { ListButtonAccordion } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/ListButton/index.tsx

@@ -1,9 +1,11 @@
 import { css } from 'styled-components'
-import { Flex } from '../../primitives'
-import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
 import { CURSOR_DEFAULT, CURSOR_POINTER } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
@@ -12,14 +14,19 @@ export * from './ListButtonChildren/index'
 type ListButtonType = 'noActive' | 'connected' | 'notConnected' | 'onColor'
 
 interface ListButtonProps extends StyleProps {
+  /** ListButton type */
   type: ListButtonType
+  /** ListButton content */
   children: ReactNode
+  /** ListButton disabled state */
   disabled?: boolean
+  /** ListButton onClick event */
   onClick?: () => void
+  /** optional data-testid value for Cypress testing */
   testId?: string
 }
 
-const DESKTOP_LISTBUTTON_PROPS_BY_TYPE: Record<
+const DESKTOP_LIST_BUTTON_PROPS_BY_TYPE: Record<
   ListButtonType,
   { backgroundColor: string; hoverBackgroundColor: string }
 > = {
@@ -41,7 +48,7 @@ const DESKTOP_LISTBUTTON_PROPS_BY_TYPE: Record<
   },
 }
 
-const ODD_LISTBUTTON_PROPS_BY_TYPE: Record<
+const ODD_LIST_BUTTON_PROPS_BY_TYPE: Record<
   ListButtonType,
   { backgroundColor: string; hoverBackgroundColor: string }
 > = {
@@ -74,44 +81,11 @@ export function ListButton(props: ListButtonProps): JSX.Element {
     children,
     disabled = false,
     onClick,
-    testId, // optional data-testid value for Cypress testing
+    testId,
     ...styleProps
   } = props
-  const desktopListButtonProps = DESKTOP_LISTBUTTON_PROPS_BY_TYPE[type]
-  const oddListButtonProps = ODD_LISTBUTTON_PROPS_BY_TYPE[type]
-
-  const LIST_BUTTON_STYLE = css`
-    cursor: ${disabled ? CURSOR_DEFAULT : CURSOR_POINTER};
-    background-color: ${disabled
-      ? COLORS.grey20
-      : desktopListButtonProps.backgroundColor};
-    padding: ${styleProps.padding ??
-    `${SPACING.spacing20} ${SPACING.spacing24}`};
-    border-radius: ${BORDERS.borderRadius8};
-
-    &:hover {
-      background-color: ${disabled
-        ? COLORS.grey20
-        : desktopListButtonProps.hoverBackgroundColor};
-    }
-
-    &:focus-visible {
-      outline: 2px solid ${COLORS.blue50};
-      outline-offset: 0.125rem;
-    }
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      background-color: ${disabled
-        ? COLORS.grey35
-        : oddListButtonProps.backgroundColor};
-
-      &:hover {
-        background-color: ${disabled
-          ? COLORS.grey35
-          : oddListButtonProps.hoverBackgroundColor};
-      }
-    }
-  `
+  const desktopListButtonProps = DESKTOP_LIST_BUTTON_PROPS_BY_TYPE[type]
+  const oddListButtonProps = ODD_LIST_BUTTON_PROPS_BY_TYPE[type]
 
   return (
     <Flex
@@ -120,7 +94,12 @@ export function ListButton(props: ListButtonProps): JSX.Element {
         onClick?.()
         e.stopPropagation()
       }}
-      css={LIST_BUTTON_STYLE}
+      css={LIST_BUTTON_STYLE(
+        disabled,
+        styleProps,
+        desktopListButtonProps,
+        oddListButtonProps
+      )}
       tabIndex={0}
       max-width="26.875rem"
       {...styleProps}
@@ -129,3 +108,40 @@ export function ListButton(props: ListButtonProps): JSX.Element {
     </Flex>
   )
 }
+
+const LIST_BUTTON_STYLE = (
+  disabled: boolean,
+  styleProps: StyleProps,
+  desktopListButtonProps: Record<string, string>,
+  oddListButtonProps: Record<string, string>
+): FlattenSimpleInterpolation => css`
+  cursor: ${disabled ? CURSOR_DEFAULT : CURSOR_POINTER};
+  background-color: ${disabled
+    ? COLORS.grey20
+    : desktopListButtonProps.backgroundColor};
+  padding: ${styleProps.padding ?? `${SPACING.spacing20} ${SPACING.spacing24}`};
+  border-radius: ${BORDERS.borderRadius8};
+
+  &:hover {
+    background-color: ${disabled
+      ? COLORS.grey20
+      : desktopListButtonProps.hoverBackgroundColor};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${COLORS.blue50};
+    outline-offset: 0.125rem;
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    background-color: ${disabled
+      ? COLORS.grey35
+      : oddListButtonProps.backgroundColor};
+
+    &:hover {
+      background-color: ${disabled
+        ? COLORS.grey35
+        : oddListButtonProps.hoverBackgroundColor};
+    }
+  }
+`

package/src/atoms/ListItem/ListItem.stories.tsx

@@ -1,15 +1,17 @@
-import { SPACING, VIEWPORT } from '../../ui-style-constants'
-import { DIRECTION_COLUMN } from '../../styles'
+import { ListItem as ListItemComponent, ListItemCustomize } from '.'
 import { Flex } from '../../primitives'
+import { DIRECTION_COLUMN } from '../../styles'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
 import { StyledText } from '../StyledText'
 import { ListItemDescriptor } from './ListItemChildren/ListItemDescriptor'
-import { ListItem as ListItemComponent, ListItemCustomize } from '.'
-import exampleImage from '../../images/labware/measurement-guide/images/spacing/spacing-well-rectangular@3x.png'
+
 import type { Meta, StoryObj } from '@storybook/react'
 import type { DropdownMenuProps } from '../../molecules'
 
+import exampleImage from '../../images/labware/measurement-guide/images/spacing/spacing-well-rectangular@3x.png'
+
 const meta: Meta<typeof ListItemComponent> = {
-  title: 'ListItem',
+  title: 'Helix/Atoms/ListItem',
   component: ListItemComponent,
   argTypes: {
     type: {

package/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx

@@ -1,13 +1,16 @@
 import { css } from 'styled-components'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
+
 import { COLORS } from '../../../helix-design-system'
+import { DropdownMenu } from '../../../molecules/DropdownMenu'
 import { Flex, Link } from '../../../primitives'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
 import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { StyledText } from '../../StyledText'
-import { DropdownMenu } from '../../../molecules/DropdownMenu'
 import { Tag } from '../../Tag/index'
+
 import type { DropdownMenuProps } from '../../../molecules/DropdownMenu'
 import type { TagProps } from '../../Tag/index'
+
 interface ListItemCustomizeProps {
   header: string
   //  this is either an image or an icon
@@ -34,7 +37,12 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
     menuPlacement = 'auto',
   } = props
   return (
-    <Flex width="100%" alignItems={ALIGN_CENTER} padding={SPACING.spacing12}>
+    <Flex
+      width="100%"
+      alignItems={ALIGN_CENTER}
+      padding={SPACING.spacing12}
+      gridGap={SPACING.spacing8}
+    >
       <Flex gridGap={SPACING.spacing16} width="50%" alignItems={ALIGN_CENTER}>
         {leftHeaderItem != null ? (
           <Flex size="3.75rem">{leftHeaderItem}</Flex>
@@ -58,21 +66,19 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
         {tag != null ? <Tag {...tag} /> : null}
       </Flex>
       {onClick != null && linkText != null ? (
-        <Link
-          role="button"
-          onClick={onClick}
-          css={css`
-            width: 10%;
-            text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
-            color: ${COLORS.grey60};
-            &:hover {
-              color: ${COLORS.grey40};
-            }
-          `}
-        >
+        <Link role="button" onClick={onClick} css={LINK_STYLE}>
           <StyledText desktopStyle="bodyDefaultRegular">{linkText}</StyledText>
         </Link>
       ) : null}
     </Flex>
   )
 }
+
+const LINK_STYLE = css`
+  width: 10%;
+  text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
+  color: ${COLORS.grey60};
+  &:hover {
+    color: ${COLORS.grey40};
+  }
+`

package/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '../../../primitives'
 import {
-  ALIGN_FLEX_START,
+  ALIGN_CENTER,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   JUSTIFY_FLEX_START,
@@ -9,9 +9,13 @@ import {
 import { SPACING } from '../../../ui-style-constants'
 
 interface ListItemDescriptorProps {
+  /** ListItemDescriptor size type */
   type: 'default' | 'large'
+  /** ListItemDescriptor description */
   description: JSX.Element
+  /** ListItemDescriptor content */
   content: JSX.Element
+  /** ListItemDescriptor flex direction */
   changeFlexDirection?: boolean
 }
 
@@ -31,7 +35,7 @@ export const ListItemDescriptor = (
       flexDirection={changeFlexDirection ? DIRECTION_COLUMN : DIRECTION_ROW}
       gridGap={SPACING.spacing8}
       width="100%"
-      alignItems={ALIGN_FLEX_START}
+      alignItems={ALIGN_CENTER}
       justifyContent={justifyContent}
       padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12}
     >

package/src/atoms/ListItem/__tests__/ListItem.test.tsx

@@ -1,10 +1,12 @@
-import { vi, describe, it, expect, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
 import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
 
 import { ListItem } from '..'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/ListItem/index.tsx

@@ -1,8 +1,9 @@
 import { css } from 'styled-components'
-import { Flex } from '../../primitives'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
 import { FLEX_MAX_CONTENT } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
 import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'

package/src/atoms/ListTable/ListTable.stories.tsx

@@ -4,8 +4,8 @@ import { Flex, VIEWPORT } from '@opentrons/components'
 
 import { ListTable as ListTableComponent } from '.'
 
+import type { Meta, Story } from '@storybook/react'
 import type { ComponentProps } from 'react'
-import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Helix/Atoms/ListTable',

package/src/atoms/ListTable/__tests__/ListTable.test.tsx

@@ -1,8 +1,8 @@
-import { describe, it, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, it } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { ListTable } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/ListTable/index.tsx

@@ -1,17 +1,17 @@
 import { css } from 'styled-components'
 
-import { StyledText } from '../StyledText'
+import { COLORS } from '../../helix-design-system'
 import {
   DIRECTION_COLUMN,
   DISPLAY_FLEX,
   DISPLAY_GRID,
   FLEX_MAX_CONTENT,
 } from '../../styles'
-import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
 
-import type { ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ReactNode } from 'react'
 
 export interface ListTableProps {
   children: ReactNode

package/src/atoms/MenuList/MenuItem.stories.tsx

@@ -1,5 +1,5 @@
-import { VIEWPORT } from '../../ui-style-constants'
 import { STYLE_PROPS } from '../../primitives'
+import { VIEWPORT } from '../../ui-style-constants'
 import { MenuItem as MenuItemComponent } from './MenuItem'
 
 import type { Meta, StoryObj } from '@storybook/react'

package/src/atoms/MenuList/MenuItem.tsx

@@ -1,7 +1,9 @@
 import styled from 'styled-components'
+
 import { COLORS } from '../../helix-design-system'
+import { ALIGN_CENTER, CURSOR_POINTER } from '../../styles'
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { ALIGN_CENTER } from '../../styles'
+
 import type { StyleProps } from '../../primitives'
 
 interface ButtonProps extends StyleProps {
@@ -9,6 +11,7 @@ interface ButtonProps extends StyleProps {
   isAlert?: boolean
 }
 export const MenuItem = styled.button<ButtonProps>`
+  cursor: ${CURSOR_POINTER};
   text-align: ${TYPOGRAPHY.textAlignLeft};
   font-size: ${TYPOGRAPHY.fontSizeP};
   background-color: ${COLORS.transparent};

package/src/atoms/MenuList/MenuList.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions'
+
 import { MenuList as MenuListComponent } from './index'
 import { MenuItem } from './MenuItem'
 

package/src/atoms/MenuList/OverflowBtn.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react'
 import { css } from 'styled-components'
 
-import { Btn } from '../../primitives'
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Btn } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
 
 import type { ComponentProps, ForwardedRef, ReactNode } from 'react'
@@ -20,47 +20,7 @@ export const OverflowBtn: (
   ): JSX.Element => {
     const { fillColor, ...restProps } = props
     return (
-      <Btn
-        css={css`
-          border-radius: ${BORDERS.borderRadius4};
-          max-height: ${SPACING.spacing32};
-
-          &:hover {
-            background-color: ${COLORS.grey30};
-          }
-          &:hover circle {
-            fill: ${COLORS.grey55};
-          }
-
-          &:active,
-          &:focus {
-            background-color: ${COLORS.grey35};
-          }
-
-          &:active circle,
-          &:focus circle {
-            fill: ${COLORS.grey60};
-          }
-
-          &:focus-visible {
-            box-shadow: ${`0 0 0 3px ${COLORS.yellow50}`};
-            background-color: ${'transparent'};
-          }
-
-          &:focus-visible circle {
-            fill: ${COLORS.grey60};
-          }
-
-          &:disabled circle {
-            fill: ${COLORS.grey40};
-          }
-          &:disabled {
-            background-color: transparent;
-          }
-        `}
-        {...restProps}
-        ref={ref}
-      >
+      <Btn css={OVERFLOW_MENU_BUTTON_STYLE} {...restProps} ref={ref}>
         <svg
           width="19"
           height="31"
@@ -76,3 +36,41 @@ export const OverflowBtn: (
     )
   }
 )
+
+const OVERFLOW_MENU_BUTTON_STYLE = css`
+  border-radius: ${BORDERS.borderRadius4};
+  max-height: ${SPACING.spacing32};
+
+  &:hover {
+    background-color: ${COLORS.grey30};
+  }
+  &:hover circle {
+    fill: ${COLORS.grey55};
+  }
+
+  &:active,
+  &:focus {
+    background-color: ${COLORS.grey35};
+  }
+
+  &:active circle,
+  &:focus circle {
+    fill: ${COLORS.grey60};
+  }
+
+  &:focus-visible {
+    box-shadow: ${`0 0 0 3px ${COLORS.yellow50}`};
+    background-color: ${COLORS.transparent};
+  }
+
+  &:focus-visible circle {
+    fill: ${COLORS.grey60};
+  }
+
+  &:disabled circle {
+    fill: ${COLORS.grey40};
+  }
+  &:disabled {
+    background-color: ${COLORS.transparent};
+  }
+`

package/src/atoms/MenuList/__tests__/MenuItem.test.tsx

@@ -1,10 +1,9 @@
-import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
 import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
-
 import { MenuItem } from '../MenuItem'
 
 import type { ComponentProps } from 'react'

package/src/atoms/MenuList/__tests__/MenuList.test.tsx

@@ -1,8 +1,8 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { MenuList } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx

@@ -1,5 +1,5 @@
-import { vi, it, expect, describe } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
 
 import { COLORS } from '../../../helix-design-system'
 import { renderWithProviders } from '../../../testing/utils'

package/src/atoms/MenuList/index.tsx

@@ -1,12 +1,12 @@
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { ModalShell } from '../../modals'
+import { Flex } from '../../primitives'
 import {
   DIRECTION_COLUMN,
   JUSTIFY_CENTER,
   POSITION_ABSOLUTE,
 } from '../../styles'
-import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
-import { ModalShell } from '../../modals'
 
 import type { MouseEventHandler, ReactNode } from 'react'
 

package/src/atoms/Snackbar/Snackbar.stories.tsx

@@ -1,26 +1,44 @@
 import * as React from 'react'
+
+import { Snackbar as SnackbarComponent } from '.'
+import { Flex, STYLE_PROPS } from '../../primitives'
 import {
   ALIGN_CENTER,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
-  Flex,
   JUSTIFY_CENTER,
-  PrimaryButton,
-  SPACING,
-  LegacyStyledText,
-  VIEWPORT,
-} from '@opentrons/components'
+} from '../../styles'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { PrimaryButton } from '../buttons'
+import { StyledText } from '../StyledText'
 
-import { Snackbar } from './index'
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof SnackbarComponent> = {
   title: 'Helix/Atoms/Snackbar',
-  component: Snackbar,
+  component: SnackbarComponent,
   parameters: VIEWPORT.touchScreenViewport,
-} as Meta
+  argTypes: {
+    // Disable all StyleProps
+    ...Object.fromEntries(
+      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
+        prop,
+        { table: { disable: true } },
+      ])
+    ),
+    message: {
+      control: 'text',
+    },
+    duration: {
+      control: 'number',
+    },
+  },
+}
 
-const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
+// Define the render function as a React Functional Component
+const SnackbarRenderComponent: React.FC<
+  React.ComponentProps<typeof SnackbarComponent>
+> = args => {
   const [isShowSnackbar, setIsShowSnackbar] = React.useState<boolean>(false)
 
   const handleClick = (): void => {
@@ -29,15 +47,25 @@ const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
 
   return (
     <>
-      <Flex flexDirection={DIRECTION_ROW} marginY={SPACING.spacing16}>
+      <Flex
+        flexDirection={DIRECTION_ROW}
+        paddingY={SPACING.spacing16}
+        gap={SPACING.spacing8}
+      >
         <PrimaryButton onClick={handleClick}>Click me</PrimaryButton>
-        <Flex flexDirection={DIRECTION_COLUMN} marginLeft={SPACING.spacing8}>
-          <LegacyStyledText as="p">
+        <Flex flexDirection={DIRECTION_COLUMN}>
+          <StyledText
+            desktopStyle="bodyDefaultRegular"
+            oddStyle="level4HeaderRegular"
+          >
             When clicking the button, the Snackbar shows up in the bottom.
-          </LegacyStyledText>
-          <LegacyStyledText as="p">
+          </StyledText>
+          <StyledText
+            desktopStyle="bodyDefaultRegular"
+            oddStyle="level4HeaderRegular"
+          >
             By default the Snackbar will disappear after 4 seconds.
-          </LegacyStyledText>
+          </StyledText>
         </Flex>
       </Flex>
       {isShowSnackbar && (
@@ -49,7 +77,7 @@ const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
           bottom={SPACING.spacing40}
           zIndex={1000}
         >
-          <Snackbar
+          <SnackbarComponent
             {...args}
             onClose={() => {
               setIsShowSnackbar(false)
@@ -61,7 +89,17 @@ const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
   )
 }
 
-export const SnackbarComponent = DefaultTemplate.bind({})
-SnackbarComponent.args = {
-  message: 'Short and sweet message',
+const SnackbarTemplate: Story = {
+  render: args => <SnackbarRenderComponent {...args} />,
+}
+
+export default meta
+type Story = StoryObj<typeof SnackbarComponent>
+
+export const Snackbar: Story = {
+  ...SnackbarTemplate,
+  args: {
+    message: 'Short and sweet message',
+    duration: 4000,
+  },
 }