@ilo-org/twig 0.2.25 → 0.3.0

package/.turbo/turbo-build:lib.log

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.2.25 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.3.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
 > node importprefix.js && node importsvgs.js && pnpm output
 
 theme prefix added
 
-> @ilo-org/twig@0.2.25 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.3.0 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @ilo-org/twig
 
+## 0.3.0
+
+### Minor Changes
+
+- ee859111c: Add support for reponsive images in the Card component. The `image` field can take either a string (for a non-responsive image) or an array of objects with an `src` and `breakpoint` property. The `image` field of the card now works the same way as the `url` field of the Image component. This also adds an `imageAlt` field that applies a describe alt tag to the image.
+
+### Patch Changes
+
+- ee859111c: Fixes bug where touch events on the mobile open/close buttons inadvertantly activated the logo link. Also correctly hides the mobile nav when it's closed so it doesn't show up in the tab order and can't be clicked.
+- Updated dependencies [ee859111c]
+- Updated dependencies [ee859111c]
+- Updated dependencies [ee859111c]
+  - @ilo-org/styles@0.3.3
+
+## 0.2.26
+
+### Patch Changes
+
+- 4dd7f57a5: Add an if statement to all Drupal.behaviors to avoid calling js functions more than once.
+- 44ff8b6db: Add responsive image structure to card images. Add loading attribute for card images and image component.
+
 ## 0.2.25
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.2.25",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -25,7 +25,7 @@
     "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons": "0.1.17",
-    "@ilo-org/styles": "0.3.2",
+    "@ilo-org/styles": "0.3.3",
     "@ilo-org/themes": "0.1.15",
     "@ilo-org/utils": "0.0.11"
   },

package/src/patterns/components/card/card.twig

@@ -10,11 +10,24 @@
   {% endif %}
   <div class="{{prefix}}--card--wrap">
     {% if image %}
-      <div class="{{prefix}}--card--image--wrapper">
-        {% block card_image %}
-          <picture><img class="{{prefix}}--card--image" src="{{image}}" alt="{{title}}"></picture>
-        {% endblock %}
-      </div>
+      {% block card_image %}
+        <div class="{{prefix}}--card--image--wrapper">
+          {% if image is iterable %}
+            <picture>
+              {% for img in image|reverse %}
+                {% if loop.last == false  %}
+                  <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+                {% endif %}
+              {% endfor %}
+              <img class="{{prefix}}--card--image" src="{{image|reverse|last.src}}" alt="{{imageAlt}}" {% if loading %} loading="{{ loading }}"{% endif %}>
+            </picture>
+            {% else %}
+            <picture>
+              <img class="{{prefix}}--card--image" src="{{image}}" alt="{{imageAlt}}">
+            </picture>
+          {% endif %}
+        </div>
+      {% endblock %}
     {% endif %}
     <div class="{{prefix}}--card--content">
       {% if eyebrow %}
@@ -24,11 +37,7 @@
         <h5 class="{{prefix}}--card--title">{{title}}</h5>
       {% endif %}
       {% if type == "multilink" or type == "data" and image %}
-        <div class="{{prefix}}--card--image--wrapper">
-          {% block card_image_multilink_or_data %}
-            <picture><img class="{{prefix}}--card--image" src="{{image}}" alt="{{title}}"></picture>
-          {% endblock %}
-        </div>
+        {{ block("card_image") }}
       {% endif %}
       {% if intro %}
         <p class="{{prefix}}--card--intro">{{intro}}</p>

package/src/patterns/components/card/card.wingsuit.yml

@@ -30,6 +30,16 @@ card:
       label: Eyebrow
       description: Event details for `Detail` card
       preview: ""
+    image:
+      type: object
+      label: Image
+      description: Image settings for the card. Only applies to `Graphic Promo` and `Graphic Text` cards. Image can be a string consisting of an image src or an array of objects with `src` and `breakpoint` properties for responsive images.
+      preview: ""
+    imageAlt:
+      type: string
+      label: Image Alt
+      description: Alt text for the image
+      preview: "This is the alt text for the image"
     profile:
       type: object
       label: Profile
@@ -49,22 +59,14 @@ card:
       type: object
       label: CTA
       description: Items for clickable CTA button. Button used for `Graphic Promo` card.
-      preview:
-    image:
-      type: string
-      label: Image
-      description: The image for the card. Images should be avoided on `Graphic Promo`, `Graphic Text`, `Factlist`, and `Stat` card.
-      preview: ""
     source:
       type: object
       label: Source
       description: Source link for `Stat` cards
-      preview:
     linklist:
       type: object
       label: Link List
       description: Implementation of the LinkList component. Appears at the bottom of `Multilink` or `Feature` card.
-      preview:
     dataset:
       type: object
       label: Dataset object
@@ -164,7 +166,15 @@ card:
       fields:
         eyebrow: High-level meeting
         title: "ILO welcomes G7 call to make a just transition to a green economy happen"
-        image: "/images/hero.jpg"
+        image:
+          - breakpoint: 0
+            src: "/images/small.jpg"
+          - breakpoint: 800
+            src: "/images/medium.jpg"
+          - breakpoint: 1200
+            src: "/images/large.jpg"
+          - breakpoint: 1440
+            src: "/images/large.jpg"
         intro: "At the end of their meeting the G7 Labour Ministers highlighted the urgent need to greater focus on rights and occupational safety and health."
         linklist:
           linkgroup:

package/src/patterns/components/image/image.twig

@@ -9,7 +9,7 @@
           <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
         {% endif %}
       {% endfor %}
-      <img src="{{url|reverse|last.src}}" alt="{{alt}}">
+      <img src="{{url|reverse|last.src}}" alt="{{alt}}" {% if loading %}loading="{{ loading }}"{% endif %}>
     </picture>
     {% if not ishero or ishero =='false' %}
       {% if credit %}

package/src/patterns/components/image/image.wingsuit.yml

@@ -20,6 +20,15 @@ image:
       description: string
       preview: "© Marcel Crozet/ILO"
       required: true
+    loading:
+      type: string
+      label: Loading
+      description: The loading attribute for the image
+      required: false
+      preview: "lazy"
+      options:
+        Lazy: lazy
+        Eager: eager
     url:
       type: object
       label: URL

package/src/patterns/components/navigation/navigation.behavior.js

@@ -5,11 +5,11 @@ Drupal.behaviors.navigation = {
     Array.prototype.forEach.call(
       document.querySelectorAll(`[data-loadcomponent="Navigation"]`),
       (element) => {
-        if(!element.dataset.jsProcessed) {
-            // eslint-disable-next-line no-console
-            console.log("loading Navigation component....");
-            new Navigation(element);
-            element.dataset.jsProcessed = true;
+        if (!element.dataset.jsProcessed) {
+          // eslint-disable-next-line no-console
+          console.log("loading Navigation component....");
+          new Navigation(element);
+          element.dataset.jsProcessed = true;
         }
       }
     );

package/src/patterns/components/navigation/navigation.js

@@ -149,11 +149,11 @@ export default class Navigation {
     // menuCloseSet
     if (this.menuCloseSet.length > 0) {
       this.menuCloseSet.forEach((closeButton, i) => {
-        closeButton.addEventListener(EVENTS.CLICK, () =>
-          this.menuCloseClick(i)
+        closeButton.addEventListener(EVENTS.CLICK, (e) =>
+          this.menuCloseClick(i, e)
         );
-        closeButton.addEventListener(EVENTS.TOUCH_START, () =>
-          this.menuCloseClick(i)
+        closeButton.addEventListener(EVENTS.TOUCH_START, (e) =>
+          this.menuCloseClick(i, e)
         );
       });
     }
@@ -418,6 +418,7 @@ export default class Navigation {
    * @chainable
    */
   handleMenuOpenClick(e) {
+    e.preventDefault();
     e.stopImmediatePropagation();
     this.element.classList.add(`${this.prefix}--mobile--open`);
     this.body.classList.add(`${this.prefix}--menu--open`);
@@ -499,6 +500,8 @@ export default class Navigation {
    * @chainable
    */
   handleSubnavBackClick(e) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
     // this.element.classList.remove(`${this.prefix}--subnav--open`);
     this.subnavClickOff(e);
     this.element.classList.remove(`${this.prefix}--select--open`);
@@ -512,7 +515,9 @@ export default class Navigation {
    * @return {Object} Navigation A reference to the instance of the class
    * @chainable
    */
-  handleMenuCloseClick() {
+  handleMenuCloseClick(i, e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
     this.element.classList.remove(`${this.prefix}--mobile--open`);
     this.element.classList.remove(`${this.prefix}--subnav--open`);
 

package/src/patterns/components/navigation/navigation.wingsuit.yml

@@ -17,14 +17,14 @@ navigation:
       description: Logo for the nav
       required: true
       preview:
-        image: "/brand-assets/logo_en_horizontal_white.svg"
+        image: "/brand-assets/logo_en_horizontal_blue.svg"
         alt: Logo
     siteurl:
       type: string
       label: Site url
       description: home url for the website
       required: true
-      preview: "https://www.google.com/"
+      preview: "https://www.ilo.org/"
     tagline:
       type: object
       label: Site tagline

package/src/patterns/components/notification/notification.behavior.js

@@ -2,15 +2,14 @@ import Notification from "./notification";
 
 Drupal.behaviors.notification = {
   attach() {
-    console.log("got here....");
     Array.prototype.forEach.call(
       document.querySelectorAll(`[data-loadcomponent="Notification"]`),
       (element) => {
-        if(!element.dataset.jsProcessed) {
-            // eslint-disable-next-line no-console
-            console.log("loading Notification component....");
-            new Notification(element);
-            element.dataset.jsProcessed = true;
+        if (!element.dataset.jsProcessed) {
+          // eslint-disable-next-line no-console
+          console.log("loading Notification component....");
+          new Notification(element);
+          element.dataset.jsProcessed = true;
         }
       }
     );