@opentrons/components 0.1.6-alpha.8 → 0.1.7-alpha.0

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 styles from './styles.module.css'
+
+import type { ReactNode } from 'react'
+
+export interface ControlInfoProps {
+  children: 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 cx from 'classnames'
+
+import { OutlineButton } from '../buttons'
+import { LabeledControl } from './LabeledControl'
+import styles from './styles.module.css'
+
+import type { ReactNode } from 'react'
+import type { ButtonProps } from '../buttons'
+
+export interface LabeledButtonProps {
+  label: string
+  buttonProps: ButtonProps
+  children: 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,36 @@
+import cx from 'classnames'
+
+import { DeprecatedCheckboxField } from '../forms'
+import { LabeledControl } from './LabeledControl'
+import styles from './styles.module.css'
+
+import type { ChangeEventHandler, ReactNode } from 'react'
+
+export interface LabeledCheckboxProps {
+  label: string
+  name: string
+  value: boolean
+  className?: string
+  children: ReactNode
+  onChange: 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 { ControlInfo } from './ControlInfo'
+import styles from './styles.module.css'
+
+import type { ReactNode } from 'react'
+
+export interface LabeledControlProps {
+  label: string
+  control: ReactNode
+  children?: 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,26 @@
+import { StackedLabeledControl } from './StackedLabeledControl'
+import { RadioGroup } from '../forms'
+
+import type { ReactNode } from 'react'
+import type { RadioGroupProps } from '../forms'
+
+export interface LabeledRadioGroupProps extends RadioGroupProps {
+  label: string
+  children: 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/LabeledToggle.tsx

@@ -0,0 +1,35 @@
+import { LabeledControl } from './LabeledControl'
+import { ToggleButton } from './ToggleButton'
+import styles from './styles.module.css'
+
+import type { ReactNode } from 'react'
+
+export interface LabeledToggleProps {
+  label: string
+  toggledOn: boolean
+  disabled?: boolean
+  children?: 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 { ControlInfo } from './ControlInfo'
+import styles from './styles.module.css'
+
+import type { ReactNode } from 'react'
+
+export interface StackedLabeledControlProps {
+  label: string
+  control: ReactNode
+  children?: 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,9 @@
+// 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 './LabeledCheckbox'
+export * from './LabeledRadioGroup'