@ilo-org/twig 0.7.1 → 0.8.1

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

@@ -0,0 +1,48 @@
+statcard:
+  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/src/patterns/components/card_stat/index.js

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

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

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

package/src/patterns/components/card_text/card_text.twig

@@ -0,0 +1,35 @@
+{#
+  FEATURE CARD COMPONENT
+#}
+
+<div class="{{prefix}}--card--wrapper">
+  <div class="{{prefix}}--card {{prefix}}--card__type__text {{prefix}}--card__size__{{ size }} {{prefix}}--card__action {{prefix}}--card__theme__{{theme}}">
+    <a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}">
+      <span class="{{prefix}}--card--link--text">{{title}}</span>
+    </a>
+    <div class="{{prefix}}--card--wrap">
+      <div class="{{prefix}}--card--content">
+        {% if eyebrow %}
+          <p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
+        {% endif %}
+        {% if title %}
+          <h5 class="{{prefix}}--card--title">{{title}}</h5>
+        {% endif %}
+        {% if date %}
+          <time class="{{prefix}}--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/src/patterns/components/card_text/card_text.wingsuit.yml

@@ -0,0 +1,59 @@
+textcard:
+  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/src/patterns/components/card_text/index.js

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

package/src/patterns/components/cardgroup/cardgroup.twig

@@ -1,36 +1,33 @@
 {#
   CARDGROUP COMPONENT
 #}
-<div class="{{prefix}}--cardgroup {{prefix}}--cardgroup--{{cardcount}}">
+<div class="{{prefix}}--cardgroup {{prefix}}--cardgroup__count__{{cardcount}} {% if collapsed %} {{prefix}}--cardgroup__collapsed {% endif %} {% if justify %} {{prefix}}--cardgroup__justify__{{justify}} {% endif %}">
   <div class="{{prefix}}--cardgroup--inner">
     {% for card in group %}
-      {% include "@components/card/card.twig" with {
-        title: card.title,
-        image: card.image,
-        intro: card.intro,
-        eyebrow: card.eyebrow,
-        date: card.date,
-        dataset: card.dataset,
-        link: card.link,
-        profile: card.profile,
-        eventdate: card.eventdate,
-        cta: card.cta,
-        source: card.source,
-        list: card.list,
-        linklist: card.linklist,
-        color: card.color,
-        imageAlt: card.imageAlt,
-        loading: card.loading,
-        prefix: prefix,
-        theme: theme,
-        cornercut: cornercut,
-        alignment: alignment,
-        variant: variant,
-        type: type,
-        size: size
-      } only %}
-    {% endfor %}
-
+      <div class="{{prefix}}--cardgroup--card">
+        {% include "@components/card/card.twig" with {
+          size: "fluid",
+          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: card.alignment,
+          color: card.color,
+          cornercut: card.cornercut,
+          source: card.source,
+          prefix: prefix
+        } only %}
+      </div>
+      {% endfor %}
     {% if cta %}
     <div class="{{prefix}}--cardgroup--button-wrap">
       <a