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

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

@@ -1,92 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { POSITION_RELATIVE } from '../../../styles'
-import { renderWithProviders } from '../../../testing/utils'
-import { SPACING } from '../../../ui-style-constants'
-import { Tabs } from '../index'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof Tabs>) => {
-  return renderWithProviders(<Tabs {...props} />)
-}
-
-describe('Tabs', () => {
-  let props: ComponentProps<typeof Tabs>
-
-  beforeEach(() => {
-    props = {
-      tabs: [
-        { text: 'set up', onClick: vi.fn() },
-        { text: 'parameters', onClick: vi.fn() },
-        { text: 'module controls', onClick: vi.fn() },
-      ],
-    }
-  })
-
-  it('renders unclicked tabs with text', () => {
-    render(props)
-
-    const tabTexts = ['set up', 'parameters', 'module controls']
-    const tabStyles = {
-      backgroundColor: COLORS.purple30,
-      borderRadius: BORDERS.borderRadius8,
-      padding: `${SPACING.spacing8} ${SPACING.spacing16}`,
-      position: POSITION_RELATIVE,
-    }
-
-    tabTexts.forEach(text => {
-      const tab = screen.getByText(text)
-      expect(tab).not.toBeNull()
-
-      Object.entries(tabStyles).forEach(([key, value]) => {
-        expect(tab).toHaveStyle(`${key}: ${value}`)
-      })
-    })
-  })
-
-  it('renders an active tab', () => {
-    props.tabs[0].isActive = true
-
-    render(props)
-
-    const tab1 = screen.getByText('set up')
-
-    expect(tab1).toHaveStyle(`background-color: ${COLORS.purple50}`)
-    expect(tab1).toHaveStyle(`color: ${COLORS.white}`)
-  })
-
-  it('should call the right click handler when clicked', () => {
-    render(props)
-
-    const tabList = props.tabs
-
-    fireEvent.click(screen.getByText('set up'))
-    expect(tabList[0].onClick).toHaveBeenCalled()
-
-    fireEvent.click(screen.getByText('parameters'))
-    expect(tabList[1].onClick).toHaveBeenCalled()
-
-    fireEvent.click(screen.getByText('module controls'))
-    expect(tabList[2].onClick).toHaveBeenCalled()
-  })
-
-  it('should show right style when disabled', () => {
-    props = {
-      tabs: [
-        { text: 'set up', onClick: vi.fn(), disabled: true },
-        { text: 'parameters', onClick: vi.fn() },
-        { text: 'module controls', onClick: vi.fn() },
-      ],
-    }
-    render(props)
-    const tab = screen.getByText('set up')
-    expect(tab).toHaveStyle(`background-color: ${COLORS.grey30}`)
-    expect(tab).toHaveStyle(`color: ${COLORS.grey40}`)
-
-    fireEvent.click(tab)
-    expect(props.tabs[0].onClick).not.toHaveBeenCalled()
-  })
-})

package/src/molecules/Tabs/index.tsx

@@ -1,116 +0,0 @@
-import { css } from 'styled-components'
-
-import { Tooltip } from '../../atoms'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Btn, Flex } from '../../primitives'
-import { DIRECTION_ROW, POSITION_RELATIVE } from '../../styles'
-import { useHoverTooltip } from '../../tooltips'
-import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-const DEFAULT_TAB_STYLE = css`
-  ${TYPOGRAPHY.pSemiBold}
-  background-color: ${COLORS.purple30};
-  border-radius: ${BORDERS.borderRadius8};
-  padding: ${SPACING.spacing8} ${SPACING.spacing16};
-  position: ${POSITION_RELATIVE};
-
-  &:hover {
-    background-color: ${COLORS.purple35};
-  }
-
-  &:focus-visible {
-    outline-offset: 2px;
-    outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
-  }
-
-  &:disabled {
-    background-color: ${COLORS.grey30};
-    color: ${COLORS.grey40};
-
-    &:hover {
-      background-color: ${COLORS.grey30};
-    }
-  }
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    border-radius: ${BORDERS.borderRadius16};
-    box-shadow: none;
-    font-size: ${TYPOGRAPHY.fontSize22};
-    font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
-    line-height: ${TYPOGRAPHY.lineHeight28};
-    padding: ${SPACING.spacing16} ${SPACING.spacing24};
-    text-transform: ${TYPOGRAPHY.textTransformNone};
-
-    &:focus-visible {
-      outline-offset: 3px;
-      outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
-    }
-  }
-`
-const CURRENT_TAB_STYLE = css`
-  ${DEFAULT_TAB_STYLE}
-  color: ${COLORS.white};
-  background-color: ${COLORS.purple50};
-
-  &:hover {
-    background-color: ${COLORS.purple55};
-  }
-`
-const DEFAULT_CONTAINER_STYLE = css`
-  grid-gap: ${SPACING.spacing4};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    grid-gap: ${SPACING.spacing8};
-  }
-`
-
-export interface TabProps {
-  text: string
-  onClick: () => void
-  isActive?: boolean
-  disabled?: boolean
-  disabledReasonForTooltip?: string
-}
-
-export interface TabsProps {
-  tabs: TabProps[]
-}
-
-export function Tabs(props: TabsProps): JSX.Element {
-  const { tabs } = props
-
-  return (
-    <Flex flexDirection={DIRECTION_ROW} css={DEFAULT_CONTAINER_STYLE}>
-      {tabs.map((tab, index) => (
-        <Tab {...tab} data-testid={`tab_${index}_${tab.text}`} key={index} />
-      ))}
-    </Flex>
-  )
-}
-
-function Tab(props: TabProps): JSX.Element {
-  const {
-    text,
-    onClick,
-    isActive,
-    disabled = false,
-    disabledReasonForTooltip,
-  } = props
-  const [targetProps, tooltipProps] = useHoverTooltip()
-  return (
-    <>
-      <Btn
-        onClick={onClick}
-        css={isActive === true ? CURRENT_TAB_STYLE : DEFAULT_TAB_STYLE}
-        disabled={disabled}
-        {...targetProps}
-      >
-        {text}
-      </Btn>
-      {disabled && disabledReasonForTooltip != null ? (
-        <Tooltip tooltipProps={tooltipProps}>
-          {disabledReasonForTooltip}
-        </Tooltip>
-      ) : null}
-    </>
-  )
-}

package/src/molecules/TextListTableContent/TextListTableContent.stories.tsx

@@ -1,114 +0,0 @@
-import { css } from 'styled-components'
-
-import { TextListTableContent as TextListTableContentComponent } from '.'
-import { StyledText } from '../../atoms'
-import { DISPLAY_GRID } from '../../styles'
-import { SPACING, VIEWPORT } from '../../ui-style-constants'
-
-import type { Meta, Story } from '@storybook/react'
-import type { ComponentProps } from 'react'
-
-export default {
-  title: 'Helix/Molecules/TextListTableContent',
-  component: TextListTableContentComponent,
-  argTypes: {
-    header: {
-      control: 'text',
-      description: 'The text that appears above the table',
-    },
-    listTableHeaders: {
-      control: 'array',
-      description: 'Headers for the list table',
-    },
-    rowCount: {
-      control: { type: 'range', min: 1, max: 99, step: 1 },
-      description:
-        'For Storybook only. Number of lorem ipsum text rows to display in the table. ',
-    },
-  },
-  parameters: VIEWPORT.touchScreenViewport,
-} as Meta
-
-interface TextListTableContentStoryProps
-  extends Omit<
-    ComponentProps<typeof TextListTableContentComponent>,
-    'children'
-  > {
-  rowCount: number
-}
-
-const loremIpsumSentences = [
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
-  'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.',
-  'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.',
-  'At vero eos et accusamus et iusto odio dignissimos ducimus.',
-  'Nam libero tempore, cum soluta nobis est eligendi optio cumque.',
-  'Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus.',
-]
-
-const Template: Story<TextListTableContentStoryProps> = args => {
-  const { rowCount, ...textListTableContentProps } = args
-  const numColumns = textListTableContentProps.listTableHeaders
-    ? textListTableContentProps.listTableHeaders.filter(Boolean).length
-    : 1
-
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  const renderRows = () => {
-    return Array.from({ length: rowCount }, (_, i) => {
-      return (
-        // @ts-expect-error Works.
-        <tr key={`row-${i}`} css={rowStyle(numColumns)}>
-          {Array.from({ length: numColumns }, (_, j) => {
-            const textIndex = (i + j) % loremIpsumSentences.length
-            return (
-              <td key={`cell-${i}-${j}`}>
-                <StyledText
-                  oddStyle="bodyTextRegular"
-                  desktopStyle="bodyDefaultRegular"
-                >
-                  {loremIpsumSentences[textIndex]}
-                </StyledText>
-              </td>
-            )
-          })}
-        </tr>
-      )
-    })
-  }
-
-  return (
-    <TextListTableContentComponent {...textListTableContentProps}>
-      {renderRows()}
-    </TextListTableContentComponent>
-  )
-}
-
-export const TextListTableContent = Template.bind({})
-TextListTableContent.args = {
-  header: 'Example Table Header',
-  listTableHeaders: ['Column 1', 'Column 2', 'Column 3'],
-  rowCount: 5,
-}
-
-export const TextListTableContentSingleColumn = Template.bind({})
-TextListTableContentSingleColumn.args = {
-  header: 'Example Single Column Table',
-  listTableHeaders: ['Column 1'],
-  rowCount: 5,
-}
-
-export const TextListTableContentNoHeader = Template.bind({})
-TextListTableContentNoHeader.args = {
-  header: 'Example Table Without Column Headers',
-  rowCount: 5,
-}
-
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-const rowStyle = (numColumns: number) => css`
-  display: ${DISPLAY_GRID};
-  grid-template-columns: repeat(${numColumns}, 1fr);
-  gap: ${SPACING.spacing24};
-  width: 100%;
-`

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

@@ -1,44 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, it, vi } from 'vitest'
-
-import { TextListTableContent } from '..'
-import { ListTable } from '../../../atoms/ListTable'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-vi.mock('../../../atoms/ListTable')
-
-const render = (props: ComponentProps<typeof TextListTableContent>) => {
-  return renderWithProviders(
-    <TextListTableContent {...props}>
-      <div>MOCK_CHILDREN</div>
-    </TextListTableContent>
-  )[0]
-}
-
-describe('TextListTableContent', () => {
-  let props: ComponentProps<typeof TextListTableContent>
-
-  beforeEach(() => {
-    props = {
-      header: 'Test Header',
-      listTableHeaders: ['Column 1', 'Column 2', 'Column 3'],
-      children: 'Table content',
-    }
-
-    vi.mocked(ListTable).mockReturnValue(<div>MOCK_LIST_TABLE</div>)
-  })
-
-  it('renders header text correctly', () => {
-    render(props)
-
-    screen.getByText('Test Header')
-  })
-
-  it('renders a ListTable', () => {
-    render(props)
-
-    screen.getByText('MOCK_LIST_TABLE')
-  })
-})

package/src/molecules/TextListTableContent/index.tsx

@@ -1,45 +0,0 @@
-import { css } from 'styled-components'
-
-import { StyledText } from '../../atoms'
-import { ListTable } from '../../atoms/ListTable'
-import { Flex } from '../../primitives'
-import { DIRECTION_COLUMN } from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-
-import type { ReactNode } from 'react'
-import type { ListTableProps } from '../../atoms/ListTable'
-
-export interface TextListTableContentProps {
-  /* The text that appears above the table. */
-  header: ReactNode
-  listTableHeaders?: ListTableProps['headers']
-  /* The ListTable content. See dev comments on ListTable for proper usage. */
-  children: ReactNode
-}
-
-export function TextListTableContent({
-  header,
-  listTableHeaders,
-  children,
-}: TextListTableContentProps): JSX.Element {
-  return (
-    <Flex css={CONTAINER_STYLE}>
-      <StyledText
-        oddStyle="level4HeaderRegular"
-        desktopStyle="bodyDefaultRegular"
-      >
-        {header}
-      </StyledText>
-      <ListTable headers={listTableHeaders}>{children}</ListTable>
-    </Flex>
-  )
-}
-
-const CONTAINER_STYLE = css`
-  flex-direction: ${DIRECTION_COLUMN};
-  gap: ${SPACING.spacing16};
-
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    gap: ${SPACING.spacing24};
-  }
-`

package/src/molecules/index.ts

@@ -1,12 +0,0 @@
-export * from './Banner'
-export * from './CustomizeExpandButton'
-export * from './DeckInfoLabel'
-export * from './DeckLabel'
-export * from './DropdownMenu'
-export * from './InfoScreen'
-export * from './LiquidIcon'
-export * from './ListAccordion'
-export * from './ParametersTable'
-export * from './ReleaseNotes'
-export * from './Tabs'
-export * from './TextListTableContent'

package/src/nav/SidePanel.module.css

@@ -1,34 +0,0 @@
-@import '../index.module.css';
-
-:root {
-  --sidebar-width: 18.25rem;
-}
-
-.panel {
-  position: relative;
-  overflow: visible;
-  flex-shrink: 0;
-  padding: 0 4px;
-  border-right: var(--bd-light);
-  background-color: var(--c-bg-light);
-}
-
-.title_bar {
-  display: flex;
-  width: var(--sidebar-width);
-  align-items: center;
-}
-
-.title {
-  margin: 1rem auto;
-  color: var(--c-font-dark); /* from legacy --font-header-dark */
-  font-size: var(--fs-header); /* from legacy --font-header-dark */
-  font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
-}
-
-.panel_contents {
-  width: var(--sidebar-width);
-  height: calc(100vh - 3.5rem);
-  overflow-x: hidden;
-  overflow-y: auto;
-}

package/src/nav/SidePanel.stories.tsx

@@ -1,30 +0,0 @@
-import { ALIGN_CENTER, Flex, JUSTIFY_CENTER, Text } from '@opentrons/components'
-
-import { SidePanel as SidePanelComponent } from './SidePanel'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-export default {
-  title: 'Library/Molecules/Side Panel',
-  decorators: [
-    Story => (
-      <Flex>
-        <Story />
-      </Flex>
-    ),
-  ],
-} as Meta
-
-const Template: Story<
-  React.ComponentProps<typeof SidePanelComponent>
-> = args => <SidePanelComponent {...args} />
-export const SidePanel = Template.bind({})
-SidePanel.args = {
-  title: 'Title goes here',
-  children: (
-    <Flex justifyContent={JUSTIFY_CENTER} alignItems={ALIGN_CENTER}>
-      <Text>Side Panel Children</Text>
-    </Flex>
-  ),
-}

package/src/nav/SidePanel.tsx

@@ -1,22 +0,0 @@
-// collapsable side panel
-import styles from './SidePanel.module.css'
-
-import type { ReactNode } from 'react'
-
-export interface SidePanelProps {
-  title?: string
-  children?: ReactNode
-}
-
-export function SidePanel(props: SidePanelProps): JSX.Element {
-  return (
-    <div className={styles.panel}>
-      {props.title != null ? (
-        <div className={styles.title_bar}>
-          <h2 className={styles.title}>{props.title}</h2>
-        </div>
-      ) : null}
-      <div className={styles.panel_contents}>{props.children}</div>
-    </div>
-  )
-}

package/src/nav/index.ts

@@ -1,2 +0,0 @@
-// navigational components
-export * from './SidePanel'

package/src/organisms/CommandText/CommandText.stories.tsx

@@ -1,79 +0,0 @@
-import * as Fixtures from '../../../../app/src/molecules/Command/__fixtures__'
-import { Box } from '../../primitives'
-import { CommandText as CommandTextComponent } from './index'
-import { getLabwareDefinitionsFromCommands } from './useCommandTextString/utils'
-
-import type { Meta, StoryObj } from '@storybook/react'
-import type { RobotType } from '@opentrons/shared-data'
-
-interface StorybookArgs {
-  onDevice: boolean
-  robotType: RobotType
-  commandIndex: number
-}
-
-function Wrapper(props: StorybookArgs): JSX.Element {
-  const allRunDefs = getLabwareDefinitionsFromCommands(
-    Fixtures.mockDoItAllTextData.commands
-  )
-
-  return (
-    <Box width="960px" height="532">
-      <CommandTextComponent
-        command={Fixtures.mockDoItAllTextData.commands[props.commandIndex]}
-        commandTextData={Fixtures.mockDoItAllTextData}
-        robotType={props.robotType}
-        isOnDevice={props.onDevice}
-        allRunDefs={allRunDefs}
-      />
-    </Box>
-  )
-}
-
-const meta: Meta<StorybookArgs> = {
-  title: 'App/Molecules/Command/CommandText',
-  component: Wrapper,
-  argTypes: {
-    onDevice: {
-      control: {
-        type: 'boolean',
-      },
-      defaultValue: false,
-    },
-    robotType: {
-      control: {
-        type: 'select',
-      },
-      options: ['OT-2 Standard', 'OT-3 Standard'],
-      defaultValue: 'OT-3 Standard',
-    },
-    commandIndex: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: Fixtures.mockDoItAllTextData.commands.length - 1,
-      },
-      defaultValue: 0,
-    },
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof CommandTextComponent>
-
-export const DesktopCommandText: Story = {
-  args: {
-    isOnDevice: false,
-    allRunDefs: [],
-    robotType: 'OT-3 Standard',
-  },
-}
-
-export const ODDCommandText: Story = {
-  args: {
-    isOnDevice: true,
-    allRunDefs: [],
-    robotType: 'OT-2 Standard',
-  },
-}