@opentrons/components 0.1.6-alpha.15 → 0.1.6-alpha.17

package/src/atoms/buttons/LargeButton.tsx

@@ -0,0 +1,320 @@
+import type * as React from 'react'
+import { css } from 'styled-components'
+
+import { Btn } from '../../primitives'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
+import {
+  ALIGN_CENTER,
+  ALIGN_FLEX_START,
+  CURSOR_DEFAULT,
+  CURSOR_POINTER,
+  DIRECTION_COLUMN,
+  DISPLAY_FLEX,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../..'
+import { Icon } from '../../icons'
+
+import type { StyleProps } from '../../primitives'
+import type { IconName } from '../../icons'
+
+type LargeButtonTypes =
+  | 'primary'
+  | 'secondary'
+  | 'alert'
+  | 'alertStroke'
+  | 'alertAlt'
+  | 'stroke'
+
+const LARGE_BUTTON_PROPS_BY_TYPE: Record<
+  LargeButtonTypes,
+  {
+    defaultBackgroundColor: string
+    activeBackgroundColor: string
+    disabledBackgroundColor: string
+    defaultColor: string
+    disabledColor: string
+    iconColor: string
+    disabledIconColor: string
+    focusVisibleOutlineColor: string
+    focusVisibleBackgroundColor: string
+    hoverBackgroundColor?: string
+    hoverColor?: string
+    activeIconColor?: string
+    activeColor?: string
+  }
+> = {
+  secondary: {
+    defaultColor: COLORS.black90,
+    disabledColor: COLORS.grey50,
+    defaultBackgroundColor: COLORS.blue35,
+    activeBackgroundColor: COLORS.blue40,
+    disabledBackgroundColor: COLORS.grey35,
+    iconColor: COLORS.blue50,
+    disabledIconColor: COLORS.grey50,
+    focusVisibleOutlineColor: COLORS.blue50,
+    focusVisibleBackgroundColor: COLORS.blue40,
+  },
+  alert: {
+    defaultColor: COLORS.red60,
+    disabledColor: COLORS.grey50,
+    defaultBackgroundColor: COLORS.red35,
+    activeBackgroundColor: COLORS.red40,
+    disabledBackgroundColor: COLORS.grey35,
+    iconColor: COLORS.red60,
+    disabledIconColor: COLORS.grey50,
+    focusVisibleOutlineColor: COLORS.blue50,
+    focusVisibleBackgroundColor: COLORS.red40,
+  },
+  primary: {
+    defaultColor: COLORS.white,
+    disabledColor: COLORS.grey50,
+    defaultBackgroundColor: COLORS.blue50,
+    activeBackgroundColor: COLORS.blue60,
+    disabledBackgroundColor: COLORS.grey35,
+    iconColor: COLORS.white,
+    disabledIconColor: COLORS.grey50,
+    focusVisibleOutlineColor: COLORS.blue55,
+    focusVisibleBackgroundColor: COLORS.blue55,
+    hoverBackgroundColor: COLORS.blue55,
+    hoverColor: COLORS.white,
+  },
+  alertStroke: {
+    defaultColor: COLORS.white,
+    disabledColor: COLORS.grey50,
+    activeColor: COLORS.red60,
+    defaultBackgroundColor: COLORS.transparent,
+    activeBackgroundColor: COLORS.red35,
+    disabledBackgroundColor: COLORS.grey35,
+    iconColor: COLORS.white,
+    disabledIconColor: COLORS.grey50,
+    activeIconColor: COLORS.red60,
+    focusVisibleOutlineColor: COLORS.blue50,
+    focusVisibleBackgroundColor: COLORS.red40,
+  },
+  alertAlt: {
+    defaultColor: COLORS.red50,
+    disabledColor: COLORS.grey50,
+    defaultBackgroundColor: COLORS.white,
+    activeBackgroundColor: COLORS.red35,
+    disabledBackgroundColor: COLORS.grey35,
+    iconColor: COLORS.red50,
+    disabledIconColor: COLORS.grey50,
+    activeIconColor: COLORS.red60,
+    activeColor: COLORS.red60,
+    focusVisibleOutlineColor: COLORS.blue50,
+    focusVisibleBackgroundColor: COLORS.red40,
+  },
+  stroke: {
+    defaultColor: COLORS.blue50,
+    disabledColor: COLORS.grey50,
+    defaultBackgroundColor: COLORS.white,
+    activeBackgroundColor: COLORS.white,
+    disabledBackgroundColor: COLORS.white,
+    iconColor: COLORS.blue50,
+    disabledIconColor: COLORS.grey40,
+    focusVisibleOutlineColor: COLORS.blue55,
+    focusVisibleBackgroundColor: COLORS.blue55,
+    hoverBackgroundColor: COLORS.white,
+    hoverColor: COLORS.blue55,
+  },
+}
+
+interface LargeButtonProps extends StyleProps {
+  /** used for form submission */
+  type?: 'submit'
+  onClick?: () => void
+  buttonType?: LargeButtonTypes
+  buttonText: React.ReactNode
+  iconName?: IconName
+  disabled?: boolean
+  /** aria-disabled for displaying snack bar. */
+  ariaDisabled?: boolean
+}
+
+export function LargeButton(props: LargeButtonProps): JSX.Element {
+  const {
+    buttonType = 'primary',
+    buttonText,
+    iconName,
+    ariaDisabled = false,
+    disabled = false,
+    type,
+    ...buttonProps
+  } = props
+
+  const computedDisabled = disabled || ariaDisabled
+
+  const activeColorFor = (
+    style: keyof typeof LARGE_BUTTON_PROPS_BY_TYPE
+  ): string =>
+    LARGE_BUTTON_PROPS_BY_TYPE[style].activeColor != null
+      ? `color: ${LARGE_BUTTON_PROPS_BY_TYPE[style].activeColor}`
+      : ''
+  const activeIconStyle = (
+    style: keyof typeof LARGE_BUTTON_PROPS_BY_TYPE
+  ): string =>
+    LARGE_BUTTON_PROPS_BY_TYPE[style].activeIconColor != null
+      ? `color: ${LARGE_BUTTON_PROPS_BY_TYPE[style].activeIconColor}`
+      : ''
+
+  // In order to keep button sizes consistent and expected, all large button types need an outline.
+  // The outline color is always the same as the background color unless the background color is uniquely different
+  // from the outline.
+  const computedBorderStyle = (): string => {
+    const borderColor = (): string => {
+      if (computedDisabled) {
+        return LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor
+      } else if (buttonType === 'alertStroke') {
+        return LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor
+      } else {
+        return LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultBackgroundColor
+      }
+    }
+
+    const calculatedBorderRadius =
+      buttonType === 'stroke' ? BORDERS.borderRadius2 : BORDERS.borderRadius4
+
+    return `${calculatedBorderRadius} solid ${borderColor()}`
+  }
+
+  const LARGE_BUTTON_STYLE = css`
+    color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor};
+    background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+      .defaultBackgroundColor};
+    cursor: ${CURSOR_POINTER};
+    padding: ${SPACING.spacing16} ${SPACING.spacing24};
+    text-align: ${TYPOGRAPHY.textAlignLeft};
+    border-radius: ${BORDERS.borderRadiusFull};
+    align-items: ${ALIGN_CENTER};
+    border: ${computedBorderStyle()};
+
+    &:active {
+      background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+        .activeBackgroundColor};
+      ${activeColorFor(buttonType)};
+    }
+    &:active #btn-icon {
+      ${activeIconStyle(buttonType)};
+    }
+
+    &:hover {
+      color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].hoverColor};
+      background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+        .hoverBackgroundColor};
+
+      border: ${buttonType === 'stroke'
+        ? `2px solid ${COLORS.blue55}`
+        : `${computedBorderStyle()}`};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${COLORS.blue55};
+    }
+
+    &:disabled {
+      color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor};
+      background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+        .disabledBackgroundColor};
+      border: none;
+    }
+
+    &[aria-disabled='true'] {
+      color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor};
+      background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+        .disabledBackgroundColor};
+      border: none;
+    }
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      cursor: ${CURSOR_DEFAULT};
+      align-items: ${ALIGN_FLEX_START};
+      flex-direction: ${DIRECTION_COLUMN};
+      border-radius: ${BORDERS.borderRadius16};
+      box-shadow: none;
+      padding: ${SPACING.spacing24};
+      line-height: ${TYPOGRAPHY.lineHeight20};
+      gap: ${SPACING.spacing60};
+
+      &:active {
+        background-color: ${computedDisabled
+          ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor
+          : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor};
+        ${!computedDisabled && activeColorFor(buttonType)};
+        outline: 4px solid
+          ${computedDisabled
+            ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor
+            : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor};
+      }
+
+      &:active #btn-icon {
+        ${activeIconStyle(buttonType)};
+      }
+
+      &:focus-visible {
+        background-color: ${computedDisabled
+          ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor
+          : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleBackgroundColor};
+        ${!computedDisabled && activeColorFor(buttonType)};
+        padding: calc(${SPACING.spacing24} + ${SPACING.spacing2});
+        border: ${computedBorderStyle()};
+        outline: ${computedDisabled
+          ? 'none'
+          : `3px solid
+    ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleOutlineColor}`};
+        background-clip: padding-box;
+        box-shadow: none;
+      }
+
+      &:disabled {
+        color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor};
+        background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+          .disabledBackgroundColor};
+      }
+    }
+  `
+
+  const appliedIconColor = computedDisabled
+    ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledIconColor
+    : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].iconColor
+
+  return (
+    <Btn
+      type={type}
+      display={DISPLAY_FLEX}
+      css={LARGE_BUTTON_STYLE}
+      disabled={ariaDisabled ? false : disabled}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      aria-disabled={ariaDisabled}
+      {...buttonProps}
+    >
+      <StyledText
+        oddStyle="level3HeaderSemiBold"
+        desktopStyle="bodyLargeSemiBold"
+        css={css`
+          padding-right: ${iconName != null ? SPACING.spacing8 : '0'};
+        `}
+      >
+        {buttonText}
+      </StyledText>
+      {iconName != null ? (
+        <Icon
+          name={iconName}
+          aria-label={`${iconName} icon`}
+          color={appliedIconColor}
+          css={ICON_STYLE}
+        />
+      ) : null}
+    </Btn>
+  )
+}
+
+const ICON_STYLE = css`
+  width: 1.5rem;
+  height: 1.5rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 5rem;
+    height: 5rem;
+  }
+`

package/src/atoms/buttons/PrimaryButton.tsx

@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { NewPrimaryBtn, styleProps } from '../../primitives'
+
+export const PrimaryButton = styled(NewPrimaryBtn)`
+  background-color: ${COLORS.blue50};
+  border-radius: ${BORDERS.borderRadius8};
+  box-shadow: none;
+  padding-left: ${SPACING.spacing16};
+  padding-right: ${SPACING.spacing16};
+  line-height: ${TYPOGRAPHY.lineHeight20};
+  text-transform: ${TYPOGRAPHY.textTransformNone};
+  ${TYPOGRAPHY.pSemiBold}
+
+  ${styleProps}
+
+  &:hover,
+  &:focus {
+    background-color: ${COLORS.blue55};
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+  }
+
+  &:active {
+    background-color: ${COLORS.blue60};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.grey30};
+    color: ${COLORS.grey40};
+  }
+`

package/src/atoms/buttons/RadioButton.stories.tsx

@@ -0,0 +1,35 @@
+import { action } from '@storybook/addon-actions'
+
+import { VIEWPORT } from '../../ui-style-constants'
+import { RadioButton as RadioButtonComponent } from './RadioButton'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof RadioButtonComponent> = {
+  title: 'Library/Atoms/Buttons/RadioButton',
+  component: RadioButtonComponent,
+  argTypes: {
+    radioButtonType: {
+      control: {
+        type: 'select',
+        options: ['large', 'small'],
+      },
+      defaultValue: 'large',
+    },
+  },
+  parameters: VIEWPORT.touchScreenViewport,
+  args: {
+    onChange: action('on-change'),
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof RadioButtonComponent>
+
+export const RadioButton: Story = {
+  args: {
+    buttonLabel: 'Button text',
+    buttonValue: 1,
+    disabled: false,
+    isSelected: false,
+  },
+}

package/src/atoms/buttons/RadioButton.tsx

@@ -0,0 +1,217 @@
+import type * as React from 'react'
+import styled, { css } from 'styled-components'
+import { Flex } from '../../primitives'
+import { COLORS, BORDERS } from '../../helix-design-system'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import {
+  CURSOR_DEFAULT,
+  CURSOR_POINTER,
+  CURSOR_NOT_ALLOWED,
+  DIRECTION_ROW,
+  ALIGN_CENTER,
+  Icon,
+  StyledText,
+} from '../../index'
+import type { IconName } from '../../icons'
+import type { StyleProps } from '../../primitives'
+import type { FlattenSimpleInterpolation } from 'styled-components'
+
+interface RadioButtonProps extends StyleProps {
+  buttonLabel: string | React.ReactNode
+  buttonValue: string | number
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  disabled?: boolean
+  iconName?: IconName
+  isSelected?: boolean
+  largeDesktopBorderRadius?: boolean
+  radioButtonType?: 'large' | 'small'
+  subButtonLabel?: string
+  id?: string
+  maxLines?: number
+  //  used for mouseEnter and mouseLeave
+  setNoHover?: () => void
+  setHovered?: () => void
+  // TODO wire up the error state for the radio button
+  error?: string | null
+}
+
+//  used for ODD and helix
+export function RadioButton(props: RadioButtonProps): JSX.Element {
+  const {
+    buttonLabel,
+    buttonValue,
+    disabled = false,
+    isSelected = false,
+    onChange,
+    radioButtonType = 'large',
+    subButtonLabel,
+    id = typeof buttonLabel === 'string'
+      ? buttonLabel
+      : `RadioButtonId_${buttonValue}`,
+    largeDesktopBorderRadius = false,
+    iconName,
+    maxLines = 1,
+    setHovered,
+    setNoHover,
+  } = props
+  const isLarge = radioButtonType === 'large'
+
+  const AVAILABLE_BUTTON_STYLE = css`
+    background: ${COLORS.blue35};
+
+    &:hover,
+    &:active {
+      background-color: ${disabled ? COLORS.grey35 : COLORS.blue40};
+    }
+  `
+
+  const SELECTED_BUTTON_STYLE = css`
+    background: ${COLORS.blue50};
+    color: ${COLORS.white};
+
+    &:hover,
+    &:active {
+      background-color: ${disabled ? COLORS.grey35 : COLORS.blue60};
+    }
+  `
+
+  const SUBBUTTON_LABEL_STYLE = css`
+    color: ${disabled
+      ? COLORS.grey50
+      : isSelected
+      ? COLORS.white
+      : COLORS.grey60};
+  `
+
+  const getButtonStyle = (
+    isSelected: boolean,
+    disabled: boolean
+  ): FlattenSimpleInterpolation => {
+    if (disabled) return DISABLED_BUTTON_STYLE
+    if (isSelected) return SELECTED_BUTTON_STYLE
+    return AVAILABLE_BUTTON_STYLE
+  }
+
+  return (
+    <Flex
+      css={css`
+        width: ${props.width ?? 'auto'};
+
+        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          width: 100%;
+        }
+      `}
+    >
+      <SettingButton
+        checked={isSelected}
+        disabled={disabled}
+        id={id}
+        onChange={onChange}
+        type="radio"
+        value={buttonValue}
+      />
+      <SettingButtonLabel
+        tabIndex={0}
+        isLarge={isLarge}
+        maxLines={maxLines}
+        largeDesktopBorderRadius={largeDesktopBorderRadius}
+        disabled={disabled}
+        isSelected={isSelected}
+        role="label"
+        htmlFor={id}
+        onMouseEnter={setHovered}
+        onMouseLeave={setNoHover}
+        css={getButtonStyle(isSelected, disabled)}
+      >
+        <Flex
+          flexDirection={DIRECTION_ROW}
+          gridGap={SPACING.spacing2}
+          alignItems={ALIGN_CENTER}
+        >
+          {iconName != null ? (
+            <Icon
+              name={iconName}
+              width="1rem"
+              height="1rem"
+              data-testid={`icon_${iconName}`}
+            />
+          ) : null}
+          {typeof buttonLabel === 'string' ? (
+            <StyledText
+              oddStyle={isLarge ? 'level4HeaderSemiBold' : 'bodyTextRegular'}
+              desktopStyle={
+                isLarge ? 'bodyDefaultSemiBold' : 'bodyDefaultRegular'
+              }
+            >
+              {buttonLabel}
+            </StyledText>
+          ) : (
+            buttonLabel
+          )}
+        </Flex>
+        {subButtonLabel != null ? (
+          <Flex css={SUBBUTTON_LABEL_STYLE}>
+            <StyledText
+              oddStyle={isLarge ? 'level4HeaderRegular' : 'bodyTextRegular'}
+              desktopStyle="bodyDefaultRegular"
+            >
+              {subButtonLabel}
+            </StyledText>
+          </Flex>
+        ) : null}
+      </SettingButtonLabel>
+    </Flex>
+  )
+}
+
+const DISABLED_BUTTON_STYLE = css`
+  background-color: ${COLORS.grey35};
+  color: ${COLORS.grey50};
+
+  &:hover,
+  &:active {
+    background-color: ${COLORS.grey35};
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    cursor: ${CURSOR_NOT_ALLOWED};
+  }
+`
+
+const SettingButton = styled.input`
+  display: none;
+`
+
+interface SettingsButtonLabelProps {
+  isSelected: boolean
+  disabled: boolean
+  largeDesktopBorderRadius: boolean
+  isLarge: boolean
+  maxLines?: number | null
+}
+
+const SettingButtonLabel = styled.label<SettingsButtonLabelProps>`
+  border-radius: ${({ largeDesktopBorderRadius }) =>
+    !largeDesktopBorderRadius ? BORDERS.borderRadius40 : BORDERS.borderRadius8};
+  cursor: ${CURSOR_POINTER};
+  padding: ${SPACING.spacing12} ${SPACING.spacing16};
+  width: 100%;
+
+  ${({ disabled }) => disabled && DISABLED_BUTTON_STYLE}
+  &:focus-visible {
+    outline: 2px solid ${COLORS.blue55};
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    cursor: ${CURSOR_DEFAULT};
+    padding: ${({ largeDesktopBorderRadius }) =>
+      largeDesktopBorderRadius ? SPACING.spacing24 : SPACING.spacing20};
+    border-radius: ${BORDERS.borderRadius16};
+    display: ${({ maxLines }) => (maxLines != null ? '-webkit-box' : 'none')};
+    -webkit-line-clamp: ${({ maxLines }) => maxLines ?? 'none'};
+    -webkit-box-orient: ${({ maxLines }) =>
+      maxLines != null ? 'vertical' : 'none'};
+    word-wrap: break-word;
+    word-break: break-all;
+  }
+`

package/src/atoms/buttons/SecondaryButton.tsx

@@ -0,0 +1,62 @@
+import styled from 'styled-components'
+
+import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+import { isntStyleProp, styleProps } from '../../primitives'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { CURSOR_DEFAULT, CURSOR_POINTER } from '../../index'
+import type { StyleProps } from '../../index'
+
+interface SecondaryButtonProps extends StyleProps {
+  /** button action is dangerous and may have non-reversible side-effects for user */
+  isDangerous?: boolean
+}
+export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
+  shouldForwardProp: p => isntStyleProp(p) && p !== 'isDangerous',
+})<SecondaryButtonProps>`
+  appearance: none;
+  cursor: ${CURSOR_POINTER};
+  color: ${props => (props.isDangerous ? COLORS.red50 : COLORS.blue50)};
+  border: ${BORDERS.lineBorder};
+  border-color: ${props => (props.isDangerous ? COLORS.red50 : 'initial')};
+  border-radius: ${BORDERS.borderRadius8};
+  padding: ${SPACING.spacing8} ${SPACING.spacing16};
+  text-transform: ${TYPOGRAPHY.textTransformNone};
+  background-color: ${COLORS.transparent};
+  ${TYPOGRAPHY.pSemiBold}
+
+  &:hover,
+  &:focus {
+    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.23);
+  }
+
+  &:hover {
+    color: ${props => (props.isDangerous ? COLORS.red50 : COLORS.blue60)};
+    border-color: ${props =>
+      props.isDangerous ? COLORS.red50 : COLORS.blue55};
+    box-shadow: 0 0 0;
+  }
+
+  &:focus-visible {
+    color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue60)};
+    border-color: ${props =>
+      props.isDangerous ? COLORS.red50 : COLORS.blue60};
+    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+  }
+
+  &:active {
+    box-shadow: none;
+    color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue55)};
+    border-color: ${props =>
+      props.isDangerous ? COLORS.red60 : COLORS.blue55};
+  }
+
+  &:disabled,
+  &.disabled {
+    box-shadow: none;
+    border-color: ${COLORS.grey30};
+    color: ${COLORS.grey40};
+    cursor: ${CURSOR_DEFAULT};
+  }
+
+  ${styleProps}
+`