@ilo-org/twig 0.17.0 → 0.17.1

package/dist/components/linklist/linklist.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--link-list--headline{font-size:23.32px;line-height:29.15px;margin-bottom:1.0404340836rem}.ilo--link-list--headline,.ilo--link-list--links--headline{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;letter-spacing:-.035em}.ilo--link-list--links--headline{font-size:18.66px;line-height:24.26px;margin-bottom:.9782761332rem;margin-top:2.1036780625rem}.ilo--link-list--links--item.indented{padding-left:1.7148981779rem}.ilo--link-list--links--item.indented .ilo--link-list--label{display:block;padding-left:1.0718113612rem;position:relative}.ilo--link-list--links--item.indented .ilo--link-list--label:before{background-position:0;background-repeat:no-repeat;background-size:contain;content:"";display:block;height:.6430868167rem;left:0;position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:center;width:.6430868167rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath fill='%23B8C4CC' d='M6 10.846L12 0H0l6 10.846z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--link-list--links--item.indented .ilo--link-list--label{padding-right:1.2861736334rem}[dir=rtl] .ilo--link-list--links--item.indented .ilo--link-list--label:before{transform:translateY(-50%) rotate(90deg);left:unset;right:0}.ilo--link-list--links--item.indented .ilo--link-list--link:focus .ilo--link-list--label:before,.ilo--link-list--links--item.indented .ilo--link-list--link:hover .ilo--link-list--label:before,.ilo--link-list--links--item.indented:focus .ilo--link-list--label:before,.ilo--link-list--links--item.indented:hover .ilo--link-list--label:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath fill='%231E2DBE' d='M6 10.846L12 0H0l6 10.846z'/%3E%3C/svg%3E")}.ilo--link-list--link{background-position:calc(100% - 4px) 50%;background-repeat:no-repeat;background-size:1.2861736334rem 1.2861736334rem;border-bottom:.1071811361rem solid #edf0f2;color:#230050;display:block;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:500;font-size:16px;letter-spacing:normal;line-height:23.36px;padding-top:.857449089rem;padding-bottom:.857449089rem;padding-inline-end:1.7148981779rem;text-decoration:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M8.638 19.996l-.988-.988L14.657 12 7.65 4.992l.988-.989 7.505 7.5a.702.702 0 0 1 0 .995l-7.505 7.498z'/%3E%3C/svg%3E");transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--link-list--link:active,.ilo--link-list--link:visited{color:#230050;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--link-list--link:active{outline:0}.ilo--link-list--link:focus,.ilo--link-list--link:hover{border-bottom:.1071811361rem solid #1e2dbe;background-color:#ebf5fd;color:#1e2dbe;outline:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M8.638 19.996l-.988-.988L14.657 12 7.65 4.992l.988-.989 7.505 7.5a.702.702 0 0 1 0 .995l-7.505 7.498z'/%3E%3C/svg%3E");transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}[dir=rtl] .ilo--link-list--link{background-position:.2143622722rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M7.9 12.5l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--link-list--link:focus,[dir=rtl] .ilo--link-list--link:hover{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M7.9 12.5l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3E%3C/svg%3E")}.ilo--link-list--dark .ilo--link-list--headline,.ilo--link-list--dark .ilo--link-list--links--headline{color:#fff}.ilo--link-list--dark .ilo--link-list--label:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath fill='%23FFF' d='M6 10.846L12 0H0l6 10.846z'/%3E%3C/svg%3E")}.ilo--link-list--dark .ilo--link-list--link{border-bottom:.1071811361rem solid rgba(237,240,242,.4);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' d='M8.638 19.996l-.988-.988L14.657 12 7.65 4.992l.988-.989 7.505 7.5a.702.702 0 0 1 0 .995l-7.505 7.498z'/%3E%3C/svg%3E")}.ilo--link-list--dark .ilo--link-list--link .ilo--link-list--label{color:#fff}.ilo--link-list--dark .ilo--link-list--link:visited .ilo--link-list--label{color:#fff;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--link-list--dark .ilo--link-list--link:active{outline:0}.ilo--link-list--dark .ilo--link-list--link:active .ilo--link-list--label{color:#230050;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--link-list--dark .ilo--link-list--link:focus,.ilo--link-list--dark .ilo--link-list--link:hover{outline:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M8.638 19.996l-.988-.988L14.657 12 7.65 4.992l.988-.989 7.505 7.5a.702.702 0 0 1 0 .995l-7.505 7.498z'/%3E%3C/svg%3E")}.ilo--link-list--dark .ilo--link-list--link:focus .ilo--link-list--label,.ilo--link-list--dark .ilo--link-list--link:hover .ilo--link-list--label{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}[dir=rtl] .ilo--link-list--dark .ilo--link-list--link{background-position:.2143622722rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' d='M7.9 12.5l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--link-list--dark .ilo--link-list--link:focus,[dir=rtl] .ilo--link-list--dark .ilo--link-list--link:hover{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M7.9 12.5l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3E%3C/svg%3E")}.wingsuit-body .ilo--link-list--dark{background-color:#230050}

package/dist/components/linklist/linklist.twig

@@ -0,0 +1,26 @@
+{#
+  LINK LIST COMPONENT
+#}
+<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>
+  {% endif %}
+  <ul class="ilo--link-list--linkgroups">
+    {% for group in linkgroup %}
+    <li class="ilo--link-list--linkgroups-item">
+      {% if group.headline is not empty %}
+      <h4 class="ilo--link-list--links--headline">{{group.headline}}</h4>
+      {% endif %}
+      <ul class="ilo--link-list--links">
+        {% for link in group.links %}
+        <li class="ilo--link-list--links--item{% if link.indented == 'true' %} indented{% endif %}">
+          <a href="{{link.url}}" class="ilo--link-list--link">
+            <span class="ilo--link-list--label">{{link.label}}</span>
+          </a>
+        </li>
+        {% endfor %}
+      </ul>
+    </li>
+    {% endfor %}
+  </ul>
+</div>

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

@@ -0,0 +1,55 @@
+linklist:
+  use: "@components/linklist/linklist.twig"
+  namespace: Components/Navigation
+  label: Link List
+  description: The Link List receives a list of urls with labels and an optional prop indicating if this link is at the end of a 'section.'
+  fields:
+    headline:
+      type: string
+      label: Headline
+      description: Link List's Headline
+      preview: Link List Headling
+    linkgroup:
+      type: object
+      label: Link Group
+      description: A group of links
+      required: true
+      preview:
+        - headline: Section Headline
+          links:
+            - label: Link One
+              url: "http://www.google.com"
+            - label: Link Two
+              url: "http://www.google.com"
+            - label: Link Three
+              url: "http://www.google.com"
+            - label: Link Four
+              url: "http://www.google.com"
+            - label: Link Five Is Slightly Longer
+              url: "http://www.google.com"
+        - headline: Section 2 (With Indents)
+          links:
+            - label: Section 2 Link One
+              url: "http://www.google.com"
+            - indented: "true"
+              label: Section 2 Link Two
+              url: "http://www.google.com"
+            - indented: "true"
+              label: Section 2 Link Three
+              url: "http://www.google.com"
+            - indented: "true"
+              label: Section 2 Link Four
+              url: "http://www.google.com"
+            - label: Section 2 Link Five Is Slightly Longer
+              url: "http://www.google.com"
+  settings:
+    theme:
+      type: select
+      label: Theme
+      description: Is this link list on a light or dark background?
+      required: true
+      options:
+        light: Light
+        dark: Dark
+      preview: "light"
+  visibility: storybook

package/dist/components/list/list.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--list ol{counter-reset:a}.ilo--list ol li{counter-increment:a;display:table}.ilo--list ol li:before{content:counter(a) ".";display:table-cell;text-align:right;padding-inline-end:.4287245445rem}.ilo--list ul li{position:relative;padding-inline-start:1.2861736334rem}.ilo--list ul li:before{content:"";position:absolute;height:.7502679528rem;width:.6430868167rem;top:.3215434084rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12.4'%3E%3Cpath fill='%23B8C4CC' d='M10.8 6.4L0 .4v12l10.8-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;left:0;right:0}[dir=rtl] .ilo--list ul li:before{transform:rotate(180deg)}@media screen and (min-width:610px){.ilo--list ul li:before{top:.3751339764rem}}.ilo--list li{font-size:16px;letter-spacing:normal;line-height:23.36px;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;margin-bottom:.857449089rem}.ilo--list li b,.ilo--list li strong{font-weight:700;letter-spacing:-.02em}@media screen and (min-width:610px){.ilo--list li{font-size:18.66px;letter-spacing:normal;line-height:27.24px}}.ilo--list--title{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;margin-bottom:1.2861736334rem;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700}@media screen and (min-width:610px){.ilo--list--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px}}.ilo--list__unstyled ol,.ilo--list__unstyled ul{list-style:none}.ilo--list__unstyled ol li,.ilo--list__unstyled ul li{padding-inline-start:0}.ilo--list__unstyled ol li:before,.ilo--list__unstyled ul li:before{content:none}.ilo--list__horizontal,.ilo--list__horizontal ol,.ilo--list__horizontal ul{display:flex;flex-flow:row;list-style:none;gap:2.1436227224rem}.ilo--list__horizontal li,.ilo--list__horizontal ol li,.ilo--list__horizontal ul li{padding:0}.ilo--list__horizontal li:before,.ilo--list__horizontal ol li:before,.ilo--list__horizontal ul li:before{content:none}

package/dist/components/list/list.twig

@@ -0,0 +1,35 @@
+{# list.twig #}
+
+{% if not ordered %}
+	{% set ordered = "unstyled" %}
+{% endif %}
+
+
+<div class="ilo--list {% if ordered == 'unstyled' %} ilo--list__unstyled {% endif %} {% if alignment == 'horizontal' %} ilo--list__horizontal {% endif %}">
+	{% if title %}
+		<h2 class="ilo--list--title">{{ title }}</h2>
+	{% endif %}
+	{% if ordered == "ordered" %}
+		<ol>
+			{% for item in items %}
+				{% include "@components/list/list-item.twig" with {
+				prefix: prefix,
+				label: item.label,
+				content: item.content,
+				id: item.id,
+			} only %}
+			{% endfor %}
+		</ol>
+	{% else %}
+		<ul>
+			{% for item in items %}
+				{% include "@components/list/list-item.twig" with {
+				prefix: prefix,
+				label: item.label,
+				content: item.content,
+				id: item.id,
+			} only %}
+			{% endfor %}
+		</ul>
+	{% endif %}
+</div>

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

@@ -0,0 +1,60 @@
+list:
+  namespace: Components/Content
+  use: "@components/list/list.twig"
+  label: List
+  description: The List component renders a styled list of text items. In addition to the List styles made available in the RichText component, the List component also includes unstyled and horizontally aligned lists.
+  fields:
+    title:
+      type: text
+      label: Label
+      description: The list item's heading.
+      preview: Facts about the ILO
+    items:
+      type: object
+      label: Items
+      description: Array of the list items
+      required: true
+      preview:
+        - content: The International Labour Organization (ILO) was founded in 1919 as part of the League of Nations to promote workers' rights, encourage decent employment opportunities, and enhance social protection.
+          id: item1
+        - content: The ILO aims to promote rights at work, encourage decent job opportunities, enhance social protection, and strengthen dialogue on work-related issues.
+          id: item2
+        - content: The ILO advocates for social justice and internationally recognized human and labor rights.
+          id: item3
+        - content: The ILO develops international labor standards in the form of conventions and recommendations to improve working conditions and labor rights.
+          id: item4
+        - content: The ILO is unique in its tripartite structure that includes representatives from government, employer, and worker organizations.
+          id: item5
+        - content: The ILO works to eradicate child labor, targeting the worst forms of child labor through conventions and action programs.
+          id: item6
+        - content: The ILO promotes gender equality and empowers women through targeted policies and programs.
+          id: item7
+        - content: The ILO’s Decent Work agenda aims to secure fair income, safety at work, social protection, and respect for workers' rights.
+          id: item8
+        - content: The ILO provides research and data on global employment trends and labor market issues to inform policy development.
+          id: item9
+        - content: The ILO offers training and education programs to improve occupational skills and competencies.
+          id: item10
+        - content: The annual International Labor Conference is where ILO members convene to discuss and create labor standards.
+          id: item11
+  settings:
+    ordered:
+      type: select
+      label: Ordered
+      description: The order for the list. `Ordered` uses numbers, `unordered` uses arrow indicators and `unstyled` doesn't have anything but spacing. `unstyled` is the default.
+      required: false
+      options:
+        ordered: Ordered
+        unordered: Unordered
+        unstyled: Unstyled
+      preview: "unstyled"
+    alignment:
+      type: select
+      label: Alignment
+      description: Is the list displayed horizontally? Usually used for shorter items inside a list.
+      options:
+        default: Default
+        horizontal: Horizontal
+      preview: "default"
+      required: false
+  visibility: storybook

package/dist/components/list-item/list-item.twig

@@ -0,0 +1,6 @@
+{#
+  ACCORDION ITEM COMPONENT
+#}
+<li class="{{ prefix }}--list--item" id="{{ id }}">
+	{{content}}
+</li>

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

@@ -0,0 +1,19 @@
+list:
+  namespace: Components/Content
+  use: "@components/list/list-item.twig"
+  label: List Item
+  description: A list item.
+  fields:
+    content:
+      type: text
+      label: Content
+      description: The list item's collapsed content.
+      preview:
+        faker: lorem.word
+    id:
+      type: text
+      label: ID
+      description: The list item's id.
+      preview:
+        faker: lorem.word
+  visibility: storybook

package/dist/components/loading/loading.behavior.js

@@ -0,0 +1 @@
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";function e(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function t(t,n){for(var i=0;i<n.length;i++){var r=n[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,e(r.key),r)}}var n="itemsloading",i="itemsloaded",r=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.element=t,this.prefix="".concat(this.element.dataset.prefix,"--loading"),this.status="idle",this.init()},(r=[{key:"init",value:function(){return this.setupHandlers().enable(),this}},{key:"setupHandlers",value:function(){return this.LoadingHandler=this.loading.bind(this),this.LoadedHandler=this.loaded.bind(this),this}},{key:"enable",value:function(){var e=this;return document.addEventListener(n,(function(){return e.LoadingHandler})),document.addEventListener(i,(function(){return e.LoadedHandler})),this}},{key:"loading",value:function(){return this.element.classList.remove("".concat(this.prefix,"--idle")),this.element.classList.add("".concat(this.prefix,"--loading")),this}},{key:"loaded",value:function(){return this.element.classList.remove("".concat(this.prefix,"--loading")),this.element.classList.add("".concat(this.prefix,"--loaded")),this.element.querySelector(".".concat(this.prefix,"--copy")).innerHTML=this.element.dataset.loadedmessage,this}}])&&t(e.prototype,r),a&&t(e,a),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,r,a}();Drupal.behaviors.loading={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Loading"]'),(function(e){e.dataset.jsProcessed||(new r(e),e.dataset.jsProcessed=!0)}))}}}));

package/dist/components/loading/loading.css

@@ -0,0 +1 @@
+@charset "UTF-8";@keyframes a{to{transform:rotate(1turn)}}.ilo--loading{align-items:center;display:flex;justify-content:center;position:relative}.ilo--loading--large .ilo--loading--copy{width:1px;height:1px;margin:-1px;padding:0;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.ilo--loading--large.ilo--loading--loading:before{animation:a 1.5s linear infinite;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 107.7 107.7'%3E%3Ccircle cx='53.8' cy='53.7' r='53.9' fill='%23fff'/%3E%3Cpath fill='%23b8c4cc' d='M101.8 53.7c0-10.8-3.6-21.2-10.3-29.7-6.7-8.5-16-14.4-26.5-17s-21.5-1.4-31.3 3.1C23.9 14.7 16 22.4 11.1 32c-4.9 9.6-6.4 20.6-4.3 31.2 2.1 10.6 7.7 20.1 15.9 27.1s18.5 11 29.3 11.5c10.8.4 21.4-2.8 30.1-9.1l-4.7-6.4c-7.3 5.3-16.1 8-25.1 7.6-9-.4-17.6-3.7-24.5-9.6-6.8-5.9-11.5-13.9-13.3-22.7-1.8-8.8-.5-18 3.6-26S28.9 21.2 37 17.4c8.2-3.8 17.4-4.7 26.1-2.6 8.8 2.1 16.5 7.1 22.1 14.2s8.6 15.8 8.6 24.8h8z'/%3E%3Cpath fill='%231e2dbe' d='M97.8 74.9l9.5-17.2h-19l9.5 17.2z'/%3E%3C/svg%3E");height:5.7609860665rem;width:5.7609860665rem}.ilo--loading--large.ilo--loading--loaded:before,.ilo--loading--large.ilo--loading--loading:before{background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block}.ilo--loading--large.ilo--loading--loaded:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='97' height='96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.237 48c0-26.51 21.49-48 48-48s48 21.49 48 48-21.49 48-48 48-48-21.49-48-48z' fill='%23EDF0F2'/%3E%3Cpath d='M20.237 48c0-15.464 12.536-28 28-28 15.463 0 28 12.536 28 28s-12.536 28-28 28-28-12.536-28-28z' fill='%231E2DBE'/%3E%3Cpath d='M44.037 50.8l-5.6-5.6-4.2 4.2 9.8 9.8 18.2-18.2-4.2-4.2-14 14z' fill='%23fff'/%3E%3C/svg%3E");height:5.1446945338rem;width:5.1446945338rem}.ilo--loading--small .ilo--loading--copy{color:#6d6d6d;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:400;font-size:14.93px;letter-spacing:-.02em;line-height:20.16px}.ilo--loading--small.ilo--loading--idle .ilo--loading--copy{width:1px;height:1px;margin:-1px;padding:0;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.ilo--loading--small.ilo--loading--loading:before{animation:a 1.5s linear infinite;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.3 27.3'%3E%3Ccircle cx='13.7' cy='13.7' r='13.7' fill='%23fff'/%3E%3Cpath fill='%23b8c4cc' d='M25.7 13.7c0-2.7-.9-5.3-2.6-7.4-1.7-2.1-4-3.6-6.6-4.2-2.6-.6-5.4-.4-7.8.8-2.5 1-4.5 2.9-5.7 5.3-1.2 2.4-1.6 5.1-1.1 7.8.5 2.6 1.9 5 4 6.8 2 1.8 4.6 2.8 7.3 2.9 2.7.1 5.3-.7 7.5-2.3L18.9 21c-1.6 1.2-3.6 1.8-5.6 1.7-2-.1-4-.8-5.5-2.1s-2.6-3.1-3-5.1-.1-4 .8-5.8C6.5 7.8 8 6.3 9.9 5.5c1.8-.8 3.9-1 5.9-.6 2 .5 3.7 1.6 5 3.2 1.3 1.6 1.9 3.6 1.9 5.6h3z'/%3E%3Cpath fill='%231e2dbe' d='M24.2 20.6l3-5.4h-6l3 5.4z'/%3E%3C/svg%3E")}.ilo--loading--small.ilo--loading--loaded:before,.ilo--loading--small.ilo--loading--loading:before{background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;height:1.2861736334rem;margin-right:.6430868167rem;width:1.2861736334rem}.ilo--loading--small.ilo--loading--loaded:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12z' fill='%231E2DBE'/%3E%3Cpath d='M10.2 13.2l-2.4-2.4L6 12.6l4.2 4.2L18 9l-1.8-1.8-6 6z' fill='%23fff'/%3E%3C/svg%3E")}.ilo--loading.storybook{height:400px;width:100%}

package/dist/components/loading/loading.twig

@@ -0,0 +1,8 @@
+{#
+  LOADING COMPONENT
+#}
+<div class="storybook ilo--loading ilo--loading--{{size}} ilo--loading--{{status}}" role="alert" aria-live="assertive" data-loadcomponent="Loading" data-prefix="ilo">
+  {% if message or loadedmessage %}
+    <p class="ilo--loading--copy">{% if message and not status == 'loaded' %}{{message}}{% endif %}{% if loadedmessage and status == 'loaded' %}{{loadedmessage}}{% endif %}</p>
+  {% endif %}
+</div>

package/dist/components/loading/loading.wingsuit.yml

@@ -0,0 +1,39 @@
+loading:
+  namespace: Components/Transitions
+  use: "@components/loading/loading.twig"
+  label: Loading
+  description: The Loading component displays a loading state. (See Javascript comments in loading.js for how to use this with vanilla JS).
+  fields:
+    message:
+      type: string
+      label: Message
+      description: The loading message
+      preview: "Submitting"
+      required: true
+    loadedmessage:
+      type: string
+      label: LOaded Message
+      description: The loaded message
+      preview: "Completed"
+      required: true
+  settings:
+    size:
+      type: select
+      label: Size
+      description: The size of the loader
+      required: true
+      options:
+        small: Small
+        large: Large
+      preview: "large"
+    status:
+      type: select
+      label: Status
+      description: The status of the loading content
+      required: true
+      options:
+        idle: Idle
+        loading: Loading
+        loaded: Loaded
+      preview: "loading"
+  visibility: storybook

package/dist/components/localnav/localnav.twig

@@ -0,0 +1,86 @@
+{#
+  LOCALNAV COMPONENT
+#}
+<header class="ilo--header ilo--header--local" data-loadcomponent="Navigation" data-prefix="ilo">
+  <div class="ilo--header--utility-bar ilo--header--utility-bar--local" {% if background %} style="background: {{background}};"{% endif %}>
+    <nav class="ilo--nav--local">
+      <div class="ilo--nav--local--logo-wrapper">
+        <a href="{{siteurl}}" class="ilo--nav--local--logo-link">
+          <img src="{{logo.image}}" alt="{{logo.alt}}" class="ilo--nav--local--logo">
+        </a>
+      </div>
+
+      <ul class="ilo--nav--local--set">
+        {% for item in primarynav.items %}
+          <li class="ilo--nav--local--item">
+            <a href="{{item.link}}" class="ilo--nav--local--link">
+              <span>{{item.label}}</span>
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </nav>
+    <div class="ilo--language-switcher">
+      <div class="ilo--language-switcher--wrap">
+        {% if mainlink is defined %}
+          <span class="ilo--language-switcher--link--wrap">
+            <a href="{{mainlink.url}}" class="ilo--language-switcher--link">{{mainlink.label}}</a>
+          </span>
+        {% endif %}
+        {% if languagecontextmenu.links is not empty %}
+          <button class="ilo--language-switcher--button" type="button">
+          {{languagelabel}}
+          </button>
+          {% include '@components/contextmenu/contextmenu.twig' with {
+            links: languagecontextmenu.links,
+            prefix: prefix
+          }
+        %}
+        {% endif %}
+      </div> <!-- /.ilo--language-switcher--wrap -->
+    </div> <!-- /.ilo--language-switcher -->
+    <button class="ilo--header--menu">Menu</button>
+  </div> <!-- /.ilo--header--utility-bar -->
+
+  <div class="ilo--header--navigation">
+    <div class="ilo--header--inner">
+      <div class="ilo--mobile--nav">
+        <div class="ilo--mobile--nav--logo">
+          <a href="{{siteurl}}" class="ilo--header--logo-link">
+            <img class="ilo--header--logo" src="{{mobilelogo.image}}" alt="{{mobilelogo.alt}}">
+          </a>
+          <button class="ilo--header--menu--close">{{menucloselabel}}</button>
+        </div> <!-- /.ilo--mobile--logo -->
+      {% if languagecontextmenu.links is not empty %}
+        <div class="ilo--mobile--nav--language--switcher">
+          <button class="ilo--mobile--nav--language--switcher--button" type="button">{{languagelabel}}</button>
+        </div> <!-- /.ilo--mobile--nav--language--switcher -->
+        <div class="ilo--mobile--nav--language--select">
+          <div class="ilo--header--inner">
+            <div class="ilo--mobile--subnav--menu">
+              <button class="ilo--mobile--subnav--back" type="button">{{subnav.mobilebacklabel}}</button>
+              <button class="ilo--header--menu--close">{{subnav.mobilecloselabel}}</button>
+              <h6 class="ilo--mobile--subnav--label">{{languagelabel}}</h6>
+            </div> <!-- /ilo--mobile--subnav--menu -->
+            <ul class="ilo--nav--set">
+              {% for item in languagecontextmenu.links %}
+                <li class="ilo--nav--items">
+                  <a href="{{item.url}}" class="ilo--nav--link ilo--nav--language">{{item.label}}</a>
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+      {% endif %}
+      </div> <!-- /.ilo--mobile--nav -->
+      <nav class="ilo--nav" aria-labelledby="primary-navigation">
+        <h2 class="ilo--nav--label" id="primary-navigation">{{primarynav.navlabel}}</h2>
+        <ul class="ilo--nav--set">
+          {% for item in primarynav.items %}
+            <li class="ilo--nav--items">
+              <a href="{{item.link}}" class="ilo--nav--link">{{item.label}}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      </nav>
+</header>

package/dist/components/localnav/localnav.wingsuit.yml

@@ -0,0 +1,88 @@
+localnav:
+  namespace: Components/Navigation
+  use: "@components/localnav/localnav.twig"
+  label: Local nav
+  description: The Local nav component
+  fields:
+    background:
+      type: string
+      label: Background
+      description: Override color for the background
+      preview: "#1E2DBE"
+    logo:
+      type: object
+      label: Logo
+      description: Logo for the nav
+      required: true
+      preview:
+        image: "/brand-assets/logo_en_horizontal_white.svg"
+        alt: Logo
+    siteurl:
+      type: string
+      label: Site url
+      description: home url for the website
+      required: true
+      preview: "https://www.ilo.org/"
+    tagline:
+      type: object
+      label: Site tagline
+      description: Tagline for the site
+      preview:
+        tag: Advancing social justice, promoting decent work
+        small: ILO is a specialized agency of the United Nations
+    menulabel:
+      type: string
+      label: Menu Label
+      description: Label for the menu
+      preview: Menu
+    menucloselabel:
+      type: string
+      label: Menu Close Label
+      description: Close Label for the menu
+      preview: Close
+    primarynav:
+      type: object
+      label: Primary Local nav
+      description: Local nav for the primary menu
+      preview:
+        navlabel: Primary Local nav
+        mobilecloselabel: Close
+        items:
+          - link: "https://www.ilo.org"
+            label: Menu Item 1
+          - link: "https://www.ilo.org"
+            label: Menu Item 2
+          - link: "https://www.ilo.org"
+            label: Menu Item 3
+          - link: "https://www.ilo.org"
+            label: Menu Item 4
+    mainlink:
+      type: object
+      label: Main link object
+      description: Link object for back to main site link
+      preview:
+        url: "https://www.ilo.org/"
+        label: "Go to main website"
+    languagelabel:
+      type: string
+      label: Language Label
+      description: Label for the language switcher
+      preview: English
+    languagecontextmenu:
+      type: object
+      label: Language Context Menu
+      description: The Language Context Menu receives a list of urls with labels
+      preview:
+        links:
+          - label: Link One
+            url: "http://www.google.com"
+          - label: Link Two
+            url: "http://www.google.com"
+          - endsection: "true"
+            label: Link Three Ends A Section
+            url: "http://www.google.com"
+          - label: Link Four
+            url: "http://www.google.com"
+          - label: Link Five Is Slightly Longer
+            url: "http://www.google.com"
+  visibility: storybook

package/dist/components/logo/logo.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--logo--visibility--hidden{visibility:hidden}.ilo--logo--size--fluid{width:100%;height:auto}.ilo--logo--theme--light{--logo-theme-color:#1e2dbe}.ilo--logo--theme--dark{--logo-theme-color:#fff}.ilo--logo--link{all:unset;cursor:pointer}.ilo--logo--image{height:100%;width:100%}.ilo--logo--sub-brand{--lockup-height:calc(var(--logo-image-height) * 0.703);--lockup-bottom-offset:calc(var(--lockup-height) * 0.05);color:var(--logo-theme-color);font-size:var(--logo-font-size);line-height:var(--logo-font-size);font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;display:inline-flex;justify-content:flex-start;align-items:center}.ilo--logo--sub-brand--image{height:100%;width:50%}.ilo--logo--sub-brand--lock-up{position:relative;display:flex;height:var(--lockup-height);flex-flow:row nowrap;align-items:center;justify-content:flex-start;width:50%;bottom:var(--lockup-bottom-offset)}.ilo--logo--sub-brand--lock-up--separator{padding:0 calc(var(--logo-image-height) * .25);height:100%;display:inline-block;line-height:0;overflow-y:hidden}.ilo--logo--sub-brand--lock-up--separator:before{content:"";position:relative;display:inline-block;height:100%;border-right:calc(var(--logo-image-height) * .033) solid var(--logo-theme-color);width:0}

package/dist/components/logogrid/logogrid.css

@@ -0,0 +1 @@
+.ilo--logo-grid--logos{display:flex;flex-flow:row wrap;grid-gap:.857449089rem}.ilo--logo-grid--link{text-decoration:none;transition:background-color .2s ease-in-out}.ilo--logo-grid__theme__dark .ilo--logo-grid--link:hover,.ilo--logo-grid__theme__light .ilo--logo-grid--link:hover{background-color:#ebf5fd}.ilo--logo-grid--item{display:flex;align-items:center;justify-content:center;height:7.18113612rem;flex:100%}@media screen and (min-width:414px){.ilo--logo-grid--item{flex:0 0 12.7545551983rem}}.ilo--logo-grid__theme__light .ilo--logo-grid--item{background-color:#edf0f2}.ilo--logo-grid__theme__dark .ilo--logo-grid--item{background-color:#fff}.ilo--logo-grid--item img{width:auto;height:auto;max-width:8.038585209rem;max-height:2.679528403rem}

package/dist/components/logogrid/logogrid.twig

@@ -0,0 +1,17 @@
+<div class="ilo--logo-grid ilo--logo-grid__theme__{{ theme }}">
+  <div class="ilo--logo-grid--logos">
+    {% for logo in logos %}
+      {% if logo.url %}
+        <a href="{{ logo.url }}" class="ilo--logo-grid--item ilo--logo-grid--link">
+      {% else %}
+        <div class="ilo--logo-grid--item">
+      {% endif %}
+        <img src="{{ logo.src }}" alt="{{ logo.label }}" class="ilo--logo-grid--logo__image">
+      {% if logo.url %}
+        </a>
+      {% else %}
+        </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+</div>

package/dist/components/logogrid/logogrid.wingsuit.yml

@@ -0,0 +1,45 @@
+logogrid:
+  namespace: Components/Brand
+  use: "@components/logogrid/logogrid.twig"
+  label: Logo Grid
+  description: The Logo Grid component renders a series of logos representing a group of organizations. It can be shown on a light or dark background.
+  settings:
+    theme:
+      type: select
+      label: Theme
+      description: The theme of the component
+      default: light
+      options:
+        light: Light
+        dark: Dark
+      preview: "light"
+  fields:
+    logos:
+      type: object
+      label: Logos
+      description: Logos to display
+      required: true
+      preview:
+        - label: "International Labour Organization"
+          src: "/images/logo_en_horizontal_blue.svg"
+          url: "https://www.ilo.org/"
+
+        - label: "Food and Agriculture Organization"
+          src: "/images/fao-logo.svg"
+          url: "https://www.fao.org"
+
+        - label: "World Health Organization"
+          src: "/images/who-logo.svg"
+          url: "https://www.who.int/"
+
+        - label: "World Food Programme"
+          src: "/images/wfp-logo.svg"
+          url: "https://www.wfp.org/"
+
+        - label: "UNICEF"
+          src: "/images/unicef-logo.png"
+          url: "https://www.unicef.org/"
+
+        - label: "UN Refugees"
+          src: "/images/unhcr-logo.svg"
+          url: "https://www.unhcr.org/"

package/dist/components/modal/modal.behavior.js

@@ -0,0 +1 @@
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";function e(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function t(t,n){for(var i=0;i<n.length;i++){var r=n[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,e(r.key),r)}}var n="click",i="keydown",r=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.element=t,this.init()},(r=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){return this.OpenButton=this.element.querySelector(".modal--open"),this.CloseButton=this.element.querySelector(".modal--close"),this}},{key:"setupHandlers",value:function(){return this.OpenButtonHandler=this.openButtonClick.bind(this),this.CloseHandler=this.closeButtonClick.bind(this),this.KeyPressHandler=this.keyPress.bind(this),this}},{key:"enable",value:function(){var e=this;return this.OpenButton.addEventListener(n,(function(){return e.OpenButtonHandler()})),this.CloseButton.addEventListener(n,(function(){return e.CloseHandler()})),this}},{key:"openButtonClick",value:function(){var e=this;return this.element.classList.add("show"),setTimeout((function(){e.element.classList.add("fadein")}),125),window.addEventListener(i,(function(t){return e.KeyPressHandler(t)})),this}},{key:"closeButtonClick",value:function(){var e=this;return this.element.classList.remove("fadein"),setTimeout((function(){e.element.classList.remove("show")}),125),window.removeEventListener(i,(function(t){return e.KeyPressHandler(t)})),this}},{key:"keyPress",value:function(e){return"Escape"===e.key&&this.closeButtonClick(),this}}])&&t(e.prototype,r),o&&t(e,o),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,r,o}();Drupal.behaviors.modal={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Modal"]'),(function(e){e.dataset.jsProcessed||(new r(e),e.dataset.jsProcessed=!0)}))}}}));

package/dist/components/modal/modal.css

@@ -0,0 +1 @@
+.ilo--modal--wrapper{display:none}.ilo--modal--wrapper>*{opacity:0}.ilo--modal.show .ilo--modal--wrapper{display:block;height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:10001}.ilo--modal.show.fadein .ilo--modal--wrapper>*{opacity:1;transition-delay:125ms;transition-property:opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--modal--background{background-color:rgba(0,0,0,.85);height:100%;left:0;position:absolute;top:0;width:100%;z-index:10002}.ilo--modal--contents{background-color:#fff;left:0;position:absolute;margin:0 4.2%;max-height:96%;overflow:scroll;top:50%;transform:translateY(-50%);width:91.4%;z-index:10003}.ilo--modal .modal--close{height:2.1436227224rem;right:0;position:absolute;top:0;width:2.1436227224rem;z-index:10004}.ilo--modal .modal--close .ilo--icon{left:.1607717042rem;top:.1607717042rem}@media screen and (min-width:610px){.ilo--modal--contents{margin:0 23.2%;width:53.58%}}@media screen and (min-width:1024px){.ilo--modal--contents{margin:0 18.05%;width:63.888%}}.ilo--modal.storybook{height:400px;width:100%}

package/dist/components/modal/modal.twig

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

package/dist/components/modal/modal.wingsuit.yml

@@ -0,0 +1,61 @@
+modal:
+  use: "@components/modal/modal.twig"
+  namespace: Components/Feedback
+  label: Modal
+  description: The Modal displays a div containing a button which is visible on page load. On click of this button, a modal dialog is opened which displays a semitransparent fixed-position background and the contents of the chosen component.
+  fields:
+    closebutton:
+      type: object
+      label: Closee Button
+      description: Label and settings for the "close" button
+      preview:
+        size: "medium"
+        type: "tertiary"
+        label: "Close Button"
+        icon: close
+        iconPos: center
+        icononly: true
+        className: "modal--close"
+      required: true
+    component:
+      type: string
+      label: Component
+      description: The component to add to this modal
+      preview: "image"
+      required: true
+    modaldata:
+      type: object
+      label: Modal Data
+      description: The fields needed to populate the component being displayed by the modal
+      preview:
+        alt: "My alt text"
+        caption: "my image caption"
+        credit: "Photo: copyright 2022 Person S. Name"
+        url:
+          - breakpoint: 0
+            src: "https://place-hold.it/400x300?text=SmallBreakpointImage"
+          - breakpoint: 800
+            src: "https://place-hold.it/800x600?text=MediumBreakpointImage"
+          - breakpoint: 1200
+            src: "https://place-hold.it/1200x900?text=LargeBreakpointImage"
+          - breakpoint: 1440
+            src: "https://place-hold.it/1600x1200?text=LargestBreakpointImage"
+      required: true
+    openbutton:
+      type: object
+      label: Open Button
+      description: The label and settings for the button that will open the modal
+      preview:
+        size: "large"
+        type: "primary"
+        label: "Open Button"
+        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