@ilo-org/twig 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @ilo-org/twig
 
+## 0.2.3
+
+### Patch Changes
+
+- 069cd8eaf: FIxes to cards
+- a76395618: ESC exits out of toggle menus in the nav
+- 8cd74234c: Bugfixes to Tag, Tooltip, Callout, Checkbox, LinkList
+- Updated dependencies [069cd8eaf]
+- Updated dependencies [a76395618]
+- Updated dependencies [8cd74234c]
+  - @ilo-org/styles@0.1.8
+  - @ilo-org/themes@0.1.8
+  - @ilo-org/icons@0.1.8
+  - @ilo-org/utils@0.0.4
+
 ## 0.2.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -21,10 +21,10 @@
   ],
   "dependencies": {
     "@ilo-org/fonts": "0.0.2",
-    "@ilo-org/icons": "0.1.7",
-    "@ilo-org/styles": "0.1.7",
-    "@ilo-org/themes": "0.1.7",
-    "@ilo-org/utils": "0.0.3",
+    "@ilo-org/icons": "0.1.8",
+    "@ilo-org/styles": "0.1.8",
+    "@ilo-org/themes": "0.1.8",
+    "@ilo-org/utils": "0.0.4",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
     "video.js": "^7.19.2"
   },

package/src/patterns/components/callout/callout.twig

@@ -1,14 +1,14 @@
 {#
   CALLOUT COMPONENT
 #}
-<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isOpen %} {{prefix}}--callout--open {% endif %} {% if isCollapsible %} {{prefix}}--callout--collapse {% endif %}" data-loadcomponent="Callout" >
+<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isCollapsible == "true" and isOpen == "true" %} {{prefix}}--callout--open {% endif %} {% if isCollapsible == "true" %} {{prefix}}--callout--collapse {% endif %}" data-loadcomponent="Callout" >
   <div class="{{prefix}}--callout--sidebar">
     <span class="{{prefix}}--callout--icon icon icon--{{alert}}"></span>
   </div>
   <div class="{{prefix}}--callout--content">
     <div class="{{prefix}}--callout--header">
       <h5 class="{{prefix}}--callout--title">{{ title }}</h5>
-      {% if isCollapsible %}
+      {% if isCollapsible == "true" %}
       <button class="{{prefix}}--callout--toggle" type="button" data-open="{{ toggleOpenLabel }}" data-closed="{{ toggleClosedLabel }}">
         <span class="{{prefix}}--callout--button-text">{% if isOpen %}{{ toggleOpenLabel }}{% else %}{{ toggleClosedLabel }}{% endif %}</span>
         <span class="{{prefix}}--callout--toggle--icon" role="presentation"></span>
@@ -27,4 +27,4 @@
       </div>
     {% endif %}
   </div>
-</div>
+</div>

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

@@ -15,24 +15,6 @@ callout:
       description: The callout's content
       preview:
         faker: lorem.word
-    isCollapsible:
-      type: select
-      label: Is Collapsible
-      description: Whether or not the callout is collapsible
-      required: false
-      options:
-        true: True
-        false: False
-      preview: false
-    isOpen:
-      type: select
-      label: Is Open
-      description: Whether or not a collapsible callout is open
-      required: false
-      options:
-        true: True
-        false: False
-      preview: true
     title:
       type: string
       label: Notification Title
@@ -63,4 +45,22 @@ callout:
         success: Success
         warning: Warning
       preview: 'info'
+    isCollapsible:
+      type: select
+      label: Is Collapsible?
+      description: Whether or not the callout is collapsible
+      required: true
+      options:
+        true: True
+        false: False
+      preview: false
+    isOpen:
+      type: select
+      label: Is Open
+      description: Whether or not a collapsible callout is open on page load
+      required: false
+      options:
+        true: True
+        false: False
+      preview: true
   visibility: storybook

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

@@ -5,7 +5,7 @@
 {% if type == "" %}
   {% set type = variant %}
 {% endif %}
-  {% if link %}
+  {% if link and type != 'data' and type != 'factlist' and type != 'stat' %}
     <a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}"><span class="{{prefix}}--card--link--text">{{title}}</span></a>
   {% endif %}
   <div class="{{prefix}}--card--wrap">
@@ -25,7 +25,7 @@
       {% if intro %}
         <p class="{{prefix}}--card--intro">{{intro}}</p>
       {% endif %}
-      {% if date %}
+      {% if date and type != "stat" and type != "data" and type != "graphicpromo" and type != "stat" and type != "factlist" %}
         <time class="{{prefix}}--card--date" datetime="{{date.unix}}">{{date.human}}</time>
       {% endif %}
       {% if eventdetails %}

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

@@ -119,7 +119,6 @@ card:
       description: The graphic Card
       fields:
         title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
-        intro: ""
         eyebrow: Eyebrow title
         date:
           human: 20 September 2022
@@ -128,13 +127,11 @@ card:
         profile:
           avatar: "https://placekitten.com/128/128"
           description: "Firstname Lastname is the Senior Media Strategist. He has been with ILO for eight years."
-          link: 
+          link:
             - label: "Optional Link"
               url: "https://www.google.com"
           name: "Firstname Lastname"
           role: "Senior Media Strategist"
-        cta: ""
-        eventdetails: ""
     stat:
       label: Stat Card
       description: The stat Card
@@ -143,17 +140,8 @@ card:
         cornercut: cornercut
       fields:
         title: "Date headline"
-        image: ""
         intro: "Data title - Lorem ipsum dolor sit amet consectetur"
-        eyebrow: ""
-        date:
-          human: ""
-          unix: 1670389200
-        link: ""
-        profile: ""
-        eventdetails: ""
-        cta: ""
-        source: 
+        source:
           label: "Source: lorem ipsum dolor sit amet, 2020"
           url: "https://www.google.com/search?q=stat"
     multilink:
@@ -165,21 +153,9 @@ card:
         title: "Multi-link card - right aligned image, wide option"
         image: "https://placekitten.com/475/267"
         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:
-          human: ""
-          unix: 1670389200
-        link: ""
-        profile: ""
-        eventdetails: ""
-        cta: ""
-        source: ""
-        dataset: ""
         linklist:
-          headline: ""
           linkgroup:
-            - headline: ""
-              links:
+            - links:
                 - label: Link One
                   url: 'http://www.google.com'
                 - label: Link Two
@@ -191,16 +167,9 @@ card:
       description: The graphic promo Card
       fields:
         title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
-        image: ""
         intro: "We advance social justice and promote decent work by setting labour standards, developing policies and devising programmes."
-        eyebrow: ""
-        date:
-          human: ""
-          unix: 1670389200
         link: "https://www.google.com/search?q=graphic-promo"
-        profile: ""
-        eventdetails: ""
-        cta: 
+        cta:
           label: "Discover our unique mission"
           url: "https://www.google.com/search?q=button"
     feature:
@@ -208,15 +177,12 @@ card:
       description: The Feature Card
       fields:
         title: "Vertical info card descriptive headline text"
-        intro: ""
         eyebrow: Eyebrow title
         date:
           human: Date
           unix: 1670389200
         link: "https://www.google.com/search?q=graphic"
         image: "https://placekitten.com/412/232"
-        profile:
-        eventdetails: ""
     detail:
       label: Detail Card
       description: The Detail Card
@@ -237,22 +203,11 @@ card:
       description: The Fact List Card
       fields:
         title: "Title of fast fact list"
-        intro: ""
-        eyebrow: ""
-        date:
-          human: ""
-          unix: 1670389200
-        link: ""
-        image: ""
-        profile: ""
-        eventdetails: ""
-        cta: ""
-        list: 
-          title: ""
+        list:
           settings:
             - ordered: unordered
             - alignment: default
-          items: 
+          items:
             - content: "Wipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
               id: "list1"
             - content: "Nut labore et dolore magna sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
@@ -261,27 +216,17 @@ card:
       label: Data Card
       description: The Data Card
       fields:
-        title: ""
-        image: "https://placekitten.com/205/179"
-        intro: ""
         eyebrow: "Event details"
-        date:
-          human: ""
-          unix: 1670389200
-        link: ""
-        profile: ""
-        eventdetails: ""
-        cta: ""
-        dataset: 
-          content: 
-            items: 
+        dataset:
+          content:
+            items:
               - label: Date
                 copy: Publication date
               - label: Event type
                 copy: Event location
           files:
             headline: Files
-            items: 
+            items:
               - label: File/size MB 1
                 url: "https://www.google.com/search?q=file1"
               - label: File/size MB 2
@@ -290,7 +235,7 @@ card:
                 url: "https://www.google.com/search?q=file3"
           links:
             headline: Languages
-            items: 
+            items:
               - label: Language link 1
                 url: "https://www.google.com/search?q=link"
               - label: Language link 2

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

@@ -63,6 +63,7 @@ export default class Navigation {
     );
     this.contextLinks = this.element.querySelectorAll(`.${this.prefix}--context-menu--link`);
     this.languageLinks = this.element.querySelectorAll(`.${this.prefix}--nav--language`);
+    this.body = document.body;
 
     return this;
   }
@@ -74,15 +75,23 @@ export default class Navigation {
    * @chainable
    */
   setupHandlers() {
-    this.subnavOpenClick = this.handleSubnavClickOpen.bind(this);
+    this.subnavClick = this.handleSubnavClick.bind(this);
+    this.subnavClickOff = this.handleSubnavClickOff.bind(this);
+    this.subnavClickOn = this.handleSubnavClickOn.bind(this);
     this.subnavBackClick = this.handleSubnavBackClick.bind(this);
     this.menuCloseClick = this.handleMenuCloseClick.bind(this);
     this.menuOpenClick = this.handleMenuOpenClick.bind(this);
-    this.searchButtonClick = this.handleSearchButtonClick.bind(this);
-    this.contextButtonClick = this.handleContextButtonClick.bind(this);
     this.languageButtonClick = this.handleLanguageButtonClick.bind(this);
     this.contextLinkClick = this.handleContextLinkClick.bind(this);
     this.onResize = this.handleResize.bind(this);
+    this.keyPress = this.handleKeyPress.bind(this);
+    this.bodyClick = this.removeClass.bind(this);
+    this.contextButtonClick = this.handleContextButtonClick.bind(this);
+    this.contextButtonClickOff = this.handleContextButtonClickOff.bind(this);
+    this.contextButtonClickOn = this.handleContextButtonClickOn.bind(this);
+    this.searchButtonClick = this.handleSearchButtonClick.bind(this);
+    this.searchButtonClickOff = this.handleSearchButtonClickOff.bind(this);
+    this.searchButtonClickOn = this.handleSearchButtonClickOn.bind(this);
 
     return this;
   }
@@ -96,8 +105,8 @@ export default class Navigation {
   enable() {
     // subnavButton
     if (this.subnavButton) {
-      this.subnavButton.addEventListener(EVENTS.CLICK, () => this.subnavOpenClick());
-      this.subnavButton.addEventListener(EVENTS.TOUCH_START, () => this.subnavOpenClick());
+      this.subnavButton.addEventListener(EVENTS.CLICK, (e) => this.subnavClick(e));
+      this.subnavButton.addEventListener(EVENTS.TOUCH_START, (e) => this.subnavClick(e));
     }
 
     // subnavBack
@@ -110,8 +119,8 @@ export default class Navigation {
 
     // searchButton
     if (this.searchButton) {
-      this.searchButton.addEventListener(EVENTS.CLICK, () => this.searchButtonClick());
-      this.searchButton.addEventListener(EVENTS.TOUCH_START, () => this.searchButtonClick());
+      this.searchButton.addEventListener(EVENTS.CLICK, (e) => this.searchButtonClick(e));
+      this.searchButton.addEventListener(EVENTS.TOUCH_START, (e) => this.searchButtonClick(e));
     }
     // menuCloseSet
     if (this.menuCloseSet.length > 0) {
@@ -129,8 +138,8 @@ export default class Navigation {
 
     // contextButton
     if (this.contextButton) {
-      this.contextButton.addEventListener(EVENTS.CLICK, () => this.contextButtonClick());
-      this.contextButton.addEventListener(EVENTS.TOUCH_START, () => this.contextButtonClick());
+      this.contextButton.addEventListener(EVENTS.CLICK, (e) => this.contextButtonClick(e));
+      this.contextButton.addEventListener(EVENTS.TOUCH_START, (e) => this.contextButtonClick(e));
     }
 
     // languageButton
@@ -160,6 +169,22 @@ export default class Navigation {
     return this;
   }
 
+  /**
+   * Onclick interaction with the body element
+   *
+   * @param {String} classText - Class name to remove from the element on body click
+   * @return {Object} Navigation A reference to the instance of the class
+   * @chainable
+   */
+  removeClass(e, classText) {
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+
+    this.element.classList.remove(classText);
+
+    return this;
+  }
+
   /**
    * Onclick interaction with the context links
    *
@@ -173,6 +198,26 @@ export default class Navigation {
     return this;
   }
 
+  /**
+   * Actions performed on key press
+   *
+   * @param {Event} e - event object
+   * @param {Function} callback - function to call if the escape key is pressed
+   *
+   * @return {Object} Nav A reference to the instance of the class
+   * @chainable
+   */
+  handleKeyPress(e, callback) {
+    if (e.key === 'Escape') {
+      // this.element.classList.remove(`${this.prefix}--context--open`);
+      // this.element.classList.remove(`${this.prefix}--subnav--open`);
+      // this.element.classList.remove(`${this.prefix}--search--open`);
+      callback(e);
+    }
+
+    return this;
+  }
+
   /**
    * Onclick interaction with the language menu button
    *
@@ -191,8 +236,56 @@ export default class Navigation {
    * @return {Object} Navigation A reference to the instance of the class
    * @chainable
    */
-  handleContextButtonClick() {
-    this.element.classList.toggle(`${this.prefix}--context--open`);
+  handleContextButtonClickOn(e) {
+    e.stopImmediatePropagation();
+    // e.stopPropagation();
+    this.element.classList.add(`${this.prefix}--context--open`);
+    window.addEventListener(
+      EVENTS.KEY_DOWN,
+      (ev) => this.keyPress(ev, this.contextButtonClickOff),
+      false
+    );
+    this.body.addEventListener(EVENTS.CLICK, (ev) => this.handleContextButtonClickOff(ev), false);
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction with the context menu button
+   *
+   * @return {Object} Navigation A reference to the instance of the class
+   * @chainable
+   */
+  handleContextButtonClickOff(e) {
+    e.stopImmediatePropagation();
+    // e.stopPropagation();
+    this.element.classList.remove(`${this.prefix}--context--open`);
+    window.removeEventListener(
+      EVENTS.KEY_DOWN,
+      (ev) => this.keyPress(ev, this.contextButtonClickOff),
+      false
+    );
+    this.body.removeEventListener(
+      EVENTS.CLICK,
+      (ev) => this.handleContextButtonClickoff(ev, `${this.prefix}--context--open`),
+      false
+    );
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction with the context menu button
+   *
+   * @return {Object} Navigation A reference to the instance of the class
+   * @chainable
+   */
+  handleContextButtonClick(e) {
+    if (this.element.classList.contains(`${this.prefix}--context--open`)) {
+      this.contextButtonClickOff(e);
+    } else {
+      this.contextButtonClickOn(e);
+    }
 
     return this;
   }
@@ -203,10 +296,54 @@ export default class Navigation {
    * @return {Object} Navigation A reference to the instance of the class
    * @chainable
    */
-  handleSearchButtonClick() {
-    this.element.classList.toggle(`${this.prefix}--search--open`);
+  handleSearchButtonClickOn(e) {
+    e.stopImmediatePropagation();
+    // e.stopPropagation();
+    this.element.classList.add(`${this.prefix}--search--open`);
+    window.addEventListener(
+      EVENTS.KEY_DOWN,
+      (ev) => this.keyPress(ev, this.searchButtonClickOff),
+      false
+    );
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction with the search button
+   *
+   * @return {Object} Navigation A reference to the instance of the class
+   * @chainable
+   */
+  handleSearchButtonClickOff(e) {
+    e.stopImmediatePropagation();
+    // e.stopPropagation();
+    this.element.classList.remove(`${this.prefix}--search--open`);
+    window.removeEventListener(
+      EVENTS.KEY_DOWN,
+      (ev) => this.keyPress(ev, this.searchButtonClickOff),
+      false
+    );
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction with the search button
+   *
+   * @return {Object} Navigation A reference to the instance of the class
+   * @chainable
+   */
+  handleSearchButtonClick(e) {
+    // this.element.classList.toggle(`${this.prefix}--search--open`);
     this.element.classList.remove(`${this.prefix}--subnav--open`);
 
+    if (this.element.classList.contains(`${this.prefix}--search--open`)) {
+      this.searchButtonClickOff(e);
+    } else {
+      this.searchButtonClickOn(e);
+    }
+
     return this;
   }
 
@@ -222,16 +359,55 @@ export default class Navigation {
     return this;
   }
 
+  /**
+   * Onclick interaction with the subnav button
+   *
+   * @return {Object} Navigation A reference to the instance of the class
+   * @chainable
+   */
+  handleSubnavClickOn(e) {
+    e.stopImmediatePropagation();
+    // e.stopPropagation();
+    this.element.classList.add(`${this.prefix}--subnav--open`);
+    window.addEventListener(EVENTS.KEY_DOWN, (ev) => this.keyPress(ev, this.subnavClickOff), false);
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction with the subnav button
+   *
+   * @return {Object} Navigation A reference to the instance of the class
+   * @chainable
+   */
+  handleSubnavClickOff(e) {
+    e.stopImmediatePropagation();
+    // e.stopPropagation();
+    this.element.classList.remove(`${this.prefix}--subnav--open`);
+    window.removeEventListener(
+      EVENTS.KEY_DOWN,
+      (ev) => this.keyPress(ev, this.subnavClickOff),
+      false
+    );
+
+    return this;
+  }
+
   /**
    * Onclick interaction with the Subnav button
    *
    * @return {Object} Navigation A reference to the instance of the class
    * @chainable
    */
-  handleSubnavClickOpen() {
-    this.element.classList.toggle(`${this.prefix}--subnav--open`);
+  handleSubnavClick(e) {
     this.element.classList.remove(`${this.prefix}--search--open`);
 
+    if (this.element.classList.contains(`${this.prefix}--subnav--open`)) {
+      this.subnavClickOff(e);
+    } else {
+      this.subnavClickOn(e);
+    }
+
     return this;
   }
 
@@ -242,7 +418,8 @@ export default class Navigation {
    * @chainable
    */
   handleSubnavBackClick() {
-    this.element.classList.remove(`${this.prefix}--subnav--open`);
+    // this.element.classList.remove(`${this.prefix}--subnav--open`);
+    this.subnavClickOff(e);
     this.element.classList.remove(`${this.prefix}--select--open`);
 
     return this;

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

@@ -8,6 +8,12 @@
       <span class="ilo--icon" title="Remove"></span>
     </button>
   </li>
+{% elseif tagType == "reset" %}
+  <li class="{{prefix}}--tags__item">
+    <button class="{{prefix}}--tag {{prefix}}--tag--reset {{prefix}}--tag--active" id="{{ id }}" data-active={{ defaultActive }} type="button">
+      {{content}}
+    </button>
+  </li>
 {% elseif tagType == "anchor" %}
 <li class="{{prefix}}--tags__item">
     <a class="{{prefix}}--tag {{prefix}}--tag--anchor {% if defaultActive %} {{prefix}}--tag--active{% endif %}" href="{{ url }}"  id="{{ id }}" data-active={{ defaultActive }}>

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

@@ -20,7 +20,7 @@ tags:
         - content: content 3
           id: tag3
           defaultActive: false
-  settings: 
+  settings:
     allowMultipleActive:
       type: select
       label: Allow Multiple Active
@@ -38,6 +38,7 @@ tags:
         anchor: Anchor
         button: Button
         display: Display
+        reset: Reset
       preview: display
       required: true
   visibility: storybook