npm - @ilo-org/twig - Versions diffs - 0.4.1 → 0.6.0 - Mend

@ilo-org/twig 0.4.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/.turbo/turbo-build:lib.log CHANGED Viewed

@@ -1,9 +1,9 @@
-> @ilo-org/twig@0.4.1 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.6.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
 > node importprefix.js && node importsvgs.js && pnpm output
 theme prefix added
-> @ilo-org/twig@0.4.1 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.6.0 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,40 @@
 # @ilo-org/twig
+## 0.6.0
+### Minor Changes
+- 0f45a7aae: Add new social media component and use in hero card and footer components
+### Patch Changes
+- Updated dependencies [0f45a7aae]
+- Updated dependencies [0f45a7aae]
+- Updated dependencies [0f45a7aae]
+- Updated dependencies [0f45a7aae]
+- Updated dependencies [2f6b0e73f]
+  - @ilo-org/themes@0.2.0
+  - @ilo-org/icons@0.2.1
+  - @ilo-org/styles@0.5.0
+## 0.5.0
+### Minor Changes
+- e74f529ac: Refactor hero and hero card component. Expose layout and style options more explicitly and remove parameters and classes that refer to specific template names which could change.
+- cc4fe4ba6: In the Callout component, use the Button component so it can take a url and act as a link
+### Patch Changes
+- bb9180a14: In hero, make sure breadcrumb is not null and not empty or it could render unintentionally
+- Updated dependencies [5df0bb1a9]
+- Updated dependencies [51b4be31a]
+- Updated dependencies [6a7dbe609]
+- Updated dependencies [b498c19c4]
+  - @ilo-org/icons@0.2.0
+  - @ilo-org/themes@0.1.16
+  - @ilo-org/styles@0.4.0
 ## 0.4.1
 ### Patch Changes

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -24,9 +24,9 @@
     "video.js": "^7.21.2",
     "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
-    "@ilo-org/icons": "0.1.17",
-    "@ilo-org/styles": "0.3.5",
-    "@ilo-org/themes": "0.1.15",
+    "@ilo-org/icons": "0.2.1",
+    "@ilo-org/styles": "0.5.0",
+    "@ilo-org/themes": "0.2.0",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {

package/src/patterns/components/callout/callout.twig CHANGED Viewed

@@ -16,14 +16,19 @@
       {% endif %}
     </div>
     {{ content }}
-    {% if buttonLabel %}
+    {% if button %}
       <div class="{{prefix}}--callout--footer">
-        <button
-          class="{{prefix}}--button {{prefix}}--button--small {{prefix}}--button--secondary"
-          type="button"
-        >
-          <span class="button__label">{{ buttonLabel }}</span>
-        </button>
+        {% include '@components/button/button.twig' with {
+          label: button.label,
+          url: button.url,
+          target: button.target,
+          icon: button.icon,
+          className: button.className,
+          icon: button.icon,
+          iconPosition: button.iconPosition,
+          size: "small",
+          type: "secondary",
+        } %}
       </div>
     {% endif %}
   </div>

package/src/patterns/components/callout/callout.wingsuit.yml CHANGED Viewed

@@ -3,12 +3,17 @@ callout:
   label: Callout
   description: A callout alert section with a few different types
   fields:
-    buttonLabel:
-      type: string
+    button:
+      type: object
       label: Button Label
-      description: The label for the optional button
-      preview: "Optional Button Label"
+      description: Fields to pass to the button if there is one
       required: false
+      preview:
+        label: "Button"
+        url: "https://www.ilo.org"
+        target: "_blank"
+        icon: false
+        className: "optionalclass"
     content:
       type: text
       label: Content

package/src/patterns/components/footer/footer.twig CHANGED Viewed

@@ -22,15 +22,14 @@
     {% endif %}
     {% if social or subscribe %}
     <div class="connect">
-      {% if social %}
-        <h5 class="social--headline">{{social.headline}}</h5>
-        <ul class="social--links">
-          {% for link in social.links %}
-            <li class="social--links--item">
-              <a href="{{link.url}}" class="social--links--link {{link.type|lower}}">{{link.type|capitalize}}</a>
-            </li>
-          {% endfor %}
-        </ul>
+      {% if socialmedia %}
+        <div class="social--links">
+          {% include '@components/socialmedia/socialmedia.twig' with {
+            theme: "dark",
+            headline: socialmedia.headline,
+            icons: socialmedia.icons,
+          } %}
+        </div>
       {% endif %}
       {% if subscribe %}
         {% include '@components/button/button.twig' with {label: subscribe.label, url: subscribe.url, type: 'primary', size: 'large', target: '_blank'} %}

package/src/patterns/components/footer/footer.wingsuit.yml CHANGED Viewed

@@ -48,23 +48,34 @@ footer:
               url: "http://www.google.com"
             - label: "Link Six"
               url: "http://www.google.com"
-    social:
+    socialmedia:
       type: object
       label: social
       description: "Links to social media"
       preview:
-        headline: "Social Links Headline"
-        links:
-          - type: "instagram"
-            url: "http://www.google.com"
-          - type: "facebook"
-            url: "http://www.google.com"
-          - type: "twitter"
-            url: "http://www.google.com"
-          - type: "twitter"
-            url: "http://www.google.com"
-          - type: "instagram"
-            url: "http://www.google.com"
+        headline: "Connect with the ILO"
+        icons:
+          - icon: "twitter"
+            label: "Twitter"
+            url: "https://twitter.com/#!/ilo"
+          - icon: "facebook"
+            label: "Facebook"
+            url: "https://www.facebook.com/ilo.org"
+          - icon: "linkedin"
+            label: "LinkedIn"
+            url: "https://www.linkedin.com/company/international-labour-organization-ilo"
+          - icon: "instagram"
+            label: "Instagram"
+            url: "https://www.instagram.com/ilo.org/"
+          - icon: "tiktok"
+            label: "TikTok"
+            url: "https://www.tiktok.com/@ilo"
+          - icon: "flickr"
+            label: "Flickr"
+            url: "https://www.flickr.com/photos/ilopictures/albums"
+          - icon: "youtube"
+            label: "YouTube"
+            url: "https://www.youtube.com/channel/UCrlcu5KChYyHwXlIeD7oLUg"
     subscribe:
       type: object
       label: subscribe

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

@@ -1,35 +1,52 @@
 {#
-  HERO COMPONENT
+  Temp COMPONENT
 #}
-<div class="{{prefix}}--hero {{prefix}}--hero--{{theme}} {{prefix}}--hero--{{types}} {% if image %}{{prefix}}--hero--image{% endif %}">
-  {% if breadcrumb is defined %}
-    {% include "@components/breadcrumb/breadcrumb.twig" with {
-      home: breadcrumb.home,
-      links: breadcrumb.links,
+  <div class="hero hero__card-justify__{{ justify }} hero__poster-size__{{ postersize }} hero__card-size__{{ cardsize }} hero__card-align__{{ align }}">
+    <figure class="hero--figure">
+      {% block hero_image %}
+        {% if image %}
+          <picture>
+            {% for img in image.url|reverse %}
+              {% if loop.last == false  %}
+                <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+              {% endif %}
+            {% endfor %}
+            <img class="{{prefix}}--card--image" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}"{% endif %}>
+          </picture>
+        {% endif %}
+      {% endblock %}
+    </figure>
+    {% if breadcrumb %}
+      <div class="hero--breadcrumbs">
+        <div class="hero--breadcrumbs--wrapper">
+          {% include "@components/breadcrumb/breadcrumb.twig" with {
+            home: breadcrumb.home,
+            links: breadcrumb.links,
+            prefix: prefix,
+          } only %}
+        </div>
+      </div>
+    {% endif %}
+    <div class="hero--card">
+      {% include "@components/herocard/herocard.twig" with {
+      url: herocard.url,
+      eyebrow: herocard.eyebrow,
+      cornercut: herocard.cornercut,
+      datecopy: herocard.datecopy,
+      intro: herocard.intro,
       prefix: prefix,
+      socialmedia: herocard.socialmedia,
+      theme: herocard.theme,
+      background: herocard.background,
+      title: herocard.title,
     } only %}
-  {% endif %}
-  {% block hero_image %}
-    {% if not image %}
-    {% else %}
-      {% include "@components/image/image.twig" with {
-        alt: image.alt,
-        prefix: prefix,
-        url: image.url,
-        ishero: "true"
-      } only %}
-    {% endif %}
-  {% endblock %}
-  {% include "@components/herocard/herocard.twig" with {
-    alignment: herocard.alignment,
-    eyebrow: herocard.eyebrow,
-    datecopy: herocard.datecopy,
-    hasbackground: hasbackground,
-    intro: herocard.intro,
-    prefix: prefix,
-    socials: herocard.socials,
-    theme: theme,
-    title: herocard.title,
-    types: types
-  } only %}
-</div>
+    </div>
+    <div class="hero--caption">
+      {% if not caption %}
+        {% else %}
+        <div class="hero--caption--wrapper">
+          {% include '@components/tooltip/tooltip.twig' with caption %}
+        </div>
+      {% endif %}
+    </div>
+  </div>

package/src/patterns/components/hero/hero.wingsuit.yml CHANGED Viewed

@@ -1,10 +1,23 @@
 hero:
   use: "@components/hero/hero.twig"
   label: Hero
-  description: The Hero presents an image banner.
+  description: The Hero is an attention-grabbing section of a web page designed to engage users and create a memorable first impression.
   fields:
+    image:
+      label: Image
+      type: object
+      description: The image to display in the hero. The image will be cropped to fit the hero's aspect ratio.
+      preview:
+        alt: Lorem ipsum
+        loading: lazy
+        url:
+          - breakpoint: 0
+            src: "/images/hero.jpg"
+          - breakpoint: 768
+            src: "/images/hero.jpg"
     breadcrumb:
-      label: Implementation of Breadcrumb component. See Breadcrumb for more details
+      label: Bread crumbs
+      description: The breadcrumb navigation to display in the hero.
       type: object
       preview:
         home:
@@ -21,72 +34,125 @@ hero:
             url: "/linkfour"
           - label: "Link Five"
             url: "/linkfive"
-    image:
-      label: Implementation of Image component. See Image for more details
+    herocard:
+      label: Hero Card
       type: object
+      description: The hero card to display in the hero. See docs on the Hero Card component for more information about the fields.
       preview:
-        alt: Lorem ipsum
-        url:
-          - breakpoint: 0
-            src: "/images/hero.jpg"
-          - breakpoint: 768
-            src: "/images/hero.jpg"
-    herocard:
-      label: Part of the hero that displays text on top of image (or if no image on a background color). There are light and dark versions and all text parts are optional.
+        title: "Child labour"
+        theme: "dark"
+        background: "solid"
+        cornercut: "true"
+        eyebrow: ILO Topics
+        socialmedia:
+          icons:
+            - label: "Facebook"
+              url: "https://www.facebook.com/ilo.org"
+              icon: "facebook"
+            - label: "Twitter"
+              url: "https://www.twitter.com/ilo.org"
+              icon: "twitter"
+            - label: "Linkedin"
+              url: "https://www.linkedin.com/company/international-labour-organization-ilo"
+              icon: "linkedin"
+    caption:
+      label: Caption
       type: object
+      description: The credit and caption information about the image. Appears as a tooltip.
       preview:
-        alignment: left
-        datecopy: 11 February 2022
-        eyebrow: Eyebrow
-        intro: "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-        socials:
-          - label: "Facebook"
-            url: "https://www.facebook.com/ilo.org"
-            icon: "facebook"
-          - label: "Linkedin"
-            url: "https://www.linkedin.com/company/international-labour-organization-ilo"
-            icon: "linkedin"
-        title: "This is an left aligned article headline that is more than two lines long"
+        label: A metalurgy worker at a manufacturing plant in Viet Nam. © ILO/Minh Quang
+        icon: "true"
+        theme: "dark"
+  settings:
+      justify:
+        label: Justify
+        description: Sets the horizontal alignment of the hero card. `start` is on the left in LTR layouts and on the right in RTL layouts.
+        type: select
+        options:
+          start: start
+          offset: offset
+          center: center
+        preview: "start"
+      align:
+        label: Align
+        description: Sets the vertical alignment of the hero card.
+        type: select
+        options:
+          baseline: baseline
+          center: center
+          bottom: bottom
+        preview: "baseline"
+      postersize:
+        label: Poster Size
+        description: Sets the size of the image poster.
+        type: select
+        options:
+          small: small
+          medium: medium
+          large: large
+          xlarge: xlarge
+        preview: large
+      cardsize:
+        label: Card Size
+        description: Sets the width of the hero card.
+        type: select
+        options:
+          small: small
+          medium: medium
+          large: large
+          xlarge: xlarge
+          xxlarge: xxlarge
+        preview: small
   variants:
     default:
       label: Default
+    homepage:
+      label: Homepage
+      description: The hero variant for the homepage.
+      settings:
+        align: "center"
+        justify: "start"
+        postersize: "large"
+        cardsize: "medium"
+      fields:
+        breadcrumb: null
+        herocard:
+          title: "ILO welcomes G7 call to make a just transition to a green economy happen"
+          url: "https://www.ilo.org"
+          theme: "dark"
+          background: "semi-transparent"
+          cornercut: false
+          eyebrow: UN General Assembly
     article:
       label: Article
-      description: article settings
-      fields:
-        image: ""
       settings:
-        theme: light
-        types: article
-  settings:
-    theme:
-      type: select
-      label: Theme
-      description: The theme type for the hero
-      required: false
-      preview: "dark"
-      options:
-        dark: Dark
-        light: Light
-    hasbackground:
-      type: select
-      label: Has Background
-      description: does the hero card have a background? (Defaults to true, only applied to Home Hero)
-      options:
-        true: true
-        false: "false"
-      preview: true
-    types:
-      type: select
-      label: Types
-      description: The type of hero
-      required: false
-      preview: "publication"
-      options:
-        home: Home
-        publication: Publication
-        graphic: Graphic
-        project: Project
-        article: Article
-        portal: Portal
+        align: "bottom"
+        justify: "center"
+        postersize: "xlarge"
+        cardsize: "large"
+      fields:
+        breadcrumb: null
+        herocard:
+          title: "When a woman becomes a boss in a man's world"
+          datecopy: "11 February 2021"
+          theme: "light"
+          background: "solid"
+          cornercut: "true"
+          eyebrow: Women in management
+          socialmedia:
+            icons:
+              - label: "Facebook"
+                url: "https://www.facebook.com/ilo.org"
+                icon: "facebook"
+              - label: "Twitter"
+                url: "https://www.twitter.com/ilo.org"
+                icon: "twitter"
+              - label: "Linkedin"
+                url: "https://www.linkedin.com/company/international-labour-organization-ilo"
+                icon: "linkedin"
+        caption:
+          label: A metalurgy worker at a manufacturing plant in Viet Nam. © ILO/Minh Quang
+          icon: "true"
+          theme: "dark"
   visibility: storybook

package/src/patterns/components/herocard/herocard.twig CHANGED Viewed

@@ -1,12 +1,18 @@
 {#
   HEROCARD COMPONENT
 #}
-<div class="{{prefix}}--hero-card {{prefix}}--hero-card--{{alignment}} {{prefix}}--hero-card--{{theme}} {{prefix}}--hero-card--{{types}}{% if not hasbackground or hasbackground == 'false' %} {{prefix}}--hero-card--nobackground{% endif %}">
+<div class="{{prefix}}--hero-card {{prefix}}--hero-card__theme__{{ theme }} {{prefix}}--hero-card__background__{{ background }} {% if cornercut == "true" %} {{prefix}}--hero-card__cornercut {% endif %}">
   {% if eyebrow %}
     <p class="{{ prefix }}--hero-card--eyebrow">{{ eyebrow }}</p>
   {% endif %}
   {% if title %}
-    <h2 class="{{ prefix }}--hero-card--title">{{ title }}</h2>
+    {% if url %}
+      <a href={{ url }} class="{{ prefix }}--hero-card--title-link">
+        <h1 class="{{ prefix }}--hero-card--title">{{ title }}</h1>
+      </a>
+    {% else %}
+     <h1 class="{{ prefix }}--hero-card--title">{{ title }}</h2>
+    {% endif %}
   {% endif %}
   {% if datecopy %}
     <p class="{{ prefix }}--hero-card--datecopy">{{ datecopy }}</p>
@@ -14,18 +20,11 @@
   {% if intro %}
     <p class="{{ prefix }}--hero-card--intro">{{ intro }}</p>
   {% endif %}
-  <ul class="{{ prefix }}--hero-card--list">
-    {% for item in socials %}
-      <li class="{{ prefix }}--hero-card--list--item">
-        <a
-          class="{{ prefix }}--hero-card--link icon icon--{{ item.icon }}"
-          href={{ item.url }}
-          title={{ item.label }}
-        >
-          {{ item.label }}
-        </a>
-      </li>
-    {% endfor %}
-  </ul>
+  {% if socialmedia %}
+    {% include "@components/socialmedia/socialmedia.twig" with {
+      theme: theme,
+      align: "start",
+      icons: socialmedia.icons
+  } %}
+  {% endif %}
 </div>

package/src/patterns/components/herocard/herocard.wingsuit.yml CHANGED Viewed

@@ -1,9 +1,40 @@
 herocard:
   use: "@components/herocard/herocard.twig"
   label: Hero Card
-  description: The Hero card, a subcomponent of the hero
+  description: The Hero Card includes the title, intro, date, and social links for the hero
   id: herocard
+  settings:
+    theme:
+      type: select
+      label: Theme
+      description: The theme of the hero card.
+      options:
+        light: light
+        dark: dark
+      preview: "dark"
+    background:
+      type: select
+      label: Background
+      description: Should the background be solid, semi-transparent or transparent
+      options:
+        solid: solid
+        semi-transparent: semi-transparent
+        transparent: transparent
+      preview: "solid"
+    cornercut:
+      type: select
+      label: Cornercut
+      description: Whether the card show have its right or left corner cut
+      options:
+        false: false
+        true: "true"
+      preview: "true"
   fields:
+    url:
+      type: string
+      label: URL
+      description: Optional URL for the hero card. If provided, the title will be a link.
+      preview: null
     datecopy:
       type: string
       label: Date copy
@@ -13,44 +44,27 @@ herocard:
       type: string
       label: Eyebrow
       description: Copy for the eyebrow of the card
-      preview: "Eyebrow"
+      preview: "Gender equality"
     intro:
       type: string
       label: Intro
       description: Intro text for the hero
-      preview: "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-    socials:
+      preview: "Over the last three decades, global supply chains have been a key entry point for women to enter the formal workforce."
+    socialmedia:
       type: object
-      label: Social links
+      label: Social media links
       description: The social links to include in the hero
       preview:
-        - label: "Facebook"
-          url: "https://www.facebook.com/"
-          icon: "facebook"
-        - label: "Linkedin"
-          url: "https://www.linkedin.com/"
-          icon: "linkedin"
+        icons:
+          - label: "Facebook"
+            url: "https://www.facebook.com/"
+            icon: "facebook"
+          - label: "Linkedin"
+            url: "https://www.linkedin.com/"
+            icon: "linkedin"
     title:
       type: string
       label: Title
       description: This is the title for the hero card
-      preview: "This is an centered aligned article headline that is more than two lines long"
-  settings:
-    alignment:
-      type: select
-      label: Alignment
-      description: alignment for card
-      options:
-        left: "left"
-        center: "center"
-        right: "right"
-      preview: "center"
-    hasbackground:
-      type: select
-      label: Has Background
-      description: does the hero card have a background? (Defaults to true, only applied to Home Hero)
-      options:
-        true: true
-        false: "false"
-      preview: true
+      preview: "How to achieve gender equality in global garment supply chains"
   visibility: storybook

package/src/patterns/components/socialmedia/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * SocialMedia COMPONENT
+ */
+// Module template
+import "./socialmedia.twig";
+import "./socialmedia.wingsuit.yml";

package/src/patterns/components/socialmedia/socialmedia.mdx ADDED Viewed

@@ -0,0 +1,48 @@
+import { Title, Subtitle } from "@storybook/addon-docs/blocks";
+import {
+  PatternLoad,
+  PatternPreview,
+  PatternProperties,
+  PatternInclude,
+  PatternDoc,
+} from "@wingsuit-designsystem/storybook";
+import brandTokens from "@ilo-org/themes/tokens/brand/base.json";
+<PatternLoad patternId="socialmedia">
+  {(pattern) => {
+    return (
+      <>
+        <Title />
+        <Subtitle>{pattern.description}</Subtitle>
+        <div style={{ margin: "30px 0" }}>
+          <div
+            style={{
+              padding: "30px 20px",
+              border: "1px solid rgba(0,0,0,.1)",
+              boxShadow: "rgba(0, 0, 0, 0.10) 0 1px 3px 0",
+            }}
+          >
+            <PatternPreview variant={pattern.getDefaultVariant()} />
+          </div>
+          <div
+            style={{
+              padding: "30px 20px",
+              border: "1px solid rgba(0,0,0,.1)",
+              boxShadow: "rgba(0, 0, 0, 0.10) 0 1px 3px 0",
+              background: "rgba(35, 0, 80, 1)",
+            }}
+          >
+            <PatternPreview
+              variant={pattern.getDefaultVariant()}
+              theme="dark"
+            />
+          </div>
+        </div>
+        <h3>Properties</h3>
+        <PatternProperties variant={pattern.getDefaultVariant()} />
+        <h3>Basic usage</h3>
+        <PatternInclude variant={pattern.getDefaultVariant()} />
+      </>
+    );
+  }}
+</PatternLoad>

package/src/patterns/components/socialmedia/socialmedia.stories.jsx ADDED Viewed

@@ -0,0 +1,15 @@
+import "./index";
+import mdx from "./socialmedia.mdx";
+export default {};
+const patternDefinition = require("./socialmedia.wingsuit.yml");
+/* eslint-disable-next-line */
+export const wingsuit = {
+  patternDefinition,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};

package/src/patterns/components/socialmedia/socialmedia.twig ADDED Viewed

@@ -0,0 +1,17 @@
+{#
+  SOCIALMEDIA COMPONENT
+#}
+<div class="{{ prefix }}--social-media {{ prefix }}--social-media__theme__{{ theme|default("light") }} {{ prefix }}--social-media__justify__{{ align|default("start") }}">
+    {% if headline %}
+        <h5 class="{{ prefix }}--social-media--headline">{{ headline }}</h5>
+    {% endif %}
+    <ul class="{{ prefix }}--social-media--list">
+        {% for item in icons %}
+            <li class="{{ prefix }}--social-media--list--item">
+                <a class="{{ prefix }}--social-media--list--item--icon {{ prefix }}--social-media--list--item--icon__{{ item.icon }}" href={{ item.url }} title={{ item.label|capitalize }} target="_blank">
+                    {{item.label|capitalize}}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</div>

package/src/patterns/components/socialmedia/socialmedia.wingsuit.yml ADDED Viewed

@@ -0,0 +1,58 @@
+socialmedia:
+  use: "@components/socialmedia/socialmedia.twig"
+  label: Social Media
+  description: The Social Media component displays a series of social media icons with links and an optional headline. It can have a light or a dark theme.
+  settings:
+    theme:
+      type: select
+      label: Theme
+      description: The theme of the social media icons.
+      options:
+        light: light
+        dark: dark
+      preview: light
+      defaultValue: light
+    justify:
+      type: select
+      label: Justify
+      description: The justification of the headline and icons.
+      options:
+        start: start
+        center: center
+      preview: start
+      defaultValue: start
+  fields:
+    headline:
+      type: string
+      label: headline
+      description: Optional headline of social media links
+      preview: "Follow us on social media"
+      required: false
+    icons:
+      type: object
+      label: icons
+      description: The social media icons to display. Each icon has an `icon` corresponding to the name of a social network icon in lowercase, a `label` that is displayed as a tooltip, and a `url` that is the link to the social media page.
+      preview:
+        - icon: "twitter"
+          label: "Twitter"
+          url: "https://twitter.com/#!/ilo"
+        - icon: "facebook"
+          label: "Facebook"
+          url: "https://www.facebook.com/ilo.org"
+        - icon: "linkedin"
+          label: "LinkedIn"
+          url: "https://www.linkedin.com/company/international-labour-organization-ilo"
+        - icon: "instagram"
+          label: "Instagram"
+          url: "https://www.instagram.com/ilo.org/"
+        - icon: "tiktok"
+          label: "TikTok"
+          url: "https://www.tiktok.com/@ilo"
+        - icon: "flickr"
+          label: "Flickr"
+          url: "https://www.flickr.com/photos/ilopictures/albums"
+        - icon: "youtube"
+          label: "YouTube"
+          url: "https://www.youtube.com/channel/UCrlcu5KChYyHwXlIeD7oLUg"
+      required: true
+  visibility: storybook

package/src/patterns/components/tooltip/tooltip.twig CHANGED Viewed

@@ -2,7 +2,7 @@
   TOOLTIP COMPONENT
 #}
   <div
-    class="{{prefix}}--tooltip--wrapper{% if icon and icon != 'false' %} has-icon{% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="{{prefix}}"
+    class="{{prefix}}--tooltip--wrapper{% if icon and icon != 'false' %} has-icon{% endif %} {{prefix}}--tooltip--wrapper--{{theme}}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="{{prefix}}"
   >
     {% if not icon or icon == 'false' %}
       {{ children|raw }}