@madgex/design-system 6.3.8 → 6.3.10

package/src/components/inputs/single-checkbox/single-checkbox.njk

@@ -1,6 +1,5 @@
 {% from "./inputs/single-checkbox/_macro.njk" import MdsSingleCheckbox %}
 
-<em>Nunjucks</em>
 <div class="mds-form-field">
   {{- MdsSingleCheckbox({
     name: name,
@@ -18,63 +17,3 @@
     i18n: i18n
   }) -}}
 </div>
-
-<em>Vue</em>
-<div class="mds-form-field">
-
-    <div id="vue-{{id}}"></div>
-    {% set option = (options[0] or options) %}
-    <script type="module" async>
-      {% include '_import-MdsLibrary.njk' %}
-
-      vue.createApp({
-        data() {
-          return {
-            option: {{ option | dump | safe}},
-            i18n: {{(i18n or {}) | dump | safe}},
-            optional: {{optional or false}},
-            disabled: {{disabled or false}},
-            isChecked: false,
-            helpText: "{{helpText or ''}}",
-            error: {{state === 'error'}},
-            validationError: "{{validationError or ''}}",
-            describedBy: "{{describedBy or ''}}"
-          };
-        },
-        methods: {
-          createDescribedBy(ids) {
-            return [this.describedBy, ...ids].filter(id => !!id).join(' ');
-          }
-        },
-        template: `<div>
-          <MdsFormItem :error="error">
-            <template v-if="validationError" #error>{{validationError}}</template>
-            <template v-if="helpText" #help>{{helpText}}</template>
-            <template #default="slotProps">
-              <MdsSingleCheckbox
-                id="{{id}}-vue-version"
-                name="{{name}}"
-                :describedBy="createDescribedBy([slotProps.errorMessageId, slotProps.helpMessageId])"
-                classes="{{classes}}"
-                state="{{state}}"
-                :value="option.value"
-                v-model="isChecked"
-                :disabled="disabled"
-                :optional="optional"
-                :i18n="i18n" >{{option.labelText | safe}}
-              </MdsSingleCheckbox>
-            </template>
-          </MdsFormItem>
-        </div>`
-
-      }).use(MdsLibrary).mount('#vue-{{id}}');
-    </script>
-
-</div>
-
-{% if id === "error" %}
-  <div id="topcv-example">Learn more about TopCV.</div>
-{% endif %}
-
-
-<div style="margin-bottom:40px"></div>

package/src/components/inputs/text-editor/text-editor.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Text Editor',
-  meta: { status: { njk: 'wip' } },
+  status: 'wip',
   context: {
     variantTitle: 'Default editor',
     id: 'default-editor',

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

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Textarea',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
   context: {
     variantTitle: 'Example Textarea',
     name: 'Example Textarea',

package/src/components/modal/modal.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   title: 'Modal',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
 };

package/src/components/notification/notification.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Notifications',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
   context: {
     text: 'Notification - Success',
     classes: 'mds-button--plain js-notification-example',

package/src/components/pagination/pagination.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   title: 'Pagination',
   label: 'Pagination',
-  meta: { status: { njk: 'ready', vue: 'wip' } },
+  status: 'ready',
   context: {
     fractalTitle: 'Pagination',
     prevUrl: '/prev-page',

package/src/components/pagination/pagination.njk

@@ -1,8 +1,6 @@
 {% from "./pagination/_macro.njk" import MdsPagination %}
 
-{# NUNJUCKS VERSION #}
 <h2>{{ fractalTitle }}</h2>
-<em>Nunjucks </em>
 
 {{ MdsPagination({
   name: name,
@@ -16,41 +14,3 @@
   id: id,
   i18n: i18n
 }) }}
-
-{# VUE 3 VERSION #}
-<em>Vue</em>
-
-<div id="vue-{{id}}"></div>
-
-<script type="module" async>
-  {% include '_import-MdsLibrary.njk' %}
-  const { MdsPagination} = MdsLibrary;
-
-  vue.createApp({
-    components: { MdsPagination },
-    data() {
-      return {
-        i18n: {{ i18n | dump | safe }},
-        hideIcons: {{hideIcons or false}},
-      };
-    },
-    template: `<div>
-      <MdsPagination
-        name="{{ name }}"
-        classes="{{ classes }}"
-        prev-url="{{ prevUrl }}"
-        prev-extra-label="{{ prevExtraLabel }}"
-        next-url="{{ nextUrl }}"
-        next-extra-label="{{ nextExtraLabel }}"
-        back-to-url="{{ backToUrl }}"
-        :i18n="i18n" 
-        :hide-icons="hideIcons"
-      />
-    </div>`
-
-  }).mount('#vue-{{id}}');
-</script>
-
-    
-
-

package/src/components/pagination-numbers/pagination-numbers.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Pagination numbers',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
   label: 'Pagination numbers',
   context: {
     pageUrlTemplate: '/article/{pageNo}/my-seo-things',

package/src/components/popover/popover.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   title: 'Popover',
   label: 'Popover',
-  meta: { status: { njk: 'ready', vue: 'wip' } },
+  status: 'ready',
   context: {
     id: 'simple-popover',
     text: 'Trigger <span>1</span>',

package/src/components/popover/popover.njk

@@ -1,6 +1,5 @@
 {% from "./popover/_macro.njk" import MdsPopover %}
 
-<em>Nunjucks</em>
 <div style="padding: 10px">
 {{ MdsPopover({
   id: id,
@@ -10,26 +9,3 @@
   content: content
 }) }}
 </div>
-
-<em>Vue</em>
-<div  id="vue-{{id}}" style="padding: 10px"></div>
-
-<script async type="module">
-  {% include '_import-MdsLibrary.njk' %}
-  const { MdsPopover } = MdsLibrary;
-
-  vue.createApp({
-    components: { MdsPopover },
-    data() {
-      return {
-        placement: "{{placement}}" || undefined, 
-      };
-    },
-    template: `
-    <MdsPopover id="{{id}}" classes="{{classes}}" :placement="placement">
-          {{text | safe}}
-          <template #content>{{content | safe}}</template>
-    </MdsPopover>
-    `
-  }).mount('#vue-{{id}}');
-</script>

package/src/components/section-title/title-with-action.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'SectionTitle',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
   context: {
     title: 'Similar jobs',
     headingTag: 'h3',

package/src/components/section-title/title.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'SectionTitle',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
   context: {
     title: 'Similar jobs',
     classes: '',

package/src/components/skip-link/skip-link.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   title: 'Skip Link',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
 };

package/src/components/switch-state/switch-state.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Switch State',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
   label: 'Switch State',
   context: {
     inverseLabel: 'Remove Job',

package/src/components/tabs/tabs.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Tabs',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
   label: 'Tabs',
   context: {
     name: 'Range',

package/src/components/toggle-button-links/toggle-button-links.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'ToggleButtonLinks',
-  meta: { status: { njk: 'wip', vue: 'wip' } },
+  status: 'wip',
   context: {
     items: [
       {

package/src/components/toggle-button-links/toggle-button-links.njk

@@ -1,39 +1,12 @@
 {% from "./toggle-button-links/_macro.njk" import MdsToggleButtonLinks %}
 
-<h3>Nunjucks</h3>
+{% for item in items %}
+  {{ MdsToggleButtonLinks({
+      id: item.id,
+      i18n: item.i18n,
+      options: item.options,
+      activeHref: item.activeHref
+    }) 
+  }}
+{% endfor %}
 
-<div class="nunjucks-items">
-  {% for item in items %}
-    {{ MdsToggleButtonLinks({
-        id: item.id,
-        i18n: item.i18n,
-        options: item.options,
-        activeHref: item.activeHref
-      }) 
-    }}
-  {% endfor %}
-  </div>
-  <h3 style="margin-top: 10px">Vue</h3>
-  {% for item in items %}
-
-     <div id="vue-{{item.id}}"></div>
-
-    <script type="module" async>
-      {% include '_import-MdsLibrary.njk' %}    
-      vue.createApp({
-        data() {
-          return {
-            id: "{{ item.id}}",
-            i18n: {{(item.i18n or {}) | dump | safe}},
-            options: {{ item.options | dump | safe}},
-            activeHref: "{{ item.activeHref }}",
-            
-          };
-        },
-        template: `<MdsToggleButtonLinks :id="id" :i18n="i18n" :options="options" v-model="activeHref" />`
-
-      }).use(MdsLibrary).mount('#vue-{{item.id}}');
-    </script>
-
-
-  {% endfor %}

package/src/icons/{info.svg → information.svg}

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23984 2.22729 1.21446 3.47672 0.608962 4.93853C0.00346057 6.40034 -0.154966 8.00887 0.153716 9.56072C0.462397 11.1126 1.22432 12.538 2.34314 13.6569C3.46196 14.7757 4.88743 15.5376 6.43928 15.8463C7.99112 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0V0ZM8.16667 3.33333C8.36445 3.33333 8.55779 3.39198 8.72223 3.50186C8.88668 3.61174 9.01486 3.76792 9.09054 3.95065C9.16623 4.13338 9.18604 4.33444 9.14745 4.52842C9.10887 4.7224 9.01362 4.90059 8.87377 5.04044C8.73392 5.18029 8.55574 5.27553 8.36176 5.31412C8.16777 5.3527 7.96671 5.3329 7.78398 5.25721C7.60126 5.18153 7.44508 5.05335 7.3352 4.8889C7.22531 4.72445 7.16666 4.53111 7.16666 4.33333C7.16666 4.06812 7.27202 3.81376 7.45956 3.62623C7.64709 3.43869 7.90145 3.33333 8.16667 3.33333ZM9.66667 12.3333H7C6.82319 12.3333 6.65362 12.2631 6.52859 12.1381C6.40357 12.013 6.33333 11.8435 6.33333 11.6667C6.33333 11.4899 6.40357 11.3203 6.52859 11.1953C6.65362 11.0702 6.82319 11 7 11H7.5C7.5442 11 7.58659 10.9824 7.61785 10.9512C7.64911 10.9199 7.66666 10.8775 7.66666 10.8333V7.83333C7.66666 7.78913 7.64911 7.74674 7.61785 7.71548C7.58659 7.68423 7.5442 7.66667 7.5 7.66667H7C6.82319 7.66667 6.65362 7.59643 6.52859 7.4714C6.40357 7.34638 6.33333 7.17681 6.33333 7C6.33333 6.82319 6.40357 6.65362 6.52859 6.5286C6.65362 6.40357 6.82319 6.33333 7 6.33333H7.66666C8.02029 6.33333 8.35943 6.47381 8.60947 6.72386C8.85952 6.97391 9 7.31304 9 7.66667V10.8333C9 10.8775 9.01756 10.9199 9.04881 10.9512C9.08007 10.9824 9.12246 11 9.16667 11H9.66667C9.84348 11 10.013 11.0702 10.1381 11.1953C10.2631 11.3203 10.3333 11.4899 10.3333 11.6667C10.3333 11.8435 10.2631 12.013 10.1381 12.1381C10.013 12.2631 9.84348 12.3333 9.66667 12.3333Z" fill="inherit"/>
+  <path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23984 2.22729 1.21446 3.47672 0.608962 4.93853C0.00346057 6.40034 -0.154966 8.00887 0.153716 9.56072C0.462397 11.1126 1.22432 12.538 2.34314 13.6569C3.46196 14.7757 4.88743 15.5376 6.43928 15.8463C7.99112 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0V0ZM8.16667 3.33333C8.36445 3.33333 8.55779 3.39198 8.72223 3.50186C8.88668 3.61174 9.01486 3.76792 9.09054 3.95065C9.16623 4.13338 9.18604 4.33444 9.14745 4.52842C9.10887 4.7224 9.01362 4.90059 8.87377 5.04044C8.73392 5.18029 8.55574 5.27553 8.36176 5.31412C8.16777 5.3527 7.96671 5.3329 7.78398 5.25721C7.60126 5.18153 7.44508 5.05335 7.3352 4.8889C7.22531 4.72445 7.16666 4.53111 7.16666 4.33333C7.16666 4.06812 7.27202 3.81376 7.45956 3.62623C7.64709 3.43869 7.90145 3.33333 8.16667 3.33333ZM9.66667 12.3333H7C6.82319 12.3333 6.65362 12.2631 6.52859 12.1381C6.40357 12.013 6.33333 11.8435 6.33333 11.6667C6.33333 11.4899 6.40357 11.3203 6.52859 11.1953C6.65362 11.0702 6.82319 11 7 11H7.5C7.5442 11 7.58659 10.9824 7.61785 10.9512C7.64911 10.9199 7.66666 10.8775 7.66666 10.8333V7.83333C7.66666 7.78913 7.64911 7.74674 7.61785 7.71548C7.58659 7.68423 7.5442 7.66667 7.5 7.66667H7C6.82319 7.66667 6.65362 7.59643 6.52859 7.4714C6.40357 7.34638 6.33333 7.17681 6.33333 7C6.33333 6.82319 6.40357 6.65362 6.52859 6.5286C6.65362 6.40357 6.82319 6.33333 7 6.33333H7.66666C8.02029 6.33333 8.35943 6.47381 8.60947 6.72386C8.85952 6.97391 9 7.31304 9 7.66667V10.8333C9 10.8775 9.01756 10.9199 9.04881 10.9512C9.08007 10.9824 9.12246 11 9.16667 11H9.66667C9.84348 11 10.013 11.0702 10.1381 11.1953C10.2631 11.3203 10.3333 11.4899 10.3333 11.6667C10.3333 11.8435 10.2631 12.013 10.1381 12.1381C10.013 12.2631 9.84348 12.3333 9.66667 12.3333Z" fill="currentColor"/>
 </svg>

package/src/scss/components/__index.scss

@@ -12,9 +12,7 @@
 @import '../../components/inputs/combobox/combobox';
 @import '../../components/inputs/file-upload/file-upload';
 @import '../../components/inputs/textarea/textarea';
-@import '../../components/inputs/checkbox-pill/checkbox-pill';
 @import '../../components/inputs/text-editor/text-editor';
-@import '../../components/inputs/input-number/input-number';
 @import '../../components/modal/modal';
 @import '../../components/skip-link/skip-link';
 @import '../../components/toggle-button-links/toggle-button-links';

package/src/scss/constants/_sd-tokens.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jun 2024 09:38:10 GMT
+ * Generated on Thu, 20 Jun 2024 13:09:56 GMT
  */
 
 $constant-color-neutral-base: #707070;

package/src/components/_import-MdsLibrary.njk

@@ -1,7 +0,0 @@
-  {% if isDev %}
-  import * as MdsLibrary from 'http://localhost:8111/lib.js';
-  {% else %}
-  // es convention does not automatically import `index.js` from a folder name (nodejs does this)
-  import * as MdsLibrary from '/assets/design-system-vue.js';
-  {% endif %}
-  import * as vue from 'vue';

package/src/components/inputs/checkbox-pill/README.md

@@ -1,18 +0,0 @@
-## Vue
-
-### Slots
-
-- `default <slot/>` - Content of the Pill.
-
-### Props
-
-- `name`: `String` **required** - `name` attribute for the input field.
-- `v-model`: `Any type` _optional_ - Reactive value for the input. No default value.
-- `value`: `Any type` _optional_ - `value` attribute for the input field. No default value.
-- `describedBy`: `String` _optional_ - `aria-describedby` attribute for input field. Default value: `''`.
-
-### Notes
-
-> When using multiple `<MdsCheckboxPill>` sharing the same `v-model` remember to wrap them in a `<fieldset>`.
-
-The component uses `<label>` as the root for a11y, so we don't have to pass it as a prop. Read Sara Soueidan's [article](https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/) for reference.

package/src/components/inputs/checkbox-pill/checkbox-pill.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  title: 'CheckboxPill',
-  meta: { status: { njk: '', vue: 'wip' } },
-  context: {},
-};

package/src/components/inputs/checkbox-pill/checkbox-pill.njk

@@ -1,87 +0,0 @@
-{# VUE VERSION #}
-<h2>Vue</h2>
-
-<div id="vue-app">
-  {% raw %}
-    <table style="
-      width: 100%; 
-      opacity: 50%;
-      max-width: 700px; 
-      text-align: left; 
-      margin-bottom: 10px; 
-      border: 1px solid lightgrey; 
-      padding: 10px"
-    >
-      <tr style="color: black; font-weight: bold">
-        <th>pill</th>
-        <th>value</th>
-      </tr>
-      <tr>
-        <td>Default</td>
-        <td :style="{color: defaultPill ? 'green' : 'red'}">{{defaultPill}}</td>
-      </tr>
-      <tr>
-        <td>Default True</td>
-        <td :style="{color: defaultTruePill ? 'green' : 'red'}">{{defaultTruePill}}</td>
-      </tr>
-      <tr>
-        <td>Multiple</td>
-        <td :style="{color: multiplePillsValues.length ? 'green' : 'red' }">{{ multiplePillsValues }}</td>
-      </tr>
-    </table>
-
-    <h3>Default pill</h3>
-    <div style="padding-bottom: 10px">
-      <mds-checkbox-pill v-model="defaultPill" name="defaultPill">
-      Default Pill
-      </mds-checkbox-pill>
-    </div>
-
-    <h3>Default true pill</h3>
-    <div style="padding-bottom: 10px">
-      <mds-checkbox-pill v-model="defaultTruePill" name="defaultTruePill">
-      {{ defaultTruePill ? 'True' : 'False' }}
-      </mds-checkbox-pill>
-    </div>
-
-    <h3>Multiple pills</h3>
-    <fieldset style="max-width: 500px; border: 2px dashed #F5F5F5; padding: 10px 5px 5px 10px">
-      <legend style="padding: 3px 6px; color: lightgrey">Choose social media platforms</legend>
-      <div style="display: flex; flex-wrap: wrap;">
-      <mds-checkbox-pill 
-        v-for="pill in multiplePills" 
-        v-model="multiplePillsValues"
-        :name="pill.name"
-        :value="pill.name"
-        style="margin-right: 5px; margin-bottom: 5px" 
-      >
-        <span>{{ pill.label }}</span>
-        <mds-icon v-show="!multiplePillsValues.includes(pill.name)" :icon-name="pill.icon" classes="mds-icon--after" />
-      </mds-checkbox-pill>
-      </div>
-    </fieldset>
-  {% endraw %}
-</div>
-
-<script type="module" async>
-  {% include '_import-MdsLibrary.njk' %}
-  const { MdsCheckboxPill, MdsIcon } = MdsLibrary;
-
-  const app = vue.createApp({
-    components: { MdsCheckboxPill, MdsIcon },
-    data() {
-      return {
-        defaultPill: false,
-        defaultTruePill: true,
-        multiplePillsValues: [],
-        multiplePills: [
-          { name: 'pinterest', label: 'Pinterest', icon: 'social-pinterest'},
-          { name: 'facebook', label: 'Facebook', icon: 'social-facebook'},
-          { name: 'twitter', label: 'Twitter',  icon: 'social-twitter'},
-          { name: 'linkedin', label: 'Linkedin',  icon: 'social-linkedin'},
-          { name: 'reddit', label: 'Reddit', icon: 'social-reddit'}
-        ]
-      };
-    },
-  }).mount('#vue-app');
-</script>

package/src/components/inputs/checkbox-pill/checkbox-pill.scss

@@ -1,47 +0,0 @@
-.mds-checkbox-pill {
-  --background: #fff;
-  --text-color: var(--mds-color-text-base);
-
-  cursor: pointer;
-  user-select: none;
-  -webkit-appearance: none;
-  width: auto;
-
-  box-sizing: border-box;
-  border: $regular-border;
-  border-radius: $border-radius;
-
-  display: inline-flex;
-  align-items: center;
-  text-align: left;
-  padding: ($constant-size-baseline * 2) ($constant-size-baseline * 3);
-
-  @extend .mds-font-body-copy;
-  font-family: var(--mds-font-family-base);
-  font-weight: var(--mds-font-weight-base);
-  text-transform: none;
-
-  background: var(--background);
-  color: var(--text-color);
-
-  &:hover,
-  &:focus-within {
-    --background: #{$constant-color-neutral-lightest};
-    --text-color: #{$link-hover-color};
-  }
-
-  &:focus-within {
-    outline: 2px solid var(--mds-color-text-base);
-  }
-}
-
-.mds-checkbox-pill--active {
-  --background: var(--mds-color-pill-bg-base, #000);
-  --text-color: var(--mds-color-pill-text-base, #fff);
-
-  &:hover,
-  &:focus-within {
-    --background: var(--mds-color-pill-bg-hover, #{$constant-color-neutral-darker});
-    --text-color: var(--mds-color-pill-text-hover, #fff);
-  }
-}

package/src/components/inputs/form-item/README.md

@@ -1,28 +0,0 @@
-# 🙋 What is MdsFormItem?
-
-MdsFormItem is a wrapper, to wrap input-type components such as MdsInput you see below. It should not be used on its own, but wrapping another component.
-
-It includes MdsLabel and MdsFormMessage, and influences the error styling of the input with an error prop.
-
-## Vue
-
-### Slots
-
-- `default <slot/>` - Slot for the main input element.
-- `label <slot/>` - Slot for the label's content.
-- `tooltip <slot/>` - Slot for the label's tooltip (only visible if label slot has also content).
-- `help <slot/>` - Slot for a help message.
-- `error <slot/>` - Slot for an error message.
-
-### Props
-
-- `inputId`: `String` **required** - `for` attribute for the label's component (should match the id of the input in the slot).
-- `optional`: `Boolean` _optional_ - If the input is optional, otherwise is required. Default: `false`.
-- `hideLabel`: `Boolean` _optional_ - If the label is visually hidden. The text of the label will the used by default as a placeholder. Default: `false`.
-  **(please see accessibility notes regarding the use of this parameter)**
-- `i18n`: `Object` _optional_ - Text to translate/customise. Default: `{}`.
-- `error`: `Boolean` _optional_ - Used for styling the input element. Default: `false`.
-
-### Accessibility
-
-Avoid using `hideLabel` if you can. Only hide the label when there can be no mistake as to what the input is for, probably when there is only one input in the form.

package/src/components/inputs/form-item/form-item.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  title: 'FormItem',
-  meta: { status: { vue: 'wip' } },
-  context: {},
-};

package/src/components/inputs/form-item/form-item.njk

@@ -1,42 +0,0 @@
-{# VUE VERSION #}
-<h2>Vue</h2>
-
-<blockquote style="background-color: #eee; border-radius: 3px; margin-bottom: 20px; padding: 20px;">
-<h3> 🙋 What is MdsFormItem?</h3>
-<p>MdsFormItem is a wrapper, to wrap input-type components such as MdsInput you see below. It should not be used on its own, but wrapping another component.</p>
-<p>It includes MdsLabel and MdsFormMessage, and influences the error styling of the input with an error prop.</p>
-</blockquote>
-<div id="vue-app">
-  {% raw %}
-  <div class="mds-form-field" v-for="item in items" :key="item.label">
-    <mds-form-item :input-id="item.inputId" :optional="item.optional" class="mds-form-element--input" :error="item.error">
-        <mds-input :id="item.inputId" model-value="MdsFormInput wrapping MdsInput"></mds-input>
-        <template v-if="item.label" #label>{{item.label}}</template>
-        <template v-if="item.tooltip" #tooltip>{{item.tooltip}}</template>
-        <template v-if="item.help" #help>{{item.help}}</template>
-        <template v-if="item.errorMessage" #error>{{item.errorMessage}}</template>
-    </mds-form-item>
-  </div>
-  {% endraw %}
-</div>
-
-<script type="module" async>
-  {% include '_import-MdsLibrary.njk' %}
-  const { MdsFormItem, MdsInput } = MdsLibrary;
-
-  const app = vue.createApp({
-    components: { MdsFormItem, MdsInput },
-    data() {
-      return {
-        items: [
-        { inputId:'I', label: 'Required Input'},
-        { inputId:'n', label: 'Optional Input', optional: true},
-        { inputId:'N', label: 'Input with error style', error: true },
-        { inputId:'P', label: 'Input with error message', errorMessage: 'This is an error!', error: true },
-        { inputId:'U', label: 'Input with help', help: 'Some help message'},
-        { inputId:'T', label: 'Input with tooltip', tooltip: 'Never miss a tip'},
-        ],
-      };
-    },
-  }).mount('#vue-app');
-</script>

package/src/components/inputs/input-number/README.md

@@ -1,37 +0,0 @@
-## Vue
-
-### Parameters
-
-- `v-model (:modelValue)`: **required** The value of the input.
-- `id`: `String` **required** - Id attribute of the input.
-- `name`: `String` _optional_ - Name attribute of the input.
-- `placeholder`: `String` _optional_ - Placeholder attribute of the input element. Default: `''`.
-- `min`: `Number` _optional_ - Min attribute of the input element. Default: `Number.NEGATIVE_INFINITY`.
-- `max`: `Number` _optional_ - Max attribute of the input element. Default: `Number.POSITIVE_INFINITY`.
-- `step`: `Number` _optional_ - Step attribute of input element. Default: `1`.
-- `error`: `Boolean` _optional_ - Used for a11y (`:aria-invalid` attribute). Default: `false`.
-- `i18n`: `Object` _optional_ - Text to translate/customise.
-
-```text
-i18n: {
-  increaseAriaLabel: 'Increase', // aria label for "Increase" button
-  decreaseAriaLabel: 'Decrease', // aria label for "Decrease" button
-}
-```
-
-### i18n
-
-```html
-<mds-form-item input-id="my-input-number-id" class="mds-form-element--input">
-  <template #label>¿Cuántos idiomas hablas?</template>
-  <mds-input-number
-    id="my-input-number-id"
-    v-model="value"
-    min="1"
-    max="50"
-    :i18="{increaseAriaLabel: 'Aumentar', decreaseAriaLabel: 'Reducir'}"
-  />
-</mds-form-item>
-```
-
-> Note: Remember to wrap your input components with `mds-form-item` whenever you need to use them within a form.

package/src/components/inputs/input-number/input-number.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  title: 'InputNumber',
-  meta: { status: { njk: '', vue: 'wip' } },
-  context: {},
-};