@ilo-org/twig 1.8.6 → 1.10.0

package/dist/components/icon/icon.twig

@@ -1 +1 @@
-<svg class="ilo--icon" data-name="{{name}}" data-size="{{size}}" data-color="{{color}}" data-loadcomponent="Icon" aria-hidden="true"></svg>
+<svg class="ilo--icon{% if class %} {{class}}{% endif %}" data-name="{{name}}" data-size="{{size}}" data-color="{{color}}" data-loadcomponent="Icon" aria-hidden="true"></svg>

package/dist/components/image/image.component.yml

@@ -51,4 +51,11 @@ image:
       description: Is this image in a hero? If true, and credit exists, will display credit in a title attribute
       preview: false
       required: false
+    theme:
+      type: select
+      label: Theme
+      description: The theme to be used for the Image component.
+      options:
+        light: light
+        dark: dark
   visibility: storybook

package/dist/components/image/image.twig

@@ -1,9 +1,10 @@
 {#
   IMAGE COMPONENT
 #}
-<figure class="ilo--image" data-prefix="ilo">
+{% set theme = theme|default("light") %}
+<figure class="ilo--image ilo--image__theme__{{theme}}" data-prefix="ilo">
   <div class="image ilo--image--wrapper">
-    <picture class="ilo--image--img" {% if credit and ishero and ishero != 'false' %}title="{{credit}}"{% endif %}>
+    <picture {% if credit and ishero and ishero != 'false' %}title="{{credit}}"{% endif %}>
       {% for img in url|reverse %}
         {% if loop.last == false  %}
           {% if img.breakpoint matches '/^\\d+$/' %}
@@ -17,13 +18,24 @@
     </picture>
     {% if not ishero or ishero =='false' %}
       {% if credit %}
-      <span class="ilo--credit">
-        <span class="ilo--credit--label">{{credit}}</span>
-      </span>
+      <div class="ilo--image--credit">
+        <div class="ilo--image--tooltip">
+          {% include '@components/tooltip/tooltip.twig' with {
+              prefix: prefix,
+              label: credit,
+              icon: true,
+              theme: theme,
+              icontheme: theme == 'dark' ? 'light' : 'dark'
+            } only %}
+        </div>
+        <div class="ilo--image--label">
+          {{credit}}
+        </div>
+      </div>
       {% endif %}
     {% endif %}
   </div>
   {% if caption %}
-    <figcaption class="ilo--image--caption">{{caption}}</figcaption>
+    <figcaption>{{caption}}</figcaption>
   {% endif %}
 </figure>

package/dist/components/image/image.wingsuit.yml

@@ -51,4 +51,11 @@ image:
       description: Is this image in a hero? If true, and credit exists, will display credit in a title attribute
       preview: false
       required: false
+    theme:
+      type: select
+      label: Theme
+      description: The theme to be used for the Image component.
+      options:
+        light: light
+        dark: dark
   visibility: storybook

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