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

package/src/atoms/ListItem/index.tsx

@@ -0,0 +1,89 @@
+import type * as React from 'react'
+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_MAX_CONTENT } from '../../styles'
+import type { StyleProps } from '../../primitives'
+
+export * from './ListItemChildren'
+
+export type ListItemType =
+  | 'error'
+  | 'noActive'
+  | 'success'
+  | 'warning'
+  | 'unavailable'
+
+interface ListItemProps extends StyleProps {
+  /** ListItem state type */
+  type: ListItemType
+  /** ListItem contents */
+  children: React.ReactNode
+  onClick?: () => void
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+}
+
+const LISTITEM_PROPS_BY_TYPE: Record<
+  ListItemType,
+  { backgroundColor: string; color?: string }
+> = {
+  error: {
+    backgroundColor: COLORS.red35,
+  },
+  noActive: {
+    backgroundColor: COLORS.grey20,
+  },
+  success: {
+    backgroundColor: COLORS.green35,
+  },
+  warning: {
+    backgroundColor: COLORS.yellow35,
+  },
+  unavailable: {
+    backgroundColor: COLORS.grey20,
+    color: COLORS.grey40,
+  },
+}
+
+/*
+  ListItem is used in ODD and helix
+**/
+export function ListItem(props: ListItemProps): JSX.Element {
+  const {
+    type,
+    children,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...styleProps
+  } = props
+  const listItemProps = LISTITEM_PROPS_BY_TYPE[type]
+
+  const LIST_ITEM_STYLE = css`
+    background-color: ${listItemProps.backgroundColor};
+    color: ${listItemProps.color ?? COLORS.black90};
+    width: 100%;
+    height: ${FLEX_MAX_CONTENT};
+    border-radius: ${BORDERS.borderRadius4};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      padding: ${SPACING.spacing16} ${SPACING.spacing24};
+      border-radius: ${BORDERS.borderRadius12};
+    }
+  `
+
+  return (
+    <Flex
+      data-testid={`ListItem_${type}`}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      css={LIST_ITEM_STYLE}
+      {...styleProps}
+    >
+      {children}
+    </Flex>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { VIEWPORT } from '../../ui-style-constants'
+import { MenuItem as MenuItemComponent } from './MenuItem'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof MenuItemComponent> = {
+  title: 'Library/Atoms/MenuItem',
+  component: MenuItemComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+}
+export default meta
+
+type Story = StoryObj<typeof MenuItemComponent>
+
+export const MenuItem: Story = {
+  args: {
+    children: 'Example menu btn',
+    disabled: false,
+  },
+}

package/src/atoms/MenuList/MenuItem.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components'
+import { COLORS } from '../../helix-design-system'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { ALIGN_CENTER } from '../../styles'
+import type { StyleProps } from '../../primitives'
+
+interface ButtonProps extends StyleProps {
+  /** optional isAlert boolean to turn the background red, only seen in ODD */
+  isAlert?: boolean
+}
+export const MenuItem = styled.button<ButtonProps>`
+  text-align: ${TYPOGRAPHY.textAlignLeft};
+  font-size: ${TYPOGRAPHY.fontSizeP};
+  background-color: ${COLORS.transparent};
+  color: ${COLORS.black90};
+  padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
+    ${SPACING.spacing12};
+  border: ${props => (props.border != null ? props.border : 'inherit')};
+  border-radius: ${props =>
+    props.borderRadius != null ? props.borderRadius : 'inherit'};
+
+  &:hover {
+    background-color: ${COLORS.blue10};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.transparent};
+    color: ${COLORS.grey40};
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    align-items: ${ALIGN_CENTER};
+    text-align: ${TYPOGRAPHY.textAlignCenter};
+    font-size: ${TYPOGRAPHY.fontSize28};
+    background-color: ${({ isAlert }) =>
+      isAlert != null ? COLORS.red50 : COLORS.transparent};
+    color: ${({ isAlert }) =>
+      isAlert != null ? COLORS.white : COLORS.black90};
+    padding: ${SPACING.spacing24};
+    height: 5.5rem;
+    line-height: ${TYPOGRAPHY.lineHeight36};
+    &:hover,
+    &:active {
+      background-color: ${({ isAlert }) =>
+        isAlert != null ? COLORS.red50 : COLORS.grey35};
+    }
+
+    &:disabled {
+      background-color: ${({ isAlert }) =>
+        isAlert != null ? COLORS.red50 : COLORS.transparent};
+      color: ${({ isAlert }) =>
+        isAlert != null ? COLORS.white : COLORS.grey50};
+    }
+  }
+`

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

@@ -0,0 +1,31 @@
+import { action } from '@storybook/addon-actions'
+import { MenuList as MenuListComponent } from './index'
+import { MenuItem } from './MenuItem'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const menuBtn = 'example menu btn'
+
+const meta: Meta<typeof MenuListComponent> = {
+  title: 'Library/Atoms/MenuList',
+  component: MenuListComponent,
+  args: {
+    onClick: action('clicked'),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof MenuListComponent>
+
+export const MenuList: Story = {
+  args: {
+    children: (
+      <>
+        <MenuItem>{menuBtn}</MenuItem>
+        <MenuItem>{menuBtn}</MenuItem>
+        <MenuItem>{menuBtn}</MenuItem>
+      </>
+    ),
+  },
+}

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

@@ -0,0 +1,17 @@
+import { OverflowBtn as OverflowBtnComponent } from './OverflowBtn'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof OverflowBtnComponent> = {
+  title: 'Library/Atoms/OverflowBtn',
+  component: OverflowBtnComponent,
+}
+export default meta
+
+type Story = StoryObj<typeof OverflowBtnComponent>
+
+export const OverflowBtn: Story = {
+  args: {
+    title: 'overflow btn with all the states',
+  },
+}

package/src/atoms/MenuList/OverflowBtn.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import { css } from 'styled-components'
+
+import { Btn } from '../../primitives'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { SPACING } from '../../ui-style-constants'
+
+interface OverflowBtnProps extends React.ComponentProps<typeof Btn> {
+  fillColor?: string
+}
+export const OverflowBtn: (
+  props: OverflowBtnProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) => React.ReactNode = React.forwardRef(
+  (
+    props: OverflowBtnProps,
+    ref: React.ForwardedRef<HTMLInputElement>
+  ): 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}
+      >
+        <svg
+          width="19"
+          height="31"
+          viewBox="0 0 19 31"
+          fill={fillColor ?? COLORS.grey50}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="9.5" cy="9.5" r="1.5" />
+          <circle cx="9.5" cy="15.5" r="1.5" />
+          <circle cx="9.5" cy="21.5" r="1.5" />
+        </svg>
+      </Btn>
+    )
+  }
+)

package/src/atoms/MenuList/index.tsx

@@ -0,0 +1,50 @@
+import type * as React from 'react'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import {
+  DIRECTION_COLUMN,
+  JUSTIFY_CENTER,
+  POSITION_ABSOLUTE,
+} from '../../styles'
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import { ModalShell } from '../../modals'
+
+interface MenuListProps {
+  children: React.ReactNode
+  isOnDevice?: boolean
+  onClick?: React.MouseEventHandler
+}
+
+export const MenuList = (props: MenuListProps): JSX.Element | null => {
+  const { children, isOnDevice = false, onClick = null } = props
+  return isOnDevice && onClick != null ? (
+    <ModalShell
+      borderRadius={BORDERS.borderRadius16}
+      width="max-content"
+      onOutsideClick={onClick}
+    >
+      <Flex
+        boxShadow={BORDERS.shadowSmall}
+        flexDirection={DIRECTION_COLUMN}
+        justifyContent={JUSTIFY_CENTER}
+      >
+        {children}
+      </Flex>
+    </ModalShell>
+  ) : (
+    <Flex
+      borderRadius="4px 4px 0px 0px"
+      zIndex={10}
+      boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
+      position={POSITION_ABSOLUTE}
+      backgroundColor={COLORS.white}
+      top="2.6rem"
+      right={`calc(50% + ${SPACING.spacing4})`}
+      flexDirection={DIRECTION_COLUMN}
+      width="max-content"
+    >
+      {children}
+    </Flex>
+  )
+}

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

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  Flex,
+  JUSTIFY_CENTER,
+  PrimaryButton,
+  SPACING,
+  LegacyStyledText,
+  VIEWPORT,
+} from '@opentrons/components'
+
+import { Snackbar } from './index'
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Atoms/Snackbar',
+  component: Snackbar,
+  parameters: VIEWPORT.touchScreenViewport,
+} as Meta
+
+const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {
+  const [isShowSnackbar, setIsShowSnackbar] = React.useState<boolean>(false)
+
+  const handleClick = (): void => {
+    setIsShowSnackbar(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 Snackbar shows up in the bottom.
+          </LegacyStyledText>
+          <LegacyStyledText as="p">
+            By default the Snackbar will disappear after 4 seconds.
+          </LegacyStyledText>
+        </Flex>
+      </Flex>
+      {isShowSnackbar && (
+        <Flex
+          alignItems={ALIGN_CENTER}
+          justifyContent={JUSTIFY_CENTER}
+          width="100%"
+          position="absolute"
+          bottom={SPACING.spacing40}
+          zIndex={1000}
+        >
+          <Snackbar
+            {...args}
+            onClose={() => {
+              setIsShowSnackbar(false)
+            }}
+          />
+        </Flex>
+      )}
+    </>
+  )
+}
+
+export const SnackbarComponent = DefaultTemplate.bind({})
+SnackbarComponent.args = {
+  message: 'Short and sweet message',
+}

package/src/atoms/Snackbar/index.tsx

@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import { css } from 'styled-components'
+import { ALIGN_CENTER } from '../../styles'
+import { Flex } from '../../primitives'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { SPACING } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
+
+import type { StyleProps } from '../../primitives'
+
+export interface SnackbarProps extends StyleProps {
+  message: string
+  onClose?: () => void
+  duration?: number
+}
+
+const SNACKBAR_ANIMATION_DURATION = 500
+
+const ODD_ANIMATION_OPTIMIZATIONS = `
+  backface-visibility: hidden;
+  perspective: 1000;
+  will-change: opacity;
+  `
+
+const OPEN_STYLE = css`
+  animation-duration: ${SNACKBAR_ANIMATION_DURATION}ms;
+  animation-name: fadein;
+  overflow: hidden;
+  ${ODD_ANIMATION_OPTIMIZATIONS}
+
+  @keyframes fadein {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`
+
+const CLOSE_STYLE = css`
+  animation-duration: ${SNACKBAR_ANIMATION_DURATION}ms;
+  animation-name: fadeout;
+  overflow: hidden;
+  ${ODD_ANIMATION_OPTIMIZATIONS}
+
+  @keyframes fadeout {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+`
+
+export function Snackbar(props: SnackbarProps): JSX.Element {
+  const { message, onClose, duration = 4000, ...styleProps } = props
+  const [isClosed, setIsClosed] = useState<boolean>(false)
+
+  const animationStyle = isClosed ? CLOSE_STYLE : OPEN_STYLE
+
+  setTimeout(() => {
+    setIsClosed(true)
+    setTimeout(() => {
+      onClose?.()
+    }, SNACKBAR_ANIMATION_DURATION - 50)
+  }, duration)
+
+  return (
+    <Flex
+      css={animationStyle}
+      alignItems={ALIGN_CENTER}
+      borderRadius={BORDERS.borderRadius8}
+      boxShadow={BORDERS.shadowSmall}
+      backgroundColor={COLORS.black90}
+      maxWidth="max-content"
+      padding={`${SPACING.spacing20} ${SPACING.spacing24}`}
+      data-testid="Snackbar"
+      color={COLORS.white}
+      {...styleProps}
+    >
+      <StyledText
+        oddStyle="bodyTextSemiBold"
+        desktopStyle="bodyDefaultSemiBold"
+      >
+        {message}
+      </StyledText>
+    </Flex>
+  )
+}

package/src/atoms/StepMeter/index.tsx

@@ -0,0 +1,53 @@
+import { css } from 'styled-components'
+import { Box } from '../../primitives'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
+
+import type { StyleProps } from '../../primitives'
+
+interface StepMeterProps extends StyleProps {
+  totalSteps: number
+  currentStep: number | null
+}
+
+export const StepMeter = (props: StepMeterProps): JSX.Element => {
+  const { totalSteps, currentStep, ...styleProps } = props
+  const progress = currentStep != null ? currentStep : 0
+  const percentComplete = `${
+    //    this logic puts a cap at 100% percentComplete which we should never run into
+    currentStep != null && currentStep > totalSteps
+      ? 100
+      : (progress / totalSteps) * 100
+  }%`
+
+  const StepMeterContainer = css`
+    position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
+    height: ${SPACING.spacing4};
+    background-color: ${COLORS.grey30};
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      height: ${SPACING.spacing12};
+    }
+  `
+  const StepMeterBar = css`
+    position: ${POSITION_ABSOLUTE};
+    top: 0;
+    height: 100%;
+    background-color: ${COLORS.blue50};
+    width: ${percentComplete};
+    webkit-transition: width 0.5s ease-in-out;
+    moz-transition: width 0.5s ease-in-out;
+    o-transition: width 0.5s ease-in-out;
+    transition: width 0.5s ease-in-out;
+  `
+
+  return (
+    <Box
+      data-testid="StepMeter_StepMeterContainer"
+      css={StepMeterContainer}
+      {...styleProps}
+    >
+      <Box data-testid="StepMeter_StepMeterBar" css={StepMeterBar} />
+    </Box>
+  )
+}

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,
+  },
+}