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

package/src/molecules/Tabs/index.tsx

@@ -0,0 +1,115 @@
+import { css } from 'styled-components'
+import { Tooltip } from '../../atoms'
+import { COLORS, BORDERS } from '../../helix-design-system'
+import { Btn, Flex } from '../../primitives'
+import { POSITION_RELATIVE, DIRECTION_ROW } from '../../styles'
+import { useHoverTooltip } from '../../tooltips'
+import { TYPOGRAPHY, SPACING, RESPONSIVENESS } 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

@@ -0,0 +1,114 @@
+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 { ComponentProps } from 'react'
+import type { Story, Meta } from '@storybook/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

@@ -0,0 +1,44 @@
+import { describe, it, beforeEach, vi } from 'vitest'
+import { screen } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../testing/utils'
+import { TextListTableContent } from '..'
+import { ListTable } from '../../../atoms/ListTable'
+
+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

@@ -0,0 +1,45 @@
+import { css } from 'styled-components'
+
+import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
+import { ListTable } from '../../atoms/ListTable'
+import { StyledText } from '../../atoms'
+import { Flex } from '../../primitives'
+import { DIRECTION_COLUMN } from '../../styles'
+
+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

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

package/src/nav/SidePanel.module.css

@@ -0,0 +1,34 @@
+@import '../index.module.css';
+
+:root {
+  --sidebar-width: 18.25rem;
+}
+
+.panel {
+  flex-shrink: 0;
+  overflow: visible;
+  border-right: var(--bd-light);
+  background-color: var(--c-bg-light);
+  position: relative;
+  padding: 0 4px;
+}
+
+.title_bar {
+  display: flex;
+  align-items: center;
+  width: var(--sidebar-width);
+}
+
+.title {
+  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: 1rem auto;
+}
+
+.panel_contents {
+  width: var(--sidebar-width);
+  height: calc(100vh - 3.5rem);
+  overflow-x: hidden;
+  overflow-y: auto;
+}

package/src/nav/SidePanel.stories.tsx

@@ -0,0 +1,29 @@
+import type * as React from 'react'
+import { SidePanel as SidePanelComponent } from './SidePanel'
+import { Text, Flex, JUSTIFY_CENTER, ALIGN_CENTER } from '@opentrons/components'
+
+import type { Story, Meta } from '@storybook/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

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

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

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

@@ -0,0 +1,78 @@
+import * as Fixtures from '../../../../app/src/molecules/Command/__fixtures__'
+import { getLabwareDefinitionsFromCommands } from './useCommandTextString/utils'
+import { Box } from '../../primitives'
+import { CommandText as CommandTextComponent } from './index'
+import type { RobotType } from '@opentrons/shared-data'
+import type { Meta, StoryObj } from '@storybook/react'
+
+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',
+  },
+}