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

package/src/atoms/buttons/LargeButton.tsx

@@ -0,0 +1,322 @@
+import { css } from 'styled-components'
+
+import {
+  ALIGN_CENTER,
+  ALIGN_FLEX_START,
+  CURSOR_DEFAULT,
+  CURSOR_POINTER,
+  DIRECTION_COLUMN,
+  DISPLAY_FLEX,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../..'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Btn } from '../../primitives'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
+
+import type { ReactNode } from 'react'
+import type { IconName } from '../../icons'
+import type { StyleProps } from '../../primitives'
+
+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: 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}`
+        : buttonType === 'primary'
+        ? `4px 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: 4px solid ${COLORS.grey35};
+    }
+
+    &[aria-disabled='true'] {
+      color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor};
+      background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+        .disabledBackgroundColor};
+      border: 4px solid ${COLORS.grey35};
+    }
+
+    @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.25rem;
+  height: 1.25rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 5rem;
+    height: 5rem;
+  }
+`

package/src/atoms/buttons/PrimaryButton.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { NewPrimaryBtn, styleProps } from '../../primitives'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+
+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};
+  font-size: ${TYPOGRAPHY.fontSizeH3};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+  line-height: ${TYPOGRAPHY.lineHeight20};
+
+  ${styleProps}
+
+  &:hover,
+  &:focus {
+    background-color: ${COLORS.blue55};
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${COLORS.blue50};
+    outline-offset: 0.25rem;
+  }
+
+  &:active {
+    background-color: ${COLORS.blue60};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.grey30};
+    color: ${COLORS.grey40};
+  }
+`

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

@@ -0,0 +1,109 @@
+import { action } from '@storybook/addon-actions'
+
+import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
+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: 'Helix/Atoms/Buttons/RadioButton',
+  component: RadioButtonComponent,
+  argTypes: {
+    radioButtonType: {
+      control: {
+        type: 'select',
+        options: ['large', 'small'],
+      },
+      defaultValue: 'large',
+    },
+    buttonSubLabel: {
+      control: 'object',
+      description:
+        'Optional subtext configuration object with text and alignment.',
+      table: {
+        type: {
+          summary: 'RadioButtonSubLabel',
+          detail:
+            '{ buttonSubLabel: string, align?: "horizontal" | "vertical" }',
+        },
+      },
+    },
+    iconName: {
+      options: Object.keys(ICON_DATA_BY_NAME),
+      control: {
+        type: 'select',
+      },
+    },
+  },
+
+  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,
+  },
+  name: 'Basic RadioButton',
+}
+
+export const RadioButtonWithHorizontalSubLabel: Story = {
+  args: {
+    buttonLabel: 'Button text',
+    buttonValue: 2,
+    disabled: false,
+    isSelected: false,
+    radioButtonType: 'large',
+    buttonSubLabel: {
+      label: 'Horizontal subtext',
+      align: 'horizontal',
+    },
+  },
+  name: 'With Horizontal Subtext',
+}
+
+export const RadioButtonWithVerticalSubLabel: Story = {
+  args: {
+    buttonLabel: 'Button text',
+    buttonValue: 3,
+    disabled: false,
+    isSelected: false,
+    radioButtonType: 'large',
+    buttonSubLabel: {
+      label: 'Vertical subtext',
+      align: 'vertical',
+    },
+  },
+  name: 'With Vertical Subtext',
+}
+
+export const RadioButtonWithIcon: Story = {
+  args: {
+    buttonLabel: 'Button text',
+    buttonValue: 1,
+    disabled: false,
+    isSelected: false,
+    iconName: 'stacked',
+  },
+  name: 'RadioButton with Icon',
+}
+
+export const RadioButtonWithTag: Story = {
+  args: {
+    buttonLabel: 'Button text',
+    buttonValue: 1,
+    disabled: false,
+    isSelected: false,
+    tagText: '1',
+  },
+  name: 'RadioButton with Tag',
+}