From 54fd043a33c512f8909f5e39383eeb594dd27e7a Mon Sep 17 00:00:00 2001
From: Ivan Gabriele <ivan.gabriele@gmail.com>
Date: Wed, 14 Dec 2022 11:55:57 +0100
Subject: [PATCH] feat(formiks): add FormikAutoComplete

---
 .eslintrc.js                                  |   1 +
 src/fields/AutoComplete.tsx                   |  34 +-
 src/formiks/FormikAutoComplete.tsx            |  27 +
 src/index.ts                                  |   2 +
 stories/Icon.stories.tsx                      | 754 +++++++++---------
 stories/components/Dropdown.stories.tsx       |   2 +-
 stories/elements/Button.stories.tsx           | 640 +++++++--------
 stories/elements/Field.stories.tsx            |   6 +-
 stories/elements/Fieldset.stories.tsx         |  12 +-
 stories/elements/IconButton.stories.tsx       |  20 +-
 stories/elements/Label.stories.tsx            |   4 +-
 stories/elements/Legend.stories.tsx           |   4 +-
 stories/elements/Tag.stories.tsx              |  12 +-
 .../AutoComplete/WithOptions.stories.tsx      |   9 +-
 .../fields/AutoComplete/WithQuery.stories.tsx |   1 +
 stories/fields/Checkbox.stories.tsx           |   2 +-
 stories/fields/DatePicker.stories.tsx         |   2 +-
 stories/fields/DateRangePicker.stories.tsx    |   2 +-
 stories/fields/Select.stories.tsx             |   4 +-
 .../AutoComplete/WithOptions.stories.tsx      |  54 ++
 .../AutoComplete/WithQuery.stories.tsx        |  53 ++
 stories/formiks/FormikCheckbox.stories.tsx    |   2 +-
 stories/formiks/FormikDatePicker.stories.tsx  |   2 +-
 .../formiks/FormikDateRangePicker.stories.tsx |   2 +-
 stories/formiks/FormikEffect.stories.tsx      |   2 +-
 .../formiks/FormikMultiCheckbox.stories.tsx   |   2 +-
 stories/formiks/FormikMultiRadio.stories.tsx  |   2 +-
 stories/formiks/FormikMultiSelect.stories.tsx |   2 +-
 stories/formiks/FormikSelect.stories.tsx      |   6 +-
 stories/formiks/FormikTextInput.stories.tsx   |   2 +-
 stories/formiks/FormikTextarea.stories.tsx    |   2 +-
 31 files changed, 920 insertions(+), 749 deletions(-)
 create mode 100644 src/formiks/FormikAutoComplete.tsx
 create mode 100644 stories/formiks/AutoComplete/WithOptions.stories.tsx
 create mode 100644 stories/formiks/AutoComplete/WithQuery.stories.tsx

diff --git a/.eslintrc.js b/.eslintrc.js
index 66f63669d..b10984954 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -123,6 +123,7 @@ module.exports = {
 
         'import/no-default-export': 'off',
 
+        'react/destructuring-assignment': 'off',
         'react/function-component-definition': 'off',
 
         'sort-keys-fix/sort-keys-fix': 'off'
diff --git a/src/fields/AutoComplete.tsx b/src/fields/AutoComplete.tsx
index 89961e7bb..18fee195e 100644
--- a/src/fields/AutoComplete.tsx
+++ b/src/fields/AutoComplete.tsx
@@ -1,5 +1,6 @@
 import ky from 'ky'
-import { useCallback, useMemo, useState } from 'react'
+import { propEq } from 'ramda'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { AutoComplete as RsuiteAutoComplete } from 'rsuite'
 import styled from 'styled-components'
 
@@ -25,6 +26,7 @@ export type AutoCompleteProps = Omit<
   queryUrl?: string
 }
 export function AutoComplete({
+  defaultValue,
   isLabelHidden,
   isLight = false,
   label,
@@ -35,19 +37,24 @@ export function AutoComplete({
   queryUrl,
   ...originalProps
 }: AutoCompleteProps) {
+  const prevDefaultValuePropRef = useRef<string | undefined>(defaultValue)
+
+  const [controlledDefaultValue, setDefaultControlledValue] = useState<string | undefined>(defaultValue)
   const [autoGeneratedOptions, setAutoGeneratedOptions] = useState<Option[]>([])
 
   const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options])
+  const controlledValueAsLabel = useMemo(() => {
+    const foundOption = controlledOptions.find(propEq('value', controlledDefaultValue))
+
+    return foundOption ? foundOption.label : undefined
+  }, [controlledDefaultValue, controlledOptions])
   const key = useMemo(
-    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,
-    [originalProps.defaultValue, originalProps.name]
+    () => `${originalProps.name}-${JSON.stringify(controlledDefaultValue)}`,
+    [controlledDefaultValue, originalProps.name]
   )
 
   const handleChange = useCallback(
     async (nextQuery: string) => {
-      // console.log(nextQuery)
-      // console.log(nextQuery.length)
-
       if (queryUrl && queryMap) {
         const url = queryUrl.replace('%s', nextQuery)
         const rawData: Record<string, any>[] = await ky.get(url).json()
@@ -71,15 +78,23 @@ export function AutoComplete({
 
   const handleSelect = useCallback(
     (nextValue: string) => {
-      if (!onChange) {
-        return
+      if (onChange) {
+        onChange(nextValue)
       }
 
-      onChange(nextValue)
+      setDefaultControlledValue(nextValue)
     },
     [onChange]
   )
 
+  useEffect(() => {
+    if (defaultValue === prevDefaultValuePropRef.current) {
+      return
+    }
+
+    setDefaultControlledValue(defaultValue)
+  }, [defaultValue])
+
   return (
     <Field>
       <Label htmlFor={originalProps.name} isHidden={isLabelHidden}>
@@ -90,6 +105,7 @@ export function AutoComplete({
         key={key}
         $isLight={isLight}
         data={controlledOptions}
+        defaultValue={controlledValueAsLabel}
         id={originalProps.name}
         onChange={handleChange}
         onSelect={handleSelect}
diff --git a/src/formiks/FormikAutoComplete.tsx b/src/formiks/FormikAutoComplete.tsx
new file mode 100644
index 000000000..c2f7a6c55
--- /dev/null
+++ b/src/formiks/FormikAutoComplete.tsx
@@ -0,0 +1,27 @@
+import { useField } from 'formik'
+import { useCallback, useEffect, useMemo } from 'react'
+
+import { AutoComplete } from '../fields/AutoComplete'
+
+import type { AutoCompleteProps } from '../fields/AutoComplete'
+
+export type FormikAutoCompleteProps = Omit<AutoCompleteProps, 'defaultValue' | 'onChange'>
+export function FormikAutoComplete({ name, ...originalProps }: FormikAutoCompleteProps) {
+  const [field, , helpers] = useField<string | undefined>(name)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
+  const defaultValue = useMemo(() => field.value, [])
+
+  const handleChange = useCallback(
+    (nextValue: string | undefined) => {
+      helpers.setValue(nextValue)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => () => helpers.setValue(undefined), [])
+
+  return <AutoComplete defaultValue={defaultValue} name={name} onChange={handleChange} {...originalProps} />
+}
diff --git a/src/index.ts b/src/index.ts
index dae38232f..c060b8c99 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -28,6 +28,7 @@ export { Select } from './fields/Select'
 export { Textarea } from './fields/Textarea'
 export { TextInput } from './fields/TextInput'
 
+export { FormikAutoComplete } from './formiks/FormikAutoComplete'
 export { FormikCheckbox } from './formiks/FormikCheckbox'
 export { FormikDatePicker } from './formiks/FormikDatePicker'
 export { FormikDateRangePicker } from './formiks/FormikDateRangePicker'
@@ -69,6 +70,7 @@ export type { SelectProps } from './fields/Select'
 export type { TextareaProps } from './fields/Textarea'
 export type { TextInputProps } from './fields/TextInput'
 
+export type { FormikAutoCompleteProps } from './formiks/FormikAutoComplete'
 export type { FormikCheckboxProps } from './formiks/FormikCheckbox'
 export type { FormikDatePickerProps } from './formiks/FormikDatePicker'
 export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker'
diff --git a/stories/Icon.stories.tsx b/stories/Icon.stories.tsx
index 0e494a4c5..f802dd064 100644
--- a/stories/Icon.stories.tsx
+++ b/stories/Icon.stories.tsx
@@ -22,382 +22,384 @@ export default {
   args
 }
 
-export const _Icon = (props: IconProps) => (
-  <Box>
-    <Cell>
-      <IconBox>
-        <Icon.ActivityFeed {...props} />
-      </IconBox>
-      <Code>ActivityFeed</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Alert {...props} />
-      </IconBox>
-      <Code>Alert</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Anchor {...props} />
-      </IconBox>
-      <Code>Anchor</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Archive {...props} />
-      </IconBox>
-      <Code>Archive</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Attention {...props} />
-      </IconBox>
-      <Code>Attention</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Calendar {...props} />
-      </IconBox>
-      <Code>Calendar</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Check {...props} />
-      </IconBox>
-      <Code>Check</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Chevron {...props} />
-      </IconBox>
-      <Code>Chevron</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Clock {...props} />
-      </IconBox>
-      <Code>Clock</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Close {...props} />
-      </IconBox>
-      <Code>Close</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Confirm {...props} />
-      </IconBox>
-      <Code>Confirm</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Control {...props} />
-      </IconBox>
-      <Code>Control</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Delete {...props} />
-      </IconBox>
-      <Code>Delete</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Display {...props} />
-      </IconBox>
-      <Code>Display</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.DoubleChevron {...props} />
-      </IconBox>
-      <Code>DoubleChevron</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Download {...props} />
-      </IconBox>
-      <Code>Download</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Drapeau {...props} />
-      </IconBox>
-      <Code>Drapeau</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Duplicate {...props} />
-      </IconBox>
-      <Code>Duplicate</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Edit {...props} />
-      </IconBox>
-      <Code>Edit</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.EditBis {...props} />
-      </IconBox>
-      <Code>EditBis</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Favorite {...props} />
-      </IconBox>
-      <Code>Favorite</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.FilledArrow {...props} />
-      </IconBox>
-      <Code>FilledArrow</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Filter {...props} />
-      </IconBox>
-      <Code>Filter</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.FilterBis {...props} />
-      </IconBox>
-      <Code>FilterBis</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Fishery {...props} />
-      </IconBox>
-      <Code>Fishery</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.FishingEngine {...props} />
-      </IconBox>
-      <Code>FishingEngine</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.FleetSegment {...props} />
-      </IconBox>
-      <Code>FleetSegment</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Focus {...props} />
-      </IconBox>
-      <Code>Focus</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.FocusVessel {...props} />
-      </IconBox>
-      <Code>FocusVessel</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.FocusZones {...props} />
-      </IconBox>
-      <Code>FocusZones</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Hide {...props} />
-      </IconBox>
-      <Code>Hide</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Info {...props} />
-      </IconBox>
-      <Code>Info</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Infringement {...props} />
-      </IconBox>
-      <Code>Infringement</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Landmark {...props} />
-      </IconBox>
-      <Code>Landmark</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.List {...props} />
-      </IconBox>
-      <Code>List</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.MapLayers {...props} />
-      </IconBox>
-      <Code>MapLayers</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.MeasureAngle {...props} />
-      </IconBox>
-      <Code>MeasureAngle</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.MeasureBrokenLine {...props} />
-      </IconBox>
-      <Code>MeasureBrokenLine</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.MeasureCircle {...props} />
-      </IconBox>
-      <Code>MeasureCircle</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.MeasureLine {...props} />
-      </IconBox>
-      <Code>MeasureLine</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Minus {...props} />
-      </IconBox>
-      <Code>Minus</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.More {...props} />
-      </IconBox>
-      <Code>More</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Note {...props} />
-      </IconBox>
-      <Code>Note</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Observation {...props} />
-      </IconBox>
-      <Code>Observation</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Pin {...props} />
-      </IconBox>
-      <Code>Pin</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Pinpoint {...props} />
-      </IconBox>
-      <Code>Pinpoint</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.PinpointHide {...props} />
-      </IconBox>
-      <Code>PinpointHide</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Plus {...props} />
-      </IconBox>
-      <Code>Plus</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Reject {...props} />
-      </IconBox>
-      <Code>Reject</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Save {...props} />
-      </IconBox>
-      <Code>Save</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Search {...props} />
-      </IconBox>
-      <Code>Search</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.SelectPolygon {...props} />
-      </IconBox>
-      <Code>SelectPolygon</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.SelectRectangle {...props} />
-      </IconBox>
-      <Code>SelectRectangle</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.SelectZone {...props} />
-      </IconBox>
-      <Code>SelectZone</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.ShowErsMessages {...props} />
-      </IconBox>
-      <Code>ShowErsMessages</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.ShowXml {...props} />
-      </IconBox>
-      <Code>ShowXml</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.SortingArrows {...props} />
-      </IconBox>
-      <Code>SortingArrows</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Summary {...props} />
-      </IconBox>
-      <Code>Summary</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Tag {...props} />
-      </IconBox>
-      <Code>Tag</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Unlock {...props} />
-      </IconBox>
-      <Code>Unlock</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.Vessel {...props} />
-      </IconBox>
-      <Code>Vessel</Code>
-    </Cell>
-    <Cell>
-      <IconBox>
-        <Icon.ViewOnMap {...props} />
-      </IconBox>
-      <Code>ViewOnMap</Code>
-    </Cell>
-  </Box>
-)
+export function _Icon(props: IconProps) {
+  return (
+    <Box>
+      <Cell>
+        <IconBox>
+          <Icon.ActivityFeed {...props} />
+        </IconBox>
+        <Code>ActivityFeed</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Alert {...props} />
+        </IconBox>
+        <Code>Alert</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Anchor {...props} />
+        </IconBox>
+        <Code>Anchor</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Archive {...props} />
+        </IconBox>
+        <Code>Archive</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Attention {...props} />
+        </IconBox>
+        <Code>Attention</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Calendar {...props} />
+        </IconBox>
+        <Code>Calendar</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Check {...props} />
+        </IconBox>
+        <Code>Check</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Chevron {...props} />
+        </IconBox>
+        <Code>Chevron</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Clock {...props} />
+        </IconBox>
+        <Code>Clock</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Close {...props} />
+        </IconBox>
+        <Code>Close</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Confirm {...props} />
+        </IconBox>
+        <Code>Confirm</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Control {...props} />
+        </IconBox>
+        <Code>Control</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Delete {...props} />
+        </IconBox>
+        <Code>Delete</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Display {...props} />
+        </IconBox>
+        <Code>Display</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.DoubleChevron {...props} />
+        </IconBox>
+        <Code>DoubleChevron</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Download {...props} />
+        </IconBox>
+        <Code>Download</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Drapeau {...props} />
+        </IconBox>
+        <Code>Drapeau</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Duplicate {...props} />
+        </IconBox>
+        <Code>Duplicate</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Edit {...props} />
+        </IconBox>
+        <Code>Edit</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.EditBis {...props} />
+        </IconBox>
+        <Code>EditBis</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Favorite {...props} />
+        </IconBox>
+        <Code>Favorite</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.FilledArrow {...props} />
+        </IconBox>
+        <Code>FilledArrow</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Filter {...props} />
+        </IconBox>
+        <Code>Filter</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.FilterBis {...props} />
+        </IconBox>
+        <Code>FilterBis</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Fishery {...props} />
+        </IconBox>
+        <Code>Fishery</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.FishingEngine {...props} />
+        </IconBox>
+        <Code>FishingEngine</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.FleetSegment {...props} />
+        </IconBox>
+        <Code>FleetSegment</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Focus {...props} />
+        </IconBox>
+        <Code>Focus</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.FocusVessel {...props} />
+        </IconBox>
+        <Code>FocusVessel</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.FocusZones {...props} />
+        </IconBox>
+        <Code>FocusZones</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Hide {...props} />
+        </IconBox>
+        <Code>Hide</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Info {...props} />
+        </IconBox>
+        <Code>Info</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Infringement {...props} />
+        </IconBox>
+        <Code>Infringement</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Landmark {...props} />
+        </IconBox>
+        <Code>Landmark</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.List {...props} />
+        </IconBox>
+        <Code>List</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.MapLayers {...props} />
+        </IconBox>
+        <Code>MapLayers</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.MeasureAngle {...props} />
+        </IconBox>
+        <Code>MeasureAngle</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.MeasureBrokenLine {...props} />
+        </IconBox>
+        <Code>MeasureBrokenLine</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.MeasureCircle {...props} />
+        </IconBox>
+        <Code>MeasureCircle</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.MeasureLine {...props} />
+        </IconBox>
+        <Code>MeasureLine</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Minus {...props} />
+        </IconBox>
+        <Code>Minus</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.More {...props} />
+        </IconBox>
+        <Code>More</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Note {...props} />
+        </IconBox>
+        <Code>Note</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Observation {...props} />
+        </IconBox>
+        <Code>Observation</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Pin {...props} />
+        </IconBox>
+        <Code>Pin</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Pinpoint {...props} />
+        </IconBox>
+        <Code>Pinpoint</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.PinpointHide {...props} />
+        </IconBox>
+        <Code>PinpointHide</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Plus {...props} />
+        </IconBox>
+        <Code>Plus</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Reject {...props} />
+        </IconBox>
+        <Code>Reject</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Save {...props} />
+        </IconBox>
+        <Code>Save</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Search {...props} />
+        </IconBox>
+        <Code>Search</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.SelectPolygon {...props} />
+        </IconBox>
+        <Code>SelectPolygon</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.SelectRectangle {...props} />
+        </IconBox>
+        <Code>SelectRectangle</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.SelectZone {...props} />
+        </IconBox>
+        <Code>SelectZone</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.ShowErsMessages {...props} />
+        </IconBox>
+        <Code>ShowErsMessages</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.ShowXml {...props} />
+        </IconBox>
+        <Code>ShowXml</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.SortingArrows {...props} />
+        </IconBox>
+        <Code>SortingArrows</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Summary {...props} />
+        </IconBox>
+        <Code>Summary</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Tag {...props} />
+        </IconBox>
+        <Code>Tag</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Unlock {...props} />
+        </IconBox>
+        <Code>Unlock</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.Vessel {...props} />
+        </IconBox>
+        <Code>Vessel</Code>
+      </Cell>
+      <Cell>
+        <IconBox>
+          <Icon.ViewOnMap {...props} />
+        </IconBox>
+        <Code>ViewOnMap</Code>
+      </Cell>
+    </Box>
+  )
+}
 
 const Box = styled.div`
   display: flex;
diff --git a/stories/components/Dropdown.stories.tsx b/stories/components/Dropdown.stories.tsx
index c7594c19b..3e93bfa12 100644
--- a/stories/components/Dropdown.stories.tsx
+++ b/stories/components/Dropdown.stories.tsx
@@ -19,7 +19,7 @@ export default {
   args
 }
 
-export const _Dropdown = (props: DropdownProps) => {
+export function _Dropdown(props: DropdownProps) {
   const [outputValue, setOutputValue] = useState<boolean | '∅'>('∅')
 
   return (
diff --git a/stories/elements/Button.stories.tsx b/stories/elements/Button.stories.tsx
index 21935cf36..7a365612a 100644
--- a/stories/elements/Button.stories.tsx
+++ b/stories/elements/Button.stories.tsx
@@ -29,328 +29,330 @@ export default {
   args
 }
 
-export const _Button = (props: ButtonProps) => (
-  <>
-    <Button {...props} />
+export function _Button(props: ButtonProps) {
+  return (
+    <>
+      <Button {...props} />
 
-    <Showcase>
-      <Showcase.Subtitle>PRIMARY</Showcase.Subtitle>
+      <Showcase>
+        <Showcase.Subtitle>PRIMARY</Showcase.Subtitle>
 
-      <Showcase.Table>
-        <thead>
-          <tr>
-            <td />
-            <th colSpan={2}>Normal</th>
-            <th colSpan={2}>Small</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th>Default</th>
-            <td>
-              <Button accent={Accent.PRIMARY} className="" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="" Icon={undefined} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="" Icon={Icon.Calendar} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-          <tr>
-            <th>Hover</th>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_hover" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_hover" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_hover" Icon={undefined} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_hover" Icon={Icon.Calendar} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-          <tr>
-            <th>Active</th>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_active" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_active" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-          <tr>
-            <th>Disabled</th>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.PRIMARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-        </tbody>
-      </Showcase.Table>
+        <Showcase.Table>
+          <thead>
+            <tr>
+              <td />
+              <th colSpan={2}>Normal</th>
+              <th colSpan={2}>Small</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>Default</th>
+              <td>
+                <Button accent={Accent.PRIMARY} className="" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="" Icon={undefined} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="" Icon={Icon.Calendar} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+            <tr>
+              <th>Hover</th>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_hover" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_hover" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_hover" Icon={undefined} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_hover" Icon={Icon.Calendar} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+            <tr>
+              <th>Active</th>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_active" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_active" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+            <tr>
+              <th>Disabled</th>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.PRIMARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+          </tbody>
+        </Showcase.Table>
 
-      <Showcase.Subtitle>SECONDARY</Showcase.Subtitle>
+        <Showcase.Subtitle>SECONDARY</Showcase.Subtitle>
 
-      <Showcase.Table>
-        <thead>
-          <tr>
-            <td />
-            <th colSpan={2}>Normal</th>
-            <th colSpan={2}>Small</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th>Default</th>
-            <td>
-              <Button accent={Accent.SECONDARY} className="" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="" Icon={undefined} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="" Icon={Icon.Calendar} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-          <tr>
-            <th>Hover</th>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_hover" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_hover" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_hover" Icon={undefined} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_hover" Icon={Icon.Calendar} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-          <tr>
-            <th>Active</th>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_active" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_active" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-          <tr>
-            <th>Disabled</th>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.SECONDARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-        </tbody>
-      </Showcase.Table>
+        <Showcase.Table>
+          <thead>
+            <tr>
+              <td />
+              <th colSpan={2}>Normal</th>
+              <th colSpan={2}>Small</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>Default</th>
+              <td>
+                <Button accent={Accent.SECONDARY} className="" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="" Icon={undefined} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="" Icon={Icon.Calendar} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+            <tr>
+              <th>Hover</th>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_hover" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_hover" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_hover" Icon={undefined} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_hover" Icon={Icon.Calendar} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+            <tr>
+              <th>Active</th>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_active" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_active" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+            <tr>
+              <th>Disabled</th>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.SECONDARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+          </tbody>
+        </Showcase.Table>
 
-      <Showcase.Subtitle>TERTIARY</Showcase.Subtitle>
+        <Showcase.Subtitle>TERTIARY</Showcase.Subtitle>
 
-      <Showcase.Table>
-        <thead>
-          <tr>
-            <td />
-            <th colSpan={2}>Normal</th>
-            <th colSpan={2}>Small</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th>Default</th>
-            <td>
-              <Button accent={Accent.TERTIARY} className="" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="" Icon={undefined} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="" Icon={Icon.Calendar} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-          <tr>
-            <th>Hover</th>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_hover" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_hover" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_hover" Icon={undefined} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_hover" Icon={Icon.Calendar} size={Size.SMALL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-          <tr>
-            <th>Active</th>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_active" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_active" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-          <tr>
-            <th>Disabled</th>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-            <td>
-              <Button accent={Accent.TERTIARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
-                A button
-              </Button>
-            </td>
-          </tr>
-        </tbody>
-      </Showcase.Table>
-    </Showcase>
-  </>
-)
+        <Showcase.Table>
+          <thead>
+            <tr>
+              <td />
+              <th colSpan={2}>Normal</th>
+              <th colSpan={2}>Small</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>Default</th>
+              <td>
+                <Button accent={Accent.TERTIARY} className="" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="" Icon={undefined} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="" Icon={Icon.Calendar} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+            <tr>
+              <th>Hover</th>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_hover" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_hover" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_hover" Icon={undefined} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_hover" Icon={Icon.Calendar} size={Size.SMALL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+            <tr>
+              <th>Active</th>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_active" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_active" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_active" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+            <tr>
+              <th>Disabled</th>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_disabled" Icon={undefined} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+              <td>
+                <Button accent={Accent.TERTIARY} className="_disabled" Icon={Icon.Calendar} size={Size.NORMAL}>
+                  A button
+                </Button>
+              </td>
+            </tr>
+          </tbody>
+        </Showcase.Table>
+      </Showcase>
+    </>
+  )
+}
diff --git a/stories/elements/Field.stories.tsx b/stories/elements/Field.stories.tsx
index 7b0e5cc6a..82cd8471e 100644
--- a/stories/elements/Field.stories.tsx
+++ b/stories/elements/Field.stories.tsx
@@ -13,6 +13,6 @@ export default {
   args
 }
 
-export const _Field = (props: FieldProps) => (
-  <Field {...props}>This is a field for form inputs but it’s basically a div.</Field>
-)
+export function _Field(props: FieldProps) {
+  return <Field {...props}>This is a field for form inputs but it’s basically a div.</Field>
+}
diff --git a/stories/elements/Fieldset.stories.tsx b/stories/elements/Fieldset.stories.tsx
index 442167528..2a4c6d511 100644
--- a/stories/elements/Fieldset.stories.tsx
+++ b/stories/elements/Fieldset.stories.tsx
@@ -16,8 +16,10 @@ export default {
   args
 }
 
-export const _Fieldset = (props: FieldsetProps) => (
-  <Fieldset {...props}>
-    This is am HTML {'<fieldset>'} for form inputs. It should contain a {'<Legend>'} element.
-  </Fieldset>
-)
+export function _Fieldset(props: FieldsetProps) {
+  return (
+    <Fieldset {...props}>
+      This is am HTML {'<fieldset>'} for form inputs. It should contain a {'<Legend>'} element.
+    </Fieldset>
+  )
+}
diff --git a/stories/elements/IconButton.stories.tsx b/stories/elements/IconButton.stories.tsx
index 408dc2405..147ac7e3e 100644
--- a/stories/elements/IconButton.stories.tsx
+++ b/stories/elements/IconButton.stories.tsx
@@ -32,17 +32,19 @@ export default {
   args
 }
 
-export const _IconButton = (props: IconButtonProps) => (
-  <>
-    <IconButton {...props} />
+export function _IconButton(props: IconButtonProps) {
+  return (
+    <>
+      <IconButton {...props} />
 
-    <Showcase>
-      <Showcase.Subtitle>PRIMARY</Showcase.Subtitle>
+      <Showcase>
+        <Showcase.Subtitle>PRIMARY</Showcase.Subtitle>
 
-      <ShowcaseReference />
-    </Showcase>
-  </>
-)
+        <ShowcaseReference />
+      </Showcase>
+    </>
+  )
+}
 
 function ShowcaseReference() {
   return (
diff --git a/stories/elements/Label.stories.tsx b/stories/elements/Label.stories.tsx
index c6955e56b..872cf5092 100644
--- a/stories/elements/Label.stories.tsx
+++ b/stories/elements/Label.stories.tsx
@@ -16,4 +16,6 @@ export default {
   args
 }
 
-export const _Label = (props: LabelProps) => <Label {...props} />
+export function _Label(props: LabelProps) {
+  return <Label {...props} />
+}
diff --git a/stories/elements/Legend.stories.tsx b/stories/elements/Legend.stories.tsx
index 321e79e33..3daacfaae 100644
--- a/stories/elements/Legend.stories.tsx
+++ b/stories/elements/Legend.stories.tsx
@@ -16,4 +16,6 @@ export default {
   args
 }
 
-export const _Legend = (props: LegendProps) => <Legend {...props} />
+export function _Legend(props: LegendProps) {
+  return <Legend {...props} />
+}
diff --git a/stories/elements/Tag.stories.tsx b/stories/elements/Tag.stories.tsx
index 465aaec1c..3d733c18d 100644
--- a/stories/elements/Tag.stories.tsx
+++ b/stories/elements/Tag.stories.tsx
@@ -38,8 +38,10 @@ export default {
   }
 }
 
-export const _Tag = (props: TagProps) => (
-  <>
-    <Tag {...props} />
-  </>
-)
+export function _Tag(props: TagProps) {
+  return (
+    <>
+      <Tag {...props} />
+    </>
+  )
+}
diff --git a/stories/fields/AutoComplete/WithOptions.stories.tsx b/stories/fields/AutoComplete/WithOptions.stories.tsx
index 10b326c7d..4eda15934 100644
--- a/stories/fields/AutoComplete/WithOptions.stories.tsx
+++ b/stories/fields/AutoComplete/WithOptions.stories.tsx
@@ -12,9 +12,12 @@ const args: AutoCompleteProps = {
   label: 'An autocompletable select',
   name: 'autoComplete',
   options: [
-    { label: 'Nemo', value: 'NEMO' },
-    { label: 'Doris', value: 'DORIS' }
-  ]
+    { label: 'First Option', value: 'FIRST_OPTION' },
+    { label: 'Second Option', value: 'SECOND_OPTION' },
+    { label: 'Third Option', value: 'THIRD_OPTION' },
+    { label: 'A Very Very Long Option', value: 'A_VERY_VERY_LONG_OPTION' }
+  ],
+  placeholder: 'Type "first"'
 }
 
 export default {
diff --git a/stories/fields/AutoComplete/WithQuery.stories.tsx b/stories/fields/AutoComplete/WithQuery.stories.tsx
index d95911c19..1456b8702 100644
--- a/stories/fields/AutoComplete/WithQuery.stories.tsx
+++ b/stories/fields/AutoComplete/WithQuery.stories.tsx
@@ -10,6 +10,7 @@ const args: AutoCompleteProps = {
   isLight: false,
   label: 'An autocompletable select',
   name: 'autoComplete',
+  placeholder: 'Type "brew"',
   queryMap: ({ id, name }) => ({
     label: name,
     value: id
diff --git a/stories/fields/Checkbox.stories.tsx b/stories/fields/Checkbox.stories.tsx
index 7842b0e97..43c707cb8 100644
--- a/stories/fields/Checkbox.stories.tsx
+++ b/stories/fields/Checkbox.stories.tsx
@@ -20,7 +20,7 @@ export default {
   args
 }
 
-export const _Checkbox = (props: CheckboxProps) => {
+export function _Checkbox(props: CheckboxProps) {
   const [outputValue, setOutputValue] = useState<boolean | '∅'>('∅')
 
   return (
diff --git a/stories/fields/DatePicker.stories.tsx b/stories/fields/DatePicker.stories.tsx
index 269105c90..075056bbd 100644
--- a/stories/fields/DatePicker.stories.tsx
+++ b/stories/fields/DatePicker.stories.tsx
@@ -21,7 +21,7 @@ export default {
   args
 }
 
-export const _DatePicker = (props: DatePickerProps) => {
+export function _DatePicker(props: DatePickerProps) {
   const [outputValue, setOutputValue] = useState<Date>()
 
   return (
diff --git a/stories/fields/DateRangePicker.stories.tsx b/stories/fields/DateRangePicker.stories.tsx
index 270ac3e79..d73f0191a 100644
--- a/stories/fields/DateRangePicker.stories.tsx
+++ b/stories/fields/DateRangePicker.stories.tsx
@@ -22,7 +22,7 @@ export default {
   args
 }
 
-export const _DateRangePicker = (props: DateRangePickerProps) => {
+export function _DateRangePicker(props: DateRangePickerProps) {
   const [outputValue, setOutputValue] = useState<DateRange>()
 
   return (
diff --git a/stories/fields/Select.stories.tsx b/stories/fields/Select.stories.tsx
index d4d601bab..bee6623d4 100644
--- a/stories/fields/Select.stories.tsx
+++ b/stories/fields/Select.stories.tsx
@@ -10,14 +10,14 @@ const args: SelectProps = {
   isLabelHidden: false,
   isLight: false,
   label: 'A select',
-  placeholder: 'Pick an option',
   name: 'mySelect',
   options: [
     { label: 'First Option', value: 'FIRST_OPTION' },
     { label: 'Second Option', value: 'SECOND_OPTION' },
     { label: 'Third Option', value: 'THIRD_OPTION' },
     { label: 'A Very Very Long Option', value: 'A_VERY_VERY_LONG_OPTION' }
-  ]
+  ],
+  placeholder: 'Pick an option'
 }
 
 export default {
diff --git a/stories/formiks/AutoComplete/WithOptions.stories.tsx b/stories/formiks/AutoComplete/WithOptions.stories.tsx
new file mode 100644
index 000000000..fd1077bac
--- /dev/null
+++ b/stories/formiks/AutoComplete/WithOptions.stories.tsx
@@ -0,0 +1,54 @@
+import { Formik } from 'formik'
+import { useMemo, useState } from 'react'
+
+import { FormikEffect, FormikAutoComplete } from '../../../src'
+import { Output } from '../../_components/Output'
+import { noop } from '../../_utils/noop'
+
+import type { FormikAutoCompleteProps } from '../../../src'
+
+const args: FormikAutoCompleteProps = {
+  label: 'An autocompletable select',
+  name: 'autoComplete',
+  options: [
+    { label: 'First Option', value: 'FIRST_OPTION' },
+    { label: 'Second Option', value: 'SECOND_OPTION' },
+    { label: 'Third Option', value: 'THIRD_OPTION' },
+    { label: 'A Very Very Long Option', value: 'A_VERY_VERY_LONG_OPTION' }
+  ],
+  placeholder: 'Type "first"'
+}
+
+export default {
+  title: 'Formiks/FormikAutoComplete',
+  component: FormikAutoComplete,
+
+  argTypes: {},
+
+  args
+}
+
+export const WithOptions = (props: FormikAutoCompleteProps) => {
+  const [outputValue, setOutputValue] = useState<
+    | {
+        mySelect?: string
+      }
+    | '∅'
+  >('∅')
+
+  const key = useMemo(() => props.name, [props.name])
+
+  return (
+    <>
+      <Formik key={key} initialValues={{}} onSubmit={noop}>
+        <>
+          <FormikEffect onChange={setOutputValue} />
+
+          <FormikAutoComplete {...props} />
+        </>
+      </Formik>
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}
diff --git a/stories/formiks/AutoComplete/WithQuery.stories.tsx b/stories/formiks/AutoComplete/WithQuery.stories.tsx
new file mode 100644
index 000000000..0795cd2cb
--- /dev/null
+++ b/stories/formiks/AutoComplete/WithQuery.stories.tsx
@@ -0,0 +1,53 @@
+import { Formik } from 'formik'
+import { useMemo, useState } from 'react'
+
+import { FormikEffect, FormikAutoComplete } from '../../../src'
+import { Output } from '../../_components/Output'
+import { noop } from '../../_utils/noop'
+
+import type { FormikAutoCompleteProps } from '../../../src'
+
+const args: FormikAutoCompleteProps = {
+  label: 'An autocompletable select',
+  name: 'autoComplete',
+  placeholder: 'Type "brew"',
+  queryMap: ({ id, name }) => ({
+    label: name,
+    value: id
+  }),
+  queryUrl: 'https://api.openbrewerydb.org/breweries?by_name=%s'
+}
+
+export default {
+  title: 'Formiks/FormikAutoComplete',
+  component: FormikAutoComplete,
+
+  argTypes: {},
+
+  args
+}
+
+export const WithQuery = (props: FormikAutoCompleteProps) => {
+  const [outputValue, setOutputValue] = useState<
+    | {
+        mySelect?: string
+      }
+    | '∅'
+  >('∅')
+
+  const key = useMemo(() => props.name, [props.name])
+
+  return (
+    <>
+      <Formik key={key} initialValues={{}} onSubmit={noop}>
+        <>
+          <FormikEffect onChange={setOutputValue} />
+
+          <FormikAutoComplete {...props} />
+        </>
+      </Formik>
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}
diff --git a/stories/formiks/FormikCheckbox.stories.tsx b/stories/formiks/FormikCheckbox.stories.tsx
index ea489b93e..2bef28505 100644
--- a/stories/formiks/FormikCheckbox.stories.tsx
+++ b/stories/formiks/FormikCheckbox.stories.tsx
@@ -21,7 +21,7 @@ export default {
   args
 }
 
-export const _FormikCheckbox = (props: FormikCheckboxProps) => {
+export function _FormikCheckbox(props: FormikCheckboxProps) {
   const [outputValue, setOutputValue] = useState<
     | {
         myCheckbox?: boolean
diff --git a/stories/formiks/FormikDatePicker.stories.tsx b/stories/formiks/FormikDatePicker.stories.tsx
index ec192cedd..cd39a941b 100644
--- a/stories/formiks/FormikDatePicker.stories.tsx
+++ b/stories/formiks/FormikDatePicker.stories.tsx
@@ -24,7 +24,7 @@ export default {
   args
 }
 
-export const _FormikDatePicker = (props: FormikDatePickerProps) => {
+export function _FormikDatePicker(props: FormikDatePickerProps) {
   const [outputValue, setOutputValue] = useState<
     | {
         myDate?: Date
diff --git a/stories/formiks/FormikDateRangePicker.stories.tsx b/stories/formiks/FormikDateRangePicker.stories.tsx
index c8229e8f1..31dab455f 100644
--- a/stories/formiks/FormikDateRangePicker.stories.tsx
+++ b/stories/formiks/FormikDateRangePicker.stories.tsx
@@ -25,7 +25,7 @@ export default {
   args
 }
 
-export const _FormikDateRangePicker = (props: FormikDateRangePickerProps) => {
+export function _FormikDateRangePicker(props: FormikDateRangePickerProps) {
   const [outputValue, setOutputValue] = useState<
     | {
         myDateRange?: DateRange
diff --git a/stories/formiks/FormikEffect.stories.tsx b/stories/formiks/FormikEffect.stories.tsx
index 8e6a671a8..454051fc9 100644
--- a/stories/formiks/FormikEffect.stories.tsx
+++ b/stories/formiks/FormikEffect.stories.tsx
@@ -14,7 +14,7 @@ export default {
   args: {}
 }
 
-export const _FormikEffect = () => {
+export function _FormikEffect() {
   const [outputValue, setOutputValue] = useState<
     | {
         aFormikField?: string
diff --git a/stories/formiks/FormikMultiCheckbox.stories.tsx b/stories/formiks/FormikMultiCheckbox.stories.tsx
index 0497fb744..8d46ec5bf 100644
--- a/stories/formiks/FormikMultiCheckbox.stories.tsx
+++ b/stories/formiks/FormikMultiCheckbox.stories.tsx
@@ -27,7 +27,7 @@ export default {
   args
 }
 
-export const _FormikMultiCheckbox = (props: FormikMultiCheckboxProps) => {
+export function _FormikMultiCheckbox(props: FormikMultiCheckboxProps) {
   const [outputValue, setOutputValue] = useState<
     | {
         myMultiCheckbox?: string[]
diff --git a/stories/formiks/FormikMultiRadio.stories.tsx b/stories/formiks/FormikMultiRadio.stories.tsx
index 294a6d64d..bc10d259a 100644
--- a/stories/formiks/FormikMultiRadio.stories.tsx
+++ b/stories/formiks/FormikMultiRadio.stories.tsx
@@ -27,7 +27,7 @@ export default {
   args
 }
 
-export const _FormikMultiRadio = (props: FormikMultiRadioProps) => {
+export function _FormikMultiRadio(props: FormikMultiRadioProps) {
   const [outputValue, setOutputValue] = useState<
     | {
         mySelect?: string
diff --git a/stories/formiks/FormikMultiSelect.stories.tsx b/stories/formiks/FormikMultiSelect.stories.tsx
index 8b24fe208..adb5e4727 100644
--- a/stories/formiks/FormikMultiSelect.stories.tsx
+++ b/stories/formiks/FormikMultiSelect.stories.tsx
@@ -29,7 +29,7 @@ export default {
   args
 }
 
-export const _FormikMultiSelect = (props: FormikMultiSelectProps) => {
+export function _FormikMultiSelect(props: FormikMultiSelectProps) {
   const [outputValue, setOutputValue] = useState<
     | {
         myMultiSelect?: string[]
diff --git a/stories/formiks/FormikSelect.stories.tsx b/stories/formiks/FormikSelect.stories.tsx
index 9a4610e8a..305f9aa69 100644
--- a/stories/formiks/FormikSelect.stories.tsx
+++ b/stories/formiks/FormikSelect.stories.tsx
@@ -9,14 +9,14 @@ import type { FormikSelectProps } from '../../src'
 
 const args: FormikSelectProps = {
   label: 'A select',
-  placeholder: 'Pick an option',
   name: 'mySelect',
   options: [
     { label: 'First Option', value: 'FIRST_OPTION' },
     { label: 'Second Option', value: 'SECOND_OPTION' },
     { label: 'Third Option', value: 'THIRD_OPTION' },
     { label: 'A Very Very Long Option', value: 'A_VERY_VERY_LONG_OPTION' }
-  ]
+  ],
+  placeholder: 'Pick an option'
 }
 
 export default {
@@ -28,7 +28,7 @@ export default {
   args
 }
 
-export const _FormikSelect = (props: FormikSelectProps) => {
+export function _FormikSelect(props: FormikSelectProps) {
   const [outputValue, setOutputValue] = useState<
     | {
         mySelect?: string
diff --git a/stories/formiks/FormikTextInput.stories.tsx b/stories/formiks/FormikTextInput.stories.tsx
index dfe91a344..8dd79daca 100644
--- a/stories/formiks/FormikTextInput.stories.tsx
+++ b/stories/formiks/FormikTextInput.stories.tsx
@@ -21,7 +21,7 @@ export default {
   args
 }
 
-export const _FormikTextInput = (props: FormikTextInputProps) => {
+export function _FormikTextInput(props: FormikTextInputProps) {
   const [outputValue, setOutputValue] = useState<
     | {
         myTextInput?: string
diff --git a/stories/formiks/FormikTextarea.stories.tsx b/stories/formiks/FormikTextarea.stories.tsx
index 1318410bb..51562bb8e 100644
--- a/stories/formiks/FormikTextarea.stories.tsx
+++ b/stories/formiks/FormikTextarea.stories.tsx
@@ -21,7 +21,7 @@ export default {
   args
 }
 
-export const _FormikTextarea = (props: FormikTextareaProps) => {
+export function _FormikTextarea(props: FormikTextareaProps) {
   const [outputValue, setOutputValue] = useState<
     | {
         myTextarea?: string