@ilo-org/twig 0.12.0 → 0.12.2

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

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.12.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.12.2 build:lib /home/runner/work/designsystem/designsystem/packages/twig
 > node importprefix.js && node importsvgs.js && pnpm output
 
 theme prefix added
 
-> @ilo-org/twig@0.12.0 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.12.2 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @ilo-org/twig
 
+## 0.12.2
+
+### Patch Changes
+
+- 9b1d93031: Fix various styling issues with the Profile.
+- 7dedac6dd: Fix Callout styles
+- 1c65834a5: Change hero card date position
+- 8d912f712: Make the accordion function properly inside a modal window. This also smoothens animations and simplifies the accordion styles.
+- bd6fcbb9d: In Navigation, fix bug where clicking inside the Search Box would then close it immediately. This also fixes a similar issue in the context menu.
+- 50ed7febf: Align source to the bottom of Stat Cards
+- 44e42762f: fixed input border-radius on iOS Safari
+- Updated dependencies [9b1d93031]
+- Updated dependencies [1f7525b0d]
+- Updated dependencies [632a16fcf]
+- Updated dependencies [b8e8265ce]
+- Updated dependencies [7dedac6dd]
+- Updated dependencies [8d912f712]
+- Updated dependencies [50ed7febf]
+- Updated dependencies [44e42762f]
+  - @ilo-org/styles@0.11.2
+  - @ilo-org/fonts@0.1.2
+
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [78f48eff5]
+- Updated dependencies [03b3c26e4]
+  - @ilo-org/fonts@0.1.1
+  - @ilo-org/styles@0.11.1
+
 ## 0.12.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -23,9 +23,9 @@
   "dependencies": {
     "video.js": "^7.21.2",
     "@ilo-org/brand-assets": "0.2.0",
-    "@ilo-org/fonts": "0.1.0",
+    "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.11.0",
+    "@ilo-org/styles": "0.11.2",
     "@ilo-org/themes": "0.6.1",
     "@ilo-org/utils": "0.0.11"
   },

package/src/patterns/components/accordion/accordion-item.twig

@@ -3,14 +3,14 @@
 #}
 {% set uid = "now"|date('Uv') %}
 <li class="{{prefix}}--accordion--item" id=" {{ id }}{{ uid }}">
-  <div class="ilo--h3">
-    <button class="{{prefix}}--accordion--button {{prefix}}--accordion--button--{{ size|default('small') }}" aria-expanded="{{ defaultExpanded }}" aria-controls="panel-{{ id }}{{ uid }}" id="button-{{ id }}{{ uid }}">
-    {{label}}
-    </button>
-  </div>
-  <div class="{{prefix}}--accordion--panel{% if defaultExpanded == 'true'%} {{prefix}}--accordion--panel--open{% endif %} {% if scroll %} {{prefix}}--accordion--panel__scroll {% endif %}" id="panel-{{ id }}{{ uid }}" aria-labelledby="button-{{ id }}{{ uid }}" role="region">
-    <div class="{{prefix}}--accordion--innerpanel">
-      {{content|raw}}
-    </div>
-  </div>
+	<div class="ilo--h3">
+		<button class="{{prefix}}--accordion--button {{prefix}}--accordion--button--{{ size|default('small') }}" aria-expanded="{{ defaultExpanded }}" aria-controls="panel-{{ id }}{{ uid }}" id="button-{{ id }}{{ uid }}">
+			{{label}}
+		</button>
+	</div>
+	<div class="{{prefix}}--accordion--panel {% if defaultExpanded %} {{prefix}}--accordion--panel--open{% endif %} {% if scroll %} {{prefix}}--accordion--panel__scroll {% endif %}" id="panel-{{ id }}{{ uid }}" aria-labelledby="button-{{ id }}{{ uid }}" role="region">
+		<div class="{{prefix}}--accordion--innerpanel">
+			{{content|raw}}
+		</div>
+	</div>
 </li>

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

@@ -33,10 +33,7 @@ export default class Accordion {
    * @chainable
    */
   init() {
-    this.cacheDomReferences()
-      .setupHandlers()
-      .enable()
-      .evaluateAccordionHeights();
+    this.cacheDomReferences().setupHandlers().enable();
 
     return this;
   }
@@ -55,8 +52,7 @@ export default class Accordion {
     this.accordionItems = this.element.querySelectorAll(
       ".ilo--accordion--item"
     );
-    this.multipleExpanded =
-      this.element.getAttribute("data-multipleexpanded") === "true";
+    this.multipleExpanded = this.element.hasAttribute("data-multipleexpanded");
     this.accordionPanels = this.element.querySelectorAll(
       ".ilo--accordion--panel"
     );
@@ -110,22 +106,6 @@ export default class Accordion {
     return this;
   }
 
-  /**
-   * Evaluate accordion panel heights
-   *
-   * @chainable
-   */
-  evaluateAccordionHeights() {
-    this.accordionPanels.forEach((item) => {
-      item.style.setProperty(
-        "--height",
-        item.querySelector(".ilo--accordion--innerpanel").scrollHeight + "px"
-      );
-    });
-
-    return this;
-  }
-
   /**
    * Update accordion items based off of new statuses
    *
@@ -163,11 +143,11 @@ export default class Accordion {
    * @chainable
    */
   collapseSection(element) {
+    element.classList.remove("ilo--accordion--panel--open");
     element.parentElement
       .querySelector(".ilo--accordion--button")
       .setAttribute(ARIA.EXPANDED, "false");
     element.setAttribute(ARIA.HIDDEN, "false");
-    element.classList.remove("ilo--accordion--panel--open");
   }
 
   /**

package/src/patterns/components/accordion/accordion.twig

@@ -1,9 +1,8 @@
-{#
-  ACCORDION COMPONENT
-#}
-<ul class="{{prefix}}--accordion" data-loadcomponent="Accordion" data-multipleexpanded="{{ allowMultipleExpanded|default(false) }}">
-    {% for item in items %}
-      {% include "@components/accordion/accordion-item.twig" with {
+{# accordion.twig #}
+
+<ul class="{{prefix}}--accordion" data-loadcomponent="Accordion" {% if allowMultipleExpanded %} data-multipleexpanded {% endif %}>
+	{% for item in items %}
+		{% include "@components/accordion/accordion-item.twig" with {
         label: item.label,
         content: item.content,
         defaultExpanded: item.defaultExpanded,
@@ -13,5 +12,5 @@
         prefix: prefix,
         scroll: item.scroll
       } only %}
-    {% endfor %}
+	{% endfor %}
 </ul>

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

@@ -1,24 +1,30 @@
 {#
   CALLOUT COMPONENT
 #}
-<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 == "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>
-      </button>
-      {% endif %}
-    </div>
-    {{ content }}
-    {% if button %}
-      <div class="{{prefix}}--callout--footer">
-        {% include '@components/button/button.twig' with {
+<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 == "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>
+				</button>
+			{% endif %}
+		</div>
+		{{ content }}
+		{% if button %}
+			<div class="{{prefix}}--callout--footer">
+				{% include '@components/button/button.twig' with {
           label: button.label,
           url: button.url,
           target: button.target,
@@ -29,7 +35,7 @@
           size: "small",
           type: "secondary",
         } %}
-      </div>
-    {% endif %}
-  </div>
+			</div>
+		{% endif %}
+	</div>
 </div>

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

@@ -20,7 +20,7 @@ callout:
       label: Content
       description: The callout's content
       preview:
-        faker: lorem.word
+        faker: lorem.paragraph(3)
     title:
       type: string
       label: Notification Title

package/src/patterns/components/card_stat/card_stat.twig

@@ -2,21 +2,23 @@
   STAT CARD COMPONENT
 #}
 <div class="{{prefix}}--card {{prefix}}--card__type__stat {{prefix}}--card__color__{{color}} {{prefix}}--card__size__{{size}}">
-  <div class="{{prefix}}--card--wrap">
-    <div class="{{prefix}}--card--content">
-      {% if title %}
-        <h5 class="{{prefix}}--card--title">{{title}}</h5>
-      {% endif %}
-      {% if intro %}
-        <p class="{{prefix}}--card--intro">{{intro}}</p>
-      {% endif %}
-      {% if source %}
-        {% include "@components/link/link.twig" with {
-          url: source.url,
-          label: source.label,
-          prefix: prefix
-        } only %}
-      {% endif %}
-    </div>
-  </div>
+	<div class="{{prefix}}--card--wrap">
+		<div class="{{prefix}}--card--content">
+			{% if title %}
+				<h5 class="{{prefix}}--card--title">{{title}}</h5>
+			{% endif %}
+			{% if intro %}
+				<p class="{{prefix}}--card--intro">{{intro}}</p>
+			{% endif %}
+			{% if source %}
+				<div class="{{prefix}}--card--source">
+					{% include "@components/link/link.twig" with {
+            url: source.url,
+            label: source.label,
+            prefix: prefix
+          } only %}
+				</div>
+			{% endif %}
+		</div>
+	</div>
 </div>

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

@@ -14,12 +14,12 @@
      <h1 class="{{ prefix }}--hero-card--title">{{ title }}</h2>
     {% endif %}
   {% endif %}
-  {% if datecopy %}
-    <p class="{{ prefix }}--hero-card--datecopy">{{ datecopy }}</p>
-  {% endif %}
   {% if intro %}
     <p class="{{ prefix }}--hero-card--intro">{{ intro }}</p>
   {% endif %}
+  {% if datecopy %}
+    <p class="{{ prefix }}--hero-card--datecopy">{{ datecopy }}</p>
+  {% endif %}
   {% if socialmedia %}
     {% include "@components/socialmedia/socialmedia.twig" with {
       theme: theme,

package/src/patterns/components/modal/modal.twig

@@ -4,17 +4,17 @@
   The modal calls another Twig into it, and therefore passes `modaldata` into it. `modaldata` should contain the fields for the component in question, just as if the component were being used anywhere else.
 #}
 
-  {% if component != 'modal' %}
-  <div class="{{prefix}}--modal" data-loadcomponent="Modal" data-prefix="{{prefix}}">
-    {% include '@components/button/button.twig' with openbutton %}
-    <div class="{{prefix}}--modal--wrapper" aria-modal="true" role="alertdialog">
-      <div class="{{prefix}}--modal--background" role="presentation"></div>
-      <div class="{{prefix}}--modal--contents">
-        {% block modal_content %}
-          {% include '@components/' ~ component ~ '/' ~ component ~ '.twig' with modaldata %}
-        {% endblock %}
-        {% include '@components/button/button.twig' with closebutton %}
-      </div>
-    </div>
-  </div>
-  {% endif %}
+{% if component != 'modal' %}
+	<div class="{{prefix}}--modal" data-loadcomponent="Modal" data-prefix="{{prefix}}">
+		{% include '@components/button/button.twig' with openbutton %}
+		<div class="{{prefix}}--modal--wrapper" aria-modal="true" role="alertdialog">
+			<div class="{{prefix}}--modal--background" role="presentation"></div>
+			<div class="{{prefix}}--modal--contents">
+				{% block modal_content %}
+					{% include '@components/' ~ component ~ '/' ~ component ~ '.twig' with modaldata %}
+				{% endblock %}
+				{% include '@components/button/button.twig' with closebutton %}
+			</div>
+		</div>
+	</div>
+{% endif %}

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

@@ -52,6 +52,7 @@ export default class Navigation {
      * The button for toggling Subnav state
      * @type {Object}
      */
+    this.subNav = this.element.querySelector(`.${this.prefix}--subnav`);
     this.subnavButton = this.element.querySelector(
       `.${this.prefix}--nav--trigger`
     );
@@ -65,6 +66,7 @@ export default class Navigation {
     this.searchButton = this.element.querySelector(
       `.${this.prefix}--search--button`
     );
+    this.searchBox = this.element.querySelector(`.${this.prefix}--search-box`);
     this.contextButton = this.element.querySelector(
       `.${this.prefix}--language-switcher--button`
     );
@@ -99,7 +101,6 @@ export default class Navigation {
     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);
@@ -212,6 +213,24 @@ export default class Navigation {
       });
     }
 
+    // Click events in the searchBox should not bubble up to the body
+    this.searchBox.addEventListener(
+      EVENTS.CLICK,
+      (ev) => {
+        ev.stopPropagation();
+      },
+      false
+    );
+
+    // Click events in the subNav should not bubble up to the body
+    this.subNav.addEventListener(
+      EVENTS.CLICK,
+      (ev) => {
+        ev.stopPropagation();
+      },
+      false
+    );
+
     window.addEventListener(EVENTS.RESIZE, (e) => {
       if (window.innerWidth >= 1024) {
         this.onResize(e);
@@ -221,22 +240,6 @@ 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
    *
@@ -295,11 +298,7 @@ export default class Navigation {
       (ev) => this.keyPress(ev, this.contextButtonClickOff),
       false
     );
-    this.body.addEventListener(
-      EVENTS.CLICK,
-      (ev) => this.handleContextButtonClickOff(ev),
-      false
-    );
+    window.addEventListener(EVENTS.CLICK, this.contextButtonClickOff);
 
     return this;
   }
@@ -318,12 +317,7 @@ export default class Navigation {
       (ev) => this.keyPress(ev, this.contextButtonClickOff),
       false
     );
-    this.body.removeEventListener(
-      EVENTS.CLICK,
-      (ev) =>
-        this.handleContextButtonClickoff(ev, `${this.prefix}--context--open`),
-      false
-    );
+    window.removeEventListener(EVENTS.CLICK, this.contextButtonClickOff);
 
     return this;
   }
@@ -361,11 +355,7 @@ export default class Navigation {
     );
 
     if (window.innerWidth >= 1024) {
-      this.body.addEventListener(
-        EVENTS.CLICK,
-        (ev) => this.handleSearchButtonClickOff(ev),
-        false
-      );
+      window.addEventListener(EVENTS.CLICK, this.searchButtonClickOff, false);
     }
 
     return this;
@@ -386,11 +376,7 @@ export default class Navigation {
       false
     );
 
-    this.body.removeEventListener(
-      EVENTS.CLICK,
-      (ev) => this.handleSearchButtonClickOff(ev),
-      false
-    );
+    window.removeEventListener(EVENTS.CLICK, this.searchButtonClickOff, false);
 
     return this;
   }
@@ -444,11 +430,7 @@ export default class Navigation {
     );
 
     if (window.innerWidth >= 1024) {
-      this.body.addEventListener(
-        EVENTS.CLICK,
-        (ev) => this.handleSubnavClickOff(ev),
-        false
-      );
+      window.addEventListener(EVENTS.CLICK, this.subnavClickOff);
     }
     return this;
   }
@@ -468,11 +450,7 @@ export default class Navigation {
       false
     );
 
-    this.body.removeEventListener(
-      EVENTS.CLICK,
-      (ev) => this.handleSubnavClickOff(ev),
-      false
-    );
+    window.removeEventListener(EVENTS.CLICK, this.subnavClickOff);
 
     return this;
   }

package/src/patterns/components/profile/profile.twig

@@ -1,18 +1,26 @@
-{#
-  PROFILE COMPONENT
-#}
-<figure class="storybook {{prefix}}--profile">
-  <img class="{{prefix}}--profile--avatar" src="{{avatar}}" alt="Avatar for {{name}}">
-  <figcaption class="{{prefix}}--profile--contents--{{theme}}">
-    <span class="{{prefix}}--profile--name id">{{name}}</span>
-    {% if role %}
-    <span class="{{prefix}}--profile--role id">{{role}}</span>
-    {% endif %}
-    {% if description %}
-    <p class="{{prefix}}--profile--description info">{{description}}</p>
-    {% endif %}
-    {% if link and link.url and link.label %}
-    <a class="{{prefix}}--profile--link info" href="{{link.url}}"><span>{{link.label}}</span></a>
-    {% endif %}
-  </figcaption>
+{# profile.twig #}
+
+{% set defaultAlt = "Photo of " ~ name %}
+<figure class="{{prefix}}--profile {{prefix}}--profile__theme__{{theme|default("light")}} {{prefix}}--profile__size__{{size|default("large")}}">
+	{% if avatar %}
+		<img class="{{prefix}}--profile--avatar" src="{{avatar}}" alt="{{alt|default(defaultAlt)}}">
+	{% endif %}
+	<figcaption>
+		<div class="{{prefix}}--profile--figcaption--content">
+			<div class="{{prefix}}--profile--name">{{name}}</div>
+			{% if role %}
+				<div class="{{prefix}}--profile--role">{{role}}</div>
+			{% endif %}
+		</div>
+	</figcaption>
+	{% if description %}
+		<p class="{{prefix}}--profile--description">{{description}}</p>
+	{% endif %}
+	{% if link and link.url and link.label %}
+		<div class="{{prefix}}--profile--link">
+			<a href={{link.url}} target="__blank" rel="noopener noreferrer">
+				<span class="{{prefix}}--profile--link--label">{{link.label}}</span>
+			</a>
+		</div>
+	{% endif %}
 </figure>

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

@@ -14,7 +14,7 @@ profile:
       type: string
       label: Description
       description: An optional plain-text description (e.g. a short bio)
-      preview: "Gilbert F. Houngbo was elected as the ILO’s 11th Director-General by the organization’s Governing Body in March 2022."
+      preview: "Gilbert F. Houngbo was elected as the ILO’s 11th Director-General by the organization’s Governing Body in March 2022. "
     link:
       type: object
       label: Link