@ilo-org/twig 1.0.4 → 1.1.0

package/dist/components/accordion/accordion.css

@@ -1 +1 @@
-@charset "UTF-8";.ilo--accordion--button{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:0;padding-block:.857449089rem;padding-inline-end:2.3579849946rem;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;transition:all .5s ease-in-out;font-size:16px;letter-spacing:-.02em;line-height:21.6px;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-block:1.0718113612rem;padding-inline-end:2.3579849946rem}.ilo--accordion--button:focus,.ilo--accordion--button:hover{background-color:#ebf5fd;border-top-color:#1e2dbe;color:#1e2dbe;fill:#1e2dbe;cursor:pointer}.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:2.3579849946rem}}.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}
+@charset "UTF-8";.ilo--accordion--button{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:0;padding-block:.857449089rem;padding-inline-end:2.3579849946rem;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;transition:all .5s ease-in-out;font-size:16px;letter-spacing:-.02em;line-height:21.6px;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-block:1.0718113612rem;padding-inline-end:2.3579849946rem}.ilo--accordion--button:focus,.ilo--accordion--button:hover{background-color:#ebf5fd;border-top-color:#1e2dbe;color:#1e2dbe;fill:#1e2dbe;cursor:pointer}.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:2.3579849946rem}}.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;padding-inline-end:1.7148981779rem}.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}

package/dist/components/accordion/accordion.twig

@@ -1,6 +1,6 @@
 {# accordion.twig #}
 
-<ul class="ilo--accordion" data-loadcomponent="Accordion" {% if allowMultipleExpanded %} data-multipleexpanded {% endif %}>
+<ul class="ilo--accordion" data-loadcomponent="Accordion"{{ allowMultipleExpanded|boolval ? ' data-multipleexpanded' }}>
 	{% for item in items %}
 		{% include "@components/accordion/accordion-item.twig" with {
         label: item.label,

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

@@ -33,13 +33,10 @@ accordion:
         large: Large
       preview: small
     allowMultipleExpanded:
-      type: select
+      type: boolean
       label: Allow Multiple Expanded
-      description: Allow mutiple accordion items to be expandable at once.
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "true"
+      description: Allow multiple accordion items to be expandable at once.
+      preview: true
       required: false
   variants:
     default:

package/dist/components/button/button.twig

@@ -2,7 +2,7 @@
   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 %}>
+	<a class="ilo--button ilo--button--{{size}} ilo--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly|boolval %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" href="{{url}}" {% if target %} target="{{target}}" rel="noopener noreferrer"{% endif %}{{ disabled|boolval ? ' disabled' }}>
 		<span class="link__label">{{label}}</span>
 		{% block button_icon %}
 			{% if icon %}
@@ -16,7 +16,7 @@
 		{% 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 %}>
+	<button class="ilo--button ilo--button--{{size}} ilo--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly|boolval %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" {% if kind %} type="{{kind}}" {% endif %} {% if opensmodal|boolval %} aria-haspopup="dialog" {% endif %}{{ disabled|boolval ? ' disabled' }}{% if name %} name="{{name}}" {% endif %}>
 		<span class="button__label">{{label}}</span>
 		{{ block("button_icon") }}
 	</button>

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

@@ -66,14 +66,11 @@ button:
         icononly: Icon Only
       preview: "primary"
     disabled:
-      type: select
+      type: boolean
       label: Disabled
       description: The disabled state of the button.
       required: false
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "false"
+      preview: false
     kind:
       type: select
       label: Kind
@@ -94,21 +91,15 @@ button:
       preview: left
       required: false
     icononly:
-      type: select
+      type: boolean
       label: Icon Only
       description: Is this an icon-only button?
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "false"
+      preview: false
       required: false
     opensmodal:
-      type: select
+      type: boolean
       label: Opens Modal
       description: Does this button trigger open a modal?
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "false"
+      preview: false
       required: false
   visibility: storybook

package/dist/components/callout/callout.twig

@@ -1,14 +1,14 @@
 {#
   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 ilo--callout--{{alert}} {% if isCollapsible|boolval and isOpen|boolval %} ilo--callout--open {% endif %} {% if isCollapsible|boolval %} 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" %}
+			{% if isCollapsible|boolval %}
 				<button class="ilo--callout--toggle" type="button" data-open="{{ toggleOpenLabel }}" data-closed="{{ toggleClosedLabel }}">
 					<span class="ilo--callout--button-text">
 						{% if isOpen %}

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

@@ -52,21 +52,15 @@ callout:
         warning: Warning
       preview: "info"
     isCollapsible:
-      type: select
+      type: boolean
       label: Is Collapsible?
       description: Whether or not the callout is collapsible
-      required: "true"
-      options:
-        "true": "true"
-        "false": "false"
+      required: true
       preview: false
     isOpen:
-      type: select
+      type: boolean
       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"
+      preview: true
   visibility: storybook

package/dist/components/card/card.wingsuit.yml

@@ -150,14 +150,11 @@ card:
         two: two
       preview: "one"
     cornercut:
-      type: select
-      label: cornercut
-      description: Allows user to set the cornercut of the card. This is only used by the `Promo Card`.
+      type: boolean
+      label: Corner cut
+      description: Allows user to display a corner cut on the card. This is only used by the `Promo Card`.
       required: false
-      preview: "true"
-      options:
-        "true": "true"
-        "false": "false"
+      preview: true
     size:
       type: select
       label: Size

package/dist/components/card_detail/card_detail.twig

@@ -2,7 +2,7 @@
   DETAIL CARD COMPONENT
 #}
 
-<div class="ilo--card ilo--card__type__detail ilo--card__action ilo--card__size__{{size}} {% if isvideo %} ilo--card__isvideo {% endif %}">
+<div class="ilo--card ilo--card__type__detail ilo--card__action ilo--card__size__{{size}} {% if isvideo|boolval %} ilo--card__isvideo {% endif %}">
 	<a class="ilo--card--link" href="{{link}}" title="{{title}}">
 		<span class="ilo--card--link--text">{{title}}</span>
 	</a>

package/dist/components/card_detail/card_detail.wingsuit.yml

@@ -62,13 +62,10 @@ detailcard:
         wide: wide
         fluid: fluid
     isvideo:
-      type: select
+      type: boolean
       label: Is a Video
       description: Whether the card should display a video icon (for Feature card)
-      preview: "false"
-      options:
-        "true": "true"
-        "false": "false"
+      preview: false
     titleLevel:
       type: select
       label: Title Element

package/dist/components/card_feature/card_feature.twig

@@ -2,7 +2,7 @@
   FEATURE CARD COMPONENT
 #}
 
-<div class="ilo--card ilo--card__type__feature ilo--card__action ilo--card__theme__{{theme}} ilo--card__size__{{ size }} {% if isvideo %} ilo--card__isvideo {% endif %} {% if cta %} ilo--card__linklist {% endif %}">
+<div class="ilo--card ilo--card__type__feature ilo--card__action ilo--card__theme__{{theme}} ilo--card__size__{{ size }} {% if isvideo|boolval %} ilo--card__isvideo {% endif %} {% if cta %} ilo--card__linklist {% endif %}">
 	<a class="ilo--card--link" href="{{link}}" title="{{title}}">
 		<span class="ilo--card--link--text">{{title}}</span>
 	</a>

package/dist/components/card_feature/card_feature.wingsuit.yml

@@ -52,13 +52,10 @@ featurecard:
       preview: Can digital technology be an equality machine?
   settings:
     isvideo:
-      type: select
+      type: boolean
       label: Is a Video
       description: Whether the card should display a video icon (for Feature card)
-      preview: "false"
-      options:
-        "true": "true"
-        "false": "false"
+      preview: false
     size:
       type: select
       label: size

package/dist/components/card_multilink/card_multilink.twig

@@ -1,6 +1,6 @@
 {# card_multilink.twig #}
 
-<div class="ilo--card ilo--card__type__multilink {% if link|length > 0 %} ilo--card__action {% endif %} ilo--card__size__{{size}} {% if isvideo %} ilo--card__isvideo {% endif %} {% if linklist %} ilo--card__linklist {% endif %} {% if size == "wide" or size == "fluid" %} ilo--card__align__{{alignment}} {% endif %}">
+<div class="ilo--card ilo--card__type__multilink {% if link|length > 0 %} ilo--card__action {% endif %} ilo--card__size__{{size}} {% if isvideo|boolval %} ilo--card__isvideo {% endif %} {% if linklist %} ilo--card__linklist {% endif %} {% if size == "wide" or size == "fluid" %} ilo--card__align__{{alignment}} {% endif %}">
 	{% if link|length > 0 %}
 		<a class="ilo--card--link" href="{{link}}" title="{{title}}">
 			<span class="ilo--card--link--text">{{title}}</span>

package/dist/components/card_multilink/card_multilink.wingsuit.yml

@@ -71,13 +71,10 @@ multilinkcard:
         left: Left
         right: Right
     isvideo:
-      type: select
+      type: boolean
       label: is a Video
       description: Whether the card should display a video icon (for Feature card)
-      preview: "false"
-      options:
-        "true": "true"
-        "false": "false"
+      preview: false
     size:
       type: select
       label: Size

package/dist/components/card_promo/card_promo.twig

@@ -3,7 +3,7 @@
 #}
 
 <div class="ilo--card--wrapper ilo--card--wrapper__type__promo ilo--card--wrapper__type__promo__size__{{ size }}">
-	<div class="ilo--card ilo--card__type__promo ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}} {% if cornercut %}ilo--card__cornercut{% endif %}">
+	<div class="ilo--card ilo--card__type__promo ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}} {% if cornercut|boolval %}ilo--card__cornercut{% endif %}">
 		<a class="ilo--card--link" href="{{link}}" title="{{title}}">
 			<span class="ilo--card--link--text">{{title}}</span>
 		</a>

package/dist/components/card_promo/card_promo.wingsuit.yml

@@ -41,14 +41,11 @@ promocard:
       preview: Can digital technology be an equality machine?
   settings:
     cornercut:
-      type: select
+      type: boolean
       label: cornercut
       description: Sets the cornercut of the card. If not set, the card will appear as `square`.
       required: false
-      preview: "true"
-      options:
-        "true": "true"
-        "false": "false"
+      preview: true
     size:
       type: select
       label: Size

package/dist/components/cardgroup/cardgroup.twig

@@ -5,7 +5,7 @@
 	{% set cardcount = "three" %}
 {% endif %}
 
-<div class="ilo--cardgroup ilo--cardgroup__count__{{cardcount}} {% if collapsed %} ilo--cardgroup__collapsed {% endif %}">
+<div class="ilo--cardgroup ilo--cardgroup__count__{{cardcount}} {% if collapsed|boolval %} ilo--cardgroup__collapsed {% endif %}">
 	<div class="ilo--cardgroup--inner">
 		{% for card in group %}
 			<div class="ilo--cardgroup--card">

package/dist/components/cardgroup/cardgroup.wingsuit.yml

@@ -6,14 +6,11 @@ cardgroup:
   visibility: storybook
   settings:
     collapsed:
-      type: select
+      type: boolean
       label: collapsed
       description: Optionally collapses margins between the cards.
       required: false
-      preview: "false"
-      options:
-        "true": "true"
-        "false": "false"
+      preview: false
     cardcount:
       type: select
       label: collapsed

package/dist/components/contextmenu/contextmenu.twig

@@ -3,7 +3,7 @@
 #}
 <ol class="ilo--context-menu">
 	{% for link in links %}
-		<li class="ilo--context-menu--item{% if link.endsection == 'true' %} endsection{% endif %}">
+		<li class="ilo--context-menu--item{{ link.endsection|boolval ? ' endsection'}}">
 			<a href="{{link.url}}" class="ilo--context-menu--link">
 				<span class="ilo--context-menu--label">{{link.label}}</span>
 			</a>

package/dist/components/contextmenu/contextmenu.wingsuit.yml

@@ -14,7 +14,7 @@ contextmenu:
           url: "http://www.google.com"
         - label: Link Two
           url: "http://www.google.com"
-        - endsection: "true"
+        - endsection: true
           label: Link Three Ends A Section
           url: "http://www.google.com"
         - label: Link Four

package/dist/components/fileupload/fileupload.twig

@@ -14,7 +14,7 @@
 	<div class="{{ fileUploadClasses|join(' ') }}">
 		<label class="{{ inputClass }}">
 			{{ placeholder }}
-			<input id="{{ id|default(name) }}" name="{{ name }}" {% if disabled %} disabled {% endif %} {% if multiple %} multiple {% endif %} placeholder="{{ placeholder }}" {% if required %} required {% endif %} type="file" data-label="{{ placeholder }}" aria-describedby="{{ ariaDescribedBy }}" {% if accept %} accept="{{ accept }}" {% endif %} data-loadcomponent="FileUpload" data-prefix="ilo"/>
+			<input id="{{ id|default(name) }}" name="{{ name }}" {% if disabled %} disabled {% endif %} {% if multiple|boolval %} multiple {% endif %} placeholder="{{ placeholder }}" {% if required %} required {% endif %} type="file" data-label="{{ placeholder }}" aria-describedby="{{ ariaDescribedBy }}" {% if accept %} accept="{{ accept }}" {% endif %} data-loadcomponent="FileUpload" data-prefix="ilo"/>
 		</label>
 	</div>
 {% endblock %}

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

@@ -71,10 +71,7 @@ fileupload:
       type: boolean
       label: Multiple
       description: If the user can select multiple files.
-      preview: "false"
-      options:
-        "true": "true"
-        "false": "false"
+      preview: false
     disabled:
       type: boolean
       label: Disabled

package/dist/components/hero/hero.twig

@@ -55,7 +55,7 @@
 					{% include '@components/tooltip/tooltip.twig' with {
 						prefix: prefix,
 						label: caption.label,
-						icon: "true",
+						icon: true,
 						theme: "dark",
 						icontheme: "dark"
 					} only %}

package/dist/components/hero/hero.wingsuit.yml

@@ -45,7 +45,7 @@ hero:
         title: "Child labour"
         theme: "dark"
         background: "solid"
-        cornercut: "true"
+        cornercut: true
         eyebrow: ILO Topics
         socialmedia:
           icons:
@@ -164,7 +164,7 @@ hero:
           datecopy: "11 February 2021"
           theme: "light"
           background: "solid"
-          cornercut: "true"
+          cornercut: true
           eyebrow: Women in management
           socialmedia:
             icons:

package/dist/components/herocard/herocard.twig

@@ -1,7 +1,7 @@
 {#
   HEROCARD COMPONENT
 #}
-<div class="ilo--hero-card ilo--hero-card__theme__{{ theme }} ilo--hero-card__background__{{ background }} {% if cornercut == "true" %} ilo--hero-card__cornercut {% endif %}">
+<div class="ilo--hero-card ilo--hero-card__theme__{{ theme }} ilo--hero-card__background__{{ background }} {% if cornercut|boolval %} ilo--hero-card__cornercut {% endif %}">
   {% if eyebrow %}
     <p class="{{ prefix }}--hero-card--eyebrow">{{ eyebrow }}</p>
   {% endif %}

package/dist/components/herocard/herocard.wingsuit.yml

@@ -23,13 +23,10 @@ herocard:
         transparent: transparent
       preview: "solid"
     cornercut:
-      type: select
-      label: Cornercut
+      type: boolean
+      label: Corner cut
       description: Whether the card show have its right or left corner cut
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "true"
+      preview: true
   fields:
     url:
       type: string

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

@@ -46,12 +46,9 @@ image:
           src: "/images/large.jpg"
   settings:
     ishero:
-      type: select
+      type: boolean
       label: Is Hero
       description: Is this image in a hero? If true, and credit exists, will display credit in a title attribute
-      preview: "false"
+      preview: false
       required: false
-      options:
-        "true": "true"
-        "false": "false"
   visibility: storybook

package/dist/components/linklist/linklist.twig

@@ -13,7 +13,7 @@
       {% endif %}
       <ul class="ilo--link-list--links">
         {% for link in group.links %}
-        <li class="ilo--link-list--links--item{% if link.indented == 'true' %} indented{% endif %}">
+        <li class="ilo--link-list--links--item{{ link.indented|boolval ? ' indented'}}">
           <a href="{{link.url}}" class="ilo--link-list--link">
             <span class="ilo--link-list--label">{{link.label}}</span>
           </a>

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

@@ -31,13 +31,13 @@ linklist:
           links:
             - label: Section 2 Link One
               url: "http://www.google.com"
-            - indented: "true"
+            - indented: true
               label: Section 2 Link Two
               url: "http://www.google.com"
-            - indented: "true"
+            - indented: true
               label: Section 2 Link Three
               url: "http://www.google.com"
-            - indented: "true"
+            - indented: true
               label: Section 2 Link Four
               url: "http://www.google.com"
             - label: Section 2 Link Five Is Slightly Longer

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

@@ -78,7 +78,7 @@ localnav:
             url: "http://www.google.com"
           - label: Link Two
             url: "http://www.google.com"
-          - endsection: "true"
+          - endsection: true
             label: Link Three Ends A Section
             url: "http://www.google.com"
           - label: Link Four

package/dist/components/navigation/navigation.wingsuit.yml

@@ -117,7 +117,7 @@ navigation:
             url: "https://www.ilo.org"
           - label: Link Two
             url: "https://www.ilo.org"
-          - endsection: "true"
+          - endsection: true
             label: Link Three Ends A Section
             url: "https://www.ilo.org"
           - label: Link Four

package/dist/components/readmore/readmore.twig

@@ -3,7 +3,7 @@
 #}
 {% set content = excerpt %}
 {% set btnlabel = buttonlabel.closed %}
-{% if openatstart is defined and openatstart == 'true' %}
+{% if openatstart|boolval %}
   {% set content = fulltext %}
   {% set btnlabel = buttonlabel.opened %}
 {% endif %}

package/dist/components/readmore/readmore.wingsuit.yml

@@ -26,12 +26,9 @@ readmore:
       required: true
   settings:
     openatstart:
-      type: select
+      type: boolean
       label: Open At Start
       description: should the read more be open at page load?
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "false"
+      preview: false
       required: true
   visibility: storybook

package/dist/components/table/table.twig

@@ -1,7 +1,7 @@
 {#
   TABLE COMPONENT
 #}
-<div class="ilo--table{% if zebra is defined and zebra == 'true' %} ilo--table--zebra{% endif %}{% if smallrows is defined and smallrows == 'true' %} ilo--table--small{% endif %}" data-prefix="ilo" data-loadcomponent="Table">
+<div class="ilo--table{% if zebra|boolval %} ilo--table--zebra{% endif %}{% if smallrows|boolval %} ilo--table--small{% endif %}" data-prefix="ilo" data-loadcomponent="Table">
   <header class="ilo--table--header">
     <h3 class="ilo--table--headline">
       {{headline}}

package/dist/components/table/table.wingsuit.yml

@@ -92,21 +92,15 @@ table:
           - "01/01/2023"
   settings:
     zebra:
-      type: select
+      type: boolean
       label: Zebra Striping
       description: Should the table display zebra striping?
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "false"
+      preview: false
       required: false
     smallrows:
-      type: select
+      type: boolean
       label: Small Rows
       description: Should the table have rows with a smaller height?
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "false"
+      preview: false
       required: false
   visibility: storybook

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

@@ -24,13 +24,10 @@ tag:
         faker: https://www.google.com/
   settings:
     defaultActive:
-      type: select
+      type: boolean
       label: Default Active
       description: The tag loads in an active state
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "false"
+      preview: false
       required: false
     tagType:
       type: select

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

@@ -23,13 +23,10 @@ tags:
           defaultActive: false
   settings:
     allowMultipleActive:
-      type: select
+      type: boolean
       label: Allow Multiple Active
       description: Allow multiple tag items to be active at once.
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "true"
+      preview: true
       required: false
     tagType:
       type: select

package/dist/components/tooltip/tooltip.twig

@@ -3,8 +3,8 @@
 {% set icontheme = icontheme|default("light") %}
 {% set theme = theme|default("dark") %}
 
-<div class="ilo--tooltip--wrapper {% if icon and icon != "false" %} ilo--tooltip--wrapper__icon ilo--tooltip--wrapper__icon__theme__{{icontheme}} {% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="ilo">
-	{% if not icon or icon == "false" %}
+<div class="ilo--tooltip--wrapper {% if icon|boolval %} ilo--tooltip--wrapper__icon ilo--tooltip--wrapper__icon__theme__{{icontheme}} {% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="ilo">
+	{% if not icon|boolval %}
 		{{ children }}
 	{% endif %}
 	<span data-id={{tooltipId}} id="tooltip" role="tooltip" class="ilo--tooltip ilo--tooltip--{{theme}}" data-alignment="left" >

package/dist/components/tooltip/tooltip.wingsuit.yml

@@ -24,13 +24,10 @@ tooltip:
       preview: "<a href='https://www.google.com/'>This is testing for the tooltip</a>"
   settings:
     icon:
-      type: select
+      type: boolean
       label: Icon
       description: does this tooltip have the "info" icon?
-      options:
-        "true": "true"
-        "false": "false"
-      preview: "true"
+      preview: true
       required: true
     icontheme:
       type: select