@ilo-org/twig 0.14.1 → 0.14.3

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

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.14.1 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.14.3 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.1 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.14.3 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @ilo-org/twig
 
+## 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
+
+- d67dc414b: Don't show language selector in Nav if no links are passed to the Language Context Menu
+- Updated dependencies [08a2141cc]
+- Updated dependencies [dea2d0a07]
+  - @ilo-org/styles@0.13.1
+
 ## 0.14.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -24,9 +24,9 @@
     "@popperjs/core": "^2.11.8",
     "video.js": "^7.21.2",
     "@ilo-org/brand-assets": "0.2.0",
-    "@ilo-org/icons": "0.2.1",
     "@ilo-org/fonts": "0.1.2",
-    "@ilo-org/styles": "0.13.0",
+    "@ilo-org/icons": "0.2.1",
+    "@ilo-org/styles": "0.13.2",
     "@ilo-org/themes": "0.7.0",
     "@ilo-org/utils": "0.0.11"
   },
@@ -77,8 +77,8 @@
     "webpack": "^4.46.0",
     "yaml-loader": "0.6.0",
     "yo": "^3.1.1",
-    "@ilo-org/prettier-config": "0.0.2",
-    "@ilo-org/eslint-config": "0.1.0"
+    "@ilo-org/eslint-config": "0.1.0",
+    "@ilo-org/prettier-config": "0.0.2"
   },
   "scripts": {
     "storybook": "node importprefix.js && node importsvgs.js && start-storybook --config-dir apps/storybook",

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/localnav/localnav.twig

@@ -27,14 +27,16 @@
             <a href="{{mainlink.url}}" class="{{prefix}}--language-switcher--link">{{mainlink.label}}</a>
           </span>
         {% endif %}
-        <button class="{{prefix}}--language-switcher--button" type="button">
+        {% if languagecontextmenu.links is not empty %}
+          <button class="{{prefix}}--language-switcher--button" type="button">
           {{languagelabel}}
-        </button>
-        {% include '@components/contextmenu/contextmenu.twig' with {
+          </button>
+          {% include '@components/contextmenu/contextmenu.twig' with {
             links: languagecontextmenu.links,
             prefix: prefix
           }
         %}
+        {% endif %}
       </div> <!-- /.{{prefix}}--language-switcher--wrap -->
     </div> <!-- /.{{prefix}}--language-switcher -->
     <button class="{{prefix}}--header--menu">Menu</button>
@@ -49,7 +51,7 @@
           </a>
           <button class="{{prefix}}--header--menu--close">{{menucloselabel}}</button>
         </div> <!-- /.{{prefix}}--mobile--logo -->
-
+      {% if languagecontextmenu.links is not empty %}
         <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 -->
@@ -69,6 +71,7 @@
             </ul>
           </div>
         </div>
+      {% endif %}
       </div> <!-- /.{{prefix}}--mobile--nav -->
       <nav class="{{prefix}}--nav" aria-labelledby="primary-navigation">
         <h2 class="{{prefix}}--nav--label" id="primary-navigation">{{primarynav.navlabel}}</h2>

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/navigation/navigation.twig

@@ -5,20 +5,22 @@
 
 <header class="{{prefix}}--header" data-loadcomponent="Navigation" data-prefix="{{prefix}}">
 	<div class="{{prefix}}--header--utility-bar">
-		<div class="{{prefix}}--language-switcher">
-			<div class="{{prefix}}--language-switcher--wrap">
-				<button class="{{prefix}}--language-switcher--button" type="button">
-					{{languagelabel}}
-				</button>
-				{% include '@components/contextmenu/contextmenu.twig' with {
+		{% if languagecontextmenu.links is not empty %}
+			<div class="{{prefix}}--language-switcher">
+				<div class="{{prefix}}--language-switcher--wrap">
+					<button class="{{prefix}}--language-switcher--button" type="button">
+						{{languagelabel}}
+					</button>
+		{% include '@components/contextmenu/contextmenu.twig' with {
             links: languagecontextmenu.links,
             prefix: prefix
           }
         %}
+				</div>
+				<!-- /.{{prefix}}--language-switcher--wrap -->
 			</div>
-			<!-- /.{{prefix}}--language-switcher--wrap -->
-		</div>
-		<!-- /.{{prefix}}--language-switcher -->
+			<!-- /.{{prefix}}--language-switcher -->
+		{% endif %}  
 	</div>
 	<!-- /.{{prefix}}--header--utility-bar -->
 	<div class="{{prefix}}--header--logo-bar">
@@ -67,29 +69,33 @@
 					{% endblock %}
 				</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 {{ prefix }}--container">
-						<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>
+				{% if languagecontextmenu.links is not empty %}
+					<div class="{{prefix}}--mobile--nav--language--switcher">
+						<button class="{{prefix}}--mobile--nav--language--switcher--button" type="button">{{languagelabel}}</button>
+					</div>
+				{% endif %}
+					<!-- /.{{prefix}}--mobile--nav--language--switcher -->
+					<div class="{{prefix}}--mobile--nav--language--select">
+						<div class="{{prefix}}--header--inner {{ prefix }}--container">
+							<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>
-						<!-- /{{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>
+			
 			<!-- /.{{prefix}}--mobile--nav -->
 			<nav class="{{prefix}}--nav" aria-labelledby="primary-navigation">
 				<h2 class="{{prefix}}--nav--label" id="primary-navigation">{{primarynav.navlabel}}</h2>

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} %}