@ilo-org/twig 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @ilo-org/twig
 
+## 0.1.2
+
+### Patch Changes
+
+- a84c36d: Navigation RTL styles and design QA
+- Updated dependencies [a84c36d]
+  - @ilo-org/icons@0.1.2
+  - @ilo-org/styles@0.1.2
+  - @ilo-org/themes@0.1.2
+
 ## 0.1.1
 
 ### Patch Changes

package/package.json

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

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

@@ -22,7 +22,7 @@ cardgroup:
       fields:
         group:
           - title: "Multi-link card - first"
-            image: "http://placekitten.com/475/267"
+            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: ""
@@ -44,7 +44,7 @@ cardgroup:
                     - label: Link Three
                       url: 'http://www.google.com'
           - title: "Multi-link card second - right aligned image, wide option"
-            image: "http://placekitten.com/475/267"
+            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: ""
@@ -65,7 +65,7 @@ cardgroup:
                     - label: Link Three
                       url: 'http://www.google.com'
           - title: "Multi-link card - right aligned image, wide option"
-            image: "http://placekitten.com/475/267"
+            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: ""
@@ -93,7 +93,7 @@ cardgroup:
       fields:
         group:
           - title: "Vertical info card descriptive headline text"
-            image: "http://placekitten.com/475/267"
+            image: "https://placekitten.com/475/267"
             intro: ""
             eyebrow: "Eyebrow title"
             date:
@@ -109,7 +109,7 @@ cardgroup:
             dataset: ""
             color: ""
           - title: "Vertical info card descriptive headline text"
-            image: "http://placekitten.com/475/267"
+            image: "https://placekitten.com/475/267"
             intro: ""
             eyebrow: "Eyebrow title"
             date:
@@ -125,7 +125,7 @@ cardgroup:
             dataset: ""
             color: ""
           - title: "Vertical info card descriptive headline text Vertical info card descriptive headline text Vertical info card descriptive headline text"
-            image: "http://placekitten.com/475/267"
+            image: "https://placekitten.com/475/267"
             intro: ""
             eyebrow: "Eyebrow title"
             date:
@@ -141,7 +141,7 @@ cardgroup:
             dataset: ""
             color: ""
           - title: "Vertical info card descriptive headline text"
-            image: "http://placekitten.com/475/267"
+            image: "https://placekitten.com/475/267"
             intro: ""
             eyebrow: "Eyebrow title"
             date:
@@ -164,7 +164,7 @@ cardgroup:
       fields:
         group:
           - title: "Horizontal info card descriptive headline text"
-            image: "http://placekitten.com/196/296"
+            image: "https://placekitten.com/196/296"
             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:

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

@@ -54,11 +54,15 @@ export default class Navigation {
      */
     this.subnavButton = this.element.querySelector(`.${this.prefix}--nav--trigger`);
     this.menuCloseSet = this.element.querySelectorAll(`.${this.prefix}--header--menu--close`);
-    this.subnavBack = this.element.querySelector(`.${this.prefix}--mobile--subnav--back`);
+    this.subnavBack = this.element.querySelectorAll(`.${this.prefix}--mobile--subnav--back`);
     this.menuOpen = this.element.querySelector(`.${this.prefix}--header--menu`);
     this.searchButton = this.element.querySelector(`.${this.prefix}--search--button`);
     this.contextButton = this.element.querySelector(`.${this.prefix}--language-switcher--button`);
+    this.languageButton = this.element.querySelector(
+      `.${this.prefix}--mobile--nav--language--switcher--button`
+    );
     this.contextLinks = this.element.querySelectorAll(`.${this.prefix}--context-menu--link`);
+    this.languageLinks = this.element.querySelectorAll(`.${this.prefix}--nav--language`);
 
     return this;
   }
@@ -76,7 +80,9 @@ export default class Navigation {
     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);
 
     return this;
   }
@@ -93,11 +99,15 @@ export default class Navigation {
       this.subnavButton.addEventListener(EVENTS.CLICK, () => this.subnavOpenClick());
       this.subnavButton.addEventListener(EVENTS.TOUCH_START, () => this.subnavOpenClick());
     }
+
     // subnavBack
-    if (this.subnavBack) {
-      this.subnavBack.addEventListener(EVENTS.CLICK, () => this.subnavBackClick());
-      this.subnavBack.addEventListener(EVENTS.TOUCH_START, () => this.subnavBackClick());
+    if (this.subnavBack.length > 0) {
+      this.subnavBack.forEach((button, i) => {
+        button.addEventListener(EVENTS.CLICK, () => this.subnavBackClick(i));
+        button.addEventListener(EVENTS.TOUCH_START, () => this.subnavBackClick(i));
+      });
     }
+
     // searchButton
     if (this.searchButton) {
       this.searchButton.addEventListener(EVENTS.CLICK, () => this.searchButtonClick());
@@ -123,6 +133,12 @@ export default class Navigation {
       this.contextButton.addEventListener(EVENTS.TOUCH_START, () => this.contextButtonClick());
     }
 
+    // languageButton
+    if (this.languageButton) {
+      this.languageButton.addEventListener(EVENTS.CLICK, () => this.languageButtonClick());
+      this.languageButton.addEventListener(EVENTS.TOUCH_START, () => this.languageButtonClick());
+    }
+
     // contextLinks
     if (this.contextLinks.length > 0 && this.callback) {
       this.contextLinks.forEach((contextLink, i) => {
@@ -131,6 +147,16 @@ export default class Navigation {
       });
     }
 
+    // languageLinks
+    if (this.languageLinks.length > 0 && this.callback) {
+      this.languageLinks.forEach((languageLink, i) => {
+        languageLink.addEventListener(EVENTS.CLICK, (e) => this.contextLinkClick(e));
+        languageLink.addEventListener(EVENTS.TOUCH_START, (e) => this.contextLinkClick(e));
+      });
+    }
+
+    window.addEventListener(EVENTS.RESIZE, (e) => this.onResize(e));
+
     return this;
   }
 
@@ -147,6 +173,18 @@ export default class Navigation {
     return this;
   }
 
+  /**
+   * Onclick interaction with the language menu button
+   *
+   * @return {Object} Navigation A reference to the instance of the class
+   * @chainable
+   */
+  handleLanguageButtonClick() {
+    this.element.classList.toggle(`${this.prefix}--select--open`);
+
+    return this;
+  }
+
   /**
    * Onclick interaction with the context menu button
    *
@@ -205,6 +243,7 @@ export default class Navigation {
    */
   handleSubnavBackClick() {
     this.element.classList.remove(`${this.prefix}--subnav--open`);
+    this.element.classList.remove(`${this.prefix}--select--open`);
 
     return this;
   }
@@ -221,4 +260,19 @@ export default class Navigation {
 
     return this;
   }
+
+  /**
+   * onResize interaction with the accordion button
+   *
+   * @return {Object} Breadcrumb A reference to the instance of the class
+   * @chainable
+   */
+  handleResize(e) {
+    this.element.classList.remove(`${this.prefix}--context--open`);
+    this.element.classList.remove(`${this.prefix}--mobile--open`);
+    this.element.classList.remove(`${this.prefix}--subnav--open`);
+    this.element.classList.remove(`${this.prefix}--search--open`);
+
+    return this;
+  }
 }

package/src/patterns/components/navigation/navigation.twig

@@ -37,9 +37,35 @@
           </a>
           <button class="{{prefix}}--header--menu--close">{{menucloselabel}}</button>
         </div> <!-- /.{{prefix}}--mobile--logo -->
-        <div class="{{prefix}}--mobile--nav--search"></div> <!-- /.{{prefix}}--mobile--search -->
+        <div class="{{prefix}}--mobile--nav--search">
+          {% include '@components/searchfield/searchfield.twig' with {
+            input: searchfield.input,
+            action: searchfield.action,
+            prefix: prefix
+          }
+        %}
+        </div> <!-- /.{{prefix}}--mobile--search -->
+
+        <div class="{{prefix}}--mobile--nav--language--switcher">
+          <button class="{{prefix}}--mobile--nav--language--switcher--button" type="button">{{languagelabel}}</button>
+        </div> <!-- /.{{prefix}}--mobile--nav--language--switcher -->
+        <div class="{{prefix}}--mobile--nav--language--select">
+          <div class="{{prefix}}--header--inner">
+            <div class="{{prefix}}--mobile--subnav--menu">
+              <button class="{{prefix}}--mobile--subnav--back" type="button">{{subnav.mobilebacklabel}}</button>
+              <button class="{{prefix}}--header--menu--close">{{subnav.mobilecloselabel}}</button>
+              <h6 class="{{prefix}}--mobile--subnav--label">{{languagelabel}}</h6>
+            </div> <!-- /{{prefix}}--mobile--subnav--menu -->
+            <ul class="{{prefix}}--nav--set">
+              {% for item in languagecontextmenu.links %}
+                <li class="{{prefix}}--nav--items">
+                  <a href="{{item.url}}" class="{{prefix}}--nav--link {{prefix}}--nav--language">{{item.label}}</a>
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
 
-        <div class="{{prefix}}--mobile--nav--language--switcher"></div> <!-- /.{{prefix}}--mobile--nav--language--switcher -->
       </div> <!-- /.{{prefix}}--mobile--nav -->
       <nav class="{{prefix}}--nav" aria-labelledby="primary-navigation">
         <h2 class="{{prefix}}--nav--label" id="primary-navigation">{{primarynav.navlabel}}</h2>