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

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

@@ -1,78 +1,114 @@
-import type * as React from 'react'
-import { SPACING } from '../../ui-style-constants'
+import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
+import { Flex, STYLE_PROPS } from '../../primitives'
 import { DIRECTION_ROW } from '../../styles'
-import { Flex } from '../../primitives'
-import { PrimaryButton } from './PrimaryButton'
-import { SecondaryButton } from './SecondaryButton'
-import { AlertPrimaryButton } from './AlertPrimaryButton'
-import { AltPrimaryButton } from './AltPrimaryButton'
+import { SPACING } from '../../ui-style-constants'
+import { AlertPrimaryButton as AlertPrimaryButtonComponent } from './AlertPrimaryButton'
+import { AltPrimaryButton as AltPrimaryButtonComponent } from './AltPrimaryButton'
+import { BasicButton as BasicButtonComponent } from './BasicButton'
+import { PrimaryButton as PrimaryButtonComponent } from './PrimaryButton'
+import { SecondaryButton as SecondaryButtonComponent } from './SecondaryButton'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta = {
   title: 'Helix/Atoms/Buttons',
-} as Meta
-
-const PrimaryButtonTemplate: Story<
-  React.ComponentProps<typeof PrimaryButton>
-> = args => {
-  const { children } = args
-  return (
-    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
-      <PrimaryButton>{children}</PrimaryButton>
-    </Flex>
-  )
+  argTypes: {
+    ...Object.fromEntries(
+      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
+        prop,
+        { table: { disable: true } },
+      ])
+    ),
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+    'aria-disabled': {
+      control: {
+        type: 'boolean',
+      },
+    },
+    isDangerous: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
 }
 
-export const Primary = PrimaryButtonTemplate.bind({})
-Primary.args = {
-  children: 'primary button',
-}
+export default meta
 
-const SecondaryButtonTemplate: Story<
-  React.ComponentProps<typeof SecondaryButton>
-> = args => {
-  const { children } = args
-  return (
+export const PrimaryButton: StoryObj<typeof PrimaryButtonComponent> = {
+  args: {
+    children: 'primary button',
+  },
+  render: args => (
     <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
-      <SecondaryButton>{children}</SecondaryButton>
+      <PrimaryButtonComponent {...args} />
     </Flex>
-  )
+  ),
 }
 
-export const Secondary = SecondaryButtonTemplate.bind({})
-Secondary.args = {
-  children: 'secondary button',
+export const SecondaryButton: StoryObj<typeof SecondaryButtonComponent> = {
+  args: {
+    children: 'secondary button',
+  },
+  render: args => (
+    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
+      <SecondaryButtonComponent {...args} />
+    </Flex>
+  ),
 }
 
-const AlertPrimaryButtonTemplate: Story<
-  React.ComponentProps<typeof AlertPrimaryButton>
-> = args => {
-  const { children } = args
-  return (
+export const AlertPrimaryButton: StoryObj<
+  typeof AlertPrimaryButtonComponent
+> = {
+  args: {
+    children: 'alert tertiary button',
+  },
+  render: args => (
     <Flex>
-      <AlertPrimaryButton>{children}</AlertPrimaryButton>
+      <AlertPrimaryButtonComponent {...args} />
     </Flex>
-  )
-}
-
-export const AlertPrimary = AlertPrimaryButtonTemplate.bind({})
-AlertPrimary.args = {
-  children: 'alert tertiary button',
+  ),
 }
 
-const AltPrimaryButtonTemplate: Story<
-  React.ComponentProps<typeof AltPrimaryButton>
-> = args => {
-  const { children } = args
-  return (
+export const AltPrimaryButton: StoryObj<typeof AltPrimaryButtonComponent> = {
+  args: {
+    children: 'alt primary button',
+  },
+  render: args => (
     <Flex>
-      <AltPrimaryButton>{children}</AltPrimaryButton>
+      <AltPrimaryButtonComponent {...args} />
     </Flex>
-  )
+  ),
 }
 
-export const AltPrimary = AltPrimaryButtonTemplate.bind({})
-AltPrimary.args = {
-  children: 'alt primary button',
+export const BasicButton: StoryObj<typeof BasicButtonComponent> = {
+  args: {
+    children: 'basic button',
+  },
+  argTypes: {
+    underLine: {
+      control: {
+        type: 'boolean',
+      },
+      description:
+        'Toggles the underline style for the button text (BasicButton only).',
+    },
+    iconName: {
+      options: Object.keys(ICON_DATA_BY_NAME),
+      control: {
+        type: 'select',
+      },
+      description:
+        'Optional icon to display alongside the button text (BasicButton only).',
+    },
+  },
+  render: args => (
+    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
+      <BasicButtonComponent {...args} />
+    </Flex>
+  ),
 }

package/src/atoms/buttons/index.ts

@@ -1,4 +1,5 @@
 export * from './AlertPrimaryButton'
+export * from './BasicButton'
 export * from './EmptySelectorButton'
 export * from './LargeButton'
 export * from './PrimaryButton'

package/src/atoms/index.ts

@@ -1,12 +1,15 @@
+export * from './AnimationVideo'
 export * from './buttons'
 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 +17,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/buttons/buttons.module.css

@@ -5,13 +5,14 @@
   --button-pad: 0.5rem;
 
   --button-inverted: {
+    border-color: var(--c-font-light);
+
     /* VVV from legacy --button-inverted VVV */
     color: var(--c-font-light);
-    border-color: var(--c-font-light);
 
     &:active {
-      font-weight: var(--fw-regular);
       background-color: color-mod(var(--c-bg-dark) tint(10%));
+      font-weight: var(--fw-regular);
     }
 
     &:focus {
@@ -24,22 +25,21 @@
 
     &:disabled,
     &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
       /* from legacy --button-disabled */
       border-color: var(--c-font-disabled);
+      background-color: transparent;
 
       /* from legacy --button-disabled */
       color: var(--c-font-disabled);
 
+      /* from legacy --button-disabled */
+      cursor: default;
+
       /* from legacy --button-disabled */
       fill: var(--c-font-disabled);
 
       /* from legacy --button-disabled */
-      cursor: default;
+      font-weight: normal;
 
       /* from legacy --button-disabled */
       pointer-events: none;
@@ -58,31 +58,32 @@
 /* TODO(ka, 2017-2-14): standardize primary button vars */
 
 .button_primary {
+  position: relative;
+
   /* VVV from legacy --button-default VVV */
   display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  border: none;
-  padding: var(--button-pad);
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  background: transparent;
-  border-radius: var(--bd-radius-default);
 
   /* ^^^ from legacy --button-default ^^^ */
 
   width: 100%;
-  color: var(--c-font-light);
+  padding: var(--button-pad);
+  border: none;
+  border-radius: var(--bd-radius-default);
+  background: transparent;
   background-color: var(--c-bg-dark);
 
   /* TODO(mc, 2017-12-07): pull shadows out to central file */
   box-shadow:
     0 0 2px rgba(0, 0, 0, 0.12),
     0 2px 2px rgba(0, 0, 0, 0.24);
+  color: var(--c-font-light);
+  cursor: pointer;
+  font-size: var(--fs-body-2);
+  font-weight: var(--fw-semibold);
+  line-height: 1.4;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
 
   &:focus {
     background-color: color-mod(var(--c-bg-dark) shade(30%));
@@ -97,13 +98,13 @@
   }
 
   &:active {
-    font-weight: var(--fw-regular);
     background-color: color-mod(var(--c-bg-dark) tint(30%));
 
     /* TODO(mc, 2017-12-07): pull shadows out to central file */
     box-shadow:
       0 0 8px rgba(0, 0, 0, 0.12),
       0 8px 8px rgba(0, 0, 0, 0.24);
+    font-weight: var(--fw-regular);
   }
 
   &.inverted {
@@ -123,69 +124,73 @@
 
   &:disabled,
   &.disabled {
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
     /* from legacy --button-disabled */
     border-color: var(--c-font-disabled);
 
     /* from legacy --button-disabled */
-    fill: var(--c-font-disabled);
+
+    background-color: color-mod(var(--c-bg-dark) tint(70%));
+    box-shadow: none;
+    color: var(--c-font-disabled);
 
     /* from legacy --button-disabled */
     cursor: default;
 
     /* from legacy --button-disabled */
-    pointer-events: none;
+    fill: var(--c-font-disabled);
 
     /* from legacy --button-disabled */
+    font-weight: normal;
 
-    background-color: color-mod(var(--c-bg-dark) tint(70%));
-    box-shadow: none;
-    color: var(--c-font-disabled);
+    /* from legacy --button-disabled */
+    pointer-events: none;
   }
 }
 
 .button_flat {
+  position: relative;
+
   /* VVV from legacy --button-default VVV */
   display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  border: none;
+
+  /* ^^^ from legacy --button-default ^^^ */
+
+  width: 9rem;
   padding: var(--button-pad);
+  border: none;
+  border-radius: var(--bd-radius-default);
+  background: transparent;
+  color: var(--c-font-dark);
+  cursor: pointer;
   font-size: var(--fs-body-2);
   font-weight: var(--fw-semibold);
+  line-height: 1.4;
   text-align: center;
+  text-decoration: none;
   text-transform: uppercase;
-  cursor: pointer;
-  color: var(--c-font-dark);
-  background: transparent;
-  border-radius: var(--bd-radius-default);
 
   &:active {
-    font-weight: var(--fw-regular);
     background-color: color-mod(var(--c-bg-light) shade(10%));
+    font-weight: var(--fw-regular);
   }
 
   &:disabled,
   &.disabled {
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
     /* from legacy --button-disabled */
     border-color: var(--c-font-disabled);
+    background-color: transparent;
 
     /* from legacy --button-disabled */
     color: var(--c-font-disabled);
 
+    /* from legacy --button-disabled */
+    cursor: default;
+
     /* from legacy --button-disabled */
     fill: var(--c-font-disabled);
 
     /* from legacy --button-disabled */
-    cursor: default;
+    font-weight: normal;
 
     /* from legacy --button-disabled */
     pointer-events: none;
@@ -205,38 +210,34 @@
     background-color: color-mod(var(--c-med-gray) alpha(25%));
   }
 
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-
   &.inverted {
+    border-color: var(--c-font-light);
+
     /* VVV from legacy --button-inverted VVV */
     color: var(--c-font-light);
-    border-color: var(--c-font-light);
 
     &:active {
-      font-weight: var(--fw-regular);
       background-color: color-mod(var(--c-bg-dark) tint(10%));
+      font-weight: var(--fw-regular);
     }
 
     &:disabled,
     &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
       /* from legacy --button-disabled */
       border-color: var(--c-font-disabled);
+      background-color: transparent;
 
       /* from legacy --button-disabled */
       color: var(--c-font-disabled);
 
+      /* from legacy --button-disabled */
+      cursor: default;
+
       /* from legacy --button-disabled */
       fill: var(--c-font-disabled);
 
       /* from legacy --button-disabled */
-      cursor: default;
+      font-weight: normal;
 
       /* from legacy --button-disabled */
       pointer-events: none;
@@ -261,44 +262,49 @@
 }
 
 .button_outline {
+  position: relative;
+
   /* VVV from legacy --button-default VVV */
   display: inline-block;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
+
+  /* ^^^ from legacy --button-default ^^^ */
+
+  width: 9rem;
   padding: var(--button-pad);
+  border: 1px solid var(--c-font-dark);
+  border-radius: var(--bd-radius-default);
+  background: transparent;
+  color: var(--c-font-dark);
+  cursor: pointer;
   font-size: var(--fs-body-2);
   font-weight: var(--fw-semibold);
+  line-height: 1.4;
   text-align: center;
+  text-decoration: none;
   text-transform: uppercase;
-  cursor: pointer;
-  color: var(--c-font-dark);
-  background: transparent;
-  border-radius: var(--bd-radius-default);
 
   &:active {
-    font-weight: var(--fw-regular);
     background-color: color-mod(var(--c-bg-light) shade(10%));
+    font-weight: var(--fw-regular);
   }
 
   &:disabled,
   &.disabled {
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
     /* from legacy --button-disabled */
     border-color: var(--c-font-disabled);
+    background-color: transparent;
 
     /* from legacy --button-disabled */
     color: var(--c-font-disabled);
 
+    /* from legacy --button-disabled */
+    cursor: default;
+
     /* from legacy --button-disabled */
     fill: var(--c-font-disabled);
 
     /* from legacy --button-disabled */
-    cursor: default;
+    font-weight: normal;
 
     /* from legacy --button-disabled */
     pointer-events: none;
@@ -318,39 +324,34 @@
     background-color: color-mod(var(--c-med-gray) alpha(25%));
   }
 
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-  border: 1px solid var(--c-font-dark);
-
   &.inverted {
+    border-color: var(--c-font-light);
+
     /* VVV from legacy --button-inverted VVV */
     color: var(--c-font-light);
-    border-color: var(--c-font-light);
 
     &:active {
-      font-weight: var(--fw-regular);
       background-color: color-mod(var(--c-bg-dark) tint(10%));
+      font-weight: var(--fw-regular);
     }
 
     &:disabled,
     &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
       /* from legacy --button-disabled */
       border-color: var(--c-font-disabled);
+      background-color: transparent;
 
       /* from legacy --button-disabled */
       color: var(--c-font-disabled);
 
+      /* from legacy --button-disabled */
+      cursor: default;
+
       /* from legacy --button-disabled */
       fill: var(--c-font-disabled);
 
       /* from legacy --button-disabled */
-      cursor: default;
+      font-weight: normal;
 
       /* from legacy --button-disabled */
       pointer-events: none;
@@ -381,8 +382,8 @@
 
   & > * {
     display: block;
-    height: 100%;
     width: 100%;
+    height: 100%;
   }
 
   &.inverted {
@@ -394,22 +395,21 @@
 
     &:disabled,
     &.disabled {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
       /* from legacy --button-disabled */
       border-color: var(--c-font-disabled);
+      background-color: transparent;
 
       /* from legacy --button-disabled */
       color: var(--c-font-disabled);
 
+      /* from legacy --button-disabled */
+      cursor: default;
+
       /* from legacy --button-disabled */
       fill: var(--c-font-disabled);
 
       /* from legacy --button-disabled */
-      cursor: default;
+      font-weight: normal;
 
       /* from legacy --button-disabled */
       pointer-events: none;
@@ -425,4 +425,4 @@
   top: var(--button-pad);
   left: var(--button-pad);
   height: calc(100% - 2 * var(--button-pad));
-}
+}

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'