@ilo-org/twig 0.3.0 → 0.4.0

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

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

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @ilo-org/twig
 
+## 0.4.0
+
+### Minor Changes
+
+- 36f5da68a: In responsive images, allow the breakpoint property to take either a string containing a media query or a number that will indicate the minimum width of the viewport at which the image should be displayed.
+
+### Patch Changes
+
+- 11801070b: Change request for videojs player to be able to work with Youtube videos.
+- 1692a67dc: Remove needless console.logs
+- bbfa1d9b9: Add Alt and loading card variables on cardgroup template.
+- 1b942833b: Remove max-width for the video component. Not needed.
+- Updated dependencies [11801070b]
+- Updated dependencies [1b942833b]
+  - @ilo-org/styles@0.3.5
+
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [ee2e53f51]
+  - @ilo-org/styles@0.3.4
+
 ## 0.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.3.0",
+  "version": "0.4.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.3",
+    "@ilo-org/styles": "0.3.5",
     "@ilo-org/themes": "0.1.15",
     "@ilo-org/utils": "0.0.11"
   },

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

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

package/src/patterns/components/accordion/accordion.js

@@ -63,7 +63,6 @@ export default class Accordion {
     this.accordionButtons = this.element.querySelectorAll(
       ".ilo--accordion--button"
     );
-    console.log(this.multipleExpanded);
 
     return this;
   }

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

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

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

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

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

@@ -121,8 +121,6 @@ export default class Callout {
    */
   handleClick() {
     // callback of sorts
-    console.log("button clicked");
-
     return this;
   }
 

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

@@ -16,14 +16,18 @@
             <picture>
               {% for img in image|reverse %}
                 {% if loop.last == false  %}
-                  <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+                  {% if img.breakpoint matches '/^\\d+$/' %}
+                    <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+                  {% else %}
+                    <source srcset="{{img.src}}" media="{{img.breakpoint}}">
+                  {% endif %}
                 {% endif %}
               {% endfor %}
-              <img class="{{prefix}}--card--image" src="{{image|reverse|last.src}}" alt="{{imageAlt}}" {% if loading %} loading="{{ loading }}"{% endif %}>
+              <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}}">
+              <img class="{{prefix}}--card--image" src="{{image}}" alt="{{imageAlt}}" {% if loading %} loading="{{ loading }}" {% endif %}>
             </picture>
           {% endif %}
         </div>

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

@@ -33,8 +33,16 @@ card:
     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: ""
+      description: Image settings for the card. For responsive images, this can be an array of objects with an `src` property pointing to the image file and a `breakpoint` property which is either a number indicating the minimum viewport width at which the image should be displayed or a media query. For static images, this can be a string pointing to the image file.
+      preview:
+        - breakpoint: "(min-width: 0px)"
+          src: "/images/small.jpg"
+        - breakpoint: "(min-width: 800px)"
+          src: "/images/medium.jpg"
+        - breakpoint: "(min-width: 1200px)"
+          src: "/images/large.jpg"
+        - breakpoint: "(min-width: 1440px)"
+          src: "/images/large.jpg"
     imageAlt:
       type: string
       label: Image Alt
@@ -135,7 +143,6 @@ card:
         date:
           human: 20 September 2022
           unix: 1670389200
-        image: ""
         link: "https:/www.ilo.org"
         profile:
           avatar: "/images/ilo-dg.jpg"
@@ -166,15 +173,6 @@ card:
       fields:
         eyebrow: High-level meeting
         title: "ILO welcomes G7 call to make a just transition to a green economy happen"
-        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:
@@ -206,7 +204,6 @@ card:
           human: 17 March 2022
           unix: 1670389200
         link: "https://www.ilo.org/search?q=graphic"
-        image: "/images/hero.jpg"
         linklist:
           headline: ""
           linkgroup:
@@ -225,7 +222,6 @@ card:
           human: 17 March 2022
           unix: 1670389200
         link: "https://www.ilo.org"
-        image: "/images/medium.jpg"
         profile:
         eventdetails: "8:30 - 12:00 CET | Geneva"
     factlist:

package/src/patterns/components/cardgroup/cardgroup.twig

@@ -19,6 +19,8 @@
         list: card.list,
         linklist: card.linklist,
         color: card.color,
+        imageAlt: card.imageAlt,
+        loading: card.loading,
         prefix: prefix,
         theme: theme,
         cornercut: cornercut,

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

@@ -23,6 +23,8 @@ cardgroup:
         group:
           - title: "Multi-link card - first"
             image: "/images/hero.jpg"
+            imageAlt: "The alt text of the image"
+            loading: lazy
             intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
             eyebrow: ""
             date: ""
@@ -45,6 +47,8 @@ cardgroup:
                       url: "http://www.google.com"
           - title: "Multi-link card second - right aligned image, wide option"
             image: "/images/medium.jpg"
+            imageAlt: "The alt text of the image"
+            loading: "lazy"
             intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
             eyebrow: ""
             date: ""
@@ -66,6 +70,8 @@ cardgroup:
                       url: "http://www.google.com"
           - title: "Multi-link card - right aligned image, wide option"
             image: "/images/ilo-headquarters.jpg"
+            imageAlt: "The alt text of the image"
+            loading: "lazy"
             intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
             eyebrow: ""
             date: ""
@@ -94,6 +100,8 @@ cardgroup:
         group:
           - title: "Vertical info card descriptive headline text"
             image: "/images/small.jpg"
+            imageAlt: "The alt text of the image"
+            loading: "lazy"
             intro: ""
             eyebrow: "Eyebrow title"
             date:
@@ -109,6 +117,8 @@ cardgroup:
             color: ""
           - title: "Vertical info card descriptive headline text"
             image: "/images/hero.jpg"
+            imageAlt: "The alt text of the image"
+            loading: "lazy"
             intro: ""
             eyebrow: "Eyebrow title"
             date:
@@ -124,6 +134,8 @@ cardgroup:
             color: ""
           - title: "Vertical info card descriptive headline text Vertical info card descriptive headline text Vertical info card descriptive headline text"
             image: "images/ilo-headquarters.jpg"
+            imageAlt: "The alt text of the image"
+            loading: "lazy"
             intro: ""
             eyebrow: "Eyebrow title"
             date:
@@ -139,6 +151,8 @@ cardgroup:
             color: ""
           - title: "Vertical info card descriptive headline text"
             image: "/images/youtube-video-poster.avif"
+            imageAlt: "The alt text of the image"
+            loading: "lazy"
             intro: ""
             eyebrow: "Eyebrow title"
             date:
@@ -161,6 +175,8 @@ cardgroup:
         group:
           - title: "Horizontal info card descriptive headline text"
             image: "/images/ilo-headquarters.jpg"
+            imageAlt: "The alt text of the image"
+            loading: "lazy"
             intro: "This ILO flagship report details the effects of the COVID-19 crisis on the world of work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu auctor tusrpis, this is 200 characters."
             eyebrow: "Eyebrow title"
             date:
@@ -177,6 +193,8 @@ cardgroup:
             color: ""
           - title: "Horizontal info card descriptive headline text"
             image: "/images/small.jpg"
+            imageAlt: "The alt text of the image"
+            loading: "lazy"
             intro: "This ILO flagship report details the effects of the COVID-19 crisis on the world of work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu auctor tusrpis, this is 200 characters."
             eyebrow: "Eyebrow title"
             date:
@@ -335,6 +353,8 @@ cardgroup:
         group:
           - title: ""
             image: "/images/small.jpg"
+            imageAlt: "The alt text of the image"
+            loading: "lazy"
             intro: ""
             eyebrow: "Event details"
             date: ""

package/src/patterns/components/form/fileupload.behavior.js

@@ -6,7 +6,6 @@ Drupal.behaviors.fileupload = {
       document.querySelectorAll(`[data-loadcomponent="FileUpload"]`),
       (element) => {
         // eslint-disable-next-line no-console
-        console.log("loading FileUpload component....");
         new FileUpload(element);
       }
     );

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

@@ -6,7 +6,12 @@
     <picture class="{{prefix}}--image--img" {% if credit and ishero and ishero != 'false' %}title="{{credit}}"{% endif %}>
       {% for img in url|reverse %}
         {% if loop.last == false  %}
-          <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+          {% if img.breakpoint matches '/^\\d+$/' %}
+            <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+          {% else %}
+            <source srcset="{{img.src}}" media="{{img.breakpoint}}">
+          {% endif %}
+          <source srcset="{{img.src}}" media="{{img.breakpoint}}">
         {% endif %}
       {% endfor %}
       <img src="{{url|reverse|last.src}}" alt="{{alt}}" {% if loading %}loading="{{ loading }}"{% endif %}>

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

@@ -32,16 +32,16 @@ image:
     url:
       type: object
       label: URL
-      description: The image url(s), and at which breakpoint each should be displayed.
+      description: The image url(s), and at which breakpoint each should be displayed. This is a list of objects, each with a breakpoint and src property. The `src`` property is the url of the image, and the `breakpoint` property can be either a media query string or an integer that will be supplied to a `min-width` media query. The first url object in the list is the default image, and will be used if no other breakpoint matches.
       required: true
       preview:
-        - breakpoint: 0
+        - breakpoint: "(min-width: 0px)"
           src: "/images/small.jpg"
-        - breakpoint: 800
+        - breakpoint: "(min-width: 800px)"
           src: "/images/medium.jpg"
-        - breakpoint: 1200
+        - breakpoint: "(min-width: 1200px)"
           src: "/images/large.jpg"
-        - breakpoint: 1440
+        - breakpoint: "(min-width: 1440px)"
           src: "/images/large.jpg"
   settings:
     ishero:

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

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

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

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

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

@@ -7,7 +7,6 @@ Drupal.behaviors.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

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

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

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

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

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

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

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

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

@@ -121,7 +121,6 @@ export default class Tabs {
   onKeyPress(e) {
     let flag = false;
     const tabid = e.currentTarget.getAttribute(ARIA.CONTROLS);
-    console.log(e.key);
 
     switch (e.key) {
       case "ArrowLeft":

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

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

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

@@ -113,7 +113,6 @@ export default class Tag {
     });
 
     // this.updateTagItems();
-    console.log(id);
     this.removeParentDom(id);
 
     return this;

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

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

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

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

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

@@ -86,8 +86,6 @@ export default class Video {
    * @chainable
    */
   start() {
-    console.log("this.VideoElement", this.VideoElement);
-
     this.player = videojs(this.VideoElement, {
       autoplay: false,
       controls: true,
@@ -108,6 +106,9 @@ export default class Video {
       errorDisplay: false,
       textTrackSettings: false,
       resizeManager: false,
+      sources: [
+        { type: this.element.dataset.vjsType, src: this.element.dataset.src },
+      ],
     });
 
     return this;

package/src/patterns/components/video/videoplayer.twig

@@ -4,7 +4,6 @@
 {% set poster = url|last %}
 <div class="{{prefix}}--videoplayer" data-loadcomponent="Video" data-prefix="{{prefix}}"">
     <video class="{{prefix}}--video--element" poster="{{poster.src}}">
-      <source src="{{src}}" />
     </video>
 </div>