@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.1

package/src/modals/__tests__/ModalShell.test.tsx

@@ -1,48 +0,0 @@
-import '@testing-library/jest-dom/vitest'
-
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import { renderWithProviders } from '../../testing/utils'
-import { ModalShell } from '../ModalShell'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof ModalShell>) => {
-  return renderWithProviders(<ModalShell {...props} />)
-}
-
-describe('ModalShell', () => {
-  let props: ComponentProps<typeof ModalShell>
-
-  beforeEach(() => {
-    props = {
-      children: <div>mock modal shell</div>,
-      fullPage: false,
-    }
-  })
-
-  it('should render content', () => {
-    render(props)
-    screen.getByText('mock modal shell')
-    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
-      'height: auto'
-    )
-  })
-
-  it('should render full size modal when fullSize is true', () => {
-    props.fullPage = true
-    render(props)
-    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
-      'height: 100%'
-    )
-  })
-
-  it('should render header and footer', () => {
-    props.header = <div>mock header</div>
-    props.footer = <div>mock footer</div>
-    render(props)
-    screen.getByText('mock header')
-    screen.getByText('mock footer')
-  })
-})

package/src/modals/index.ts

@@ -1,10 +0,0 @@
-// modal components
-export * from './AlertModal'
-export * from './ContinueModal'
-export * from './LegacyModal'
-export * from './Modal'
-export * from './ModalHeader'
-export * from './ModalShell'
-export * from './Overlay'
-export * from './SpinnerModal'
-export * from './SpinnerModalPage'

package/src/modals/modals.module.css

@@ -1,275 +0,0 @@
-/* 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

@@ -1,51 +0,0 @@
-import { StyledText } from '../../atoms/StyledText'
-import { STYLE_PROPS } from '../../primitives'
-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

@@ -1,95 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { Banner } from '..'
-import { renderWithProviders } from '../../../testing/utils'
-
-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

@@ -1,149 +0,0 @@
-import { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Btn, Flex } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DIRECTION_ROW,
-  JUSTIFY_SPACE_BETWEEN,
-} from '../../styles'
-import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-import type { MouseEvent, MouseEventHandler, ReactNode } from 'react'
-import type { IconProps } from '../../icons'
-import type { StyleProps } from '../../primitives'
-
-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

@@ -1,65 +0,0 @@
-import { DeckInfoLabel } from '.'
-import { customViewports } from '../../../../.storybook/preview'
-import { Flex } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
-
-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,
-  },
-}