@ilo-org/twig 1.0.5 → 1.1.1

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/footer/footer.wingsuit.yml

@@ -50,9 +50,9 @@ footer:
       preview:
         headline: "Stay informed"
         icons:
-          - icon: "twitter"
-            label: "Twitter"
-            url: "https://twitter.com/#!/ilo"
+          - icon: "x"
+            label: "X"
+            url: "https://x.com/ilo"
           - icon: "facebook"
             label: "Facebook"
             url: "https://www.facebook.com/ilo.org"

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,16 +45,16 @@ hero:
         title: "Child labour"
         theme: "dark"
         background: "solid"
-        cornercut: "true"
+        cornercut: true
         eyebrow: ILO Topics
         socialmedia:
           icons:
             - label: "Facebook"
               url: "https://www.facebook.com/ilo.org"
               icon: "facebook"
-            - label: "Twitter"
-              url: "https://www.twitter.com/ilo.org"
-              icon: "twitter"
+            - label: "X"
+              url: "https://www.x.com/ilo.org"
+              icon: "x"
             - label: "Linkedin"
               url: "https://www.linkedin.com/company/international-labour-organization-ilo"
               icon: "linkedin"
@@ -164,16 +164,16 @@ hero:
           datecopy: "11 February 2021"
           theme: "light"
           background: "solid"
-          cornercut: "true"
+          cornercut: true
           eyebrow: Women in management
           socialmedia:
             icons:
               - label: "Facebook"
                 url: "https://www.facebook.com/ilo.org"
                 icon: "facebook"
-              - label: "Twitter"
-                url: "https://www.twitter.com/ilo.org"
-                icon: "twitter"
+              - label: "X"
+                url: "https://www.x.com/ilo.org"
+                icon: "x"
               - label: "Linkedin"
                 url: "https://www.linkedin.com/company/international-labour-organization-ilo"
                 icon: "linkedin"

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