@ilo-org/twig 1.3.3 → 1.4.0

package/dist/components/blockquote/blockquote.component.yml

@@ -0,0 +1,17 @@
+blockquote:
+  namespace: Components/Content
+  use: "@components/blockquote/blockquote.twig"
+  label: Blockquote
+  description: The Blockquote component is used to display quoted text with proper attribution, helping to highlight references and citations effectively.
+  fields:
+    quote:
+      type: string
+      label: Quote
+      description: The main quoted text content.
+      preview: "The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind."
+    cite:
+      type: string
+      label: Citation
+      description: The source or author of the quote.
+      preview: ILO Director-General Gilbert F. Houngbo
+  visibility: storybook

package/dist/components/blockquote/blockquote.twig

@@ -0,0 +1,6 @@
+{# blockquote.twig #}
+
+<blockquote class="ilo--blockquote">
+  <p>{{ quote }}</p>
+  <cite>{{ cite }}</cite>
+</blockquote>

package/dist/components/blockquote/blockquote.wingsuit.yml

@@ -0,0 +1,17 @@
+blockquote:
+  namespace: Components/Content
+  use: "@components/blockquote/blockquote.twig"
+  label: Blockquote
+  description: The Blockquote component is used to display quoted text with proper attribution, helping to highlight references and citations effectively.
+  fields:
+    quote:
+      type: string
+      label: Quote
+      description: The main quoted text content.
+      preview: "The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind."
+    cite:
+      type: string
+      label: Citation
+      description: The source or author of the quote.
+      preview: ILO Director-General Gilbert F. Houngbo
+  visibility: storybook

package/dist/components/card/card.component.yml

@@ -190,8 +190,6 @@ card:
         stat: Stat
         factlist: Factlist
   variants:
-    basic:
-      label: Default
     feature:
       label: Feature Card
       settings:

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

@@ -190,8 +190,6 @@ card:
         stat: Stat
         factlist: Factlist
   variants:
-    basic:
-      label: Default
     feature:
       label: Feature Card
       settings:

package/dist/components/card_data/card_data.component.yml

@@ -90,7 +90,7 @@ datacard:
     columns:
       type: select
       label: Columns
-      description: Displays the data in one or two columns. If not set, the card will appear as `one`.
+      description: Displays the data in one or two columns. If not set, the card will appear as `one`. Only applies when size is set to `wide` or `fluid`.
       required: false
       preview: one
       options:

package/dist/components/card_data/card_data.twig

@@ -1,9 +1,15 @@
 {# card_data.twig #}
 
+{# Defaults to one column #}
 {% if not columns %}
 	{% set columns = "one" %}
 {% endif %}
 
+{# size overrides column if it's set to 'narrow' #}
+{% if size == "narrow" %}
+	{% set columns = "one" %}
+{% endif %}
+
 {# Different layout options to apply depending on if the card has an image
  or if it has links. If it has two columns with image, then image goes on one side
  and content goes on the other. If it has two columns witout image but links, then

package/dist/components/card_data/card_data.wingsuit.yml

@@ -90,7 +90,7 @@ datacard:
     columns:
       type: select
       label: Columns
-      description: Displays the data in one or two columns. If not set, the card will appear as `one`.
+      description: Displays the data in one or two columns. If not set, the card will appear as `one`. Only applies when size is set to `wide` or `fluid`.
       required: false
       preview: one
       options:

package/dist/components/card_factlist/card_factlist.component.yml

@@ -13,11 +13,8 @@ factlistcard:
     list:
       type: object
       label: List
-      description: List of facts or statistics. See the List component for a full list of options.
+      description: List of facts or statistics. Each item takes a `content` property with the text of the list and an optional `id` property.
       preview:
-        settings:
-          - ordered: unordered
-          - alignment: default
         items:
           - content: "Global employment growth will be only 1.0 per cent in 2023, less than half the level in 2022."
             id: "list1"
@@ -40,7 +37,7 @@ factlistcard:
       label: Theme
       description: Sets the card to appear as either light or dark. If not set, the card will inherit the theme of its parent.
       required: false
-      preview: "light"
+      preview: "dark"
       options:
         dark: Dark
         light: Light

package/dist/components/card_factlist/card_factlist.twig

@@ -1,6 +1,4 @@
-{#
-  FACT LIST CARD COMPONENT
-#}
+{# card_factlist.twig #}
 <div class="ilo--card ilo--card__type__factlist ilo--card__size__{{size}} ilo--card__theme__{{theme}}">
 	<div class="ilo--card--wrap">
 		<div class="ilo--card--content">
@@ -9,11 +7,10 @@
 			{% endif %}
 			{% if list %}
 				{% include "@components/list/list.twig" with {
-          title: list.title,
-          ordered: list.ordered,
-          alignment: list.alignment,
+          ordered: "unordered",
           items: list.items,
           prefix: prefix,
+					theme: theme
         } only %}
 			{% endif %}
 		</div>

package/dist/components/card_factlist/card_factlist.wingsuit.yml

@@ -13,11 +13,8 @@ factlistcard:
     list:
       type: object
       label: List
-      description: List of facts or statistics. See the List component for a full list of options.
+      description: List of facts or statistics. Each item takes a `content` property with the text of the list and an optional `id` property.
       preview:
-        settings:
-          - ordered: unordered
-          - alignment: default
         items:
           - content: "Global employment growth will be only 1.0 per cent in 2023, less than half the level in 2022."
             id: "list1"
@@ -40,7 +37,7 @@ factlistcard:
       label: Theme
       description: Sets the card to appear as either light or dark. If not set, the card will inherit the theme of its parent.
       required: false
-      preview: "light"
+      preview: "dark"
       options:
         dark: Dark
         light: Light

package/dist/components/card_feature/card_feature.component.yml

@@ -71,7 +71,7 @@ featurecard:
       label: Theme
       description: Sets the card to appear as either light or dark. If not set, the card will inherit the theme of its parent.
       required: false
-      preview: "light"
+      preview: "dark"
       options:
         dark: Dark
         light: Light

package/dist/components/card_feature/card_feature.twig

@@ -28,6 +28,7 @@
 			{% endif %}
 			{% if cta %}
 				{% include "@components/linklist/linklist.twig" with {
+					theme: theme,
           linkgroup: [{
             links: [cta]
           }],

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

@@ -71,7 +71,7 @@ featurecard:
       label: Theme
       description: Sets the card to appear as either light or dark. If not set, the card will inherit the theme of its parent.
       required: false
-      preview: "light"
+      preview: "dark"
       options:
         dark: Dark
         light: Light

package/dist/components/card_multilink/card_multilink.component.yml

@@ -26,13 +26,13 @@ multilinkcard:
         loading: "lazy"
         url:
           - breakpoint: "(min-width: 0px)"
-            src: "/images/small.jpg"
+            src: "images/16x9.jpg"
           - breakpoint: "(min-width: 800px)"
-            src: "/images/medium.jpg"
+            src: "images/16x9.jpg"
           - breakpoint: "(min-width: 1200px)"
-            src: "/images/large.jpg"
+            src: "images/16x9.jpg"
           - breakpoint: "(min-width: 1440px)"
-            src: "/images/large.jpg"
+            src: "images/16x9.jpg"
     intro:
       type: string
       label: Intro
@@ -86,6 +86,15 @@ multilinkcard:
         narrow: narrow
         wide: wide
         fluid: fluid
+    theme:
+      type: select
+      label: Theme
+      description: Sets the theme of the card, either `light` or `soft`. Defaults to `light`.
+      required: false
+      preview: "light"
+      options:
+        light: light
+        soft: soft
     titleLevel:
       type: select
       label: Title Element

package/dist/components/card_multilink/card_multilink.twig

@@ -1,6 +1,11 @@
 {# 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|boolval %} ilo--card__isvideo {% endif %} {% if linklist %} ilo--card__linklist {% endif %} {% if size == "wide" or size == "fluid" %} ilo--card__align__{{alignment}} {% endif %} {% if not image %} ilo--card--no-image {% endif %}">
+{# Theme defaults to light #}
+{% if not theme %}
+	{% set theme = "light" %}
+{% endif %}
+
+<div class="ilo--card ilo--card__theme__{{theme}} 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 not image %} ilo--card--no-image {% endif %}">
 	{% if link|length > 0 %}
 		<a class="ilo--card--link" href="{{link}}" title="{{title}}">
 			<span class="ilo--card--link--text">{{title}}</span>
@@ -8,14 +13,14 @@
 	{% endif %}
 	<div class="ilo--card--wrap">
 		{% if image %}
-		<div class="ilo--card--image--wrapper">
-			{% include "@components/picture/picture.twig" with {
-        image: image,
-        class: "card"
-      }
-      %}
+			<div class="ilo--card--image--wrapper">
+				{% include "@components/picture/picture.twig" with {
+					image: image,
+					class: "card"
+				}
+				%}
 		</div>
-			{% endif %}
+		{% endif %}
 		<div class="ilo--card--content">
 			{% if eyebrow %}
 				<p class="ilo--card--eyebrow">{{eyebrow}}</p>
@@ -26,10 +31,10 @@
 			{% if image %}
 				<div class="ilo--card--image--wrapper">
 					{% include "@components/picture/picture.twig" with {
-            image: image,
-            class: "card"
-          }
-          %}
+						image: image,
+						class: "card"
+					}
+					%}
 				</div>
 			{% endif %}
 			{% if intro %}
@@ -39,7 +44,7 @@
 				{% include "@components/linklist/linklist.twig" with {
           headline: linklist.headline,
           linkgroup: linklist.linkgroup,
-          prefix: prefix
+          prefix: prefix,
         } only %}
 			{% endif %}
 		</div>

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

@@ -26,13 +26,13 @@ multilinkcard:
         loading: "lazy"
         url:
           - breakpoint: "(min-width: 0px)"
-            src: "/images/small.jpg"
+            src: "images/16x9.jpg"
           - breakpoint: "(min-width: 800px)"
-            src: "/images/medium.jpg"
+            src: "images/16x9.jpg"
           - breakpoint: "(min-width: 1200px)"
-            src: "/images/large.jpg"
+            src: "images/16x9.jpg"
           - breakpoint: "(min-width: 1440px)"
-            src: "/images/large.jpg"
+            src: "images/16x9.jpg"
     intro:
       type: string
       label: Intro
@@ -86,6 +86,15 @@ multilinkcard:
         narrow: narrow
         wide: wide
         fluid: fluid
+    theme:
+      type: select
+      label: Theme
+      description: Sets the theme of the card, either `light` or `soft`. Defaults to `light`.
+      required: false
+      preview: "light"
+      options:
+        light: light
+        soft: soft
     titleLevel:
       type: select
       label: Title Element