@opentrons/components 0.2.0-alpha.0 → 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 {
-  position: fixed;
-  z-index: 1;
-
-  /* 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 */
-  align-items: center;
-
-  /* from legacy --center-children */
-
-  align-items: flex-start;
-
-  /* from legacy --center-children */
-  justify-content: center;
-  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 */
-
-  flex-direction: column;
-
-  /* from legacy --flex-start */
-  align-items: center;
-
-  /* from legacy --flex-start */
-  justify-content: flex-start;
-  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;
-  z-index: 3;
-  top: 0;
-  right: 0;
-  left: 0;
-  width: 100%;
-}
-
-.modal_contents {
-  z-index: 1;
-
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --modal-contents */
-  max-width: 38rem;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
-  /* 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;
-  max-height: 100%;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-  padding-top: 1rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
-  /* from legacy --modal-contents */
-
-  background-color: white;
-  overflow-y: auto;
-}
-
-.modal_heading {
-  /* from legacy --font-header-dark */
-
-  margin-top: 0;
-  margin-bottom: 1rem;
-
-  /* from legacy --font-header-dark */
-  color: var(--c-font-dark);
-  font-size: var(--fs-header);
-
-  /* from legacy --font-header-dark */
-  font-weight: var(--fw-semibold);
-  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 {
-  z-index: 4;
-
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --font-body-2-light */
-
-  max-width: 30rem;
-  flex-direction: column;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-  padding-top: 3rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-  background-color: transparent;
-
-  /* from legacy --font-body-2-light */
-  color: var(--c-font-light);
-
-  /* from legacy --modal-contents */
-  font-size: var(--fs-body-2);
-  font-style: italic;
-
-  /* from legacy --font-body-2-light */
-  font-weight: var(--fw-regular);
-  text-align: center;
-}
-
-.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 {
-  /* from legacy --font-body-2-dark */
-
-  width: 100%;
-  max-height: 100%;
-  padding: 1rem;
-
-  /* from legacy --font-body-2-dark */
-  color: var(--c-font-dark);
-  font-size: var(--fs-body-2);
-
-  /* from legacy --font-body-2-dark */
-  font-weight: var(--fw-regular);
-
-  & > p {
-    padding-bottom: 1rem;
-  }
-}
-
-.alert_modal_heading {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  background-color: #e0e0e0;
-
-  /* from legacy --font-header-dark */
-  color: var(--c-font-dark);
-  font-size: var(--fs-header);
-
-  /* from legacy --font-header-dark */
-
-  font-weight: normal;
-}
-
-.alert_modal_icon {
-  height: 1.125rem;
-  margin-right: 0.75rem;
-}
-
-.alert_modal_buttons {
-  margin-top: 1rem;
-  float: right;
-}
-
-.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/CustomizeExpandButton/__tests__/CustomizeExpandButton.test.tsx

@@ -1,88 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { fixture24Tuberack, fixture96Plate } from '@opentrons/shared-data'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { CustomizeExpandButton } from '../index'
-
-import type { ComponentProps } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-
-const render = (props: ComponentProps<typeof CustomizeExpandButton>) =>
-  renderWithProviders(<CustomizeExpandButton {...props} />)
-
-const INPUT_FIELD_PROPS = {
-  onInputFieldChange: vi.fn(),
-  inputFieldValue: 1,
-  inputTitle: 'mock inputTitle',
-  errorMessage: 'mock errorMessage',
-  inputCaption: 'mock inputCaption',
-  definition: { ...fixture96Plate, stackLimit: 4 } as LabwareDefinition2,
-}
-
-describe('CustomizeExpandButton', () => {
-  let props: ComponentProps<typeof CustomizeExpandButton>
-
-  beforeEach(() => {
-    props = {
-      enableStackingFF: true,
-      buttonText: 'mock text',
-      buttonValue: 'mockValue',
-      onChange: vi.fn(),
-      allowInputField: false,
-      loadName: 'mockLoadName',
-    }
-  })
-
-  it('should render non nested accordion', () => {
-    render(props)
-    fireEvent.click(screen.getByText('mock text'))
-    expect(props.onChange).toHaveBeenCalled()
-  })
-  it('should render the input field', () => {
-    props = {
-      ...props,
-      allowInputField: true,
-      isSelected: true,
-      stackingProps: INPUT_FIELD_PROPS,
-    }
-    render(props)
-    screen.getByText('mock inputTitle')
-    screen.getByText('mock inputCaption')
-    const input = screen.getByTestId('CustomizeExpandButton_inputField')
-    fireEvent.change(input, { target: { value: 4 } })
-    expect(props.stackingProps?.onInputFieldChange).toHaveBeenCalled()
-  })
-  it('should show input field error', () => {
-    props = {
-      ...props,
-      allowInputField: true,
-      isSelected: true,
-      stackingProps: {
-        ...INPUT_FIELD_PROPS,
-        inputFieldValue: 5,
-      },
-    }
-    render(props)
-    screen.getByText('mock errorMessage')
-  })
-  it('should render the checkbox', () => {
-    props = {
-      ...props,
-      isSelected: true,
-      stackingProps: {
-        ...INPUT_FIELD_PROPS,
-        definition: {
-          ...fixture24Tuberack,
-          allowedRoles: ['lid'],
-        } as LabwareDefinition2,
-        onCheckboxChange: vi.fn(),
-        checked: false,
-        checkboxCaption: 'mock checkboxCaption',
-      },
-    }
-    render(props)
-    screen.getByText('mock checkboxCaption')
-  })
-})