@ilo-org/twig 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @ilo-org/twig
 
+## 0.2.8
+
+### Patch Changes
+
+- 62c3c624e: Bugfixes in multiple components
+- 1b29018f0: Adds better React Storybook experience
+- 43c2b0026: Cornercut changes to make more consistent across sizes and breakpoints for hero and cards
+- Updated dependencies [62c3c624e]
+- Updated dependencies [1b29018f0]
+- Updated dependencies [43c2b0026]
+  - @ilo-org/fonts@0.0.5
+  - @ilo-org/icons@0.1.13
+  - @ilo-org/styles@0.1.13
+  - @ilo-org/themes@0.1.13
+  - @ilo-org/utils@0.0.9
+
+## 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.8",
   "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.5",
+    "@ilo-org/icons": "0.1.13",
+    "@ilo-org/styles": "0.1.13",
+    "@ilo-org/themes": "0.1.13",
+    "@ilo-org/utils": "0.0.9",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
     "video.js": "^7.19.2"
   },

package/src/patterns/components/breadcrumb/breadcrumb.twig

@@ -2,7 +2,6 @@
   BREADCRUMB COMPONENT
 #}
 {% set lastlink = links|last %}
-
 <nav class="{{prefix}}--breadcrumb{% if className %} {{className}}{% endif %}" data-prefix="{{prefix}}" data-loadcomponent="Breadcrumb">
   <ol class="{{prefix}}--breadcrumb--items">
     <li class="{{prefix}}--breadcrumb--item home">

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 %}
@@ -23,6 +21,7 @@
     alignment: herocard.alignment,
     eyebrow: herocard.eyebrow,
     datecopy: herocard.datecopy,
+    hasbackground: hasbackground,
     intro: herocard.intro,
     prefix: prefix,
     socials: herocard.socials,
@@ -30,4 +29,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"
@@ -70,6 +68,14 @@ hero:
       options:
         dark: Dark
         light: Light
+    hasbackground:
+      type: select
+      label: Has Background
+      description: does the hero card have a background? (Defaults to true, only applied to Home Hero)
+      options:
+        true: true
+        false: 'false'
+      preview: true
     types:
       type: select
       label: Types

package/src/patterns/components/herocard/herocard.twig

@@ -1,7 +1,7 @@
 {#
   HEROCARD COMPONENT
 #}
-<div class="{{prefix}}--hero-card {{prefix}}--hero-card--{{alignment}} {{prefix}}--hero-card--{{theme}} {{prefix}}--hero-card--{{types}}">
+<div class="{{prefix}}--hero-card {{prefix}}--hero-card--{{alignment}} {{prefix}}--hero-card--{{theme}} {{prefix}}--hero-card--{{types}}{% if not hasbackground or hasbackground == 'false' %} {{prefix}}--hero-card--nobackground{% endif %}">
   {% if eyebrow %}
     <p class="{{ prefix }}--hero-card--eyebrow">{{ eyebrow }}</p>
   {% endif %}
@@ -28,4 +28,4 @@
       </li>
     {% endfor %}
   </ul>
-</div>
+</div>

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

@@ -45,4 +45,12 @@ herocard:
         center: 'center'
         right: 'right'
       preview: "center"
+    hasbackground:
+      type: select
+      label: Has Background
+      description: does the hero card have a background? (Defaults to true, only applied to Home Hero)
+      options:
+        true: true
+        false: 'false'
+      preview: true
   visibility: storybook

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

@@ -3,7 +3,7 @@
 #}
 <figure class="{{prefix}}--image" data-prefix="{{prefix}}">
   <div class="image {{prefix}}--image--wrapper">
-    <picture class="{{prefix}}--image--img">
+    <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)">
@@ -11,10 +11,12 @@
       {% endfor %}
       <img src="{{url|reverse|last.src}}" alt="{{alt}}">
     </picture>
-    {% if credit %}
-    <span class="{{prefix}}--credit">
-      <span class="{{prefix}}--credit--label">{{credit}}</span>
-    </span>
+    {% if not ishero or ishero =='false' %}
+      {% if credit %}
+      <span class="{{prefix}}--credit">
+        <span class="{{prefix}}--credit--label">{{credit}}</span>
+      </span>
+      {% endif %}
     {% endif %}
   </div>
   {% if caption %}

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

@@ -34,4 +34,14 @@ image:
           src: 'https://place-hold.it/1200x900?text=LargeBreakpointImage'
         - breakpoint: 1440
           src: 'https://place-hold.it/1600x1200?text=LargestBreakpointImage'
+  settings:
+    ishero:
+      type: select
+      label: Is Hero
+      description: Is this image in a hero? If true, and credit exists, will display credit in a title attribute
+      preview: false
+      required: false
+      options:
+        True: true
+        False: 'false'
   visibility: storybook

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,
@@ -306,6 +305,10 @@ export default class Navigation {
       false
     );
 
+    if (window.innerWidth >= 1024) {
+      this.body.addEventListener(EVENTS.CLICK, (ev) => this.handleSearchButtonClickOff(ev), false);
+    }
+
     return this;
   }
 
@@ -317,7 +320,6 @@ export default class Navigation {
    */
   handleSearchButtonClickOff(e) {
     e.stopImmediatePropagation();
-    // e.stopPropagation();
     this.element.classList.remove(`${this.prefix}--search--open`);
     window.removeEventListener(
       EVENTS.KEY_DOWN,
@@ -325,6 +327,8 @@ export default class Navigation {
       false
     );
 
+    this.body.removeEventListener(EVENTS.CLICK, (ev) => this.handleSearchButtonClickOff(ev), false);
+
     return this;
   }
 
@@ -335,7 +339,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 +356,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 +372,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 +389,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 +396,8 @@ export default class Navigation {
       false
     );
 
+    this.body.removeEventListener(EVENTS.CLICK, (ev) => this.handleSubnavClickOff(ev), false);
+
     return this;
   }
 
@@ -417,7 +425,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 +443,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