@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.18

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/buttons.module.css

@@ -0,0 +1,428 @@
+/* button styling */
+@import '../index.module.css';
+
+:root {
+  --button-pad: 0.5rem;
+
+  --button-inverted: {
+    /* 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%));
+    }
+
+    &:focus {
+      background-color: color-mod(var(--c-bg-dark) tint(5%));
+    }
+
+    &:hover {
+      background-color: color-mod(var(--c-bg-dark) tint(5%));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: transparent;
+
+      /* from legacy --button-disabled */
+      font-weight: normal;
+
+      /* from legacy --button-disabled */
+      border-color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      fill: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      cursor: default;
+
+      /* from legacy --button-disabled */
+      pointer-events: none;
+
+      /* from legacy --button-disabled */
+    }
+
+    &.hover {
+      background-color: color-mod(var(--c-bg-dark) tint(5%));
+    }
+
+    /* ^^^ from legacy --button-default ^^^ */
+  }
+}
+
+/* TODO(ka, 2017-2-14): standardize primary button vars */
+
+.button_primary {
+  /* 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);
+  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);
+
+  &:focus {
+    background-color: color-mod(var(--c-bg-dark) shade(30%));
+  }
+
+  &:hover {
+    background-color: color-mod(var(--c-bg-dark) shade(30%));
+  }
+
+  &.hover {
+    background-color: color-mod(var(--c-bg-dark) shade(30%));
+  }
+
+  &: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);
+  }
+
+  &.inverted {
+    background-color: var(--c-bg-light);
+    color: var(--c-font-dark);
+
+    &:focus,
+    &:hover,
+    &.hover {
+      background-color: color-mod(var(--c-bg-light) shade(5%));
+    }
+
+    &:active {
+      background-color: color-mod(var(--c-bg-light) shade(10%));
+    }
+  }
+
+  &: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);
+
+    /* from legacy --button-disabled */
+    cursor: default;
+
+    /* from legacy --button-disabled */
+    pointer-events: none;
+
+    /* from legacy --button-disabled */
+
+    background-color: color-mod(var(--c-bg-dark) tint(70%));
+    box-shadow: none;
+    color: var(--c-font-disabled);
+  }
+}
+
+.button_flat {
+  /* 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;
+  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%));
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: transparent;
+
+    /* from legacy --button-disabled */
+    font-weight: normal;
+
+    /* from legacy --button-disabled */
+    border-color: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    color: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    fill: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    cursor: default;
+
+    /* from legacy --button-disabled */
+    pointer-events: none;
+
+    /* from legacy --button-disabled */
+  }
+
+  &:focus {
+    background-color: color-mod(var(--c-med-gray) alpha(25%));
+  }
+
+  &:hover {
+    background-color: color-mod(var(--c-med-gray) alpha(25%));
+  }
+
+  &.hover {
+    background-color: color-mod(var(--c-med-gray) alpha(25%));
+  }
+
+  /* ^^^ from legacy --button-default ^^^ */
+
+  width: 9rem;
+
+  &.inverted {
+    /* 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%));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: transparent;
+
+      /* from legacy --button-disabled */
+      font-weight: normal;
+
+      /* from legacy --button-disabled */
+      border-color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      fill: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      cursor: default;
+
+      /* from legacy --button-disabled */
+      pointer-events: none;
+
+      /* from legacy --button-disabled */
+    }
+
+    &:focus {
+      background-color: color-mod(var(--c-bg-dark) tint(5%));
+    }
+
+    &:hover {
+      background-color: color-mod(var(--c-bg-dark) tint(5%));
+    }
+
+    &.hover {
+      background-color: color-mod(var(--c-bg-dark) tint(5%));
+    }
+
+    /* ^^^ from legacy --button-default ^^^ */
+  }
+}
+
+.button_outline {
+  /* VVV from legacy --button-default VVV */
+  display: inline-block;
+  text-decoration: none;
+  position: relative;
+  line-height: 1.4;
+  padding: var(--button-pad);
+  font-size: var(--fs-body-2);
+  font-weight: var(--fw-semibold);
+  text-align: center;
+  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%));
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: transparent;
+
+    /* from legacy --button-disabled */
+    font-weight: normal;
+
+    /* from legacy --button-disabled */
+    border-color: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    color: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    fill: var(--c-font-disabled);
+
+    /* from legacy --button-disabled */
+    cursor: default;
+
+    /* from legacy --button-disabled */
+    pointer-events: none;
+
+    /* from legacy --button-disabled */
+  }
+
+  &:focus {
+    background-color: color-mod(var(--c-med-gray) alpha(25%));
+  }
+
+  &:hover {
+    background-color: color-mod(var(--c-med-gray) alpha(25%));
+  }
+
+  &.hover {
+    background-color: color-mod(var(--c-med-gray) alpha(25%));
+  }
+
+  /* ^^^ from legacy --button-default ^^^ */
+
+  width: 9rem;
+  border: 1px solid var(--c-font-dark);
+
+  &.inverted {
+    /* 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%));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: transparent;
+
+      /* from legacy --button-disabled */
+      font-weight: normal;
+
+      /* from legacy --button-disabled */
+      border-color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      fill: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      cursor: default;
+
+      /* from legacy --button-disabled */
+      pointer-events: none;
+
+      /* from legacy --button-disabled */
+    }
+
+    &:focus {
+      background-color: color-mod(var(--c-bg-dark) tint(5%));
+    }
+
+    &:hover {
+      background-color: color-mod(var(--c-bg-dark) tint(5%));
+    }
+
+    &.hover {
+      background-color: color-mod(var(--c-bg-dark) tint(5%));
+    }
+
+    /* ^^^ from legacy --button-default ^^^ */
+  }
+}
+
+/* style for IconButton */
+
+.button_icon {
+  width: auto;
+
+  & > * {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  &.inverted {
+    color: white;
+    fill: white;
+
+    /* TODO(mc, 2019-03-29): Is this correct? Our icons use only fill */
+    stroke: white;
+
+    &:disabled,
+    &.disabled {
+      background-color: transparent;
+
+      /* from legacy --button-disabled */
+      font-weight: normal;
+
+      /* from legacy --button-disabled */
+      border-color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      color: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      fill: var(--c-font-disabled);
+
+      /* from legacy --button-disabled */
+      cursor: default;
+
+      /* from legacy --button-disabled */
+      pointer-events: none;
+
+      /* from legacy --button-disabled */
+    }
+  }
+}
+
+/* style for the supplementary icon displayed by Button */
+.icon {
+  position: absolute;
+  top: var(--button-pad);
+  left: var(--button-pad);
+  height: calc(100% - 2 * var(--button-pad));
+}

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>
+  )
+}