` with the `role` attribute set.
-
-```js
-
-
alert('click!')}
- >
- {"I'm a div!"}
-
-
-```
diff --git a/components/src/deck/Deck.md b/components/src/deck/Deck.md
deleted file mode 100644
index 2cbadc25eaf..00000000000
--- a/components/src/deck/Deck.md
+++ /dev/null
@@ -1,5 +0,0 @@
-Deck map:
-
-```js
-
-```
diff --git a/components/src/deck/Labware.md b/components/src/deck/Labware.md
deleted file mode 100644
index 6f32994139d..00000000000
--- a/components/src/deck/Labware.md
+++ /dev/null
@@ -1,23 +0,0 @@
-`96-flat` example
-
-```js
-
-
-```
-
-Tip rack example
-
-```js
-
-
-```
-
-Fallback plate for when the `labwareType` is not in `shared-data`
-
-```js
-
-
-```
diff --git a/components/src/deck/LabwareRender.md b/components/src/deck/LabwareRender.md
deleted file mode 100644
index 0064dd7a1d2..00000000000
--- a/components/src/deck/LabwareRender.md
+++ /dev/null
@@ -1,48 +0,0 @@
-Note that `LabwareRender` is in robot coordinates, we transform it to view it using `RobotWorkSpace`.
-
-**Normal Labware**
-
-```js
-import { RobotWorkSpace } from '@opentrons/components'
-import fixture_96_plate from '@opentrons/shared-data/labware/fixtures/2/fixture_96_plate'
-import fixture_24_tuberack from '@opentrons/shared-data/labware/fixtures/2/fixture_24_tuberack'
-import fixture_12_trough from '@opentrons/shared-data/labware/fixtures/2/fixture_12_trough'
-import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul'
-
-// Change this to view different labware fixtures
-let definition = fixture_96_plate
-
-;
- {() => (
-
-```
-
-**Tiprack**
-
-```js
-import { RobotWorkSpace } from '@opentrons/components'
-import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul'
-
-let definition = fixture_tiprack_300_ul
-
-;
- {() => (
-
-```
diff --git a/components/src/deck/LabwareRender.stories.tsx b/components/src/deck/LabwareRender.stories.tsx
new file mode 100644
index 00000000000..70ef1372a8c
--- /dev/null
+++ b/components/src/deck/LabwareRender.stories.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { RobotWorkSpace } from './RobotWorkSpace'
+import fixture_96_plate from '@opentrons/shared-data/labware/fixtures/2/fixture_96_plate.json'
+import fixture_24_tuberack from '@opentrons/shared-data/labware/fixtures/2/fixture_24_tuberack.json'
+import fixture_12_trough from '@opentrons/shared-data/labware/fixtures/2/fixture_12_trough.json'
+import fixture_tiprack_10_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_10_ul.json'
+import fixture_tiprack_300_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json'
+import fixture_tiprack_1000_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_1000_ul.json'
+
+import { LabwareRender } from './LabwareRender'
+
+import type { Story, Meta } from '@storybook/react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+const fixture96Plate = fixture_96_plate as LabwareDefinition2
+const fixture24Tuberack = fixture_24_tuberack as LabwareDefinition2
+const fixture12Trough = fixture_12_trough as LabwareDefinition2
+
+const fixtureTiprack10 = fixture_tiprack_10_ul as LabwareDefinition2
+const fixtureTiprack300 = fixture_tiprack_300_ul as LabwareDefinition2
+const fixtureTiprack1000 = fixture_tiprack_1000_ul as LabwareDefinition2
+
+const labwareDefMap: Record
= {
+ [fixture96Plate.metadata.displayName]: fixture96Plate,
+ [fixture24Tuberack.metadata.displayName]: fixture24Tuberack,
+ [fixture12Trough.metadata.displayName]: fixture12Trough,
+}
+
+const tipRackDefMap: Record = {
+ [fixtureTiprack10.metadata.displayName]: fixtureTiprack10,
+ [fixtureTiprack300.metadata.displayName]: fixtureTiprack300,
+ [fixtureTiprack1000.metadata.displayName]: fixtureTiprack1000,
+}
+
+export default {
+ title: 'Library/Molecules/Simulation/Labware',
+ decorators: [
+ Story => (
+
+ {() =>
+ ),
+ ],
+} as Meta
+
+const Template: Story> = ({
+ definition,
+ ...args
+}) => {
+ const displayName: unknown = definition
+ const allLabwareMap = { ...labwareDefMap, ...tipRackDefMap }
+ const resolvedDef: typeof definition = allLabwareMap[displayName as string]
+ return
-
-```
diff --git a/components/src/deck/Module.stories.tsx b/components/src/deck/Module.stories.tsx
new file mode 100644
index 00000000000..e5c448fa605
--- /dev/null
+++ b/components/src/deck/Module.stories.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react'
+import {
+ MAGNETIC_MODULE_V1,
+ MAGNETIC_MODULE_V2,
+ TEMPERATURE_MODULE_V1,
+ TEMPERATURE_MODULE_V2,
+ THERMOCYCLER_MODULE_V1,
+} from '@opentrons/shared-data'
+import { RobotWorkSpace } from './RobotWorkSpace'
+import { getDeckDefinitions } from './getDeckDefinitions'
+
+import { Module as ModuleComponent } from './Module'
+
+import type { RobotWorkSpaceRenderProps } from './types'
+import type { Story, Meta } from '@storybook/react'
+
+const moduleModels = [
+ MAGNETIC_MODULE_V1,
+ MAGNETIC_MODULE_V2,
+ TEMPERATURE_MODULE_V1,
+ TEMPERATURE_MODULE_V2,
+ THERMOCYCLER_MODULE_V1,
+]
+
+const displayModes = ['default', 'present', 'missing', 'info']
+
+export default {
+ title: 'Library/Molecules/Simulation/Module',
+} as Meta
+
+const Template: Story> = args => {
+ return (
+
+ {({ deckSlotsById }: RobotWorkSpaceRenderProps) => {
+ const slot = deckSlotsById['7']
+ return (
+
+
+ )
+ }}
+
+ )
+}
+export const Module = Template.bind({})
+Module.argTypes = {
+ model: {
+ control: {
+ type: 'select',
+ options: moduleModels,
+ },
+ defaultValue: moduleModels[0],
+ },
+ mode: {
+ control: {
+ type: 'select',
+ options: displayModes,
+ },
+ defaultValue: displayModes[0],
+ },
+}
diff --git a/components/src/deck/RobotWorkSpace.md b/components/src/deck/RobotWorkSpace.md
deleted file mode 100644
index b9b60235def..00000000000
--- a/components/src/deck/RobotWorkSpace.md
+++ /dev/null
@@ -1,40 +0,0 @@
-Robot Work Space Visualization:
-
-```js
-import { RobotCoordsText, RobotCoordsForeignDiv } from '@opentrons/components'
-import { getDeckDefinitions } from './getDeckDefinitions'
-const deckDef = getDeckDefinitions()['ot2_standard']
-const slotName = '5'
-const divSlot = '3'
-;
- {({ deckSlotsById }) => (
- <>
-
- Some Text
-
-
-
-
- )}
-
-```
diff --git a/components/src/deck/RobotWorkSpace.stories.tsx b/components/src/deck/RobotWorkSpace.stories.tsx
new file mode 100644
index 00000000000..7e0c2a212a9
--- /dev/null
+++ b/components/src/deck/RobotWorkSpace.stories.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react'
+import { RobotWorkSpace } from './RobotWorkSpace'
+import { RobotCoordsForeignDiv, Module } from '@opentrons/components'
+import { getDeckDefinitions } from './getDeckDefinitions'
+
+import type { Story, Meta } from '@storybook/react'
+
+const allDeckDefs = getDeckDefinitions()
+
+export default {
+ title: 'Library/Molecules/Simulation/Deck',
+ argTypes: {
+ deckDef: {
+ options: Object.keys(allDeckDefs),
+ control: {
+ type: 'select',
+ },
+ defaultValue: 'ot2_standard',
+ },
+ deckLayerBlocklist: {
+ options: Object.keys(allDeckDefs['ot2_standard'].layers),
+ control: {
+ type: 'check',
+ },
+ defaultValue: '',
+ },
+ },
+} as Meta
+
+const Template: Story> = ({
+ deckDef,
+ ...args
+}) => {
+ const deckLoadName: unknown = deckDef
+ const resolvedDef: typeof deckDef = allDeckDefs[deckLoadName as string]
+ return
+
+
+
+
+ )
+ },
+}
diff --git a/components/src/forms/CheckboxField.md b/components/src/forms/CheckboxField.md
deleted file mode 100644
index f8e547cd405..00000000000
--- a/components/src/forms/CheckboxField.md
+++ /dev/null
@@ -1,45 +0,0 @@
-```js
-const [state, setState] = React.useState({
- isChecked1: false,
- isChecked2: true,
-})
-;
- setState({ ...state, isChecked1: !state.isChecked1 })}
- value={state.isChecked1}
- />
- setState({ ...state, isChecked2: !state.isChecked2 })}
- value={state.isChecked2}
- error="error string example"
- />
-
-```
-
-Optional interminate prop for mixed values
-
-```js
-const [state, setState] = React.useState({
- isChecked: false,
- isIndeterminate: true,
-})
-;
-
- setState({
- ...state,
- isChecked: !state.isChecked,
- isIndeterminate: false,
- })
- }
- value={state.isChecked}
- isIndeterminate={state.isIndeterminate}
- />
-
-```
diff --git a/components/src/forms/CheckboxField.stories.tsx b/components/src/forms/CheckboxField.stories.tsx
new file mode 100644
index 00000000000..eeef1f4a0b6
--- /dev/null
+++ b/components/src/forms/CheckboxField.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { CheckboxField as CheckboxFieldComponent } from './CheckboxField'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Molecules/Forms/Checkbox Field',
+ component: CheckboxFieldComponent,
+} as Meta
+
+const Template: Story<
+ React.ComponentProps
+> = args => {
+ const [isChecked, setIsChecked] = React.useState(false)
+ return (
+ {
+ setIsChecked(!isChecked)
+ args.onChange(e)
+ }}
+ value={isChecked}
+ />
+ )
+}
+export const CheckboxField = Template.bind({})
+CheckboxField.args = {
+ label: 'Remember this setting?',
+ isIndeterminate: false,
+}
diff --git a/components/src/forms/CheckboxField.tsx b/components/src/forms/CheckboxField.tsx
index 4081ba287f8..f89648d76c4 100644
--- a/components/src/forms/CheckboxField.tsx
+++ b/components/src/forms/CheckboxField.tsx
@@ -4,6 +4,9 @@ import { Icon } from '../icons'
import styles from './forms.css'
+/**
+ * Checkbox Field Properties.
+ */
export interface CheckboxFieldProps {
/** change handler */
onChange: React.ChangeEventHandler
@@ -29,6 +32,9 @@ export interface CheckboxFieldProps {
isIndeterminate?: boolean
}
+/**
+ * Checkbox Form Field
+ */
export function CheckboxField(props: CheckboxFieldProps): JSX.Element {
const error = props.error != null
const outerClassName = cx(styles.form_field, props.className, {
diff --git a/components/src/forms/DropdownField.md b/components/src/forms/DropdownField.md
deleted file mode 100644
index 3cb40722876..00000000000
--- a/components/src/forms/DropdownField.md
+++ /dev/null
@@ -1,77 +0,0 @@
-`DropdownField` is similar to `SelectField`, but more normal. It uses a `` component and has an onChange/onBlur/etc that use DOM events.
-
-When `value` prop is truthy, the "blank" option isn't shown:
-
-```js
-const [state, setState] = React.useState({ selectedValue: 'rna' })
-; setState({ selectedValue: e.target.value })}
- value={state.selectedValue}
- options={[
- { name: 'DNA', value: 'dna' },
- { name: 'RNA', value: 'rna' },
- { name: 'Protein', value: 'protein' },
- ]}
-/>
-```
-
-When `value` is falsey, the "blank" option appears and is selected. You can't get back to blank state once you're selected something without external state manipulation. This is similar to how `RadioGroup` works.
-
-```js
-import { FlatButton } from '@opentrons/components'
-const [state, setState] = React.useState({ selectedValue: null })
-;
- setState({ selectedValue: e.target.value })}
- value={state.selectedValue}
- options={[
- { name: 'DNA', value: 'dna' },
- { name: 'RNA', value: 'rna' },
- { name: 'Protein', value: 'protein' },
- ]}
- />
- setState({ selectedValue: null })}>
- Click to Reset
-
-
-```
-
-To make a `DropdownField` always allow the user to select a blank value, add an option object to the `options` prop with a blank (empty string) value:
-
-```js
-const [state, setState] = React.useState({ selectedValue: '' })
-; setState({ selectedValue: e.target.value })}
- value={state.selectedValue}
- options={[
- { name: '', value: '' },
- { name: 'DNA', value: 'dna' },
- { name: 'RNA', value: 'rna' },
- { name: 'Protein', value: 'protein' },
- ]}
-/>
-```
-
-When `isIndeterminate` prop is present and true, prepopulate the dropdown with the '-' placeholder, disabled value. This value can not be selected or returned to once changed.
-
-```js
-import { FlatButton } from '@opentrons/components'
-const [state, setState] = React.useState({
- selectedValue: null,
- isIndeterminate: true,
-})
-;
-
- setState({ selectedValue: e.target.value, isIndeterminate: false })
- }
- value={state.selectedValue}
- options={[
- { name: 'DNA', value: 'dna' },
- { name: 'RNA', value: 'rna' },
- { name: 'Protein', value: 'protein' },
- ]}
- isIndeterminate={state.isIndeterminate}
- />
-
-```
diff --git a/components/src/forms/DropdownField.stories.tsx b/components/src/forms/DropdownField.stories.tsx
new file mode 100644
index 00000000000..fbb849caa9e
--- /dev/null
+++ b/components/src/forms/DropdownField.stories.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react'
+
+import { DropdownField as DropdownFieldComponent } from './DropdownField'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Molecules/Forms/Dropdown Field',
+ argTypes: { onChange: { action: 'clicked' } },
+} as Meta
+
+const Template: Story<
+ React.ComponentProps
+> = args => {
+ const [selectedValue, setSelectedValue] = React.useState(null)
+ return (
+ {
+ setSelectedValue(e.target.value)
+ args.onChange(e)
+ }}
+ value={selectedValue}
+ />
+ )
+}
+export const DropdownField = Template.bind({})
+DropdownField.parameters = {
+ docs: {
+ description: {
+ component:
+ '`DropdownField` is similar to `SelectField`, but more normal. It uses a `` component and has an onChange/onBlur/etc that use DOM events. When `value` prop is truthy, the "blank" option isn\'t shown. When `value` is falsey, the "blank" option appears and is selected. You can\'t get back to blank state once you\'re selected something without external state manipulation. This is similar to how `RadioGroup` works. In order to always allow the user to select a blank value, add an option object to the `options` prop with a blank (empty string) value.',
+ },
+ },
+}
+DropdownField.args = {
+ options: [
+ { name: '', value: '' },
+ { name: 'DNA', value: 'dna' },
+ { name: 'RNA', value: 'rna' },
+ { name: 'Protein', value: 'protein' },
+ ],
+ isIndeterminate: false,
+}
diff --git a/components/src/forms/FormGroup.md b/components/src/forms/FormGroup.md
deleted file mode 100644
index dc6ac9b5056..00000000000
--- a/components/src/forms/FormGroup.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```js
-import { CheckboxField, InputField } from '@opentrons/components'
-const [state, setState] = React.useState({ checkbox1: true, inputfield1: '' })
-
-function getError(state) {
- return state.inputfield1 === '' || parseFloat(state.inputfield1) > 0
- ? null
- : 'volume must be a positive number'
-}
-
-;
- setState({ ...state, checkbox1: !state.checkbox1 })}
- value={state.checkbox1}
- />
- setState({ ...state, inputfield1: e.target.value })}
- value={state.inputfield1}
- units="μL"
- error={getError(state)}
- />
-
-```
diff --git a/components/src/forms/FormGroup.stories.tsx b/components/src/forms/FormGroup.stories.tsx
new file mode 100644
index 00000000000..dba323fe9de
--- /dev/null
+++ b/components/src/forms/FormGroup.stories.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+import { FormGroup as FormGroupComponent } from './FormGroup'
+import { CheckboxField } from './CheckboxField.stories'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Molecules/Forms/Form Group',
+ argTypes: { onChange: { action: 'clicked' } },
+} as Meta
+
+const Template: Story<
+ React.ComponentProps
+> = args => {}} key="first" label="first field" />,
+ {}} key="second" label="second field" />,
+ ],
+}
diff --git a/components/src/forms/InputField.md b/components/src/forms/InputField.md
deleted file mode 100644
index e3514cd73aa..00000000000
--- a/components/src/forms/InputField.md
+++ /dev/null
@@ -1,77 +0,0 @@
-```js
-const [state, setState] = React.useState({ inputValue: '' })
-
-function handleChange(e) {
- setState({ inputValue: e.target.value })
-}
-
-function getError(state) {
- return state.inputValue.length > 12 ? 'Too many characters' : undefined
-}
-
-;> = ({
+ value,
+ onChange,
+ ...args
+}) => {
+ const [controlledValue, setControlledValue] = React.useState('')
+ const secondaryCaption = controlledValue.length + '/12'
+ const error = controlledValue.length > 12 ? 'Too many characters' : undefined
+ return (
+
+ setControlledValue(e.target.value)}
+ />
+
+ )
+}
+export const InputField = Template.bind({})
+InputField.args = {
+ label: 'Input field',
+ placeholder: 'Placeholder Text',
+ units: 'μL',
+ caption: 'caption here',
+ isIndeterminate: false,
+}
diff --git a/components/src/forms/RadioGroup.md b/components/src/forms/RadioGroup.md
deleted file mode 100644
index cc294201008..00000000000
--- a/components/src/forms/RadioGroup.md
+++ /dev/null
@@ -1,28 +0,0 @@
-```js
-const [state, setState] = React.useState({ selectedValue: 'chocolate' })
-; setState({ selectedValue: e.target.value })}
-/>
-```
-
-Inline
-
-```js
-const [state, setState] = React.useState({ selectedValue: 'chocolate' })
-; setState({ selectedValue: e.target.value })}
-/>
-```
diff --git a/components/src/forms/RadioGroup.stories.tsx b/components/src/forms/RadioGroup.stories.tsx
new file mode 100644
index 00000000000..0694c2bd89c
--- /dev/null
+++ b/components/src/forms/RadioGroup.stories.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Box, SIZE_6 } from '@opentrons/components'
+
+import { RadioGroup as RadioGroupComponent } from './RadioGroup'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Molecules/Forms/Radio Group',
+} as Meta
+
+const OPTIONS = [
+ { name: 'Hazelnut', value: 'hazelnut' },
+ { name: 'Chocolate', value: 'chocolate' },
+ { name: 'Ginger', value: 'ginger' },
+]
+
+const Template: Story> = ({
+ value,
+ onChange,
+ ...args
+}) => {
+ const [controlledValue, setControlledValue] = React.useState(
+ args.options[0].value
+ )
+ return (
+
+ setControlledValue(e.target.value)}
+ />
+
+ )
+}
+export const RadioGroup = Template.bind({})
+RadioGroup.args = {
+ options: OPTIONS,
+ inline: false,
+}
diff --git a/components/src/forms/Select.css b/components/src/forms/Select.css
index 018d3dc8295..0f8babc440b 100644
--- a/components/src/forms/Select.css
+++ b/components/src/forms/Select.css
@@ -1,5 +1,12 @@
/* stylelint-disable selector-class-pattern */
-@import "..";
+@import '..';
+
+/* NOTE(mc, 2021-04-27): this class only used by storybook */
+.example_select_override {
+ & :global(.ot_select__control) {
+ background-color: blue;
+ }
+}
.select {
position: relative;
diff --git a/components/src/forms/Select.md b/components/src/forms/Select.md
deleted file mode 100644
index f9ea252a048..00000000000
--- a/components/src/forms/Select.md
+++ /dev/null
@@ -1,87 +0,0 @@
-Thin wrapper around `react-select` to apply our Opentrons-specific styles. All props are passed directly to [`react-select`](https://react-select.com/props) except for `styles`, `components`, and `classNamePrefix`. The `className` prop appends to the `className` we pass `react-select`. Those props are not passed directly because they provide the base styling of the component
-
-```js
-
- context === 'menu' && option.value === 'bar' ? (
- {option.label}
- ) : (
- option.label
- )
- }
-/>
-```
-
-To override any styling, we use [`react-select`'s BEM](https://react-select.com/styles#using-classnames) class names with our specific prefix, which is `ot_select`. See `SelectField` for a specific example, where the background color of the `Control` element is modified if the field has an error
-
-```css
-.my_class_name {
- & :global(.ot_select__control) {
- background-color: blue;
- }
-}
-```
-
-```js static
-> = args => (
+ {option.label}
+ ) : (
+ option.label
+ ),
+}
+
+export const StyleOverride = Template.bind({})
+StyleOverride.parameters = {
+ docs: {
+ description: {
+ component:
+ "To override any styling, we use [`react-select`'s BEM](https://react-select.com/styles#using-classnames) class names with our specific prefix, which is `ot_select`. See `SelectField` for a specific example, where the background color of the `Control` element is modified if the field has an error",
+ },
+ },
+}
+StyleOverride.args = {
+ className: styles.example_select_override,
+ options: [
+ { label: 'DNA', value: 'dna' },
+ { label: 'RNA', value: 'rna' },
+ { label: 'Protein', value: 'protein' },
+ ],
+}
diff --git a/components/src/forms/SelectField.md b/components/src/forms/SelectField.md
deleted file mode 100644
index 3f3b525d5f8..00000000000
--- a/components/src/forms/SelectField.md
+++ /dev/null
@@ -1,35 +0,0 @@
-This component is a wrapper around our `Select` component optimized for usage with `Formik`.
-The `onChange` and `onBlur` events of `Select` component are provided by `react-select`; they
-are not normal DOM events. To make the difference clear, `SelectField` instead has
-`onValueChange` and `onLoseFocus` that are passed the `name` of the field and the `value` of
-the selected option.
-
-To use `SelectField` with `Formik`, pass `formikProps.setFieldValue` to `onValueChange` and `formikProps.setFieldTouched` to `onLoseFocus`.
-
-```js
-const [state, setState] = React.useState({ selectedValue: null })
-; setState({ selectedValue: value })}
- value={state.selectedValue}
- caption={`Selected value: ${state.selectedValue}`}
- error={state.selectedValue === 'dna' ? 'DNA IS NOT ALLOWED!' : null}
- options={[
- { label: 'DNA', value: 'dna' },
- { label: 'RNA', value: 'rna' },
- {
- label: 'Protein',
- options: [
- { label: 'Hemoglobin', value: 'hemoglobin' },
- { label: 'Actin', value: 'actin' },
- ],
- },
- ]}
- formatOptionLabel={option =>
- option.value === 'dna' ? (
- {option.label}
- ) : (
- option.label
- )
- }
-/>
-```
diff --git a/components/src/forms/ToggleField.md b/components/src/forms/ToggleField.md
deleted file mode 100644
index 997c1d58adc..00000000000
--- a/components/src/forms/ToggleField.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```js
-const [state, setState] = React.useState({
- isChecked: false,
-})
-;
- setState({ ...state, isChecked: !state.isChecked })}
- value={state.isChecked}
- />
-
-```
diff --git a/components/src/forms/ToggleField.stories.tsx b/components/src/forms/ToggleField.stories.tsx
new file mode 100644
index 00000000000..f58edcf3a96
--- /dev/null
+++ b/components/src/forms/ToggleField.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { ToggleField as ToggleFieldComponent } from './ToggleField'
+
+import type { Story, Meta } from '@storybook/react'
+
+const Template: Story<
+ React.ComponentProps
+> = args => {
+ const [isOn, setIsOn] = React.useState(false)
+ return (
+ {
+ setIsOn(!isOn)
+ args.onChange(e)
+ }}
+ value={isOn}
+ />
+ )
+}
+
+export const ToggleField = Template.bind({})
+ToggleField.args = {
+ label: 'Toggle Me',
+}
+
+export default {
+ title: 'Library/Molecules/Forms/Toggle Field',
+ component: ToggleField,
+} as Meta
diff --git a/components/src/forms/__tests__/SelectField.test.tsx b/components/src/forms/__tests__/SelectField.test.tsx
index 9ef8bbd8b82..63501bbba10 100644
--- a/components/src/forms/__tests__/SelectField.test.tsx
+++ b/components/src/forms/__tests__/SelectField.test.tsx
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'
import { SelectField } from '../SelectField'
import { Select } from '../Select'
-import type { SelectOption } from '../Select'
+import type { SelectOption, SelectProps } from '../Select'
describe('SelectField', () => {
it('renders a Select', () => {
@@ -48,7 +48,9 @@ describe('SelectField', () => {
disabled={disabled}
placeholder={placeholder}
menuPosition={menuPosition}
- formatOptionLabel={formatOptionLabel}
+ formatOptionLabel={
+ formatOptionLabel as SelectProps['formatOptionLabel']
+ }
className={className}
/>
)
diff --git a/components/src/icons/Icon.md b/components/src/icons/Icon.md
deleted file mode 100644
index e4ddb487f69..00000000000
--- a/components/src/icons/Icon.md
+++ /dev/null
@@ -1,26 +0,0 @@
-All available icons:
-
-```js
-import { SIZE_3 } from '@opentrons/components'
-import { ICON_DATA_BY_NAME } from './icon-data'
-;
- {Object.keys(ICON_DATA_BY_NAME)
- .sort()
- .map(iconName => (
-
- {iconName}
-
- ))}
-
-```
-
-Spin any icon!
-
-```js
-import { SIZE_3 } from '@opentrons/components'
-;
-
-```
diff --git a/components/src/icons/Icon.stories.tsx b/components/src/icons/Icon.stories.tsx
new file mode 100644
index 00000000000..1be5df8581c
--- /dev/null
+++ b/components/src/icons/Icon.stories.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+import { Box, SIZE_3 } from '@opentrons/components'
+import { ICON_DATA_BY_NAME } from './icon-data'
+import { Icon as IconComponent } from './Icon'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Atoms/Icon',
+ argTypes: {
+ name: {
+ control: {
+ type: 'select',
+ options: Object.keys(ICON_DATA_BY_NAME),
+ },
+ defaultValue: 'alert',
+ },
+ },
+ decorators: [
+ Story => (
+
+
+ ),
+ ],
+} as Meta
+
+const Template: Story> = args => {
+ return
+> = ({ pipetteSpecs, ...args }) => (
+
+> = ({ left, right, ...args }) => (
+ {
- console.log(pipetteName)
- setState({ pipetteName })
- }}
- pipetteName={state.pipetteName}
- nameBlocklist={['p20_multi_gen2', 'p300_multi_gen2']}
-/>
-```
-
-Allow "None" as the default option
-
-```js
-const [state, setState] = React.useState({ pipetteName: null })
-; {
- console.log(pipetteName)
- setState({ pipetteName })
- }}
- pipetteName={state.pipetteName}
- enableNoneOption
-/>
-```
diff --git a/components/src/instrument/PipetteSelect.stories.tsx b/components/src/instrument/PipetteSelect.stories.tsx
new file mode 100644
index 00000000000..6ba094bfc9a
--- /dev/null
+++ b/components/src/instrument/PipetteSelect.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { PipetteSelect as PipetteSelectComponent } from './PipetteSelect'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Organisms/Pipette Select',
+} as Meta
+
+const Template: Story> = ({
+ pipetteName,
+ ...args
+}) => {
+ const [pipetteNameControlled, setPipetteNameControlled] = React.useState(
+ pipetteName
+ )
+ const handleChange = (pipName: string): unknown =>
+ setPipetteNameControlled(pipName)
+ return (
+
- {({ ref }) => (
-
- You clicked outside this box {state.timesClickedOutside} times
-
- )}
-
-```
diff --git a/components/src/interaction-enhancers/HandleKeypress.md b/components/src/interaction-enhancers/HandleKeypress.md
deleted file mode 100644
index 7dbb18d8170..00000000000
--- a/components/src/interaction-enhancers/HandleKeypress.md
+++ /dev/null
@@ -1,24 +0,0 @@
-Use `` to register listeners for keypress events:
-
-```js
-const [state, setState] = React.useState({ key: '' })
-; setState({ key: 'q' }) },
- { key: 'w', onPress: () => setState({ key: 'w' }) },
- { key: 'e', onPress: () => setState({ key: 'e' }) },
- {
- key: 'ArrowLeft',
- shiftKey: false,
- onPress: () => setState({ key: 'left' }),
- },
- {
- key: 'ArrowRight',
- shiftKey: true,
- onPress: () => setState({ key: 'shift + right' }),
- },
- ]}
->
- Key: {state.key}
-
-```
diff --git a/components/src/lists/CollapsibleItem.tsx b/components/src/lists/CollapsibleItem.tsx
index 02b36f47865..08748daf4f9 100644
--- a/components/src/lists/CollapsibleItem.tsx
+++ b/components/src/lists/CollapsibleItem.tsx
@@ -5,6 +5,9 @@ import cx from 'classnames'
import styles from './lists.css'
import { Icon } from '../icons'
+// TODO(bc, 2021-03-31): this is only used in on place
+// reconsider whether this belongs in components library
+
export interface CollapsibleItemProps {
/** header */
header?: string
diff --git a/components/src/lists/ListItem.md b/components/src/lists/ListItem.md
deleted file mode 100644
index 87afea36e42..00000000000
--- a/components/src/lists/ListItem.md
+++ /dev/null
@@ -1,29 +0,0 @@
-ListItem example:
-
-```js
-import { TitledList } from '@opentrons/components'
-;
- Plain item
- This item has an icon
- alert('clicked!')}>This item is clickable
- alert('clicked!')} isDisabled>
- This clickable item is disabled
-
-
-```
-
-If the ListItem is passed a `url` prop, it will wrap its children in a `react-router-dom` `NavLink`:
-
-```js
-// used here for example purposes
-import { StaticRouter } from 'react-router-dom'
-import { TitledList } from '@opentrons/components'
-;
-
- Go somewhere
-
- Cannot go here
-
-
-
-```
diff --git a/components/src/lists/ListItem.tsx b/components/src/lists/ListItem.tsx
index 91c49635b0a..7a2a69ffc55 100644
--- a/components/src/lists/ListItem.tsx
+++ b/components/src/lists/ListItem.tsx
@@ -7,6 +7,8 @@ import styles from './lists.css'
import { Icon } from '../icons'
import type { IconName } from '../icons'
+// TODO(bc, 2021-03-31): this is only used in the app
+// reconsider whether this belongs in components library
interface ListItemProps {
/** click handler */
onClick?: (event: React.SyntheticEvent) => unknown
diff --git a/components/src/lists/SidePanelGroup.md b/components/src/lists/SidePanelGroup.md
deleted file mode 100644
index db0abda915a..00000000000
--- a/components/src/lists/SidePanelGroup.md
+++ /dev/null
@@ -1,37 +0,0 @@
-Basic usage:
-
-```js
-import { TitledList, ListItem } from '@opentrons/components'
-;
-
- Something 1
- Something 2
-
-
-
- Something 1
- Something 2
-
-
-```
-
-The entire SidePanelGroup may be disabled with the `disabled` prop. Pointer events will be disabled and all children will be lightened.
-
-```js
-import { TitledList, ListItem } from '@opentrons/components'
-;
-
- Something 1
- Something 2
-
-
-
- Something 1
- Something 2
-
-
-```
diff --git a/components/src/lists/SidePanelGroup.tsx b/components/src/lists/SidePanelGroup.tsx
index cabbb6e7ca8..67dfc882ecf 100644
--- a/components/src/lists/SidePanelGroup.tsx
+++ b/components/src/lists/SidePanelGroup.tsx
@@ -7,6 +7,8 @@ import { Icon } from '../icons'
import type { IconName } from '../icons'
+// TODO(bc, 2021-03-31): this component is only used in one place
+// reconsider whether it belongs in components library
export interface SidePanelGroupProps {
/** text of title */
title?: string
diff --git a/components/src/lists/TitledList.md b/components/src/lists/TitledList.md
deleted file mode 100644
index 944fa6d3382..00000000000
--- a/components/src/lists/TitledList.md
+++ /dev/null
@@ -1,59 +0,0 @@
-Basic usage:
-
-```js
-import { ListItem } from '@opentrons/components'
-;
- Something 1
- Something 2
-
-```
-
-Using the onClick and selected props:
-
-```js
-import { ListItem } from '@opentrons/components'
-const [state, setState] = React.useState({ selected: false })
-; setState({ selected: !state.selected })}
- selected={state.selected}
->
- Something 1
- Something 2
-
-```
-
-If `onCollapseToggle` prop is given a function, the TitledList will be collapsible, dictated by the `collapsed` prop. `onCollapseToggle` will only fire on caret clicks, not title clicks:
-
-```js
-import { ListItem } from '@opentrons/components'
-const [state, setState] = React.useState({ selected: false, collapsed: false })
-; setState({ selected: !state.selected })}
- onCollapseToggle={() => setState({ collapsed: !state.collapsed })}
- selected={state.selected}
- collapsed={state.collapsed}
->
- Something 1
- Something 2
-
-```
-
-The entire TitledList may be disabled with the `disabled` prop. The `selected` prop will be ignored while the `collapsed` prop will be respected. `onClick` and `onCollapseToggle` will not fire:
-
-import { ListItem } from '@opentrons/components'
-
-```js
-import { ListItem } from '@opentrons/components'
-; alert("this won't happen")}
- onCollapseToggle={() => alert("this won't happen")}
- selected
- disabled
->
- Something 1
- Something 2
-
-```
diff --git a/components/src/lists/TitledList.tsx b/components/src/lists/TitledList.tsx
index 3e4a95c9829..4820993e156 100644
--- a/components/src/lists/TitledList.tsx
+++ b/components/src/lists/TitledList.tsx
@@ -6,6 +6,9 @@ import styles from './lists.css'
import { Icon } from '../icons'
import type { IconName, IconProps } from '../icons'
+// TODO(bc, 2021-03-31): reconsider whether this belongs in components library
+// it is bloated with application specific functionality
+
export interface TitledListProps {
/** id attribute */
id?: string
diff --git a/components/src/modals/AlertModal.md b/components/src/modals/AlertModal.md
deleted file mode 100644
index 3b7a7acb5f8..00000000000
--- a/components/src/modals/AlertModal.md
+++ /dev/null
@@ -1,124 +0,0 @@
-AlertModal example:
-
-```js
-import { FlatButton } from '@opentrons/components'
-
-const [state, setState] = React.useState({ alert: 'foo' })
-const alertContents = {
- foo:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
- bar:
- 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-}
-;
-
setState({ alert: 'foo' })}>Alert foo
- {state.alert && (
-
setState({ alert: '' })}
- buttons={[
- { children: 'foo', onClick: () => setState({ alert: 'foo' }) },
- { children: 'bar', onClick: () => setState({ alert: 'bar' }) },
- { children: 'close', onClick: () => setState({ alert: '' }) },
- ]}
- restrictOuterScroll={false}
- >
- {alertContents[state.alert]}
-
- )}
-
-
setState({ alert: 'foo' })}>Alert foo
- {state.alert && (
-
setState({ alert: '' })}
- iconName="wifi"
- buttons={[
- { children: 'foo', onClick: () => setState({ alert: 'foo' }) },
- { children: 'bar', onClick: () => setState({ alert: 'bar' }) },
- { children: 'close', onClick: () => setState({ alert: '' }) },
- ]}
- restrictOuterScroll={false}
- >
- {alertContents[state.alert]}
-
- )}
-
-
setState({ alert: 'foo' })}>Alert foo
- {state.alert && (
-
setState({ alert: '' })}
- buttons={[
- { children: 'foo', onClick: () => setState({ alert: 'foo' }) },
- { children: 'bar', onClick: () => setState({ alert: 'bar' }) },
- { children: 'close', onClick: () => setState({ alert: '' }) },
- ]}
- alertOverlay
- restrictOuterScroll={false}
- >
- {alertContents[state.alert]}
-
- )}
-
-
setState({ alert: 'foo' })}>Alert foo
- {state.alert && (
-
setState({ alert: '' })}
- buttons={[
- { children: 'foo', onClick: () => setState({ alert: 'foo' }) },
- { children: 'bar', onClick: () => setState({ alert: 'bar' }) },
- { children: 'close', onClick: () => setState({ alert: '' }) },
- ]}
- restrictOuterScroll={false}
- >
- {alertContents[state.alert]}
-
- )}
-
-
-
- OK
-
- }
- >
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua.
-
-
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
- dolore eu fugiat nulla pariatur
-
-
-
-```
diff --git a/components/src/modals/ContinueModal.md b/components/src/modals/ContinueModal.md
deleted file mode 100644
index 33ffb192982..00000000000
--- a/components/src/modals/ContinueModal.md
+++ /dev/null
@@ -1,26 +0,0 @@
-Basic usage:
-
-```js
-const [state, setState] = React.useState({ continue: null })
-;
- {state.continue == null && (
-
setState({ continue: 'cancel' })}
- onContinueClick={() => setState({ continue: 'continue' })}
- >
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
- velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
- est laborum.
-
- )}
-
- Decided to:
- {state.continue}
-
-
setState({ continue: null })}>Do a thing
-
- {state.isOpen && (
- setState({ isOpen: false })}
- restrictOuterScroll={false}
- >
- Modal contents
-
- )}
- setState({ isOpen: true })}>Open modal
-
-```
-
-Optional heading (click overlay to close):
-
-```js
-const [state, setState] = React.useState({ isOpen: true })
-;
- {state.isOpen && (
- setState({ isOpen: false })}
- heading={'Optional styled heading'}
- >
- Modal contents
-
- )}
- setState({ isOpen: true })}>Open modal
-
-```
diff --git a/components/src/modals/Modal.stories.tsx b/components/src/modals/Modal.stories.tsx
new file mode 100644
index 00000000000..28fcb35bd36
--- /dev/null
+++ b/components/src/modals/Modal.stories.tsx
@@ -0,0 +1,112 @@
+import * as React from 'react'
+import {
+ AlertModal,
+ BaseModal,
+ ContinueModal,
+ Overlay,
+ SpinnerModal,
+ SpinnerModalPage,
+} from './'
+import {
+ Box,
+ Text,
+ Flex,
+ SecondaryBtn,
+ Icon,
+ JUSTIFY_FLEX_END,
+ DISPLAY_FLEX,
+ ALIGN_CENTER,
+ FONT_SIZE_HEADER,
+ FONT_WEIGHT_REGULAR,
+ SPACING_2,
+} from '@opentrons/components'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Molecules/Modal',
+ decorators: [
+ Story => (
+
+
+ ),
+ ],
+} as Meta
+
+const BaseTemplate: Story> = args => (
+
+
+ ),
+ children: (
+ <>
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+ ut aliquip ex ea commodo consequat.
+
+
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+ dolore eu fugiat nulla pariatur
+
+
+ ),
+ footer: (
+
+ OK
+
+ ),
+}
+
+const AlertTemplate: Story> = args => (
+
+> = args =>
+> = args =>
+> = args => > = args => (
+
-
alert('back button clicked'),
- },
- }}
- heading="Optional styled heading"
- >
- Click the back button for an back action.
-
-
` to create a custom modal.
-
-_Note_: the CSS rules on the parent in the below example are necessary and can be applied with:
-
-```css static
-@import '@opentrons/components';
-
-.custom_modal {
- @apply --modal;
-}
-```
-
-```js
-import { FlatButton } from '@opentrons/components'
-const [state, setState] = React.useState({ covered: false })
-;
-
setState({ covered: true })}>
- Take cover
-
-
- {state.covered && (
-
-
setState({ covered: false })} />
- Click to close.
-
- )}
-
-
-```
diff --git a/components/src/modals/SpinnerModalPage.md b/components/src/modals/SpinnerModalPage.md
deleted file mode 100644
index cdf00a99155..00000000000
--- a/components/src/modals/SpinnerModalPage.md
+++ /dev/null
@@ -1,16 +0,0 @@
-Basic usage:
-
-```js
-
-
-```
diff --git a/components/src/nav/SidePanel.stories.tsx b/components/src/nav/SidePanel.stories.tsx
new file mode 100644
index 00000000000..271b7a67e59
--- /dev/null
+++ b/components/src/nav/SidePanel.stories.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SidePanel as SidePanelComponent } from './SidePanel'
+import { Text, Flex, JUSTIFY_CENTER, ALIGN_CENTER } from '@opentrons/components'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Molecules/Side Panel',
+ decorators: [
+ Story => (
+
+
+ ),
+ ],
+} as Meta
+
+const Template: Story<
+ React.ComponentProps
+> = args =>
+ Side Panel Children
+
+ ),
+}
diff --git a/components/src/primitives/Box.md b/components/src/primitives/Box.md
deleted file mode 100644
index 8effd926d1f..00000000000
--- a/components/src/primitives/Box.md
+++ /dev/null
@@ -1,28 +0,0 @@
-Simple Box primitive. Renders a `div` by default and accepts all primitive styling props.
-
-```js
-import {
- Icon,
- C_DARK_GRAY,
- C_WHITE,
- SPACING_2,
- SPACING_3,
-} from '@opentrons/components'
-;
- hello world
-
-```
-
-`` is a [StyledComponent](https://styled-components.com/docs/basics#getting-started), and accepts an `as` prop to render as any other DOM element or React component.
-
-```js
-
- hello
- world
-
-```
diff --git a/components/src/primitives/Box.stories.tsx b/components/src/primitives/Box.stories.tsx
new file mode 100644
index 00000000000..3d322842a0a
--- /dev/null
+++ b/components/src/primitives/Box.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { Box as BoxComponent } from './Box'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Atoms/Box',
+} as Meta
+
+const Template: Story> = args => (
+ ` by default and accepts all primitive styling props.
-
-```js
-<>
- console.log('hello world')}>click me
-
- but not me
-
-
-```
-
-We have different styled variants of buttons available:
-
-```js
-import {
- Box,
- PrimaryBtn,
- SecondaryBtn,
- LightSecondaryBtn,
- TertiaryBtn,
- C_DARK_GRAY,
- SPACING_2,
- SPACING_3,
-} from '@opentrons/components'
-;<>
-
- primary
-
- not clickable
-
-
-
- secondary
-
- not clickable
-
-
-
- light secondary
-
- not clickable
-
-
-
- tertiary
-
- not clickable
-
-
-
-```
diff --git a/components/src/primitives/Btn.stories.tsx b/components/src/primitives/Btn.stories.tsx
new file mode 100644
index 00000000000..ed431b1ab3a
--- /dev/null
+++ b/components/src/primitives/Btn.stories.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { PrimaryBtn, SecondaryBtn, LightSecondaryBtn, TertiaryBtn } from './Btn'
+import { Box } from './Box'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Atoms/Btn',
+ argTypes: { onClick: { action: 'clicked' } },
+} as Meta
+
+const PrimaryTemplate: Story<
+ React.ComponentProps
+> = args =>
+> = args =>
+> = args =>
+
+ ),
+]
+LightSecondary.args = {
+ children: 'Cancel',
+ title: 'secondary button title',
+}
+
+const TertiaryTemplate: Story<
+ React.ComponentProps
+> = args =>
+
+ ),
+]
+export const Tertiary = TertiaryTemplate.bind({})
+Tertiary.args = {
+ children: 'Perform Side-Effect',
+ title: 'tertiary button title',
+}
diff --git a/components/src/primitives/Btn.tsx b/components/src/primitives/Btn.tsx
index 8c3f7d11d40..d4f663a2874 100644
--- a/components/src/primitives/Btn.tsx
+++ b/components/src/primitives/Btn.tsx
@@ -61,7 +61,6 @@ export const Btn: BtnComponent = styled.button
*
* @component
*/
-// $FlowFixMe(mc, 2020-06-19): styled type definition expects PrimitiveComponent, but it doesn't work in usage
export const PrimaryBtn: BtnComponent = styled(Btn)`
${BUTTON_VARIANT_STYLE}
background-color: ${Styles.C_DARK_GRAY};
@@ -92,7 +91,6 @@ export const PrimaryBtn: BtnComponent = styled(Btn)`
*
* @component
*/
-// $FlowFixMe(mc, 2020-06-19): styled type definition expects PrimitiveComponent, but it doesn't work in usage
export const SecondaryBtn: BtnComponent = styled(Btn)`
${BUTTON_VARIANT_STYLE}
background-color: ${Styles.C_WHITE};
@@ -122,7 +120,6 @@ export const SecondaryBtn: BtnComponent = styled(Btn)`
*
* @component
*/
-// $FlowFixMe(mc, 2020-06-19): styled type definition expects PrimitiveComponent, but it doesn't work in usage
export const LightSecondaryBtn: BtnComponent = styled(SecondaryBtn)`
background-color: ${Styles.C_TRANSPARENT};
color: ${Styles.C_WHITE};
@@ -150,7 +147,6 @@ export const LightSecondaryBtn: BtnComponent = styled(SecondaryBtn)`
*
* @component
*/
-// $FlowFixMe(mc, 2020-06-19): styled type definition expects PrimitiveComponent, but it doesn't work in usage
export const TertiaryBtn: BtnComponent = styled(LightSecondaryBtn)`
border-width: 0;
`
diff --git a/components/src/primitives/Flex.md b/components/src/primitives/Flex.md
deleted file mode 100644
index 4682ad34a28..00000000000
--- a/components/src/primitives/Flex.md
+++ /dev/null
@@ -1,23 +0,0 @@
-Flexbox primitive. Renders a `div` by default with `display: flex;` and accepts all primitive styling props.
-
-```js
-import {
- Icon,
- ALIGN_CENTER,
- JUSTIFY_CENTER,
- SIZE_4,
-} from '@opentrons/components'
-;
-
-```
-
-`` is a [StyledComponent](https://styled-components.com/docs/basics#getting-started), and accepts an `as` prop to render as any other DOM element or React component.
-
-```js
-import { DIRECTION_COLUMN } from '@opentrons/components'
-;
- hello
- world
-
-```
diff --git a/components/src/primitives/Flex.stories.tsx b/components/src/primitives/Flex.stories.tsx
new file mode 100644
index 00000000000..f9773b5fc55
--- /dev/null
+++ b/components/src/primitives/Flex.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { Flex as FlexComponent } from './Flex'
+import {
+ Box,
+ DIRECTION_COLUMN,
+ JUSTIFY_SPACE_AROUND,
+} from '@opentrons/components'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Atoms/Flex',
+} as Meta
+
+const Template: Story> = args => (
+
+ This is a flex child
+ ,
+
+ This is a flex child
+ ,
+ ],
+ flexDirection: DIRECTION_COLUMN,
+ justifyContent: JUSTIFY_SPACE_AROUND,
+ backgroundColor: 'grey',
+ border: '1px solid black',
+ padding: '1rem',
+ maxWidth: '20rem',
+ height: '10rem',
+}
diff --git a/components/src/primitives/Link.md b/components/src/primitives/Link.md
deleted file mode 100644
index a2718720e98..00000000000
--- a/components/src/primitives/Link.md
+++ /dev/null
@@ -1,32 +0,0 @@
-Anchor link primitive. Renders an `` by default with `text-decoration: none;` and accepts all primitive styling props.
-
-```js
-> = args => (
+ > = args => (
+ hello world
-```
-
-`` is a [StyledComponent](https://styled-components.com/docs/basics#getting-started), and accepts an `as` prop to render as any other DOM element or React component.
-
-```js
-import {
- FONT_SIZE_HEADER,
- LINE_HEIGHT_TITLE,
- FONT_WEIGHT_REGULAR,
-} from '@opentrons/components'
-;
- hello h3
-
-```
diff --git a/components/src/primitives/Text.stories.tsx b/components/src/primitives/Text.stories.tsx
new file mode 100644
index 00000000000..b6a117e1e72
--- /dev/null
+++ b/components/src/primitives/Text.stories.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { Text as TextComponent } from './Text'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Atoms/Text',
+} as Meta
+
+const Template: Story> = args => (
+
-
-```
-
-Basic usage multiple occupied slots
-
-```js
-
-
-```
-
-Optional collision warning notification
-
-```js
-
-
-```
-
-Optional error styling
-
-```js
-
-
-```
diff --git a/components/src/slotmap/SlotMap.tsx b/components/src/slotmap/SlotMap.tsx
index c874f0c049b..7f6ffd2738d 100644
--- a/components/src/slotmap/SlotMap.tsx
+++ b/components/src/slotmap/SlotMap.tsx
@@ -3,6 +3,9 @@ import cx from 'classnames'
import { Icon } from '../icons'
import styles from './styles.css'
+// TODO(bc, 2021-03-29): this component is only used in PD
+// reconsider whether it belongs in components library
+
export interface SlotMapProps {
/** Slot(s) to highlight */
occupiedSlots: string[]
diff --git a/components/src/structure/Card.md b/components/src/structure/Card.md
deleted file mode 100644
index 5648c4c9bb1..00000000000
--- a/components/src/structure/Card.md
+++ /dev/null
@@ -1,55 +0,0 @@
-Basic usage:
-
-```js
-import { LabeledValue } from '@opentrons/components'
-;
-
-
-
-
-
-```
-
-Disable the card:
-
-```js
-import { LabeledValue } from '@opentrons/components'
-;
-
-
-
-
-
-```
diff --git a/components/src/structure/Card.stories.tsx b/components/src/structure/Card.stories.tsx
new file mode 100644
index 00000000000..e6cb7b6ddf2
--- /dev/null
+++ b/components/src/structure/Card.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { Card as CardComponent } from './Card'
+import { Box, Text, SIZE_4, SPACING_3 } from '@opentrons/components'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Molecules/Card',
+} as Meta
+
+const Template: Story> = args => (
+
+ Some text contents
+
+
+ Some more text contents
+
+
+ ),
+}
diff --git a/components/src/structure/LabeledValue.md b/components/src/structure/LabeledValue.md
deleted file mode 100644
index 3c3ec609904..00000000000
--- a/components/src/structure/LabeledValue.md
+++ /dev/null
@@ -1,5 +0,0 @@
-Basic Usage:
-
-```js
-
+> = args =>
-
Blue
-
Green
-
Colorless Inverted
-
- Yellow Inverted
-
-
-
- Empty pill still has same height:
-
-
+
+ ),
+ ],
+} as Meta
+
+const Template: Story> = args => (
+
- setState({ subtitle: null }),
- }}
- />
- setState({ subtitle: 'Subpage' })}>
- Go to Subpage
-
-
-```
-
-`title` and `subtitle` are `React.Node`s, so pass whatever you need:
-
-```js
-
- Title and a link
-
- }
-/>
-```
diff --git a/components/src/structure/TitleBar.stories.tsx b/components/src/structure/TitleBar.stories.tsx
new file mode 100644
index 00000000000..1d47c372cd1
--- /dev/null
+++ b/components/src/structure/TitleBar.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { TitleBar } from './TitleBar'
+import { Text, Icon, SIZE_1 } from '@opentrons/components'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+ title: 'Library/Molecules/TitleBar',
+} as Meta
+
+const Template: Story> = args => (
+
+ Fancy Title With Icon
+ ),
+ subtitle: (
+
+ sub-title as link
+
+ ),
+}
+
+export const WithBackButton = Template.bind({})
+WithBackButton.args = {
+ title: 'Main Title Goes Here',
+ subtitle: "I'm the sub-title",
+ back: {
+ children: 'back',
+ onClick: () => {},
+ },
+}
diff --git a/components/src/tabbedNav/NavTab.md b/components/src/tabbedNav/NavTab.md
deleted file mode 100644
index 707a09fa3f6..00000000000
--- a/components/src/tabbedNav/NavTab.md
+++ /dev/null
@@ -1,44 +0,0 @@
-Basic Usage:
-
-```js
-
- alert('you clicked me')} iconName="ot-connect" />
-
-```
-
-Disabled:
-
-```js
-
- alert('you clicked me')}
- iconName="ot-connect"
- disabled
- />
-
-```
-
-Currently Selected:
-
-```js
-
- alert('you clicked me')}
- iconName="ot-connect"
- selected
- />
-
-```
-
-Optional Title:
-
-```js
-
- alert('you clicked me')}
- title="connect"
- iconName="ot-connect"
- title="connect"
- />
-
-```
diff --git a/components/src/tabbedNav/index.ts b/components/src/tabbedNav/index.ts
index 3eeb49c465a..0b670948e40 100644
--- a/components/src/tabbedNav/index.ts
+++ b/components/src/tabbedNav/index.ts
@@ -1,4 +1,7 @@
// navigational components
+
+// TODO(bc, 2021-03-29): these components are only used in one place
+// reconsider whether they belong in components library
export * from './TabbedNavBar'
export * from './NavTab'
export * from './OutsideLinkTab'
diff --git a/components/src/tooltips/DeprecatedTooltip.md b/components/src/tooltips/DeprecatedTooltip.md
deleted file mode 100644
index 858d95d7b7a..00000000000
--- a/components/src/tooltips/DeprecatedTooltip.md
+++ /dev/null
@@ -1,49 +0,0 @@
-Basic usage:
-
-```js
-Something Explanatory!