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

package/src/modals/modals.module.css

@@ -0,0 +1,275 @@
+/* common styling for modals */
+@import '../index.module.css';
+
+.modal {
+  /* from legacy --absolute-fill */
+  top: 0;
+
+  /* from legacy --absolute-fill */
+  right: 0;
+
+  /* from legacy --absolute-fill */
+  bottom: 0;
+
+  /* from legacy --absolute-fill */
+  left: 0;
+
+  /* from legacy --absolute-fill */
+  display: flex;
+
+  /* from legacy --center-children */
+  justify-content: center;
+
+  /* from legacy --center-children */
+  align-items: center;
+
+  /* from legacy --center-children */
+
+  align-items: flex-start;
+  position: fixed;
+  z-index: 1;
+  padding: 4rem;
+}
+
+.modal_page {
+  position: absolute;
+
+  /* from legacy --absolute-fill */
+  top: 0;
+
+  /* from legacy --absolute-fill */
+  right: 0;
+
+  /* from legacy --absolute-fill */
+  bottom: 0;
+
+  /* from legacy --absolute-fill */
+  left: 0;
+
+  /* from legacy --absolute-fill */
+
+  display: flex;
+
+  /* from legacy --flex-start */
+  justify-content: flex-start;
+
+  /* from legacy --flex-start */
+  align-items: center;
+
+  /* from legacy --flex-start */
+
+  flex-direction: column;
+  padding: 4.5rem 3rem 1rem 3rem;
+}
+
+.overlay {
+  position: absolute;
+
+  /* from legacy --absolute-fill */
+  top: 0;
+
+  /* from legacy --absolute-fill */
+  right: 0;
+
+  /* from legacy --absolute-fill */
+  bottom: 0;
+
+  /* from legacy --absolute-fill */
+  left: 0;
+
+  /* from legacy --absolute-fill */
+
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+.title_bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 3;
+}
+
+.modal_contents {
+  z-index: 1;
+
+  /* from legacy --modal-contents */
+  width: 100%;
+
+  /* from legacy --modal-contents */
+  max-width: 38rem;
+
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
+  /* from legacy --modal-contents */
+  padding: 1rem;
+
+  /* from legacy --modal-contents */
+  border-radius: 0.5rem;
+
+  /* from legacy --modal-contents */
+
+  background-color: white;
+}
+
+.modal_page_contents {
+  z-index: 1;
+
+  /* from legacy --modal-contents */
+  width: 100%;
+
+  /* from legacy --modal-contents */
+  max-width: 38rem;
+
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
+  /* from legacy --modal-contents */
+  padding: 1rem;
+
+  /* from legacy --modal-contents */
+  border-radius: 0.5rem;
+
+  /* from legacy --modal-contents */
+
+  background-color: white;
+  max-height: 100%;
+  overflow-y: auto;
+  padding-top: 1rem;
+}
+
+.modal_heading {
+  font-size: var(--fs-header);
+
+  /* from legacy --font-header-dark */
+  font-weight: var(--fw-semibold);
+
+  /* from legacy --font-header-dark */
+  color: var(--c-font-dark);
+
+  /* from legacy --font-header-dark */
+
+  margin-top: 0;
+  margin-bottom: 1rem;
+  text-transform: capitalize;
+}
+
+.alert_modal_wrapper {
+  position: relative;
+  max-height: 100%;
+  padding-top: 4rem;
+  border-radius: 0;
+}
+
+.alert_modal_heading.no_icon_heading {
+  padding-left: 2rem;
+}
+
+.no_alert_header {
+  padding-top: 1.5rem;
+}
+
+.spinner_modal_contents {
+  /* from legacy --modal-contents */
+  width: 100%;
+
+  /* from legacy --modal-contents */
+  margin: 0 auto;
+
+  /* from legacy --modal-contents */
+  padding: 1rem;
+
+  /* from legacy --modal-contents */
+  border-radius: 0.5rem;
+
+  /* from legacy --modal-contents */
+  font-size: var(--fs-body-2);
+
+  /* from legacy --font-body-2-light */
+  font-weight: var(--fw-regular);
+
+  /* from legacy --font-body-2-light */
+  color: var(--c-font-light);
+
+  /* from legacy --font-body-2-light */
+
+  max-width: 30rem;
+  padding-top: 3rem;
+  background-color: transparent;
+  flex-direction: column;
+  font-style: italic;
+  text-align: center;
+  z-index: 4;
+}
+
+.spinner_modal_icon {
+  width: 7.5rem;
+  margin-bottom: 3rem;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.alert_modal {
+  z-index: 10;
+}
+
+.alert_modal_overlay {
+  background-color: rgba(115, 115, 115, 0.9);
+}
+
+.alert_modal_contents {
+  font-size: var(--fs-body-2);
+
+  /* from legacy --font-body-2-dark */
+  font-weight: var(--fw-regular);
+
+  /* from legacy --font-body-2-dark */
+  color: var(--c-font-dark);
+
+  /* from legacy --font-body-2-dark */
+
+  width: 100%;
+  max-height: 100%;
+  padding: 1rem;
+
+  & > p {
+    padding-bottom: 1rem;
+  }
+}
+
+.alert_modal_heading {
+  font-size: var(--fs-header);
+
+  /* from legacy --font-header-dark */
+  color: var(--c-font-dark);
+
+  /* from legacy --font-header-dark */
+
+  font-weight: normal;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  background-color: #e0e0e0;
+}
+
+.alert_modal_icon {
+  height: 1.125rem;
+  margin-right: 0.75rem;
+}
+
+.alert_modal_buttons {
+  float: right;
+  margin-top: 1rem;
+}
+
+.alert_button {
+  margin-left: 1rem;
+}

package/src/molecules/Banner/Banner.stories.tsx

@@ -0,0 +1,51 @@
+import { STYLE_PROPS } from '../../primitives'
+import { StyledText } from '../../atoms/StyledText'
+import { Banner } from './index'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Banner> = {
+  title: 'Helix/Molecules/Banner',
+  component: Banner,
+  argTypes: {
+    // Disable all StyleProps
+    ...Object.fromEntries(
+      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
+        prop,
+        { table: { disable: true } },
+      ])
+    ),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Banner>
+
+export const Primary: Story = {
+  args: {
+    children: 'Banner component',
+    type: 'success',
+  },
+}
+
+export const OverriddenIcon: Story = {
+  args: {
+    type: 'warning',
+    children: 'Banner component',
+    icon: { name: 'ot-hot-to-touch' },
+  },
+}
+
+export const OverriddenExitIcon: Story = {
+  args: {
+    type: 'informing',
+    children: 'Banner component',
+    onCloseClick: () => {
+      console.log('close')
+    },
+    closeButton: (
+      <StyledText desktopStyle="bodyDefaultRegular">{'Exit'}</StyledText>
+    ),
+  },
+}

package/src/molecules/Banner/__tests__/Banner.test.tsx

@@ -0,0 +1,95 @@
+import { describe, it, vi, expect, beforeEach } from 'vitest'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../testing/utils'
+
+import { Banner } from '..'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Banner>) => {
+  return renderWithProviders(<Banner {...props} />)[0]
+}
+
+describe('Banner', () => {
+  let props: ComponentProps<typeof Banner>
+
+  beforeEach(() => {
+    props = {
+      type: 'success',
+      children: 'TITLE',
+    }
+  })
+
+  it('renders success banner', () => {
+    render(props)
+    screen.getByLabelText('icon_success')
+    screen.getByText('TITLE')
+  })
+
+  it('renders success banner with exit button and when click dismisses banner', () => {
+    props = {
+      type: 'success',
+      children: 'TITLE',
+      onCloseClick: vi.fn(),
+    }
+    render(props)
+    screen.getByText('TITLE')
+    const btn = screen.getByLabelText('close_icon')
+    fireEvent.click(btn)
+    expect(props.onCloseClick).toHaveBeenCalled()
+  })
+
+  it('renders warning banner', () => {
+    props = {
+      type: 'warning',
+      children: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_warning')
+    screen.getByText('TITLE')
+  })
+
+  it('renders error banner', () => {
+    props = {
+      type: 'error',
+      children: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_error')
+    screen.getByText('TITLE')
+  })
+
+  it('renders updating banner', () => {
+    props = {
+      type: 'updating',
+      children: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_updating')
+    screen.getByText('TITLE')
+  })
+
+  it('renders custom icon banner', () => {
+    props = {
+      type: 'warning',
+      children: 'TITLE',
+      icon: { name: 'ot-hot-to-touch' },
+    }
+    render(props)
+    screen.getByLabelText('icon_warning')
+    screen.getByText('TITLE')
+  })
+
+  it('renders custom close', () => {
+    props = {
+      type: 'warning',
+      children: 'TITLE',
+      closeButton: 'close button',
+      onCloseClick: vi.fn(),
+    }
+    render(props)
+    const btn = screen.getByText('close button')
+    fireEvent.click(btn)
+    expect(props.onCloseClick).toHaveBeenCalled()
+  })
+})

package/src/molecules/Banner/index.tsx

@@ -0,0 +1,148 @@
+import { css } from 'styled-components'
+import { Btn, Flex } from '../../primitives'
+import { Icon } from '../../icons'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import {
+  ALIGN_CENTER,
+  DIRECTION_ROW,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../styles'
+
+import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
+import type { StyleProps } from '../../primitives'
+import type { IconProps } from '../../icons'
+
+export type BannerType =
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'updating'
+  | 'informing'
+
+export interface BannerProps extends StyleProps {
+  /** name constant of the icon to display */
+  type: BannerType
+  /** Banner contents */
+  children?: ReactNode
+  /** optional handler to show close button/clear alert  */
+  onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
+  /** Override the default Alert Icon */
+  icon?: IconProps
+  /** some banner onCloseClicks fire events, this allows a spinner after click but before event finishes */
+  isCloseActionLoading?: boolean
+  /** Override the Exit icon */
+  closeButton?: ReactNode
+  /** Icon margin right for large banners */
+  iconMarginRight?: string
+  /** Icon margin left for large banners */
+  iconMarginLeft?: string
+}
+
+const BANNER_PROPS_BY_TYPE: Record<
+  BannerType,
+  { icon: IconProps; backgroundColor: string; color: string }
+> = {
+  success: {
+    icon: { name: 'check-circle' },
+    backgroundColor: COLORS.green30,
+    color: COLORS.green60,
+  },
+  error: {
+    icon: { name: 'alert-circle' },
+    backgroundColor: COLORS.red30,
+    color: COLORS.red60,
+  },
+  warning: {
+    icon: { name: 'alert-circle' },
+    backgroundColor: COLORS.yellow30,
+    color: COLORS.yellow60,
+  },
+  updating: {
+    icon: { name: 'ot-spinner' },
+    backgroundColor: COLORS.grey30,
+    color: COLORS.grey60,
+  },
+  informing: {
+    icon: { name: 'information' },
+    backgroundColor: COLORS.blue30,
+    color: COLORS.blue60,
+  },
+}
+
+export function Banner(props: BannerProps): JSX.Element {
+  const {
+    type,
+    onCloseClick,
+    icon,
+    children,
+    isCloseActionLoading = false,
+    padding,
+    closeButton,
+    iconMarginLeft,
+    iconMarginRight,
+    size,
+    ...styleProps
+  } = props
+  const bannerProps = BANNER_PROPS_BY_TYPE[type]
+  const iconProps = {
+    ...(icon ?? bannerProps.icon),
+    size: size ?? '1rem',
+    marginRight: iconMarginRight ?? SPACING.spacing8,
+    marginLeft: iconMarginLeft ?? '0rem',
+    color: BANNER_PROPS_BY_TYPE[type].color,
+  }
+  const BANNER_STYLE = css`
+    font-size: ${TYPOGRAPHY.fontSizeP};
+    font-weight: ${TYPOGRAPHY.fontWeightRegular};
+    border-radius: ${SPACING.spacing4};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      font-size: 1.25rem;
+      font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+      background-color: ${COLORS.yellow35};
+      border-radius: ${BORDERS.borderRadius12};
+      line-height: 1.5rem;
+    }
+  `
+  return (
+    <Flex
+      backgroundColor={BANNER_PROPS_BY_TYPE[type].backgroundColor}
+      css={BANNER_STYLE}
+      flexDirection={DIRECTION_ROW}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      alignItems={ALIGN_CENTER}
+      padding={padding ?? SPACING.spacing8}
+      onClick={(e: MouseEvent) => {
+        e.stopPropagation()
+      }}
+      data-testid={`Banner_${type}`}
+      {...styleProps}
+    >
+      <Icon
+        {...iconProps}
+        aria-label={`icon_${type}`}
+        spin={BANNER_PROPS_BY_TYPE[type].icon.name === 'ot-spinner'}
+      />
+      <Flex flex="1" alignItems={ALIGN_CENTER}>
+        {props.children}
+      </Flex>
+      {onCloseClick != null && !(isCloseActionLoading ?? false) ? (
+        <Btn data-testid="Banner_close-button" onClick={props.onCloseClick}>
+          {closeButton ?? (
+            <Icon
+              width={SPACING.spacing24}
+              height={SPACING.spacing24}
+              marginTop={SPACING.spacing6}
+              name="close"
+              aria-label="close_icon"
+            />
+          )}
+        </Btn>
+      ) : null}
+      {(isCloseActionLoading ?? false) && (
+        <Icon name="ot-spinner" size="1rem" aria-label="ot-spinner" spin />
+      )}
+    </Flex>
+  )
+}

package/src/molecules/DeckInfoLabel/DeckInfoLabel.stories.tsx

@@ -0,0 +1,65 @@
+import { customViewports } from '../../../../.storybook/preview'
+import { Flex } from '../../primitives'
+import { SPACING } from '../../ui-style-constants'
+import { DeckInfoLabel } from '.'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof DeckInfoLabel> = {
+  title: 'Helix/Molecules/DeckInfoLabel',
+  argTypes: {
+    iconName: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'ot-magnet-v2',
+        'ot-heater-shaker',
+        'ot-temperature-v2',
+        'ot-magnet-v2',
+        'ot-thermocycler',
+        'ot-absorbance',
+        'stacked',
+      ],
+    },
+    deckLabel: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'A1',
+    },
+  },
+  component: DeckInfoLabel,
+  parameters: {
+    controls: { include: ['highlight', 'iconName', 'deckLabel'] },
+    viewport: {
+      viewports: customViewports,
+      defaultViewport: 'onDeviceDisplay',
+    },
+  },
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16} width="15rem" height="5rem">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+type Story = StoryObj<typeof DeckInfoLabel>
+
+export const DisplaySlot: Story = {
+  args: {
+    deckLabel: 'A1',
+    iconName: undefined,
+    highlight: false,
+  },
+}
+
+export const DisplayIcon: Story = {
+  args: {
+    deckLabel: undefined,
+    iconName: 'ot-temperature-v2',
+    highlight: false,
+  },
+}

package/src/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.tsx

@@ -0,0 +1,50 @@
+import { describe, it, beforeEach, expect } from 'vitest'
+import { renderWithProviders } from '../../../testing/utils'
+import { screen } from '@testing-library/react'
+import { SPACING } from '../../../ui-style-constants'
+import { BORDERS, COLORS } from '../../../helix-design-system'
+
+import { DeckInfoLabel } from '..'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof DeckInfoLabel>) => {
+  return renderWithProviders(<DeckInfoLabel {...props} />)
+}
+
+describe('DeckInfoLabel', () => {
+  let props: ComponentProps<typeof DeckInfoLabel>
+
+  beforeEach(() => {
+    props = {
+      deckLabel: 'A1',
+    }
+  })
+
+  it('should render the proper styles - web style', () => {
+    render(props)
+    const deckInfoLabel = screen.getByTestId('DeckInfoLabel_A1')
+    expect(deckInfoLabel).toHaveStyle(
+      `padding: ${SPACING.spacing2} ${SPACING.spacing4}`
+    )
+    expect(deckInfoLabel).toHaveStyle(`height: ${SPACING.spacing20}`)
+    expect(deckInfoLabel).toHaveStyle('width: max-content')
+    expect(deckInfoLabel).toHaveStyle(`border: 1px solid ${COLORS.black90}`)
+    expect(deckInfoLabel).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
+  })
+
+  it.todo('should render the proper styles - odd style')
+
+  it('should render deck label', () => {
+    render(props)
+    screen.getByText('A1')
+  })
+
+  it('should render an icon', () => {
+    props = {
+      iconName: 'ot-temperature-v2',
+    }
+    render(props)
+    screen.getByLabelText(props.iconName)
+  })
+})