@madgex/design-system 6.3.9 → 6.3.11

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/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 14:08:10 GMT
+ * Generated on Thu, 04 Jul 2024 06:59:55 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: {},
-};