@ilo-org/twig 0.17.0 → 0.18.0

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

@@ -0,0 +1,80 @@
+featurecard:
+  namespace: Components/Cards
+  use: "@components/card_feature/card_feature.twig"
+  label: Feature Card
+  description: A feature card component for displaying links to content. It can have an image, title, link, date and call to action.
+  visibility: storybook
+  fields:
+    cta:
+      type: object
+      label: cta
+      description: Optional call to action settings for the card. This should include a `url` property for the link and a `label` property for the link text.
+      preview:
+        label: "Read more"
+        url: "https://www.ilo.org/"
+    date:
+      type: object
+      label: Date
+      description: Date copy (human and Unix)
+      preview:
+        human: 20 September 2022
+        unix: 1670389200
+    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 can also contain an `alt` property for the image's alt text and a `loading` property for the image's loading attribute.
+      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"
+    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:
+    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"
+    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
+    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_multilink/card_multilink.twig

@@ -0,0 +1,45 @@
+{# 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 %}">
+	{% if link|length > 0 %}
+		<a class="ilo--card--link" href="{{link}}" title="{{title}}">
+			<span class="ilo--card--link--text">{{title}}</span>
+		</a>
+	{% endif %}
+	<div class="ilo--card--wrap">
+		<div class="ilo--card--image--wrapper">
+			{% include "@components/picture/picture.twig" with {
+        image: image,
+        class: "card"
+      }
+      %}
+		</div>
+		<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 image %}
+				<div class="ilo--card--image--wrapper">
+					{% include "@components/picture/picture.twig" with {
+            image: image,
+            class: "card"
+          }
+          %}
+				</div>
+			{% endif %}
+			{% if intro %}
+				<p class="ilo--card--intro">{{intro}}</p>
+			{% endif %}
+			{% if linklist %}
+				{% include "@components/linklist/linklist.twig" with {
+          headline: linklist.headline,
+          linkgroup: linklist.linkgroup,
+          prefix: prefix
+        } only %}
+			{% endif %}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,91 @@
+multilinkcard:
+  namespace: Components/Cards
+  use: "@components/card_multilink/card_multilink.twig"
+  label: Multilink Card
+  description: A multilink card component for displaying links to content. It can have an image, title, intro text and a list of links displayed at the bottom or on the side of the card.
+  visibility: storybook
+  fields:
+    date:
+      type: object
+      label: Date
+      description: Date copy (human and Unix)
+      preview:
+        human: 20 September 2022
+        unix: 1670389200
+    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 field for the card
+      preview: "As the United Nations agency for the world of work, the ILO sets international labour standards, promotes rights at work and encourages decent employment opportunities, the enhancement of social protection and the strengthening of dialogue on work-related issues."
+    link:
+      type: string
+      label: Link
+      description: Link field for the card
+      preview: "https://www.ilo.org/"
+    linklist:
+      type: object
+      label: Link List
+      description: Implementation of the LinkList component.
+      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"
+    title:
+      type: string
+      label: Title
+      description: Title field for the card
+      preview: Advancing social justice
+  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.
+      preview: "left"
+      options:
+        left: Left
+        right: Right
+    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"
+    size:
+      type: select
+      label: Size
+      description: Sets the size of the card. If not set, the card will appear as `standard`.
+      required: false
+      preview: "standard"
+      options:
+        standard: standard
+        narrow: narrow
+        wide: wide
+        fluid: fluid

package/dist/components/card_promo/card_promo.twig

@@ -0,0 +1,35 @@
+{#
+  PROMO CARD COMPONENT
+#}
+
+<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 %}">
+    <a class="ilo--card--link" href="{{link}}" title="{{title}}">
+      <span class="ilo--card--link--text">{{title}}</span>
+    </a>
+    <div class="ilo--card--wrap">
+      <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 cta %}
+          <div class="ilo--card--cta">
+            {% include "@components/button/button.twig" with {
+              size: "medium",
+              url: cta.url,
+              label: cta.label,
+              type: "primary",
+              prefix: prefix,
+            } only %}
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,71 @@
+promocard:
+  namespace: Components/Cards
+  use: "@components/card_promo/card_promo.twig"
+  label: Promo Card
+  description: A promo card component for displaying links to content. It can have a title, link, intro and additional call to action.
+  visibility: storybook
+  fields:
+    cta:
+      type: object
+      label: cta
+      description: An optional button that can be used to link to a page.
+      preview:
+        label: "Read the press release"
+        url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
+    date:
+      type: object
+      label: Date
+      description: Date copy (human and Unix)
+      preview:
+        human: 20 September 2022
+        unix: 1670389200
+    eyebrow:
+      type: string
+      label: Eyebrow
+      description: Eyebrow copy
+      preview: "Podcast"
+    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:
+    cornercut:
+      type: select
+      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"
+    size:
+      type: select
+      label: Size
+      description: Sets the size of the card. If not set, the card will appear as `standard`.
+      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. 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_stat/card_stat.twig

@@ -0,0 +1,24 @@
+{#
+  STAT CARD COMPONENT
+#}
+<div class="ilo--card ilo--card__type__stat ilo--card__color__{{color}} ilo--card__size__{{size}}">
+	<div class="ilo--card--wrap">
+		<div class="ilo--card--content">
+			{% if title %}
+				<h3 class="ilo--card--title">{{title}}</h3>
+			{% endif %}
+			{% if intro %}
+				<p class="ilo--card--intro">{{intro}}</p>
+			{% endif %}
+			{% if source %}
+				<div class="ilo--card--source">
+					{% include "@components/link/link.twig" with {
+            url: source.url,
+            label: source.label,
+            prefix: prefix
+          } only %}
+				</div>
+			{% endif %}
+		</div>
+	</div>
+</div>

package/dist/components/card_stat/card_stat.wingsuit.yml

@@ -0,0 +1,44 @@
+statcard:
+  namespace: Components/Cards
+  use: "@components/card_stat/card_stat.twig"
+  label: Stat Card
+  description: A stat card highlights a prominent fact or statistic with a link to where the information comes from. It can appear in a range of different colors.
+  visibility: storybook
+  fields:
+    title:
+      type: string
+      label: Title
+      description: The headline for the statistic
+      preview: "Global employment growth down by half in 2023"
+    intro:
+      type: string
+      label: Intro
+      description: More informationa about the statistic
+      preview: "The current global economic slowdown is likely to force more workers to accept lower quality, poorly paid jobs which lack job security and social protection, so accentuating inequalities exacerbated by the COVID-19 crisis."
+    source:
+      type: object
+      label: Source
+      description: A link pointing to where the statistic comes from.
+      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:
+    size:
+      type: select
+      label: Size
+      description: Sets the size of the card. If not set, the card will appear as `standard`.
+      required: false
+      preview: "standard"
+      options:
+        standard: Standard
+        fluid: Fluid
+    color:
+      type: select
+      label: Color
+      description: Color of the stat cards, options are `turquoise`, `green`, `yellow`, or `blue`. Only use for stat cards.
+      options:
+        turquoise: turquoise
+        green: green
+        yellow: yellow
+        blue: blue
+      preview: "blue"

package/dist/components/card_text/card_text.twig

@@ -0,0 +1,35 @@
+{#
+  FEATURE CARD COMPONENT
+#}
+
+<div class="ilo--card--wrapper">
+  <div class="ilo--card ilo--card__type__text ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}}">
+    <a class="ilo--card--link" href="{{link}}" title="{{title}}">
+      <span class="ilo--card--link--text">{{title}}</span>
+    </a>
+    <div class="ilo--card--wrap">
+      <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 profile %}
+          {% include "@components/profile/profile.twig" with {
+            avatar: profile.avatar,
+            description: profile.description,
+            link: profile.link,
+            name: profile.name,
+            role: profile.role,
+            prefix: prefix,
+            theme: theme,
+          } only %}
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/card_text/card_text.wingsuit.yml

@@ -0,0 +1,57 @@
+textcard:
+  namespace: Components/Cards
+  use: "@components/card_text/card_text.twig"
+  label: Text Card
+  description: A text card component for displaying links to content. It can have a title, link, date and profile to highlight the author of the content.
+  visibility: storybook
+  fields:
+    date:
+      type: object
+      label: Date
+      description: Date copy (human and Unix)
+      preview:
+        human: 20 September 2022
+        unix: 1670389200
+    eyebrow:
+      type: string
+      label: Eyebrow
+      description: Eyebrow copy
+      preview: "Podcast"
+    link:
+      type: string
+      label: Link
+      description: Link field for the card
+      preview: "https://www.ilo.org/"
+    profile:
+      type: object
+      label: Profile
+      description: Optional profile of the author who created the content
+      preview:
+        avatar: "/images/ilo-dg.jpg"
+        name: "Gilbert F. Houngbo"
+        role: "ILO Director-General"
+    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
+    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/cardgroup/cardgroup.css

@@ -0,0 +1 @@
+.ilo--cardgroup__collapsed .ilo--cardgroup--inner{gap:0!important}@media screen and (min-width:1024px){.ilo--cardgroup__count__one .ilo--cardgroup--inner{grid-template-columns:1fr}.ilo--cardgroup__count__two .ilo--cardgroup--inner{grid-template-columns:repeat(2,1fr)}.ilo--cardgroup__count__three .ilo--cardgroup--inner{grid-template-columns:repeat(3,1fr)}.ilo--cardgroup__count__four .ilo--cardgroup--inner{grid-template-columns:repeat(4,1fr)}}.ilo--cardgroup--inner{display:grid;grid-template-columns:1fr;grid-template-rows:auto;column-gap:1.7148981779rem;row-gap:1.7148981779rem;margin:auto;width:100%}.ilo--cardgroup .ilo--card,.ilo--cardgroup .ilo--card--wrapper{height:100%;width:100%;max-width:100%}.ilo--cardgroup--button-wrap{display:flex;justify-content:center;margin-top:3.4297963558rem;width:100%}

package/dist/components/cardgroup/cardgroup.twig

@@ -0,0 +1,46 @@
+{#
+  CARDGROUP COMPONENT
+#}
+{% if not cardcount%}
+  {% set cardcount = "three" %}
+{% endif %}
+
+<div class="ilo--cardgroup ilo--cardgroup__count__{{cardcount}} {% if collapsed %} ilo--cardgroup__collapsed {% endif %}">
+  <div class="ilo--cardgroup--inner">
+    {% for card in group %}
+      <div class="ilo--cardgroup--card">
+        {% include "@components/card/card.twig" with {
+          size: size,
+          theme: theme,
+          type: type,
+          cta: card.cta,
+          dataset: card.dataset,
+          date: card.date,
+          dateExtra: card.dateExtra,
+          eyebrow: card.eyebrow,
+          image: card.image,
+          intro: card.intro,
+          link: card.link,
+          linklist: card.linklist,
+          list: card.list,
+          title: card.title,
+          alignment: alignment,
+          color: card.color,
+          cornercut: card.cornercut,
+          source: card.source,
+          prefix: prefix
+        } only %}
+      </div>
+      {% endfor %}
+  </div>
+  {% if cta %}
+    <div class="ilo--cardgroup--button-wrap">
+      <a
+        class="ilo--button ilo--button--medium ilo--button--secondary"
+        href="{{cta.url}}"
+      >
+        <span class="button__label">{{ cta.label }}</span>
+      </a>
+    </div>
+    {% endif %}
+</div>