@ilo-org/twig 0.4.1 → 0.5.0

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

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.4.1 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.5.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.5.0 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @ilo-org/twig
 
+## 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

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.4.1",
+  "version": "0.5.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.0",
+    "@ilo-org/styles": "0.4.0",
+    "@ilo-org/themes": "0.1.16",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {

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

@@ -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

@@ -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.wingsuit.yml

@@ -61,9 +61,9 @@ footer:
             url: "http://www.google.com"
           - type: "twitter"
             url: "http://www.google.com"
-          - type: "twitter"
+          - type: "tiktok"
             url: "http://www.google.com"
-          - type: "instagram"
+          - type: "flickr"
             url: "http://www.google.com"
     subscribe:
       type: object

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

@@ -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,
+      socials: herocard.socials,
+      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

@@ -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,123 @@ hero:
             url: "/linkfour"
           - label: "Link Five"
             url: "/linkfive"
-    image:
-      label: Implementation of Image component. See Image for more details
-      type: object
-      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.
+      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:
-        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."
+        title: "Child labour"
+        theme: "dark"
+        background: "solid"
+        cornercut: "true"
+        eyebrow: ILO Topics
         socials:
           - 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"
-        title: "This is an left aligned article headline that is more than two lines long"
+    caption:
+      label: Caption
+      type: object
+      description: The credit and caption information about the image. Appears as a tooltip.
+      preview:
+        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
+          socials:
+            - 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

@@ -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,7 +20,6 @@
   {% 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">

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

@@ -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,12 +44,12 @@ 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."
+      preview: "Over the last three decades, global supply chains have been a key entry point for women to enter the formal workforce."
     socials:
       type: object
       label: Social links
@@ -34,23 +65,5 @@ herocard:
       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/tooltip/tooltip.twig

@@ -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 }}