Merge pull request #973 from international-labour-organization/fix/twig/

GH-965-cast-boolean-values Twig: fix boolean settings in patterns and components
international-labour-organization · May 15, 2024 · d5863b0 · d5863b0
2 parents e3f701c + 95aa8bb
commit d5863b0
Show file tree

Hide file tree

Showing 41 changed files with 93 additions and 136 deletions.
diff --git a/.changeset/purple-rules-love.md b/.changeset/purple-rules-love.md
@@ -0,0 +1,5 @@
+---
+"@ilo-org/twig": minor
+---
+
+We have introduced the |boolval filter across several components, so that we can start using actual boolean values on fields and settings. This keeps backwards compatibility when passing "true" or "false" as strings.
diff --git a/packages/twig/apps/storybook/patterns/intro.stories.mdx b/packages/twig/apps/storybook/patterns/intro.stories.mdx
@@ -37,6 +37,12 @@ In the root of your custom theme, run the following command:
 
 ⚠️ Note that the two libraries are versioned separately so you'll want to make sure that you're always using the latest versions of both to ensure they're both in sync. You should see an installation warning if you try to install incompatible versions.
 
+## Required Twig extensions
+
+As from `1.2.0` we make use of the `|boolvar` Twig filter: you need to have this filter available in your Twig environment for the component to work correctly.
+
+An implementation of the `|boolvar` Twig filter can be found in the [PHP Syntax for Twig](https://github.com/squirrelphp/twig-php-syntax) project. If you are a user of the [ILO Base Theme](https://github.com/international-labour-organization/ilo_base_theme), the twig extension above will be automatically made available to you as from version `0.2.0`.
+
 ## Usage
 
 Now that you have installed the component library, you'll need to expose them so that you can integrate them into your templates.

diff --git a/packages/twig/apps/storybook/preview.js b/packages/twig/apps/storybook/preview.js
@@ -1,5 +1,7 @@
 import { configure, initJsBehaviors } from "@wingsuit-designsystem/storybook";
+import { TwingRenderer } from "@wingsuit-designsystem/pattern";
 import { addParameters } from "@storybook/react";
+import { TwingFilter } from "twing";
 import "./styles.scss";
 
 const namespaces = require("../../src/namespaces");
@@ -24,6 +26,12 @@ addParameters({
   },
 });
 
+const renderer = new TwingRenderer();
+const environment = renderer.getEnvironment();
+const boolval = (string) => (string === "false" ? false : !!string);
+environment.addFilter(
+  new TwingFilter("boolval", (value) => Promise.resolve(boolval(value)))
+);
 configure(
   module,
   [
@@ -32,5 +40,6 @@ configure(
   ],
   require.context("./config", false, /\.json|\.ya?ml$/),
   require.context("wspatterns", true, /\.twig$/),
-  namespaces
+  namespaces,
+  renderer
 );
diff --git a/packages/twig/src/patterns/components/accordion/accordion.twig b/packages/twig/src/patterns/components/accordion/accordion.twig
@@ -1,6 +1,6 @@
 {# accordion.twig #}
 
-<ul class="{{prefix}}--accordion" data-loadcomponent="Accordion" {% if allowMultipleExpanded %} data-multipleexpanded {% endif %}>
+<ul class="{{prefix}}--accordion" data-loadcomponent="Accordion"{{ allowMultipleExpanded|boolval ? ' data-multipleexpanded' }}>
 	{% for item in items %}
 		{% include "@components/accordion/accordion-item.twig" with {
         label: item.label,

diff --git a/packages/twig/src/patterns/components/accordion/accordion.wingsuit.yml b/packages/twig/src/patterns/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:

diff --git a/packages/twig/src/patterns/components/button/button.twig b/packages/twig/src/patterns/components/button/button.twig
@@ -2,7 +2,7 @@
   BUTTON COMPONENT
 #}
 {% if url %}
-	<a class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--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="{{prefix}}--button ilo--button--{{size}} {{prefix}}--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="{{prefix}}--button ilo--button--{{size}} {{prefix}}--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="{{prefix}}--button ilo--button--{{size}} {{prefix}}--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>

diff --git a/packages/twig/src/patterns/components/button/button.wingsuit.yml b/packages/twig/src/patterns/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
diff --git a/packages/twig/src/patterns/components/callout/callout.twig b/packages/twig/src/patterns/components/callout/callout.twig
@@ -1,14 +1,14 @@
 {#
   CALLOUT COMPONENT
 #}
-<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isCollapsible == "true" and isOpen == "true" %} {{prefix}}--callout--open {% endif %} {% if isCollapsible == "true" %} {{prefix}}--callout--collapse {% endif %}" data-loadcomponent="Callout">
+<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isCollapsible|boolval and isOpen|boolval %} {{prefix}}--callout--open {% endif %} {% if isCollapsible|boolval %} {{prefix}}--callout--collapse {% endif %}" data-loadcomponent="Callout">
 	<div class="{{prefix}}--callout--sidebar">
 		<span class="{{prefix}}--callout--icon icon icon--{{alert}}"></span>
 	</div>
 	<div class="{{prefix}}--callout--content">
 		<div class="{{prefix}}--callout--header">
 			<h5 class="{{prefix}}--callout--title">{{ title }}</h5>
-			{% if isCollapsible == "true" %}
+			{% if isCollapsible|boolval %}
 				<button class="{{prefix}}--callout--toggle" type="button" data-open="{{ toggleOpenLabel }}" data-closed="{{ toggleClosedLabel }}">
 					<span class="{{prefix}}--callout--button-text">
 						{% if isOpen %}

diff --git a/packages/twig/src/patterns/components/callout/callout.wingsuit.yml b/packages/twig/src/patterns/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
diff --git a/packages/twig/src/patterns/components/card/card.wingsuit.yml b/packages/twig/src/patterns/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

diff --git a/packages/twig/src/patterns/components/card_detail/card_detail.twig b/packages/twig/src/patterns/components/card_detail/card_detail.twig
@@ -2,7 +2,7 @@
   DETAIL CARD COMPONENT
 #}
 
-<div class="{{prefix}}--card {{prefix}}--card__type__detail {{prefix}}--card__action {{prefix}}--card__size__{{size}} {% if isvideo %} {{prefix}}--card__isvideo {% endif %}">
+<div class="{{prefix}}--card {{prefix}}--card__type__detail {{prefix}}--card__action {{prefix}}--card__size__{{size}} {% if isvideo|boolval %} {{prefix}}--card__isvideo {% endif %}">
 	<a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}">
 		<span class="{{prefix}}--card--link--text">{{title}}</span>
 	</a>

diff --git a/packages/twig/src/patterns/components/card_detail/card_detail.wingsuit.yml b/packages/twig/src/patterns/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

diff --git a/packages/twig/src/patterns/components/card_feature/card_feature.twig b/packages/twig/src/patterns/components/card_feature/card_feature.twig
@@ -2,7 +2,7 @@
   FEATURE CARD COMPONENT
 #}
 
-<div class="{{prefix}}--card {{prefix}}--card__type__feature {{prefix}}--card__action {{prefix}}--card__theme__{{theme}} {{prefix}}--card__size__{{ size }} {% if isvideo %} {{prefix}}--card__isvideo {% endif %} {% if cta %} {{prefix}}--card__linklist {% endif %}">
+<div class="{{prefix}}--card {{prefix}}--card__type__feature {{prefix}}--card__action {{prefix}}--card__theme__{{theme}} {{prefix}}--card__size__{{ size }} {% if isvideo|boolval %} {{prefix}}--card__isvideo {% endif %} {% if cta %} {{prefix}}--card__linklist {% endif %}">
 	<a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}">
 		<span class="{{prefix}}--card--link--text">{{title}}</span>
 	</a>

diff --git a/packages/twig/src/patterns/components/card_feature/card_feature.wingsuit.yml b/packages/twig/src/patterns/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

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

diff --git a/packages/twig/src/patterns/components/card_multilink/card_multilink.wingsuit.yml b/packages/twig/src/patterns/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

diff --git a/packages/twig/src/patterns/components/card_promo/card_promo.twig b/packages/twig/src/patterns/components/card_promo/card_promo.twig
@@ -3,7 +3,7 @@
 #}
 
 <div class="{{prefix}}--card--wrapper {{prefix}}--card--wrapper__type__promo {{prefix}}--card--wrapper__type__promo__size__{{ size }}">
-	<div class="{{prefix}}--card {{prefix}}--card__type__promo {{prefix}}--card__size__{{ size }} {{prefix}}--card__action {{prefix}}--card__theme__{{theme}} {% if cornercut %}{{prefix}}--card__cornercut{% endif %}">
+	<div class="{{prefix}}--card {{prefix}}--card__type__promo {{prefix}}--card__size__{{ size }} {{prefix}}--card__action {{prefix}}--card__theme__{{theme}} {% if cornercut|boolval %}{{prefix}}--card__cornercut{% endif %}">
 		<a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}">
 			<span class="{{prefix}}--card--link--text">{{title}}</span>
 		</a>

diff --git a/packages/twig/src/patterns/components/card_promo/card_promo.wingsuit.yml b/packages/twig/src/patterns/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

diff --git a/packages/twig/src/patterns/components/cardgroup/cardgroup.twig b/packages/twig/src/patterns/components/cardgroup/cardgroup.twig
@@ -5,7 +5,7 @@
 	{% set cardcount = "three" %}
 {% endif %}
 
-<div class="{{prefix}}--cardgroup {{prefix}}--cardgroup__count__{{cardcount}} {% if collapsed %} {{prefix}}--cardgroup__collapsed {% endif %}">
+<div class="{{prefix}}--cardgroup {{prefix}}--cardgroup__count__{{cardcount}} {% if collapsed|boolval %} {{prefix}}--cardgroup__collapsed {% endif %}">
 	<div class="{{prefix}}--cardgroup--inner">
 		{% for card in group %}
 			<div class="{{prefix}}--cardgroup--card">

diff --git a/packages/twig/src/patterns/components/cardgroup/cardgroup.wingsuit.yml b/packages/twig/src/patterns/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

diff --git a/packages/twig/src/patterns/components/contextmenu/contextmenu.twig b/packages/twig/src/patterns/components/contextmenu/contextmenu.twig
@@ -3,7 +3,7 @@
 #}
 <ol class="{{prefix}}--context-menu">
 	{% for link in links %}
-		<li class="{{prefix}}--context-menu--item{% if link.endsection == 'true' %} endsection{% endif %}">
+		<li class="{{prefix}}--context-menu--item{{ link.endsection|boolval ? ' endsection'}}">
 			<a href="{{link.url}}" class="{{prefix}}--context-menu--link">
 				<span class="{{prefix}}--context-menu--label">{{link.label}}</span>
 			</a>

diff --git a/packages/twig/src/patterns/components/contextmenu/contextmenu.wingsuit.yml b/packages/twig/src/patterns/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

diff --git a/packages/twig/src/patterns/components/fileupload/fileupload.twig b/packages/twig/src/patterns/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="{{prefix}}"/>
+			<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="{{prefix}}"/>
 		</label>
 	</div>
 {% endblock %}
diff --git a/packages/twig/src/patterns/components/fileupload/fileupload.wingsuit.yml b/packages/twig/src/patterns/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

diff --git a/packages/twig/src/patterns/components/hero/hero.twig b/packages/twig/src/patterns/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 %}

diff --git a/packages/twig/src/patterns/components/hero/hero.wingsuit.yml b/packages/twig/src/patterns/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:

diff --git a/packages/twig/src/patterns/components/herocard/herocard.twig b/packages/twig/src/patterns/components/herocard/herocard.twig
@@ -1,7 +1,7 @@
 {#
   HEROCARD COMPONENT
 #}
-<div class="{{prefix}}--hero-card {{prefix}}--hero-card__theme__{{ theme }} {{prefix}}--hero-card__background__{{ background }} {% if cornercut == "true" %} {{prefix}}--hero-card__cornercut {% endif %}">
+<div class="{{prefix}}--hero-card {{prefix}}--hero-card__theme__{{ theme }} {{prefix}}--hero-card__background__{{ background }} {% if cornercut|boolval %} {{prefix}}--hero-card__cornercut {% endif %}">
   {% if eyebrow %}
     <p class="{{ prefix }}--hero-card--eyebrow">{{ eyebrow }}</p>
   {% endif %}