@ilo-org/twig 0.14.2 → 0.14.4

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

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

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @ilo-org/twig
 
+## 0.14.4
+
+### Patch Changes
+
+- f557eb372: breadcrumbs: added check for context items
+
+## 0.14.3
+
+### Patch Changes
+
+- ba3fdf8fc: Update how the breakpoints are set on the Hero twig component.
+- fb6b65ec3: Fix alignment value to be used from cardgroup and passed on to the card
+- e077aa740: Add a condition to check the breakpoint value.
+- 67ac66a79: Refactor option label to be a child component instead of an attribute to improve screen reader experience
+- e34e17292: Add optional name paramater that will pass a string to the button element's underlying name attribute
+- d74d0161f: Refactor card heading from h5 to h3 to ensure headings are in sequential order to improve accessibility
+- d0e3e8c87: Add optional string modalLabel parameter to be used as aria-label attribute in modal
+- 261413766: Add block to wrap label, as required in Drupal development.
+- 1ddab579a: Refactor tab role to be in the proper child element in tabs so that they peform their intended accessibility functions
+- Updated dependencies [16dea2974]
+- Updated dependencies [0d0341a3c]
+  - @ilo-org/styles@0.13.2
+
 ## 0.14.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -26,7 +26,7 @@
     "@ilo-org/brand-assets": "0.2.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.13.1",
+    "@ilo-org/styles": "0.13.2",
     "@ilo-org/themes": "0.7.0",
     "@ilo-org/utils": "0.0.11"
   },

package/src/patterns/components/breadcrumb/breadcrumb.js

@@ -76,7 +76,9 @@ export default class Breadcrumb {
    */
   enable() {
     window.addEventListener(EVENTS.RESIZE, (e) => this.onResize(e));
-    this.ContextButton.addEventListener(EVENTS.CLICK, () => this.onClick());
+    if (this.ContextButton) {
+      this.ContextButton.addEventListener(EVENTS.CLICK, () => this.onClick());
+    }
 
     return this;
   }
@@ -88,14 +90,15 @@ export default class Breadcrumb {
    * @chainable
    */
   onResize() {
-    if (this.breadcrumbwidth > this.element.offsetWidth / 2) {
-      this.element.classList.add("contextmenu");
-      this.ContextMenu.classList.remove("open");
-    } else {
-      this.element.classList.remove("contextmenu");
-      this.ContextMenu.classList.remove("open");
+    if (this.ContextMenu) {
+      if (this.breadcrumbwidth > this.element.offsetWidth / 2) {
+        this.element.classList.add("contextmenu");
+        this.ContextMenu.classList.remove("open");
+      } else {
+        this.element.classList.remove("contextmenu");
+        this.ContextMenu.classList.remove("open");
+      }
     }
-
     return this;
   }
 
@@ -106,7 +109,7 @@ export default class Breadcrumb {
    * @chainable
    */
   onClick() {
-    if (this.element.classList.contains("contextmenu")) {
+    if (this.ContextMenu) {
       if (this.ContextMenu.classList.contains("open")) {
         this.ContextMenu.classList.remove("open");
       } else {

package/src/patterns/components/button/button.twig

@@ -10,7 +10,7 @@
 		{% endif %}
 	</a>
 {% else %}
-	<button class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" {% if kind %} type="{{kind}}" {% endif %} {% if opensmodal %} aria-haspopup="dialog" {% endif %} {% if disabled is defined and disabled == 'true' %} disabled {% endif %}>
+	<button class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" {% if kind %} type="{{kind}}" {% endif %} {% if opensmodal %} aria-haspopup="dialog" {% endif %} {% if disabled is defined and disabled == 'true' %} disabled {% endif %} {% if name %} name="{{name}}" {% endif %}>
 
 		<span class="button__label">{{label}}</span>
 		{% if icon %}

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

@@ -10,6 +10,12 @@ button:
       description: The label for the button
       preview: "Button"
       required: true
+    name:
+      type: string
+      label: Name
+      description: The name for the button
+      preview: "button"
+      required: false
     url:
       type: string
       label: url

package/src/patterns/components/card_detail/card_detail.twig

@@ -21,7 +21,7 @@
         <p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
       {% endif %}
       {% if title %}
-        <h5 class="{{prefix}}--card--title">{{title}}</h5>
+        <h3 class="{{prefix}}--card--title">{{title}}</h3>
       {% endif %}
       {% if intro %}
         <p class="{{prefix}}--card--intro">{{intro}}</p>

package/src/patterns/components/card_factlist/card_factlist.twig

@@ -5,7 +5,7 @@
   <div class="{{prefix}}--card--wrap">
     <div class="{{prefix}}--card--content">
       {% if title %}
-        <h5 class="{{prefix}}--card--title">{{title}}</h5>
+        <h3 class="{{prefix}}--card--title">{{title}}</h3>
       {% endif %}
       {% if list %}
         {% include "@components/list/list.twig" with {

package/src/patterns/components/card_feature/card_feature.twig

@@ -21,7 +21,7 @@
         <p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
       {% endif %}
       {% if title %}
-        <h5 class="{{prefix}}--card--title">{{title}}</h5>
+        <h3 class="{{prefix}}--card--title">{{title}}</h3>
       {% endif %}
       {% if date %}
         <time class="{{prefix}}--card--date" datetime="{{date.unix}}">{{date.human}}</time>

package/src/patterns/components/card_multilink/card_multilink.twig

@@ -21,7 +21,7 @@
         <p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
       {% endif %}
       {% if title %}
-        <h5 class="{{prefix}}--card--title">{{title}}</h5>
+        <h3 class="{{prefix}}--card--title">{{title}}</h3>
       {% endif %}
       {% if image %}
         <div class="{{prefix}}--card--image--wrapper">

package/src/patterns/components/card_promo/card_promo.twig

@@ -13,7 +13,7 @@
           <p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
         {% endif %}
         {% if title %}
-          <h5 class="{{prefix}}--card--title">{{title}}</h5>
+          <h3 class="{{prefix}}--card--title">{{title}}</h3>
         {% endif %}
         {% if intro %}
           <p class="{{prefix}}--card--intro">{{intro}}</p>

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

@@ -5,7 +5,7 @@
 	<div class="{{prefix}}--card--wrap">
 		<div class="{{prefix}}--card--content">
 			{% if title %}
-				<h5 class="{{prefix}}--card--title">{{title}}</h5>
+				<h3 class="{{prefix}}--card--title">{{title}}</h3>
 			{% endif %}
 			{% if intro %}
 				<p class="{{prefix}}--card--intro">{{intro}}</p>

package/src/patterns/components/card_text/card_text.twig

@@ -13,7 +13,7 @@
           <p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
         {% endif %}
         {% if title %}
-          <h5 class="{{prefix}}--card--title">{{title}}</h5>
+          <h3 class="{{prefix}}--card--title">{{title}}</h3>
         {% endif %}
         {% if date %}
           <time class="{{prefix}}--card--date" datetime="{{date.unix}}">{{date.human}}</time>

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

@@ -24,7 +24,7 @@
           linklist: card.linklist,
           list: card.list,
           title: card.title,
-          alignment: card.alignment,
+          alignment: alignment,
           color: card.color,
           cornercut: card.cornercut,
           source: card.source,

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

@@ -36,6 +36,14 @@ cardgroup:
         narrow: narrow
         wide: wide
         fluid: fluid
+    alignment:
+      type: select
+      label: Alignment
+      description: Positions the image to the right or to the left of the content when the card is displayed in a `wide` or `fluid` size. Has no effect if the card is displayed in a `standard` or `narrow` size. Only used by `Multilink Card`.
+      preview: "left"
+      options:
+        left: Left
+        right: Right
     theme:
       type: select
       label: Theme

package/src/patterns/components/dropdown/dropdown.twig

@@ -10,11 +10,13 @@
 {% endif %}
 
 {% block formfield %}
-	<div class="{{ baseClass }}--wrapper" {% if style %} style="{{ style }}" {% endif %}>
-		<select id="{{ id|default(name) }}" autocomplete="{{ autocomplete|default('off') }}" name="{{ name }}" {% if required %} required {% endif %} {% if onBlur %} onblur="{{ onBlur }}" {% endif %} {% if disabled %} disabled {% endif %} class="{{ dropdownClasses|join(' ') }}" value="{{ currentvalue|default(value) }}" {% if form %} form="{{ form }}" {% endif %} {% if multiple %} multiple {% endif %} {% if selectSize %} size="{{ selectSize }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}>
-			{% for option in options %}
-				<option {% if option.disabled %} disabled {% endif %} label="{{ option.label }}" value="{{ option.value }}" {% if defaultOption and defaultOption == option.value%}} selected {% endif %}></option>
-			{% endfor %}
-		</select>
-	</div>
+    <div class="{{ baseClass }}--wrapper" {% if style %} style="{{ style }}" {% endif %}>
+        <select id="{{ id|default(name) }}" autocomplete="{{ autocomplete|default('off') }}" name="{{ name }}" {% if required %} required {% endif %} {% if onBlur %} onblur="{{ onBlur }}" {% endif %} {% if disabled %} disabled {% endif %} class="{{ dropdownClasses|join(' ') }}" value="{{ currentvalue|default(value) }}" {% if form %} form="{{ form }}" {% endif %} {% if multiple %} multiple {% endif %} {% if selectSize %} size="{{ selectSize }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}>
+            {% for option in options %}
+                <option {% if option.disabled %} disabled {% endif %} value="{{ option.value }}" {% if defaultOption and defaultOption == option.value %} selected {% endif %}>
+                    {{ option.label }}
+                </option>
+            {% endfor %}
+        </select>
+    </div>
 {% endblock %}

package/src/patterns/components/form/formcontrol.twig

@@ -62,7 +62,9 @@
 <div class="{{ formControlClass|join(' ') }}" {% if style %} style="{{ style }}" {% endif %}>
 	{% if label %}
 		<span class="{{ labelClass|join(' ') }}">
-			<label for="{{ id }}">{{ label }}</label>
+			{% block label %}
+				<label for="{{ id }}">{{ label }}</label>
+			{% endblock %}
 			{% if tooltip %}
 				{% include '@components/tooltip/tooltip.twig' with {
 				"icon": true,

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

@@ -10,7 +10,11 @@
 				<picture class="hero--image">
 					{% for img in image.url|reverse %}
 						{% if loop.last == false  %}
-							<source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+							{% if img.breakpoint matches '/^\\d+$/' %}
+								<source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+							{% else %}
+								<source srcset="{{img.src}}" media="{{img.breakpoint}}">
+							{% endif %}
 						{% endif %}
 					{% endfor %}
 					<img class="{{prefix}}--card--image" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>

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

@@ -7,7 +7,7 @@
 {% 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--wrapper" {% if modalLabel %} aria-label="{{modalLabel}}" {% endif %} aria-modal="true" role="alertdialog">
 			<div class="{{prefix}}--modal--background" role="presentation"></div>
 			<div class="{{prefix}}--modal--contents">
 				{% block modal_content %}

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

@@ -52,4 +52,10 @@ modal:
         className: "modal--open"
         opensmodal: true
       required: true
+    modalLabel:
+      type: string
+      label: Modal Label
+      description: A modal label added to aria-label attribute to improve accessibility 
+      preview: "modal"
+      required: false
   visibility: storybook

package/src/patterns/components/tabs/tabs.twig

@@ -9,8 +9,8 @@
 <div class="{{prefix}}--tabs" data-prefix="{{prefix}}" id="tabs--{{uid}}" data-loadcomponent="Tabs">
     <ul class="{{prefix}}--tabs--selection" aria-controls="tabs--{{uid}}" role="tablist" style="--tabscount: {{items|length}};">
       {% for item in items %}
-        <li class="{{prefix}}--tabs--selection--item">
-          <a href="#tab--{{tabids[loop.index - 1]}}" class="{{prefix}}--tabs--selection--button{% if item.icon is defined %} icon{% endif %}" role="tab" aria-controls="tab--{{tabids[loop.index - 1]}}" tabindex="0" aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}" title="{{item.label}}">
+        <li class="{{prefix}}--tabs--selection--item" role="tab">
+          <a href="#tab--{{tabids[loop.index - 1]}}" class="{{prefix}}--tabs--selection--button{% if item.icon is defined %} icon{% endif %}" aria-controls="tab--{{tabids[loop.index - 1]}}" tabindex="0" aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}" title="{{item.label}}">
             <span class="{{prefix}}--tabs--selection--label">{{item.label}}</span>
             {% if item.icon is defined %}
               {% include '@components/icon/icon.twig' with {icon: item.icon} %}