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

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

@@ -0,0 +1,78 @@
+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 { AlertPrimaryButton } from './AlertPrimaryButton'
+import { AltPrimaryButton } from './AltPrimaryButton'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/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>
+  )
+}
+
+export const Primary = PrimaryButtonTemplate.bind({})
+Primary.args = {
+  children: 'primary button',
+}
+
+const SecondaryButtonTemplate: Story<
+  React.ComponentProps<typeof SecondaryButton>
+> = args => {
+  const { children } = args
+  return (
+    <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
+      <SecondaryButton>{children}</SecondaryButton>
+    </Flex>
+  )
+}
+
+export const Secondary = SecondaryButtonTemplate.bind({})
+Secondary.args = {
+  children: 'secondary button',
+}
+
+const AlertPrimaryButtonTemplate: Story<
+  React.ComponentProps<typeof AlertPrimaryButton>
+> = args => {
+  const { children } = args
+  return (
+    <Flex>
+      <AlertPrimaryButton>{children}</AlertPrimaryButton>
+    </Flex>
+  )
+}
+
+export const AlertPrimary = AlertPrimaryButtonTemplate.bind({})
+AlertPrimary.args = {
+  children: 'alert tertiary button',
+}
+
+const AltPrimaryButtonTemplate: Story<
+  React.ComponentProps<typeof AltPrimaryButton>
+> = args => {
+  const { children } = args
+  return (
+    <Flex>
+      <AltPrimaryButton>{children}</AltPrimaryButton>
+    </Flex>
+  )
+}
+
+export const AltPrimary = AltPrimaryButtonTemplate.bind({})
+AltPrimary.args = {
+  children: 'alt primary button',
+}

package/src/atoms/buttons/index.ts

@@ -0,0 +1,6 @@
+export * from './AlertPrimaryButton'
+export * from './EmptySelectorButton'
+export * from './LargeButton'
+export * from './PrimaryButton'
+export * from './RadioButton'
+export * from './SecondaryButton'

package/src/atoms/index.ts

@@ -0,0 +1,20 @@
+export * from './buttons'
+export * from './Checkbox'
+export * from './CheckboxField'
+export * from './Chip'
+export * from './Divider'
+export * from './InputField'
+export * from './ListButton'
+export * from './ListItem'
+export * from './ListItem/ListItemChildren//ListItemDescriptor'
+export * from './MenuList'
+export * from './MenuList/MenuItem'
+export * from './MenuList/OverflowBtn'
+export * from './Snackbar'
+export * from './StepMeter'
+export * from './StepMeter'
+export * from './StyledText'
+export * from './Tag'
+export * from './Toast'
+export * from './ToggleGroup'
+export * from './Tooltip'

package/src/barrel.ts

@@ -0,0 +1,10 @@
+// TODO(BC, 2024-01-04): This is intentionally a subset of the exports from
+// index.ts.  Once the cruft is removed from index.ts, these two files should probably converge
+
+// opentrons components library package
+
+export * from './hardware-sim'
+
+export * from './primitives'
+
+export * from './ui-style-constants'

package/src/buttons/Button.tsx

@@ -0,0 +1,96 @@
+import type * as React from 'react'
+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 type { BUTTON_TYPE_SUBMIT, BUTTON_TYPE_RESET } from '../primitives'
+import type { IconName } from '../icons'
+import type { UseHoverTooltipTargetProps } from '../tooltips'
+
+export interface ButtonProps {
+  /** id attribute */
+  id?: string
+  /** click handler */
+  onClick?: React.MouseEventHandler
+  /** name attribute */
+  name?: string
+  /** title attribute */
+  title?: string
+  /** disabled attribute (setting disabled removes onClick) */
+  disabled?: boolean | null | undefined
+  /** use hover style even when not hovered */
+  hover?: boolean | null | undefined
+  /** optional Icon name */
+  iconName?: IconName
+  /** classes to apply */
+  className?: string
+  /** inverts the default color/background/border of default button style */
+  inverted?: boolean
+  /** contents of the button */
+  children?: React.ReactNode
+  /** type of button (default "button") */
+  type?:
+    | typeof BUTTON_TYPE_SUBMIT
+    | typeof BUTTON_TYPE_RESET
+    | typeof BUTTON_TYPE_BUTTON
+  /** ID of form that button is for */
+  form?: string
+  /** custom element or component to use instead of `<button>` */
+  Component?: React.ComponentType<any> | keyof JSX.IntrinsicElements
+  /** handlers for HoverTooltipComponent */
+  hoverTooltipHandlers?: UseHoverTooltipTargetProps | null | undefined
+  /** html tabindex property */
+  tabIndex?: number
+  /** catch all prop for pass-through props */
+  [name: string]: any
+}
+
+// props to strip if using a custom component
+const STRIP_PROPS = [
+  'inverted',
+  'iconName',
+  'children',
+  'Component',
+  'hoverTooltipHandlers',
+]
+
+/**
+ * Basic, un-styled button. You probably want to use a styled button
+ * instead. All buttons take the same props.
+ *
+ * If you need access to the ButtonProps type, you can:
+ * ```js
+ * import {type ButtonProps} from '@opentrons/components'
+ * ```
+ * @deprecated Use {@link Btn}
+ */
+export function Button(props: ButtonProps): JSX.Element {
+  const { id, name, title, disabled, hover, tabIndex, form } = props
+  const className = cx(props.className, { [styles.hover]: hover })
+  const onClick = !disabled ? props.onClick : undefined
+  const Component: any = props.Component ?? 'button'
+  const type = props.type ?? BUTTON_TYPE_BUTTON
+
+  // pass all props if using a custom component
+  const buttonProps = !props.Component
+    ? { id, name, type, form, title, disabled, onClick, className, tabIndex }
+    : {
+        ...omit(props, STRIP_PROPS),
+        className: cx(className, { [styles.disabled]: disabled }),
+        onClick,
+      }
+
+  // TODO(mc, 2019-04-02): hoverTooltipHandlers should probably be named more
+  // generically, and the Button component should probably be configured as a
+  // ref forwarder
+  return (
+    <Component {...props.hoverTooltipHandlers} {...buttonProps}>
+      {props.iconName && <Icon name={props.iconName} className={styles.icon} />}
+      {props.children}
+    </Component>
+  )
+}

package/src/buttons/DeprecatedPrimaryButton.tsx

@@ -0,0 +1,24 @@
+import cx from 'classnames'
+
+import { Button } from './Button'
+import styles from './buttons.module.css'
+
+import type { ButtonProps } from './Button'
+
+/**
+ * Primary application button. Fills its container and has a dark
+ * background with white text
+ *
+ * @deprecated Use {@link PrimaryButton}
+ */
+export function DeprecatedPrimaryButton(props: ButtonProps): JSX.Element {
+  const className = cx(styles.button_primary, props.className, {
+    [styles.inverted]: props.inverted,
+  })
+
+  return (
+    <Button {...props} className={className}>
+      {props.children}
+    </Button>
+  )
+}

package/src/buttons/FlatButton.tsx

@@ -0,0 +1,21 @@
+import classnames from 'classnames'
+
+import { Button } from './Button'
+import styles from './buttons.module.css'
+
+import type { ButtonProps } from './Button'
+
+/**
+ * Flat-styled button with a default width of `9rem` and no background fill
+ */
+export function FlatButton(props: ButtonProps): JSX.Element {
+  const className = classnames(styles.button_flat, props.className, {
+    [styles.inverted]: props.inverted,
+  })
+
+  return (
+    <Button {...props} className={className}>
+      {props.children}
+    </Button>
+  )
+}

package/src/buttons/IconButton.tsx

@@ -0,0 +1,37 @@
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import { FlatButton } from './FlatButton'
+
+import styles from './buttons.module.css'
+
+import type { IconProps } from '../icons'
+import type { ButtonProps } from './Button'
+
+interface Props extends ButtonProps {
+  name: IconProps['name']
+  spin?: IconProps['spin']
+}
+
+/**
+ * FlatButton variant for a button that is a single icon. Takes props of
+ * both Button _and_ Icon. Use `name` to specify icon name.
+ *
+ * @deprecated Use {@link Btn} and {@link Icon}
+ */
+export function IconButton(props: Props): JSX.Element {
+  // TODO(mc, 2020-02-04): ButtonProps::name conflicts with IconProps::name
+  // this component will need to be redone so underlying `button` can still
+  // receive an HTML name for a11y
+  const { name, spin, ...buttonProps } = props
+  const iconProps = { name, spin }
+  const className = cx(styles.button_icon, props.className, {
+    [styles.inverted]: props.inverted,
+  })
+
+  return (
+    <FlatButton {...buttonProps} className={className} iconName={undefined}>
+      <Icon {...iconProps} />
+    </FlatButton>
+  )
+}

package/src/buttons/OutlineButton.tsx

@@ -0,0 +1,24 @@
+import cx from 'classnames'
+
+import { Button } from './Button'
+import styles from './buttons.module.css'
+
+import type { ButtonProps } from './Button'
+
+/**
+ * Button with no background fill and a dark border.
+ * Use inverted prop for buttons on dark backgrounds.
+ *
+ * @deprecated Use {@link SecondaryBtn}
+ */
+export function OutlineButton(props: ButtonProps): JSX.Element {
+  const className = cx(styles.button_outline, props.className, {
+    [styles.inverted]: props.inverted,
+  })
+
+  return (
+    <Button {...props} className={className}>
+      {props.children}
+    </Button>
+  )
+}

package/src/buttons/index.ts

@@ -0,0 +1,7 @@
+// button components
+
+export * from './Button'
+export * from './FlatButton'
+export * from './DeprecatedPrimaryButton'
+export * from './IconButton'
+export * from './OutlineButton'

package/src/controls/ControlInfo.tsx

@@ -0,0 +1,13 @@
+import type * as React from 'react'
+
+import styles from './styles.module.css'
+
+export interface ControlInfoProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function ControlInfo(props: ControlInfoProps): JSX.Element {
+  const { children, className = styles.control_info } = props
+  return <div className={className}>{children}</div>
+}

package/src/controls/LabeledButton.tsx

@@ -0,0 +1,28 @@
+import type * as React from 'react'
+import cx from 'classnames'
+
+import { OutlineButton } from '../buttons'
+import { LabeledControl } from './LabeledControl'
+import styles from './styles.module.css'
+
+import type { ButtonProps } from '../buttons'
+
+export interface LabeledButtonProps {
+  label: string
+  buttonProps: ButtonProps
+  children: React.ReactNode
+}
+
+export function LabeledButton(props: LabeledButtonProps): JSX.Element {
+  const { label, buttonProps } = props
+  const buttonClass = cx(styles.labeled_button, buttonProps.className)
+
+  return (
+    <LabeledControl
+      label={label}
+      control={<OutlineButton {...buttonProps} className={buttonClass} />}
+    >
+      {props.children}
+    </LabeledControl>
+  )
+}

package/src/controls/LabeledCheckbox.tsx

@@ -0,0 +1,35 @@
+import type * as React from 'react'
+import cx from 'classnames'
+
+import { DeprecatedCheckboxField } from '../forms'
+import { LabeledControl } from './LabeledControl'
+import styles from './styles.module.css'
+
+export interface LabeledCheckboxProps {
+  label: string
+  name: string
+  value: boolean
+  className?: string
+  children: React.ReactNode
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+}
+
+export function LabeledCheckbox(props: LabeledCheckboxProps): JSX.Element {
+  const { label, value, name, onChange } = props
+  const checkboxClass = cx(styles.labeled_checkbox, props.className)
+  return (
+    <LabeledControl
+      label={label}
+      control={
+        <DeprecatedCheckboxField
+          className={checkboxClass}
+          name={name}
+          value={value}
+          onChange={onChange}
+        />
+      }
+    >
+      {props.children}
+    </LabeledControl>
+  )
+}

package/src/controls/LabeledControl.tsx

@@ -0,0 +1,24 @@
+import type * as React from 'react'
+
+import { ControlInfo } from './ControlInfo'
+import styles from './styles.module.css'
+
+export interface LabeledControlProps {
+  label: string
+  control: React.ReactNode
+  children?: React.ReactNode
+}
+
+export function LabeledControl(props: LabeledControlProps): JSX.Element {
+  const { label, control, children } = props
+
+  return (
+    <div className={styles.labeled_control_wrapper}>
+      <div className={styles.labeled_control}>
+        <p className={styles.labeled_control_label}>{label}</p>
+        {control}
+      </div>
+      {children && <ControlInfo>{children}</ControlInfo>}
+    </div>
+  )
+}

package/src/controls/LabeledRadioGroup.tsx

@@ -0,0 +1,27 @@
+import type * as React from 'react'
+
+import { StackedLabeledControl } from './StackedLabeledControl'
+import { RadioGroup } from '../forms'
+
+import type { RadioGroupProps } from '../forms'
+
+export interface LabeledRadioGroupProps extends RadioGroupProps {
+  label: string
+  children: React.ReactNode
+  'data-test'?: string
+}
+
+export function LabeledRadioGroup(props: LabeledRadioGroupProps): JSX.Element {
+  const { label, value, options, onChange } = props
+
+  return (
+    <StackedLabeledControl
+      label={label}
+      control={
+        <RadioGroup value={value} options={options} onChange={onChange} />
+      }
+    >
+      {props.children}
+    </StackedLabeledControl>
+  )
+}

package/src/controls/LabeledSelect.tsx

@@ -0,0 +1,34 @@
+import type * as React from 'react'
+
+import { DropdownField } from '../forms'
+import { LabeledControl } from './LabeledControl'
+import styles from './styles.module.css'
+
+import type { DropdownFieldProps } from '../forms'
+
+export interface LabeledSelectProps extends DropdownFieldProps {
+  label: string
+  children: React.ReactNode
+  /** optional data test id for the container */
+  'data-test'?: string
+}
+
+export function LabeledSelect(props: LabeledSelectProps): JSX.Element {
+  const { label, value, options, onChange } = props
+
+  return (
+    <LabeledControl
+      label={label}
+      control={
+        <DropdownField
+          className={styles.labeled_select}
+          value={value}
+          options={options}
+          onChange={onChange}
+        />
+      }
+    >
+      {props.children}
+    </LabeledControl>
+  )
+}

package/src/controls/LabeledToggle.tsx

@@ -0,0 +1,35 @@
+import type * as React from 'react'
+
+import { LabeledControl } from './LabeledControl'
+import { ToggleButton } from './ToggleButton'
+import styles from './styles.module.css'
+
+export interface LabeledToggleProps {
+  label: string
+  toggledOn: boolean
+  disabled?: boolean
+  children?: React.ReactNode
+  onClick: () => unknown
+  /** optional data test id for the container */
+  'data-test'?: string
+}
+
+export function LabeledToggle(props: LabeledToggleProps): JSX.Element {
+  const { label, toggledOn, disabled, onClick } = props
+
+  return (
+    <LabeledControl
+      label={label}
+      control={
+        <ToggleButton
+          className={styles.labeled_toggle_button}
+          toggledOn={toggledOn}
+          disabled={disabled}
+          onClick={onClick}
+        />
+      }
+    >
+      {props.children}
+    </LabeledControl>
+  )
+}

package/src/controls/StackedLabeledControl.tsx

@@ -0,0 +1,28 @@
+import type * as React from 'react'
+
+import { ControlInfo } from './ControlInfo'
+import styles from './styles.module.css'
+
+export interface StackedLabeledControlProps {
+  label: string
+  control: React.ReactNode
+  children?: React.ReactNode
+}
+
+export function StackedLabeledControl(
+  props: StackedLabeledControlProps
+): JSX.Element {
+  const { label, control, children } = props
+
+  return (
+    <div className={styles.labeled_control_wrapper}>
+      <p className={styles.stacked_labeled_control_label}>{label}</p>
+      {children && (
+        <ControlInfo className={styles.stacked_control_info}>
+          {children}
+        </ControlInfo>
+      )}
+      <div className={styles.stacked_labeled_control}>{control}</div>
+    </div>
+  )
+}

package/src/controls/ToggleButton.tsx

@@ -0,0 +1,25 @@
+// reusable toggle button with on off styling for connect to robot and opt in/out
+import cx from 'classnames'
+import { IconButton } from '../buttons'
+import styles from './styles.module.css'
+
+import type { ButtonProps } from '../buttons'
+
+export interface ToggleButtonProps extends ButtonProps {
+  toggledOn: boolean
+}
+
+export function ToggleButton(props: ToggleButtonProps): JSX.Element {
+  // TODO(mc, 2020-02-04): destructuring `name` to avoid flow error
+  // ButtonProps::name conflicts with IconProps::name, and IconButton
+  // has `name` prop to pass to Icon. IconButton will need to be redone
+  const { toggledOn, name, ...buttonProps } = props
+  const className = cx(styles.robot_item_icon, props.className, {
+    [styles.toggled_on]: toggledOn,
+    [styles.toggled_off]: !toggledOn,
+  })
+
+  const toggleIcon = toggledOn ? 'ot-toggle-switch-on' : 'ot-toggle-switch-off'
+
+  return <IconButton {...buttonProps} name={toggleIcon} className={className} />
+}

package/src/controls/index.ts

@@ -0,0 +1,10 @@
+// TODO: All of these are not actually reusable and shouldn't be in the
+// components library. They belong in the app components (and they also
+// belong in the please-refactor-these-to-use-primitives-and-styled-components
+// category). We should move them all.
+export * from './ToggleButton'
+export * from './LabeledToggle'
+export * from './LabeledButton'
+export * from './LabeledSelect'
+export * from './LabeledCheckbox'
+export * from './LabeledRadioGroup'

package/src/forms/DeprecatedCheckboxField.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { DeprecatedCheckboxField as DeprecatedCheckboxComponent } from './DeprecatedCheckboxField'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Forms/Deprecated Checkbox Field',
+  component: DeprecatedCheckboxComponent,
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof DeprecatedCheckboxComponent>
+> = args => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false)
+  return (
+    <DeprecatedCheckboxComponent
+      {...args}
+      onChange={e => {
+        setIsChecked(!isChecked)
+        args.onChange(e)
+      }}
+      value={isChecked}
+    />
+  )
+}
+export const DeprecatedCheckboxField = Template.bind({})
+DeprecatedCheckboxField.args = {
+  label: 'Remember this setting?',
+  isIndeterminate: false,
+}