@ilo-org/twig 0.6.0 → 0.8.0

package/src/patterns/components/cardgroup/cardgroup.wingsuit.yml

@@ -1,13 +1,76 @@
 cardgroup:
   use: "@components/cardgroup/cardgroup.twig"
   label: Card Group
-  description: The Card group
+  description: A group of cards
+  visibility: storybook
+  settings:
+    collapsed:
+      type: select
+      label: collapsed
+      description: Optionally collapses margins between the cards.
+      required: false
+      preview: false
+      options:
+        true: True
+        false: False
+    justify:
+      type: select
+      label: collapsed
+      description: Sets the horizontal justification of the cards. `between` justifies the cards to the left and right edges of the container, and the space between the cards is distributed evenly. `center` is the default.
+      required: false
+      preview: center
+      options:
+        start: start
+        center: center
+        between: between
+    size:
+      type: select
+      label: Size
+      description: Sets the size of all of the cards. See the `Card` component for more details on the different sizes.
+      required: false
+      options:
+        standard: standard
+        narrow: narrow
+        wide: wide
+        fluid: fluid
   fields:
     group:
       type: object
       label: Group of cards
-      description: The group of cards, object
+      description: "The group of cards. Each card can be one of the following types: multilink, feature, detail, graphicpromo, stat, graphic, factlist, data. All fields are passed to cards except for size, which is managed by the card group."
       preview:
+        - type: text
+          eyebrow: "Podcast"
+          title: "Can digital technology be an equality machine?"
+          link: "https://www.ilo.org/"
+          cta:
+            label: "Read the press release"
+            url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
+          theme: dark
+        - type: text
+          eyebrow: "Podcast"
+          title: "Can digital technology be an equality machine?"
+          link: "https://www.ilo.org/"
+          cta:
+            label: "Read the press release"
+            url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
+          theme: dark
+        - type: text
+          eyebrow: "Podcast"
+          title: "Can digital technology be an equality machine?"
+          link: "https://www.ilo.org/"
+          cta:
+            label: "Read the press release"
+            url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
+          theme: dark
+        - type: text
+          eyebrow: "Podcast"
+          title: "Can digital technology be an equality machine?"
+          link: "https://www.ilo.org/"
+          cta:
+            label: "Read the press release"
+            url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
+          theme: dark
     cta:
       type: object
       label: CTA
@@ -15,450 +78,7 @@ cardgroup:
       preview:
         label: "Discover our unique mission"
         url: "https://www.ilo.org"
-  variants:
-    multilink:
-      label: Multilink
-      description: multilink settings
-      fields:
-        group:
-          - title: "Multi-link card - first"
-            image: "/images/hero.jpg"
-            imageAlt: "The alt text of the image"
-            loading: lazy
-            intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
-            eyebrow: ""
-            date: ""
-            link: ""
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            source: ""
-            dataset: ""
-            linklist:
-              headline: ""
-              linkgroup:
-                - headline: ""
-                  links:
-                    - label: Link One
-                      url: "http://www.google.com"
-                    - label: Link Two
-                      url: "http://www.google.com"
-                    - label: Link Three
-                      url: "http://www.google.com"
-          - title: "Multi-link card second - right aligned image, wide option"
-            image: "/images/medium.jpg"
-            imageAlt: "The alt text of the image"
-            loading: "lazy"
-            intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
-            eyebrow: ""
-            date: ""
-            link: ""
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            source: ""
-            linklist:
-              headline: ""
-              linkgroup:
-                - headline: ""
-                  links:
-                    - label: Link One
-                      url: "http://www.google.com"
-                    - label: Link Two
-                      url: "http://www.google.com"
-                    - label: Link Three
-                      url: "http://www.google.com"
-          - title: "Multi-link card - right aligned image, wide option"
-            image: "/images/ilo-headquarters.jpg"
-            imageAlt: "The alt text of the image"
-            loading: "lazy"
-            intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
-            eyebrow: ""
-            date: ""
-            link: ""
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            source: ""
-            linklist:
-              headline: ""
-              linkgroup:
-                - headline: ""
-                  links:
-                    - label: Link One
-                      url: "http://www.google.com"
-                    - label: Link Two
-                      url: "http://www.google.com"
-                    - label: Link Three
-                      url: "http://www.google.com"
-      settings:
-        type: multilink
-    feature:
-      label: Feature
-      description: feature settings
-      fields:
-        group:
-          - title: "Vertical info card descriptive headline text"
-            image: "/images/small.jpg"
-            imageAlt: "The alt text of the image"
-            loading: "lazy"
-            intro: ""
-            eyebrow: "Eyebrow title"
-            date:
-              human: "Date"
-              unix: 1670389200
-            link: "https://www.ilo.org?q=feature"
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            source: ""
-            list: ""
-            dataset: ""
-            color: ""
-          - title: "Vertical info card descriptive headline text"
-            image: "/images/hero.jpg"
-            imageAlt: "The alt text of the image"
-            loading: "lazy"
-            intro: ""
-            eyebrow: "Eyebrow title"
-            date:
-              human: "Date"
-              unix: 1670389200
-            link: "https://www.ilo.org?q=feature"
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            source: ""
-            list: ""
-            dataset: ""
-            color: ""
-          - title: "Vertical info card descriptive headline text Vertical info card descriptive headline text Vertical info card descriptive headline text"
-            image: "images/ilo-headquarters.jpg"
-            imageAlt: "The alt text of the image"
-            loading: "lazy"
-            intro: ""
-            eyebrow: "Eyebrow title"
-            date:
-              human: "Date"
-              unix: 1670389200
-            link: "https://www.ilo.org?q=feature"
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            source: ""
-            list: ""
-            dataset: ""
-            color: ""
-          - title: "Vertical info card descriptive headline text"
-            image: "/images/youtube-video-poster.avif"
-            imageAlt: "The alt text of the image"
-            loading: "lazy"
-            intro: ""
-            eyebrow: "Eyebrow title"
-            date:
-              human: "Date"
-              unix: 1670389200
-            link: "https://www.ilo.org?q=feature"
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            source: ""
-            list: ""
-            dataset: ""
-            color: ""
-      settings:
-        type: feature
-    detail:
-      label: Detail
-      description: detail settings
-      fields:
-        group:
-          - title: "Horizontal info card descriptive headline text"
-            image: "/images/ilo-headquarters.jpg"
-            imageAlt: "The alt text of the image"
-            loading: "lazy"
-            intro: "This ILO flagship report details the effects of the COVID-19 crisis on the world of work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu auctor tusrpis, this is 200 characters."
-            eyebrow: "Eyebrow title"
-            date:
-              human: "00 month 0000"
-              unix: 1670389200
-            link: "https://www.ilo.org?q=detail"
-            profile: ""
-            eventdetails: "8 - 9 February 2022, 8:30 - 12:00 CET  |  Egypt"
-            cta: ""
-            source: ""
-            linklist: ""
-            list: ""
-            dataset: ""
-            color: ""
-          - title: "Horizontal info card descriptive headline text"
-            image: "/images/small.jpg"
-            imageAlt: "The alt text of the image"
-            loading: "lazy"
-            intro: "This ILO flagship report details the effects of the COVID-19 crisis on the world of work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu auctor tusrpis, this is 200 characters."
-            eyebrow: "Eyebrow title"
-            date:
-              human: "00 month 0000"
-              unix: 1670389200
-            link: "https://www.ilo.org?q=detail"
-            profile: ""
-            eventdetails: "8 - 9 February 2022, 8:30 - 12:00 CET  |  Egypt"
-            cta: ""
-            source: ""
-            linklist: ""
-            list: ""
-            dataset: ""
-            color: ""
-      settings:
-        type: detail
-        theme: light
-    graphicpromo:
-      label: Graphic Promo
-      description: graphic promo settings
-      fields:
-        group:
-          - title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
-            image: ""
-            intro: "We advance social justice and promote decent work by setting labour standards, developing policies and devising programmes."
-            eyebrow: ""
-            date: ""
-            link: "https://www.ilo.org"
-            profile: ""
-            eventdetails: ""
-            cta:
-              label: "Discover our unique mission"
-              url: "https://www.ilo.org?q=button"
-            source: ""
-            linklist: ""
-            list: ""
-            dataset: ""
-      settings:
-        type: graphicpromo
-    stat:
-      label: Stat cards
-      description: Stat settings
-      fields:
-        group:
-          - title: "Date headline"
-            image: ""
-            intro: "Data title - Lorem ipsum dolor sit amet consectetur"
-            eyebrow: ""
-            date: ""
-            link: ""
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            list: ""
-            source:
-              label: "Source: lorem ipsum dolor sit amet, 2020"
-              url: "https://www.ilo.org?q=stat"
-            color: blue
-          - title: "Date headline"
-            image: ""
-            intro: "Data title - Lorem ipsum dolor sit amet consectetur"
-            eyebrow: ""
-            date: ""
-            link: ""
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            list: ""
-            source:
-              label: "Source: lorem ipsum dolor sit amet, 2020"
-              url: "https://www.ilo.org?q=stat"
-            color: green
-          - title: "Date headline"
-            image: ""
-            intro: "Data title - Lorem ipsum dolor sit amet consectetur"
-            eyebrow: ""
-            date: ""
-            link: ""
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            list: ""
-            source:
-              label: "Source: lorem ipsum dolor sit amet, 2020"
-              url: "https://www.ilo.org?q=stat"
-            color: yellow
-          - title: "Date headline"
-            image: ""
-            intro: "Data title - Lorem ipsum dolor sit amet consectetur"
-            eyebrow: ""
-            date: ""
-            link: ""
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            list: ""
-            source:
-              label: "Source: lorem ipsum dolor sit amet, 2020"
-              url: "https://www.ilo.org?q=stat"
-            color: turquoise
-      settings:
-        type: stat
-        theme: light
-    graphic:
-      label: Graphic Text
-      description: graphic settings
-      fields:
-        group:
-          - title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
-            image: ""
-            intro: ""
-            eyebrow: "Eyebrow title"
-            date:
-              human: "date"
-              unix: 1670389200
-            link: "https://www.ilo.org?q=graphic"
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            source: ""
-            linklist: ""
-            list: ""
-            dataset: ""
-      settings:
-        type: graphic
-    factlist:
-      label: Factlist
-      description: Factlist settings
-      fields:
-        group:
-          - title: "Title of fast fact list"
-            intro: ""
-            eyebrow: ""
-            date: ""
-            link: ""
-            image: ""
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            list:
-              title: ""
-              settings:
-                - ordered: unordered
-                - alignment: default
-              items:
-                - content: "Wipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
-                  id: "list1"
-                - content: "Nut labore et dolore magna sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                  id: "list2"
-      settings:
-        type: factlist
-    data:
-      label: Data
-      description: Data settings
-      fields:
-        group:
-          - title: ""
-            image: "/images/small.jpg"
-            imageAlt: "The alt text of the image"
-            loading: "lazy"
-            intro: ""
-            eyebrow: "Event details"
-            date: ""
-            link: ""
-            profile: ""
-            eventdetails: ""
-            cta: ""
-            dataset:
-              content:
-                items:
-                  - label: Date
-                    copy: Publication date
-                  - label: Event type
-                    copy: Event location
-              files:
-                headline: Files
-                items:
-                  - label: File/size MB 1
-                    url: "https://www.ilo.org?q=file1"
-                  - label: File/size MB 2
-                    url: "https://www.ilo.org?q=file2"
-                  - label: File/size MB 3
-                    url: "https://www.ilo.org?q=file3"
-              links:
-                headline: Languages
-                items:
-                  - label: Language link 1
-                    url: "https://www.ilo.org?q=link"
-                  - label: Language link 2
-                    url: "https://www.ilo.org?q=hyperlink"
-                  - label: Language link 3
-                    url: "https://www.ilo.org?q=url"
-      settings:
-        type: data
-        theme: light
-  settings:
-    size:
-      type: select
-      label: Size
-      description: Size of the cards (usually reduces padding)
-      preview: "standard"
-      options:
-        wide: wide
-        standard: Standard
-        narrow: Narrow
-    color:
-      type: select
-      label: Color
-      description: Color of the stat cards, options are turquoise, green, yellow, or blue
-      preview: "blue"
-      options:
-        blue: Blue
-        turquoise: Turquoise
-        green: Green
-        yellow: Yellow
-    type:
-      type: select
-      label: Card Count
-      description: Number of cards within a group
-      required: true
-      preview: "detail"
-      options:
-        data: Data
-        detail: Detail
-        factlist: Factlist
-        feature: Feature
-        graphic: Graphic
-        graphicpromo: Graphic Promo
-        multilink: Multilink
-        stat: Stat
-    cardcount:
-      type: select
-      label: Card Count
-      description: Number of cards within a group
-      required: true
-      preview: "two"
-      options:
-        one: One
-        two: Two
-        three: Three
-        four: Four
-    theme:
-      type: select
-      label: Theme
-      description: The theme type for the hero
-      required: false
-      preview: "dark"
-      options:
-        dark: Dark
-        light: Light
-    cornercut:
-      type: select
-      label: Corner cut
-      description: Setting for whether the card has a cut corner
-      preview: cornercut
-      options:
-        cornercut: Corner cut
-        corner: Corner
-    alignment:
-      type: select
-      label: Alignment
-      description: Set whether card (multilink) image is right aligned or left aligned
-      preview: left
-      options:
-        left: Left
-        right: right
-  visibility: storybook
+
+
+
+

package/src/patterns/components/hero/hero.twig

@@ -1,5 +1,5 @@
 {#
-  Temp COMPONENT
+  Hero COMPONENT
 #}
   <div class="hero hero__card-justify__{{ justify }} hero__poster-size__{{ postersize }} hero__card-size__{{ cardsize }} hero__card-align__{{ align }}">
     <figure class="hero--figure">

package/src/patterns/components/logogrid/index.js

@@ -0,0 +1,6 @@
+/**
+ * LogoGrid
+ */
+// Module template
+import "./logogrid.twig";
+import "./logogrid.wingsuit.yml";

package/src/patterns/components/logogrid/logogrid.stories.jsx

@@ -0,0 +1,9 @@
+import "./index";
+
+export default {};
+const patternDefinition = require("./logogrid.wingsuit.yml");
+
+/* eslint-disable-next-line */
+export const wingsuit = {
+  patternDefinition,
+};

package/src/patterns/components/logogrid/logogrid.twig

@@ -0,0 +1,17 @@
+<div class="{{prefix}}--logo-grid {{prefix}}--logo-grid__theme__{{ theme }}">
+  <div class="{{prefix}}--logo-grid--logos">
+    {% for logo in logos %}
+      {% if logo.url %}
+        <a href="{{ logo.url }}" class="{{prefix}}--logo-grid--item {{prefix}}--logo-grid--link">
+      {% else %}
+        <div class="{{prefix}}--logo-grid--item">
+      {% endif %}
+        <img src="{{ logo.src }}" alt="{{ logo.label }}" class="{{prefix}}--logo-grid--logo__image">
+      {% if logo.url %}
+        </a>
+      {% else %}
+        </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+</div>

package/src/patterns/components/logogrid/logogrid.wingsuit.yml

@@ -0,0 +1,46 @@
+logogrid:
+  use: "@components/logogrid/logogrid.twig"
+  label: Logo Grid
+  description: The Logo Grid component renders a series of logos representing a group of organizations. It can be shown on a light or dark background.
+  settings:
+    theme:
+      type: select
+      label: Theme
+      description: The theme of the component
+      default: light
+      options:
+        light: Light
+        dark: Dark
+      preview: "light"
+  fields:
+    logos:
+      type: object
+      label: Logos
+      description: Logos to display
+      required: true
+      preview:
+        - label: "International Labour Organization"
+          src: "/images/logo_en_horizontal_blue.svg"
+          url: "https://www.ilo.org/"
+
+        - label: "Food and Agriculture Organization"
+          src: "/images/fao-logo.svg"
+          url: "https://www.fao.org"
+
+        - label: "World Health Organization"
+          src: "/images/who-logo.svg"
+          url: "https://www.who.int/"
+
+        - label: "World Food Programme"
+          src: "/images/wfp-logo.svg"
+          url: "https://www.wfp.org/"
+
+        - label: "UNICEF"
+          src: "/images/unicef-logo.png"
+          url: "https://www.unicef.org/"
+
+        - label: "UN Refugees"
+          src: "/images/unhcr-logo.svg"
+          url: "https://www.unhcr.org/"
+
+

package/src/patterns/components/picture/index.js

@@ -0,0 +1,6 @@
+/**
+ * Link
+ */
+// Module template
+import "./picture.twig";
+import "./link.wingsuit.yml";

package/src/patterns/components/picture/picture.twig

@@ -0,0 +1,21 @@
+{#
+  PICTURE COMPONENT
+#}
+{% if image.url is iterable %}
+  <picture>
+    {% for img in image.url|reverse %}
+      {% if loop.last == false  %}
+        {% if img.breakpoint matches '/^\\d+$/' %}
+          <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+        {% else %}
+          <source srcset="{{img.src}}" media="{{img.breakpoint}}">
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+    <img class="{{prefix}}--{{class}}--picture" src="{{image|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
+  </picture>
+  {% else %}
+  <picture>
+    <img class="{{prefix}}--{{class}}--picture" src="{{image.url}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
+  </picture>
+{% endif %}

package/src/patterns/components/accordion/accordion-item.wingsuit.yml

@@ -1,30 +0,0 @@
-accordion:
-  use: "@components/accordion/accordion-item.twig"
-  label: Accordion Item
-  description: A collapsible accordion item.
-  fields:
-    label:
-      type: text
-      label: Label
-      description: The accordion item's heading.
-      preview:
-        faker: lorem.word
-    content:
-      type: text
-      label: Content
-      description: The accordion item's collapsed content.
-      preview:
-        faker: lorem.word
-    id:
-      type: text
-      label: ID
-      description: The accordion item's id.
-      preview:
-        faker: lorem.word
-    defaultExpanded:
-      type: text
-      label: Default Expanded
-      description: The accordion item loads in default expanded state.
-      preview:
-        faker: lorem.word
-  visibility: storybook