@ilo-org/twig 0.17.0 → 0.17.1

package/dist/components/tabs/tabs.wingsuit.yml

@@ -0,0 +1,169 @@
+tabs:
+  namespace: Components/User Interface
+  use: "@components/tabs/tabs.twig"
+  label: Tabs
+  description: The Tabs component displays content that is subdivided into sections, providing an interface for toggling visually between sections
+  fields:
+    items:
+      type: object
+      label: Items
+      description: The items and labels for each tab
+      preview:
+        - label: "Tab Label With A Really Really Lenghty Title Even Though We Do Not Recommend Such A Lengthy Title"
+          component: "image"
+          componentdata:
+            alt: "My alt text"
+            caption: "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO."
+            credit: "© Marcel Crozet/ILO"
+            url:
+              - breakpoint: 0
+                src: "/images/small.jpg"
+              - breakpoint: 800
+                src: "/images/medium.jpg"
+              - breakpoint: 1200
+                src: "/images/large.jpg"
+              - breakpoint: 1440
+                src: "/images/large.jpg"
+        - label: "Tab Label 2"
+          component: "richtext"
+          componentdata:
+            content: "<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/images/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>"
+      required: true
+  variants:
+    default:
+      label: Default
+      description: the default settings for the Tabs
+    withicon:
+      label: With Icon
+      description: Tabs with Icons
+      fields:
+        items:
+          - label: "Tab One"
+            component: "image"
+            componentdata:
+              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=Tab One Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab One tImage"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab One Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab One Image"
+            icon: error
+          - label: "Tab Two"
+            component: "image"
+            componentdata:
+              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=Tab Two Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Two Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Two Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Two Image"
+            icon: error
+          - label: "Tab Three"
+            component: "image"
+            componentdata:
+              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=Tab Three Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Three Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Three Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Three Image"
+            icon: error
+    fiveitems:
+      label: Five Items
+      description: Tab component with five items
+      fields:
+        items:
+          - label: "Tab One"
+            component: "image"
+            componentdata:
+              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=Tab One Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab One tImage"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab One Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab One Image"
+          - label: "Tab Two"
+            component: "image"
+            componentdata:
+              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=Tab Two Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Two Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Two Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Two Image"
+          - label: "Tab Three"
+            component: "image"
+            componentdata:
+              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=Tab Three Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Three Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Three Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Three Image"
+          - label: "Tab Four Has A Really Lenghthy Title Which Might Get Truncated"
+            component: "image"
+            componentdata:
+              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=Tab Four Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Four Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Four Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Four Image"
+          - label: "Tab Five"
+            component: "image"
+            componentdata:
+              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=Tab Five Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Five Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Five Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Five Image"
+  visibility: storybook

package/dist/components/tag/tag.behavior.js

@@ -0,0 +1 @@
+!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";function t(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var n=i.call(t,e||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function e(e,i){for(var n=0;n<i.length;n++){var r=i[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,t(r.key),r)}}function i(t){return function(t){if(Array.isArray(t))return n(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(!t)return;if("string"==typeof t)return n(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);"Object"===i&&t.constructor&&(i=t.constructor.name);if("Map"===i||"Set"===i)return Array.from(t);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return n(t,e)}(t)||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 n(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function r(t){var e=i(t.itemStatuses);return e.indexOf(t.id)>-1?e=e.filter((function(e){return e!==t.id})):t.allowMultipleExpanded?e.push(t.id):e=[t.id],e}var a="click",o=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=e,this.multipleActive=!0,this.itemStatuses=[],this.init()},(i=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){var t=this;return this.buttonTags=this.element.querySelectorAll(".ilo--tag--button"),this.multipleActive=this.element.getAttribute("data-multipleactive"),this.buttonTags.forEach((function(e,i){var n=e.dataset.active,a=t.buttonTags[i].getAttribute("id");"true"===n&&(t.itemStatuses=r({id:a,itemStatuses:t.itemStatuses,allowMultipleActive:t.multipleActive}))})),this}},{key:"setupHandlers",value:function(){return this.onClick=this.onClick.bind(this),this.updateTagItems=this.updateTagItems.bind(this),this}},{key:"enable",value:function(){var t=this;return this.buttonTags.length>0&&this.buttonTags.forEach((function(e,i){e.addEventListener(a,(function(){return t.onClick(i)}))})),this}},{key:"onClick",value:function(t){var e=this.buttonTags[t].getAttribute("id");return this.itemStatuses=r({id:e,itemStatuses:this.itemStatuses,allowMultipleacmultipleActive:this.multipleActive}),this.removeParentDom(e),this}},{key:"removeParentDom",value:function(t){var e=document.getElementById(t);return e&&e.parentElement.remove(),this}},{key:"updateTagItems",value:function(){var t=this;return this.tags.forEach((function(e,i){var n=e.getAttribute("id");t.itemStatuses.indexOf(n)>-1?(t.tags[i].classList.add("ilo--tag--active"),t.tags[i].setAttribute("data-active","true")):(t.tags[i].classList.remove("ilo--tag--active"),t.tags[i].setAttribute("data-active","true"))})),this}}])&&e(t.prototype,i),n&&e(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,i,n}();Drupal.behaviors.tag={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Tag"]'),(function(t){t.dataset.jsProcessed||(new o(t),t.dataset.jsProcessed=!0)}))}}}));

package/dist/components/tag/tag.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--tag-set{list-style:none}.ilo--tag-set__item{display:inline-block;margin:.2143622722rem}.ilo--tag{font-size:14.93px;letter-spacing:-.02em;line-height:20.16px;background:#edf0f2;border:none;color:#6d6d6d;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:500;padding:.4287245445rem .6430868167rem;text-decoration:none;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ilo--tag--active{background:#edf0f2;color:#230050;outline:0}.ilo--tag--anchor{cursor:unset;pointer-events:none}.ilo--tag--anchor.ilo--tag--active{background:#edf0f2;color:#230050;cursor:pointer;outline:0}.ilo--tag--anchor.ilo--tag--active:hover{text-decoration:none}.ilo--tag--anchor.ilo--tag--active:focus,.ilo--tag--anchor.ilo--tag--active:hover{background:#ebf5fd;color:#1e2dbe;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tag--anchor.ilo--tag--active:focus{outline:0}.ilo--tag--anchor.ilo--tag--active.ilo--tag--active{pointer-events:auto}.ilo--tag--button{font-size:14.93px;letter-spacing:-.02em;line-height:20.16px;cursor:pointer;display:none;opacity:0;padding-right:1.9292604502rem;position:relative;visibility:hidden}.ilo--tag--button.ilo--tag--active{background:#edf0f2;color:#230050;display:block;opacity:1;outline:0;visibility:visible;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tag--button.icon__position--right .ilo--icon{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='M16.95 15.536L13.414 12l3.536-3.535-1.414-1.415L12 10.586 8.464 7.05 7.05 8.465 10.586 12 7.05 15.536l1.414 1.414L12 13.414l3.536 3.536 1.414-1.414z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;height:100%;max-height:24px;max-width:24px;position:absolute;right:10px;top:50%;transform:translateY(-50%);width:100%}.ilo--tag--button:hover{background:#ebf5fd;color:#1e2dbe;text-decoration:none;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tag--button:hover.icon__position--right .ilo--icon{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='M16.95 15.536L13.414 12l3.536-3.535-1.414-1.415L12 10.586 8.464 7.05 7.05 8.465 10.586 12 7.05 15.536l1.414 1.414L12 13.414l3.536 3.536 1.414-1.414z'/%3E%3C/svg%3E")}.ilo--tag--button:focus{background:#ebf5fd;color:#1e2dbe;outline:0}.ilo--tag--reset{font-size:14.93px;letter-spacing:-.02em;line-height:20.16px;padding:.3483386924rem .5627009646rem;cursor:pointer;display:none;opacity:0;position:relative;visibility:hidden}.ilo--tag--reset.ilo--tag--active{background:#fff;border:1.5px solid #b8c4cc;color:#230050;display:block;opacity:1;outline:0;visibility:visible;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tag--reset.icon__position--right .ilo--icon{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='M16.95 15.536L13.414 12l3.536-3.535-1.414-1.415L12 10.586 8.464 7.05 7.05 8.465 10.586 12 7.05 15.536l1.414 1.414L12 13.414l3.536 3.536 1.414-1.414z'/%3E%3C/svg%3E");height:100%;max-height:28px;max-width:28px;position:absolute;right:5px;top:5px;width:100%}.ilo--tag--reset:hover{background:#ebf5fd;border:1.5px solid #ebf5fd;color:#1e2dbe;text-decoration:none;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--tag--reset:hover.icon__position--right .ilo--icon{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='M16.95 15.536L13.414 12l3.536-3.535-1.414-1.415L12 10.586 8.464 7.05 7.05 8.465 10.586 12 7.05 15.536l1.414 1.414L12 13.414l3.536 3.536 1.414-1.414z'/%3E%3C/svg%3E")}.ilo--tag--reset:focus{background:#ebf5fd;border:1.5px solid #ebf5fd;color:#1e2dbe;outline:0}

package/dist/components/tag/tag.twig

@@ -0,0 +1,30 @@
+{#
+  TAG COMPONENT
+#}
+{% if tagType == "button" and defaultActive %}
+  <li class="ilo--tags__item">
+    <button class="ilo--tag ilo--tag--button ilo--tag--active icon__position--right" id="{{ id }}" data-active={{ defaultActive }} type="button">
+      {{content}}
+      <span class="ilo--icon" title="Remove"></span>
+    </button>
+  </li>
+{% elseif tagType == "reset" %}
+  <li class="ilo--tags__item">
+    <button class="ilo--tag ilo--tag--reset ilo--tag--active" id="{{ id }}" data-active={{ defaultActive }} type="button">
+      {{content}}
+    </button>
+  </li>
+{% elseif tagType == "anchor" %}
+<li class="ilo--tags__item">
+    <a class="ilo--tag ilo--tag--anchor {% if defaultActive %} ilo--tag--active{% endif %}" href="{{ url }}"  id="{{ id }}" data-active={{ defaultActive }}>
+      {{content}}
+    </a>
+</li>
+{% elseif tagType == "display" %}
+<li class="ilo--tags__item">
+  <span class="ilo--tag {% if defaultActive %} ilo--tag--active{% endif %}" id="{{ id }}" data-active={{ defaultActive }}>
+    {{content}}
+  </span>
+</li>
+{% else %}
+{% endif %}

package/dist/components/tag/tag.wingsuit.yml

@@ -0,0 +1,43 @@
+tag:
+  use: "@components/tags/tag.twig"
+  label: Tag
+  description: A display or interactable tag
+  fields:
+    content:
+      type: text
+      label: Content
+      description: The tag text content.
+      preview:
+        faker: lorem.word
+    id:
+      type: text
+      label: ID
+      description: The tag's id.
+      preview:
+        faker: lorem.word
+    url:
+      type: text
+      label: URL
+      description: The tag's url reference
+      preview:
+        faker: https://www.google.com/
+  settings:
+    defaultActive:
+      type: select
+      label: Default Active
+      description: The tag loads in an active state
+      options:
+        "true": "true"
+        "false": "false"
+      preview: "false"
+      required: false
+    tagType:
+      type: type
+      label: Tag Type
+      description: The type of tag. Anchor and button have potential user interactions where display is static.
+      options:
+        anchor: Anchor
+        button: Button
+        display: Display
+      preview: display
+  visibility: storybook

package/dist/components/tags/tags.twig

@@ -0,0 +1,15 @@
+{#
+  TAGS COMPONENT
+#}
+<ul class="ilo--tags" data-loadcomponent="Tag" data-multipleactive="{{ allowMultipleActive|default(true) }}">
+  {% for item in items %}
+    {% include "@components/tags/tag.twig" with {
+      content: item.content,
+      defaultActive: item.defaultActive,
+      id: item.id,
+      prefix: prefix,
+      tagType: tagType,
+      url: item.url|default(null),
+    } only %}
+  {% endfor %}
+</ul>

package/dist/components/tags/tags.wingsuit.yml

@@ -0,0 +1,45 @@
+tags:
+  namespace: Components/User Interface
+  use: "@components/tags/tags.twig"
+  label: Tags
+  description: A group of tags
+  fields:
+    items:
+      type: object
+      label: Items
+      description: An array of tag data to implement a Tag component
+      required: true
+      preview:
+        - content: content 1
+          id: tag1
+          defaultActive: true
+          url: https://www.google.com/
+        - content: content 2
+          id: tag2
+          defaultActive: true
+          url: https://www.google.com/
+        - content: content 3
+          id: tag3
+          defaultActive: false
+  settings:
+    allowMultipleActive:
+      type: select
+      label: Allow Multiple Active
+      description: Allow multiple tag items to be active at once.
+      options:
+        "true": "true"
+        "false": "false"
+      preview: "true"
+      required: false
+    tagType:
+      type: select
+      label: Tag Type
+      description: Type of tags
+      options:
+        anchor: Anchor
+        button: Button
+        display: Display
+        reset: Reset
+      preview: display
+      required: true
+  visibility: storybook

package/dist/components/textarea/textarea.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:.1071811361rem solid #b8c4cc;box-sizing:border-box;font-family: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;margin:0;max-width:100%;min-height:6.4308681672rem;min-width:100%;outline:0;position:relative;padding:.857449089rem .6430868167rem;width:100%}.ilo--textarea:focus{background-color:#ebf5fd;border-bottom:.1071811361rem solid #b8c4cc;border-left:.1607717042rem solid #1e2dbe;border-right:.1071811361rem solid #b8c4cc;border-top:.1071811361rem solid #b8c4cc;padding-left:.6430868167rem}.ilo--textarea:disabled{opacity:.45;pointer-events:none}.ilo--textarea:invalid,.ilo--textarea__error,.ilo--textarea__error .ilo--textarea{background-color:#fff;border-bottom:.1071811361rem solid #b8c4cc;border-left:.1607717042rem solid #c8303c;border-right:.1071811361rem solid #b8c4cc;border-top:.1071811361rem solid #b8c4cc}

package/dist/components/textarea/textarea.twig

@@ -0,0 +1,14 @@
+{# textarea.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = prefix ~ '--textarea' %}
+{% set textAreaClass = [baseClass] %}
+{% if error %}
+	{% set textAreaClass = textAreaClass|merge([baseClass ~ "__error"]) %}
+{% endif %}
+
+
+{% block formfield %}
+	<textarea class="{{ textAreaClass|join(' ') }}" name="{{ name }}" id="{{ id|default(name) }}" aria-describedby="{{ ariaDescribedBy }}" {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} {% if placeholder %} placeholder="{{ placeholder }}" {% endif %} {% if form %} form="{{ form }}" {% endif %} {% if maxlength %} maxlength="{{ maxlength }}" {% endif %} {% if minlength %} minlength="{{ minlength }}" {% endif %} {% if spellcheck %} spellcheck="{{ spellcheck }}" {% endif %} {% if wrap %} wrap="{{ wrap }}" {% endif %}>{{ value|default('') }}</textarea>
+{% endblock %}

package/dist/components/textarea/textarea.wingsuit.yml

@@ -0,0 +1,126 @@
+textarea:
+  namespace: Components/Forms
+  use: "@components/textarea/textarea.twig"
+  label: Text Area
+  description: The TextArea component allows users to enter multi-line text. It's used to capture free-form text, such as a comment or a description.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Insert your name here"
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+      preview: "This is a tooltip"
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+      preview: "Enter first name and last name"
+    id:
+      type: text
+      label: ID
+      description: The ID of the text area.
+    name:
+      type: text
+      label: Name
+      description: The name of the text area.
+    placeholder:
+      type: text
+      label: Placeholder
+      description: The placeholder of the text area.
+      preview: Enter your life story here
+      default: ""
+    class:
+      type: text
+      label: Class
+      description: The class of the text area.
+      preview: textinput
+      default: ""
+    pattern:
+      type: text
+      label: Pattern
+      description: The pattern of the text area.
+      preview: textinput``
+      default: ""
+    form:
+      type: text
+      label: Form
+      description: The form of the text area if it's not nested in a form element.
+      preview: textinput
+      default: ""
+    maxlength:
+      type: number
+      label: Max Length
+      description: The maximum length of the text area.
+      preview: 100
+    minlength:
+      type: number
+      label: Min Length
+      description: The minimum length of the text area.
+      preview: 0
+    style:
+      type: text
+      label: Style
+      description: The style of the text area.
+      preview: "width: 100%;"
+  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
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the text area.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the text area.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false
+    spellcheck:
+      type: select
+      label: Spellcheck
+      description: The spellcheck state of the text area.
+      options:
+        "true": "true"
+        "false": "false"
+        default: default
+      preview: default
+    wrap:
+      type: select
+      label: Wrap
+      description: The wrap state of the text area.
+      options:
+        hard: hard
+        soft: soft
+        off: off
+      preview: off

package/dist/components/textcard/textcard.css

@@ -0,0 +1 @@
+.ilo--card__type__text{--max-width:16.1307609861rem;border-bottom:.1607717042rem solid #b8c4cc;padding:2.1436227224rem 1.2861736334rem 1.7148981779rem}.ilo--card__type__text,[dir=rtl] .ilo--card__type__text{clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}[dir=rtl] .ilo--card__type__text{clip-path:polygon(72px 0,100% 0,100% 100%,0 100%,0 40px)}.ilo--card__type__text [class$=profile__theme__light] *{color:#2d2d2d}.ilo--card__type__text [class$=profile__theme__dark] *{color:#fff}.ilo--card__type__text:focus,.ilo--card__type__text:focus-within,.ilo--card__type__text:hover{filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04));transition-property:border-color;transition-duration:.15s;transition-timing-function:ease-out;border-color:#1e2dbe}.ilo--card__type__text:focus-within [class*=profile__theme] *,.ilo--card__type__text:focus [class*=profile__theme] *,.ilo--card__type__text:hover [class*=profile__theme] *{color:#1e2dbe}@media screen and (max-width:609px){.ilo--card__type__text{--max-width:100%}}.ilo--card__type__text.ilo--card__size__fluid,.ilo--card__type__text.ilo--card__size__wide{--max-width:28.0278670954rem;padding:2.1436227224rem 1.7148981779rem 1.7148981779rem}.ilo--card__type__text.ilo--card__size__narrow{--max-width:16.1307609861rem;padding:2.1436227224rem 1.2861736334rem 1.7148981779rem}@media screen and (max-width:609px){.ilo--card__type__text.ilo--card__size__narrow{--max-width:100%}}.ilo--card__type__text.ilo--card__size__narrow .ilo--card--title{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;margin-bottom:1.674953518rem}.ilo--card__type__text.ilo--card__dark{border-bottom:.1607717042rem solid #fa3c4b}.ilo--card__type__text .ilo--card--eyebrow{margin-bottom:1.0110920672rem}.ilo--card__type__text .ilo--card--title{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;margin-bottom:1.674953518rem}@media screen and (min-width:610px){.ilo--card__type__text .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:1.5763397642rem}}.ilo--card__type__text .ilo--card--date{display:block;margin-bottom:1.4398166117rem}.ilo--card__type__text .ilo--card--content{display:flex;flex-direction:column;position:relative}.ilo--card__type__text .ilo--card--content>*{justify-self:flex-start}.ilo--card__type__text .ilo--card--content>:last-child{justify-self:flex-end;margin-bottom:0}

package/dist/components/textinput/textinput.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--text-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:.1071811361rem solid #b8c4cc;box-sizing:border-box;font-family: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;margin:0;outline:0;padding:.857449089rem .6430868167rem;width:100%}.ilo--text-input:focus{background-color:#ebf5fd;border-bottom:.1071811361rem solid #b8c4cc;border-left:.1607717042rem solid #1e2dbe;border-right:.1071811361rem solid #b8c4cc;border-top:.1071811361rem solid #b8c4cc;padding-left:.6430868167rem;outline:0}.ilo--text-input:disabled{opacity:.45;pointer-events:none}.ilo--text-input:invalid,.ilo--text-input__error{background-color:#fff;border-bottom:.1071811361rem solid #b8c4cc;border-left:.1607717042rem solid #c8303c;border-right:.1071811361rem solid #b8c4cc;border-top:.1071811361rem solid #b8c4cc}

package/dist/components/textinput/textinput.twig

@@ -0,0 +1,14 @@
+{# text-input.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = prefix ~ "--text-input" %}
+{% set inputClass = [baseClass] %}
+{% if error %}
+	{% set inputClass = inputClass|merge([baseClass ~ "__error"]) %}
+{% endif %}
+
+{% block formfield %}
+	<input id="{{ id|default(name) }}" name="{{ name }}" type="{{ type|default("text") }}" class="{{ inputClass|join(" ") }}" {% if placeholder %} placeholder="{{ placeholder }}" {% endif %} {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} {% if pattern %} pattern="{{ pattern }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}/>
+
+{% endblock %}

package/dist/components/textinput/textinput.wingsuit.yml

@@ -0,0 +1,86 @@
+textinput:
+  namespace: Components/Forms
+  use: "@components/textinput/textinput.twig"
+  label: Text Input
+  description: The TextInput field provides a way for users with a single line of text to enter into a form. Use this component for things like names, email addresses, passwords and other short form fields.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Insert your name here"
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+      preview: "This is a tooltip"
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+      preview: "Enter first name and last name"
+    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: Sarah Martinez
+      default: ""
+    class:
+      type: text
+      label: Class
+      description: The class of the text input.
+      preview: textinput
+      default: ""
+    pattern:
+      type: text
+      label: Pattern
+      description: The pattern of the text input.
+      default: ""
+  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
+    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/toggle/toggle.css

@@ -0,0 +1 @@
+.ilo--input--toggle{grid-area:a;position:relative;display:inline-block;width:var(--toggle-width);height:var(--toggle-height);--base-toggle-width:2.4651661308rem;--base-toggle-height:1.2861736334rem}.ilo--input--toggle__size__small{--toggle-width:var(--base-toggle-width);--toggle-height:var(--base-toggle-height)}.ilo--input--toggle__size__medium{--toggle-width:calc(var(--base-toggle-width) * 1.5);--toggle-height:calc(var(--base-toggle-height) * 1.5)}.ilo--input--toggle__size__large{--toggle-width:calc(var(--base-toggle-width) * 2);--toggle-height:calc(var(--base-toggle-height) * 2)}.ilo--input--toggle__disabled{cursor:not-allowed;opacity:.5}.ilo--input--toggle__error .ilo--input--toggle--slider{outline-color:#fa3c4b!important;outline-width:calc(var(--toggle-height)/ 8);outline-style:solid}.ilo--input--toggle input[type=checkbox]{opacity:0;width:100%;height:100%;padding:0;margin:0;cursor:pointer}.ilo--input--toggle--slider{position:absolute;pointer-events:none;top:0;left:0;right:0;bottom:0;background-color:#b8c4cc;border-radius:calc(var(--toggle-height)/ 2);transition-property:background;transition-duration:.15s;transition-timing-function:ease-out}.ilo--input--toggle--slider:before{position:absolute;content:"";height:calc(var(--toggle-height) - var(--toggle-height)/ 3);width:calc(var(--toggle-height) - var(--toggle-height)/ 3);left:calc(var(--toggle-height)/ 6);bottom:calc(var(--toggle-height)/ 6);background-color:#fff;border-radius:50%;transition-property:transform,background;transition-duration:.15s;transition-timing-function:ease-out}input[type=checkbox]:checked+.ilo--input--toggle--slider{background-color:#230050}input[type=checkbox]:focus+.ilo--input--toggle--slider{outline-color:#ffcd2d;outline-width:calc(var(--toggle-height)/ 8);outline-style:solid}input:checked+.ilo--input--toggle--slider:before{transform:translateX(calc(var(--toggle-width) - var(--toggle-height)));background-color:#ebf5fd}

package/dist/components/toggle/toggle.twig

@@ -0,0 +1,36 @@
+{# toggle.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{# Define the default values, these values can be overridden when the template is included or extended. #}
+{% set size = size|default("medium") %}
+{% set error = error|default(false) %}
+{% set disabled = disabled|default(false) %}
+{% set defaultChecked = defaultChecked|default(false) %}
+{% set required = required|default(false) %}
+{% set name = name|default("toggle") %}
+{% set id = id|default(name) %}
+{% set ariaDescribedBy = ariaDescribedBy|default("") %}
+
+{# Calculate dynamic classes based on the passed values. #}
+{% set baseClass = prefix ~ "--input--toggle" %}
+{% set sliderClass = baseClass ~ "--slider" %}
+{% set toggleClass = [baseClass, class, baseClass ~ "__size__" ~ size] %}
+
+{% if not disabled and error %}
+	{% set toggleClass = toggleClass|merge([baseClass ~ "__error"]) %}
+{% endif %}
+{% if disabled %}
+	{% set toggleClass = toggleClass|merge([baseClass ~ "__disabled"]) %}
+{% endif %}
+
+{% block formfield %}
+
+	<div class="{{ toggleClass|join(" ") }}">
+		<input {% if defaultchecked %} defaultchecked {% endif %} {% if required %} required {% endif %} {% if checked %} checked {% endif %} name="{{ name }}" id="{{ id }}" type="checkbox" role="switch" aria-describedby="{{ ariaDescribedBy }}"/>
+
+
+		<span class="{{ sliderClass }}"/>
+	</div>
+
+{% endblock %}