Fixed more input accessibility issues, also

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

src/styles/_components.scss

@@ -183,6 +183,7 @@
   .maputnik-input-block-label {
     display: inline-block;
     width: 32%;
+    margin-bottom: $margin-3;
   }
 
   .maputnik-input-block-action {

src/styles/_input.scss

@@ -77,13 +77,13 @@
     .maputnik-array-block-action {
       vertical-align: top;
       display: inline-block;
-      width: 14%;
+      width: 2em;
     }
 
     .maputnik-array-block-content {
       vertical-align: top;
       display: inline-block;
-      width: 86%;
+      width: calc(100% - 2em);
     }
   }
 

src/styles/_modal.scss

@@ -8,6 +8,9 @@
   z-index: 3;
   position: relative;
   font-family: $font-family;
+  display: flex;
+  flex-direction: column;
+  max-height: 100vh;
 }
 
 .maputnik-modal-section {
@@ -50,7 +53,7 @@
 }
 
 .maputnik-modal-scroller {
-  max-height: calc(100vh - 35px);
+  flex: 1;
   overflow-y: auto;
 }
 

src/styles/_zoomproperty.scss

@@ -73,10 +73,6 @@
     width: 30%;
   }
 
-  .maputnik-input-block:not(:first-child) .maputnik-input-block-label {
-    visibility: hidden;
-  }
-
   .maputnik-input-block-content {
     width: 70%;
   }

src/styles/index.scss

@@ -35,3 +35,135 @@
   height: 14px;
 }
 
+.maputnik-data-spec-property {
+}
+
+.maputnik-data-fieldset-inner {
+  background: $color-black;
+  border: solid 1px $color-midgray;
+  border-radius: 2px;
+  position: relative;
+
+  // HACK: Overide
+  .maputnik-input-block {
+    margin: $margin-2;
+  }
+
+  .maputnik-add-stop {
+    display: inline-block;
+    float: none;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .maputnik-toolbox {
+    margin: $margin-3;
+    margin-top: $margin-3;
+    text-align: right;
+  }
+
+}
+
+.maputnik-data-spec-property {
+  legend {
+    font-size: $font-size-6;
+    color: $color-lowgray;
+    margin-bottom: $margin-3;
+  }
+
+  .maputnik-data-spec-property-group {
+    margin-bottom: $margin-2;
+  }
+}
+
+.maputnik-data-spec-block {
+  margin: $margin-3;
+}
+
+.maputnik-function-stop {
+  padding-left: $margin-2;
+  padding-right: $margin-2;
+}
+
+.maputnik-function-stop-table {
+  text-align: left;
+  margin-bottom: $margin-2;
+  box-sizing: border-box;
+  width: 100%;
+
+  thead th {
+    padding: $margin-1 $margin-2;
+    padding-left: 0;
+    color: $color-lowgray;
+  }
+
+  td, th {
+    font-size: $font-size-6;
+    color: $color-white;
+
+    // HACK
+    > * {
+      display: inline-block;
+      width: 100%;
+      vertical-align: text-top;
+    }
+
+    &:not(:first-child)
+    {
+      padding-top: $margin-1;
+      padding-left: $margin-2;
+    }
+
+    &:nth-child(1) {
+      width: 2em;
+    }
+
+    &:nth-child(2) {
+      width: 6em;
+    }
+
+    &:nth-child(3) {
+      width: auto;
+    }
+
+    &:nth-child(4) {
+      // HACK
+      width: 1.8em;
+
+      .maputnik-delete-stop {
+        padding: 0;
+        width: 1em;
+      }
+    }
+  }
+
+  &--zoom {
+    td, th {
+      &:nth-child(2) {
+        width: auto;
+      }
+
+      &:nth-child(3) {
+        // HACK
+        width: 1.8em;
+
+        .maputnik-delete-stop {
+          padding: 0;
+          width: 1em;
+        }
+      }
+    }
+  }
+
+  caption {
+    color: $color-lowgray;
+    text-align: left;
+    border-top: solid 1px $color-black;
+    font-size: $font-size-6;
+    height: 0px;
+    overflow: hidden;
+  }
+}
+