@madgex/design-system 6.3.8 → 6.3.10

package/src/components/accordion/accordion.njk

@@ -1,6 +1,5 @@
 {% from "./accordion/_macro.njk" import MdsAccordion %}
 
-<em>Nunjucks</em>
 <h3>{{ name }}</h3>
 {{ MdsAccordion({
   id: id,
@@ -22,48 +21,3 @@
   ariaLabel: ariaLabel,
   ariaLabelActive: ariaLabelActive
 }) }}
-<hr />
-
-
-<em>Vue</em>
-<h3>{{ name }}</h3>
-  <div id="vue-{{id}}"></div>
-
-  <script type="module" async>
-    {% include '_import-MdsLibrary.njk' %}
-
-    vue.createApp({
-      data() {
-        return {
-          isExpanded: false,
-          hideTriggerLabel: {{hideTriggerLabel or false}},
-          leftAligned: {{leftAligned or false}},
-          triggerIsNonClosing: {{triggerIsNonClosing or false}},
-          expandIcon:"{{expandIcon}}" || undefined,
-          collapseIcon:"{{collapseIcon}}" || undefined,
-        };
-      },
-      template: `<div>
-        <MdsAccordion
-          id="{{id}}"
-          triggerClasses="{{triggerClasses}}"
-          activateOnMediaQuery="{{activateOnMediaQuery}}"
-          :expandIcon="expandIcon"
-          :collapseIcon="collapseIcon"
-          :triggerIsNonClosing="triggerIsNonClosing"
-          :hideTriggerLabel="hideTriggerLabel"
-          :leftAligned="leftAligned"
-          v-model:expanded="isExpanded"
-         >
-         <template #triggerLabel>{{triggerLabel}}</template>
-         <template #triggerLabelActive>{{triggerLabelActive}}</template>
-         {{content | safe}}
-         </MdsAccordion>
-      </div>`
-
-    }).use(MdsLibrary).mount('#vue-{{id}}');
-  </script>
-<hr />
-<div style="margin-bottom:40px"></div>
-
-

package/src/components/button/button.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Buttons',
-  meta: { status: { njk: 'wip', vue: 'wip' } },
+  status: 'wip',
   context: {
     items: [
       { name: 'link-buttons', href: 'http://madgex.com', text: 'Link button 1', id: 'link-1' },

package/src/components/button/button.njk

@@ -2,9 +2,6 @@
 {% from "./button/_macro.njk" import MdsButton %}
 {% from "./icons/_macro.njk" import MdsIcon %}
 
-<h3>Nunjucks</h3>
-
-<div class="nunjucks-items">
 {% for item in items %}
 
 {% if item.useIcon %}  
@@ -35,38 +32,5 @@
 {% endif %}
 
 {% endfor %}
-</div>
-
-<h3 style="margin-top: 10px">Vue</h3>
-
-<div id="vue-app">
-  {% raw %}
-  <mds-button v-for="item in items"
-    :element="item.element"
-    :id="item.id"
-    :to="item.href"
-    :class="item.classes"
-    style="margin-right: 5px"
-    :value="item.text" 
-  >
-    <span v-if="item.useIcon"><mds-icon icon-name="search" classes="mds-icon--md" visually-hidden-label="Search Icon" /></span>
-    <span v-else >{{item.text}}</span>
-  </mds-button>
-  {% endraw %}
-</div>
-
-<script type="module" async>
-  {% include '_import-MdsLibrary.njk' %}
-  const { MdsButton, MdsIcon } = MdsLibrary;
 
-  const items = {{items | dump | safe}};
 
-  const app = vue.createApp({
-    components: { MdsButton, MdsIcon },
-    data() {
-      return {
-        items,
-      }
-    },
-  }).mount('#vue-app');
-</script>

package/src/components/card/card.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   title: 'Card',
   label: 'Card',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
   context: {
     fractalLabel: 'Card',
     inList: false,

package/src/components/icons/icons.config.js

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

package/src/components/icons/icons.njk

@@ -2,8 +2,6 @@
 
 {% from "./icons/_macro.njk" import MdsIcon %}
 
-<em> Nunjucks version </em>
-
 <h2>Different sizes</h2>
 
 <p>{{ MdsIcon({
@@ -161,79 +159,3 @@
     </li>
   </ul>
 </div>
-
-<br><hr><br>
-
-
-{# VUE LIBRARY VERSION #}
-
-<em>Vue</em>
-
-<h2>Different sizes</h2>
-<p><span id="vue-size-sm"></span> : small (16px)</p>
-<p><span id="vue-size-md"></span> : medium (24px)</p>
-<p><span id="vue-size-lg"></span> : large (32px)</p>
-<p><span id="vue-size-xl"></span> : extra large (48px)</p>
-<p><span id="vue-size-xxl"></span> : extra extra large (72px)</p>
-<br><hr><br>
-
-<h2>Icon with text</h2>
-<p><span id="vue-text-before"></span> Email me</p>
-<p><a href="#">Apply <span id="vue-text-after"></span></a></p>
-<br><hr><br>
-
-<h2>Spinner</h2>
-<span id="vue-spinner"></span>
-<br><hr><br>
-
-<h2>Has container</h2>
-<span id="vue-has-container"></span>
-<br><hr><br>
-
-<h2>Icons using inline SVG</h2>
-<div>
-  <span>Share this job</span>
-  <ul class="mds-list mds-list--inline mds-display-inline-block">
-    {% for item in ['Facebook', 'Twitter', 'LinkedIn', 'Pinterest', 'Reddit'] %}
-    <li class="mds-list__item">
-      <a href="#"><span id="vue-social-{{item | lower}}"></span></a>
-    </li>
-    {% endfor %}
-  </ul>
-</div>
-
-
-<script async type="module">
-  {% include '_import-MdsLibrary.njk' %}
-  const { MdsIcon } = MdsLibrary;
-
-  const variants = [
-    { id: 'size-sm', iconName: 'star-fill', classes: 'mds-icon--sm' },
-    { id: 'size-md', iconName: 'star-fill', classes: 'mds-icon--md' },
-    { id: 'size-lg', iconName: 'star-fill', classes: 'mds-icon--lg' },
-    { id: 'size-xl', iconName: 'star-fill', classes: 'mds-icon--xl' },
-    { id: 'size-xxl', iconName: 'star-fill', classes: 'mds-icon--xxl' },
-    { id: 'text-before', iconName: 'email', classes: 'mds-icon--before' },
-    { id: 'text-after', iconName: 'chevron-right', classes: 'mds-icon--after' },
-    { id: 'spinner', iconName: 'spinner', visuallyHiddenLabel:'Loading...' },
-    { id: 'has-container', iconName: 'cross', classes:'mds-icon--md', visuallyHiddenLabel:'Error', hasContainer:true, containerClasses:'mds-icon-container--circle mds-icon-container--error' },
-    ...['facebook', 'twitter', 'linkedin', 'pinterest', 'reddit'].map(icon => ({id: `social-${icon}`, iconName: `social-${icon}`, visuallyHiddenLabel: icon}))
-  ];
-  variants.forEach((item) => {
-    vue.createApp({
-      components: { MdsIcon },
-      data() {
-        return { 
-          iconName: item.iconName,
-          classes: item.classes,
-          visuallyHiddenLabel: item.visuallyHiddenLabel,
-          hasContainer: item.hasContainer,
-          containerClasses: item.containerClasses,
-        };
-      },
-      template: `<MdsIcon :icon-name="iconName" :classes="classes" :visually-hidden-label="visuallyHiddenLabel" :has-container="hasContainer" :container-classes="containerClasses"  />` }).mount('#vue-'+item.id);
-  });
-</script>
-
-    
-

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

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Checkbox List',
-  meta: { status: { njk: 'ready', vue: 'wip' } },
+  status: 'ready',
   context: {
     id: 'checkbox-input',
     labelText: 'Standard checkbox group',

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

@@ -1,6 +1,5 @@
 {% from "./inputs/checkbox-list/_macro.njk" import MdsCheckboxList %}
 
-<em>Nunjucks</em>
 <div class="mds-form-field">
   {{ MdsCheckboxList({
     labelText: labelText,
@@ -19,53 +18,3 @@
   }) }}
 </div>
 
-
-
-
-<em>Vue</em>
-<div class="mds-form-field">
-{% set id = 'vue-'+id %}
-    <div id="{{id}}"></div>
-    {% set option = (options[0] or options) %}
-    <script async type="module">
-      {% include '_import-MdsLibrary.njk' %}
-
-      let  selectedOptions = {{(selectedOptions or []) | dump | safe}};
-      if(!Array.isArray(selectedOptions)) selectedOptions = [selectedOptions];
-      vue.createApp({
-        data() {
-          return {
-            options: {{ options | dump | safe}},
-            i18n: {{(i18n or {}) | dump | safe}},
-            optional: {{optional or false}},
-            disabled: {{disabled or false}},
-            validationError: "{{validationError or ''}}",
-            helpText: "{{helpText or ''}}",
-            tooltipMessage: "{{tooltipMessage or ''}}",
-            selectedOptions,
-            error: {{state === 'error'}}
-          };
-        },
-        template: `<MdsFormItem fieldset :error="error" :optional="optional">
-          <template #label>{{labelText | safe}}</template>
-          <template v-if="helpText" #help>{{helpText}}</template>
-          <template v-if="validationError" #error>{{validationError}}</template>
-          <template v-if="tooltipMessage" #tooltip>{{tooltipMessage | safe}}</template>
-          <MdsCheckboxList
-            id="{{id}}-vue-version"
-            name="{{name}}"
-            describedBy="{{describedBy}}"
-            class="{{classes}}"
-            :options="options"
-            v-model="selectedOptions"
-            :disabled="disabled"
-            :i18n="i18n" />
-        </MdsFormItem>`
-
-      }).use(MdsLibrary).mount('#{{id}}');
-    </script>
-
-</div>
-
-
-<div style="margin-bottom:40px"></div>

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

@@ -1,7 +1,7 @@
 module.exports = {
   title: 'Combobox',
   label: 'Combobox',
-  meta: { status: { njk: 'ready', vue: 'wip' } },
+  status: 'ready',
   variants: [
     {
       name: 'default',

package/src/components/inputs/combobox/combobox.njk

@@ -1,7 +1,6 @@
 {% from "./inputs/combobox/_macro.njk" import MdsCombobox %}
 
 {% if not multiple %}
-<em>Nunjucks</em>
 
 <div class="mds-grid-row">
   <div class="mds-grid-col-6">
@@ -35,79 +34,3 @@
 </div>
 {% endif %}
 
-
-
-
-<em>Vue</em>
-
-{% set id = "vue-"+ id %}
-
-<div class="mds-grid-row">
-  <div class="mds-grid-col-6">
-    <h3>{{ variantTitle }}</h3>
-
-    <div id="{{id}}"></div>
-
-    <script async type="module">
-      {% include '_import-MdsLibrary.njk' %}
-      let options = {{ (options or {}) | dump | safe}};
-      options = Object.keys(options).map(value => ({value, label: options[value]}))
-
-      vue.createApp({
-        data() {
-          return {
-            options,
-            i18n: {{(i18n or null) | dump | safe}},
-            vModel: {{(vModel or null) | dump | safe}},
-            search: "{{value or ''}}",
-            optional: {{optional or false}},
-            multiple: {{multiple or false}},
-            useAutocomplete: {{useAutocomplete or false}}
-          };
-        },
-        watch: {
-          search(val) {
-            this.fetchAutocomplete(val);
-          },
-        },
-        methods: {
-          async fetchAutocomplete(searchValue) {
-            if (!this.useAutocomplete) return;
-            if (searchValue && searchValue.length > 2) {
-              try {
-                let res = await fetch(`https://api.datamuse.com/sug?s=${searchValue}`);
-                res = await res.json();
-                this.options = res.map(({ word }) => ({ value: word, label: word }));
-              } catch (e) {
-                console.log(e);
-              }
-            } else {
-              this.options = [];
-            }
-          },
-        },
-        template: `<div>
-        <MdsFormItem input-id="{{id}}" :optional="optional">
-          <template  #label >{{labelText}}</template>
-          <MdsCombobox
-            id="{{id}}"
-            name="{{name}}"
-            placeholder="{{placeholder}}"
-            class="{{classes}}"
-            :options="options"
-            :multiple="multiple"
-            :i18n="i18n"
-            v-model:search="search"
-            v-model="vModel"
-            @search="fetchAutocomplete"
-          />
-          </MdsFormItem>
-        </div>`
-      }).use(MdsLibrary).mount('#{{id}}');
-    </script>
-
-  </div>
-</div>
-
-
-<div style="margin-bottom:40px"></div>

package/src/components/inputs/file-upload/file-upload.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'File Upload',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
   context: {
     labelText: 'Upload a file',
     helpText: 'Your file must be a .doc, .pdf, .docx, or .rtf. No larger than 1MB',

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

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Input',
-  meta: { status: { njk: 'ready', vue: 'wip' } },
+  status: 'ready',
   context: {
     labelText: 'Text input',
     name: 'Example input',

package/src/components/inputs/input/input.njk

@@ -1,6 +1,5 @@
 {% from "./inputs/input/_macro.njk" import MdsInput %}
 
-<em> Nunjucks </em>
 <div class="mds-grid-row">
   <div class="mds-grid-col-12 mds-grid-col-md-6">
     <div class="mds-form-field">
@@ -24,65 +23,3 @@
     </div>
   </div>
 </div>
-
-<em>Vue</em>
-<div class="mds-grid-row" style="margin-bottom:40px">
-  <div class="mds-grid-col-6">
-    <div class="mds-form-field">
-        <div id="vue-{{id}}" >
-  {% raw %}
-      <mds-form-item :input-id="`${id}-vue-version`" :optional="optional" class="mds-form-element--input" :error="error" :hide-label="hideLabel">
-        <template v-if="labelText" #label>{{labelText}}</template>
-        <template v-if="tooltipMessage" #tooltip>{{tooltipMessage}}</template>
-        <template v-if="helpText" #help>{{helpText}}</template>
-        <template v-if="validationError" #error>{{validationError}}</template>
-      <mds-input
-        :id="`${id}-vue-version`"
-        v-model="value"
-        :name="name"
-        :type="type"
-        :placeholder="placeholder"
-        :error="error"
-        :class="classes"
-        :disabled="disabled"
-        :autocomplete="autocompleteValue"
-      />
-      </mds-form-item>
-  {% endraw %}
-        </div>
-    </div>
-  </div>
-</div>
-
-<script async type="module">
-  {% include '_import-MdsLibrary.njk' %}
-  const { MdsFormItem, MdsInput} = MdsLibrary;
-  const hideLabel = {{hideLabel or false}};
-  const labelText = "{{labelText | safe}}";
-  const placeholder = hideLabel ? labelText : "{{placeholder}}";
-  const autocompleteValue = "{{autocompleteValue}}" ? "{{autocompleteValue}}" : null;
-
-  vue.createApp({
-    components: { MdsFormItem, MdsInput},
-    data() {
-      return {
-        id: "{{id | safe}}",
-        name: "{{name | safe}}",
-        type: "{{type | safe}}",
-        value: "{{value  | safe}}",
-        labelText,
-        placeholder,
-        hideLabel,
-        classes: "{{classes | safe}}",
-        helpText: "{{(helpText or '') | safe}}",
-        tooltipMessage: "{{(tooltipMessage or '') | safe}}",
-        validationError: "{{(validationError or '') | safe}}",
-        i18n: {{(i18n or {}) | dump | safe}},
-        error: {{state === 'error'}},
-        optional: {{optional or false}},
-        disabled: {{disabled or false}},
-        autocompleteValue,
-      };
-    },
-  }).use(MdsLibrary).mount('#vue-{{id}}');
-</script>

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

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Label',
-  meta: { status: { njk: 'ready', vue: 'wip' } },
+  status: 'ready',
   context: {
     id: 'default',
     inputId: 'input-default',

package/src/components/inputs/label/label.njk

@@ -2,8 +2,6 @@
 
 <div style="padding: 20px 10px 0 10px; margin: 10px; border: 2px solid lightgrey">
 
-
-<em>Nunjucks</em>
 <div class="mds-form-field">
   {{ MdsInputLabel({
     labelText: labelText,
@@ -16,37 +14,4 @@
   }) }}
 </div>
 
-
-<em>Vue</em>
-<div id="vue-{{id}}" class="mds-form-field"></div>
-
-<script async type="module">
-  {% include '_import-MdsLibrary.njk' %}
-
-  vue.createApp({
-    data() {
-      return {
-        i18n: {{(i18n or {}) | dump | safe}},
-        hideLabel: {{hideLabel or false}},
-        legend: {{element === "legend" or false}},
-        optional: {{optional or false}},
-        tooltipMessage: {{(tooltipMessage or false) | dump | safe}}
-      };
-    },
-    template: `
-      <MdsLabel
-        inputId="{{id}}"
-        id="{{id}}"
-        :optional="optional"
-        :legend="legend"
-        :hideLabel="hideLabel"
-        :i18n="i18n" 
-      >
-      {{labelText}}
-      <template #tooltip v-if="tooltipMessage">{{tooltipMessage}}</template> 
-      </MdsLabel>
-    `
-
-  }).use(MdsLibrary).mount('#vue-{{id}}');
-</script>
 </div>

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

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Radio',
-  meta: { status: { njk: 'ready', vue: 'wip' } },
+  status: 'ready',
   context: {
     id: 'radio-input',
     labelText: 'Standard Radio group',

package/src/components/inputs/radio/radio.njk

@@ -1,6 +1,5 @@
 {% from "./inputs/radio/_macro.njk" import MdsRadio %}
 
-<em>Nunjucks</em>
 <div class="mds-form-field">
   {{ MdsRadio({
     labelText: labelText,
@@ -14,60 +13,3 @@
     validationError: validationError
   }) }}
 </div>
-
-<em>Vue</em>
-<div class="mds-form-field ">
-    <div id="vue-{{id}}" >
-      {% raw %}
-        <mds-form-item :input-id="`${id}-vue-version`" :optional="optional" :error="error" :hide-label="hideLabel" :class="classes">
-          <template v-if="labelText" #label>{{labelText}}</template>
-          <template v-if="tooltipMessage" #tooltip>{{tooltipMessage}}</template>
-          <template v-if="helpText" #help>{{helpText}}</template>
-          <template v-if="validationError" #error>{{validationError}}</template>
-          <fieldset>
-            <mds-radio 
-              v-for="item in options"
-              v-model="selectedOption"
-              :name="name"
-              :id="`${item.id}-vue-version`"
-              :key="`${item.id}-vue-version`"
-              :value="item.value"
-              :class="item.classes"
-              :disabled="disabled"
-            >
-            <span v-html="item.labelText" />
-            </mds-radio>
-          </fieldset>
-        </mds-form-item>
-      {% endraw %}
-    </div>
-</div>
-
-<script async type="module">
-  {% include '_import-MdsLibrary.njk' %}
-  const { MdsFormItem, MdsRadio} = MdsLibrary;
-  const hideLabel = {{hideLabel or false}};
-  const labelText = "{{labelText | safe}}";
-  const placeholder = hideLabel ? labelText : "{{placeholder}}";
-
-  vue.createApp({
-    components: { MdsFormItem, MdsRadio},
-    data() {
-      return {
-         id: "{{id | safe}}",
-         name: "vue-{{id}}",
-         selectedOption: "{{value | safe}}",
-         options: {{options | dump | safe}},
-         labelText,
-         hideLabel,
-         classes: "{{classes | safe}}",
-         helpText: "{{(helpText or '') | safe}}",
-         tooltipMessage: "{{(tooltipMessage or '') | safe}}",
-         validationError: "{{(validationError or '') | safe}}",
-         error: {{state === 'error'}},
-         optional: {{optional or false}},
-         disabled: {{disabled or false}},
-      };
-    },
-  }).use(MdsLibrary).mount('#vue-{{id}}');
-</script>

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

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Select',
-  meta: { status: { njk: 'ready' } },
+  status: 'ready',
   context: {
     labelText: 'Select input',
     name: 'Select input',

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

@@ -1,7 +1,7 @@
 module.exports = {
   title: 'Single checkbox',
   name: 'Single checkbox',
-  meta: { status: { njk: 'ready', vue: 'wip' } },
+  status: 'ready',
   context: {
     id: 'terms-and-conditions',
     options: [