@ilo-org/twig 1.9.0 → 1.10.0

package/dist/components/linklist/linklist.component.yml

@@ -52,4 +52,15 @@ linklist:
         light: Light
         dark: Dark
       preview: "light"
+    titleLevel:
+      type: select
+      label: Headline Title Level
+      description: Select the title level for the headline.
+      required: false
+      options:
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5
+      preview: "h3"
   visibility: storybook

package/dist/components/linklist/linklist.twig

@@ -1,9 +1,11 @@
 {#
   LINK LIST COMPONENT
 #}
+{% set titleLevel = titleLevel|default('h3') %}
+
 <div class="ilo--link-list ilo--link-list--{{theme}}" data-loadcomponent="LinkList" data-prefix="ilo">
   {% if headline %}
-    <h3 class="ilo--link-list--headline">{{headline}}</h3>
+    <{{titleLevel}} class="ilo--link-list--headline">{{headline}}</{{titleLevel}}>
   {% endif %}
   <ul class="ilo--link-list--linkgroups">
     {% for group in linkgroup %}

package/dist/components/linklist/linklist.wingsuit.yml

@@ -52,4 +52,15 @@ linklist:
         light: Light
         dark: Dark
       preview: "light"
+    titleLevel:
+      type: select
+      label: Headline Title Level
+      description: Select the title level for the headline.
+      required: false
+      options:
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5
+      preview: "h3"
   visibility: storybook

package/dist/components/list/list.component.yml

@@ -64,4 +64,15 @@ list:
       options:
         light: light
         dark: dark
+    titleLevel:
+      type: select
+      label: Headline Title Level
+      description: Select the title level for the headline.
+      required: false
+      options:
+          h2: h2
+          h3: h3
+          h4: h4
+          h5: h5
+      preview: "h2"
   visibility: storybook

package/dist/components/list/list.twig

@@ -8,10 +8,11 @@
 	{% set theme = "light" %}
 {% endif %}
 
+{% set titleLevel = titleLevel|default('h2') %}
 
 <div class="ilo--list {% if ordered == 'unstyled' %} ilo--list__unstyled {% endif %} {% if alignment == 'horizontal' %} ilo--list__horizontal {% endif %} ilo--list__theme__{{theme}}">
 	{% if title %}
-		<h2 class="ilo--list--title">{{ title }}</h2>
+		<{{ titleLevel }} class="ilo--list--title">{{ title }}</{{ titleLevel }}>
 	{% endif %}
 	{% if ordered == "ordered" %}
 		<ol>

package/dist/components/list/list.wingsuit.yml

@@ -64,4 +64,15 @@ list:
       options:
         light: light
         dark: dark
+    titleLevel:
+      type: select
+      label: Headline Title Level
+      description: Select the title level for the headline.
+      required: false
+      options:
+          h2: h2
+          h3: h3
+          h4: h4
+          h5: h5
+      preview: "h2"
   visibility: storybook

package/dist/components/nav/desktop/navmenu.twig

@@ -2,8 +2,7 @@
 
 {% set prefix = prefix|default('ilo') %}
 {% set base_class = 'ilo' ~ '--nav-menu' %}
-
-<div class="{{ base_class }} {{ className }}">
+<div class="{{ base_class }} {{ className }} {% if light|boolval %}{{ base_class }}--light{% endif %}">
   <ul class="{{ base_class }}__list">
     {% for item in menu %}
       <li class="{{ base_class }}__item {{ item.className }}">
@@ -18,7 +17,7 @@
       class="{{ base_class }}__more"
       aria-expanded="false"
       aria-haspopup="menu"
-      aria-controls="{{ prefix }}--nav-dropdown"
+      aria-controls="{{ prefix }}__nav-extra-menu"
       id="{{ prefix }}--nav-dropdown__button">
       {{ more.label }}
       <span class="{{ base_class }}__more-icon"></span>

package/dist/components/nav/desktop/navsearch.twig

@@ -0,0 +1,24 @@
+{# navsearch.twig #}
+{% set prefix = prefix|default("ilo") %}
+{% set base_class = 'ilo' ~ "--nav-dropdown" %}
+
+<template id="{{ prefix }}--nav-search__template">
+	<div class="{{ base_class }} {{ className|default("") }}" id="{{ base_class }}" tabindex="0">
+		<div class="{{ base_class }}__container">
+			{% include '@components/form/form.twig' with {
+        attributes: {
+          action: search.url,
+          "aria-label": search.label,
+          "data-search": "true",
+        },
+        fieldsets: [{
+          fields: [{
+            type: "search",
+            placeholder: search.label,
+            id: 'ilo' ~ '__widgets-search-input-field',
+          }]
+        }]
+      } %}
+		</div>
+	</div>
+</template>

package/dist/components/nav/mobile/mobiledrawer_main.twig

@@ -9,14 +9,33 @@
 {% endblock %}
 
 {% block mobile_drawer_widgets %}
-  {% if widgets.search %}
-    <a class="{{ mobile_class }}__widgets-search" href="{{ widgets.search.url }}" aria-label="{{ widgets.search.label }}">
-      <span class="{{ mobile_class }}__widgets-search__label">
-        {{ widgets.search.label }}
-      </span>
-      <span class="{{ mobile_class }}__widgets-search__icon" />
-    </a>
-  {% endif %}
+	{# Search Widget #}
+	{% if inputSearch|boolval %}
+		<div class="{{ mobile_class }}__widgets-search-input">
+			{% include '@components/form/form.twig' with {
+      attributes: {
+        action: widgets.search.url,
+        "aria-label": widgets.search.label,
+        "data-search": "true",
+      },
+      fieldsets: [{
+        fields: [{
+          type: "search",
+          placeholder: widgets.search.label,
+          id: prefix|default("ilo") ~ '__widgets-search-input-field',
+        }]
+      }]
+    }
+    %}
+		</div>
+	{% elseif widgets.search %}
+		<a class="{{ mobile_class }}__widgets-search" href="{{ widgets.search.url }}" aria-label="{{ widgets.search.label }}">
+			<span class="{{ mobile_class }}__widgets-search__label">
+				{{ widgets.search.label }}
+			</span>
+			<span class="{{ mobile_class }}__widgets-search__icon"/>
+		</a>
+	{% endif %}
 
   {% if widgets.link %}
     <a class="{{ mobile_class }}__widgets-link" href="{{ widgets.link.href }}">{{ widgets.link.label }}</a>

package/dist/components/nav/nav.behavior.js

@@ -7,7 +7,7 @@
 
   class StatefulComponent{constructor(element,initialState={}){this.element=element;this.initialState=initialState;this.state=this.#setupState(this.initialState);this.stateHandlers=new Map;this.#init();}#init(){this.setupState=this.#setupState.bind(this);this.registerStateHandler=this.registerStateHandler.bind(this);}registerStateHandler(prop,handler){if(!this.stateHandlers.has(prop)){this.stateHandlers.set(prop,[]);}this.stateHandlers.get(prop).push(handler);}#setupState(initialState){if(initialState===void 0)initialState={};return new Proxy(initialState,{set:(target,prop,value)=>{if(value!==target[prop]){target[prop]=value;const handlers=this.stateHandlers.get(prop);if(handlers){handlers.forEach(handler=>handler(value,prop));}}return true}})}}
 
-  class Nav extends StatefulComponent{constructor(element){const initialState={dropDownIsOpen:false,isDesktop:true};super(element,initialState);this.startBreakpointObserver=()=>{this.breakpointObserver.start();return this};this.renderClientContent=()=>{const dropdownTemplate=this.element.querySelector(`#${this.prefix}--nav-dropdown__template`);if(dropdownTemplate){const dropdownContent=dropdownTemplate.content.cloneNode(true);document.body.appendChild(dropdownContent);}return this};this.cacheDomReferences=()=>{this.dropdownButton=this.element.querySelector(`.${this.prefix}--nav-menu__more`);this.dropdown=document.body.querySelector(`.${this.prefix}--nav-dropdown`);return this};this.enableHandlers=()=>{if(this.dropdownButton){this.dropdownButton.addEventListener("click",this.handleDropdownClick);}return this};this.registerStateHandlers=()=>{this.registerStateHandler("dropDownIsOpen",value=>{if(value){this.handleOpenDropdown();}else {this.handleCloseDropdown();}});this.registerStateHandler("isDesktop",this.handleBreakpointChange);return this};this.handleBreakpointChange=isDesktop=>{if(!isDesktop){this.state.dropDownIsOpen=false;}};this.handleOpenDropdown=()=>{this.handleResizeDropdown();this.resizeObserver.observe(this.element);window.addEventListener("click",this.handleOutsideClick);this.dropdown?.classList.add(`${this.prefix}--nav-dropdown--open`);this.dropdownButton.setAttribute("aria-expanded","true");this.dropdownButton?.classList.add(`${this.prefix}--nav-menu__more--open`);this.handleTabNavigation();};this.handleCloseDropdown=()=>{this.dropdown?.classList.remove(`${this.prefix}--nav-dropdown--open`);this.dropdownButton?.classList.remove(`${this.prefix}--nav-menu__more--open`);this.dropdownButton.setAttribute("aria-expanded","false");this.resizeObserver.disconnect();window.removeEventListener("click",this.handleOutsideClick);};this.handleResizeDropdown=()=>{this.dropdown.style.width=`${this.element.offsetWidth}px`;this.dropdown.style.left=`${this.element.getBoundingClientRect().left}px`;this.dropdown.style.top=`${this.element.getBoundingClientRect().bottom}px`;};this.handleDropdownClick=()=>{this.state.dropDownIsOpen=!this.state.dropDownIsOpen;};this.handleOutsideClick=event=>{if(this.state.dropDownIsOpen&&!this.element?.contains(event.target)&&!this.dropdown?.contains(event.target)){this.state.dropDownIsOpen=false;}};this.handleFocusTrap=event=>{createFocusTrap(event,this.dropdown.querySelectorAll("a"),()=>{this.state.dropDownIsOpen=false;this.dropdownButton.focus();});};this.handleTabNavigation=()=>{setTimeout(()=>{this.dropdown.focus();this.dropdown.addEventListener("keydown",this.handleFocusTrap);},100);};this.prefix=this.element.dataset.prefix;this.dropdown=null;this.breakpointObserver=createBreakpointObserver(breakpoint=>{this.state.isDesktop=["xl","xxl"].includes(breakpoint);});this.resizeObserver=new ResizeObserver(()=>{if(this.state.dropDownIsOpen){this.handleResizeDropdown();}});this.init();}init(){this.renderClientContent().cacheDomReferences().enableHandlers().registerStateHandlers().startBreakpointObserver();return this}}
+  class Nav extends StatefulComponent{constructor(element){const initialState={dropDownIsOpen:false,searchIsOpen:false,isDesktop:true};super(element,initialState);this.startBreakpointObserver=()=>{this.breakpointObserver.start();return this};this.renderClientContent=()=>{const items=[`#${this.prefix}--nav-dropdown__template`,`#${this.prefix}--nav-search__template`];for(const templateSelector of items){const template=document.querySelector(templateSelector);if(template){const content=template.content.cloneNode(true);document.body.appendChild(content);}}return this};this.cacheDomReferences=()=>{this.dropdownButton=this.element.querySelector(`.${this.prefix}--nav-menu__more`);this.inputSearchButton=this.element.querySelector(`.${this.prefix}--main-nav__nav-search`);this.dropdown=document.body.querySelector(`.${this.prefix}__nav-extra-menu.${this.prefix}--nav-dropdown`);this.inputSearch=document.body.querySelector(`.${this.prefix}--main-nav__nav-extra-search.${this.prefix}--nav-dropdown`);return this};this.enableHandlers=()=>{if(this.dropdownButton){this.dropdownButton.addEventListener("click",()=>{this.state.dropDownIsOpen=!this.state.dropDownIsOpen;});}if(this.inputSearchButton){this.inputSearchButton.addEventListener("click",()=>{this.state.searchIsOpen=!this.state.searchIsOpen;});}return this};this.registerStateHandlers=()=>{this.registerStateHandler("dropDownIsOpen",value=>{if(value){this.handleOpen("dropdown");}else {this.handleClose("dropdown");}});this.registerStateHandler("searchIsOpen",value=>{if(value){this.handleOpen("search");}else {this.handleClose("search");}});this.registerStateHandler("isDesktop",this.handleBreakpointChange);return this};this.handleBreakpointChange=isDesktop=>{if(!isDesktop){this.state.dropDownIsOpen=false;this.state.searchIsOpen=false;}};this.getDropdownConfig=type=>{const configs={dropdown:{element:this.dropdown,button:this.dropdownButton,stateKey:"dropDownIsOpen",otherStateKey:"searchIsOpen",resizeObserver:this.menuResizeObserver,focusTrapHandler:this.handleMenuFocusTrap},search:{element:this.inputSearch,button:this.inputSearchButton,stateKey:"searchIsOpen",otherStateKey:"dropDownIsOpen",resizeObserver:this.searchResizeObserver,focusTrapHandler:this.handleSearchFocusTrap}};return configs[type]};this.handleOpen=type=>{const config=this.getDropdownConfig(type);if(!config.element||!config.button)return;this.state[config.otherStateKey]=false;this.handleResize(config.element);config.resizeObserver.observe(this.element);window.addEventListener("click",this.handleOutsideClick);config.element.classList.add(`${this.prefix}--nav-dropdown--open`);config.button.setAttribute("aria-expanded","true");this.handleTabNavigation(config);};this.handleClose=type=>{const config=this.getDropdownConfig(type);if(!config.element||!config.button)return;config.element.classList.remove(`${this.prefix}--nav-dropdown--open`);config.button.setAttribute("aria-expanded","false");if(!this.state.dropDownIsOpen&&!this.state.searchIsOpen){config.resizeObserver.disconnect();window.removeEventListener("click",this.handleOutsideClick);}};this.handleResize=element=>{element.style.width=`${this.element.offsetWidth}px`;element.style.left=`${this.element.getBoundingClientRect().left}px`;element.style.top=`${this.element.getBoundingClientRect().bottom}px`;};this.handleOutsideClick=event=>{if(this.state.dropDownIsOpen&&!this.element?.contains(event.target)&&!this.dropdown?.contains(event.target)){this.state.dropDownIsOpen=false;}if(this.state.searchIsOpen&&!this.element?.contains(event.target)&&!this.inputSearch?.contains(event.target)){this.state.searchIsOpen=false;}};this.handleMenuFocusTrap=event=>{createFocusTrap(event,this.dropdown.querySelectorAll("a"),()=>{this.state.dropDownIsOpen=false;this.dropdownButton.focus();});};this.handleSearchFocusTrap=event=>{createFocusTrap(event,this.inputSearch.querySelectorAll("input"),()=>{this.state.searchIsOpen=false;this.inputSearchButton.focus();});};this.handleTabNavigation=config=>{setTimeout(()=>{config.element.focus();config.element.addEventListener("keydown",config.focusTrapHandler);},100);};this.prefix=this.element.dataset.prefix;this.dropdown=null;this.inputSearch=null;this.breakpointObserver=createBreakpointObserver(breakpoint=>{this.state.isDesktop=["xl","xxl"].includes(breakpoint);});this.menuResizeObserver=new ResizeObserver(()=>{if(this.state.dropDownIsOpen){this.handleResize(this.dropdown);}});this.searchResizeObserver=new ResizeObserver(()=>{if(this.state.searchIsOpen){this.handleResize(this.inputSearch);}});this.init();}init(){this.renderClientContent().cacheDomReferences().enableHandlers().registerStateHandlers().startBreakpointObserver();return this}}
 
   class MobileNav extends StatefulComponent{constructor(element){const initialState={isMobile:false,mobDrawerIsOpen:false,languagesMobDrawerIsOpen:false,moreMobDrawerIsOpen:false};super(element,initialState);this.init=()=>{this.renderClientContent().cacheDomReferences().enableHandlers().registerStateHandlers().startBreakpointObserver();return this};this.startBreakpointObserver=()=>{this.breakpointObserver.start();return this};this.renderClientContent=()=>{const mobileDrawerTemplates=[`${this.prefix}--nav-mobile-drawer__template__main`,`${this.prefix}--nav-mobile-drawer__template__languages`,`${this.prefix}--nav-mobile-drawer__template__more`];mobileDrawerTemplates.forEach(templateId=>{const template=this.element.querySelector(`#${templateId}`);if(template){const content=template.content.cloneNode(true);document.body.appendChild(content);}});return this};this.cacheDomReferences=()=>{this.burger=this.element.querySelector(`[class$="burger"]`);this.mobileDrawer=document.body.querySelector(`#${this.prefix}--nav-mobile-drawer__main`);this.menuHomeButtons=document.body.querySelectorAll(`.${this.prefix}--nav-mobile__nested__header`);this.mobileDrawerCloseButtons=document.body.querySelectorAll(`.${this.prefix}--nav-mobile-drawer__header-close`);this.mobileLanguageButton=this.mobileDrawer.querySelector(`.${this.prefix}--nav-mobile__widgets-language`);this.languagesMobileDrawer=document.body.querySelector(`#${this.prefix}--nav-mobile-drawer__languages`);this.moreMobileDrawer=document.body.querySelector(`#${this.prefix}--nav-mobile-drawer__more`);this.mobileMoreButton=this.mobileDrawer.querySelector(`.${this.prefix}--nav-mobile__more`);return this};this.enableHandlers=()=>{this.burger.addEventListener("click",this.handleBurgerClick);if(this.mobileLanguageButton){this.mobileLanguageButton.addEventListener("click",this.handleLanguageButtonClick);}if(this.mobileMoreButton){this.mobileMoreButton.addEventListener("click",this.handleMoreButtonClick);}this.mobileDrawerCloseButtons.forEach(button=>{button.addEventListener("click",this.handleMobileDrawerClose);});this.menuHomeButtons.forEach(button=>{button.addEventListener("click",this.handleMenuHomeButtonClick);});return this};this.registerStateHandlers=()=>{this.registerStateHandler("mobDrawerIsOpen",value=>{if(value){this.handleOpenMobileDrawer();}else {this.handleCloseMobileDrawer();}});this.registerStateHandler("languagesMobDrawerIsOpen",value=>{if(value){this.handleOpenLanguagesMobileDrawer();}else {this.handleCloseLanguagesMobileDrawer();}});this.registerStateHandler("moreMobDrawerIsOpen",value=>{if(value){this.handleOpenMoreMobileDrawer();}else {this.handleCloseMoreMobileDrawer();}});this.registerStateHandler("isMobile",this.handleBreakpointChange);return this};this.handleBurgerClick=()=>{this.burger.setAttribute("aria-expanded","true");this.state.mobDrawerIsOpen=true;};this.handleLanguageButtonClick=()=>{this.state.languagesMobDrawerIsOpen=true;};this.handleMoreButtonClick=()=>{this.state.moreMobDrawerIsOpen=true;};this.handleMenuHomeButtonClick=()=>{this.state.languagesMobDrawerIsOpen=false;this.state.moreMobDrawerIsOpen=false;};this.handleMobileDrawerClose=()=>{this.state.mobDrawerIsOpen=false;this.state.languagesMobDrawerIsOpen=false;this.state.moreMobDrawerIsOpen=false;};this.handleOpenMobileDrawer=()=>{this.mobileDrawer.inert=false;this.mobileDrawer?.classList.add(`${this.prefix}--nav-mobile-drawer--open`);};this.handleCloseMobileDrawer=()=>{this.mobileDrawer.inert=true;this.mobileDrawer?.classList.remove(`${this.prefix}--nav-mobile-drawer--open`);this.burger.setAttribute("aria-expanded","false");};this.handleOpenLanguagesMobileDrawer=()=>{this.languagesMobileDrawer.inert=false;this.mobileDrawer.inert=true;this.mobileLanguageButton.setAttribute("aria-expanded","true");this.languagesMobileDrawer.classList.add(`${this.prefix}--nav-mobile-drawer--open`);};this.handleCloseLanguagesMobileDrawer=()=>{this.languagesMobileDrawer.inert=true;this.mobileDrawer.inert=false;this.mobileLanguageButton.setAttribute("aria-expanded","false");this.languagesMobileDrawer?.classList.remove(`${this.prefix}--nav-mobile-drawer--open`);};this.handleOpenMoreMobileDrawer=()=>{this.moreMobileDrawer.inert=false;this.mobileDrawer.inert=true;this.mobileMoreButton.setAttribute("aria-expanded","true");this.moreMobileDrawer.classList.add(`${this.prefix}--nav-mobile-drawer--open`);};this.handleCloseMoreMobileDrawer=()=>{this.moreMobileDrawer.inert=true;this.mobileDrawer.inert=false;this.mobileMoreButton.setAttribute("aria-expanded","false");this.moreMobileDrawer?.classList.remove(`${this.prefix}--nav-mobile-drawer--open`);};this.handleBreakpointChange=isMobile=>{if(!isMobile){this.state.mobDrawerIsOpen=false;this.state.languagesMobDrawerIsOpen=false;this.state.moreMobDrawerIsOpen=false;}};this.prefix=this.element.dataset.prefix;this.mobileDrawer=null;this.mobileDrawerClose=null;this.languagesMobileDrawer=null;this.languagesMobileDrawerClose=null;this.mobileLanguageButton=null;this.burger=null;this.breakpointObserver=createBreakpointObserver(breakpoint=>{this.state.isMobile=!["xl","xxl"].includes(breakpoint);});this.init();}}
 

package/dist/components/nav/nav.component.yml

@@ -18,9 +18,6 @@ nav:
           link:
             href: "https://live.ilo.org"
             label: "ILO Live Homepage"
-        tag:
-          main: "Advancing social justice, promoting decent work"
-          sub: "ILO is a specialized agency of the United Nations"
     widgets:
       type: object
       label: Widgets
@@ -104,5 +101,67 @@ nav:
       options:
         compact: compact
         complex: complex
-      preview: "complex"
+        main: main
+      preview: "compact"
+
+  variants:
+    default:
+      label: Default
+    compact:
+      label: Compact
+    complex:
+      label: Complex
+      fields:
+        navtype: complex
+        branding:
+          tag:
+            main: "Advancing social justice, promoting decent work"
+            sub: "ILO is a specialized agency of the United Nations"
+          logo:
+            main: "images/ilo-live-logo-en-dark.png"
+            mobile: "images/ilo-live-logo-en-light.png"
+            drawer: "images/ilo-live-logo-en-dark.png"
+            alt: "ILO Logo"
+            link:
+              href: "https://live.ilo.org"
+              label: "ILO Live Homepage"
+    main:
+      label: Main
+      fields:
+        navtype: main
+        branding:
+          tag:
+            main: "Advancing social justice, promoting decent work"
+            sub: "ILO is a specialized agency of the United Nations"
+          logo:
+            main: "images/logo_en_horizontal_white.svg"
+            mobile: "images/logo_en_horizontal_white.svg"
+            drawer: "images/logo_en_horizontal_blue.svg"
+            alt: "ILO Logo"
+            link:
+              href: "https://live.ilo.org"
+              label: "ILO Live Homepage"
+        widgets:
+          language:
+            label: "Language"
+            language: "English"
+            links:
+              - label: "English"
+                url: "https://www.ilo.org/en"
+              - label: "Français"
+                url: "https://www.ilo.org/fr"
+              - label: "Español"
+                url: "https://www.ilo.org/es"
+              - label: "العربية"
+                url: "https://www.ilo.org/ar"
+              - label: "中文"
+                url: "https://www.ilo.org/ru"
+              - label: "Português"
+                url: "https://www.ilo.org/pt"
+              - label: "Italiano"
+                url: "https://www.ilo.org/it"
+          search:
+            label: "Search"
+            url: "https://www.ilo.org/search"
+
   visibility: storybook

package/dist/components/nav/nav.twig

@@ -1,5 +1,7 @@
 {% if navtype == 'compact' %}
   {% include '@components/nav/nav_compact.twig' %}
-{% else %}
+{% elseif navtype == 'complex' %}
   {% include '@components/nav/nav_complex.twig' %}
+{% else %}
+  {% include '@components/nav/nav_main.twig' %}
 {% endif %}

package/dist/components/nav/nav.wingsuit.yml

@@ -18,9 +18,6 @@ nav:
           link:
             href: "https://live.ilo.org"
             label: "ILO Live Homepage"
-        tag:
-          main: "Advancing social justice, promoting decent work"
-          sub: "ILO is a specialized agency of the United Nations"
     widgets:
       type: object
       label: Widgets
@@ -104,5 +101,67 @@ nav:
       options:
         compact: compact
         complex: complex
-      preview: "complex"
+        main: main
+      preview: "compact"
+
+  variants:
+    default:
+      label: Default
+    compact:
+      label: Compact
+    complex:
+      label: Complex
+      fields:
+        navtype: complex
+        branding:
+          tag:
+            main: "Advancing social justice, promoting decent work"
+            sub: "ILO is a specialized agency of the United Nations"
+          logo:
+            main: "images/ilo-live-logo-en-dark.png"
+            mobile: "images/ilo-live-logo-en-light.png"
+            drawer: "images/ilo-live-logo-en-dark.png"
+            alt: "ILO Logo"
+            link:
+              href: "https://live.ilo.org"
+              label: "ILO Live Homepage"
+    main:
+      label: Main
+      fields:
+        navtype: main
+        branding:
+          tag:
+            main: "Advancing social justice, promoting decent work"
+            sub: "ILO is a specialized agency of the United Nations"
+          logo:
+            main: "images/logo_en_horizontal_white.svg"
+            mobile: "images/logo_en_horizontal_white.svg"
+            drawer: "images/logo_en_horizontal_blue.svg"
+            alt: "ILO Logo"
+            link:
+              href: "https://live.ilo.org"
+              label: "ILO Live Homepage"
+        widgets:
+          language:
+            label: "Language"
+            language: "English"
+            links:
+              - label: "English"
+                url: "https://www.ilo.org/en"
+              - label: "Français"
+                url: "https://www.ilo.org/fr"
+              - label: "Español"
+                url: "https://www.ilo.org/es"
+              - label: "العربية"
+                url: "https://www.ilo.org/ar"
+              - label: "中文"
+                url: "https://www.ilo.org/ru"
+              - label: "Português"
+                url: "https://www.ilo.org/pt"
+              - label: "Italiano"
+                url: "https://www.ilo.org/it"
+          search:
+            label: "Search"
+            url: "https://www.ilo.org/search"
+
   visibility: storybook

package/dist/components/nav/nav_compact.twig

@@ -72,7 +72,8 @@
   {% if moreItems %}
     {% include "@components/nav/desktop/navdropdown.twig" with {
       menu: moreItems,
-      prefix: prefix
+      prefix: prefix,
+      className: 'ilo' ~ '__nav-extra-menu'
     } only %}
   {% endif %}
 

package/dist/components/nav/nav_complex.twig

@@ -88,7 +88,8 @@
       {% if moreItems|length %}
         {% include "@components/nav/desktop/navdropdown.twig" with {
           menu: moreItems,
-          prefix: prefix
+          prefix: prefix,
+					className: 'ilo' ~ '__nav-extra-menu'
         } only %}
       {% endif %}
 
@@ -136,4 +137,3 @@
     </nav>
   </div>
 </header>
-

package/dist/components/nav/nav_main.twig

@@ -0,0 +1,135 @@
+{# navcomplex.twig #}
+
+{% set prefix = prefix|default('ilo') %}
+{% set base_class = 'ilo' ~ '--main-nav' %}
+{% set mobile_drawer_class = 'ilo' ~ '--nav-mobile-drawer' %}
+
+<header class="{{ base_class }}" data-loadcomponent="Nav" data-prefix="ilo">
+	<div class="{{ base_class }}-bg--dark">
+		<div class="{{ base_class }}__widgets {{ base_class }}__container">
+			<span class="{{ base_class }}__widgets-bar-corner"></span>
+			<span class="{{ base_class }}__widgets-bar">
+				{% if widgets.language %}
+					{% include "@components/languagetoggle/languagetoggle.twig" with {
+            className: base_class ~ '__widgets-bar__language',
+            hideIcon: false,
+            language: widgets.language.language,
+            links: widgets.language.links,
+						theme: "dark-blue"
+          } %}
+				{% endif %}
+			</span>
+		</div>
+	</div>
+
+	<div class="{{ base_class }}-bg--dark">
+		<div class="{{ base_class }}__branding {{ base_class }}__container">
+			<div class="{{ base_class }}__branding-main">
+				<div class="{{ base_class }}__branding-main__logo" role="button" tabindex="0" aria-label="Branding">
+					{% include "@components/logo/logo.twig" with {
+            src: branding.logo.main,
+            alt: branding.logo.alt,
+            link: branding.logo.link,
+            className: base_class ~ '__branding-main__logo',
+            imgClassName: base_class ~ '__branding-main__logo-img',
+            prefix: prefix
+          } %}
+				</div>
+			</div>
+			<div class="{{ base_class }}__branding-tag">
+				<h4 class="{{ base_class }}__branding-tag__main">{{ branding.tag.main }}</h4>
+				{% if branding.tag.sub %}
+					<span class="{{ base_class }}__branding-tag__sub">{{ branding.tag.sub }}</span>
+				{% endif %}
+			</div>
+		</div>
+	</div>
+
+	<div class="{{ base_class }}-bg--darker">
+		<nav class="{{ base_class }}__nav {{ base_class }}__container">
+			<div class="{{ base_class }}__nav-mobile">
+				<div class="{{ base_class }}__nav-mobile__logo" role="button" tabindex="0" aria-label="Branding">
+					{% include "@components/logo/logo.twig" with {
+            src: branding.logo.mobile,
+            alt: branding.logo.alt,
+            link: branding.logo.link,
+            className: base_class ~ '__nav-mobile__logo',
+            imgClassName: base_class ~ '__nav-mobile__logo-img',
+            prefix: prefix
+          } %}
+				</div>
+			</div>
+
+			{% if facadeItems %}
+				{% include "@components/nav/desktop/navmenu.twig" with {
+          className: base_class ~ '__nav-menu',
+          menu: facadeItems,
+          more: moreItems|length ? {
+            label: labels.more,
+          } : null,
+          prefix: prefix,
+					light: true
+        } only %}
+			{% endif %}
+
+			{% if moreItems|length %}
+				{% include "@components/nav/desktop/navdropdown.twig" with {
+          menu: moreItems,
+          prefix: prefix,
+					className: 'ilo' ~ '__nav-extra-menu'
+        } only %}
+			{% endif %}
+
+			<button class="{{ base_class }}__nav-search" aria-label="Open search"
+			  aria-extanded="false"
+				aria-haspopup="menu"
+				aria-controls="{{ prefix }}__extra-"
+			>
+				<span class="{{ base_class }}__nav-search__icon"></span>
+			</button>
+
+			{% include "@components/nav/desktop/navsearch.twig" with {
+          prefix: prefix,
+          search: widgets.search,
+						className: base_class ~ '__nav-extra-search ' ~ 'ilo' ~ '--main-nav__nav-search-dropdown'
+        } only %}
+
+			<button class="{{ base_class }}__nav-burger" aria-label="Toggle navigation" aria-expanded="false" aria-haspopup="menu" aria-controls="{{ prefix }}--nav-mobile-drawer__main">
+				<span class="{{ base_class }}__nav-burger__icon"></span>
+			</button>
+
+			{% include "@components/nav/mobile/mobiledrawer_main.twig" with {
+        menu: facadeItems,
+        prefix: prefix,
+        branding: branding,
+        widgets: widgets,
+        labels: labels,
+        showMoreButton: moreItems|length,
+        inputSearch: true,
+        id: "main",
+      } only %}
+
+			{% if widgets.language.links|length %}
+				{% include "@components/nav/mobile/mobiledrawer_nested.twig" with {
+        menu: widgets.language.links,
+        prefix: prefix,
+        title: labels.language,
+        menu_home: labels.home,
+          isActiveLabel: widgets.language.language,
+          id: "languages",
+        } only %}
+			{% endif %}
+
+			{% if moreItems|length %}
+				{% include "@components/nav/mobile/mobiledrawer_nested.twig" with {
+          menu: moreItems,
+          prefix: prefix,
+          title: labels.more,
+          menu_home: labels.home,
+          id: "more",
+        } only %}
+			{% endif %}
+
+		</nav>
+	</div>
+</header>

package/dist/components/socialmedia/socialmedia.component.yml

@@ -31,6 +31,17 @@ socialmedia:
         large: large
       preview: normal
       defaultValue: normal
+    titleLevel:
+      type: select
+      label: Headline Title Level
+      description: Select the title level for the headline.
+      required: false
+      options:
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5
+      preview: "h5"
   fields:
     headline:
       type: string
@@ -73,6 +84,15 @@ socialmedia:
         - icon: "wechat"
           label: "WeChat"
           url: "https://weixin.qq.com"
+        - icon: "spotify"
+          label: "Spotify"
+          url: "https://open.spotify.com/user/iloorg"
+        - icon: "apple_podcasts"
+          label: "Apple Podcasts"
+          url: "https://podcasts.apple.com"
+        - icon: "rss"
+          label: "RSS"
+          url: "https://ilo.org/rss.xml"
 
       required: true
   visibility: storybook

package/dist/components/socialmedia/socialmedia.twig

@@ -1,7 +1,9 @@
 {# socialmedia.twig #}
+{% set titleLevel = titleLevel|default('h5') %}
+
 <div class="{{ prefix }}--social-media {{ prefix }}--social-media__theme__{{ theme|default("light") }} {{ prefix }}--social-media__justify__{{ align|default("start") }}">
     {% if headline %}
-        <h5 class="{{ prefix }}--social-media--headline">{{ headline }}</h5>
+        <{{ titleLevel }} class="{{ prefix }}--social-media--headline">{{ headline }}</{{ titleLevel }}>
     {% endif %}
     <ul class="{{ prefix }}--social-media--list {{ prefix }}--social-media--list__size__{{ iconSize|default("normal") }}">
         {% for item in icons %}

package/dist/components/socialmedia/socialmedia.wingsuit.yml

@@ -31,6 +31,17 @@ socialmedia:
         large: large
       preview: normal
       defaultValue: normal
+    titleLevel:
+      type: select
+      label: Headline Title Level
+      description: Select the title level for the headline.
+      required: false
+      options:
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5
+      preview: "h5"
   fields:
     headline:
       type: string
@@ -73,6 +84,15 @@ socialmedia:
         - icon: "wechat"
           label: "WeChat"
           url: "https://weixin.qq.com"
+        - icon: "spotify"
+          label: "Spotify"
+          url: "https://open.spotify.com/user/iloorg"
+        - icon: "apple_podcasts"
+          label: "Apple Podcasts"
+          url: "https://podcasts.apple.com"
+        - icon: "rss"
+          label: "RSS"
+          url: "https://ilo.org/rss.xml"
 
       required: true
   visibility: storybook

package/dist/styles/components/accordion.css

@@ -1 +1 @@
-.ilo--accordion{--ilo-accordion-color-icon:var(--ilo-color-blue-dark);--ilo-accordion-transition-timing:500ms;--ilo-accordion-scroll-max-height:300px}.ilo--accordion--icon{height:24px;width:24px}.ilo--accordion--label{flex:1;padding-right:10px}.ilo--accordion--button{background-color:var(--ilo-color-white);border:none;border-top:2px solid var(--ilo-color-gray-light);color:var(--ilo-color-blue-dark);display:flex;flex-direction:row;font-size:var(--ilo-font-size-md);justify-content:space-between;line-height:var(--ilo-line-height-xlg);margin:0;padding-block:calc(var(--ilo-spacing-base)*4);padding-inline-end:calc(var(--ilo-spacing-base)*1);transition:all var(--ilo-accordion-transition-timing) ease-in-out;width:100%}.ilo--accordion--button,.ilo--accordion--button__large{font-family:var(--ilo-fonts-display);font-weight:var(--ilo-font-weight-medium);letter-spacing:var(--ilo-letter-spacing-sm)}.ilo--accordion--button__large{font-size:var(--ilo-font-size-lg);line-height:var(--ilo-line-height-lg);padding-block:calc(var(--ilo-spacing-base)*5)}.ilo--accordion--button[aria-expanded=true]{background-color:var(--ilo-color-blue-lighter)}.ilo--accordion--button[aria-expanded=true] .ilo--accordion--icon{background-color:var(--ilo-color-blue);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 13H5v-2h14z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 13H5v-2h14z'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}.ilo--accordion--button[aria-expanded=false] .ilo--accordion--icon{background-color:var(--ilo-color-blue-dark);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}.ilo--accordion--button:focus,.ilo--accordion--button:hover{--ilo-accordion-color-icon:var(--ilo-color-blue);border-top-color:var(--ilo-color-blue);color:var(--ilo-color-blue);cursor:pointer}@media screen and (min-width:610px){.ilo--accordion--button{font-size:var(--ilo-font-size-md);line-height:var(--ilo-line-height-xlg)}.ilo--accordion--button,.ilo--accordion--button__large{font-family:var(--ilo-fonts-display);font-weight:var(--ilo-font-weight-medium);letter-spacing:var(--ilo-letter-spacing-sm)}.ilo--accordion--button__large{font-size:var(--ilo-font-size-lg);line-height:var(--ilo-line-height-lg);padding:calc(var(--ilo-spacing-base)*5) 0}}.ilo--accordion--panel{max-height:0;overflow:hidden;transition:all var(--ilo-accordion-transition-timing) cubic-bezier(0,1,0,1)}.ilo--accordion--panel .ilo--accordion--innerpanel{padding-bottom:calc(var(--ilo-spacing-base)*9);padding-inline-end:calc(var(--ilo-spacing-base)*8);padding-top:calc(var(--ilo-spacing-base)*2)}.ilo--accordion--panel__open{max-height:100vh;transition:all var(--ilo-accordion-transition-timing) ease-in-out}.ilo--accordion--panel__open.ilo--accordion--panel__scroll{max-height:var(--ilo-accordion-scroll-max-height);overflow-y:auto}
+@keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.ilo--accordion{--ilo-accordion-color-icon:var(--ilo-color-blue-dark);--ilo-accordion-transition-timing:500ms;--ilo-accordion-scroll-max-height:300px}.ilo--accordion--icon{height:24px;width:24px}.ilo--accordion--label{flex:1;padding-right:10px}.ilo--accordion--button{background-color:var(--ilo-color-white);border:none;border-top:2px solid var(--ilo-color-gray-light);color:var(--ilo-color-blue-dark);display:flex;flex-direction:row;font-size:var(--ilo-font-size-md);justify-content:space-between;line-height:var(--ilo-line-height-xlg);margin:0;padding-block:calc(var(--ilo-spacing-base)*4);padding-inline-end:calc(var(--ilo-spacing-base)*1);transition:all var(--ilo-accordion-transition-timing) ease-in-out;width:100%}.ilo--accordion--button,.ilo--accordion--button__large{font-family:var(--ilo-fonts-display);font-weight:var(--ilo-font-weight-medium);letter-spacing:var(--ilo-letter-spacing-sm)}.ilo--accordion--button__large{font-size:var(--ilo-font-size-lg);line-height:var(--ilo-line-height-lg);padding-block:calc(var(--ilo-spacing-base)*5)}.ilo--accordion--button[aria-expanded=true]{background-color:var(--ilo-color-blue-lighter)}.ilo--accordion--button[aria-expanded=true] .ilo--accordion--icon{background-color:var(--ilo-color-blue);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 13H5v-2h14z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 13H5v-2h14z'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}.ilo--accordion--button[aria-expanded=false] .ilo--accordion--icon{background-color:var(--ilo-color-blue-dark);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}.ilo--accordion--button:focus,.ilo--accordion--button:hover{--ilo-accordion-color-icon:var(--ilo-color-blue);border-top-color:var(--ilo-color-blue);color:var(--ilo-color-blue);cursor:pointer}@media screen and (min-width:610px){.ilo--accordion--button{font-size:var(--ilo-font-size-md);line-height:var(--ilo-line-height-xlg)}.ilo--accordion--button,.ilo--accordion--button__large{font-family:var(--ilo-fonts-display);font-weight:var(--ilo-font-weight-medium);letter-spacing:var(--ilo-letter-spacing-sm)}.ilo--accordion--button__large{font-size:var(--ilo-font-size-lg);line-height:var(--ilo-line-height-lg);padding:calc(var(--ilo-spacing-base)*5) 0}}.ilo--accordion--panel{max-height:0;overflow:hidden;transition:all var(--ilo-accordion-transition-timing) cubic-bezier(0,1,0,1)}.ilo--accordion--panel .ilo--accordion--innerpanel{padding-bottom:calc(var(--ilo-spacing-base)*9);padding-inline-end:calc(var(--ilo-spacing-base)*8);padding-top:calc(var(--ilo-spacing-base)*2)}.ilo--accordion--panel__open{max-height:100vh;transition:all var(--ilo-accordion-transition-timing) ease-in-out}.ilo--accordion--panel__open.ilo--accordion--panel__scroll{max-height:var(--ilo-accordion-scroll-max-height);overflow-y:auto}