@opentrons/components 0.1.6-alpha.15 → 0.1.6-alpha.17

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

@@ -0,0 +1,106 @@
+/* eslint-disable storybook/prefer-pascal-case */
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { Flex } from '../../primitives'
+import { LegacyStyledText } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof LegacyStyledText> = {
+  title: 'Library/Atoms/LegacyStyledText',
+  component: LegacyStyledText,
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof LegacyStyledText>
+
+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: Story = {
+  args: {
+    as: 'h1',
+    children: dummyText,
+  },
+}
+
+export const h2: Story = {
+  args: {
+    as: 'h2',
+    children: dummyText,
+  },
+}
+
+export const h3: Story = {
+  args: {
+    as: 'h3',
+    children: dummyText,
+  },
+}
+
+export const h6: Story = {
+  args: {
+    as: 'h6',
+    children: dummyText,
+  },
+}
+
+export const p: Story = {
+  args: {
+    as: 'p',
+    children: dummyText,
+  },
+}
+
+export const label: Story = {
+  args: {
+    as: 'label',
+    children: dummyText,
+  },
+}
+
+export const h2SemiBold: Story = {
+  args: {
+    as: 'h2',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
+}
+
+export const h3SemiBold: Story = {
+  args: {
+    as: 'h3',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
+}
+
+export const h6SemiBold: Story = {
+  args: {
+    as: 'h6',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
+}
+
+export const pSemiBold: Story = {
+  args: {
+    as: 'p',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
+}
+
+export const labelSemiBold: Story = {
+  args: {
+    as: 'label',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
+}

package/src/atoms/StyledText/LegacyStyledText.tsx

@@ -0,0 +1,95 @@
+import styled, { css } from 'styled-components'
+import { Text } from '../../primitives'
+import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants'
+
+import type * as React from 'react'
+import type { FlattenSimpleInterpolation } from 'styled-components'
+
+export interface LegacyProps extends React.ComponentProps<typeof Text> {
+  children?: React.ReactNode
+}
+
+const styleMap: { [tag: string]: FlattenSimpleInterpolation } = {
+  h1: css`
+    ${TYPOGRAPHY.h1Default};
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.level1Header};
+    }
+  `,
+  h2: css`
+    ${TYPOGRAPHY.h2Regular}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.level2HeaderRegular};
+    }
+  `,
+  h3: css`
+    ${TYPOGRAPHY.h3Regular}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.level3HeaderRegular};
+    }
+  `,
+  h4: css`
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.level4HeaderRegular};
+    }
+  `,
+  h6: TYPOGRAPHY.h6Default,
+  p: css`
+    ${TYPOGRAPHY.pRegular}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.bodyTextRegular}
+    }
+  `,
+  label: css`
+    ${TYPOGRAPHY.labelRegular}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.smallBodyTextRegular}
+    }
+  `,
+  h2SemiBold: css`
+    ${TYPOGRAPHY.h2SemiBold}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.level2HeaderSemiBold}
+    }
+  `,
+  h3SemiBold: css`
+    ${TYPOGRAPHY.h3SemiBold}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.level3HeaderSemiBold}
+    }
+  `,
+  h4SemiBold: TYPOGRAPHY.level4HeaderSemiBold,
+  h6SemiBold: TYPOGRAPHY.h6SemiBold,
+  pSemiBold: css`
+    ${TYPOGRAPHY.pSemiBold}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.bodyTextSemiBold}
+    }
+  `,
+  labelSemiBold: css`
+    ${TYPOGRAPHY.labelSemiBold}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      font-size: ${TYPOGRAPHY.fontSize20};
+      line-height: ${TYPOGRAPHY.lineHeight24};
+    }
+  `,
+  h2Bold: TYPOGRAPHY.level2HeaderBold,
+  h3Bold: TYPOGRAPHY.level3HeaderBold,
+  h4Bold: TYPOGRAPHY.level4HeaderBold,
+  pBold: TYPOGRAPHY.bodyTextBold,
+  labelBold: TYPOGRAPHY.smallBodyTextBold,
+}
+
+export const LegacyStyledText: (props: LegacyProps) => JSX.Element = styled(
+  Text
+)<LegacyProps>`
+  ${props => {
+    let fontWeight = ''
+    if (props.fontWeight === TYPOGRAPHY.fontWeightSemiBold) {
+      fontWeight = 'SemiBold'
+    } else if (props.fontWeight === TYPOGRAPHY.fontWeightBold) {
+      fontWeight = 'Bold'
+    }
+    return styleMap[`${props.as}${fontWeight}`]
+  }}
+`

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: 'Library/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,323 @@
+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 * as React 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};
+      }
+    `,
+  },
+  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 React.ComponentProps<typeof Text> {
+  oddStyle?: ODDStyles
+  desktopStyle?: HelixStyles
+  children?: React.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/Tag/Tag.stories.tsx

@@ -0,0 +1,48 @@
+import { Flex } from '../../primitives'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { Tag as TagComponent } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof TagComponent> = {
+  title: 'Library/Atoms/Tag',
+  argTypes: {
+    type: {
+      options: ['default', 'interactive', 'branded'],
+      control: {
+        type: 'select',
+      },
+    },
+    //  TODO(jr, 6/18/24): make iconName and iconPosition selectable when we have real examples
+    //  used in the app
+    iconName: {
+      table: {
+        disable: true,
+      },
+    },
+    iconPosition: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  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,55 @@
+import type * as React from 'react'
+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'
+
+const render = (props: React.ComponentProps<typeof Tag>) => {
+  return renderWithProviders(<Tag {...props} />)
+}
+
+describe('Tag', () => {
+  let props: React.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}`
+    )
+  })
+})