@ilo-org/twig 0.13.0 → 0.14.0

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

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

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @ilo-org/twig
 
+## 0.14.0
+
+### Minor Changes
+
+- df7080c80: Used popper library to handle tooltip
+- 6fe60e0d6: Add a `gap` setting to the hero card that allows the developer to set an optional background color on the entire Hero,
+  which fills the "gap" between the bottom of the Hero Card and the bottom of the hero image when `align` is set to `bottom` or `baseline`. Options are `transparent`, `white`, `light` and `dark`.
+
+### Patch Changes
+
+- b014e9af0: Fix Breadcrumb incorrectly assuming there will always be at least two links
+- c54ce9923: Fix Breadcrumb spacing vis-a-vis Hero
+- a78b32be4: Add eyebrow to multilink card
+- 9ed7b873d: build(deps-dev): bump postcss from 8.4.21 to 8.4.31
+- Updated dependencies [df7080c80]
+- Updated dependencies [c5eaabd55]
+- Updated dependencies [720825342]
+- Updated dependencies [6f86e7a94]
+- Updated dependencies [94b03b9be]
+- Updated dependencies [c54ce9923]
+- Updated dependencies [6fe60e0d6]
+- Updated dependencies [9ed7b873d]
+- Updated dependencies [c173ec9f8]
+  - @ilo-org/styles@0.13.0
+
 ## 0.13.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -25,13 +25,14 @@
     "@ilo-org/brand-assets": "0.2.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.12.0",
+    "@ilo-org/styles": "0.13.0",
     "@ilo-org/themes": "0.7.0",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
+    "@popperjs/core": "^2.11.8",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
@@ -58,7 +59,7 @@
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^1.6.2",
     "optimize-css-assets-webpack-plugin": "^5.0.8",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.31",
     "postcss-loader": "^4.3.0",
     "postcss-nested": "^4.2.3",
     "postcss-scss": "^4.0.6",

package/src/patterns/components/breadcrumb/breadcrumb.twig

@@ -10,28 +10,34 @@
 				<span class="{{prefix}}--breadcrumb--link--label">{{home.label}}</span>
 			</a>
 		</li>
-		<li class="{{prefix}}--breadcrumb--item first">
-			<a class="{{prefix}}--breadcrumb--link" href="{{firstlink.url}}">
-				<span class="{{prefix}}--breadcrumb--link--label">{{firstlink.label}}</span>
-			</a>
-		</li>
-		<li class="{{prefix}}--breadcrumb--item--context">
-			<ul class="{{prefix}}--breadcrumb--items context--menu">
-				{% for link in links %}
-					{% if not loop.first and not loop.last %}
-						<li class="{{prefix}}--breadcrumb--item">
-							<a href="{{link.url}}" class="{{prefix}}--breadcrumb--link">
-								<span class="{{prefix}}--breadcrumb--link--label">{{link.label}}</span>
-							</a>
-						</li>
-					{% endif %}
-				{% endfor %}
-			</ul>
-		</li>
-		<li class="{{prefix}}--breadcrumb--item final">
-			<a class="{{prefix}}--breadcrumb--link" href="{{lastlink.url}}">
-				<span class="{{prefix}}--breadcrumb--link--label">{{lastlink.label}}</span>
-			</a>
-		</li>
+		{% if links|length >= 2 %}
+			<li class="{{prefix}}--breadcrumb--item first">
+				<a class="{{prefix}}--breadcrumb--link" href="{{firstlink.url}}">
+					<span class="{{prefix}}--breadcrumb--link--label">{{firstlink.label}}</span>
+				</a>
+			</li>
+		{% endif %}
+		{% if links|length >= 3%}
+			<li class="{{prefix}}--breadcrumb--item--context">
+				<ul class="{{prefix}}--breadcrumb--items context--menu">
+					{% for link in links %}
+						{% if not loop.first and not loop.last %}
+							<li class="{{prefix}}--breadcrumb--item">
+								<a href="{{link.url}}" class="{{prefix}}--breadcrumb--link">
+									<span class="{{prefix}}--breadcrumb--link--label">{{link.label}}</span>
+								</a>
+							</li>
+						{% endif %}
+					{% endfor %}
+				</ul>
+			</li>
+		{% endif %}
+		{% if links|length >= 1%}
+			<li class="{{prefix}}--breadcrumb--item final">
+				<a class="{{prefix}}--breadcrumb--link" href="{{lastlink.url}}">
+					<span class="{{prefix}}--breadcrumb--link--label">{{lastlink.label}}</span>
+				</a>
+			</li>
+		{% endif %}
 	</ol>
 </nav>

package/src/patterns/components/card_multilink/card_multilink.twig

@@ -17,6 +17,9 @@
       %}
     </div>
     <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 %}

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

@@ -12,6 +12,11 @@ multilinkcard:
       preview:
         human: 20 September 2022
         unix: 1670389200
+    eyebrow:
+      type: string
+      label: Eyebrow
+      description: Eyebrow copy
+      preview: "Podcast"
     image:
       type: object
       label: Image

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

@@ -3,7 +3,7 @@
 {% set theme = theme|default(herocard.theme) %}
 {% set background = background|default(herocard.background) %}
 
-<div class="hero hero__card-justify__{{ justify }} hero__poster-size__{{ postersize }} hero__card-size__{{ cardsize }} hero__card-align__{{ align }} hero__card-theme__{{ theme }}">
+<div class="hero {% if gap %} hero__gap__{{ gap }} {% endif %} hero__card-justify__{{ justify }} hero__poster-size__{{ postersize }} hero__card-size__{{ cardsize }} hero__card-align__{{ align }} hero__card-theme__{{ theme }} hero__card-background__{{ background }}">
 	<figure class="hero--background">
 		{% block hero_image %}
 			{% if image %}
@@ -19,7 +19,6 @@
 		{% endblock %}
 	</figure>
 	{% if breadcrumb %}
-		<div class="hero--breadcrumbs-offset"></div>
 		<div class="hero--breadcrumbs">
 			<div class="hero--breadcrumbs--wrapper">
 				{% include "@components/breadcrumb/breadcrumb.twig" with {

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

@@ -65,6 +65,15 @@ hero:
       preview:
         label: A metalurgy worker at a manufacturing plant in Viet Nam. © ILO/Minh Quang
   settings:
+    gap:
+      label: Gap
+      description: The color of the gap between the bottom of the hero image and the bottom of the card if there is one. In practice, this is the background color of the entire Hero component which will usually only be visible in that space.
+      type: select
+      options:
+        transparent: transparent
+        white: white
+        light: light
+        dark: dark
     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.

package/src/patterns/components/tooltip/tooltip.js

@@ -3,6 +3,9 @@
  *
  * @class Tooltip
  */
+
+import { createPopper, right } from "@popperjs/core";
+
 export default class Tooltip {
   /**
    * Tooltip constructor which assigns the element passed into the constructor
@@ -100,96 +103,54 @@ export default class Tooltip {
   }
 
   handleOnMouseOut() {
-    this.tooltip.classList.remove(`${this.prefix}--tooltip--fade`);
     setTimeout(() => {
+      this.tooltip.classList.remove(`${this.prefix}--tooltip--fade`);
       this.tooltip.classList.remove(`${this.prefix}--tooltip--visible`);
-    }, 150);
+    }, 200);
 
     return this;
   }
 
   postMouseOver(hoverRect) {
-    // position the tooltip after showing it
-    let placement = "center";
-    let alignment = "left";
-
     const ttNode = this.tooltip;
+    this.setMaxWidthAndClass(this.tooltip);
     if (ttNode != null) {
-      let x = 0,
-        y = 0;
-
-      const docWidth = document.documentElement.clientWidth,
-        docHeight = document.documentElement.clientHeight;
-
-      const rx = hoverRect.x + hoverRect.width, // most right x
-        lx = hoverRect.x, // most left x
-        ty = hoverRect.y, // most top y
-        by = hoverRect.y + hoverRect.height; // most bottom y
-
-      // tooltip rectange
-      const ttRect = ttNode.getBoundingClientRect();
-
-      const bRight =
-        rx + ttRect.width <= window.scrollX + docWidth &&
-        ty + ttRect.height <= window.scrollY + docHeight;
-      const bLeft =
-        lx - ttRect.width >= 0 &&
-        ty + ttRect.height <= window.scrollY + docHeight;
-      const bAbove = ty - ttRect.height >= 0;
-      const bBellow = by + ttRect.height <= window.scrollY + docHeight;
-
-      // the tooltip doesn't fit to the left
-      if (bRight) {
-        x = hoverRect.width + 32;
-        y = 0;
-        placement = "negative";
-        alignment = "right";
-      } else if (bBellow) {
-        x = 0;
-        y = hoverRect.height + 32;
-
-        placement = "center";
-        alignment = "bottom";
-      } else if (bLeft) {
-        x = -ttRect.width - 32;
-        y = 0;
-
-        placement = "negative";
-        alignment = "left";
-      } else if (bAbove) {
-        x = 0;
-        y = -ttRect.height - 32;
-
-        placement = "center";
-        alignment = "top";
+      // Create Popper instance if not already existing
+      if (!this.popper) {
+        this.popper = createPopper(this.element, this.tooltip, {
+          // Set tooltip priority to be placed on top first
+          placement: "top",
+          modifiers: [
+            "flip", // Changes the side of the tooltip if there isnt space
+            "preventOverflow",
+            {
+              name: "offset",
+              options: {
+                offset: [0, 12], // Adjust offset as needed
+              },
+            },
+          ],
+        });
       }
 
-      // set style top and left on tooltip
-      this.tooltip.style.top = y;
-      this.tooltip.style.left = x;
-
-      // set class for placement on arrow
-      this.arrow.classList.remove(
-        `${this.prefix}--tooltip--arrow--placement-${this.placement}`
-      );
-      this.arrow.classList.add(
-        `${this.prefix}--tooltip--arrow--placement-${this.placement}`
-      );
-      this.placement = placement;
-      this.arrow.setAttribute("data-placement", placement);
-
-      // set class for alignment on tooltip
-      this.tooltip.classList.remove(
-        `${this.prefix}--tooltip--alignment-${this.alignment}`
-      );
-      this.tooltip.classList.add(
-        `${this.prefix}--tooltip--alignment-${this.alignment}`
-      );
-      this.alignment = alignment;
-
-      this.tooltip.setAttribute("data-alignment", alignment);
+      // Update Popper position
+      this.popper.update();
     }
 
     return this;
   }
+
+  /**
+   * Set max width and add class based on content length
+   *
+   * @param {string} content - Tooltip content
+   */
+  setMaxWidthAndClass(tooltip) {
+    const tooltipText = tooltip.textContent || tooltip.innerText;
+    const textLength = tooltipText.trim().length;
+
+    if (textLength > 50) {
+      this.tooltip.classList.add(`${this.prefix}--tooltip--long`);
+    }
+  }
 }

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

@@ -7,8 +7,8 @@
 	{% if not icon or icon == "false" %}
 		{{ children|raw }}
 	{% endif %}
-	<span class="{{prefix}}--tooltip {{prefix}}--tooltip--{{theme}}" data-alignment="left" id={{tooltipId}}>
-		<span class="{{prefix}}--tooltip--arrow {{prefix}}--tooltip--arrow--placement-negative" data-placement="negative" role="presentation"></span>
+	<span data-id={{tooltipId}} id="tooltip" role="tooltip" class="{{prefix}}--tooltip {{prefix}}--tooltip--{{theme}}" data-alignment="left" >
+		<span data-popper-arrow class="{{prefix}}--tooltip--arrow {{prefix}}--tooltip--arrow--placement-negative" data-placement="negative" role="presentation"></span>
 		{{label}}
 	</span>
 </div>