@madgex/design-system 8.0.5 → 9.0.0

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 17 Oct 2024 08:09:17 GMT
+ * Generated on Thu, 24 Oct 2024 13:40:14 GMT
  */
 
 :root {

package/dist/_tokens/js/_tokens-module.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 17 Oct 2024 08:09:17 GMT
+ * Generated on Thu, 24 Oct 2024 13:40:14 GMT
  */
 
 module.exports = {

package/dist/assets/icons.json

@@ -1 +1 @@
-[{"name":"asterisk"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"list-bullets"},{"name":"location-pin"},{"name":"list-numbers"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"redo"},{"name":"search"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"triangle-down"},{"name":"triangle-right"},{"name":"triangle-up"},{"name":"undo"},{"name":"upload"},{"name":"user"},{"name":"calendar"}]
+[{"name":"asterisk"},{"name":"calendar"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"list-bullets"},{"name":"list-numbers"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"redo"},{"name":"search"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"triangle-down"},{"name":"triangle-right"},{"name":"triangle-up"},{"name":"undo"},{"name":"upload"},{"name":"user"},{"name":"text-bold"}]

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "8.0.5",
+  "version": "9.0.0",
   "main": "dist/js/index.js",
   "exports": {
     ".": "./dist/js/index.js",
@@ -98,5 +98,5 @@
     "webpack-dev-server": "^3.11.2",
     "webpack-stream": "^6.1.2"
   },
-  "gitHead": "e78238f8c286170eeec24041ef642beae8f772f6"
+  "gitHead": "1ea5e67b817a07741d67d2c1f092d4e64b4a0467"
 }

package/src/components/accordion/README.md

@@ -1,3 +1,7 @@
+## Callable
+
+Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) syntax to populate the main content
+
 ## Parameters
 
 - `trigger`: trigger of the trigger button. Be as descriptive as you can as it will help for a11y. **required**
@@ -12,9 +16,6 @@
 - `leftAligned`: This will determine if the icon should sit on the left or the right of the trigger (default: false) - See design usage guidelines
 - `contentFirst`: Boolean, places the content above the trigger, pushing the trigger down below the content when open
 
-- `content`: this can also be a custom component or html **required**
-- NOTE: this should be entered using the call syntax and not as a paramater. An example can be seen in accordion.njk
-
 ## Accessibility
 
 When using the non closing accordion, the trigger will be disabled and hidden from view so screenreaders can inform that the content has been expanded. The trigger is also removed from the navigation flow to make sure that it can't be tabbed into when using a keyboard.

package/src/components/button/README.md

@@ -1,7 +1,11 @@
+## Callable
+
+Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) syntax to populate the main content
+
+
 ## Parameters
 
-- `text`: Text on the button
-- `html`: if you want to add html markup instead of plain text, use `html` attribute instead
+- `value`: Value attribute on the button or input 
 - `name`: add `name` attribute
 - `element`: we're using `<button>` by default but you can change to be a link or an input
 - `href`: if `element` is a link then add the url using `href`

package/src/components/button/_template.njk

@@ -27,14 +27,14 @@
 
 {%- if element == 'a' %}
   <a href="{{ params.href if params.href else '#' }}" draggable="false" {{- commonAttributes | safe }}>
-    {{- params.html | safe if params.html else params.text -}}
+    {{ caller() }}
   </a>
 
 {%- elseif element == 'button' %}
   <button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-    {{- params.html | safe if params.html else params.text -}}
+    {{ caller() }}
   </button>
 
 {%- elseif element == 'input' %}
-  <input value="{{ params.text }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
+  <input value="{{ params.value }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
 {%- endif %}

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

@@ -14,7 +14,7 @@ module.exports = {
       {
         name: 'input-buttons',
         element: 'input',
-        text: 'Input button 3',
+        value: 'Input button 3',
         id: 'link-3',
       },
       {

package/src/components/button/button.njk

@@ -5,30 +5,35 @@
 {% for item in items %}
 
 {% if item.useIcon %}  
-{%- set html -%}
-  {{ MdsIcon({
-    iconName: 'search',
-    classes: 'mds-icon--md',
-    visuallyHiddenLabel: 'Search icon'
-  }) }} 
-{%- endset -%}
-{{ MdsButton({
-  element: item.element,
-  id: item.id,
-  href: item.href,
-  classes: item.classes,
-  html: html,
-  attributes: item.attributes
-}) }}
+  {%- set html -%}
+    {{ MdsIcon({
+      iconName: 'search',
+      classes: 'mds-icon--md',
+      visuallyHiddenLabel: 'Search icon'
+    }) }} 
+  {%- endset -%}
+  {% call MdsButton({
+    element: item.element,
+    id: item.id,
+    value: item.value,
+    href: item.href,
+    classes: item.classes,
+    attributes: item.attributes
+  }) -%}
+    <!-- example - in normal use `safe` is discouraged as it is dangerous, and not needed -->
+    {{ html | safe }}
+  {%- endcall %}
 {% else %}
-{{ MdsButton({
-  element: item.element,
-  id: item.id,
-  href: item.href,
-  classes: item.classes,
-  text: item.text,
-  attributes: item.attributes
-}) }}
+  {% call MdsButton({
+    element: item.element,
+    id: item.id,
+    value: item.value,
+    href: item.href,
+    classes: item.classes,
+    attributes: item.attributes
+  }) -%}
+    {{ item.text }}
+  {%- endcall %}
 {% endif %}
 
 {% endfor %}

package/src/components/card/README.md

@@ -1,8 +1,11 @@
 The card component adds a border and padding around the content.
 
+## Callable
+
+Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) syntax to populate the main content
+
 ## Parameters
 
-- `content`: content of the card **required**
 - `inList`: if `true`, the container element will be an `<li>` instead of a `<div>` (useful when used in listers) **optional**
 - `classes`: CSS classes to add to the container (`mds-card`) **optional**
 - `id`: used for the name of `data-test` attribute **optional**

package/src/components/card/_template.njk

@@ -16,14 +16,14 @@
   <li class="mds-card mds-card--list-item{% if params.classes %} {{ params.classes }}{% endif %}" data-test="card{% if params.id %}-{{params.id}}{% endif %}">
     {{- badgesSection | safe -}}
     <div class="mds-card__container">
-      {{- params.content | safe -}}
+      {{ caller() }}
     </div>
   </li>
 {% else %}
   <div class="mds-card{% if params.classes %} {{ params.classes }}{% endif %}" data-test="card{% if params.id %}-{{params.id}}{% endif %}">
    {{- badgesSection | safe -}}
     <div class="mds-card__container">
-      {{- params.content | safe -}}
+      {{ caller() }}
     </div>
   </div>
 {% endif %}

package/src/components/card/card.njk

@@ -6,14 +6,15 @@
     <ul>
   {%- endif -%}
 
-  {{- MdsCard({
+  {% call MdsCard({
     inList: inList,
     classes: classes,
-    content: content,
     id: id,
     badges: badges
-  }) -}}
-
+  }) -%}
+  <!-- example - in normal use `safe` is discouraged as it is dangerous, and not needed -->
+  {{ content | safe }}
+  {%- endcall %}
   {%- if fractalLabel === 'Card used in a list' -%}
     </ul>
   {%- endif -%}

package/src/components/inputs/file-upload/_template.njk

@@ -9,16 +9,6 @@
   {% set name = params.id %}
 {% endif %}
 
-{% set removeButtonText -%}
-{{- params.i18n.removeButtonText | default('Remove file') -}}
-{{-
-    MdsIcon({
-      iconName: 'cross',
-      classes: 'mds-icon--after'
-    })
-  -}}
-{%- endset %}
-
 {% if params.helpText %}
   {% set helpTextId = [params.id, '-help-text'] | join %}
 {% endif %}
@@ -99,11 +89,18 @@
             <span class="mds-visually-hidden">{{ params.i18n.selectedFileText | default('Selected file:') }} </span>
             <span class="mds-file-upload__file-name">{% if params.value %}{{ params.value }}{% endif %}</span>
           </div>
-          {{ MdsButton({
-                html: removeButtonText,
+          {% call MdsButton({
                 classes: 'mds-button--plain mds-button--small mds-file-upload__remove-button',
                 type: 'button'
-            }) }}
+            }) -%}
+          {{- params.i18n.removeButtonText | default('Remove file') -}}
+          {{-
+              MdsIcon({
+                iconName: 'cross',
+                classes: 'mds-icon--after'
+              })
+            -}}
+        {%- endcall %}
         </div>
       </div>
     </div>

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

@@ -29,7 +29,7 @@
 {%- endif -%}
 
 {%- if params.tooltipMessage -%}
-  {{- MdsPopover({
+  {% call MdsPopover({
     id: params.inputId + '-tooltip',
     text: MdsIcon({
       iconName: 'question-mark',
@@ -37,9 +37,10 @@
       visuallyHiddenLabel: params.i18n.tooltipIcon | default('More info')
     }),
     placement: 'right',
-    classes: 'mds-button mds-button--plain mds-form-label__tooltip',
-    content: params.tooltipMessage
-  }) -}}
+    classes: 'mds-button mds-button--plain mds-form-label__tooltip'
+  }) -%}
+    {{ params.tooltipMessage }}
+  {%- endcall %}
 {%- endif -%}
 {%- if params.element == 'legend' and params.tooltipMessage -%}
   {# <legend> is using a float:left to get the tooltip icon to line up next to it #}

package/src/components/modal/README.md

@@ -4,10 +4,13 @@ If you need to add a "close" button to the modal, you can do so by adding the cl
 
 The modal will have to be positionned outsite the site container so we can hide the rest of the page to all users by adding `aria-hidden="true"` on the container when the modal is active. To do so, use an `id` on the container and pass it as a parameter to the modal macro (see parameters below).
 
+## Callable
+
+Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) syntax to populate the main content
+
 ## Parameters
 
 - `id`: id of the modal - needs to match `data-modal-id` on the trigger - **required**,
-- `content`: content of the modal (can contain HTML) - **required**,
 - `ariaLabelledby`: id of the element inside the content, which will provide a label for the modal - **required**,
 - `ariaDescribedby`: id of the element inside the content, which will provide a description for the content of the modal - *optional*,
 - `siteContainerId`: id of the container to target so we can hide the rest of the page to all users when the modal is active - **required**

package/src/components/modal/_template.njk

@@ -7,16 +7,18 @@
   <div class="mds-modal__wrapper">
     <div class="mds-modal__inner">
 
-      {{- MdsButton({
-        html: closeText + MdsIcon({
-          iconName: 'close',
-          classes: 'mds-icon--after'
-          }),
+      {% call MdsButton({
         classes: 'mds-button--plain js-mds-modal-close mds-modal-default-close-button',
         type: 'button'
-      }) -}}
+      }) -%}
+        {{ closeText }}
+        {{ MdsIcon({
+          iconName: 'close',
+          classes: 'mds-icon--after'
+        }) }}
+      {%- endcall %}
 
-      {{- params.content | safe -}}
+      {{ caller() }}
     </div>
   </div>
 </div>

package/src/components/modal/long-modal-content.njk

@@ -11,8 +11,10 @@ Nam sit amet bibendum augue. Lorem ipsum dolor sit amet, consectetur adipiscing
 Donec dapibus consectetur fermentum. Proin vel lacus elit. Nunc eu massa magna. Quisque blandit arcu id dui commodo dapibus. Curabitur vehicula pharetra lacus sed faucibus. Duis tempus tincidunt leo et facilisis. Mauris fringilla lobortis fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer leo nisi, convallis sit amet eros eu, eleifend egestas justo. Donec vitae tincidunt nibh. Ut at massa nunc.
 
 Nullam faucibus pulvinar felis. Sed et tortor enim. Nulla luctus maximus mi aliquam tempor. Vivamus dignissim condimentum augue sed commodo. Donec a elementum risus, id interdum sem. Morbi malesuada tempor dapibus. Nam varius augue augue, vel pellentesque felis venenatis nec. Vivamus eget vulputate risus. Curabitur mollis, neque id tempus laoreet, nibh lectus aliquam felis, euismod varius mi turpis a sapien. Etiam ut mi a nisi faucibus egestas at eget ante.</p>
-<p>{{ MdsButton({
-  text: 'Close',
+<p>{% call MdsButton({
   classes: 'mds-button--neutral js-mds-modal-close',
   type: 'button'
-}) }}</p>
+}) -%}
+  Close
+{%- endcall %}
+</p>

package/src/components/modal/modal-content.njk

@@ -3,8 +3,10 @@
 <h1 id="modal-label">Hello!</h1>
 
 <p id="modal-description">I'm a modal window with <a href="#">a link</a>.</p>
-<p>{{ MdsButton({
-  text: 'Close',
+<p>{% call MdsButton({
   classes: 'mds-button--neutral js-mds-modal-close',
   type: 'button'
-}) }}</p>
+}) -%}
+  Close
+{%- endcall %}
+</p>

package/src/components/modal/modal.njk

@@ -12,38 +12,46 @@
   {% include './modal/long-modal-content.njk' %}
 {% endset %}
 <div id="site-container">
-  <p>{{ MdsButton({
-    text: 'Open Modal',
+  <p>{% call MdsButton({
     classes: 'mds-button--plain',
     attributes: { 'data-modal-id': modalId }
-  }) }}</p>
+  }) -%}
+  {{ 'Open Modal' }}
+  {%- endcall %}
+  </p>
 
-    <p>{{ MdsButton({
-    text: 'Open Modal With Long Text',
+    <p>{% call MdsButton({
     classes: 'mds-button--plain',
     attributes: { 'data-modal-id': longModalId }
-  }) }}</p>
+  }) -%}
+    {{ 'Open Modal With Long Text' }}
+  {%- endcall %}
+  </p>
 
 
   <p><a href="#">Some link</a></p>
 </div>
 
 
-{{ MdsModal({
+{% call MdsModal({
   id: modalId,
-  content: modalContent,
   ariaLabelledby: 'modal-label',
   ariaDescribedby: 'modal-description',
   siteContainerId: 'site-container'
-}) }}
+}) -%}
+<!-- example - in normal use `safe` is discouraged as it is dangerous, and not needed -->
+{{ modalContent | safe }}
+{%- endcall %}
 
-{{ MdsModal({
+{% call MdsModal({
   id: longModalId,
-  content: longModalContent,
   ariaLabelledby: 'modal-label',
   ariaDescribedby: 'modal-description',
   siteContainerId: 'site-container',
   i18n: {
     closeText: 'Close popup'
   }
-}) }}
+}) -%}
+<!-- example - in normal use `safe` is discouraged as it is dangerous, and not needed -->
+{{ longModalContent | safe }}
+{%- endcall %}

package/src/components/notification/notification.njk

@@ -1,9 +1,10 @@
 {% from "./button/_macro.njk" import MdsButton %}
 
 <div>
-{{- MdsButton({
-  text: text,
+{% call MdsButton({
   classes: classes,
   attributes: attributes
-}) -}}
+}) -%}
+{{ text }}
+{%- endcall %}
 </div>

package/src/components/popover/README.md

@@ -1,9 +1,12 @@
+## Callable
+
+Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) syntax to populate the main content
+
 ## Parameters
 
 - `id`: id of the trigger - **required**,
-- `text`: text you want on the trigger - **required**,
+- `htmlTrigger`: html or text you want on the trigger - **required**,
 - `classes`: add extra classes to the trigger - _optional_,
-- `content` : content of the popover - can be text, html or another component - **required**
 - `placement`: placement of the popover - _optional_
 
 Values can be `auto`, `top`, `right`, `bottom`, `left`. You can also add `start` or `end` to each of those positions. For example: `top-end` will on top of the reference, right aligned, `right-start` will on the right of the reference, top aligned.

package/src/components/popover/_template.njk

@@ -8,17 +8,18 @@
 
 {%- set ariaDescribedBy = [params.id, "-content"] | join -%}
 
-{{- MdsButton({
+{% call MdsButton({
   attributes: { id: params.id, 'aria-describedby': ariaDescribedBy },
   classes: classes,
   type: 'button',
-  html: params.text,
   id: buttonId
-}) -}}
+}) -%}
+  {{ params.htmlTrigger | safe }}
+{%- endcall %}
 
 <div id="{{ params.id }}-content" role="tooltip" class="mds-popover"{% if params.placement %} data-placement="{{ params.placement }}"{% endif %}>
   <div class="mds-popover__arrow" data-popper-arrow></div>
   <div class="mds-tooltip__inner">
-    {{- params.content | safe -}}
+  {{ caller() }}
   </div>
 </div>

package/src/components/popover/popover.njk

@@ -1,11 +1,13 @@
 {% from "./popover/_macro.njk" import MdsPopover %}
 
 <div style="padding: 10px">
-{{ MdsPopover({
+{% call MdsPopover({
   id: id,
-  text: text,
+  htmlTrigger: text,
   classes: classes,
   placement: placement,
-  content: content
-}) }}
+}) -%}
+  <!-- example - in normal use `safe` is discouraged as it is dangerous, and not needed -->
+  {{ content | safe }}
+{%- endcall %}
 </div>

package/src/components/section-title/_template.njk

@@ -5,12 +5,13 @@
   {% if params.actionText -%}
     <div class="mds-section-title__action">
       {%- if params.actionHref -%}
-        {{ MdsButton({
-          text: params.actionText,
+        {% call MdsButton({
           element: params.actionElement,
           href: params.actionHref,
           classes: params.classes
-        }) }}
+        }) -%}
+        {{ params.actionText }}
+        {%- endcall %}
       {%- endif -%}
     </div>
   {% endif -%}

package/src/layout/containers/02-branded-containers.njk

@@ -5,10 +5,11 @@
   {{- MdsIcon({ iconName: 'email', classes: 'mds-icon--lg mds-margin-bottom-b2' }) -}}
   <h3>Get job alerts</h3>
   <p>Create a job alert and receive personalised <a href="/some-link">job recommendations</a> straight to your inbox</p>
-  {{ MdsButton({
-    text: 'Create alert',
+  {% call MdsButton({
     element: 'a',
     href: '/somewhere',
     classes: 'mds-button--neutral'
-  }) }}
+  }) -%}
+  Create alert
+  {%- endcall %}
 </div>

package/src/layout/forms/forms.njk

@@ -83,10 +83,11 @@
         </div>
       </fieldset>
       <div class="mds-clearfix">
-        {{ MdsButton({
-          text: 'Submit',
+        {% MdsButton({
           classes: 'mds-width-full mds-width-md-auto mds-float-md-right'
-        }) }}
+        }) -%}
+          Submit
+        {%- endcall %}
       </div>
     </form>
 
@@ -102,10 +103,11 @@
           }) }}
         </div>
         <div class="mds-grid-col-12 mds-grid-col-md-4 mds-grid-col-lg-2">
-          {{ MdsButton({
-            text: 'Submit',
+          {% MdsButton({
             classes: 'mds-width-full mds-width-md-auto'
-          }) }}
+          }) -%}
+          Submit
+        {%- endcall %}
         </div>
     </form>
   </div>

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

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 17 Oct 2024 08:09:17 GMT
+ * Generated on Thu, 24 Oct 2024 13:40:14 GMT
  */
 
 $constant-color-neutral-base: #707070;