@opentrons/components 0.2.0-alpha.0 → 0.2.0-alpha.4

package/src/organisms/Toolbox/Toolbox.stories.tsx

@@ -1,34 +0,0 @@
-import { STYLE_PROPS } from '../../primitives'
-import { Toolbox as ToolboxComponent } from './index'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof ToolboxComponent> = {
-  title: 'Helix/Organisms/Toolbox',
-  component: ToolboxComponent,
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-  },
-  decorators: [Story => <Story />],
-}
-
-export default meta
-type Story = StoryObj<typeof ToolboxComponent>
-
-export const Toolbox: Story = {
-  args: {
-    title: 'Header',
-    children: <div>Slot Component: Replace me using the component panel.</div>,
-    confirmButtonText: 'Done',
-    onCloseClick: () => {},
-    titleIconName: 'swap-horizontal',
-    closeButtonText: 'Text link',
-    onConfirmClick: () => {},
-  },
-}

package/src/organisms/Toolbox/__tests__/Toolbox.test.tsx

@@ -1,37 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { Toolbox } from '../index'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof Toolbox>) => {
-  return renderWithProviders(<Toolbox {...props} />)
-}
-
-describe('Toolbox', () => {
-  let props: ComponentProps<typeof Toolbox>
-
-  it('should render text and buttons', () => {
-    props = {
-      title: <div>mock header</div>,
-      children: <div>mock children</div>,
-      confirmButtonText: 'done',
-      onCloseClick: vi.fn(),
-      closeButton: <div>exit</div>,
-      onConfirmClick: vi.fn(),
-      secondaryHeaderButton: <div>mock secondary header button</div>,
-    }
-    render(props)
-    screen.getByText('mock header')
-    screen.getByText('done')
-    fireEvent.click(screen.getByTestId('Toolbox_confirmButton'))
-    expect(props.onConfirmClick).toHaveBeenCalled()
-    screen.getByText('mock children')
-    screen.getByText('exit')
-    fireEvent.click(screen.getByTestId('Toolbox_closeButton'))
-    expect(props.onCloseClick).toHaveBeenCalled()
-    screen.getByText('mock secondary header button')
-  })
-})

package/src/organisms/Toolbox/index.tsx

@@ -1,149 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-import { PrimaryButton } from '../../atoms'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Box, Btn, Flex } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DIRECTION_COLUMN,
-  JUSTIFY_SPACE_BETWEEN,
-  NO_WRAP,
-  POSITION_RELATIVE,
-} from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-import { textDecorationUnderline } from '../../ui-style-constants/typography'
-
-import type { ReactNode } from 'react'
-import type { StyleProps } from '../../primitives'
-
-export interface ToolboxProps extends StyleProps {
-  title: JSX.Element
-  children: ReactNode
-  disableCloseButton?: boolean
-  confirmButtonText?: string
-  onConfirmClick?: () => void
-  confirmButton?: JSX.Element
-  onCloseClick?: () => void
-  closeButton?: JSX.Element
-  titlePadding?: string
-  childrenPadding?: string
-  subHeader?: JSX.Element | null
-  secondaryHeaderButton?: JSX.Element
-}
-
-export function Toolbox(props: ToolboxProps): JSX.Element {
-  const {
-    title,
-    children,
-    confirmButtonText,
-    onCloseClick,
-    onConfirmClick,
-    closeButton,
-    height = '100%',
-    disableCloseButton = false,
-    width = '19.5rem',
-    confirmButton,
-    titlePadding = SPACING.spacing16,
-    childrenPadding = SPACING.spacing16,
-    subHeader,
-    secondaryHeaderButton,
-    position = POSITION_RELATIVE,
-    ...styleProps
-  } = props
-
-  const slideOutRef = useRef<HTMLDivElement>(null)
-  const [isScrolledToBottom, setIsScrolledToBottom] = useState<boolean>(false)
-  const handleScroll = (): void => {
-    if (slideOutRef.current == null) return
-    const { scrollTop, scrollHeight, clientHeight } = slideOutRef.current
-    if (scrollTop + clientHeight === scrollHeight) {
-      setIsScrolledToBottom(true)
-    } else {
-      setIsScrolledToBottom(false)
-    }
-  }
-
-  useEffect(() => {
-    handleScroll()
-  }, [slideOutRef])
-
-  return (
-    <Flex
-      cursor="auto"
-      backgroundColor={COLORS.white}
-      boxShadow="0px 3px 6px rgba(0, 0, 0, 0.23)"
-      height={height}
-      width={width}
-      position={position}
-      borderRadius={BORDERS.borderRadius8}
-      flex="0"
-      {...styleProps}
-    >
-      <Flex
-        width={width}
-        height="100%"
-        flexDirection={DIRECTION_COLUMN}
-        justifyContent={JUSTIFY_SPACE_BETWEEN}
-      >
-        <Flex
-          padding={titlePadding}
-          flexDirection={DIRECTION_COLUMN}
-          borderBottom={`1px solid ${COLORS.grey30}`}
-        >
-          {subHeader ?? null}
-          <Flex
-            justifyContent={JUSTIFY_SPACE_BETWEEN}
-            alignItems={ALIGN_CENTER}
-            gridGap={SPACING.spacing12}
-          >
-            {title}
-            <Flex gridGap={SPACING.spacing4}>
-              {secondaryHeaderButton ?? null}
-              {onCloseClick != null && closeButton != null ? (
-                <Btn
-                  disabled={disableCloseButton}
-                  onClick={onCloseClick}
-                  textDecoration={textDecorationUnderline}
-                  data-testid="Toolbox_closeButton"
-                  whiteSpace={NO_WRAP}
-                >
-                  {closeButton}
-                </Btn>
-              ) : null}
-            </Flex>
-          </Flex>
-        </Flex>
-        <Box
-          padding={childrenPadding}
-          flex="1 1 auto"
-          overflowY="auto"
-          ref={slideOutRef}
-          onScroll={handleScroll}
-        >
-          {children}
-        </Box>
-        {(onConfirmClick != null && confirmButtonText != null) ||
-        confirmButton != null ? (
-          <Box
-            padding={SPACING.spacing16}
-            boxShadow={isScrolledToBottom ? 'none' : '0px -4px 12px #0000001a'}
-            width="100%"
-            borderTop={`1px solid ${COLORS.grey30}`}
-            alignItems={ALIGN_CENTER}
-          >
-            {onConfirmClick != null && confirmButtonText != null ? (
-              <PrimaryButton
-                width="100%"
-                data-testid="Toolbox_confirmButton"
-                onClick={onConfirmClick}
-              >
-                {confirmButtonText}
-              </PrimaryButton>
-            ) : null}
-            {confirmButton ?? null}
-          </Box>
-        ) : null}
-      </Flex>
-    </Flex>
-  )
-}

package/src/organisms/index.ts

@@ -1,6 +0,0 @@
-export * from './DeckLabelSet'
-export * from './Toolbox'
-export * from './ProtocolTimelineScrubber'
-export * from './CommandText'
-export * from './FixtureOption'
-export * from './ProtocolDeck'

package/src/primitives/Box.stories.tsx

@@ -1,25 +0,0 @@
-import { BORDERS, COLORS } from '../helix-design-system'
-import { SPACING } from '../ui-style-constants'
-import { Box as BoxComponent } from './Box'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof BoxComponent> = {
-  title: 'Library/Atoms/Box',
-  component: BoxComponent,
-}
-
-export default meta
-
-type Story = StoryObj<typeof BoxComponent>
-
-export const Box: Story = {
-  args: {
-    children:
-      'This is a simple box atom that accepts all primitive styling props.',
-    backgroundColor: COLORS.grey60,
-    border: `1px ${BORDERS.styleSolid} black`,
-    padding: SPACING.spacing16,
-    maxWidth: '20rem',
-  },
-}

package/src/primitives/Box.tsx

@@ -1,17 +0,0 @@
-import styled from 'styled-components'
-
-import { isntStyleProp, styleProps } from './style-props'
-
-import type { PrimitiveComponent } from './types'
-
-/**
- * Simple Box atom. Renders a `div` by default and accepts all primitive styling props.
- *
- * @component
- */
-export const Box: PrimitiveComponent<'div'> = styled.div.withConfig({
-  shouldForwardProp: isntStyleProp,
-})`
-  min-width: 0;
-  ${styleProps}
-`

package/src/primitives/Btn.stories.tsx

@@ -1,105 +0,0 @@
-import { Box } from './Box'
-import {
-  LightSecondaryBtn,
-  NewAlertPrimaryBtn,
-  NewAlertSecondaryBtn,
-  NewPrimaryBtn,
-  NewSecondaryBtn,
-  PrimaryBtn,
-  SecondaryBtn,
-  TertiaryBtn,
-} from './Btn'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-export default {
-  title: 'Library/Atoms/Btn',
-  argTypes: { onClick: { action: 'clicked' } },
-} as Meta
-
-const PrimaryTemplate: Story<
-  React.ComponentProps<typeof PrimaryBtn>
-> = args => <PrimaryBtn {...args} />
-export const Primary = PrimaryTemplate.bind({})
-Primary.args = {
-  children: 'Confirm and Proceed',
-  title: 'primary button title',
-}
-
-const SecondaryTemplate: Story<
-  React.ComponentProps<typeof SecondaryBtn>
-> = args => <SecondaryBtn {...args} />
-export const Secondary = SecondaryTemplate.bind({})
-Secondary.args = {
-  children: 'Cancel',
-  title: 'secondary button title',
-}
-
-const AppPrimaryTemlate: Story<
-  React.ComponentProps<typeof NewPrimaryBtn>
-> = args => <NewPrimaryBtn {...args} />
-export const AppPrimary = AppPrimaryTemlate.bind({})
-AppPrimary.args = {
-  children: 'Confirm and Proceed',
-  title: 'app primary button title',
-}
-
-const AppSecondaryTemlate: Story<
-  React.ComponentProps<typeof NewSecondaryBtn>
-> = args => <NewSecondaryBtn {...args} />
-export const AppSecondary = AppSecondaryTemlate.bind({})
-AppSecondary.args = {
-  children: 'Confirm and Proceed',
-  title: 'app secondary button title',
-}
-
-const AppAlertPrimaryTemlate: Story<
-  React.ComponentProps<typeof NewAlertPrimaryBtn>
-> = args => <NewAlertPrimaryBtn {...args} />
-export const AppAlertPrimary = AppAlertPrimaryTemlate.bind({})
-AppAlertPrimary.args = {
-  children: 'Cancel',
-  title: 'app alert primary button title',
-}
-
-const AppAlertSecondaryTemlate: Story<
-  React.ComponentProps<typeof NewAlertSecondaryBtn>
-> = args => <NewAlertSecondaryBtn {...args} />
-export const AppAlertSecondary = AppAlertSecondaryTemlate.bind({})
-AppAlertSecondary.args = {
-  children: 'Cancel',
-  title: 'app alert secondary button title',
-}
-
-const LightSecondaryTemplate: Story<
-  React.ComponentProps<typeof LightSecondaryBtn>
-> = args => <LightSecondaryBtn {...args} />
-export const LightSecondary = LightSecondaryTemplate.bind({})
-LightSecondary.decorators = [
-  Story => (
-    <Box backgroundColor="black" size="20rem" padding="2rem">
-      <Story />
-    </Box>
-  ),
-]
-LightSecondary.args = {
-  children: 'Cancel',
-  title: 'secondary button title',
-}
-
-const TertiaryTemplate: Story<
-  React.ComponentProps<typeof TertiaryBtn>
-> = args => <TertiaryBtn {...args} />
-TertiaryTemplate.decorators = [
-  Story => (
-    <Box backgroundColor="black" size="20rem" padding="2rem">
-      <Story />
-    </Box>
-  ),
-]
-export const Tertiary = TertiaryTemplate.bind({})
-Tertiary.args = {
-  children: 'Perform Side-Effect',
-  title: 'tertiary button title',
-}

package/src/primitives/Btn.tsx

@@ -1,267 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import * as Styles from '../styles'
-import { RESPONSIVENESS } from '../ui-style-constants'
-import { isntStyleProp, styleProps } from './style-props'
-
-import type { StyledComponent } from 'styled-components'
-import type { HTMLProps } from 'react'
-import type { StyleProps } from './types'
-
-export const BUTTON_TYPE_SUBMIT: 'submit' = 'submit'
-export const BUTTON_TYPE_RESET: 'reset' = 'reset'
-export const BUTTON_TYPE_BUTTON: 'button' = 'button'
-
-const BUTTON_BASE_STYLE = css`
-  appearance: none;
-  padding: 0;
-  border-width: 0;
-  border-style: solid;
-  background-color: transparent;
-  cursor: ${Styles.CURSOR_POINTER};
-
-  &:disabled,
-  &.disabled {
-    cursor: ${Styles.CURSOR_DEFAULT};
-  }
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    cursor: ${Styles.CURSOR_DEFAULT};
-  }
-`
-
-const BUTTON_VARIANT_STYLE = css`
-  border-color: inherit;
-  border-radius: ${Styles.BORDER_RADIUS_DEFAULT};
-  display: ${Styles.DISPLAY_INLINE_BLOCK};
-  font-size: ${Styles.FONT_SIZE_BODY_2};
-  font-weight: ${Styles.FONT_WEIGHT_SEMIBOLD};
-  line-height: 1.4;
-  padding-left: ${Styles.SPACING_4};
-  padding-right: ${Styles.SPACING_4};
-  padding-top: ${Styles.SPACING_2};
-  padding-bottom: ${Styles.SPACING_2};
-  text-align: ${Styles.TEXT_ALIGN_CENTER};
-  text-transform: ${Styles.TEXT_TRANSFORM_UPPERCASE};
-`
-
-/**
- * Button primitive
- *
- * @component
- */
-export const Btn: StyledComponent<
-  'button',
-  any,
-  StyleProps,
-  any
-> = styled.button
-  .withConfig({
-    shouldForwardProp: isntStyleProp,
-  })
-  .attrs((props: HTMLProps<HTMLButtonElement>) => ({
-    type: props.type ?? BUTTON_TYPE_BUTTON,
-  }))`
-  ${BUTTON_BASE_STYLE}
-  ${styleProps}
-`
-
-/**
- * Primary button variant
- *
- * @component
- */
-export const PrimaryBtn = styled(Btn)`
-  ${BUTTON_VARIANT_STYLE}
-  background-color: ${Styles.C_DARK_GRAY};
-  color: ${Styles.C_WHITE};
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-
-  &:hover,
-  &:focus {
-    background-color: ${Styles.C_BLACK};
-  }
-
-  &:active {
-    background-color: ${Styles.C_MED_DARK_GRAY};
-  }
-
-  &:disabled,
-  &.disabled {
-    background-color: ${Styles.C_LIGHT_GRAY};
-    color: ${Styles.C_MED_GRAY};
-    box-shadow: none;
-  }
-
-  ${styleProps}
-`
-
-/**
- * Secondary button variant
- *
- * @component
- */
-export const SecondaryBtn = styled(Btn)`
-  ${BUTTON_VARIANT_STYLE}
-  background-color: ${Styles.C_WHITE};
-  border-width: ${Styles.BORDER_WIDTH_DEFAULT};
-  color: ${Styles.C_DARK_GRAY};
-
-  &:hover,
-  &:focus {
-    background-color: ${Styles.C_LIGHT_GRAY};
-  }
-
-  &:active {
-    background-color: ${Styles.C_MED_LIGHT_GRAY};
-  }
-
-  &:disabled,
-  &.disabled {
-    background-color: ${Styles.C_WHITE};
-    color: ${Styles.C_MED_GRAY};
-  }
-
-  ${styleProps}
-`
-
-/**
- * New primary button variant used in app
- *
- * @component
- */
-export const NewPrimaryBtn = styled(PrimaryBtn)`
-  background-color: ${Styles.C_BLUE};
-  color: ${Styles.C_WHITE};
-
-  &:hover,
-  &:focus {
-    background-color: ${Styles.C_BLUE};
-    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.23);
-  }
-
-  &:active {
-    background-color: #004aaa;
-    box-shadow: none;
-  }
-
-  &:disabled,
-  &.disabled {
-    background-color: ${Styles.C_FONT_DISABLED};
-    color: ${Styles.C_WHITE};
-    box-shadow: none;
-  }
-
-  ${styleProps}
-`
-
-/**
- * New secondary button variant used in app
- *
- * @component
- */
-export const NewSecondaryBtn = styled(SecondaryBtn)`
-  background-color: ${Styles.C_WHITE};
-  color: ${Styles.C_BLUE};
-
-  &:hover,
-  &:focus {
-    border-width: '2px';
-    background-color: ${Styles.C_WHITE};
-    color: ${Styles.C_BLUE};
-    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.23);
-  }
-
-  &:active {
-    border-width: '2px';
-    background-color: ${Styles.C_WHITE};
-    color: ${Styles.C_BLUE};
-    color: #004aaa;
-    box-shadow: none;
-  }
-
-  &:disabled,
-  &.disabled {
-    border-width: '2px';
-    background-color: ${Styles.C_WHITE};
-    color: ${Styles.C_FONT_DISABLED};
-    box-shadow: none;
-  }
-
-  ${styleProps}
-`
-/**
- * Red primary button variant used in app
- *
- * @component
- */
-export const NewAlertPrimaryBtn = styled(NewPrimaryBtn)`
-  background-color: ${Styles.C_ERROR_DARK};
-
-  &:hover,
-  &:focus {
-    background-color: ${Styles.C_ERROR_DARK};
-  }
-
-  &:active {
-    background-color: ${Styles.C_ERROR_LIGHT};
-  }
-
-  ${styleProps}
-`
-
-/**
- * Red secondary button variant used in app
- *
- * @component
- */
-export const NewAlertSecondaryBtn = styled(NewSecondaryBtn)`
-  color: ${Styles.C_ERROR_DARK};
-
-  &:hover,
-  &:focus {
-    color: ${Styles.C_ERROR_DARK};
-  }
-
-  &:active {
-    color: ${Styles.C_ERROR_LIGHT};
-  }
-
-  ${styleProps}
-`
-
-/**
- * Light secondary button variant
- *
- * @component
- */
-export const LightSecondaryBtn = styled(SecondaryBtn)`
-  background-color: ${Styles.C_TRANSPARENT};
-  color: ${Styles.C_WHITE};
-
-  &:hover,
-  &:focus {
-    background-color: ${Styles.OVERLAY_WHITE_10};
-  }
-
-  &:active {
-    background-color: ${Styles.OVERLAY_WHITE_20};
-  }
-
-  &:disabled,
-  &.disabled {
-    background-color: ${Styles.C_TRANSPARENT};
-    color: ${Styles.C_MED_GRAY};
-  }
-
-  ${styleProps}
-`
-
-/**
- * Tertiary button variant
- *
- * @component
- */
-export const TertiaryBtn = styled(LightSecondaryBtn)`
-  border-width: 0;
-`

package/src/primitives/Flex.stories.tsx

@@ -1,50 +0,0 @@
-import { LegacyStyledText } from '../atoms/StyledText'
-import { BORDERS, COLORS } from '../helix-design-system'
-import { Box, Flex as FlexComponent } from '../primitives'
-import { DIRECTION_COLUMN, JUSTIFY_SPACE_AROUND } from '../styles'
-import { SPACING } from '../ui-style-constants'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof FlexComponent> = {
-  title: 'Library/Atoms/Flex',
-  component: FlexComponent,
-}
-
-export default meta
-
-type Story = StoryObj<typeof FlexComponent>
-
-export const Flex: Story = {
-  args: {
-    children: [
-      <Box
-        key="1"
-        backgroundColor={COLORS.red60}
-        padding={SPACING.spacing16}
-        borderRadius={BORDERS.borderRadius4}
-      >
-        <LegacyStyledText as="p" color={COLORS.white}>
-          This is a flex child
-        </LegacyStyledText>
-      </Box>,
-      <Box
-        key="2"
-        backgroundColor={COLORS.blue60}
-        padding={SPACING.spacing16}
-        borderRadius={BORDERS.borderRadius4}
-      >
-        <LegacyStyledText as="p" color={COLORS.white}>
-          This is a flex child
-        </LegacyStyledText>
-      </Box>,
-    ],
-    flexDirection: DIRECTION_COLUMN,
-    justifyContent: JUSTIFY_SPACE_AROUND,
-    backgroundColor: 'grey',
-    border: '1px solid black',
-    padding: '1rem',
-    maxWidth: '20rem',
-    height: '10rem',
-  },
-}