@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.0

package/src/atoms/StyledText/StyledText.stories.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable storybook/prefer-pascal-case */
+import { SPACING } from '../../ui-style-constants'
+import { Flex } from '../../primitives'
+import { StyledText, ODD_STYLES, HELIX_STYLES } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof StyledText> = {
+  title: 'Helix/Atoms/StyledText',
+  component: StyledText,
+  argTypes: {
+    oddStyle: {
+      control: {
+        type: 'select',
+      },
+      options: ODD_STYLES,
+    },
+    desktopStyle: {
+      control: {
+        type: 'select',
+      },
+      options: HELIX_STYLES,
+    },
+  },
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
+
+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 Example: Story = {
+  args: {
+    oddStyle: 'level1Header',
+    desktopStyle: 'displayBold',
+    children: dummyText,
+  },
+}

package/src/atoms/StyledText/StyledText.tsx

@@ -0,0 +1,332 @@
+import styled, { css } from 'styled-components'
+import { Text } from '../../primitives'
+import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants'
+import { TYPOGRAPHY as HELIX_TYPOGRAPHY } from '../../helix-design-system/product'
+
+import type { ComponentProps, ReactNode } from 'react'
+import type { FlattenSimpleInterpolation } from 'styled-components'
+
+const helixProductStyleMap = {
+  displayBold: {
+    as: 'h1',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleDisplayBold};
+      }
+    `,
+  },
+  headingLargeRegular: {
+    as: 'h2',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleHeadingLargeRegular};
+      }
+    `,
+  },
+  headingLargeBold: {
+    as: 'h2',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleHeadingLargeBold};
+      }
+    `,
+  },
+  headingMediumBold: {
+    as: 'h3',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleHeadingMediumBold};
+      }
+    `,
+  },
+  headingMediumSemiBold: {
+    as: 'h3',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleHeadingMediumSemiBold};
+      }
+    `,
+  },
+  headingSmallRegular: {
+    as: 'h4',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleHeadingSmallRegular};
+      }
+    `,
+  },
+  headingSmallBold: {
+    as: 'h4',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleHeadingSmallBold};
+      }
+    `,
+  },
+  headingSmallSemiBold: {
+    as: 'h4',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleHeadingSmallBold};
+      }
+    `,
+  },
+  bodyLargeSemiBold: {
+    as: 'p',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleBodyLargeSemiBold};
+      }
+    `,
+  },
+  bodyLargeRegular: {
+    as: 'p',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleBodyLargeRegular};
+      }
+    `,
+  },
+  bodyDefaultSemiBold: {
+    as: 'p',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleBodyDefaultSemiBold};
+      }
+    `,
+  },
+  bodyDefaultRegular: {
+    as: 'p',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleBodyDefaultRegular};
+      }
+    `,
+  },
+  bodyDefaultRegLink: {
+    as: 'p',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleBodyDefaultRegular};
+        text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
+      }
+    `,
+  },
+  captionSemiBold: {
+    as: 'label',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleCaptionSemiBold};
+      }
+    `,
+  },
+  captionBold: {
+    as: 'label',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleCaptionBold};
+      }
+    `,
+  },
+  captionRegular: {
+    as: 'label',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleCaptionRegular};
+      }
+    `,
+  },
+  codeRegular: {
+    as: 'p',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        font: ${HELIX_TYPOGRAPHY.fontStyleCodeRegular};
+      }
+    `,
+  },
+  hidden: {
+    as: 'none',
+    style: css`
+      @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+        display: none;
+      }
+    `,
+  },
+} as const
+
+const ODDStyleMap = {
+  level1Header: {
+    as: 'h1',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.level1Header};
+      }
+    `,
+  },
+  level2HeaderRegular: {
+    as: 'h2',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.level2HeaderRegular};
+      }
+    `,
+  },
+  level2HeaderSemiBold: {
+    as: 'h2',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.level2HeaderSemiBold}
+      }
+    `,
+  },
+  level2HeaderBold: {
+    as: 'h2',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.level2HeaderBold}
+      }
+    `,
+  },
+
+  level3HeaderRegular: {
+    as: 'h3',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.level3HeaderRegular};
+      }
+    `,
+  },
+  level3HeaderSemiBold: {
+    as: 'h3',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.level3HeaderSemiBold}
+      }
+    `,
+  },
+  level3HeaderBold: {
+    as: 'h3',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.level3HeaderBold}
+      }
+    `,
+  },
+
+  level4HeaderRegular: {
+    as: 'h4',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.level4HeaderRegular};
+      }
+    `,
+  },
+  level4HeaderSemiBold: {
+    as: 'h4',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.level4HeaderSemiBold}
+      }
+    `,
+  },
+  level4HeaderBold: {
+    as: 'h4',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.level4HeaderBold}
+      }
+    `,
+  },
+
+  bodyTextRegular: {
+    as: 'p',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.bodyTextRegular}
+      }
+    `,
+  },
+  bodyTextSemiBold: {
+    as: 'p',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.bodyTextSemiBold}
+      }
+    `,
+  },
+  bodyTextBold: {
+    as: 'p',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.bodyTextBold}
+      }
+    `,
+  },
+  smallBodyTextRegular: {
+    as: 'label',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.smallBodyTextRegular}
+      }
+    `,
+  },
+
+  smallBodyTextSemiBold: {
+    as: 'label',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        font-size: ${TYPOGRAPHY.fontSize20};
+        line-height: ${TYPOGRAPHY.lineHeight24};
+      }
+    `,
+  },
+
+  smallBodyTextBold: {
+    as: 'label',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        ${TYPOGRAPHY.smallBodyTextBold}
+      }
+    `,
+  },
+  hidden: {
+    as: 'none',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        display: none;
+      }
+    `,
+  },
+} as const
+
+export interface Props extends ComponentProps<typeof Text> {
+  oddStyle?: ODDStyles
+  desktopStyle?: HelixStyles
+  children?: ReactNode
+}
+export const ODD_STYLES = Object.keys(ODDStyleMap)
+export const HELIX_STYLES = Object.keys(helixProductStyleMap)
+export type HelixStyles = keyof typeof helixProductStyleMap
+export type ODDStyles = keyof typeof ODDStyleMap
+
+function styleForDesktopName(name?: HelixStyles): FlattenSimpleInterpolation {
+  return name ? helixProductStyleMap[name].style : css``
+}
+
+function styleForODDName(name?: ODDStyles): FlattenSimpleInterpolation {
+  return name ? ODDStyleMap[name].style : css``
+}
+
+const DesktopStyledText: (props: Props) => JSX.Element = styled(
+  Text
+).withConfig({
+  shouldForwardProp: p => p !== 'oddStyle' && p !== 'desktopStyle',
+})`
+  ${(props: Props) => styleForDesktopName(props.desktopStyle)}
+`
+
+export const StyledText: (props: Props) => JSX.Element = styled(
+  DesktopStyledText
+)<Props>`
+  ${props => styleForODDName(props.oddStyle)}
+`

package/src/atoms/StyledText/index.ts

@@ -0,0 +1,2 @@
+export * from './StyledText'
+export * from './LegacyStyledText'

package/src/atoms/SubListTable/SubListTable.stories.tsx

@@ -0,0 +1,72 @@
+import { css } from 'styled-components'
+
+import { Flex, VIEWPORT } from '@opentrons/components'
+
+import { SubListTable as SubListTableComponent } from './index'
+
+import type { ComponentProps } from 'react'
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Helix/Atoms/SubListTable',
+  component: SubListTableComponent,
+  argTypes: {
+    headers: {
+      control: 'array',
+      description: 'Headers for the list table',
+    },
+    tagCount: {
+      control: { type: 'range', min: 1, max: 99, step: 1 },
+      description:
+        'Number of Tag components to include as example child components.',
+    },
+    devNote: {
+      description:
+        'Use SubListTable only when there should a table-esque component in a real table (ListTable), otherwise use ListTable.',
+    },
+  },
+  parameters: VIEWPORT.touchScreenViewport,
+} as Meta
+
+interface SubListTableStoryProps
+  extends ComponentProps<typeof SubListTableComponent> {
+  tagCount: number
+}
+
+const Template: Story<SubListTableStoryProps> = args => {
+  const { tagCount, ...subListTableProps } = args
+
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  const renderTags = () => {
+    return Array.from({ length: tagCount }, (_, i) => {
+      return (
+        <Flex key={`tag-${i}`} width="100%">
+          <Flex css={CHILD_STYLE}>Child Component</Flex>
+        </Flex>
+      )
+    })
+  }
+
+  return (
+    <SubListTableComponent {...subListTableProps}>
+      {renderTags()}
+    </SubListTableComponent>
+  )
+}
+
+export const SubListTable = Template.bind({})
+SubListTable.args = {
+  headers: ['Name', 'Type', 'Description'],
+  tagCount: 3,
+}
+
+export const SubListTableNoHeader = Template.bind({})
+SubListTableNoHeader.args = {
+  tagCount: 3,
+}
+
+const CHILD_STYLE = css`
+  width: 100%;
+  background-color: #a864ff10;
+  border: 2px dashed #a864ff;
+`

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

@@ -0,0 +1,81 @@
+import { describe, it, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { SubListTable } from '..'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof SubListTable>) => {
+  return renderWithProviders(<SubListTable {...props} />)[0]
+}
+
+describe('SubListTable', () => {
+  let props: ComponentProps<typeof SubListTable>
+
+  beforeEach(() => {
+    props = {
+      children: 'Table content',
+    }
+  })
+
+  it('renders children correctly', () => {
+    render(props)
+
+    screen.getByText('Table content')
+  })
+
+  it('renders with single header correctly', () => {
+    props = {
+      children: 'Table content',
+      headers: ['Header 1', undefined, undefined],
+    }
+
+    render(props)
+
+    screen.getByText('Table content')
+    screen.getByText('Header 1')
+  })
+
+  it('renders with multiple headers correctly', () => {
+    props = {
+      children: 'Table content',
+      headers: ['Header 1', 'Header 2', 'Header 3'],
+    }
+    render(props)
+
+    screen.getByText('Table content')
+    screen.getByText('Header 1')
+    screen.getByText('Header 2')
+    screen.getByText('Header 3')
+  })
+
+  it('renders without headers correctly', () => {
+    props = {
+      children: 'Table content',
+      headers: undefined,
+    }
+
+    render(props)
+
+    screen.getByText('Table content')
+  })
+
+  it('renders multiple children correctly', () => {
+    props = {
+      children: (
+        <>
+          <div>First child</div>
+          <div>Second child</div>
+          <div>Third child</div>
+        </>
+      ),
+    }
+
+    render(props)
+
+    screen.getByText('First child')
+    screen.getByText('Second child')
+    screen.getByText('Third child')
+  })
+})

package/src/atoms/SubListTable/index.tsx

@@ -0,0 +1,71 @@
+import { css } from 'styled-components'
+
+import { StyledText } from '../StyledText'
+import { DIRECTION_COLUMN, DISPLAY_GRID } from '../../styles'
+import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+
+import type { ReactNode } from 'react'
+import type { FlattenSimpleInterpolation } from 'styled-components'
+
+export interface SubListTableProps {
+  children: ReactNode
+  headers?: [string?, string?, string?, string?] // maximum of 4
+}
+
+// SubListTable does not contain the semantic HTML table identity but is otherwise equivalent to ListTable.
+// Use SubListTable only when there should a table-esque component in a real table (ListTable), otherwise use ListTable.
+export function SubListTable({
+  headers,
+  children,
+}: SubListTableProps): JSX.Element {
+  const numHeaders = headers ? headers.filter(Boolean).length : 0
+
+  return (
+    <Flex css={CONTAINER_STYLE}>
+      {headers != null && headers.some(header => header !== undefined) && (
+        <div css={headerContainerStyle(numHeaders)}>
+          {headers?.map(header => (
+            <StyledText
+              key={header + Math.random().toString()}
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
+              css={HEADER_ITEM_STYLE}
+            >
+              {header}
+            </StyledText>
+          ))}
+        </div>
+      )}
+      <Flex css={CONTENT_CONTAINER_STYLE}>{children}</Flex>
+    </Flex>
+  )
+}
+
+const CONTAINER_STYLE = css`
+  flex-direction: ${DIRECTION_COLUMN};
+  gap: ${SPACING.spacing8};
+`
+
+const CONTENT_CONTAINER_STYLE = css`
+  flex-direction: ${DIRECTION_COLUMN};
+  gap: ${SPACING.spacing4};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    gap: ${SPACING.spacing8};
+  }
+`
+
+const headerContainerStyle = (
+  numHeaders: number
+): FlattenSimpleInterpolation => css`
+  display: ${DISPLAY_GRID};
+  grid-template-columns: repeat(${numHeaders}, 1fr);
+  padding: 0 ${SPACING.spacing12};
+  gap: ${SPACING.spacing24};
+`
+
+const HEADER_ITEM_STYLE = css`
+  color: ${COLORS.grey60};
+`

package/src/atoms/Tag/Tag.stories.tsx

@@ -0,0 +1,49 @@
+import { Flex } from '../../primitives'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { Tag as TagComponent } from './index'
+import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof TagComponent> = {
+  title: 'Helix/Atoms/Tag',
+  argTypes: {
+    type: {
+      options: ['default', 'interactive', 'branded', 'onColor'],
+      control: {
+        type: 'select',
+      },
+    },
+    iconName: {
+      options: Object.keys(ICON_DATA_BY_NAME),
+      control: {
+        type: 'select',
+      },
+    },
+    iconPosition: {
+      options: ['left', 'right'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  component: TagComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16} width="59rem">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TagComponent>
+
+export const Tag: Story = {
+  args: {
+    type: 'default',
+    text: 'Text',
+    iconPosition: undefined,
+  },
+}

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

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { Tag } from '../index'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Tag>) => {
+  return renderWithProviders(<Tag {...props} />)
+}
+
+describe('Tag', () => {
+  let props: ComponentProps<typeof Tag>
+
+  it('should render text, icon with default', () => {
+    props = {
+      text: 'mockDefault',
+      type: 'default',
+      iconName: 'ot-alert',
+      iconPosition: 'left',
+    }
+    render(props)
+    const tag = screen.getByTestId('Tag_default')
+    screen.getByText('mockDefault')
+    expect(tag).toHaveStyle(
+      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
+    )
+    screen.getByLabelText('icon_left_mockDefault')
+  })
+  it('should render text, right icon with branded', () => {
+    props = {
+      text: 'mockBranded',
+      type: 'branded',
+      iconName: 'ot-alert',
+      iconPosition: 'right',
+    }
+    render(props)
+    const tag = screen.getByTestId('Tag_branded')
+    screen.getByText('mockBranded')
+    expect(tag).toHaveStyle(`background-color: ${COLORS.blue50}`)
+    screen.getByLabelText('icon_right_mockBranded')
+  })
+  it('should render text with interactive', () => {
+    props = {
+      text: 'mockInteractive',
+      type: 'interactive',
+    }
+    render(props)
+    const tag = screen.getByTestId('Tag_interactive')
+    screen.getByText('mockInteractive')
+    expect(tag).toHaveStyle(
+      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
+    )
+  })
+})