@ilo-org/twig 0.17.0 → 0.18.0

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

@@ -0,0 +1,227 @@
+card:
+  namespace: Components/Cards
+  use: "@components/card/card.twig"
+  label: Card
+  description: Cards display prominent content of a page. This component is a wrapper around all of the card types in the design system except for the Hero Card. To use it, pass a `type` setting to the card and then pass the appropriate fields for that card type. For more information about the settings you can pass to each card type, see the documentation for that card.
+  visibility: storybook
+  fields:
+    cta:
+      type: object
+      label: cta
+      description: Renders a call to action button at the bottom of the card. This should include a `url` property for the link and a `label` property for the link text. Used by the `Feature Card`, `Promo Card` and `DataCard` types.
+      preview:
+        label: "Read more"
+        url: "https://www.ilo.org/"
+    dataset:
+      type: object
+      label: Dataset object
+      description: Array of Content (label, copy), Files object (optional headline, array of items with label and url) and Links object (optional headline, array of items with label and url). Only used by `Data Card`.
+      preview:
+        content:
+          items:
+            - label: Date of publication
+              copy: 17 March 2022
+        files:
+          headline: Files for download
+          items:
+            - label: PDF 3.2 MB
+              url: "https://www.ilo.org"
+            - label: EPUB 5.8 MB
+              url: "https://www.ilo.org"
+            - label: MOBI 2.4 MB
+              url: "https://www.ilo.org"
+        links:
+          headline: Also available in
+          items:
+            - label: English
+              url: "https://www.ilo.org/search?q=link"
+            - label: Español
+              url: "https://www.ilo.org/search?q=hyperlink"
+            - label: Français
+              url: "https://www.ilo.org/search?q=url"
+    date:
+      type: object
+      label: Date
+      description: Date copy (human and Unix). Used by all cards except for the `Promo Card` and `Stat Card`.
+      preview:
+        human: 20 September 2022
+        unix: 1670389200
+    dateExtra:
+      type: string
+      label: dateExtra
+      description: Strong date copy that could include other information such as the location of an event. Only used by `Details Card`.
+      preview: 20 September 2023 | Geneva
+    eyebrow:
+      type: string
+      label: Eyebrow
+      description: Text appears above the title providing extra context. Used by all cards except for the `Feature Card`, `Text Card`, `Detail Card`, `Promo Card` and `Data Card`.
+      preview: "Podcast"
+    image:
+      type: object
+      label: Image
+      description: Image settings for the card. This should include a `url`, which is an array of objects with an `src` property pointing to the image file and a `breakpoint` property which is either a number indicating the minimum viewport width at which the image should be displayed or a media query. It can also contain an `alt` property for the image's alt text and a `loading` property for the image's loading attribute. Used by `Detail Card`, `Feature Card`, `Multilink Card` and `Data Card`
+      preview:
+        alt: "Image alt text"
+        loading: "lazy"
+        url:
+          - breakpoint: "(min-width: 0px)"
+            src: "/images/small.jpg"
+          - breakpoint: "(min-width: 800px)"
+            src: "/images/medium.jpg"
+          - breakpoint: "(min-width: 1200px)"
+            src: "/images/large.jpg"
+          - breakpoint: "(min-width: 1440px)"
+            src: "/images/large.jpg"
+    intro:
+      type: string
+      label: Intro
+      description: Intro text usually follows the Title providing more information about the Card. Used by `Text Card`, `Detail Card`, `Promo Card`, `Multilink Card` and`Stat Card`.
+      preview: "A toxic combination of mutually-reinforcing crises – inflation, debt, food and fuel price rises, geopolitical tensions and conflict, climate change – are threatening to increase poverty, inequality and discrimination worldwide."
+    link:
+      type: string
+      label: Link
+      description: The primary link for the card, activated by clicking on the card itself. Used by all cards except for the `Data Card`, `Stat Card` and `Facts Card`.
+      preview: "https://www.ilo.org/"
+    linklist:
+      type: object
+      label: Link List
+      description: Displays a list of links. See the `Link` component for more details on settings. Only used by the `Multilink Card`.
+      preview:
+        linkgroup:
+          - links:
+              - label: Read the press release
+                url: "https://www.ilo.org"
+              - label: See the statement
+                url: "https://www.ilo.org"
+              - label: Remarks to G7 Openening Session
+                url: "https://www.ilo.org"
+    list:
+      type: object
+      label: List
+      description: List of facts or statistics. See the `List` component for a full list of options. Only used by `Factlist Card`.
+      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"
+          - content: "The labour market deterioration is mainly due to emerging geopolitical tensions and the Ukraine conflict."
+            id: "list2"
+          - content: "The current slowdown means that many workers will have to accept lower quality jobs, often at very low pay."
+            id: "list3"
+    title:
+      type: string
+      label: Title
+      description: The main title of the card. Used by all cards except for the `Data Card`.
+      preview: Can digital technology be an equality machine?
+    source:
+      type: object
+      label: Source
+      description: A stylized link used only by the `Stat Card` to indicate the source of a statistic.
+      preview:
+        label: "World Employment and Social Outlook: Trends 2023"
+        url: "https://www.ilo.org/global/research/global-reports/weso/WCMS_865332/lang--en/index.htm"
+  settings:
+    alignment:
+      type: select
+      label: Alignment
+      description: Positions the image to the right or to the left of the content when the card is displayed in a `wide` or `fluid` size. Has no effect if the card is displayed in a `standard` or `narrow` size. Only used by `Multilink Card`.
+      preview: "left"
+      options:
+        left: Left
+        right: Right
+    color:
+      type: select
+      label: Color
+      description: Used to set the color of `Stat Card`.
+      options:
+        turquoise: turquoise
+        green: green
+        yellow: yellow
+        blue: blue
+      preview: "blue"
+    columns:
+      type: select
+      label: columns
+      description: Displays the data in one or two columns when the size is set to `wide` or `fluid`. If not set, the card will appear as `one`. Only used by `Data Card`.
+      options:
+        one: one
+        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`.
+      required: false
+      preview: "true"
+      options:
+        "true": "true"
+        "false": "false"
+    size:
+      type: select
+      label: Size
+      description: Sets the size of the card. If a card has two options, `standard` and `fluid` are used and `standard` is the default. If it has three options, `narrow`, `wide` and `fluid` are used and `narrow` is the default. If it has all four options `standard` is the default. `fluid` makes the card stretch to fit the size of its container. If the size is set to `fluid`, other styles from `wide` will be used.
+      required: false
+      preview: "standard"
+      options:
+        standard: standard
+        narrow: narrow
+        wide: wide
+        fluid: fluid
+    theme:
+      type: select
+      label: Theme
+      description: Sets the card to appear as either light or dark. Used by all cards except for `Multilink Card`, `Data Card` and `Stat Card`.
+      required: false
+      preview: "dark"
+      options:
+        dark: Dark
+        light: Light
+    type:
+      type: select
+      label: Type
+      description: Sets the type of card to render.
+      preview: "feature"
+      options:
+        feature: Feature
+        text: Text
+        detail: Detail
+        promo: Promo
+        multilink: Multilink
+        data: Data
+        stat: Stat
+        factlist: Factlist
+  variants:
+    basic:
+      label: Default
+    feature:
+      label: Feature Card
+      settings:
+        type: feature
+    text:
+      label: Text Card
+      settings:
+        type: text
+    detail:
+      label: Detail Card
+      settings:
+        type: detail
+    promo:
+      label: Promo Card
+      settings:
+        type: promo
+    multilink:
+      label: Multilink Card
+      settings:
+        type: multilink
+    data:
+      label: Data Card
+      settings:
+        type: data
+      fields:
+        eyebrow: Flagship report
+    stat:
+      label: Stat Card
+      settings:
+        type: stat

package/dist/components/card_data/card_data.twig

@@ -0,0 +1,101 @@
+{# card_data.twig #}
+
+{% if not columns %}
+	{% 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
+ links go on one side and the rest of the content goes on the other. Otherwise, flow
+ all content normally. #}
+{% if image %}
+	{% set content = "with-image" %}
+{% elseif not image and dataset.links %}
+	{% set content = "no-image-with-links" %}
+{% else %}
+	{% set content = "default" %}
+{% endif %}
+
+
+<div class="ilo--card ilo--card__type__data ilo--card__size__{{size}} ilo--card__type__data__columns__{{columns}}">
+	<div class="ilo--card--wrap">
+		{% if not image and eyebrow %}
+			<div class="ilo--card--eyebrow">{{ eyebrow }}</div>
+		{% endif %}
+		<div class="ilo--card--content ilo--card--content__{{ content }}">
+			{% if image %}
+				<div class="ilo--card--area--image">
+					{% if eyebrow %}
+						<div class="ilo--card--eyebrow">{{ eyebrow }}</div>
+					{% endif %}
+					<div class="ilo--card--image">
+						{% include "@components/picture/picture.twig" with { image: image, class: "card" } %}
+					</div>
+				</div>
+			{% endif %}
+			{% if dataset.content %}
+				{% for item in dataset.content.items %}
+					<div class="ilo--card--area--content">
+						{% block content_item %}
+							<p class="ilo--card__type__data--content-label">{{ item.label }}</p>
+							<p class="ilo--card__type__data--content-copy">{{ item.copy }}</p>
+						{% endblock %}
+					</div>
+				{% endfor %}
+			{% endif %}
+			{% if dataset.files %}
+				<div class="ilo--card--area--files">
+					{% block area_files %}
+						<div class="ilo--card__type__data--content-files">
+							<p class="ilo--card__type__data--content-label">{{ dataset.files.headline }}</p>
+							{% for item in dataset.files.items %}
+								{% include "@components/button/button.twig" with {
+                  type: "primary",
+                  size: "small",
+                  url: item.url,
+                  label: item.label,
+                  prefix: prefix
+                } only %}
+							{% endfor %}
+						</div>
+					{% endblock %}
+				</div>
+			{% endif %}
+			{% if dataset.cta %}
+				<div class="ilo--card--area--cta">
+					{% block area_cta %}
+						<div class="ilo--card__type__data--content-cta">
+							<p class="ilo--card__type__data--content-label">{{ dataset.cta.headline }}</p>
+							{% for item in dataset.cta.items %}
+								{% include "@components/button/button.twig" with {
+                    type: "secondary",
+                    size: "small",
+                    url: item.url,
+                    label: item.label,
+                    prefix: prefix
+                  } only %}
+							{% endfor %}
+						</div>
+					{% endblock %}
+				</div>
+			{% endif %}
+			{% if dataset.links %}
+				<div class="ilo--card--area--links">
+					{% block area_links %}
+						<div class="ilo--card__type__data--content-links">
+							<p class="ilo--card__type__data--content-label">{{ dataset.links.headline }}</p>
+							{% for item in dataset.links.items %}
+								{% include "@components/link/link.twig" with {
+                  url: item.url,
+                  label: item.label,
+                  prefix: prefix
+                } only %}
+							{% endfor %}
+						</div>
+					{% endblock %}
+				</div>
+			{% endif %}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,135 @@
+datacard:
+  namespace: Components/Cards
+  use: "@components/card_data/card_data.twig"
+  label: Data Card
+  description: A data card component for organising data about things like publications or events.
+  visibility: storybook
+  fields:
+    dataset:
+      type: object
+      label: Dataset object
+      description: Array of Content (label, copy), Files object (optional headline, array of items with label and url) and Links object (optional headline, array of items with label and url)
+      preview:
+        content:
+          items:
+            - label: Date of publication
+              copy: 17 March 2022
+            - label: Published by
+              copy: "ILO Department of Research"
+        files:
+          headline: Files for download
+          items:
+            - label: PDF 3.2 MB
+              url: "https://www.ilo.org"
+            - label: EPUB 5.8 MB
+              url: "https://www.ilo.org"
+            - label: MOBI 2.4 MB
+              url: "https://www.ilo.org"
+        cta:
+          headline: Read online
+          items:
+            - label: HTML Version
+              url: "https://www.ilo.org"
+            - label: InfoStories
+              url: "https://www.ilo.org/infostories/en-GB"
+        links:
+          headline: Also available in
+          items:
+            - label: English
+              url: "https://www.ilo.org/search?q=link"
+            - label: Español
+              url: "https://www.ilo.org/search?q=hyperlink"
+            - label: Dansk
+              url: "https://www.ilo.org/search?q=url"
+            - label: Deutsch
+              url: "https://www.ilo.org/search?q=url"
+            - label: Français
+              url: "https://www.ilo.org/search?q=url"
+            - label: Italiano
+              url: "https://www.ilo.org/search?q=url"
+            - label: Português
+              url: "https://www.ilo.org/search?q=url"
+            - label: Русский
+              url: "https://www.ilo.org/search?q=url"
+            - label: 中文
+              url: "https://www.ilo.org/search?q=url"
+            - label: العربية
+              url: "https://www.ilo.org/search?q=url"
+            - label: Ελληνικά
+              url: "https://www.ilo.org/search?q=url"
+            - label: Nederlands
+              url: "https://www.ilo.org/search?q=url"
+    eyebrow:
+      type: string
+      label: Eyebrow
+      description: Eyebrow copy
+      preview: Flagship report
+    image:
+      type: object
+      label: Image
+      description: Image settings for the card. This should include a `url`, which is an array of objects with an `src` property pointing to the image file and a `breakpoint` property which is either a number indicating the minimum viewport width at which the image should be displayed or a media query. It should also contain an `alt` property for the image's alt text.
+      preview:
+        alt: "Image alt text"
+        loading: "lazy"
+        url:
+          - breakpoint: "(min-width: 0px)"
+            src: "/images/publication.jpg"
+  settings:
+    size:
+      type: select
+      label: size
+      description: Sets the size of the card. If not set, the card will appear as `narrow`.
+      required: false
+      preview: narrow
+      options:
+        narrow: narrow
+        wide: wide
+        fluid: fluid
+    columns:
+      type: select
+      label: Columns
+      description: Displays the data in one or two columns. If not set, the card will appear as `one`.
+      required: false
+      preview: one
+      options:
+        one: one
+        two: two
+  variants:
+    default:
+      label: Default
+    no_image:
+      label: No image
+      fields:
+        image: false
+    two_columns:
+      label: Two columns
+      settings:
+        columns: two
+        size: wide
+    two_columns_no_image:
+      label: Two columns without image
+      settings:
+        columns: two
+        size: wide
+      fields:
+        image: false
+    two_columns_no_links:
+      label: Two columns without image or links
+      settings:
+        columns: two
+        size: wide
+      fields:
+        image: false
+        dataset:
+          content:
+            items:
+              - label: Date of publication
+                copy: 5 June 2023
+          files:
+            headline: Files for download
+            items:
+              - label: PDF 3.2 MB
+                url: "https://www.ilo.org"
+              - label: EPUB 5.8 MB
+                url: "https://www.ilo.org"
+          links: false

package/dist/components/card_detail/card_detail.twig

@@ -0,0 +1,37 @@
+{#
+  DETAIL CARD COMPONENT
+#}
+
+<div class="ilo--card ilo--card__type__detail ilo--card__action ilo--card__size__{{size}} {% if isvideo %} ilo--card__isvideo {% endif %}">
+  <a class="ilo--card--link" href="{{link}}" title="{{title}}">
+    <span class="ilo--card--link--text">{{title}}</span>
+  </a>
+  <div class="ilo--card--wrap">
+    {% if image %}
+    <div class="ilo--card--image--wrapper">
+      {% include "@components/picture/picture.twig" with {
+          image: image,
+          class: "card"
+        }
+      %}
+    </div>
+    {% endif %}
+    <div class="ilo--card--content">
+      {% if eyebrow %}
+        <p class="ilo--card--eyebrow">{{eyebrow}}</p>
+      {% endif %}
+      {% if title %}
+        <h3 class="ilo--card--title">{{title}}</h3>
+      {% endif %}
+      {% if intro %}
+        <p class="ilo--card--intro">{{intro}}</p>
+      {% endif %}
+      {% if date %}
+        <time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
+      {% endif %}
+      {% if dateExtra %}
+        <p class="ilo--card--date-extra">{{dateExtra}}</p>
+      {% endif %}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,71 @@
+detailcard:
+  namespace: Components/Cards
+  use: "@components/card_detail/card_detail.twig"
+  label: Detail Card
+  description: A detail card component for displaying links to content. It can have an image, title, link, intro text and date.
+  visibility: storybook
+  fields:
+    date:
+      type: object
+      label: Date
+      description: Date copy readable for both humans and machines
+    dateExtra:
+      type: string
+      label: dateExtra
+      description: Strong date copy that could include other information such as the location of an event.
+      preview: 20 September 2022 | Geneva
+    eyebrow:
+      type: string
+      label: Eyebrow
+      description: Eyebrow copy
+      preview: "Podcast"
+    image:
+      type: object
+      label: Image
+      description: Image settings for the card. This should include a `url`, which is an array of objects with an `src` property pointing to the image file and a `breakpoint` property which is either a number indicating the minimum viewport width at which the image should be displayed or a media query. It should also contain an `alt` property for the image's alt text.
+      preview:
+        alt: "Image alt text"
+        loading: "lazy"
+        url:
+          - breakpoint: "(min-width: 0px)"
+            src: "/images/small.jpg"
+          - breakpoint: "(min-width: 800px)"
+            src: "/images/medium.jpg"
+          - breakpoint: "(min-width: 1200px)"
+            src: "/images/large.jpg"
+          - breakpoint: "(min-width: 1440px)"
+            src: "/images/large.jpg"
+    intro:
+      type: string
+      label: Intro
+      description: Intro copy text
+      preview: "A toxic combination of mutually-reinforcing crises – inflation, debt, food and fuel price rises, geopolitical tensions and conflict, climate change – are threatening to increase poverty, inequality and discrimination worldwide."
+    link:
+      type: string
+      label: Link
+      description: Link field for the card
+      preview: "https://www.ilo.org/"
+    title:
+      type: string
+      label: Title
+      description: Title field for the card
+      preview: Can digital technology be an equality machine?
+  settings:
+    size:
+      type: select
+      label: size
+      description: Sets the size of the card. If not set, the card will appear as `narrow`.
+      required: false
+      preview: "narrow"
+      options:
+        narrow: narrow
+        wide: wide
+        fluid: fluid
+    isvideo:
+      type: select
+      label: Is a Video
+      description: Whether the card should display a video icon (for Feature card)
+      preview: "false"
+      options:
+        "true": "true"
+        "false": "false"

package/dist/components/card_factlist/card_factlist.twig

@@ -0,0 +1,21 @@
+{#
+  FACT LIST CARD COMPONENT
+#}
+<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">
+      {% if title %}
+        <h3 class="ilo--card--title">{{title}}</h3>
+      {% endif %}
+      {% if list %}
+        {% include "@components/list/list.twig" with {
+          title: list.title,
+          ordered: list.ordered,
+          alignment: list.alignment,
+          items: list.items,
+          prefix: prefix,
+        } only %}
+      {% endif %}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,46 @@
+factlistcard:
+  namespace: Components/Cards
+  use: "@components/card_factlist/card_factlist.twig"
+  label: Fact List Card
+  description: A Fact List Card is a card that displays a list of facts or statistics.
+  visibility: storybook
+  fields:
+    title:
+      type: string
+      label: Title
+      description: Title field for the card
+      preview: Can digital technology be an equality machine?
+    list:
+      type: object
+      label: List
+      description: List of facts or statistics. See the List component for a full list of options.
+      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"
+          - content: "The labour market deterioration is mainly due to emerging geopolitical tensions and the Ukraine conflict."
+            id: "list2"
+          - content: "The current slowdown means that many workers will have to accept lower quality jobs, often at very low pay."
+            id: "list3"
+  settings:
+    size:
+      type: select
+      label: Size
+      description: Sets the size of the card. If not set, the card will appear as `narrow`.
+      preview: "narrow"
+      options:
+        narrow: narrow
+        wide: wide
+        fluid: fluid
+    theme:
+      type: select
+      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"
+      options:
+        dark: Dark
+        light: Light

package/dist/components/card_feature/card_feature.twig

@@ -0,0 +1,39 @@
+{#
+  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 %}">
+  <a class="ilo--card--link" href="{{link}}" title="{{title}}">
+    <span class="ilo--card--link--text">{{title}}</span>
+  </a>
+  <div class="ilo--card--wrap">
+    {% if image %}
+    <div class="ilo--card--image--wrapper">
+      {% include "@components/picture/picture.twig" with {
+          image: image,
+          class: "card"
+        }
+      %}
+    </div>
+    {% endif %}
+    <div class="ilo--card--content">
+      {% if eyebrow %}
+        <p class="ilo--card--eyebrow">{{eyebrow}}</p>
+      {% endif %}
+      {% if title %}
+        <h3 class="ilo--card--title">{{title}}</h3>
+      {% endif %}
+      {% if date %}
+        <time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
+      {% endif %}
+      {% if cta %}
+        {% include "@components/linklist/linklist.twig" with {
+          linkgroup: [{
+            links: [cta]
+          }],
+          prefix: prefix
+        } only %}
+      {% endif %}
+    </div>
+  </div>
+</div>