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

package/src/atoms/buttons/EmptySelectorButton.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components'
-import { Flex } from '../../primitives'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
 import {
   ALIGN_CENTER,
   CURSOR_DEFAULT,
@@ -10,8 +11,10 @@ import {
   SPACING,
   StyledText,
 } from '../../index'
-import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+
 import type { IconName } from '../../index'
+
 interface EmptySelectorButtonProps {
   onClick: () => void
   text: string
@@ -27,7 +30,11 @@ export function EmptySelectorButton(
   const { onClick, text, iconName, textAlignment, disabled = false } = props
 
   return (
-    <StyledButton onClick={onClick} disabled={disabled}>
+    <StyledButton
+      onClick={onClick}
+      disabled={disabled}
+      data-testid="EmptySelectorButton_click"
+    >
       <Flex
         gridGap={SPACING.spacing4}
         padding={SPACING.spacing12}

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

@@ -1,7 +1,7 @@
+import { COLORS } from '../../helix-design-system'
 import { ICON_DATA_BY_NAME } from '../../icons'
-import { SPACING } from '../../ui-style-constants'
 import { Box, STYLE_PROPS } from '../../primitives'
-import { COLORS } from '../../helix-design-system'
+import { SPACING } from '../../ui-style-constants'
 import { LargeButton } from './LargeButton'
 
 import type { Meta, StoryObj } from '@storybook/react'

package/src/atoms/buttons/LargeButton.tsx

@@ -1,9 +1,5 @@
 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,
@@ -13,11 +9,15 @@ import {
   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 { StyleProps } from '../../primitives'
 import type { IconName } from '../../icons'
+import type { StyleProps } from '../../primitives'
 
 type LargeButtonTypes =
   | 'primary'

package/src/atoms/buttons/PrimaryButton.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
-import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+
 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};
@@ -11,7 +12,9 @@ export const PrimaryButton = styled(NewPrimaryBtn)`
   padding-right: ${SPACING.spacing16};
   line-height: ${TYPOGRAPHY.lineHeight20};
   text-transform: ${TYPOGRAPHY.textTransformNone};
-  ${TYPOGRAPHY.pSemiBold}
+  font-size: ${TYPOGRAPHY.fontSizeH3};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+  line-height: ${TYPOGRAPHY.lineHeight20};
 
   ${styleProps}
 
@@ -22,7 +25,8 @@ export const PrimaryButton = styled(NewPrimaryBtn)`
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+    outline: 2px solid ${COLORS.blue50};
+    outline-offset: 0.25rem;
   }
 
   &:active {

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

@@ -1,8 +1,9 @@
 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 { ICON_DATA_BY_NAME } from '../../icons/icon-data'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof RadioButtonComponent> = {

package/src/atoms/buttons/RadioButton.tsx

@@ -1,7 +1,5 @@
 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 {
   ALIGN_CENTER,
   ALIGN_START,
@@ -11,13 +9,16 @@ import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Icon,
-  Tag,
   JUSTIFY_SPACE_BETWEEN,
   StyledText,
+  Tag,
 } from '../..'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Flex } from '../../primitives'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
-import type { ChangeEventHandler, ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ChangeEventHandler, MouseEventHandler, ReactNode } from 'react'
 import type { IconName } from '../../icons'
 import type { StyleProps } from '../../primitives'
 
@@ -29,23 +30,50 @@ export interface RadioButtonSubLabel {
 }
 
 interface RadioButtonProps extends StyleProps {
+  /** Radio button label */
   buttonLabel: string | ReactNode
+  /** Radio button value */
   buttonValue: string | number
+  /** Radio button onChange handler */
   onChange: ChangeEventHandler<HTMLInputElement>
+  /** Radio button disabled state. This will be replaced with aria-disabled in the future. */
   disabled?: boolean
+  /** Radio button icon name */
   iconName?: IconName
+  /** Radio button tag text */
   tagText?: string
+  /** Radio button isSelected state */
   isSelected?: boolean
+  /** Radio button largeDesktopBorderRadius state */
   largeDesktopBorderRadius?: boolean
+  /** Radio button radioButtonType state */
   radioButtonType?: 'large' | 'small'
+  /**
+   *  id is used for the special case in ODD where the screen has two radio buttons.
+   *  The screen that uses this prop is CSV runtime parameter CSV file selection screen.
+   *  Basically, this would not be used in desktop app/web app.
+   */
   id?: string
+  /** Radio button maxLines for label */
   maxLines?: number
-  //  used for mouseEnter and mouseLeave
+  /** used for mouseEnter and mouseLeave */
   setNoHover?: () => void
   setHovered?: () => void
   // TODO wire up the error state for the radio button
   error?: string | null
+  /** Radio button buttonSubLabel */
   buttonSubLabel?: RadioButtonSubLabel
+  /** testid is used for testing */
+  testid?: string
+  /**
+   * with the changes in UX and accessibility support, 'disabled' will eventually be replaced with 'aria-disabled' in the future.
+   */
+  ariaDisabled?: boolean
+  /**
+   *  onClick is needed for RadioButton since onChange requires actual selected value change.
+   *  For this case, selected value change shouldn't be happened.
+   */
+  onClick?: MouseEventHandler
 }
 
 // used for ODD and helix
@@ -67,61 +95,34 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     maxLines = 1,
     setHovered,
     setNoHover,
+    testid,
+    ariaDisabled = false,
+    onClick,
   } = 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};
-
-    &:active {
-      background-color: ${disabled ? COLORS.grey35 : COLORS.blue60};
-    }
-  `
-  //  TODO: the max line to clamp for subtext
-  const SUBBUTTON_LABEL_STYLE = css`
-    color: ${disabled
-      ? COLORS.grey50
-      : isSelected
-      ? COLORS.white
-      : COLORS.grey60};
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: ${buttonSubLabel?.align === 'vertical' ? 2 : 1};
-    overflow: hidden;
-    word-break: break-all;
-    text-overflow: ellipsis;
-  `
-
   const getButtonStyle = (
     isSelected: boolean,
     disabled: boolean
   ): FlattenSimpleInterpolation => {
     if (disabled) return DISABLED_BUTTON_STYLE
-    if (isSelected) return SELECTED_BUTTON_STYLE
-    return AVAILABLE_BUTTON_STYLE
+    if (isSelected) return SELECTED_BUTTON_STYLE(disabled)
+    return AVAILABLE_BUTTON_STYLE(disabled)
   }
 
   return (
     <RadioButtonWrapper>
       <SettingButton
         checked={isSelected}
-        disabled={disabled}
+        disabled={ariaDisabled ? false : disabled}
         id={id}
-        onChange={onChange}
+        onChange={ariaDisabled ? () => {} : onChange}
         type="radio"
         value={buttonValue}
+        onClick={onClick}
       />
       <SettingButtonLabel
+        data-testid={testid}
         tabIndex={0}
         isLarge={isLarge}
         maxLines={maxLines}
@@ -134,6 +135,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
         onMouseLeave={setNoHover}
         css={getButtonStyle(isSelected, disabled)}
         aria-selected={isSelected}
+        aria-disabled={ariaDisabled}
       >
         <Flex
           flexDirection={DIRECTION_ROW}
@@ -164,7 +166,13 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
               buttonLabel
             )}
             {buttonSubLabel && (
-              <Flex css={SUBBUTTON_LABEL_STYLE}>
+              <Flex
+                css={SUBBUTTON_LABEL_STYLE(
+                  disabled,
+                  isSelected,
+                  buttonSubLabel
+                )}
+              >
                 <StyledText
                   color={isSelected ? COLORS.white : COLORS.grey60}
                   oddStyle="bodyTextRegular"
@@ -195,6 +203,47 @@ const copyContainerStyle = (
   word-break: break-word;
 `
 
+const AVAILABLE_BUTTON_STYLE = (
+  disabled: boolean
+): FlattenSimpleInterpolation => css`
+  background: ${COLORS.blue35};
+
+  &:hover,
+  &:active {
+    background-color: ${disabled ? COLORS.grey35 : COLORS.blue40};
+  }
+`
+
+const SELECTED_BUTTON_STYLE = (
+  disabled: boolean
+): FlattenSimpleInterpolation => css`
+  background: ${COLORS.blue50};
+  color: ${COLORS.white};
+
+  &:active {
+    background-color: ${disabled ? COLORS.grey35 : COLORS.blue60};
+  }
+`
+
+//  TODO: the max line to clamp for subtext
+const SUBBUTTON_LABEL_STYLE = (
+  disabled: boolean,
+  isSelected: boolean,
+  buttonSubLabel: RadioButtonSubLabel
+): FlattenSimpleInterpolation => css`
+  color: ${disabled
+    ? COLORS.grey50
+    : isSelected
+    ? COLORS.white
+    : COLORS.grey60};
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: ${buttonSubLabel?.align === 'vertical' ? 2 : 1};
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+`
+
 const DISABLED_BUTTON_STYLE = css`
   background-color: ${COLORS.grey35};
   color: ${COLORS.grey50};
@@ -253,6 +302,16 @@ const SettingButtonLabel = styled.label<SettingsButtonLabelProps>`
     outline-offset: 0.12rem;
   }
 
+  &[aria-disabled='true'] {
+    background-color: ${COLORS.grey35};
+    color: ${COLORS.grey50};
+
+    &:hover,
+    &:active {
+      background-color: ${COLORS.grey35};
+    }
+  }
+
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
     cursor: ${CURSOR_DEFAULT};
     padding: ${({ largeDesktopBorderRadius }) =>

package/src/atoms/buttons/SecondaryButton.tsx

@@ -1,9 +1,10 @@
 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 { isntStyleProp, styleProps } from '../../primitives'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+
 import type { StyleProps } from '../../index'
 
 interface SecondaryButtonProps extends StyleProps {
@@ -31,7 +32,9 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
   padding: ${SPACING.spacing8} ${SPACING.spacing16};
   text-transform: ${TYPOGRAPHY.textTransformNone};
   background-color: ${COLORS.transparent};
-  ${TYPOGRAPHY.pSemiBold}
+  font-size: ${TYPOGRAPHY.fontSizeH3};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+  line-height: ${TYPOGRAPHY.lineHeight20};
 
   &:hover,
   &:focus {
@@ -42,7 +45,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
   &:hover {
     color: ${props => {
       if (props['aria-disabled']) return COLORS.grey40
-      return props.isDangerous ? COLORS.red50 : COLORS.blue60
+      return props.isDangerous ? COLORS.red55 : COLORS.blue55
     }};
     border-color: ${props => {
       if (props['aria-disabled']) return COLORS.grey30
@@ -61,18 +64,21 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
       return props.isDangerous ? COLORS.red50 : COLORS.blue60
     }};
     box-shadow: ${props =>
-      props['aria-disabled'] ? 'none' : `0 0 0 3px ${COLORS.yellow50}`};
+      props['aria-disabled']
+        ? 'none'
+        : `outline: 2px solid ${COLORS.blue50};
+    outline-offset: 0.25rem;`};
   }
 
   &:active {
     box-shadow: none;
     color: ${props => {
       if (props['aria-disabled']) return COLORS.grey40
-      return props.isDangerous ? COLORS.red60 : COLORS.blue55
+      return props.isDangerous ? COLORS.red60 : COLORS.blue60
     }};
     border-color: ${props => {
       if (props['aria-disabled']) return COLORS.grey30
-      return props.isDangerous ? COLORS.red60 : COLORS.blue55
+      return props.isDangerous ? COLORS.red60 : COLORS.blue60
     }};
   }
 

package/src/atoms/buttons/TertiaryButton.tsx

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Btn } from '../../primitives'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'

package/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx

@@ -1,10 +1,11 @@
-import { describe, it, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
-import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
 
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { AlertPrimaryButton } from '../AlertPrimaryButton'
 
 import type { ComponentProps } from 'react'

package/src/atoms/buttons/__tests__/AltPrimaryButton.test.tsx

@@ -1,9 +1,11 @@
-import { describe, it, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
-import { renderWithProviders } from '../../../testing/utils'
+
 import { BORDERS, COLORS } from '../../../helix-design-system'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
+import { renderWithProviders } from '../../../testing/utils'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { AltPrimaryButton } from '../AltPrimaryButton'
 
 import type { ComponentProps } from 'react'
@@ -28,7 +30,7 @@ describe('AltPrimaryButton', () => {
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
     )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
+    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeH3}`)
     expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
     expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight20}`)
     expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)

package/src/atoms/buttons/__tests__/EmptySelectorButton.test.tsx

@@ -1,8 +1,10 @@
 import '@testing-library/jest-dom/vitest'
+
 import { fireEvent, screen } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../../testing/utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { JUSTIFY_CENTER, JUSTIFY_START } from '../../../styles'
+import { renderWithProviders } from '../../../testing/utils'
 import { EmptySelectorButton } from '../EmptySelectorButton'
 
 import type { ComponentProps } from 'react'

package/src/atoms/buttons/__tests__/LargeButton.test.tsx

@@ -1,9 +1,11 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
 import { fireEvent, screen } from '@testing-library/react'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
 import { LargeButton } from '../LargeButton'
 
 import type { ComponentProps } from 'react'

package/src/atoms/buttons/__tests__/PrimaryButton.test.tsx

@@ -1,9 +1,11 @@
-import { describe, it, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
-import { renderWithProviders } from '../../../testing/utils'
+
 import { BORDERS, COLORS } from '../../../helix-design-system'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
+import { renderWithProviders } from '../../../testing/utils'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { PrimaryButton } from '../PrimaryButton'
 
 import type { ComponentProps } from 'react'
@@ -28,7 +30,7 @@ describe('PrimaryButton', () => {
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
     )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
+    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeH3}`)
     expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
     expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight20}`)
     expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
@@ -52,7 +54,7 @@ describe('PrimaryButton', () => {
     render(props)
     const button = screen.getByText('primary button')
     fireEvent.mouseOver(button)
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue55}`)
   })
 
   it('renders primary button with text and different background color', () => {

package/src/atoms/buttons/__tests__/RadioButton.test.tsx

@@ -1,8 +1,10 @@
 import '@testing-library/jest-dom/vitest'
-import { screen, queryByAttribute } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../../testing/utils'
+
+import { queryByAttribute, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
 import { SPACING } from '../../../ui-style-constants'
 import { RadioButton } from '../RadioButton'
 
@@ -102,4 +104,16 @@ describe('RadioButton', () => {
 
     render(props)
   })
+
+  it('onClick is called when ariaDisabled is true', () => {
+    props = {
+      ...props,
+      ariaDisabled: true,
+      onClick: vi.fn(),
+    }
+    render(props)
+    const label = screen.getByRole('label')
+    label.click()
+    expect(props.onClick).toHaveBeenCalled()
+  })
 })

package/src/atoms/buttons/__tests__/SecondaryButton.test.tsx

@@ -1,10 +1,11 @@
-import { describe, it, beforeEach, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
-import { renderWithProviders } from '../../../testing/utils'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
-import { BORDERS, COLORS } from '../../../helix-design-system'
 
+import { BORDERS, COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
 import { SecondaryButton } from '../SecondaryButton'
 
 import type { ComponentProps } from 'react'
@@ -29,7 +30,7 @@ describe('SecondaryButton', () => {
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16}`
     )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
+    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeH3}`)
     expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
     expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight20}`)
     expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)

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

@@ -1,13 +1,13 @@
-import type * as React from 'react'
-import { SPACING } from '../../ui-style-constants'
-import { DIRECTION_ROW } from '../../styles'
 import { Flex } from '../../primitives'
-import { PrimaryButton } from './PrimaryButton'
-import { SecondaryButton } from './SecondaryButton'
+import { DIRECTION_ROW } from '../../styles'
+import { SPACING } from '../../ui-style-constants'
 import { AlertPrimaryButton } from './AlertPrimaryButton'
 import { AltPrimaryButton } from './AltPrimaryButton'
+import { PrimaryButton } from './PrimaryButton'
+import { SecondaryButton } from './SecondaryButton'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
 
 export default {
   title: 'Helix/Atoms/Buttons',

package/src/atoms/index.ts

@@ -3,10 +3,12 @@ export * from './Checkbox'
 export * from './CheckboxField'
 export * from './Chip'
 export * from './Divider'
+export * from './InlineNotification'
 export * from './InputField'
 export * from './ListButton'
 export * from './ListItem'
 export * from './ListItem/ListItemChildren//ListItemDescriptor'
+export * from './ListTable'
 export * from './MenuList'
 export * from './MenuList/MenuItem'
 export * from './MenuList/OverflowBtn'
@@ -14,9 +16,8 @@ export * from './Snackbar'
 export * from './StepMeter'
 export * from './StepMeter'
 export * from './StyledText'
+export * from './SubListTable'
 export * from './Tag'
 export * from './Toast'
 export * from './ToggleGroup'
 export * from './Tooltip'
-export * from './ListTable'
-export * from './SubListTable'

package/src/buttons/Button.tsx

@@ -2,13 +2,12 @@ import cx from 'classnames'
 import omit from 'lodash/omit'
 
 import { Icon } from '../icons'
-import styles from './buttons.module.css'
-
 import { BUTTON_TYPE_BUTTON } from '../primitives'
+import styles from './buttons.module.css'
 
 import type { ComponentType, MouseEventHandler, ReactNode } from 'react'
-import type { BUTTON_TYPE_SUBMIT, BUTTON_TYPE_RESET } from '../primitives'
 import type { IconName } from '../icons'
+import type { BUTTON_TYPE_RESET, BUTTON_TYPE_SUBMIT } from '../primitives'
 import type { UseHoverTooltipTargetProps } from '../tooltips'
 
 export interface ButtonProps {

package/src/buttons/IconButton.tsx

@@ -1,9 +1,8 @@
 import cx from 'classnames'
 
 import { Icon } from '../icons'
-import { FlatButton } from './FlatButton'
-
 import styles from './buttons.module.css'
+import { FlatButton } from './FlatButton'
 
 import type { IconProps } from '../icons'
 import type { ButtonProps } from './Button'

package/src/controls/LabeledRadioGroup.tsx

@@ -1,5 +1,5 @@
-import { StackedLabeledControl } from './StackedLabeledControl'
 import { RadioGroup } from '../forms'
+import { StackedLabeledControl } from './StackedLabeledControl'
 
 import type { ReactNode } from 'react'
 import type { RadioGroupProps } from '../forms'