@ilo-org/twig 0.2.24 → 0.2.26

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

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.2.24 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.2.26 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.24 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.2.26 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @ilo-org/twig
 
+## 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
+
+- 48900c9ac: Add an if statement to all Drupal.behaviors to avoid calling js functions more than once.
+
 ## 0.2.24
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",

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

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

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

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

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

@@ -12,7 +12,14 @@
     {% if image %}
       <div class="{{prefix}}--card--image--wrapper">
         {% block card_image %}
-          <picture><img class="{{prefix}}--card--image" src="{{image}}" alt="{{title}}"></picture>
+          <picture>
+            {% for img in url|reverse %}
+              {% if loop.last == false  %}
+                <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+              {% endif %}
+            {% endfor %}
+            <img class="{{prefix}}--card--image" src="{{url|reverse|last.src}}" alt="{{alt}}" {% if loading %}loading="{{ loading }}"{% endif %}>
+          </picture>
         {% endblock %}
       </div>
     {% endif %}
@@ -26,7 +33,14 @@
       {% 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>
+            <picture>
+              {% for img in url|reverse %}
+                {% if loop.last == false  %}
+                  <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+                {% endif %}
+              {% endfor %}
+              <img class="{{prefix}}--card--image" src="{{url|reverse|last.src}}" alt="{{alt}}" {% if loading %}loading="{{ loading }}"{% endif %}>
+            </picture>
           {% endblock %}
         </div>
       {% endif %}

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/loading/loading.behavior.js

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

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

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

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

@@ -5,9 +5,12 @@ Drupal.behaviors.navigation = {
     Array.prototype.forEach.call(
       document.querySelectorAll(`[data-loadcomponent="Navigation"]`),
       (element) => {
-        // eslint-disable-next-line no-console
-        console.log("loading Navigation component....");
-        new Navigation(element);
+        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/notification/notification.behavior.js

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

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

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

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

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

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

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

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

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

package/src/patterns/components/tags/tag.behavior.js

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

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

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

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

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