Fixed more input accessibility issues, also

- Added searchParams based router for easier testing
 - Added more stories to the storybook

stories/FieldArray.stories.js

@@ -17,6 +17,7 @@ export const NumberType = () => {
   return (
     <Wrapper>
       <FieldArray
+        label="Foobar"
         type="number"
         value={value}
         length={3}
@@ -32,6 +33,7 @@ export const StringType = () => {
   return (
     <Wrapper>
       <FieldArray
+        label="Foobar"
         type="string"
         value={value}
         length={3}

stories/FieldAutocomplete.stories.js

@@ -18,6 +18,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldAutocomplete
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}

stories/FieldCheckbox.stories.js

@@ -17,6 +17,7 @@ export const BasicUnchecked = () => {
   return (
     <Wrapper>
       <FieldCheckbox
+        label="Foobar"
         value={value}
         onChange={setValue}
       />
@@ -30,6 +31,7 @@ export const BasicChecked = () => {
   return (
     <Wrapper>
       <FieldCheckbox
+        label="Foobar"
         value={value}
         onChange={setValue}
       />

stories/FieldColor.stories.js

@@ -17,7 +17,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldColor
-        name="color"
+        label="Foobar"
         value={color}
         onChange={setColor}
       />

stories/FieldComment.stories.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldComment from '../src/components/FieldComment';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldComment',
-  component: FieldComment,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", "Hello\nworld");
-
-  return (
-    <Wrapper>
-      <FieldComment
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-

stories/FieldDynamicArray.stories.js

@@ -17,6 +17,7 @@ export const NumberType = () => {
   return (
     <Wrapper>
       <FieldDynamicArray
+        label="Foobar"
         type="number"
         value={value}
         onChange={setValue}
@@ -31,6 +32,7 @@ export const UrlType = () => {
   return (
     <Wrapper>
       <FieldDynamicArray
+        label="Foobar"
         type="url"
         value={value}
         onChange={setValue}
@@ -45,6 +47,7 @@ export const EnumType = () => {
   return (
     <Wrapper>
       <FieldDynamicArray
+        label="Foobar"
 	fieldSpec={{values: {"foo": null, "bar": null, "baz": null}}}
         type="enum"
         value={value}

stories/FieldEnum.stories.js

@@ -18,6 +18,7 @@ export const BasicFew = () => {
   return (
     <Wrapper>
       <FieldEnum
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}
@@ -33,6 +34,7 @@ export const BasicFewWithDefault = () => {
   return (
     <Wrapper>
       <FieldEnum
+        label="Foobar"
         options={options}
         default={"Baz"}
         value={value}
@@ -49,6 +51,7 @@ export const BasicMany = () => {
   return (
     <Wrapper>
       <FieldEnum
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}
@@ -64,7 +67,8 @@ export const BasicManyWithDefault = () => {
   return (
     <Wrapper>
       <FieldEnum
-        options={options}A
+        label="Foobar"
+        options={options}
         default={"h"}
         value={value}
         onChange={setValue}

stories/FieldFont.stories.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldFont from '../src/components/FieldFont';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldFont',
-  component: FieldFont,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const fonts = ["Comic Sans", "Helvectica", "Gotham"];
-  const [value, setValue] = useActionState("onChange", ["Comic Sans"]);
-
-  return (
-    <Wrapper>
-      <FieldFont
-        fonts={fonts}
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-

stories/FieldFunction.stories.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import FieldFunction from '../src/components/FieldFunction';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+
+
+export default {
+  title: 'FieldFunction',
+  component: FieldFunction,
+  decorators: [withA11y],
+};
+
+export const Basic = () => {
+  const value = {
+    "property": "rank",
+    "type": "categorical",
+    "default": "#222",
+    "stops": [
+      [
+        {"zoom": 6, "value": ""},
+        ["#777"]
+      ],
+      [
+        {"zoom": 10, "value": ""},
+        ["#444"]
+      ]
+    ]
+  };
+
+  return <div style={{width: "360px"}}>
+    <FieldFunction
+      onChange={() => {}}
+      value={value}
+      errors={[]}
+      fieldName={"Color"}
+      fieldType={"color"}
+      fieldSpec={latest['paint_fill']['fill-color']}
+    />
+  </div>
+};
+

stories/FieldId.stories.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldId from '../src/components/FieldId';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldId',
-  component: FieldId,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", "water");
-
-  return (
-    <Wrapper>
-      <FieldId
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-

stories/FieldMaxZoom.stories.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldMaxZoom from '../src/components/FieldMaxZoom';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldMaxZoom',
-  component: FieldMaxZoom,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", 12);
-
-  return (
-    <Wrapper>
-      <FieldMaxZoom
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-

stories/FieldMinZoom.stories.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldMinZoom from '../src/components/FieldMinZoom';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldMinZoom',
-  component: FieldMinZoom,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", 2);
-
-  return (
-    <Wrapper>
-      <FieldMinZoom
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-

stories/FieldMultiInput.stories.js

@@ -18,6 +18,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldMultiInput
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}

stories/FieldNumber.stories.js

@@ -16,7 +16,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldNumber
-        name="number"
+        label="number"
         value={value}
         onChange={setValue}
       />
@@ -30,7 +30,7 @@ export const Range = () => {
   return (
     <Wrapper>
       <FieldNumber
-        name="number"
+        label="number"
         value={value}
         onChange={setValue}
         min={1}

stories/FieldSelect.stories.js

@@ -18,6 +18,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldSelect
+        label="Foobar"
         options={options}
         value={value}
         onChange={setValue}

stories/FieldSource.stories.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldSource from '../src/components/FieldSource';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldSource',
-  component: FieldSource,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", "openmaptiles");
-
-  return (
-    <Wrapper>
-      <FieldSource
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-

stories/FieldSourceLayer.stories.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldSourceLayer from '../src/components/FieldSourceLayer';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldSourceLayer',
-  component: FieldSourceLayer,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", "water");
-
-  return (
-    <Wrapper>
-      <FieldSourceLayer
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-

stories/FieldString.stories.js

@@ -17,49 +17,7 @@ export const Basic = () => {
   return (
     <Wrapper>
       <FieldString
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
-export const WithDefault = () => {
-  const [value, setValue] = useActionState("onChange", null);
-
-  return (
-    <Wrapper>
-      <FieldString
-        value={value}
-        default={"Edit me..."}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
-export const Multiline = () => {
-  const [value, setValue] = useActionState("onChange", "Hello\nworld");
-
-  return (
-    <Wrapper>
-      <FieldString
-        multi={true}
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
-export const MultilineWithDefault = () => {
-  const [value, setValue] = useActionState("onChange", null);
-
-  return (
-    <Wrapper>
-      <FieldString
-        multi={true}
-        default={"Edit\nme.."}
+        label="Foobar"
         value={value}
         onChange={setValue}
       />

stories/FieldSymbol.stories.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldSymbol from '../src/components/FieldSymbol';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldSymbol',
-  component: FieldSymbol,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const icons = ["Bicycle", "Ski", "Ramp"];
-  const [value, setValue] = useActionState("onChange", "Ski");
-
-  return (
-    <Wrapper>
-      <FieldSymbol
-        icons={icons}
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-
-

stories/FieldType.stories.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldType from '../src/components/FieldType';
-import {Wrapper} from './ui';
-import {withA11y} from '@storybook/addon-a11y';
-
-export default {
-  title: 'FieldType',
-  component: FieldType,
-  decorators: [withA11y],
-};
-
-
-export const Basic = () => {
-  const [value, setValue] = useActionState("onChange", "background");
-
-  return (
-    <Wrapper>
-      <FieldType
-        value={value}
-        onChange={setValue}
-      />
-    </Wrapper>
-  );
-};
-

stories/FieldUrl.stories.js

@@ -17,6 +17,7 @@ export const Valid = () => {
   return (
     <Wrapper>
       <FieldUrl
+        label="Foobar"
         value={value}
         onChange={setValue}
         onInput={setValue}
@@ -31,6 +32,7 @@ export const Invalid = () => {
   return (
     <Wrapper>
       <FieldUrl
+        label="Foobar"
         value={value}
         onChange={setValue}
         onInput={setValue}

stories/IconLayer.stories.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import IconLayer from '../src/components/IconLayer';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'IconLayer',
+  component: IconLayer,
+  decorators: [withA11y],
+};
+
+export const IconList = () => {
+  const types = [
+    'fill-extrusion',
+    'raster',
+    'hillshade',
+    'heatmap',
+    'fill',
+    'background',
+    'line',
+    'symbol',
+    'circle',
+    'INVALID',
+  ]
+
+  return <Wrapper>
+    <table style={{textAlign: "left"}}>
+      <thead style={{borderBottom: "solid 1px white"}}>
+        <tr>
+          <td>ID</td>
+          <td>Preview</td>
+        </tr>
+      </thead>
+      <tbody>
+        {types.map(type => (
+          <tr>
+            <td style={{paddingRight: "1em"}}>
+              <code>{type}</code>
+            </td>
+            <td>
+              <IconLayer type={type} />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </Wrapper>
+};
+
+
+
+
+
+

stories/InputArray.stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputArray from '../src/components/InputArray';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputArray',
+  component: InputArray,
+  decorators: [withA11y],
+};
+
+
+export const NumberType = () => {
+  const [value, setValue] = useActionState("onChange", [1,2,3]);
+
+  return (
+    <Wrapper>
+      <InputArray
+        type="number"
+        value={value}
+        length={3}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const StringType = () => {
+  const [value, setValue] = useActionState("onChange", ["a", "b", "c"]);
+
+  return (
+    <Wrapper>
+      <InputArray
+        type="string"
+        value={value}
+        length={3}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+

stories/InputAutocomplete.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputAutocomplete from '../src/components/InputAutocomplete';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputAutocomplete',
+  component: InputAutocomplete,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
+  const [value, setValue] = useActionState("onChange", "bar");
+
+  return (
+    <InputContainer>
+      <InputAutocomplete
+        label="Foobar"
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+

stories/InputButton.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import InputButton from '../src/components/InputButton';
+import {action} from '@storybook/addon-actions';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'InputButton',
+  component: InputButton,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <InputContainer>
+    <InputButton onClick={action('onClick')}>
+      Hello InputButton
+    </InputButton>
+  </InputContainer>
+);
+

stories/InputCheckbox.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputCheckbox from '../src/components/InputCheckbox';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputCheckbox',
+  component: InputCheckbox,
+  decorators: [withA11y],
+};
+
+
+export const BasicUnchecked = () => {
+  const [value, setValue] = useActionState("onChange", false);
+
+  return (
+    <InputContainer>
+      <InputCheckbox
+        label="Foobar"
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const BasicChecked = () => {
+  const [value, setValue] = useActionState("onChange", true);
+
+  return (
+    <InputContainer>
+      <InputCheckbox
+        label="Foobar"
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+

stories/InputColor.stories.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputColor from '../src/components/InputColor';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputColor',
+  component: InputColor,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [color, setColor] = useActionState("onChange", "#ff0000");
+
+  return (
+    <InputContainer>
+      <InputColor
+        label="Foobar"
+        value={color}
+        onChange={setColor}
+      />
+    </InputContainer>
+  );
+};
+

stories/InputDynamicArray.stories.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputDynamicArray from '../src/components/InputDynamicArray';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputDynamicArray',
+  component: InputDynamicArray,
+  decorators: [withA11y],
+};
+
+
+export const NumberType = () => {
+  const [value, setValue] = useActionState("onChange", [1,2,3]);
+
+  return (
+    <Wrapper>
+      <InputDynamicArray
+        type="number"
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const UrlType = () => {
+  const [value, setValue] = useActionState("onChange", ["http://example.com"]);
+
+  return (
+    <Wrapper>
+      <InputDynamicArray
+        type="url"
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const EnumType = () => {
+  const [value, setValue] = useActionState("onChange", ["foo"]);
+
+  return (
+    <Wrapper>
+      <InputDynamicArray
+	      fieldSpec={{values: {"foo": null, "bar": null, "baz": null}}}
+        type="enum"
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};

stories/InputEnum.stories.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputEnum from '../src/components/InputEnum';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputEnum',
+  component: InputEnum,
+  decorators: [withA11y],
+};
+
+
+export const BasicFew = () => {
+  const options = ["Foo", "Bar", "Baz"];
+  const [value, setValue] = useActionState("onChange", "Foo");
+
+  return (
+    <InputContainer>
+      <InputEnum
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const BasicFewWithDefault = () => {
+  const options = ["Foo", "Bar", "Baz"];
+  const [value, setValue] = useActionState("onChange", null);
+
+  return (
+    <InputContainer>
+      <InputEnum
+        options={options}
+        default={"Baz"}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const BasicMany = () => {
+  const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
+  const [value, setValue] = useActionState("onChange", "a");
+
+  return (
+    <InputContainer>
+      <InputEnum
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const BasicManyWithDefault = () => {
+  const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
+  const [value, setValue] = useActionState("onChange", "a");
+
+  return (
+    <InputContainer>
+      <InputEnum
+        options={options}A
+        default={"h"}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+
+

stories/InputJson.stories.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import InputJson from '../src/components/InputJson';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'InputJson',
+  component: InputJson,
+  decorators: [withA11y],
+};
+
+export const Basic = () => {
+  const layer = {
+    id: "background",
+    type: "background",
+  };
+
+  return <Wrapper>
+    <InputJson
+      layer={layer}
+      onClick={action('onClick')}
+    />
+  </Wrapper>
+};
+

stories/InputMultiInput.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputMultiInput from '../src/components/InputMultiInput';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputMultiInput',
+  component: InputMultiInput,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
+  const [value, setValue] = useActionState("onChange", "FOO");
+
+  return (
+    <InputContainer>
+      <InputMultiInput
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+

stories/InputNumber.stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputNumber from '../src/components/InputNumber';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputNumber',
+  component: InputNumber,
+  decorators: [withA11y],
+};
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", 1);
+
+  return (
+    <InputContainer>
+      <InputNumber
+        name="number"
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const Range = () => {
+  const [value, setValue] = useActionState("onChange", 1);
+
+  return (
+    <InputContainer>
+      <InputNumber
+        name="number"
+        value={value}
+        onChange={setValue}
+        min={1}
+        max={24}
+        allowRange={true}
+        rangeStep={1}
+      />
+    </InputContainer>
+  );
+};
+

stories/InputSelect.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputSelect from '../src/components/InputSelect';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputSelect',
+  component: InputSelect,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const options = [["FOO", "Foo"], ["BAR", "Bar"], ["BAZ", "Baz"]];
+  const [value, setValue] = useActionState("onChange", "FOO");
+
+  return (
+    <InputContainer>
+      <InputSelect
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+
+

stories/InputString.stories.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputString from '../src/components/InputString';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputString',
+  component: InputString,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "Hello world");
+
+  return (
+    <InputContainer>
+      <InputString
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const WithDefault = () => {
+  const [value, setValue] = useActionState("onChange", null);
+
+  return (
+    <InputContainer>
+      <InputString
+        value={value}
+        default={"Edit me..."}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const Multiline = () => {
+  const [value, setValue] = useActionState("onChange", "Hello\nworld");
+
+  return (
+    <InputContainer>
+      <InputString
+        multi={true}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const MultilineWithDefault = () => {
+  const [value, setValue] = useActionState("onChange", null);
+
+  return (
+    <InputContainer>
+      <InputString
+        multi={true}
+        default={"Edit\nme.."}
+        value={value}
+        onChange={setValue}
+      />
+    </InputContainer>
+  );
+};
+

stories/InputUrl.stories.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import {useActionState} from './helper';
+import InputUrl from '../src/components/InputUrl';
+import {InputContainer} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'InputUrl',
+  component: InputUrl,
+  decorators: [withA11y],
+};
+
+
+export const Valid = () => {
+  const [value, setValue] = useActionState("onChange", "http://example.com");
+
+  return (
+    <InputContainer>
+      <InputUrl
+        value={value}
+        onChange={setValue}
+        onInput={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+export const Invalid = () => {
+  const [value, setValue] = useActionState("onChange", "foo");
+
+  return (
+    <InputContainer>
+      <InputUrl
+        value={value}
+        onChange={setValue}
+        onInput={setValue}
+      />
+    </InputContainer>
+  );
+};
+
+

stories/LayerEditor.stories.js

@@ -0,0 +1,202 @@
+import React from 'react';
+import LayerEditor from '../src/components/LayerEditor';
+import {action} from '@storybook/addon-actions';
+import {withA11y} from '@storybook/addon-a11y';
+import {latest} from '@mapbox/mapbox-gl-style-spec'
+
+
+export default {
+  title: 'LayerEditor',
+  component: LayerEditor,
+  decorators: [withA11y],
+};
+
+export const Background = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "background", type: "background"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Fill = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "fill", type: "fill", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Line = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "line", type: "line", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Symbol = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "symbol", type: "symbol", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Raster = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "raster", type: "raster", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Cirlce = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "circle", type: "circle", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const FillExtrusion = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "fill-extrusion", type: "fill-extrusion", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Heatmap = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "heatmap", type: "heatmap", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+
+export const Hillshade = () => (
+  <div>
+    <LayerEditor
+      layer={{id: "hillshade", type: "hillshade", source: "openmaptiles"}}
+      sources={{}}
+      vectorLayers={{}}
+      spec={latest}
+      errors={[]}
+      onLayerChanged={() => {}}
+      onLayerIdChange={() => {}}
+      onMoveLayer={() => {}}
+      onLayerDestroy={() => {}}
+      onLayerCopy={() => {}}
+      onLayerVisibilityToggle={() => {}}
+      isFirstLayer={true}
+      isLastLayer={false}
+      layerIndex={0}
+    />
+  </div>
+);
+

stories/LayerListItem.stories.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import LayerList from '../src/components/LayerList';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'LayerList',
+  component: LayerList,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{width: "200px"}}>
+      <LayerList
+        layers={[
+          {
+            id: "background",
+            type: "background",
+          },
+          {
+            id: "water",
+            type: "fill",
+            source: "openmaptiles"
+          },
+          {
+            id: "road_trunk",
+            type: "line",
+            source: "openmaptiles"
+          },
+          {
+            id: "road_minor",
+            type: "line",
+            source: "openmaptiles"
+          },
+          {
+            id: "building",
+            type: "fill",
+            source: "openmaptiles"
+          },
+        ]}
+        selectedLayerIndex={0}
+        onLayersChange={() => {}}
+        onLayerSelect={() => {}}
+        onLayerDestroy={() => {}}
+        onLayerCopy={() => {}}
+        onLayerVisibilityToggle={() => {}}
+        onMoveLayer={() => {}}
+        sources={{}}
+        errors={[]}
+      />
+    </div>
+  </Wrapper>
+);
+
+

stories/MapMapboxGl.stories.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import MapMapboxGl from '../src/components/MapMapboxGl';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'MapMapboxGl',
+  component: MapMapboxGl,
+  decorators: [withA11y],
+};
+
+const mapStyle = {
+  "version": 8,
+  "sources": {
+    "test1": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [0, -10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    },
+    "test2": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [15, 10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    },
+    "test3": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [-15, 10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    }
+  },
+  "sprite": "",
+  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "test1",
+      "type": "circle",
+      "source": "test1",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "red"
+      }
+    },
+    {
+      "id": "test2",
+      "type": "circle",
+      "source": "test2",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "green"
+      }
+    },
+    {
+      "id": "test3",
+      "type": "circle",
+      "source": "test3",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "blue"
+      }
+    }
+  ]
+}
+
+export const Basic = () => {
+  return <div style={{height: "100vh", width: "100vw"}}>
+    <MapMapboxGl
+      mapStyle={mapStyle}
+      inspectModeEnabled={false}
+      replaceAccessTokens={(s) => s}
+    />
+  </div>
+};
+
+

stories/MapOpenLayers.stories.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import MapOpenLayers from '../src/components/MapOpenLayers';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'MapOpenLayers',
+  component: MapOpenLayers,
+  decorators: [withA11y],
+};
+
+const mapStyle = {
+  "version": 8,
+  "sources": {
+    "test1": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [0, -10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    },
+    "test2": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [15, 10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    },
+    "test3": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [-15, 10]
+            },
+            "properties": {}
+          }
+        ]
+      }
+    }
+  },
+  "sprite": "",
+  "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "test1",
+      "type": "circle",
+      "source": "test1",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "red"
+      }
+    },
+    {
+      "id": "test2",
+      "type": "circle",
+      "source": "test2",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "green"
+      }
+    },
+    {
+      "id": "test3",
+      "type": "circle",
+      "source": "test3",
+      "paint": {
+        "circle-radius": 40,
+        "circle-color": "blue"
+      }
+    }
+  ]
+}
+
+export const Basic = () => {
+  return <div style={{height: "100vh", width: "100vw", display: "flex"}}>
+    <MapOpenLayers
+      mapStyle={mapStyle}
+      inspectModeEnabled={false}
+      replaceAccessTokens={(s) => s}
+      onChange={() => {}}
+      debugToolbox={true}
+    />
+  </div>
+};
+
+
+

stories/Modal.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Modal from '../src/components/Modal';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'Modal',
+  component: Modal,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <Modal title="hello" isOpen={true}>
+        {[...Array(50).keys()].map(() => {
+          return <p>Some text</p>
+        })}
+      </Modal>
+    </div>
+  </Wrapper>
+);
+
+

stories/ModalAdd.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ModalAdd from '../src/components/ModalAdd';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalAdd',
+  component: ModalAdd,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalAdd
+        layers={[]}
+        sources={{}}
+        isOpen={true}
+      />
+    </div>
+  </Wrapper>
+);
+

stories/ModalDebug.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import ModalDebug from '../src/components/ModalDebug';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalDebug',
+  component: ModalDebug,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalDebug
+        isOpen={true}
+        renderer="mbgljs"
+        mapboxGlDebugOptions={{}}
+        mapView={{zoom: 1, center: {lat: 0, lng: 0}}}
+      />
+    </div>
+  </Wrapper>
+);
+
+
+

stories/ModalExport.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import ModalExport from '../src/components/ModalExport';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalExport',
+  component: ModalExport,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalExport
+        isOpen={true}
+        mapStyle={{}}
+      />
+    </div>
+  </Wrapper>
+);
+
+
+

stories/ModalLoading.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ModalLoading from '../src/components/ModalLoading';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalLoading',
+  component: ModalLoading,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalLoading
+        isOpen={true}
+        title="Loading"
+        message="Loading 'something.geojson'"
+      />
+    </div>
+  </Wrapper>
+);
+

stories/ModalOpen.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ModalOpen from '../src/components/ModalOpen';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalOpen',
+  component: ModalOpen,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalOpen
+        isOpen={true}
+        mapStyle={{}}
+        onChangeMetadataProperty={action("onChangeMetadataProperty")}
+        onStyleChanged={action("onStyleChanged")}
+      />
+    </div>
+  </Wrapper>
+);
+
+
+
+
+
+

stories/ModalSettings.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import ModalSettings from '../src/components/ModalSettings';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalSettings',
+  component: ModalSettings,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalSettings
+        isOpen={true}
+        mapStyle={{}}
+        onStyleChanged={action("onStyleChanged")}
+        onChangeMetadataProperty={action("onChangeMetadataProperty")}
+      />
+    </div>
+  </Wrapper>
+);
+
+
+
+

stories/ModalSources.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import ModalSources from '../src/components/ModalSources';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ModalSources',
+  component: ModalSources,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ModalSources
+        isOpen={true}
+        mapStyle={{sources: {}}}
+        onChangeMetadataProperty={action("onChangeMetadataProperty")}
+        onStyleChanged={action("onStyleChanged")}
+      />
+    </div>
+  </Wrapper>
+);
+
+
+
+
+
+
+

stories/ModalSurvey.stories.js

@@ -1,21 +1,29 @@
 import React from 'react';
-import Button from '../src/components/Button';
+import ModalSurvey from '../src/components/ModalSurvey';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
 import {withA11y} from '@storybook/addon-a11y';
 
 
 export default {
-  title: 'Button',
-  component: Button,
+  title: 'ModalSurvey',
+  component: ModalSurvey,
   decorators: [withA11y],
 };
 
 export const Basic = () => (
   <Wrapper>
-    <Button onClick={action('onClick')}>
-      Hello Button
-    </Button>
+    <div style={{maxHeight: "200px"}}>
+      <ModalSurvey
+        isOpen={true}
+      />
+    </div>
   </Wrapper>
 );
 
+
+
+
+
+
+

stories/ScrollContainer.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import ScrollContainer from '../src/components/ScrollContainer';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+
+export default {
+  title: 'ScrollContainer',
+  component: ScrollContainer,
+  decorators: [withA11y],
+};
+
+export const Basic = () => (
+  <Wrapper>
+    <div style={{maxHeight: "200px"}}>
+      <ScrollContainer>
+        {[...Array(50).keys()].map(() => {
+          return <p>Some text</p>
+        })}
+      </ScrollContainer>
+    </div>
+  </Wrapper>
+);
+
+

stories/ui.js

@@ -17,3 +17,11 @@ export function Wrapper ({children}) {
   );
 };
 
+export function InputContainer ({children}) {
+  return (
+    <div style={{maxWidth: "171px", margin: "0.4em"}}>
+      {children}
+    </div>
+  );
+};
+