@ilo-org/twig 0.16.3 → 0.17.1

package/dist/components/fieldset/fieldset.twig

@@ -0,0 +1,70 @@
+{# fieldset.twig #}
+
+{% set baseClass = prefix ~ "--fieldset" %}
+{% set wrapClass = baseClass ~ "--wrap__" ~ wrap %}
+{% set directionClass = baseClass ~ "--direction__" ~ direction %}
+{% set helperClass = baseClass ~ "--helper" %}
+{% set errorClass = baseClass ~ "__error" %}
+{% set disabledClass = baseClass ~ "__disabled" %}
+
+{% set fieldsetClasses = [fieldsetClass, baseClass, wrapClass, directionClass, class] %}
+{% if disabled %}
+	{% set fieldsetClasses = fieldsetClasses|merge([disabledClass]) %}
+{% endif %}
+
+{% set helperClasses = [helperClass] %}
+{% if hasError %}
+	{% set helperClasses = helperClasses|merge([errorClass]) %}
+{% endif %}
+
+{% set showHelper = helper or hasError %}
+{% set helperMessage = hasError ? errorMessage : helper %}
+
+<fieldset class="{{ fieldsetClasses|join(' ') }}" {% if style %} style="{{ style }}" {% endif %}>
+	{% if legend or helper %}
+		<div class="{{ baseClass ~ '--legend-wrapper' }}">
+			{% if legend %}
+				<legend class="{{ baseClass ~ '--legend' }}">
+					{{ legend }}
+					{% if tooltip %}
+						{% include '@components/tooltip/tooltip.twig' with {
+							"icon": true,
+							"label": tooltip,
+							"theme": "dark",
+							"prefix": prefix,
+							"tooltipId": tooltip
+						} only %}
+					{% endif %}
+				</legend>
+			{% endif %}
+			{% if showHelper %}
+				<span class="{{ helperClasses|join(' ') }}">{{ helperMessage }}</span>
+			{% endif %}
+		</div>
+	{% endif %}
+	<div class="{{ baseClass ~ '--elements' }}">
+		{% for field in fields %}
+			{% if field.type == "textinput" %}
+				{% include "@components/textinput/textinput.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "checkbox" %}
+				{% include "@components/checkbox/checkbox.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "datepicker" %}
+				{% include "@components/datepicker/datepicker.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "dropdown" %}
+				{% include "@components/dropdown/dropdown.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "fileupload" %}
+				{% include "@components/fileupload/fileupload.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "numberpicker" %}
+				{% include "@components/numberpicker/numberpicker.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "radio" %}
+				{% include "@components/radio/radio.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "search" %}
+				{% include "@components/search/search.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "textarea" %}
+				{% include "@components/textarea/textarea.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "toggle" %}
+				{% include "@components/toggle/toggle.twig" with field|merge({ "prefix": prefix }) only %}
+			{% endif %}
+		{% endfor %}
+	</div>
+</fieldset>

package/dist/components/file-upload/file-upload.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--file-upload--input{order:3;background-color:#fff;border:1.5px solid #b8c4cc;color:#230050;content:attr(data-label);display:inline-block;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;border-bottom-left-radius:2px;border-bottom-right-radius:2px;border-top-left-radius:2px;border-top-right-radius:2px;padding:7px 18px;font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--file-upload--input input{visibility:hidden;color:transparent;width:0}.ilo--form__theme__dark .ilo--file-upload--input{color:#230050}.ilo--file-upload--input:hover{background-color:#ebf5fd;border:1.5px solid #1e2dbe;cursor:pointer;color:#1e2dbe;outline:0}.ilo--file-upload--input:focus{background-color:#fff;border:1.5px solid #1e2dbe;color:#230050;outline:0}.ilo--file-upload--input:focus-visible{outline:0}.ilo--file-upload--input:active{background-color:#1e2dbe;border:2px solid #1e2dbe;color:#ebf5fd}.ilo--file-upload--input:disabled{opacity:.45;pointer-events:none}.error .ilo--file-upload--input,.ilo--file-upload--input.error,.ilo--file-upload--input:invalid{background-color:#fff;border-bottom:.1071811361rem solid #b8c4cc;border-left:.1607717042rem solid #c8303c;border-right:.1071811361rem solid #b8c4cc;border-top:.1071811361rem solid #b8c4cc}.ilo--file-upload--list{order:4;display:flex;flex-flow:column;padding-top:.4287245445rem;gap:.4287245445rem}.ilo--file-upload--list-item{display:block;background-color:#edf0f2;border-bottom:.1071811361rem solid #edf0f2;border-left:.1607717042rem solid #230050;border-right:.1071811361rem solid #edf0f2;border-top:.1071811361rem solid #edf0f2;box-sizing:border-box;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:-.02em;line-height:21.6px;height:2.5723472669rem;outline:0;padding:.6430868167rem .6430868167rem .857449089rem}

package/dist/components/fileupload/fileupload.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 r=n.call(e,t||"default");if("object"!=typeof r)return r;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 r=0;r<n.length;r++){var o=n[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,e(o.key),o)}}function n(e){return function(e){if(Array.isArray(e))return r(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o="change",i=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=this.element.dataset.prefix,this.init()},r=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){return this.container=this.element.parentElement.parentElement,this.formControl=this.container.parentElement,this}},{key:"setupHandlers",value:function(){return this.onChange=this.onChange.bind(this),this}},{key:"enable",value:function(){var e=this;return this.element.addEventListener(o,(function(t){return e.onChange(t)})),this}},{key:"formatBytes",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;if(!+e)return"0 Bytes";var n=t<0?0:t,r=Math.floor(Math.log(e)/Math.log(1024));return"".concat(parseFloat((e/Math.pow(1024,r)).toFixed(n))," ").concat(["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][r])}},{key:"onChange",value:function(){var e=this,t="".concat(this.prefix,"--file-upload--list"),r=this.formControl.querySelector(".".concat(t));r&&r.remove(),(r=document.createElement("ul")).classList.add(t),this.formControl.appendChild(r);var o="";return n(this.element.files).forEach((function(t){var n=e.formatBytes(t.size);o+=e.template(t.name,n)})),r.innerHTML=o,this}},{key:"template",value:function(e,t){return'<li class="ilo--file-upload--list-item">'.concat(e," (").concat(t,")</li>")}}],r&&t(e.prototype,r),i&&t(e,i),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,r,i}();Drupal.behaviors.fileupload={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="FileUpload"]'),(function(e){new i(e)}))}}}));

package/dist/components/fileupload/fileupload.twig

@@ -0,0 +1,20 @@
+{# fileupload.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = prefix ~ '--file-upload' %}
+{% set fileUploadClasses = [baseClass] %}
+{% set inputClass = baseClass ~ '--input' %}
+
+{% if error %}
+	{% set fileUploadClasses = fileUploadClasses|merge(['error']) %}
+{% endif %}
+
+{% block formfield %}
+	<div class="{{ fileUploadClasses|join(' ') }}">
+		<label class="{{ inputClass }}">
+			{{ placeholder }}
+			<input id="{{ id|default(name) }}" name="{{ name }}" {% if disabled %} disabled {% endif %} {% if multiple %} multiple {% endif %} placeholder="{{ placeholder }}" {% if required %} required {% endif %} type="file" data-label="{{ placeholder }}" aria-describedby="{{ ariaDescribedBy }}" {% if accept %} accept="{{ accept }}" {% endif %} data-loadcomponent="FileUpload" data-prefix="ilo"/>
+		</label>
+	</div>
+{% endblock %}

package/dist/components/fileupload/fileupload.wingsuit.yml

@@ -0,0 +1,94 @@
+fileupload:
+  namespace: Components/Forms
+  use: "@components/fileupload/fileupload.twig"
+  label: File Upload
+  description: The FileUpload component allows users to select and upload files
+    from their device to a web application. It displays a list of the
+    files to upload once they've been selected.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: Upload your files here
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+      preview: Max docs size 10MB
+    id:
+      type: text
+      label: ID
+      description: The ID of the text input.
+    name:
+      type: text
+      label: Name
+      description: The name of the text input.
+    placeholder:
+      type: text
+      label: Placeholder
+      description: The placeholder of the text input.
+      preview: Select files
+    class:
+      type: text
+      label: Class
+      description: The class of the text input.
+      preview: textinput
+      default: ""
+    accept:
+      type: text
+      label: Accept
+      description: The accept attribute of the text input.
+      preview: ".pdf,.doc, .docx, .jpg, .png"
+  settings:
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "top"
+      default: "top"
+      options:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
+      type: select
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: "medium"
+      default: "medium"
+      options:
+        small: small
+        medium: medium
+        large: large
+    multiple:
+      type: boolean
+      label: Multiple
+      description: If the user can select multiple files.
+      preview: "false"
+      options:
+        "true": "true"
+        "false": "false"
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the text input.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the text input.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false

package/dist/components/footer/footer.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--footer{border-bottom:.1607717042rem solid #b8c4cc;background-color:#230050;position:relative;width:100%;overflow:hidden}.ilo--footer--main{padding:2.1436227224rem 1.7148981779rem 2.5723472669rem;position:relative}.ilo--footer--main:before{background-size:contain;background-repeat:no-repeat;content:"";height:100%;min-width:409.5px;position:absolute;width:28.8%;z-index:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 409.5 236'%3E%3Cpath fill='%231E2DBE' d='M409.5 236c-1.7-.6-3.5-1.1-5.1-2-5.3-2.9-10.5-5.9-15.7-9-4.8-2.8-9.5-5.8-14.3-8.7-4.3-2.6-8.5-5.1-12.9-7.5-4.9-2.7-10-5.2-14.9-8-3.8-2.2-7.4-4.8-11.2-7.1-5.7-3.3-11.6-6.4-17.3-9.7-3.9-2.2-7.6-4.6-11.5-6.9-4-2.3-8.1-4.4-12-6.7-3.8-2.2-7.5-4.5-11.3-6.7-2.4-1.4-4.9-2.5-7.3-3.9-2.8-1.6-5.5-3.3-8.2-4.9-3.8-2.3-7.5-4.6-11.4-6.8-3.9-2.3-7.9-4.5-11.9-6.8-6.1-3.5-12.2-6.8-18.2-10.4-4.8-2.8-9.4-5.8-14.2-8.5-4.8-2.8-9.8-5.3-14.6-8.1-3.6-2.1-7.2-4.3-10.8-6.4-5.9-3.5-11.8-6.9-17.7-10.3-4.8-2.8-9.6-5.7-14.4-8.5-3.8-2.2-7.8-4.4-11.6-6.6-3-1.7-5.9-3.6-8.9-5.4-3-1.8-6.2-3.4-9.2-5.1-3.9-2.2-7.8-4.4-11.6-6.6-4.1-2.4-8.1-4.8-12.2-7.2-5.8-3.4-11.5-6.9-17.3-10.2-4.9-2.8-9.9-5.4-14.7-8.2-3.7-2.1-7.3-4.5-11-6.6-4.9-2.9-9.8-5.6-14.7-8.4-4.7-2.7-9.4-5.6-14.2-8.3-5-2.9-10-5.7-15-8.6C10.3 5.6 6.6 3.3 2.8 1 2 .5 1 .3 0 0h409.5v236z'/%3E%3C/svg%3E");bottom:0;right:0;transform:scaleY(-1)}.ilo--footer--main:after{content:"";border-bottom:.3215434084rem solid #fa3c4b;width:200vw;position:absolute;bottom:0;left:-100vw}.ilo--footer--main>*{position:relative;z-index:1}.ilo--footer--logo{height:2.5723472669rem;width:auto}.ilo--footer--secondary{background-color:#edf0f2;padding:1.7148981779rem .857449089rem 0;min-height:3.0010718114rem}.ilo--footer--secondary [class*=container]{padding:0}.ilo--footer--headline{color:#fff;font-weight:700;font-size:16px;line-height:23.36px;line-height:1.1575562701rem;margin-bottom:.0895963823rem;margin-top:1.0718113612rem}.ilo--footer--headline,.ilo--footer--subhead{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;letter-spacing:normal}.ilo--footer--subhead{color:#bedcfa;font-weight:500;margin-top:.2143622722rem;font-size:11.94px;line-height:16.24px;line-height:.9946409432rem;margin-bottom:2.5723472669rem}.ilo--footer .address{margin-bottom:1.0718113612rem}.ilo--footer .address--line{color:#fff;font-size:11.94px;letter-spacing:normal;line-height:16.24px;margin-bottom:.12089916rem}.ilo--footer .connect{margin:2.5723472669rem 0 2.1436227224rem}.ilo--footer .social--links{margin-bottom:2.1436227224rem}.ilo--footer .legal,.ilo--footer .secondarylinks{color:#6d6d6d;display:inline;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-size:11.94px;letter-spacing:normal;line-height:16.24px}.ilo--footer .secondarylinks--list,.ilo--footer .secondarylinks--list--item{display:inline;list-style:none}.ilo--footer .secondarylinks--list--item:before{content:"|";margin:.2143622722rem}.ilo--footer .secondarylinks--list--item a{color:#6d6d6d}.ilo--footer .secondarylinks--list--item a,.ilo--footer .secondarylinks--list--item a:visited{transition-property:color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--footer .secondarylinks--list--item a:visited{color:#960a55}.ilo--footer .secondarylinks--list--item a:hover{color:#1e2dbe;transition-property:color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--footer .secondarylinks--list--item a:active,.ilo--footer .secondarylinks--list--item a:focus{color:#230050;outline:0;transition-property:color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--footer .anchorlink{display:flex;flex-flow:row nowrap;color:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-size:16px;letter-spacing:-.02em;line-height:21.6px;position:relative;text-decoration:none;width:max-content;justify-content:center;border-bottom:.1071811361rem solid #edf0f2;margin:.6430868167rem auto 0;padding:.857449089rem}.ilo--footer .anchorlink:after{background-repeat:no-repeat;content:"";height:1.2861736334rem;position:relative;margin-left:.4287245445rem;bottom:.1607717042rem;transform:rotateX(180deg);transform-origin:center;width:1.2861736334rem;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='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E")}.ilo--footer .anchorlink:hover{background:#ebf5fd;border-bottom:.1071811361rem solid #1e2dbe;color:#1e2dbe;cursor:pointer;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--footer .anchorlink:hover:after{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='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E")}@media screen and (min-width:610px){.ilo--footer--main{display:grid;grid-template-columns:minmax(0,50%) minmax(0,50%);gap:0 3.4297963558rem;grid-template-areas:"a b" "a c" "a d" "a e";align-content:start;align-items:start;padding:2.1436227224rem 1.0718113612rem 5.1446945338rem}.ilo--footer .site--info{grid-area:a}.ilo--footer .address{grid-area:b}.ilo--footer .connect{grid-area:d;margin-bottom:0}.ilo--footer .links{grid-area:c}.ilo--footer .subscribe{grid-area:e}.ilo--footer--secondary{padding-top:.857449089rem;padding-bottom:.857449089rem;position:relative;z-index:1}.ilo--footer .anchorlink{bottom:0}}@media screen and (min-width:1024px){.ilo--footer:after{background-size:contain;background-repeat:no-repeat;content:"";height:100%;min-width:409.5px;position:absolute;width:28.8%;z-index:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 409.5 236'%3E%3Cpath fill='%231E2DBE' d='M409.5 236c-1.7-.6-3.5-1.1-5.1-2-5.3-2.9-10.5-5.9-15.7-9-4.8-2.8-9.5-5.8-14.3-8.7-4.3-2.6-8.5-5.1-12.9-7.5-4.9-2.7-10-5.2-14.9-8-3.8-2.2-7.4-4.8-11.2-7.1-5.7-3.3-11.6-6.4-17.3-9.7-3.9-2.2-7.6-4.6-11.5-6.9-4-2.3-8.1-4.4-12-6.7-3.8-2.2-7.5-4.5-11.3-6.7-2.4-1.4-4.9-2.5-7.3-3.9-2.8-1.6-5.5-3.3-8.2-4.9-3.8-2.3-7.5-4.6-11.4-6.8-3.9-2.3-7.9-4.5-11.9-6.8-6.1-3.5-12.2-6.8-18.2-10.4-4.8-2.8-9.4-5.8-14.2-8.5-4.8-2.8-9.8-5.3-14.6-8.1-3.6-2.1-7.2-4.3-10.8-6.4-5.9-3.5-11.8-6.9-17.7-10.3-4.8-2.8-9.6-5.7-14.4-8.5-3.8-2.2-7.8-4.4-11.6-6.6-3-1.7-5.9-3.6-8.9-5.4-3-1.8-6.2-3.4-9.2-5.1-3.9-2.2-7.8-4.4-11.6-6.6-4.1-2.4-8.1-4.8-12.2-7.2-5.8-3.4-11.5-6.9-17.3-10.2-4.9-2.8-9.9-5.4-14.7-8.2-3.7-2.1-7.3-4.5-11-6.6-4.9-2.9-9.8-5.6-14.7-8.4-4.7-2.7-9.4-5.6-14.2-8.3-5-2.9-10-5.7-15-8.6C10.3 5.6 6.6 3.3 2.8 1 2 .5 1 .3 0 0h409.5v236z'/%3E%3C/svg%3E");background-position:100% 0;bottom:auto;top:0;right:0;transform:scaleY(1)}.ilo--footer--main{display:grid;grid-template-columns:.25fr .33fr .09fr .33fr;grid-template-rows:auto auto;gap:0 3.4297963558rem;grid-template-areas:"a b . d" "a c . e";padding-top:2.1436227224rem;padding-bottom:5.1446945338rem}.ilo--footer--main:before{content:none}.ilo--footer .connect{grid-area:d;margin:0}.ilo--footer .subscribe{height:100%;display:flex;align-items:flex-start;justify-content:flex-start;flex-flow:column;top:8px}.ilo--footer .ilo--button{align-self:start;justify-self:start}.ilo--footer .address{margin-bottom:1.0718113612rem}.ilo--footer--secondary{padding-top:.857449089rem;padding-bottom:.857449089rem;position:relative}.ilo--footer--secondary [class*=container]{display:flex;flex-flow:row;justify-content:space-between;align-items:center}.ilo--footer--secondary--details{display:flex;flex-flow:row;justify-content:flex-start;align-items:center}.ilo--footer--secondary .secondarylinks--list--item:before{margin:.4287245445rem}.ilo--footer .anchorlink{margin:0;border:none;padding:.2143622722rem}.ilo--footer .anchorlink:hover{margin-bottom:-.1071811361rem}}.ilo--footer[dir=rtl] .ilo--footer--main:before{background-size:contain;background-repeat:no-repeat;content:"";height:100%;min-width:409.5px;position:absolute;width:28.8%;z-index:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 409.5 236'%3E%3Cpath fill='%231E2DBE' d='M409.5 236c-1.7-.6-3.5-1.1-5.1-2-5.3-2.9-10.5-5.9-15.7-9-4.8-2.8-9.5-5.8-14.3-8.7-4.3-2.6-8.5-5.1-12.9-7.5-4.9-2.7-10-5.2-14.9-8-3.8-2.2-7.4-4.8-11.2-7.1-5.7-3.3-11.6-6.4-17.3-9.7-3.9-2.2-7.6-4.6-11.5-6.9-4-2.3-8.1-4.4-12-6.7-3.8-2.2-7.5-4.5-11.3-6.7-2.4-1.4-4.9-2.5-7.3-3.9-2.8-1.6-5.5-3.3-8.2-4.9-3.8-2.3-7.5-4.6-11.4-6.8-3.9-2.3-7.9-4.5-11.9-6.8-6.1-3.5-12.2-6.8-18.2-10.4-4.8-2.8-9.4-5.8-14.2-8.5-4.8-2.8-9.8-5.3-14.6-8.1-3.6-2.1-7.2-4.3-10.8-6.4-5.9-3.5-11.8-6.9-17.7-10.3-4.8-2.8-9.6-5.7-14.4-8.5-3.8-2.2-7.8-4.4-11.6-6.6-3-1.7-5.9-3.6-8.9-5.4-3-1.8-6.2-3.4-9.2-5.1-3.9-2.2-7.8-4.4-11.6-6.6-4.1-2.4-8.1-4.8-12.2-7.2-5.8-3.4-11.5-6.9-17.3-10.2-4.9-2.8-9.9-5.4-14.7-8.2-3.7-2.1-7.3-4.5-11-6.6-4.9-2.9-9.8-5.6-14.7-8.4-4.7-2.7-9.4-5.6-14.2-8.3-5-2.9-10-5.7-15-8.6C10.3 5.6 6.6 3.3 2.8 1 2 .5 1 .3 0 0h409.5v236z'/%3E%3C/svg%3E");bottom:0;left:0;transform:scaleY(-1) scaleX(-1)}.ilo--footer[dir=rtl] .ilo--footer .secondarylinks--list--item:before{content:none}.ilo--footer[dir=rtl] .ilo--footer .secondarylinks--list--item:after{content:"|";margin:.2143622722rem}@media screen and (min-width:610px){.ilo--footer[dir=rtl] .ilo--footer--main{grid-template-areas:"b a" "c a" "d a" "e a"}}@media screen and (min-width:1024px){.ilo--footer[dir=rtl] .ilo--footer:after{background-size:contain;background-repeat:no-repeat;content:"";height:100%;min-width:409.5px;position:absolute;width:28.8%;z-index:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 409.5 236'%3E%3Cpath fill='%231E2DBE' d='M409.5 236c-1.7-.6-3.5-1.1-5.1-2-5.3-2.9-10.5-5.9-15.7-9-4.8-2.8-9.5-5.8-14.3-8.7-4.3-2.6-8.5-5.1-12.9-7.5-4.9-2.7-10-5.2-14.9-8-3.8-2.2-7.4-4.8-11.2-7.1-5.7-3.3-11.6-6.4-17.3-9.7-3.9-2.2-7.6-4.6-11.5-6.9-4-2.3-8.1-4.4-12-6.7-3.8-2.2-7.5-4.5-11.3-6.7-2.4-1.4-4.9-2.5-7.3-3.9-2.8-1.6-5.5-3.3-8.2-4.9-3.8-2.3-7.5-4.6-11.4-6.8-3.9-2.3-7.9-4.5-11.9-6.8-6.1-3.5-12.2-6.8-18.2-10.4-4.8-2.8-9.4-5.8-14.2-8.5-4.8-2.8-9.8-5.3-14.6-8.1-3.6-2.1-7.2-4.3-10.8-6.4-5.9-3.5-11.8-6.9-17.7-10.3-4.8-2.8-9.6-5.7-14.4-8.5-3.8-2.2-7.8-4.4-11.6-6.6-3-1.7-5.9-3.6-8.9-5.4-3-1.8-6.2-3.4-9.2-5.1-3.9-2.2-7.8-4.4-11.6-6.6-4.1-2.4-8.1-4.8-12.2-7.2-5.8-3.4-11.5-6.9-17.3-10.2-4.9-2.8-9.9-5.4-14.7-8.2-3.7-2.1-7.3-4.5-11-6.6-4.9-2.9-9.8-5.6-14.7-8.4-4.7-2.7-9.4-5.6-14.2-8.3-5-2.9-10-5.7-15-8.6C10.3 5.6 6.6 3.3 2.8 1 2 .5 1 .3 0 0h409.5v236z'/%3E%3C/svg%3E");top:0;left:0;transform:scaleY(1) scaleX(-1)}.ilo--footer[dir=rtl] .ilo--footer--main{grid-template-columns:.33fr .09fr .33fr .25fr;grid-template-areas:"d . b a" "e . c a"}.ilo--footer[dir=rtl] .ilo--footer--main:before{content:none}.ilo--footer[dir=rtl] .ilo--footer .connect{grid-template-columns:60%,minmax(0,40%)}.ilo--footer[dir=rtl] .ilo--footer .ilo--button{justify-self:end}}

package/dist/components/footer/footer.twig

@@ -0,0 +1,63 @@
+{# footer.twig #}
+<footer class="ilo--footer">
+	<div class="ilo--footer--main ilo--container">
+		<div class="site--info">
+			<img class="ilo--footer--logo" src="{{logo.url}}" alt="{{logo.alt}}"/>
+			<h3 class="ilo--footer--headline">{{tagline}}</h3>
+			<h4 class="ilo--footer--subhead">{{subtagline}}</h4>
+		</div>
+		{% if address %}
+			<div class="address">
+				{% for line in address %}
+					<p class="address--line">{{line}}</p>
+				{% endfor %}
+			</div>
+		{% endif %}
+		{% if linkgroup %}
+			<nav class="links">
+				{% include '@components/linklist/linklist.twig' with {linkgroup: linkgroup, theme: 'dark'} %}
+			</nav>
+		{% endif %}
+		{% if socialmedia %}
+			<div class="connect">
+				<div class="social--links">
+					{% include '@components/socialmedia/socialmedia.twig' with {
+            theme: "dark",
+            headline: socialmedia.headline,
+            icons: socialmedia.icons,
+          } %}
+				</div>
+			</div>
+		{% endif %}
+		{% if subscribe %}
+			<div class="subscribe">
+				{% include '@components/button/button.twig' with {label: subscribe.label, url: subscribe.url, type: 'primary', size: 'large', target: '_blank'} %}
+			</div>
+		{% endif %}
+	</div>
+	<div class="ilo--footer--secondary">
+		<div class="ilo--container">
+			<div class="ilo--footer--secondary--details">
+				{% if legal %}
+					<div class="legal">
+						{{legal}}
+					</div>
+				{% endif %}
+				{% if secondarylinks %}
+					<nav class="secondarylinks">
+						<ul class="secondarylinks--list">
+							{% for link in secondarylinks %}
+								<li class="secondarylinks--list--item">
+									<a href="{{link.url}}" class="secondarylinks--list--link">{{link.label}}</a>
+								</li>
+							{% endfor %}
+						</ul>
+					</nav>
+				</div>
+			{% endif %}
+			{% if anchorlink %}
+				<a href="{{anchorlink.href}}" class="anchorlink">{{anchorlink.label}}</a>
+			{% endif %}
+		</div>
+	</div>
+</footer>

package/dist/components/footer/footer.wingsuit.yml

@@ -0,0 +1,106 @@
+footer:
+  namespace: Components/Navigation
+  use: "@components/footer/footer.twig"
+  label: Footer
+  description: A component for displaying a page's footer
+  fields:
+    logo:
+      type: object
+      label: action
+      description: A URL and alt text for the site logo
+      preview:
+        alt: "My alt text"
+        url: "https://www.ilo.org/wcmsp5/ilo/global/images/templates/ilo-logo.svg"
+      required: true
+    tagline:
+      type: string
+      label: tagline
+      description: the tagline for the site
+      preview: "Advancing social justice, promoting decent work"
+    subtagline:
+      type: string
+      label: subtagline
+      description: a sub-tagline for the site
+      preview: "ILO is a specialized agency of the United Nations"
+    address:
+      type: object
+      label: address
+      description: "any number of strings in an address"
+      preview:
+        - "International Labour Organization"
+        - "4 route des Morillons"
+        - "CH-1211 Genève 22"
+        - "Switzerland"
+    linkgroup:
+      type: object
+      label: links
+      description: "up to six links"
+      preview:
+        - links:
+            - label: "Contact us"
+              url: "https://www.ilo.org"
+            - label: "Contact us"
+              url: "https://www.ilo.org"
+            - label: "Contact us"
+              url: "https://www.ilo.org"
+    socialmedia:
+      type: object
+      label: social
+      description: "Links to social media"
+      preview:
+        headline: "Stay informed"
+        icons:
+          - icon: "twitter"
+            label: "Twitter"
+            url: "https://twitter.com/#!/ilo"
+          - icon: "facebook"
+            label: "Facebook"
+            url: "https://www.facebook.com/ilo.org"
+          - icon: "linkedin"
+            label: "LinkedIn"
+            url: "https://www.linkedin.com/company/international-labour-organization-ilo"
+          - icon: "instagram"
+            label: "Instagram"
+            url: "https://www.instagram.com/ilo.org/"
+          - icon: "tiktok"
+            label: "TikTok"
+            url: "https://www.tiktok.com/@ilo"
+          - icon: "flickr"
+            label: "Flickr"
+            url: "https://www.flickr.com/photos/ilopictures/albums"
+          - icon: "youtube"
+            label: "YouTube"
+            url: "https://www.youtube.com/channel/UCrlcu5KChYyHwXlIeD7oLUg"
+    subscribe:
+      type: object
+      label: subscribe
+      description: "a link to a subscribe form"
+      preview:
+        label: "Subscribe for updates"
+        url: "https://www.ilo.org"
+    legal:
+      type: string
+      label: legal
+      description: "a string with legal information"
+      preview: "© 1996-2022 International Labour Organization (ILO)"
+    secondarylinks:
+      type: object
+      label: secondarylinks
+      description: "up to six links"
+      preview:
+        - label: "Rights and permissions"
+          url: "http://www.cnn.com"
+        - label: "Privacy policy"
+          url: "http://www.bing.com"
+        - label: "Fraud alert"
+          url: "http://www.yahoo.com"
+        - label: "Disclaimer"
+          url: "http://www.askjeeves.com"
+    anchorlink:
+      type: object
+      label: anchorlink
+      description: "an anchor href and label for navigating to another section on the page"
+      preview:
+        label: "Back to top"
+        href: "#anchor"
+  visibility: storybook

package/dist/components/form/form.css

@@ -0,0 +1 @@
+.ilo--form{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;appearance:none;gap:1.7148981779rem}.ilo--form,.ilo--form__theme__light,.ilo--form__theme__light label,.ilo--form__theme__light p{color:#2d2d2d}.ilo--form__theme__dark,.ilo--form__theme__dark label,.ilo--form__theme__dark p{color:#edf0f2}.ilo--form__theme__dark legend{color:#ffcd2d}.ilo--form__disabled{opacity:.5;pointer-events:none}

package/dist/components/form/form.twig

@@ -0,0 +1,19 @@
+{# form.twig #}
+
+{% set baseClass = prefix ~ "--form" %}
+
+{% set formControlClass = [baseClass, class] %}
+
+<form class="{{ formControlClass|join(' ') }}" data-loadcomponent="Form" {%- for key, value in attributes|default({} ) -%} {{- ' ' ~ key ~ '="' ~ value|e('html_attr') ~ '"' -}} {%- endfor -%}>
+	{% if headline %}
+		<h2>{{ headline }}</h2>
+	{% endif %}
+	{% for fieldset in fieldsets %}
+		{% include "@components/form/fieldset.twig" with fieldset|merge({ "prefix": prefix }) only %}
+	{% endfor %}
+	{% if submit %}
+		{% include "@components/button/button.twig" with submit|merge({
+		"prefix": prefix, "kind": "submit" }) only
+	%}
+	{% endif %}
+</form>

package/dist/components/form/form.wingsuit.yml

@@ -0,0 +1,205 @@
+form:
+  namespace: Components/Forms
+  use: "@components/form/form.twig"
+  label: Form
+  description: The Form component provides users with a complete interface that combines all of the form elements in the design system together with a some configuration options for laying them out together.
+  visibility: storybook
+  fields:
+    headline:
+      type: string
+      label: Headline
+      description: The title of the form
+      required: false
+      preview: Request to attend the International Labour Conference
+    class:
+      type: string
+      label: Form class
+      description: The CSS class of the form
+      required: false
+      preview: my--form--class
+    attributes:
+      type: object
+      label: Attributes
+      description: A list of html attributes that you can attach to the form element
+      required: false
+      preview:
+        id: my--form--id
+        name: my--form--name
+        action: https://www.ilo.org
+        method: post
+    submit:
+      type: object
+      label: Submit button
+      description: Options to pass to the submit button if your form has one
+      preview:
+        label: Submit your info
+        type: primary
+        size: large
+        kind: submit
+    fieldsets:
+      type: object
+      label: Fieldsets
+      description: A group of form fields used to group related fields together. Each fieldset can have a legend and a list of form fields with a `type` property.
+      required: true
+      preview:
+        - legend: Personal information
+          wrap: wrap
+          direction: row
+          style: "width: 100%"
+          class: my--fieldset--class
+          tooltip: "Your data will be stored securely"
+          fields:
+            - type: textinput
+              name: first-name
+              label: First name
+              placeholder: Juan
+              labelPlacement: top
+              labelSize: small
+              style: "flex: 1 0 49%"
+              class: my--formfield--class
+            - type: textinput
+              name: last-name
+              label: Last name
+              placeholder: Martinez
+              labelPlacement: top
+              labelSize: small
+              style: "flex: 1 0 49%"
+              class: my--formfield--class
+        - legend: What world of work topics interest you?
+          direction: row
+          fields:
+            - type: checkbox
+              name: preference-1
+              label: Social Justice
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+              value: 1
+            - type: checkbox
+              name: preference-2
+              label: Decent work
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+              value: 2
+            - type: checkbox
+              name: preference-3
+              label: Ending child labour
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+              value: 3
+        - legend: Which committee will you be attending?
+          direction: row
+          fields:
+            - type: radio
+              name: priority-1
+              label: Credentials committee
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+              value: 1
+            - type: radio
+              name: priority-1
+              label: General Affairs Committee
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+              value: 2
+            - type: radio
+              name: priority-1
+              label: Finance Committee
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+              value: 3
+        - legend: Tell us more about you
+          direction: row
+          wrap: wrap
+          style: "width: 100%"
+          fields:
+            - type: dropdown
+              name: country
+              label: What country are you from?
+              labelPlacement: top
+              labelSize: small
+              class: my--formfield--class
+              style: "flex: 1 0 250px"
+              options:
+                - label: Switzerland
+                  value: CH
+                - label: Côte d'Ivoire
+                  value: CI
+                - label: Thailand
+                  value: TH
+                - label: United States
+                  value: US
+                - label: Zimbabwe
+                  value: ZW
+                - label: Afghanistan
+                  value: AF
+                - label: Åland Islands
+                  value: AX
+            - type: dropdown
+              name: country
+              label: Who will you be representing?
+              labelPlacement: top
+              labelSize: small
+              class: my--formfield--class
+              style: "flex: 1 0 250px"
+              options:
+                - label: Workers
+                  value: 1
+                - label: Employers
+                  value: 2
+                - label: Governments
+                  value: 3
+                - label: Other
+                  value: 4
+            - type: numberpicker
+              name: arrival-date
+              label: How many people are in your delegation?
+              labelPlacement: top
+              labelSize: small
+              class: my--formfield--class
+              style: "flex: 1 0 250px"
+        - legend: When will you be coming to the ILC?
+          direction: row
+          style: "width: 100%"
+          fields:
+            - type: datepicker
+              name: arrival-date
+              label: Arrival date
+              labelPlacement: top
+              labelSize: small
+              class: my--formfield--class
+              style: "flex: 1 1 49%"
+            - type: datepicker
+              name: departure-date
+              label: Departure date
+              labelPlacement: top
+              labelSize: small
+              class: my--formfield--class
+              style: "flex: 1 1 49%"
+        - legend: Submit a copy of your passport
+          direction: row
+          style: "width: 100%"
+          fields:
+            - type: fileupload
+              name: arrival-date
+              label: PDF or JPG files up to 10MB
+              accept: ".pdf,.jpg"
+              placeholder: Select file
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+        - direction: row
+          style: "width: 100%"
+          fields:
+            - type: textarea
+              name: comments
+              label: Do you have any questions or comments?
+              labelPlacement: top
+              labelSize: medium
+              class: my--formfield--class
+              style: "flex: 1 1 100%"

package/dist/components/formcontrol/formcontrol.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--form-control{grid-area:a;display:inline-grid;grid-template-rows:auto;grid-template-columns:auto;gap:.4287245445rem}.ilo--form-control__label-placement__start .ilo--form-control--label{grid-area:1/1/2/2}.ilo--form-control__label-placement__start :nth-child(2){grid-area:1/2/2/3}.ilo--form-control__label-placement__start .ilo--form-control--helper{grid-area:2/2/3/3}.ilo--form-control__label-placement__start [class*=file-upload--list]{grid-area:3/1/4/3}.ilo--form-control__label-placement__end .ilo--form-control--label{grid-area:1/2/2/3}.ilo--form-control__label-placement__end :nth-child(2){grid-area:1/1/2/2}.ilo--form-control__label-placement__end .ilo--form-control--helper{grid-area:2/1/3/3}.ilo--form-control__label-placement__end [class*=file-upload--list]{grid-area:3/1/4/4}.ilo--form-control__label-placement__top .ilo--form-control--label{grid-area:1/1/2/2}.ilo--form-control__label-placement__top :nth-child(2){grid-area:2/1/3/2}.ilo--form-control__label-placement__top .ilo--form-control--helper{grid-area:3/1/4/2}.ilo--form-control__label-placement__top [class*=file-upload--list]{grid-area:4/1/5/2}.ilo--form-control__label-placement__bottom .ilo--form-control--label{grid-area:3/1/4/2}.ilo--form-control__label-placement__bottom :nth-child(2){grid-area:2/1/3/2}.ilo--form-control__label-placement__bottom .ilo--form-control--helper{grid-area:1/1/2/2}.ilo--form-control__label-placement__bottom [class*=file-upload--list]{grid-area:4/1/5/2}.ilo--form-control__disabled .ilo--form-control--helper,.ilo--form-control__disabled .ilo--form-control--label{opacity:.5;pointer-events:none}.ilo--form-control__error .ilo--form-control--helper{color:#c8303c}.ilo--form-control--label{color:#2d2d2d;grid-area:g;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start}.ilo--form-control--label__size__small{font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-size:.8001071811rem;letter-spacing:-.0010718114rem;line-height:1.0803858521rem;font-weight:400}.ilo--form-control--label__size__medium{font-size:.857449089rem;line-height:1.1575562701rem}.ilo--form-control--label__size__large,.ilo--form-control--label__size__medium{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;letter-spacing:-.0010718114rem;font-weight:700}.ilo--form-control--label__size__large{font-size:1rem;line-height:1.3001071811rem}.ilo--form-control--label label{font-family:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;font-weight:inherit}.ilo--form-control--label div[class*=tooltip]{margin-left:.4287245445rem}[dir=rtl] .ilo--form-control--label div[class*=tooltip]{margin-right:.4287245445rem}.ilo--form-control--helper{grid-area:h;color:#6d6d6d;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-size:11.94px;letter-spacing:normal;line-height:16.24px}.ilo--form-control .ilo--tooltip--wrapper{bottom:.1071811361rem}