@ilo-org/twig 0.2.6 → 0.2.7

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @ilo-org/twig
 
+## 0.2.7
+
+### Patch Changes
+
+- 94bd642d9: ILOUAT-16: Clicking on the page should close subnav menu
+  ILOUAT-26: mobile hamburger click shouldn't auto navigate to inside link
+  ILOUAT-27: Menu take over on mobile should be the whole page without the ability to scroll past it
+  ILOUAT-37: Subnav pane should properly open when subnav items are focused
+- a167b7405: - Border radius for context menu
+  - Mobile nav disappear on breakpoint instead of any resize event
+  - More List spacing fixes (title item)
+  - Breadcrumb on mobile in heroes
+  - Bugfixes for feature card on wide mode with list item
+  - Add in "Back to main site" link for local nav
+- 79e17c5d3: Bufdixes to multiple components
+- 7b3813bb1: Bugfixes to multiple components
+- Updated dependencies [94bd642d9]
+- Updated dependencies [a167b7405]
+- Updated dependencies [79e17c5d3]
+- Updated dependencies [7b3813bb1]
+  - @ilo-org/fonts@0.0.4
+  - @ilo-org/icons@0.1.12
+  - @ilo-org/styles@0.1.12
+  - @ilo-org/themes@0.1.12
+  - @ilo-org/utils@0.0.8
+
 ## 0.2.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -20,11 +20,11 @@
     "components"
   ],
   "dependencies": {
-    "@ilo-org/fonts": "0.0.3",
-    "@ilo-org/icons": "0.1.11",
-    "@ilo-org/styles": "0.1.11",
-    "@ilo-org/themes": "0.1.11",
-    "@ilo-org/utils": "0.0.7",
+    "@ilo-org/fonts": "0.0.4",
+    "@ilo-org/icons": "0.1.12",
+    "@ilo-org/styles": "0.1.12",
+    "@ilo-org/themes": "0.1.12",
+    "@ilo-org/utils": "0.0.8",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
     "video.js": "^7.19.2"
   },

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

@@ -32,7 +32,7 @@
     {% if cta %}
     <div class="{{prefix}}--cardgroup--button-wrap">
       <a
-        class="{{prefix}}--button {{prefix}}--button--small {{prefix}}--button--secondary"
+        class="{{prefix}}--button {{prefix}}--button--large {{prefix}}--button--secondary"
         href="{{cta.url}}"
       >
         <span class="button__label">{{ cta.label }}</span>

package/src/patterns/components/hero/hero.twig

@@ -13,8 +13,6 @@
   {% else %}
     {% include "@components/image/image.twig" with {
       alt: image.alt,
-      caption: image.caption,
-      credit: image.credit,
       prefix: prefix,
       url: image.url,
     } only %}
@@ -30,4 +28,4 @@
     title: herocard.title,
     types: types
   } only %}
-</div>
+</div>

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

@@ -26,9 +26,7 @@ hero:
       type: object
       preview:
         alt: Lorem ipsum
-        caption: ""
-        credit: ""
-        url: 
+        url:
           - breakpoint: 0
             src: "https://placekitten.com/1920/800"
           - breakpoint: 768
@@ -36,12 +34,12 @@ hero:
     herocard:
       label: Part of the hero that displays text on top of image (or if no image on a background color). There are light and dark versions and all text parts are optional.
       type: object
-      preview: 
+      preview:
         alignment: left
         datecopy: 11 February 2022
         eyebrow: Eyebrow
         intro: "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-        socials: 
+        socials:
           - label: "Facebook"
             url: "https://www.facebook.com/"
             icon: "facebook"

package/src/patterns/components/localnav/localnav.twig

@@ -20,6 +20,11 @@
     </nav>
     <div class="{{prefix}}--language-switcher">
       <div class="{{prefix}}--language-switcher--wrap">
+        {% if mainlink is defined %}
+          <span class="{{prefix}}--language-switcher--link--wrap">
+            <a href="{{mainlink.url}}" class="{{prefix}}--language-switcher--link">{{mainlink.label}}</a>
+          </span>
+        {% endif %}
         <button class="{{prefix}}--language-switcher--button" type="button">
           {{languagelabel}}
         </button>

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

@@ -52,6 +52,13 @@ localnav:
             label: Menu Item 4
           - link: "https://www.google.com/search?q=menu5"
             label: Menu Item 5
+    mainlink:
+      type: object
+      label: Main link object
+      description: Link object for back to main site link
+      preview: 
+        url: 'https://www.google.com/'
+        label: 'Go to main ILO website'
     languagelabel:
       type: string
       label: Language Label

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

@@ -112,8 +112,8 @@ export default class Navigation {
     // subnavBack
     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));
+        button.addEventListener(EVENTS.CLICK, (e) => this.subnavBackClick(e));
+        button.addEventListener(EVENTS.TOUCH_START, (e) => this.subnavBackClick(e));
       });
     }
 
@@ -132,8 +132,8 @@ export default class Navigation {
 
     // menuOpen
     if (this.menuOpen) {
-      this.menuOpen.addEventListener(EVENTS.CLICK, () => this.menuOpenClick());
-      this.menuOpen.addEventListener(EVENTS.TOUCH_START, () => this.menuOpenClick());
+      this.menuOpen.addEventListener(EVENTS.CLICK, (e) => this.menuOpenClick(e));
+      this.menuOpen.addEventListener(EVENTS.TOUCH_START, (e) => this.menuOpenClick(e));
     }
 
     // contextButton
@@ -164,7 +164,11 @@ export default class Navigation {
       });
     }
 
-    window.addEventListener(EVENTS.RESIZE, (e) => this.onResize(e));
+    window.addEventListener(EVENTS.RESIZE, (e) => {
+      if (window.innerWidth >= 1024) {
+        this.onResize(e);
+      }
+    });
 
     return this;
   }
@@ -209,9 +213,6 @@ export default class Navigation {
    */
   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);
     }
 
@@ -238,7 +239,6 @@ export default class Navigation {
    */
   handleContextButtonClickOn(e) {
     e.stopImmediatePropagation();
-    // e.stopPropagation();
     this.element.classList.add(`${this.prefix}--context--open`);
     window.addEventListener(
       EVENTS.KEY_DOWN,
@@ -258,7 +258,6 @@ export default class Navigation {
    */
   handleContextButtonClickOff(e) {
     e.stopImmediatePropagation();
-    // e.stopPropagation();
     this.element.classList.remove(`${this.prefix}--context--open`);
     window.removeEventListener(
       EVENTS.KEY_DOWN,
@@ -317,7 +316,6 @@ export default class Navigation {
    */
   handleSearchButtonClickOff(e) {
     e.stopImmediatePropagation();
-    // e.stopPropagation();
     this.element.classList.remove(`${this.prefix}--search--open`);
     window.removeEventListener(
       EVENTS.KEY_DOWN,
@@ -335,7 +333,6 @@ export default class Navigation {
    * @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`)) {
@@ -353,8 +350,10 @@ export default class Navigation {
    * @return {Object} Navigation A reference to the instance of the class
    * @chainable
    */
-  handleMenuOpenClick() {
+  handleMenuOpenClick(e) {
+    e.stopImmediatePropagation();
     this.element.classList.add(`${this.prefix}--mobile--open`);
+    this.body.classList.add(`${this.prefix}--menu--open`);
 
     return this;
   }
@@ -367,10 +366,12 @@ export default class Navigation {
    */
   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);
 
+    if (window.innerWidth >= 1024) {
+      this.body.addEventListener(EVENTS.CLICK, (ev) => this.handleSubnavClickOff(ev), false);
+    }
     return this;
   }
 
@@ -382,7 +383,6 @@ export default class Navigation {
    */
   handleSubnavClickOff(e) {
     e.stopImmediatePropagation();
-    // e.stopPropagation();
     this.element.classList.remove(`${this.prefix}--subnav--open`);
     window.removeEventListener(
       EVENTS.KEY_DOWN,
@@ -390,6 +390,8 @@ export default class Navigation {
       false
     );
 
+    this.body.removeEventListener(EVENTS.CLICK, (ev) => this.handleSubnavClickOff(ev), false);
+
     return this;
   }
 
@@ -417,7 +419,7 @@ export default class Navigation {
    * @return {Object} Navigation A reference to the instance of the class
    * @chainable
    */
-  handleSubnavBackClick() {
+  handleSubnavBackClick(e) {
     // this.element.classList.remove(`${this.prefix}--subnav--open`);
     this.subnavClickOff(e);
     this.element.classList.remove(`${this.prefix}--select--open`);
@@ -435,6 +437,8 @@ export default class Navigation {
     this.element.classList.remove(`${this.prefix}--mobile--open`);
     this.element.classList.remove(`${this.prefix}--subnav--open`);
 
+    this.body.classList.remove(`${this.prefix}--menu--open`);
+
     return this;
   }
 

package/src/patterns/components/tooltip/tooltip.twig

@@ -2,8 +2,11 @@
   TOOLTIP COMPONENT
 #}
   <div
-    class="{{prefix}}--tooltip--wrapper{% if icon %} has-icon{% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="{{prefix}}"
+    class="{{prefix}}--tooltip--wrapper{% if icon and icon != 'false' %} has-icon{% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="{{prefix}}"
   >
+    {% if not icon or icon == 'false' %}
+      {{ children|raw }}
+    {% endif %}
     <span class="{{prefix}}--tooltip {{prefix}}--tooltip--{{theme}}" data-alignment="left">
       <span class="{{prefix}}--tooltip--arrow {{prefix}}--tooltip--arrow--placement-negative" data-placement="negative" role="presentation"></span>
       {{label}}

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

@@ -9,6 +9,12 @@ tooltip:
       description: label shown on the tooltip
       required: true
       preview: 'Tooltip text'
+    children:
+      type: string
+      label: children
+      description: html to pass in to be wrapped by the tooltip
+      required: false
+      preview: "<a href='https://www.google.com/'>This is testing for the tooltip</a>"
   settings:
     icon:
       type: select