@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.21

package/src/atoms/Chip/index.tsx

@@ -0,0 +1,172 @@
+import { css } from 'styled-components'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { LegacyStyledText } from '../StyledText'
+import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { Icon } from '../../icons'
+
+import type { IconName } from '../../icons'
+import type { StyleProps } from '../../primitives'
+
+export type ChipType = 'error' | 'info' | 'neutral' | 'success' | 'warning'
+
+type ChipSize = 'medium' | 'small'
+
+interface ChipProps extends StyleProps {
+  /** Display background color? */
+  background?: boolean
+  /** Chip icon */
+  iconName?: IconName
+  /** Chip content */
+  text: string
+  /** name constant of the text color and the icon color to display */
+  type: ChipType
+  /** has icon */
+  hasIcon?: boolean
+  /** Chip size medium is the default size */
+  chipSize?: ChipSize
+}
+
+const CHIP_PROPS_BY_TYPE: Record<
+  ChipType,
+  {
+    backgroundColor: string
+    borderRadius: string
+    iconColor?: string
+    iconName?: IconName
+    textColor: string
+  }
+> = {
+  error: {
+    backgroundColor: COLORS.red35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.red60,
+    textColor: COLORS.red60,
+  },
+  info: {
+    backgroundColor: COLORS.blue35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.blue60,
+    textColor: COLORS.blue60,
+  },
+  neutral: {
+    backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.grey60,
+    textColor: COLORS.grey60,
+  },
+  success: {
+    backgroundColor: COLORS.green35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.green60,
+    iconName: 'ot-check',
+    textColor: COLORS.green60,
+  },
+  warning: {
+    backgroundColor: COLORS.yellow35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.yellow60,
+    textColor: COLORS.yellow60,
+  },
+}
+
+export function Chip(props: ChipProps): JSX.Element {
+  const {
+    background,
+    iconName,
+    type,
+    text,
+    hasIcon = true,
+    chipSize = 'medium',
+    ...styleProps
+  } = props
+  const backgroundColor =
+    background === false
+      ? COLORS.transparent
+      : CHIP_PROPS_BY_TYPE[type].backgroundColor
+  const icon = iconName ?? CHIP_PROPS_BY_TYPE[type].iconName ?? 'ot-alert'
+
+  const MEDIUM_CONTAINER_STYLE = css`
+    padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
+    grid-gap: ${SPACING.spacing4};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      padding: ${SPACING.spacing8}
+        ${background === false ? 0 : SPACING.spacing16};
+      grid-gap: ${SPACING.spacing8};
+    }
+  `
+
+  const SMALL_CONTAINER_STYLE = css`
+    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
+    grid-gap: ${SPACING.spacing4};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      padding: ${SPACING.spacing4}
+        ${background === false ? 0 : SPACING.spacing8};
+      grid-gap: ${SPACING.spacing4};
+    }
+  `
+
+  const ICON_STYLE = css`
+    width: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
+    height: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+      height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+    }
+  `
+
+  const TEXT_STYLE = css`
+    ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      ${chipSize === 'medium'
+        ? TYPOGRAPHY.bodyTextSemiBold
+        : TYPOGRAPHY.smallBodyTextSemiBold}
+    }
+  `
+
+  return (
+    <Flex
+      alignItems={ALIGN_CENTER}
+      backgroundColor={backgroundColor}
+      borderRadius={CHIP_PROPS_BY_TYPE[type].borderRadius}
+      flexDirection={DIRECTION_ROW}
+      height={FLEX_MAX_CONTENT}
+      css={
+        chipSize === 'medium' ? MEDIUM_CONTAINER_STYLE : SMALL_CONTAINER_STYLE
+      }
+      data-testid={`Chip_${type}`}
+      {...styleProps}
+    >
+      {hasIcon ? (
+        <Icon
+          name={icon}
+          color={CHIP_PROPS_BY_TYPE[type].iconColor}
+          aria-label={`icon_${text}`}
+          css={ICON_STYLE}
+        />
+      ) : null}
+      <LegacyStyledText
+        css={TEXT_STYLE}
+        color={CHIP_PROPS_BY_TYPE[type].textColor}
+      >
+        {text}
+      </LegacyStyledText>
+    </Flex>
+  )
+}
+
+const WEB_MEDIUM_TEXT_STYLE = css`
+  font-size: ${TYPOGRAPHY.fontSizeH4};
+  line-height: ${TYPOGRAPHY.lineHeight20};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+`
+const WEB_SMALL_TEXT_STYLE = css`
+  font-size: ${TYPOGRAPHY.fontSizeLabel};
+  line-height: ${TYPOGRAPHY.lineHeight12};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+`

package/src/atoms/Divider/index.tsx

@@ -0,0 +1,15 @@
+import type * as React from 'react'
+import { Box, COLORS, SPACING } from '../..'
+
+type Props = React.ComponentProps<typeof Box>
+
+export function Divider(props: Props): JSX.Element {
+  return (
+    <Box
+      borderBottom={`1px solid ${String(COLORS.grey30)}`}
+      marginY={SPACING.spacing4}
+      {...props}
+      data-testid="divider"
+    />
+  )
+}

package/src/atoms/InputField/InputField.stories.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  VIEWPORT,
+} from '@opentrons/components'
+import { InputField as InputFieldComponent } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof InputFieldComponent> = {
+  // ToDo (kk05/02/2024) this should be in Library but at this moment there is the same name component in components
+  // The unification for this component will be done when the old component is retired completely.
+  title: 'App/Atoms/InputField',
+  component: InputFieldComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+  argTypes: {
+    units: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof InputFieldComponent>
+
+export const InputField: Story = args => {
+  const [value, setValue] = React.useState(args.value)
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <InputFieldComponent
+        {...args}
+        value={value}
+        width="100%"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setValue(e.target.value)
+        }}
+        units={args.units ? 'rem' : undefined}
+      />
+    </Flex>
+  )
+}
+
+InputField.args = {
+  value: 200,
+  type: 'number',
+  caption: 'example caption',
+  max: 200,
+  min: 10,
+}
+
+export const InputFieldWithError: Story = args => {
+  const [value, setValue] = React.useState(args.value)
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <InputFieldComponent
+        {...args}
+        value={value}
+        width="100%"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setValue(e.target.value)
+        }}
+        units={args.type !== 'number' ? undefined : args.units}
+      />
+    </Flex>
+  )
+}
+
+InputFieldWithError.args = {
+  value: 300,
+  type: 'number',
+  max: 200,
+  min: 10,
+  error: 'input is not in the range',
+}

package/src/atoms/InputField/index.tsx

@@ -0,0 +1,383 @@
+import { forwardRef } from 'react'
+import styled, { css } from 'styled-components'
+
+import { Flex } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  NO_WRAP,
+  TEXT_ALIGN_RIGHT,
+} from '../../styles'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { Tooltip } from '../Tooltip'
+import { useHoverTooltip } from '../../tooltips'
+import { StyledText } from '../StyledText'
+
+import type {
+  ChangeEventHandler,
+  FocusEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react'
+import type { IconName } from '../../icons'
+
+export const INPUT_TYPE_NUMBER = 'number' as const
+export const LEGACY_INPUT_TYPE_TEXT = 'text' as const
+export const LEGACY_INPUT_TYPE_PASSWORD = 'password' as const
+const COLOR_WARNING_DARK = '#9e5e00' // ToDo (kk:08/13/2024) replace this with COLORS
+
+export interface InputFieldProps {
+  /** field is disabled if value is true */
+  disabled?: boolean
+  /** change handler */
+  onChange?: ChangeEventHandler<HTMLInputElement>
+  /** name of field in form */
+  name?: string
+  /** optional ID of <input> element */
+  id?: string
+  /** placeholder text */
+  placeholder?: string
+  /** optional suffix component, appears to the right of input text */
+  units?: ReactNode
+  /** current value of text in box, defaults to '' */
+  value?: string | number | null
+  /** if included, InputField will use error style and display error instead of caption */
+  error?: string | null
+  /** optional title */
+  title?: string | null
+  /** optional text for tooltip */
+  tooltipText?: string
+  /** optional caption. hidden when `error` is given */
+  caption?: string | null
+  /** optional input type (default "text") */
+  type?:
+    | typeof LEGACY_INPUT_TYPE_TEXT
+    | typeof LEGACY_INPUT_TYPE_PASSWORD
+    | typeof INPUT_TYPE_NUMBER
+  /** mouse click handler */
+  onClick?: (event: MouseEvent<HTMLInputElement>) => unknown
+  /** focus handler */
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => unknown
+  /** blur handler */
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => unknown
+  /** makes input field read-only */
+  readOnly?: boolean
+  /** html tabindex property */
+  tabIndex?: number
+  /** automatically focus field on renders */
+  autoFocus?: boolean
+  /** if true, clear out value and add '-' placeholder */
+  isIndeterminate?: boolean
+  /** if input type is number, these are the min and max values */
+  max?: number | string
+  min?: number | string
+  /** horizontal text alignment for title, input, and (sub)captions */
+  textAlign?:
+    | typeof TYPOGRAPHY.textAlignLeft
+    | typeof TYPOGRAPHY.textAlignCenter
+  /** small or medium input field height, relevant only */
+  size?: 'medium' | 'small'
+  /** react useRef to control input field instead of react event */
+  ref?: React.MutableRefObject<HTMLInputElement | null>
+  /** optional IconName to display icon aligned to left of input field */
+  leftIcon?: IconName
+  /** if true, show delete icon aligned to right of input field */
+  showDeleteIcon?: boolean
+  /** callback passed to optional delete icon onClick */
+  onDelete?: () => void
+  /** if true, style the background of input field to error state */
+  hasBackgroundError?: boolean
+  /** optional prop to override input field border radius */
+  borderRadius?: string
+  /** optional prop to override input field padding */
+  padding?: string
+}
+
+export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
+  (props, ref): JSX.Element => {
+    const {
+      placeholder,
+      textAlign = TYPOGRAPHY.textAlignLeft,
+      size = 'small',
+      title,
+      tooltipText,
+      tabIndex = 0,
+      showDeleteIcon = false,
+      hasBackgroundError = false,
+      onDelete,
+      borderRadius,
+      padding,
+      ...inputProps
+    } = props
+    const hasError = props.error != null
+    const value = props.isIndeterminate ?? false ? '' : props.value ?? ''
+    const placeHolder = props.isIndeterminate ?? false ? '-' : props.placeholder
+    const [targetProps, tooltipProps] = useHoverTooltip()
+
+    const OUTER_CSS = css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        grid-gap: ${SPACING.spacing8};
+        &:focus-within {
+          filter: ${hasError
+            ? 'none'
+            : `drop-shadow(0px 0px 10px ${COLORS.blue50})`};
+        }
+      }
+    `
+
+    const INPUT_FIELD = css`
+      display: flex;
+      background-color: ${hasBackgroundError ? COLORS.red30 : COLORS.white};
+      border-radius: ${borderRadius != null
+        ? borderRadius
+        : BORDERS.borderRadius4};
+      padding: ${padding != null ? padding : SPACING.spacing8};
+      border: ${hasBackgroundError
+        ? 'none'
+        : `1px ${BORDERS.styleSolid}
+        ${hasError ? COLORS.red50 : COLORS.grey50}`};
+      font-size: ${TYPOGRAPHY.fontSizeP};
+      width: 100%;
+      height: ${size === 'small' ? '2rem' : '2.75rem'};
+
+      &:active:enabled {
+        border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
+      }
+
+      & input {
+        border-radius: inherit;
+        color: ${COLORS.black90};
+        border: none;
+        flex: 1 1 auto;
+        width: 100%;
+        height: ${SPACING.spacing16};
+        text-align: ${textAlign};
+      }
+      & input:focus {
+        outline: none;
+      }
+
+      &:hover {
+        border: 1px ${BORDERS.styleSolid}
+          ${hasError ? COLORS.red50 : COLORS.grey60};
+      }
+
+      &:focus-visible {
+        border: 1px ${BORDERS.styleSolid} ${COLORS.grey55};
+        outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+        outline-offset: 2px;
+      }
+
+      &:focus-within {
+        border: 1px ${BORDERS.styleSolid}
+          ${hasError ? COLORS.red50 : COLORS.blue50};
+      }
+
+      &:disabled {
+        border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
+      }
+      input[type='number']::-webkit-inner-spin-button,
+      input[type='number']::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        height: ${size === 'small' ? '4.25rem' : '5rem'};
+        font-size: ${size === 'small'
+          ? TYPOGRAPHY.fontSize28
+          : TYPOGRAPHY.fontSize38};
+        padding: ${SPACING.spacing16} ${SPACING.spacing24};
+        border: 2px ${BORDERS.styleSolid}
+          ${hasError ? COLORS.red50 : COLORS.grey50};
+
+        &:focus-within {
+          box-shadow: none;
+          border: ${hasError ? '2px' : '3px'} ${BORDERS.styleSolid}
+            ${hasError ? COLORS.red50 : COLORS.blue50};
+        }
+
+        & input {
+          color: ${COLORS.black90};
+          flex: 1 1 auto;
+          width: 100%;
+          height: 100%;
+          font-size: ${size === 'small'
+            ? TYPOGRAPHY.fontSize28
+            : TYPOGRAPHY.fontSize38};
+          line-height: ${size === 'small'
+            ? TYPOGRAPHY.lineHeight36
+            : TYPOGRAPHY.lineHeight48};
+        }
+
+        /* the size of dot for password is handled by font-size */
+        input[type='password'] {
+          font-size: ${size === 'small' ? '71px' : '77px'};
+        }
+      }
+    `
+
+    const FORM_BOTTOM_SPACE_STYLE = css`
+      padding-top: ${SPACING.spacing4};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        padding: ${SPACING.spacing8} 0rem;
+        padding-bottom: 0;
+      }
+    `
+
+    const TITLE_STYLE = css`
+      color: ${COLORS.grey60};
+      padding-bottom: ${SPACING.spacing4};
+      text-align: ${textAlign};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        font-size: ${TYPOGRAPHY.fontSize22};
+        font-weight: ${TYPOGRAPHY.fontWeightRegular};
+        line-height: ${TYPOGRAPHY.lineHeight28};
+        justify-content: ${textAlign};
+      }
+    `
+
+    const ERROR_TEXT_STYLE = css`
+      color: ${COLORS.red50};
+      padding-top: ${SPACING.spacing4};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        font-size: ${TYPOGRAPHY.fontSize22};
+        color: ${COLORS.red50};
+        padding-top: ${SPACING.spacing8};
+      }
+    `
+
+    const UNITS_STYLE = css`
+      color: ${props.disabled ? COLORS.grey40 : COLORS.grey50};
+      font: ${TYPOGRAPHY.bodyTextRegular};
+      text-align: ${TYPOGRAPHY.textAlignRight};
+      white-space: ${NO_WRAP};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        color: ${props.disabled ? COLORS.grey40 : COLORS.grey50};
+        font-size: ${TYPOGRAPHY.fontSize22};
+        font-weight: ${TYPOGRAPHY.fontWeightRegular};
+        line-height: ${TYPOGRAPHY.lineHeight28};
+        justify-content: ${textAlign};
+      }
+    `
+
+    return (
+      <Flex
+        width="100%"
+        alignItems={ALIGN_CENTER}
+        lineHeight={1}
+        fontSize={TYPOGRAPHY.fontSizeP}
+        fontWeight={TYPOGRAPHY.fontWeightRegular}
+        color={props.error != null ? COLOR_WARNING_DARK : COLORS.black90}
+        opacity={props.disabled ?? false ? 0.5 : ''}
+      >
+        <Flex flexDirection={DIRECTION_COLUMN} width="100%">
+          {title != null ? (
+            <Flex
+              flexDirection={DIRECTION_ROW}
+              gridGap={SPACING.spacing8}
+              alignItems={ALIGN_CENTER}
+            >
+              <StyledText
+                desktopStyle="bodyDefaultRegular"
+                htmlFor={props.id}
+                css={TITLE_STYLE}
+              >
+                {title}
+              </StyledText>
+              {tooltipText != null ? (
+                <>
+                  <Flex {...targetProps}>
+                    <Icon
+                      name="information"
+                      size={SPACING.spacing12}
+                      color={COLORS.grey60}
+                    />
+                  </Flex>
+                  <Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
+                </>
+              ) : null}
+            </Flex>
+          ) : null}
+          <Flex
+            width="100%"
+            flexDirection={DIRECTION_COLUMN}
+            css={OUTER_CSS}
+            onClick={!props.disabled ? props.onClick : null}
+          >
+            <Flex
+              tabIndex={tabIndex}
+              css={INPUT_FIELD}
+              alignItems={ALIGN_CENTER}
+              onClick={() => {
+                if (props.id != null) {
+                  document.getElementById(props.id)?.focus()
+                }
+              }}
+            >
+              {props.leftIcon != null ? (
+                <Flex marginRight={SPACING.spacing8}>
+                  <Icon
+                    name={props.leftIcon}
+                    color={COLORS.grey60}
+                    size="1.25rem"
+                  />
+                </Flex>
+              ) : null}
+              <StyledInput
+                {...inputProps}
+                data-testid={props.id}
+                value={value}
+                placeholder={placeHolder}
+                onWheel={event => {
+                  event.currentTarget.blur()
+                }} // prevent value change with scrolling
+                type={props.type}
+                ref={ref}
+              />
+              {props.units != null ? (
+                <Flex css={UNITS_STYLE}>{props.units}</Flex>
+              ) : null}
+              {showDeleteIcon ? (
+                <Flex
+                  alignSelf={TEXT_ALIGN_RIGHT}
+                  onClick={onDelete}
+                  cursor="pointer"
+                >
+                  <Icon name="close" size="1.75rem" />
+                </Flex>
+              ) : null}
+            </Flex>
+          </Flex>
+          {props.caption != null ? (
+            <StyledText
+              desktopStyle="bodyDefaultRegular"
+              css={FORM_BOTTOM_SPACE_STYLE}
+              color={COLORS.grey60}
+            >
+              {props.caption}
+            </StyledText>
+          ) : null}
+          {hasError ? (
+            <StyledText
+              desktopStyle="bodyDefaultRegular"
+              css={ERROR_TEXT_STYLE}
+            >
+              {props.error}
+            </StyledText>
+          ) : null}
+        </Flex>
+      </Flex>
+    )
+  }
+)
+
+const StyledInput = styled.input`
+  background-color: transparent;
+  &::placeholder {
+    color: ${COLORS.grey40};
+  }
+`