@ilo-org/twig 0.16.3 → 0.17.1

package/README.md

@@ -64,16 +64,10 @@ To build storybook
 pnpm build:storybook
 ```
 
-To build and start storybook
+To build the package for distribution
 
 ```bash
-pnpm build
-```
-
-To build Twigs to be used in a CMS like Drupal (this will output Twigs and necessary JavaScript to a `/dist` folder.)
-
-```bash
-pnpm output
+pnpm build:lib
 ```
 
 This package imports the `prefix` from the `themes` package; to manually import it, run

package/dist/components/accordion/accordion.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 o=n[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,e(o.key),o)}}var n="aria-expanded",i="aria-hidden",o="click",a=["a","button","input","select","textarea","[tabindex]:not([tabindex='-1'])"],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.multipleExpanded=!1,this.init()},(r=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){return this.accordionItems=this.element.querySelectorAll(".ilo--accordion--item"),this.multipleExpanded=this.element.hasAttribute("data-multipleexpanded"),this.accordionPanels=this.element.querySelectorAll(".ilo--accordion--panel"),this.accordionButtons=this.element.querySelectorAll(".ilo--accordion--button"),this}},{key:"setupHandlers",value:function(){return this.collapseSection=this.collapseSection.bind(this),this.expandSection=this.expandSection.bind(this),this.onClick=this.onClick.bind(this),this.updateAccordionItems=this.updateAccordionItems.bind(this),this}},{key:"enable",value:function(){var e=this;return this.accordionButtons.length>0&&this.accordionButtons.forEach((function(t){t.addEventListener(o,(function(t){return e.onClick(t)}))})),this.accordionPanels.length>0&&this.accordionPanels.forEach((function(t){e.handleTabIndex(t,"REMOVE")})),this}},{key:"onClick",value:function(e){return this.updateAccordionItems(e.target),this}},{key:"updateAccordionItems",value:function(e){var t=this,n=e.closest(".ilo--accordion--item").querySelector(".ilo--accordion--panel"),i=n.classList.contains("ilo--accordion--panel--open");return this.multipleExpanded||this.accordionPanels.forEach((function(e){n!==e&&t.collapseSection(e)})),i?this.collapseSection(n):this.expandSection(n),e.blur(),this}},{key:"collapseSection",value:function(e){e.classList.remove("ilo--accordion--panel--open"),e.parentElement.querySelector(".ilo--accordion--button").setAttribute(n,"false"),e.setAttribute(i,"true"),this.handleTabIndex(e,"REMOVE")}},{key:"expandSection",value:function(e){e.parentElement.querySelector(".ilo--accordion--button").setAttribute(n,"true"),e.setAttribute(i,"false"),e.classList.add("ilo--accordion--panel--open"),this.handleTabIndex(e,"ADD")}},{key:"handleTabIndex",value:function(e,t){e.querySelectorAll(a.join(", ")).forEach((function(e){"ADD"!==t?e.setAttribute("tabindex","-1"):e.removeAttribute("tabindex")}))}}])&&t(e.prototype,r),c&&t(e,c),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,r,c}();Drupal.behaviors.accordion={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Accordion"]'),(function(e){e.dataset.jsProcessed||(new r(e),e.dataset.jsProcessed=!0)}))}}}));

package/dist/components/accordion/accordion.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--accordion{margin-right:.2143622722rem}.ilo--accordion--button{display:flex;align-items:center;flex-direction:row;justify-content:space-between;text-align:start;width:100%;margin:0;padding:.857449089rem 0;padding-inline-end:.857449089rem;background-color:#fff;background-position:calc(100% - .3215434084rem) 50%;background-repeat:no-repeat;background-size:1.2861736334rem 1.2861736334rem;border:none;border-top:2px solid #edf0f2;fill:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;color:#230050;font-weight:500;font-size:16px;letter-spacing:-.02em;line-height:21.6px;transition:all .5s ease-in-out;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='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button--large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding:1.0718113612rem 0;padding-inline-end:.857449089rem}.ilo--accordion--button:focus,.ilo--accordion--button:hover{background-color:#ebf5fd;border-top-color:#1e2dbe;color:#1e2dbe;cursor:pointer;fill:#1e2dbe}.ilo--accordion--button:focus[aria-expanded=true],.ilo--accordion--button:hover[aria-expanded=true]{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='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button:focus[aria-expanded=false],.ilo--accordion--button:hover[aria-expanded=false]{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='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}@media screen and (min-width:610px){.ilo--accordion--button{font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--accordion--button--large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding:1.0718113612rem 0;padding-inline-end:.857449089rem}}.ilo--accordion--button[aria-expanded=true]{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='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button[aria-expanded=false]{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='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--accordion--button{background-position:calc(0% + .3215434084rem) 50%}.ilo--accordion--panel{max-height:0;transition:all .5s cubic-bezier(0,1,0,1);overflow:hidden}.ilo--accordion--panel .ilo--accordion--innerpanel{padding-bottom:1.9292604502rem;padding-top:.4287245445rem}.ilo--accordion--panel--open{max-height:100vh;transition:all .5s ease-in-out}.ilo--accordion--panel--open.ilo--accordion--panel__scroll{max-height:300px;overflow-y:auto;padding-right:1.7148981779rem}

package/dist/components/accordion/accordion.twig

@@ -0,0 +1,16 @@
+{# accordion.twig #}
+
+<ul class="ilo--accordion" data-loadcomponent="Accordion" {% if allowMultipleExpanded %} data-multipleexpanded {% endif %}>
+	{% for item in items %}
+		{% include "@components/accordion/accordion-item.twig" with {
+        label: item.label,
+        content: item.content,
+        defaultExpanded: item.defaultExpanded,
+        size: size,
+        headingLevel: headingLevel,
+        id: item.id,
+        prefix: prefix,
+        scroll: item.scroll
+      } only %}
+	{% endfor %}
+</ul>

package/dist/components/accordion/accordion.wingsuit.yml

@@ -0,0 +1,77 @@
+accordion:
+  namespace: Components/Content
+  use: "@components/accordion/accordion.twig"
+  label: Accordion
+  description: The accordion component allows the user to show and hide sections of related content on a page. Items in the accordion can be expanded by default or scrollable if the content is very long.
+
+  fields:
+    items:
+      type: object
+      label: Items
+      description: The accordion items. Each item takes a label, content, and id. You can also set the defaultExpanded and scroll properties for each item.
+      required: true
+      preview:
+        - label: Topics
+          content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Employment Promotion and Job Creation</li><li>Social Protection</li><li>International Labour Standards</li><li>Social Dialogue and Tripartism</li><li>Occupational Safety and Health</li><li>Labor Migration</li><li>Child Labour and Forced Labour Elimination</li><li>Gender Equality and Non-Discrimination</li></ul></div>'
+          id: item1
+          defaultExpanded: false
+          scroll: false
+        - label: Sectors
+          content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Agriculture, Forestry, and Fishing</li><li>Construction</li><li>Manufacturing</li><li>Transport and Storage</li><li>Wholesale and Retail Trade</li><li>Information and Communication</li><li>Finance and Insurance</li><li>Health and Social Work</li><li>Educational Services</li><li>Public Administration and Defense</li><li>Other Services</li></ul></div>'
+          id: item2
+          defaultExpanded: false
+          scroll: false
+
+  settings:
+    size:
+      type: select
+      label: Size
+      description: The size of the accordion button.
+      required: false
+      options:
+        small: Small
+        large: Large
+      preview: small
+    allowMultipleExpanded:
+      type: select
+      label: Allow Multiple Expanded
+      description: Allow mutiple accordion items to be expandable at once.
+      options:
+        "true": "true"
+        "false": "false"
+      preview: "true"
+      required: false
+  variants:
+    default:
+      label: Default
+    scrollable:
+      label: "Scrollable"
+      description: "You can make an accordion item scrollable simply by passing it scroll: true in the preview."
+      fields:
+        items:
+          - label: Topics
+            content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Employment Promotion and Job Creation</li><li>Social Protection</li><li>International Labour Standards</li><li>Social Dialogue and Tripartism</li><li>Occupational Safety and Health</li><li>Labor Migration</li><li>Child Labour and Forced Labour Elimination</li><li>Gender Equality and Non-Discrimination</li></ul></div>'
+            id: item1
+            defaultExpanded: false
+            scroll: true
+          - label: Sectors
+            content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Agriculture, Forestry, and Fishing</li><li>Construction</li><li>Manufacturing</li><li>Transport and Storage</li><li>Wholesale and Retail Trade</li><li>Information and Communication</li><li>Finance and Insurance</li><li>Health and Social Work</li><li>Educational Services</li><li>Public Administration and Defense</li><li>Other Services</li></ul></div>'
+            id: item2
+            defaultExpanded: false
+            scroll: true
+    focus:
+      label: "Focus elements"
+      description: "This variant includes checkboxes inside the accordion item."
+      fields:
+        items:
+          - label: User Preferences
+            content: '<div style="padding: 20px"><form><input type="checkbox" id="option1" name="option1"><label for="option1">Option 1</label><br><input type="checkbox" id="option2" name="option2"><label for="option2">Option 2</label><br><input type="checkbox" id="option3" name="option3"><label for="option3">Option 3</label><br><input type="checkbox" id="option4" name="option4"><label for="option4">Option 4</label><br><input type="checkbox" id="option5" name="option5"><label for="option5">Option 5</label></form></div>'
+            id: item1
+            defaultExpanded: false
+            scroll: false
+          - label: More Preferences
+            content: '<div style="padding: 20px"><form><input type="checkbox" id="option3" name="option3"><label for="option3">Option 3</label><br><input type="checkbox" id="option4" name="option4"><label for="option4">Option 4</label></form></div>'
+            id: item2
+            defaultExpanded: false
+            scroll: false
+            visibility: storybook

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

@@ -0,0 +1,22 @@
+{#
+  ACCORDION ITEM COMPONENT
+#}
+{% set uid = "now"|date('Uv') %}
+{% set accordion_id = id ~ uid %}
+{% set button_id = 'button-' ~ accordion_id %}
+{% set panel_id = 'panel-' ~ accordion_id %}
+{% set expanded_class = defaultExpanded ? prefix ~ '--accordion--panel--open' : '' %}
+{% set scroll_class = scroll ? prefix ~ '--accordion--panel__scroll' : '' %}
+
+<li class="ilo--accordion--item" id="{{ accordion_id }}">
+	<div class="ilo--h3">
+		<button class="ilo--accordion--button ilo--accordion--button--{{ size|default('small') }}" aria-expanded="{{ defaultExpanded }}" aria-controls="{{ panel_id }}" id="{{ button_id }}">
+			{{label}}
+		</button>
+	</div>
+	<div class="ilo--accordion--panel {{ expanded_class }} {{ scroll_class }}" id="{{ panel_id }}" aria-labelledby="{{ button_id }}" role="region" aria-hidden={{defaultExpanded ? 'false' : 'true'}}>
+		<div class="ilo--accordion--innerpanel">
+			{{content}}
+		</div>
+	</div>
+</li>

package/dist/components/breadcrumb/breadcrumb.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="resize",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=this.element.dataset.prefix,this.init()},(r=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable().onResize(),this}},{key:"cacheDomReferences",value:function(){return this.breadcrumbs=this.element.querySelector(".ilo--breadcrumb--items"),this.breadcrumbwidth=this.breadcrumbs.offsetWidth,this.ContextButton=this.element.querySelector(".".concat(this.prefix,"--breadcrumb--item--context")),this.ContextMenu=this.element.querySelector(".context--menu"),this}},{key:"setupHandlers",value:function(){return this.onResize=this.onResize.bind(this),this.onClick=this.onClick.bind(this),this}},{key:"enable",value:function(){var e=this;return window.addEventListener(i,(function(t){return e.onResize(t)})),this.ContextButton&&this.ContextButton.addEventListener(n,(function(){return e.onClick()})),this}},{key:"onResize",value:function(){return this.ContextMenu&&(this.breadcrumbwidth>this.element.offsetWidth/2?(this.element.classList.add("contextmenu"),this.ContextMenu.classList.remove("open")):(this.element.classList.remove("contextmenu"),this.ContextMenu.classList.remove("open"))),this}},{key:"onClick",value:function(){return this.ContextMenu&&(this.ContextMenu.classList.contains("open")?this.ContextMenu.classList.remove("open"):this.ContextMenu.classList.add("open")),this}}])&&t(e.prototype,r),o&&t(e,o),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,r,o}();Drupal.behaviors.breadcrumb={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Breadcrumb"]'),(function(e){e.dataset.jsProcessed||(new r(e),e.dataset.jsProcessed=!0)}))}}}));

package/dist/components/breadcrumb/breadcrumb.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--breadcrumb{position:relative;z-index:10}.ilo--breadcrumb--items{align-items:center;background-color:#fff;display:inline-flex;justify-content:flex-start;padding-block:.857449089rem;padding-inline-end:0;padding-inline-start:var(--breadcrumb-padding);position:relative}.ilo--breadcrumb--items.context--menu{padding:0}.ilo--breadcrumb--link{align-items:center;background-position:100%;background-repeat:no-repeat;color:#230050;display:inline-flex;height:.857449089rem;padding-block:0;padding-inline-start:.857449089rem;padding-inline-end:1.2861736334rem;text-decoration:none;text-decoration-thickness:.1071811361rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M1.731 16l-1.118-.815L5.838 8 .613.814 1.731 0l5.522 7.593a.69.69 0 0 1 0 .814L1.731 16z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--breadcrumb--link{background-position:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M.7 8.4c0-.1-.1-.3-.1-.4s0-.3.1-.4L6.3 0l1.1.8L2.2 8l5.2 7.2-1.1.8L.7 8.4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--link--label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40ch;font-weight:400;font-size:11.94px;letter-spacing:normal;line-height:16.24px}.ilo--breadcrumb--link--label,.ilo--breadcrumb--link--label--dropdown{font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif}.ilo--breadcrumb--link:focus,.ilo--breadcrumb--link:hover{color:#1e2dbe;text-decoration:underline;text-decoration-thickness:.1071811361rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%231E2DBE' d='M1.731 16l-1.118-.815L5.838 8 .613.814 1.731 0l5.522 7.593a.69.69 0 0 1 0 .814L1.731 16z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--breadcrumb--link:focus,[dir=rtl] .ilo--breadcrumb--link:hover{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%231E2DBE' d='M.7 8.4c0-.1-.1-.3-.1-.4s0-.3.1-.4L6.3 0l1.1.8L2.2 8l5.2 7.2-1.1.8L.7 8.4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--item{align-items:center;display:flex;height:.857449089rem}.ilo--breadcrumb--item.home{align-items:center;display:flex;position:relative}.ilo--breadcrumb--item.home .ilo--breadcrumb--link--label{width:1px;height:1px;margin:-1px;padding:0;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.ilo--breadcrumb--item.home .ilo--breadcrumb--link:before{background-position:50%;background-repeat:no-repeat;content:"";display:block;height:.857449089rem;left:0;position:absolute;top:0;width:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23230050' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--breadcrumb--item.home .ilo--breadcrumb--link:before{left:auto;right:0}.ilo--breadcrumb--item.home:focus .ilo--breadcrumb--link:before,.ilo--breadcrumb--item.home:hover .ilo--breadcrumb--link:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231E2DBE' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--item.final .ilo--breadcrumb--link{background-image:none}.ilo--breadcrumb .ilo--breadcrumb--item--context{align-items:flex-start;display:flex;height:.857449089rem}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context{background-position:50%;background-repeat:no-repeat;background-size:16px 4px;position:relative;width:2.2508038585rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%23230050' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context:hover{cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%231E2DBE' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context:after{background-position:50%;background-repeat:no-repeat;content:"";display:block;height:.857449089rem;right:-7px;position:absolute;top:0;width:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M1.731 16l-1.118-.815L5.838 8 .613.814 1.731 0l5.522 7.593a.69.69 0 0 1 0 .814L1.731 16z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context:after{right:auto;left:-7px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M.7 8.4c0-.1-.1-.3-.1-.4s0-.3.1-.4L6.3 0l1.1.8L2.2 8l5.2 7.2-1.1.8L.7 8.4z'/%3E%3C/svg%3E")}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu{border-radius:.1071811361rem;background-color:#edf0f2;display:inline-block;left:-2.1436227224rem;opacity:0;position:absolute;top:calc(100% + 24px);width:6.4308681672rem;z-index:10;transition-property:opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu.open{opacity:1;transition-property:opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu:before{background-position:top;background-repeat:no-repeat;background-size:contain;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='%23EDF0F2' d='M24 24L0 0v24h24z'/%3E%3C/svg%3E");content:"";height:.6430868167rem;position:absolute;left:50%;top:-.3215434084rem;transform:translateX(-50%) rotate(135deg);width:.6430868167rem}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu:hover{cursor:pointer}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--item{display:inline-block;height:auto;padding:0 .4287245445rem;position:relative;width:100%}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--item:last-of-type a{border-bottom:none}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--item:focus,.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--item:hover{background-color:#ebf5fd;text-decoration:none}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--item:focus .ilo--breadcrumb--link,.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--item:hover .ilo--breadcrumb--link{text-decoration:underline;text-decoration-thickness:.1071811361rem}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--item.endsection{border-bottom:.1071811361rem solid #fff}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--item.endsection .ilo--context-menu--link{border-bottom:none}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--link{background:0 0;border-bottom:.1071811361rem solid #fff;color:#230050;display:inline-block;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:500;height:auto;padding:.857449089rem 0;text-decoration:none;width:100%;font-size:11.94px;letter-spacing:normal;line-height:16.24px}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--link:visited{color:#230050}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--link:active{color:#230050;outline:0}.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--link:focus,.ilo--breadcrumb.contextmenu .ilo--breadcrumb--item--context .context--menu .ilo--breadcrumb--link:hover{color:#1e2dbe;outline:0;text-decoration:underline;text-decoration-thickness:.1071811361rem}.ilo--breadcrumb--items:after{background:linear-gradient(to bottom right,#fff 50%,transparent 0);content:"";display:inline-block;height:47px;position:absolute;right:-47px;top:0;width:47px}[dir=rtl] .ilo--breadcrumb--items:after{right:auto;left:-47px;transform:scaleX(-1)}.ilo--breadcrumb--items.context--menu:after{content:none}.ilo--breadcrumb.storybook{background-color:#b8c4cc;height:100vh}

package/dist/components/breadcrumb/breadcrumb.twig

@@ -0,0 +1,43 @@
+{#
+  BREADCRUMB COMPONENT
+#}
+{% set lastlink = links|last %}
+{% set firstlink = links|first %}
+<nav class="ilo--breadcrumb{% if className %} {{className}}{% endif %}" data-prefix="ilo" data-loadcomponent="Breadcrumb">
+	<ol class="ilo--breadcrumb--items">
+		<li class="ilo--breadcrumb--item home">
+			<a class="ilo--breadcrumb--link" href="{{home.url}}">
+				<span class="ilo--breadcrumb--link--label">{{home.label}}</span>
+			</a>
+		</li>
+		{% if links|length >= 2 %}
+			<li class="ilo--breadcrumb--item first">
+				<a class="ilo--breadcrumb--link" href="{{firstlink.url}}">
+					<span class="ilo--breadcrumb--link--label">{{firstlink.label}}</span>
+				</a>
+			</li>
+		{% endif %}
+		{% if links|length >= 3%}
+			<li class="ilo--breadcrumb--item--context">
+				<ul class="ilo--breadcrumb--items context--menu">
+					{% for link in links %}
+						{% if not loop.first and not loop.last %}
+							<li class="ilo--breadcrumb--item">
+								<a href="{{link.url}}" class="ilo--breadcrumb--link">
+									<span class="ilo--breadcrumb--link--label--dropdown ilo--breadcrumb--link--label">{{link.label}}</span>
+								</a>
+							</li>
+						{% endif %}
+					{% endfor %}
+				</ul>
+			</li>
+		{% endif %}
+		{% if links|length >= 1%}
+			<li class="ilo--breadcrumb--item final">
+				<a class="ilo--breadcrumb--link" href="{{lastlink.url}}">
+					<span class="ilo--breadcrumb--link--label">{{lastlink.label}}</span>
+				</a>
+			</li>
+		{% endif %}
+	</ol>
+</nav>

package/dist/components/breadcrumb/breadcrumb.wingsuit.yml

@@ -0,0 +1,36 @@
+breadcrumb:
+  namespace: Components/Navigation
+  use: "@components/breadcrumb/breadcrumb.twig"
+  label: Breadcrumb
+  description: A component for displaying links in a "breadcrumb" ux
+  fields:
+    home:
+      type: object
+      label: Home
+      description: url and label for link to site home page
+      required: true
+      preview:
+        label: "Home"
+        url: "/"
+    links:
+      type: object
+      label: Home
+      description: the links to display in the breadcrumb
+      required: true
+      preview:
+        - label: "Link One"
+          url: "/linkone"
+        - label: "Link Two"
+          url: "/linktwo"
+        - label: "Link Three a long link that will wrap to the next line"
+          url: "/linkthree"
+        - label: "Link Four"
+          url: "/linkfour"
+        - label: "Link Five"
+          url: "/linkfive"
+    className:
+      type: string
+      label: className
+      description: optional class name
+      preview: "storybook"
+  visibility: storybook

package/dist/components/button/button.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--button{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;padding:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;border-top-left-radius:2px;border-top-right-radius:2px}.ilo--button,.ilo--button .button__label,.ilo--button .link__label{display:inline-block}.ilo--button.icon{position:relative}.ilo--button.icon .ilo--icon{height:100%;max-height:1.7148981779rem;max-width:1.7148981779rem;position:absolute;width:100%}.ilo--button.icon.icon__position--left .button__label,.ilo--button.icon.icon__position--left .link__label{padding-left:2.5723472669rem}.ilo--button.icon.icon__position--left .ilo--icon{left:.6966773848rem;top:.3751339764rem}.ilo--button.icon.icon__position--right .button__label,.ilo--button.icon.icon__position--right .link__label{padding-right:2.5723472669rem}.ilo--button.icon.icon__position--right .ilo--icon{right:.6966773848rem;top:.3751339764rem}.ilo--button.icon--only .button__label{width:1px;height:1px;margin:-1px;padding:0;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.ilo--button--large .button__label,.ilo--button--large .link__label{padding:.6430868167rem 1.2861736334rem;font-size:18.66px;letter-spacing:-.02em;line-height:120%}.ilo--button--large.icon--only{height:2.4115755627rem;width:2.4115755627rem}.ilo--button--large.icon--only .ilo--icon{left:.2411575563rem;top:.2411575563rem}.ilo--button--medium .button__label,.ilo--button--medium .link__label{padding:.4287245445rem 1.0718113612rem;font-size:16px;letter-spacing:-.02em;line-height:120%}.ilo--button--medium.icon .ilo--icon{max-height:1.6077170418rem;max-width:1.6077170418rem;position:absolute}.ilo--button--medium.icon.icon__position--left .button__label,.ilo--button--medium.icon.icon__position--left .link__label{padding-left:2.3579849946rem}.ilo--button--medium.icon.icon__position--left .ilo--icon{left:.5359056806rem;top:.1607717042rem}.ilo--button--medium.icon.icon__position--right .button__label,.ilo--button--medium.icon.icon__position--right .link__label{padding-right:2.3579849946rem}.ilo--button--medium.icon.icon__position--right .ilo--icon{right:.5359056806rem;top:.1607717042rem}.ilo--button--medium.icon--only{height:1.9292604502rem;width:1.9292604502rem}.ilo--button--medium.icon--only .ilo--icon{left:.1071811361rem;top:.1071811361rem}.ilo--button--small .button__label,.ilo--button--small .link__label{padding:.2143622722rem .857449089rem;font-size:14.93px;letter-spacing:-.02em;line-height:120%}.ilo--button--small.icon .ilo--icon{max-height:1.5005359057rem;max-width:1.5005359057rem;position:absolute}.ilo--button--small.icon.icon__position--left .button__label,.ilo--button--small.icon.icon__position--left .link__label{padding-left:1.9292604502rem}.ilo--button--small.icon.icon__position--left .ilo--icon{left:.3215434084rem;top:.0535905681rem}.ilo--button--small.icon.icon__position--right .button__label,.ilo--button--small.icon.icon__position--right .link__label{padding-right:1.9292604502rem}.ilo--button--small.icon.icon__position--right .ilo--icon{right:.3215434084rem;top:.0535905681rem}.ilo--button--small.icon--only{height:1.3933547696rem;width:1.3933547696rem}.ilo--button--small.icon--only .ilo--icon{left:.026795284rem;top:.026795284rem}.ilo--button--primary{background-color:#ffcd2d;border:2px solid #ffcd2d;color:#230050}.ilo--button:focus{background-color:#fff;border:2px solid #ffcd2d;box-shadow:inset 4px 4px 0 1px #ffcd2d,inset -4px -4px 0 1px #ffcd2d;color:#230050;outline:0;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button:focus.ilo--button--small{box-shadow:inset 3px 3px 0 1px #ffcd2d,inset -3px -3px 0 1px #ffcd2d}.ilo--button:hover{background-color:#ebf5fd;border:2px solid #1e2dbe;box-shadow:none;color:#1e2dbe;cursor:pointer;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button:hover.ilo--button--small{box-shadow:none}.ilo--button:active{background-color:#1e2dbe;border:2px solid #1e2dbe;box-shadow:none;color:#ebf5fd;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button:active.ilo--button--small{box-shadow:none}.ilo--button:disabled{opacity:.45;pointer-events:none}.ilo--button--secondary{background-color:#fff;border:1.5px solid #b8c4cc;color:#230050}.ilo--button--secondary,.ilo--button--secondary:hover{transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button--secondary:hover{background-color:#ebf5fd;border:1.5px solid #1e2dbe}.ilo--button--secondary:active{background-color:#1e2dbe;border:2px solid #1e2dbe;box-shadow:none;color:#ebf5fd;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button--secondary:active.ilo--button--small{box-shadow:none}.ilo--button--tertiary{background-color:#edf0f2;border:2px solid #edf0f2;color:#230050}.ilo--button--alert,.ilo--button--tertiary{transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button--alert{background-color:#c8303c;border:1.5px solid #c8303c;color:#fff}.ilo--button--alert:hover{background-color:#ebf5fd;border:1.5px solid #1e2dbe;color:#1e2dbe}.ilo--button--alert:focus,.ilo--button--alert:hover{transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button--alert:focus{background-color:#fff;border:2px solid #ffcd2d;color:#230050;outline:0}.ilo--button--alert:active{background-color:#1e2dbe;border:2px solid #1e2dbe;box-shadow:none;color:#ebf5fd;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button--alert:active.ilo--button--small{box-shadow:none}[id*=story--components-button] div .ilo--button{margin-right:10px;margin-bottom:10px}[id*=story--components-button] div .ilo--button--large.icon--only{transform:translateY(-6px)}[id*=story--components-button] div .ilo--button--medium.icon--only,[id*=story--components-button] div .ilo--button--small.icon--only{transform:translateY(-5px)}

package/dist/components/button/button.twig

@@ -0,0 +1,23 @@
+{#
+  BUTTON COMPONENT
+#}
+{% if url %}
+	<a class="ilo--button ilo--button--{{size}} ilo--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" href="{{url}}" {% if target is defined and target != 'false' %} target="{{target}}" rel="noopener noreferrer" {% endif %} {% if disabled is defined and disabled == 'true' %} disabled {% endif %}>
+		<span class="link__label">{{label}}</span>
+		{% block button_icon %}
+			{% if icon %}
+				{% include '@components/icon/icon.twig' with {
+					prefix: prefix,
+					name: icon.name,
+					size: icon.size,
+					color: icon.color
+				} only %}
+			{% endif %}
+		{% endblock %}
+	</a>
+{% else %}
+	<button class="ilo--button ilo--button--{{size}} ilo--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" {% if kind %} type="{{kind}}" {% endif %} {% if opensmodal %} aria-haspopup="dialog" {% endif %} {% if disabled is defined and disabled == 'true' %} disabled {% endif %} {% if name %} name="{{name}}" {% endif %}>
+		<span class="button__label">{{label}}</span>
+		{{ block("button_icon") }}
+	</button>
+{% endif %}

package/dist/components/button/button.wingsuit.yml

@@ -0,0 +1,114 @@
+button:
+  namespace: Components/User Interface
+  use: "@components/button/button.twig"
+  label: Button
+  description: A button or a link styled like a button.
+  fields:
+    label:
+      type: string
+      label: Label
+      description: The label for the button
+      preview: "Button"
+      required: true
+    name:
+      type: string
+      label: Name
+      description: The name for the button
+      preview: "button"
+      required: false
+    url:
+      type: string
+      label: url
+      description: The url for the button if it's a link
+      preview: ""
+      required: false
+    target:
+      type: object
+      label: target
+      description: Should the button open in a new tab? If so, include the name of the tab. Only evaluated if the url field is populated.
+      preview: "true"
+      required: false
+    icon:
+      type: object
+      label: Icon
+      description: Optional icon to include in button. See the `Icon` component for a full list of arguments
+      preview:
+        name: "add"
+        size: 24
+      required: false
+    className:
+      type: string
+      label: Class name
+      description: optional class name
+      preview: "optionalclass"
+      required: false
+  settings:
+    size:
+      type: select
+      label: Size
+      description: The size of the button.
+      required: true
+      options:
+        small: Small
+        medium: Medium
+        large: Large
+      preview: "large"
+    type:
+      type: select
+      label: Type
+      description: The type of button.
+      required: true
+      options:
+        primary: Primary
+        secondary: Secondary
+        tertiary: Tertiary
+        alert: Alert
+        icononly: Icon Only
+      preview: "primary"
+    disabled:
+      type: select
+      label: Disabled
+      description: The disabled state of the button.
+      required: false
+      options:
+        "true": "true"
+        "false": "false"
+      preview: "false"
+    kind:
+      type: select
+      label: Kind
+      description: What kind of functionality does the button have?
+      required: false
+      options:
+        button: button
+        reset: reset
+        submit: submit
+      preview: "button"
+    iconPosition:
+      type: select
+      label: Icon Position
+      description: if there's an icon, where is it in the button?
+      options:
+        left: left
+        right: right
+      preview: left
+      required: false
+    icononly:
+      type: select
+      label: Icon Only
+      description: Is this an icon-only button?
+      options:
+        "true": "true"
+        "false": "false"
+      preview: "false"
+      required: false
+    opensmodal:
+      type: select
+      label: Opens Modal
+      description: Does this button trigger open a modal?
+      options:
+        "true": "true"
+        "false": "false"
+      preview: "false"
+      required: false
+  visibility: storybook

package/dist/components/callout/callout.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 i=e[Symbol.toPrimitive];if(void 0!==i){var l=i.call(e,t||"default");if("object"!=typeof l)return l;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,i){for(var l=0;l<i.length;l++){var n=i[l];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,e(n.key),n)}}var i="click",l=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.toggleLabel="",this.init()},(l=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),!this.toggleOpen&&this.toggleCollapsible&&this.calcHeight(),this}},{key:"cacheDomReferences",value:function(){return this.toggle=this.element.querySelector(".ilo--callout--toggle"),this.toggleOpen=this.element.classList.value.includes("callout--open"),this.toggleCollapsible=this.element.classList.value.includes("callout--collapse"),this.toggle&&(this.toggleLabel=this.toggle.querySelector(".ilo--callout--button-text"),this.toggleLabelOpen=this.toggle.getAttribute("data-open"),this.toggleLabelClosed=this.toggle.getAttribute("data-closed")),this.button=this.element.querySelector(".ilo--button"),this}},{key:"setupHandlers",value:function(){return this.onToggle=this.handleToggle.bind(this),this.onClick=this.handleClick.bind(this),this}},{key:"enable",value:function(){return this.toggle&&this.toggle.addEventListener(i,this.onToggle),this.button&&this.button.addEventListener(i,this.onClick),this}},{key:"calcHeight",value:function(){return this.header=this.element.querySelector('[class*="--header"]'),this.height=this.header.offsetHeight,this.element.style.maxHeight="".concat(this.height+25,"px"),this}},{key:"handleClick",value:function(){return this}},{key:"handleToggle",value:function(e){e.preventDefault(),this.toggleOpen=!this.toggleOpen;var t=this.toggleOpen?this.toggleLabelOpen:this.toggleLabelClosed;return this.element.classList.toggle("ilo--callout--open"),this.toggleLabel.innerText=t,this}}])&&t(e.prototype,l),n&&t(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,l,n}();Drupal.behaviors.callout={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Callout"]'),(function(e){e.dataset.jsProcessed||(new l(e),e.dataset.jsProcessed=!0)}))}}}));

package/dist/components/callout/callout.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--callout{display:flex;transition:max-height 225ms ease-out}.ilo--callout--collapse:not(.ilo--callout--open){max-height:64px;overflow:hidden}.ilo--callout--open{max-height:300px;overflow:hidden}.ilo--callout--open .ilo--callout--toggle--icon{transform:translateY(-50%) rotate(180deg)}.ilo--callout--sidebar{display:flex;flex-direction:column;align-items:center;padding:1.0718113612rem .4287245445rem;width:2.1436227224rem}.ilo--callout--sidebar .ilo--callout--icon{margin:.2143622722rem}.ilo--callout--content{padding:1.2861736334rem;width:100%;font-size:.8001071811rem}.ilo--callout--header{display:flex;justify-content:space-between;padding-bottom:.6430868167rem}.ilo--callout--title{font-weight:700}.ilo--callout--title,.ilo--callout--toggle{font-size:16px;letter-spacing:-.02em;line-height:21.6px;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif}.ilo--callout--toggle{background:0 0;border:none;color:#230050;cursor:pointer;font-weight:500;padding-right:1.7148981779rem;position:relative}.ilo--callout--toggle--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='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E");background-position:100%;background-repeat:no-repeat;display:inline-block;height:24px;position:absolute;right:0;top:11px;transform:translateY(-50%) rotate(0);transition:transform 225ms ease-out;width:24px}.ilo--callout--footer{padding-top:1.0718113612rem}.ilo--callout .icon{background-repeat:no-repeat;background-size:contain;display:block;height:16px;width:16px}.ilo--callout .icon--error{background-color:#fa3c4b;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFF' d='M11.31 0H4.69L0 4.69v6.62L4.69 16h6.62L16 11.31V4.69L11.31 0zM8 12a1 1 0 0 1-1-.89V11a1 1 0 0 1 .89-1H8a1 1 0 0 1 1 .89V11a1 1 0 0 1-.89 1H8zm1-3H7V4h2v5z'/%3E%3C/svg%3E")}.ilo--callout .icon--info{background-color:#1e2dbe;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23FFF' d='M8 0C6.4 0 4.9.5 3.6 1.3c-1.4.9-2.4 2.2-3 3.6C0 6.4-.2 8 .2 9.6c.3 1.6 1.1 3 2.2 4.1 1.1 1.1 2.5 1.9 4.1 2.2s3.2.2 4.6-.5c1.5-.6 2.7-1.6 3.6-2.9.8-1.4 1.3-2.9 1.3-4.5 0-2.1-.8-4.2-2.3-5.7C12.2.8 10.1 0 8 0zm0 14c-1.2 0-2.3-.4-3.3-1-1-.7-1.8-1.6-2.2-2.7C2 9.2 1.9 8 2.1 6.8c.2-1.2.8-2.2 1.6-3.1.8-.8 1.9-1.4 3.1-1.6 1.2-.2 2.4-.1 3.5.4s2 1.2 2.7 2.2c.7 1 1 2.1 1 3.3 0 1.6-.6 3.1-1.8 4.2C11.1 13.4 9.6 14 8 14z'/%3E%3Cpath fill='%23FFF' d='M9 7H7v5h2V7zM8 6c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z'/%3E%3C/svg%3E")}.ilo--callout .icon--success{background-color:#8ce164;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFF' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E")}.ilo--callout .icon--warning{background-color:#ffcd2d;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath fill='%23FFF' d='M16.797 13.03l-6.32-11.65a1.59 1.59 0 0 0-.68-.68 1.69 1.69 0 0 0-2.28.68l-6.32 11.65a1.68 1.68 0 0 0 .68 2.27c.25.13.528.2.81.2h12.62c.28 0 .554-.068.8-.2a1.671 1.671 0 0 0 .7-2.26l-.01-.01zm-7.8.47a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm1-3.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4z'/%3E%3C/svg%3E")}.ilo--callout--error{background:#fed8db}.ilo--callout--error .ilo--callout--sidebar{background:#fa3c4b}.ilo--callout--info{background:#bedcfa}.ilo--callout--info .ilo--callout--sidebar{background:#1e2dbe}.ilo--callout--success{background:#e8f9e0}.ilo--callout--success .ilo--callout--sidebar{background:#8ce164}.ilo--callout--warning{background:#fff5c8}.ilo--callout--warning .ilo--callout--sidebar{background:#ffcd2d}

package/dist/components/callout/callout.twig

@@ -0,0 +1,41 @@
+{#
+  CALLOUT COMPONENT
+#}
+<div class="ilo--callout ilo--callout--{{alert}} {% if isCollapsible == "true" and isOpen == "true" %} ilo--callout--open {% endif %} {% if isCollapsible == "true" %} ilo--callout--collapse {% endif %}" data-loadcomponent="Callout">
+	<div class="ilo--callout--sidebar">
+		<span class="ilo--callout--icon icon icon--{{alert}}"></span>
+	</div>
+	<div class="ilo--callout--content">
+		<div class="ilo--callout--header">
+			<h5 class="ilo--callout--title">{{ title }}</h5>
+			{% if isCollapsible == "true" %}
+				<button class="ilo--callout--toggle" type="button" data-open="{{ toggleOpenLabel }}" data-closed="{{ toggleClosedLabel }}">
+					<span class="ilo--callout--button-text">
+						{% if isOpen %}
+							{{ toggleOpenLabel }}
+						{% else %}
+							{{ toggleClosedLabel }}
+						{% endif %}
+					</span>
+					<span class="ilo--callout--toggle--icon" role="presentation"></span>
+				</button>
+			{% endif %}
+		</div>
+		{{ content }}
+		{% if button %}
+			<div class="ilo--callout--footer">
+				{% include '@components/button/button.twig' with {
+          label: button.label,
+          url: button.url,
+          target: button.target,
+          icon: button.icon,
+          className: button.className,
+          icon: button.icon,
+          iconPosition: button.iconPosition,
+          size: "small",
+          type: "secondary",
+        } %}
+			</div>
+		{% endif %}
+	</div>
+</div>

package/dist/components/callout/callout.wingsuit.yml

@@ -0,0 +1,72 @@
+callout:
+  namespace: Components/Feedback
+  use: "@components/callout/callout.twig"
+  label: Callout
+  description: A callout alert section with a few different types
+  fields:
+    button:
+      type: object
+      label: Button Label
+      description: Fields to pass to the button if there is one
+      required: false
+      preview:
+        label: "Button"
+        url: "https://www.ilo.org"
+        target: "_blank"
+        icon: false
+        className: "optionalclass"
+    content:
+      type: text
+      label: Content
+      description: The callout's content
+      preview:
+        faker: lorem.paragraph(3)
+    title:
+      type: string
+      label: Notification Title
+      description: Title for the notification
+      preview: "Optional Title"
+      required: false
+    toggleOpenLabel:
+      type: string
+      label: Open Label for the collapse toggle
+      description: If there is a collapse toggle, this is the label
+      preview: "More"
+      required: false
+    toggleClosedLabel:
+      type: string
+      label: Closed Label for the collapse toggle
+      description: If there is a collapse toggle, this is the label
+      preview: "Less"
+      required: false
+  settings:
+    alert:
+      type: select
+      label: Alert
+      description: Alert type
+      required: true
+      options:
+        info: Info
+        error: Error
+        success: Success
+        warning: Warning
+      preview: "info"
+    isCollapsible:
+      type: select
+      label: Is Collapsible?
+      description: Whether or not the callout is collapsible
+      required: "true"
+      options:
+        "true": "true"
+        "false": "false"
+      preview: false
+    isOpen:
+      type: select
+      label: Is Open
+      description: Whether or not a collapsible callout is open on page load. If callout is not collapsible then the callout will be open always.
+      required: false
+      options:
+        "true": "true"
+        "false": "false"
+      preview: "true"
+  visibility: storybook

package/dist/components/card/card.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--card{box-sizing:border-box;position:relative;background-color:#fff;max-width:var(--max-width);flex:1 1 var(--max-width)}.ilo--card__size__fluid{--max-width:100%!important}.ilo--card__action:focus,.ilo--card__action:focus-within,.ilo--card__action:hover{background:#fff;outline:0;text-decoration:none}.ilo--card__action:focus-within.ilo--card__dark,.ilo--card__action:focus.ilo--card__dark,.ilo--card__action:hover.ilo--card__dark{background:#fff}.ilo--card__action:focus-within .ilo--card--date,.ilo--card__action:focus-within .ilo--card--date-extra,.ilo--card__action:focus-within .ilo--card--eyebrow,.ilo--card__action:focus-within .ilo--card--intro,.ilo--card__action:focus-within .ilo--card--title,.ilo--card__action:focus .ilo--card--date,.ilo--card__action:focus .ilo--card--date-extra,.ilo--card__action:focus .ilo--card--eyebrow,.ilo--card__action:focus .ilo--card--intro,.ilo--card__action:focus .ilo--card--title,.ilo--card__action:hover .ilo--card--date,.ilo--card__action:hover .ilo--card--date-extra,.ilo--card__action:hover .ilo--card--eyebrow,.ilo--card__action:hover .ilo--card--intro,.ilo--card__action:hover .ilo--card--title{color:#1e2dbe}.ilo--card__theme__light{background:#fff}.ilo--card__theme__dark{background:#230050;transition:background .25s ease-out}.ilo--card__theme__dark .ilo--card--date,.ilo--card__theme__dark .ilo--card--eventdate,.ilo--card__theme__dark .ilo--card--eyebrow,.ilo--card__theme__dark .ilo--card--intro,.ilo--card__theme__dark .ilo--card--title{color:#edf0f2;transition:color .25s ease-out}.ilo--card__isvideo .ilo--card--image--wrapper{position:relative}.ilo--card__isvideo .ilo--card--image--wrapper:before{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='%23EDF0F2' d='M22 12L4 2v20l18-10z'/%3E%3C/svg%3E");background-color:#2d2d2d;background-position:50%;background-size:18px 20px;background-repeat:no-repeat;content:"";display:block;height:40px;left:0;position:absolute;top:0;width:40px;z-index:1}.ilo--card--wrap{height:100%}.ilo--card--wrapper{max-width:var(--max-width);transition:filter .25s ease-out}.ilo--card--wrapper:focus,.ilo--card--wrapper:focus-within,.ilo--card--wrapper: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))}.ilo--card--link{background:0 0;color:transparent;height:100%;left:0;position:absolute;text-decoration:none;top:0;width:100%;z-index:2;transition-property:color,background-color,border-color,opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus,.ilo--card--link:focus-within,.ilo--card--link:hover{outline:0;transition-property:color,background-color,border-color,opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--eyebrow,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--eyebrow,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--eyebrow{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--title,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--title,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--title{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--intro,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--intro,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--intro{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--date,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--date,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--date{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--eventdate,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--eventdate,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--eventdate{color:#1e2dbe}.ilo--card--link--text{width:1px;height:1px;margin:-1px;padding:0;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.ilo--card--eyebrow{color:#960a55;font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:.6430868167rem;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus-within .ilo--card--eyebrow,.ilo--card--link:focus .ilo--card--eyebrow,.ilo--card--link:hover .ilo--card--eyebrow{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--title{color:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:-.0313772776rem;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus-within .ilo--card--title,.ilo--card--link:focus .ilo--card--title,.ilo--card--link:hover .ilo--card--title{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--intro{color:#2d2d2d;font-size:16px;letter-spacing:normal;line-height:23.36px;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out;margin-bottom:1.7148981779rem}.ilo--card--link:focus-within .ilo--card--intro,.ilo--card--link:focus .ilo--card--intro,.ilo--card--link:hover .ilo--card--intro{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--date{color:#6d6d6d;font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.3742266073rem;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus-within .ilo--card--date,.ilo--card--link:focus .ilo--card--date,.ilo--card--link:hover .ilo--card--date{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--event-date{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.3742266073rem}.ilo--card--picture{max-width:100%;width:100%}.ilo--card--cta{position:relative;z-index:2}

package/dist/components/card/card.twig

@@ -0,0 +1,24 @@
+{#
+  CARD COMPONENT
+#}
+{% if type == "" %}
+  {% set type = variant %}
+{% endif %}
+
+{% if type == "data" %}
+  {% include "@components/card_data/card_data.twig" %}
+{% elseif type == "detail" %}
+  {% include "@components/card_detail/card_detail.twig" %}
+{% elseif type == "factlist" %}
+  {% include "@components/card_factlist/card_factlist.twig" %}
+{% elseif type == "feature" %}
+  {% include "@components/card_feature/card_feature.twig" %}
+{% elseif type == "multilink" %}
+  {% include "@components/card_multilink/card_multilink.twig" %}
+{% elseif type == "promo" %}
+  {% include "@components/card_promo/card_promo.twig" %}
+{% elseif type == "stat" %}
+  {% include "@components/card_stat/card_stat.twig" %}
+{% elseif type == "text" %}
+  {% include "@components/card_text/card_text.twig" %}
+{% endif %}