@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.21

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/index.tsx

@@ -0,0 +1,116 @@
+import { css } from 'styled-components'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { Icon } from '../../icons'
+import { LegacyStyledText } from '../StyledText'
+
+import type { IconName } from '../../icons'
+
+export type TagType = 'default' | 'interactive' | 'branded'
+
+export interface TagProps {
+  /** Tag content */
+  text: string
+  /** name constant of the text color and the icon color to display */
+  type: TagType
+  /** iconLocation */
+  iconPosition?: 'left' | 'right'
+  /** Tagicon */
+  iconName?: IconName
+  shrinkToContent?: boolean
+}
+
+const defaultColors = {
+  backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`,
+  color: COLORS.black90,
+}
+
+const TAG_PROPS_BY_TYPE: Record<
+  TagType,
+  {
+    backgroundColor: string
+    color: string
+  }
+> = {
+  default: defaultColors,
+  interactive: defaultColors,
+  branded: {
+    backgroundColor: COLORS.blue50,
+    color: COLORS.white,
+  },
+}
+
+export function Tag(props: TagProps): JSX.Element {
+  const { iconName, type, text, iconPosition, shrinkToContent = false } = props
+
+  const DEFAULT_CONTAINER_STYLE = css`
+    padding: ${SPACING.spacing2} ${SPACING.spacing8};
+    border-radius: ${BORDERS.borderRadius4};
+    width: ${shrinkToContent ? FLEX_MAX_CONTENT : 'none'};
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      border-radius: ${BORDERS.borderRadius8};
+      padding: ${SPACING.spacing8} ${SPACING.spacing12};
+    }
+  `
+
+  const INTERACTIVE_CONTAINER_STYLE = css`
+    ${DEFAULT_CONTAINER_STYLE}
+    &:hover {
+      background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
+    }
+    &:focus-visible {
+      box-shadow: 0 0 0 3px ${COLORS.blue50};
+      outline: none;
+    }
+  `
+
+  const ICON_STYLE = css`
+    width: 0.75rem;
+    height: 0.875rem;
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  `
+
+  const TEXT_STYLE = css`
+    ${TYPOGRAPHY.h3Regular}
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${TYPOGRAPHY.bodyTextRegular}
+    }
+  `
+
+  return (
+    <Flex
+      alignItems={ALIGN_CENTER}
+      flexDirection={DIRECTION_ROW}
+      color={TAG_PROPS_BY_TYPE[type].color}
+      backgroundColor={TAG_PROPS_BY_TYPE[type].backgroundColor}
+      css={
+        type === 'interactive'
+          ? INTERACTIVE_CONTAINER_STYLE
+          : DEFAULT_CONTAINER_STYLE
+      }
+      gridGap={SPACING.spacing4}
+      data-testid={`Tag_${type}`}
+    >
+      {iconName != null && iconPosition === 'left' ? (
+        <Icon
+          name={iconName}
+          aria-label={`icon_left_${text}`}
+          css={ICON_STYLE}
+        />
+      ) : null}
+      <LegacyStyledText css={TEXT_STYLE}>{text}</LegacyStyledText>
+      {iconName != null && iconPosition === 'right' ? (
+        <Icon
+          name={iconName}
+          aria-label={`icon_right_${text}`}
+          css={ICON_STYLE}
+        />
+      ) : null}
+    </Flex>
+  )
+}

package/src/atoms/Toast/ODDToast.stories.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react'
+
+import { Toast } from '.'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { Flex } from '../../primitives'
+import {
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  JUSTIFY_CENTER,
+  POSITION_FIXED,
+} from '../../styles'
+import { PrimaryButton } from '../buttons'
+import { LegacyStyledText } from '../StyledText'
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'ODD/Atoms/Toast',
+  component: Toast,
+  parameters: VIEWPORT.touchScreenViewport,
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof Toast>> = args => {
+  const [isShowToast, setIsShowToast] = React.useState<boolean>(false)
+
+  const handleClick = (): void => {
+    setIsShowToast(true)
+  }
+
+  return (
+    <>
+      <Flex flexDirection={DIRECTION_ROW} marginY={SPACING.spacing16}>
+        <PrimaryButton onClick={handleClick}>Click me</PrimaryButton>
+        <Flex flexDirection={DIRECTION_COLUMN} marginLeft={SPACING.spacing8}>
+          <LegacyStyledText as="p">
+            When clicking the button, the Toast shows up in the bottom.
+          </LegacyStyledText>
+          <LegacyStyledText as="p">
+            Unless you set a duration or disable the timeout, the Toast will
+            disappear between 2 and 7 seconds depending on the length of the
+            text.
+          </LegacyStyledText>
+        </Flex>
+      </Flex>
+      {isShowToast && (
+        <Flex
+          justifyContent={JUSTIFY_CENTER}
+          position={POSITION_FIXED}
+          bottom={SPACING.spacing16}
+          zIndex={1000}
+        >
+          <Toast
+            {...args}
+            onClose={() => {
+              setIsShowToast(false)
+            }}
+          />
+        </Flex>
+      )}
+    </>
+  )
+}
+
+export const ToastComponent = Template.bind({})
+ToastComponent.args = {
+  message: 'Success Toast message',
+  type: 'success',
+  displayType: 'odd',
+}