@madgex/design-system 1.51.0 → 1.53.0

package/docs/tokens/colour.njk

@@ -31,11 +31,11 @@ Your context and coding style determine how you access MDS color tokens in code.
   </div>
 {% endmacro %}
 
-
+<div>{% for key, item in tokens.color %} <a href="#{{ key }}">{{ key }}</a> {% if not loop.last %}| {% endif %}{% endfor %}</div>
 
 {% for key, item in tokens.color %}
   <div class="colors">
-  <h2>{{ key }}</h2>
+  <h2 id="{{ key }}">{{ key }}</h2>
     {% if not 'value' in item and item | length %}
       {% for subkey, subitem in item %}
         {% if not 'value' in subitem and subitem | length %}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.51.0",
+  "version": "1.53.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/accordion/README.md

@@ -8,8 +8,19 @@
 - `headerClass`: class will be added to the trigger (useful to change the font size)
 - `breakpoint`: if a value (in px, em, rem) is passed, the accordion will be enabled only when screen size is smaller than the breakpoint
 - `content`: this can also be a custom component or html
+- `expandIcon`: This allows you to override the iconography for the expand icon (default: chevron-down) - See design usage guidelines
+- `collapseIcon`: This allows you to override the iconography for the collapse icon (default: chevron-up) - See design usage guidelines
+- `leftAligned`: This will determine if the icon should sit on the left or the right of the label (default: false) - See design usage guidelines
 
 
 ## Accessibility
 
-when javascript is enabled, accordion will contains aria-labelledby, aria-expanded and aria-controls for screen readers.
+when javascript is enabled, accordion will contains aria-labelledby, aria-expanded and aria-controls for screen readers.
+
+## Design usage guidelines
+Where possible, the defaults should remain as they are to ensure we remain consistent across the platform, though there are a few areas where you may need to step
+outside these guidelines, this offers an insight into the design decisions to best ensure you understand context and usage.
+
+- `expandIcon`: Where possible, we should ensure that this remains unchanged as the chevrons are a universal indicator of expandable content. However, there are scenarios where this may not work for you. In these scenarios, it is suggested you use one of the following icons: `plus-small` (Plus is a little too big to align nicely with the content of the label)
+- `collapseIcon`: Where possible, we should ensure that this remains unchanged as the chevrons are a universal indicator of collapsable content. However, there are scenarios where this may not work for you. In these scenarios, it is suggested you use one of the following icons: `minus`
+- `leftAligned`: Usage for this parameter depends largely on the content surrounding it. There are some cases where we have a list where some items are expandable while others are not so to avoid a misalignment due to the presence of icons or not, we've decided that when in a list the accordions would have the icons on the right. When used as a single component on the page, the icon is on the left instead.

package/src/components/accordion/_template.njk

@@ -2,32 +2,53 @@
 
 {% if params.content %}
     {%- set accordionId %}
-    {%- if item.id -%}
-        {{ item.id }}
-    {%- else -%}
-        {# 
-        if the id is missing it will be constructed using:
-        [component name]-[item triggerLabel]-[index] 
-        e.g. period-next-week-2
-        #}
-        {%- if params.name -%}{{ params.name | lower | trim | replace(' ', '-')}}{%- else -%}
-        {{ item.triggerLabel | lower | trim | replace(' ', '-') }}{%- endif -%}
-    {%- endif -%}
+      {%- if item.id -%}
+          {{ item.id }}
+      {%- else -%}
+          {# 
+          if the id is missing it will be constructed using:
+          [component name]-[item triggerLabel]-[index] 
+          e.g. period-next-week-2
+          #}
+          {%- if params.name -%}{{ params.name | lower | trim | replace(' ', '-')}}{%- else -%}
+          {{ item.triggerLabel | lower | trim | replace(' ', '-') }}{%- endif -%}
+      {%- endif -%}
     {% endset -%}
     {%- set headerTag %}
-    {%- if params.triggerIsHeader -%}
-        {{params.triggerIsHeader}}
-    {%- else -%}
-        p
-    {%- endif -%}
+      {%- if params.triggerIsHeader -%}
+          {{params.triggerIsHeader}}
+      {%- else -%}
+          p
+      {%- endif -%}
+    {% endset -%}
+    {%- set collapseIcon -%}
+      {%- if params.collapseIcon -%}
+        {{params.collapseIcon}}
+      {%- else -%}
+        chevron-up
+      {%- endif -%}
+    {% endset -%}
+    {%- set expandIcon %}
+      {%- if params.expandIcon -%}
+        {{params.expandIcon}}
+      {%- else -%}
+        chevron-down
+      {% endif -%}
     {% endset -%}
     <div class="mds-accordion" id="{{accordionId}}" {% if params.breakpoint %}data-bp="{{params.breakpoint}}"{% endif %} data-test="accordion">
         <{{headerTag}} class="mds-accordion__trigger{%if params.triggerNoJsHidden %} mds-display-none{% endif %}" data-test="accordion-trigger">
           <span {% if params.headerClass %}class="{{params.headerClass}}"{% endif %}>
+            {% if params.leftAligned %}
+              {{- MdsIcon({ iconName: collapseIcon, classes: 'mds-icon--before mds-accordion__icon-collapse'}) -}}
+              {{- MdsIcon({ iconName: expandIcon, classes: 'mds-icon--before mds-accordion__icon-expand'}) -}}
+            {% endif %}
             <span class="mds-accordion__trigger-label" {%- if params.triggerLabelActive %} data-labelinverse="{{params.triggerLabelActive}}"{% endif %}>
               {{- params.triggerLabel -}}
             </span>
-            {{- MdsIcon({ iconName: 'chevron-right', classes: 'mds-icon--after'}) -}}
+            {% if not params.leftAligned %}
+              {{- MdsIcon({ iconName: collapseIcon, classes: 'mds-icon--after mds-accordion__icon-collapse'}) -}}
+              {{- MdsIcon({ iconName: expandIcon, classes: 'mds-icon--after mds-accordion__icon-expand'}) -}}
+            {% endif %}
           </span>
         </{{headerTag}}>
         <div id="accordion-content-{{accordionId}}" class="mds-accordion__content" {%if not params.triggerNoJsHidden %}aria-labelledby="accordion-trigger-{{accordionId}}" {% endif %}data-test="accordion-content">{{params.content | safe}}</div>

package/src/components/accordion/accordion.config.js

@@ -15,6 +15,20 @@ module.exports = {
           '<dl class="mds-list mds-list--definition mds-list--border"><dt class="mds-list__key">Hours</dt><dd class="mds-list__value">Full time</dd><dt class="mds-list__key">Contract</dt><dd class="mds-list__value">Permanent</dd><dt class="mds-list__key">Industry</dt><dd class="mds-list__value">Accountant, Manager</dd></dl>',
       },
     },
+    {
+      name: 'Alternative icons',
+      context: {
+        name: 'Alt Icons',
+        triggerLabel: 'View more',
+        triggerLabelActive: 'View less',
+        triggerNoJsHidden: true,
+        collapseIcon: 'minus',
+        expandIcon: 'plus-small',
+        leftAligned: true,
+        content:
+          '<div class="mds-grid-row"><div class="mds-grid-col-6"><div class="mds-form-field"><div class="mds-form-element mds-form-element--multiselect js-mds-multiselect" data-test="multiselect"><fieldset><div class="mds-form-label"><legend class="mds-form-label__label">Role</legend></div><div class="mds-multiselect"><div class="mds-multiselect__checkbox-group"><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-7" value="7"><label for="Role-7">Academic Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-1" value="1"><label for="Role-1">Community Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-10" value="10"><label for="Role-10">Dispensing Assistant</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-4" value="4" checked=""><label for="Role-4">Hospital Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-6" value="6"><label for="Role-6">Industrial Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-3" value="3"><label for="Role-3">Locum Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-11" value="11"><label for="Role-11">Medicines Counter Assistant</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-2" value="2"><label for="Role-2">Pharmacy Manager</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-12" value="12"><label for="Role-12">Pharmacy Student</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-9" value="9"><label for="Role-9">Pharmacy Technician</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-8" value="8" checked=""><label for="Role-8">Pre-reg Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513016" value="513016"><label for="Role-513016">Primary Care Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513015" value="513015"><label for="Role-513015">Region/Area Manager</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-5" value="5"><label for="Role-5">Senior Management</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513014" value="513014"><label for="Role-513014">Superintendent Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-13" value="13"><label for="Role-13">Other Pharmacy roles</label></div></div></div></fieldset><fieldset><div class="mds-form-label"><legend class="mds-form-label__label">Industry</legend></div><div class="mds-multiselect"><div class="mds-multiselect__checkbox-group"><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-7" value="7"><label for="Role-7">Academic Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-1" value="1"><label for="Role-1">Community Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-10" value="10"><label for="Role-10">Dispensing Assistant</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-4" value="4" checked=""><label for="Role-4">Hospital Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-6" value="6"><label for="Role-6">Industrial Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-3" value="3"><label for="Role-3">Locum Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-11" value="11"><label for="Role-11">Medicines Counter Assistant</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-2" value="2"><label for="Role-2">Pharmacy Manager</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-12" value="12"><label for="Role-12">Pharmacy Student</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-9" value="9"><label for="Role-9">Pharmacy Technician</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-8" value="8" checked=""><label for="Role-8">Pre-reg Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513016" value="513016"><label for="Role-513016">Primary Care Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513015" value="513015"><label for="Role-513015">Region/Area Manager</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-5" value="5"><label for="Role-5">Senior Management</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513014" value="513014"><label for="Role-513014">Superintendent Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-13" value="13"><label for="Role-13">Other Pharmacy roles</label></div></div></div></fieldset></div></div></div></div>',
+      },
+    },
     {
       name: 'Collapsed Paragraph',
       context: {

package/src/components/accordion/accordion.njk

@@ -10,6 +10,9 @@
   triggerIsHeader: triggerIsHeader,
   headerClass: headerClass,
   breakpoint: breakpoint,
-  content: content
+  content: content,
+  leftAligned: leftAligned,
+  expandIcon: expandIcon,
+  collapseIcon: collapseIcon
 }) }}
 <hr />

package/src/components/accordion/accordion.scss

@@ -6,10 +6,27 @@
   display: block;
 }
 
-html:not(.js) .mds-accordion .mds-accordion__trigger .mds-icon{
-  display: none;
+.mds-accordion {
+  & .mds-icon.mds-accordion__icon {
+    &-expand {
+      display: inline-block;
+     }
+     &-collapse {
+       display: none;
+     }
+  }
+  &--expanded {
+    & .mds-icon.mds-accordion__icon {
+      &-expand {
+        display: none;
+       }
+       &-collapse {
+         display: inline-block;
+       }
+    }
+  }
 }
 
-.mds-accordion:not(.mds-accordion--expanded) .mds-icon{
-  transform: rotate(90deg);
+html:not(.js) .mds-accordion .mds-accordion__trigger .mds-icon{
+  display: none;
 }

package/src/components/icons/icons.scss

@@ -56,10 +56,10 @@
 }
 
 .mds-icon--before {
-  margin-right: 0.66em;
+  margin-right: 0.5em;
 }
 .mds-icon--after {
-  margin-left: 0.66em;
+  margin-left: 0.5em;
 }
 
 .mds-icon--spinner {

package/src/components/inputs/combobox/combobox.scss

@@ -13,9 +13,21 @@
   overflow-y: scroll;
   @include z-index();
 
+  & .mds-combobox-loading {
+    padding: $mds-size-baseline * 2 0;
+    & .mds-icon--spinner {
+      display: block;
+      margin: 0 auto;
+    }
+  }
+
   & .mds-combobox__option {
+    &--marked {
+      font-weight: 700;
+    }
     @extend .mds-font-pica;
-    padding: $mds-size-baseline;
+    padding: $mds-size-baseline * 2 $mds-size-baseline * 3;
+    border-bottom: 1px solid $mds-color-neutral-lighter;
     background-color: $mds-color-neutral-white;
 
     &.mds-combobox__option--focused,
@@ -23,5 +35,8 @@
       cursor: pointer;
       background-color: $mds-color-neutral-lighter;
     }
+    &:last {
+      border-bottom: none;
+    }
   }
 }

package/src/components/inputs/combobox/vue-components/Combobox.vue

@@ -17,11 +17,11 @@
       :placeholder="placeholder"
       :aria-labelledby="labelId"
       :aria-owns="listBoxId"
-      :aria-expanded="expanded"
+      :aria-expanded="ariaExpanded"
       :activeDescendent="selectedOptionId"
       v-model="inputValue"
     />
-    <ListBox :id="listBoxId" :aria-labelledby="labelId" :hidden="listBoxHidden">
+    <ListBox :id="listBoxId" :aria-labelledby="labelId" :hidden="listBoxHidden" :isLoading="isLoading">
       <template>
         <ListBoxOption
           v-for="(option, index) in visibleOptions"
@@ -30,6 +30,7 @@
           :id="`${optionId}-${index}`"
           :focused="selectedOption === option"
           @mousedown="clickOption(option)"
+          :searchValue="searchValue"
         />
       </template>
     </ListBox>
@@ -80,15 +81,24 @@ export default {
       type: Boolean,
       default: true,
     },
+    iconpath: {
+      type: String,
+      default: '/assets/icons.svg',
+    },
   },
   data() {
     return {
-      expanded: 'false',
+      expanded: false,
       selected: null,
       chosen: null,
       searchValue: this.$props.value,
     };
   },
+  provide() {
+    return {
+      iconPath: this.iconpath,
+    };
+  },
   computed: {
     inputValue: {
       get() {
@@ -138,6 +148,9 @@ export default {
     optionId() {
       return `${this.comboboxid}-option`;
     },
+    isLoading() {
+      return this.options.length === 0 && this.expanded;
+    },
     selectedOptionId() {
       const index = this.visibleOptions.indexOf(this.selectedOption);
       if (index > -1) {
@@ -146,7 +159,7 @@ export default {
       return false;
     },
     listBoxHidden() {
-      return this.expanded === 'false' || this.visibleOptions.length === 0;
+      return !this.expanded;
     },
     lastOptionIndex() {
       return this.visibleOptions.length - 1;
@@ -157,13 +170,17 @@ export default {
       }
       return `${this.visibleOptions.length} ${this.resultmessage}`;
     },
+    ariaExpanded() {
+      // These must be strings to apply as an aria attribute of the same name
+      return this.expanded ? 'true' : 'false';
+    },
   },
   methods: {
     makeActive() {
-      this.expanded = 'true';
+      this.expanded = true;
     },
     makeInactive() {
-      this.expanded = 'false';
+      this.expanded = false;
     },
     clickOption(option = this.selectedOption) {
       this.chosenOption = option;

package/src/components/inputs/combobox/vue-components/ListBox.vue

@@ -1,5 +1,13 @@
 <template>
   <ul class="mds-combobox__listbox" role="listbox" :hidden="hidden">
+    <li v-if="isLoading" class="mds-combobox-loading">
+      <!-- Ideally we would pass this in as a slot in the custom element with MdsIcon, but something is borked
+      with passing slots in Chrome https://github.com/karol-f/vue-custom-element/issues/162 -->
+      <svg aria-hidden="true" focusable="true" class="mds-icon mds-icon--spinner mds-icon--after">
+        <use :href="`${iconPath}#spinner`" />
+      </svg>
+      <span class="mds-visually-hidden">Loading...</span>
+    </li>
     <slot></slot>
   </ul>
 </template>
@@ -12,6 +20,11 @@ export default {
       type: Boolean,
       default: true,
     },
+    isLoading: {
+      type: Boolean,
+      default: true,
+    },
   },
+  inject: ['iconPath'],
 };
 </script>

package/src/components/inputs/combobox/vue-components/ListBoxOption.vue

@@ -5,9 +5,8 @@
     :class="{ 'mds-combobox__option--focused': focused }"
     :aria-selected="focused.toString()"
     @mousedown="$emit('mousedown', $event)"
-  >
-    {{ option.label }}
-  </li>
+    v-html="highlightOption()"
+  />
 </template>
 
 <script>
@@ -22,6 +21,24 @@ export default {
       type: Boolean,
       default: false,
     },
+    searchValue: {
+      type: String,
+      default: '',
+    },
+  },
+  watch: {
+    searchValue(newSearchValue) {
+      return newSearchValue;
+    },
+  },
+  methods: {
+    highlightOption() {
+      const optionLabelHtml = this.option.label.replace(
+        new RegExp(this.searchValue, 'gi'),
+        (match) => `<span class="mds-combobox__option--marked">${match}</span>`
+      );
+      return optionLabelHtml;
+    },
   },
 };
 </script>

package/src/components/inputs/multi-select/multi-select.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Multi-Select',
-  status: 'prototype',
+  status: 'wip',
   context: {
     labelText: 'Role',
     name: 'Role',

package/src/components/inputs/select/select.config.js

@@ -32,15 +32,15 @@ module.exports = {
         value: "option-2",
         options: [
           {
-            label: "Option 1",
+            labelText: "Option 1",
             value: "option-1",
           },
           {
-            label: "Option 2",
+            labelText: "Option 2",
             value: "option-2",
           },
           {
-            label: "Option 3",
+            labelText: "Option 3",
             value: "option-3",
           },
         ],

package/src/components/skip-link/README.md

@@ -0,0 +1,11 @@
+All pages must include a skip link at the top
+
+Including the skip link component gives users the option to bypass the top-level navigation links and jump to the main content on a page.
+
+The skip link component is visually hidden until a keyboard press activates it.
+
+## Parameters
+
+- `text`: Text of the link, e.g: Skip to main content - **required**,
+- `href`: id of the anchor - **required**,
+- `accessKey`: default is 'S' but you can specify another key if you'd like - **optional**,

package/src/components/skip-link/_macro.njk

@@ -0,0 +1,3 @@
+{% macro MdsSkipLink(params) %}
+  {%- include "./_template.njk" -%}
+{% endmacro %}

package/src/components/skip-link/_template.njk

@@ -0,0 +1,3 @@
+<div class="mds-skip-to-content">
+  <a class="mds-skip-to-content__link" accesskey="{{ params.accessKey | default('S')}}" title="Access key: {{ params.accessKey | default('S')}}" href="{{ params.href }}">{{ params.text }}</a>
+</div>

package/src/components/skip-link/skip-link.njk

@@ -0,0 +1,8 @@
+{% from "./skip-link/_macro.njk" import MdsSkipLink %}
+
+<p>To view the skip link component tab to this example, or click inside this example and press tab.</p>
+
+{{ MdsSkipLink({
+  text: "Skip to main content",
+  href: "#main"
+}) }}

package/src/components/skip-link/skip-link.scss

@@ -0,0 +1,16 @@
+.mds-skip-to-content__link {
+  background-color: $mds-color-neutral-lightest;
+  border: 5px solid $mds-color-border;
+  @extend .mds-font-double-pica;
+  font-weight: bold;
+  left: -10000px;
+  padding: $mds-size-baseline * 6;
+  position: absolute;
+  text-align: center;
+  border-radius: $mds-size-border-radius;
+
+  &:focus {
+    left: 0;
+    @include z-index(modal);
+  }
+}

package/src/icons/chevron-down.svg

@@ -1,46 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   id="svg16"
-   version="1.1"
-   viewBox="0 0 24 24"
-   height="24px"
-   width="24px">
-  <metadata
-     id="metadata22">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Icon / Left Chevron</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs20" />
-  <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
-  <title
-     id="title10">Icon / Left Chevron</title>
-  <desc
-     id="desc12">Created with Sketch.</desc>
-  <g
-     transform="rotate(-90,11.983124,11.999999)"
-     fill-rule="evenodd"
-     fill="none"
-     stroke-width="1"
-     stroke="none"
-     id="Icon-/-Left-Chevron">
-    <path
-       transform="rotate(-180,11.983124,12)"
-       fill-rule="nonzero"
-       fill="#000000"
-       id="Shape"
-       d="m 19.466249,12 c 8.17e-4,0.661702 -0.283393,1.291701 -0.780002,1.729 l -11.152,9.811 C 6.7656561,24.184929 5.6227738,24.098329 4.9601377,23.34495 4.2975015,22.591572 4.3574889,21.446984 5.095247,20.767 l 9.752,-8.579 c 0.05415,-0.04747 0.08521,-0.115986 0.08521,-0.188 0,-0.07201 -0.03105,-0.140531 -0.08521,-0.188 l -9.752,-8.579 C 4.3574889,2.5530156 4.2975015,1.408428 4.9601377,0.65504948 5.6227738,-0.098329 6.7656561,-0.18492928 7.534247,0.46 l 11.148,9.808 c 0.497811,0.438048 0.78337,1.0689 0.784002,1.732 z" />
-  </g>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon/ Chevron/ D/ 12px_32</title>
+    <g id="Icon/-Chevron/-D/-12px_32" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M24.1012081,11.2189953 C24.9467637,10.308397 26.3704076,10.2556695 27.2810059,11.101225 C28.1088225,11.8699119 28.2276551,13.1163577 27.6071411,14.0207774 L27.3987762,14.2810228 L17.648784,24.7810143 C16.8327937,25.6597731 15.4899036,25.733003 14.5860966,25.000704 L14.351216,24.7810143 L4.6012238,14.2810228 C3.75566826,13.3704245 3.80839581,11.9467805 4.71899409,11.101225 C5.5468107,10.3325381 6.79863201,10.306234 7.65467282,10.9919502 L7.89879186,11.2189953 L16,19.942222 L24.1012081,11.2189953 Z" id="Path-2-Copy-15" fill="#001FFF" transform="translate(16.000000, 18.000000) scale(-1, 1) translate(-16.000000, -18.000000) "></path>
+    </g>
+</svg>

package/src/icons/chevron-left.svg

@@ -1,9 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
-    <title>Icon / Left Chevron</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Icon-/-Left-Chevron" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M19.4662488,12 C19.467066,12.6617023 19.1828559,13.2917013 18.686247,13.729 L7.53424704,23.54 C6.76565608,24.1849293 5.62277383,24.098329 4.96013766,23.3449505 C4.29750148,22.591572 4.35748888,21.4469844 5.09524704,20.767 L14.847247,12.188 C14.9014018,12.1405308 14.9324563,12.0720143 14.9324563,12 C14.9324563,11.9279857 14.9014018,11.8594692 14.847247,11.812 L5.09524704,3.233 C4.35748888,2.55301564 4.29750148,1.40842796 4.96013766,0.655049482 C5.62277383,-0.0983289982 6.76565608,-0.184929277 7.53424704,0.46 L18.682247,10.268 C19.1800581,10.7060475 19.4656174,11.3369004 19.4662488,12 Z" id="Shape" fill="#000000" fill-rule="nonzero" transform="translate(11.983124, 12.000000) rotate(-180.000000) translate(-11.983124, -12.000000) "></path>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon/ Chevron/ L/ 12px_32</title>
+    <g id="Icon/-Chevron/-L/-12px_32" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M24.1012081,9.21899529 C24.9467637,8.30839702 26.3704076,8.25566946 27.2810059,9.101225 C28.1088225,9.86991186 28.2276551,11.1163577 27.6071411,12.0207774 L27.3987762,12.2810228 L17.648784,22.7810143 C16.8327937,23.6597731 15.4899036,23.733003 14.5860966,23.000704 L14.351216,22.7810143 L4.6012238,12.2810228 C3.75566826,11.3704245 3.80839581,9.94678055 4.71899409,9.101225 C5.5468107,8.33253815 6.79863201,8.30623401 7.65467282,8.99195019 L7.89879186,9.21899529 L16,17.942222 L24.1012081,9.21899529 Z" id="Path-2-Copy-15" fill="#001FFF" fill-rule="nonzero" transform="translate(16.000000, 16.000000) rotate(90.000000) translate(-16.000000, -16.000000) "></path>
     </g>
 </svg>

package/src/icons/chevron-right.svg

@@ -1,9 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
-    <title>Icon / Right Chevron</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Icon-/-Right-Chevron" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M19.5000018,12 C19.500819,12.6617023 19.2166089,13.2917013 18.72,13.729 L7.568,23.54 C6.79940904,24.1849293 5.65652679,24.098329 4.99389062,23.3449505 C4.33125444,22.591572 4.39124184,21.4469844 5.129,20.767 L14.881,12.188 C14.9351547,12.1405308 14.9662092,12.0720143 14.9662092,12 C14.9662092,11.9279857 14.9351547,11.8594692 14.881,11.812 L5.129,3.233 C4.39124184,2.55301564 4.33125444,1.40842796 4.99389062,0.655049482 C5.65652679,-0.0983289982 6.79940904,-0.184929277 7.568,0.46 L18.716,10.268 C19.213811,10.7060475 19.4993703,11.3369004 19.5000018,12 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon/ Chevron/ R/ 12px_32</title>
+    <g id="Icon/-Chevron/-R/-12px_32" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M24.1012081,9.21899529 C24.9467637,8.30839702 26.3704076,8.25566946 27.2810059,9.101225 C28.1088225,9.86991186 28.2276551,11.1163577 27.6071411,12.0207774 L27.3987762,12.2810228 L17.648784,22.7810143 C16.8327937,23.6597731 15.4899036,23.733003 14.5860966,23.000704 L14.351216,22.7810143 L4.6012238,12.2810228 C3.75566826,11.3704245 3.80839581,9.94678055 4.71899409,9.101225 C5.5468107,8.33253815 6.79863201,8.30623401 7.65467282,8.99195019 L7.89879186,9.21899529 L16,17.942222 L24.1012081,9.21899529 Z" id="Path-2-Copy-15" fill="#001FFF" fill-rule="nonzero" transform="translate(16.000000, 16.000000) scale(-1, 1) rotate(90.000000) translate(-16.000000, -16.000000) "></path>
     </g>
 </svg>

package/src/icons/chevron-up.svg

@@ -1,46 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   id="svg16"
-   version="1.1"
-   viewBox="0 0 24 24"
-   height="24px"
-   width="24px">
-  <metadata
-     id="metadata22">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Icon / Left Chevron</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs20" />
-  <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
-  <title
-     id="title10">Icon / Left Chevron</title>
-  <desc
-     id="desc12">Created with Sketch.</desc>
-  <g
-     transform="rotate(90,11.983124,12)"
-     fill-rule="evenodd"
-     fill="none"
-     stroke-width="1"
-     stroke="none"
-     id="Icon-/-Left-Chevron">
-    <path
-       transform="rotate(-180,11.983124,12)"
-       fill-rule="nonzero"
-       fill="#000000"
-       id="Shape"
-       d="m 19.466249,12 c 8.17e-4,0.661702 -0.283393,1.291701 -0.780002,1.729 l -11.152,9.811 C 6.7656561,24.184929 5.6227738,24.098329 4.9601377,23.34495 4.2975015,22.591572 4.3574889,21.446984 5.095247,20.767 l 9.752,-8.579 c 0.05415,-0.04747 0.08521,-0.115986 0.08521,-0.188 0,-0.07201 -0.03105,-0.140531 -0.08521,-0.188 l -9.752,-8.579 C 4.3574889,2.5530156 4.2975015,1.408428 4.9601377,0.65504948 5.6227738,-0.098329 6.7656561,-0.18492928 7.534247,0.46 l 11.148,9.808 c 0.497811,0.438048 0.78337,1.0689 0.784002,1.732 z" />
-  </g>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon/ Chevron/ U/ 12px_32</title>
+    <g id="Icon/-Chevron/-U/-12px_32" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M24.1012081,11.2189953 C24.9467637,10.308397 26.3704076,10.2556695 27.2810059,11.101225 C28.1088225,11.8699119 28.2276551,13.1163577 27.6071411,14.0207774 L27.3987762,14.2810228 L17.648784,24.7810143 C16.8327937,25.6597731 15.4899036,25.733003 14.5860966,25.000704 L14.351216,24.7810143 L4.6012238,14.2810228 C3.75566826,13.3704245 3.80839581,11.9467805 4.71899409,11.101225 C5.5468107,10.3325381 6.79863201,10.306234 7.65467282,10.9919502 L7.89879186,11.2189953 L16,19.942222 L24.1012081,11.2189953 Z" id="Path-2-Copy-15" fill="#001FFF" transform="translate(16.000000, 18.000000) scale(-1, -1) translate(-16.000000, -18.000000) "></path>
+    </g>
+</svg>

package/src/icons/close.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon/ x/ 12px_32</title>
+    <g id="Icon/-x/-12px_32" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M22.8466361,5.98095681 C23.7306343,5.22381788 25.0626572,5.2636673 25.8994949,6.10050506 C26.7781746,6.97918472 26.7781746,8.40380592 25.8994949,9.28248558 L25.8994949,9.28248558 L19.1804953,15.9994953 L25.8994949,22.7175144 C26.7781746,23.5961941 26.7781746,25.0208153 25.8994949,25.8994949 C25.0626572,26.7363327 23.7306343,26.7761821 22.8466361,26.0190432 L22.7175144,25.8994949 L15.9994953,19.1804953 L9.28248558,25.8994949 L9.15336393,26.0190432 C8.26936568,26.7761821 6.93734283,26.7363327 6.10050506,25.8994949 C5.22182541,25.0208153 5.22182541,23.5961941 6.10050506,22.7175144 L6.10050506,22.7175144 L12.8184953,15.9994953 L6.10050506,9.28248558 C5.22182541,8.40380592 5.22182541,6.97918472 6.10050506,6.10050506 C6.93734283,5.2636673 8.26936568,5.22381788 9.15336393,5.98095681 L9.28248558,6.10050506 L15.9994953,12.8184953 L22.7175144,6.10050506 Z" id="Combined-Shape" fill="#001FFF"></path>
+    </g>
+</svg>