@ilo-org/twig 0.13.0 → 0.14.1

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.1 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.1 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @ilo-org/twig
 
+## 0.14.1
+
+### Patch Changes
+
+- 9d79b2a6f: Modify tooltip label and icon condition
+- 1e6365385: Add popperjs as a dependency in twig instead of as a dev dependency
+
+## 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/apps/storybook/patterns/intro.stories.mdx

@@ -4,23 +4,12 @@ import { getStorybook, storiesOf } from "@storybook/react";
 import LinkTo from "@storybook/addon-links/react";
 
 <Meta
-  title="Introduction"
+  title="Getting Started"
   parameters={{ viewMode: "docs", previewTabs: { canvas: { hidden: true } } }}
 />
 
 <div style={{ paddingTop: "40px", color: "inherit" }}>
-  <h2
-    style={{
-      fontFamily: "Overpass",
-      fontSize: "56.95px",
-      fontWeight: "700",
-      marginBottom: "40px",
-      border: "none",
-    }}
-  >
-    ILO Design System
-  </h2>
-  <h3
+  <h1
     style={{
       fontFamily: "Overpass",
       fontSize: "45.56px",
@@ -29,288 +18,167 @@ import LinkTo from "@storybook/addon-links/react";
     }}
   >
     Getting Started
-  </h3>
+  </h1>
 </div>
 
-This package provides the implementation of the Design System using [Twig](https://twig.symfony.com/doc/). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of Twig components, using [Wingsuit](https://wingsuit-designsystem.github.io/). Wingsuit uses [Twing](https://www.npmjs.com/package/twing), a Node port of Twig, to compile Twigs to HTML. It has dependencies on the following other @ilo-org packages:
-
-- [@ilo-org/themes](./packages/themes)
-- [@ilo-org/fonts](./packages/fonts)
-- [@ilo-org/styles](./packages/styles)
-- [@ilo-org/utils](./packages/utils)
-- [@ilo-org/icons](./packages/icons)
-
-<h4
-  style={{
-    fontFamily: "Overpass",
-    fontSize: "29px",
-    fontWeight: "700",
-    marginBottom: "40px",
-    marginTop: "40px",
-  }}
->
-  Installation and PNPM Commands
-</h4>
-
-To install
-
-```bash
-npm i @ilo-org/twig
-```
-
-To start storybook
-
-```bash
-pnpm storybook
-```
-
-To build storybook
-
-```bash
-pnpm build:storybook
-```
-
-To build and start storybook
-
-```bash
-pnpm build
-```
-
-To build Twigs to be used in a CMS like Drupal (this will output Twigs and necessary JavaScript to a `/dist` folder.)
-
-```bash
-pnpm output
-```
-
-This package imports the `prefix` from the `themes` package; to manually import it, run
-
-```bash
-pnpm import:prefix
-```
-
-This package imports icon svgs from the `icons` package; to manually import them, run
-
-```bash
-pnpm import:svgs
-```
-
-<h4
-  style={{
-    fontFamily: "Overpass",
-    fontSize: "29px",
-    fontWeight: "700",
-    marginBottom: "40px",
-    marginTop: "40px",
-  }}
->
-  Architecture
-</h4>
-
-Because this is a modified version of Storybook which compliles and displays Twigs instead of React components, there are some notable differences between this and vanilla versions of Storybook. One prominent difference is in directory structure. Each component folder, located in `src/patterns/components`, contains the following files:
-
-```
-component.stories.jsx
-component.twig
-component.wingsuit.yml
-index.js
-```
-
-and potentially, if Javascript interactivity exists, also the following:
-
-```
-component.behavior.js
-component.js
-```
-
-Wingsuit consumes the `component.wingsuit.yml` file, which is a [UI Pattern YAML](https://wingsuit-designsystem.github.io/components/wingsuit/) borrowed from [Drupal](https://www.drupal.org/project/ui_patterns_settings), and uses this to populate and format the Storybook story for each components. **As such, one is limited in how much one can customize the Storybook experience.**
-
-<h4
-  style={{
-    fontFamily: "Overpass",
-    fontSize: "29px",
-    fontWeight: "700",
-    marginBottom: "40px",
-    marginTop: "40px",
-  }}
->
-  Javascript
-</h4>
+Welcome to the ILO Design System Twig component library. This resource is crafted to assist developers in creating accessible, user-friendly websites for Drupal that with the International Labour Organization's Visual Identity. The library offers a variety of easy-to-use components tailored for these popular platforms, ensuring both compliance with web accessibility standards and a cohesive visual style. Components are responsive and are ready-made for RTL layouts.
 
-In this package, Javascript is vanilla, with each component that requires Javascript functionality loading an [ES class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) named after the component, scoped and bound to the component's outermost element. Wingsuit is configured to instantiate view classes via a function that looks for a [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) that calls the view name provided in that attribute. On page load, the app looks for elements with the data attribute `data-loadcomponent` and loads whatever modules have corresponding names, passing a reference to the `HTMLElement` containing the data attribute. All the JS is bundled by Webpack into one file, meaning the JS file can be cached and only has to be downloaded from the server once per session.
+## Requirements
 
-The JS is well-documented in comments, so poke around and you'll get the gist of how it works.
+The Design System comprises a series of packages that you can install from the [npm](https://www.npmjs.com/) registry directly into your custom theme. As such, you'll need to have `npm` or similar package manager (`yarn` or `pnpm`) installed in your environment.
 
-Here's an example of HTML component markup that will automatically call some Javascript. Given the following HTML:
+## Installation
 
-```
-<section class="component componentname" data-loadcomponent="ComponentName">
-      <!-- component HTML goes here -->
-</section>
-```
-
-Javascript will look in the `ComponentMap` Class for a JS Class called `ComponentName` and then create a new instance of that class and call it. If you've added a new JS Class specific to the module you've built, you'll need to import the JS file to `ComponenetMap` and add it to `ComponenteMap`'s exports. If you've created a new Class, you'll need to make sure to pass the param `element` into the constructor - this is a reference to the DOM element with the `data-loadcomponent` attribute on it. This allows you to scope your JS to each instance of an HTML module.
-
-<h4
-  style={{
-    fontFamily: "Overpass",
-    fontSize: "29px",
-    fontWeight: "700",
-    marginBottom: "40px",
-    marginTop: "40px",
-  }}
->
-  Questions and Feedback
-</h4>
-
-(TBD)
-
-<h4
-  style={{
-    fontFamily: "Overpass",
-    fontSize: "29px",
-    fontWeight: "700",
-    marginBottom: "40px",
-    marginTop: "40px",
-  }}
->
-  Accessibility Standards
-</h4>
-
-(TBD)
-
-<h4
-  style={{
-    fontFamily: "Overpass",
-    fontSize: "29px",
-    fontWeight: "700",
-    marginBottom: "40px",
-    marginTop: "40px",
-  }}
->
-  Contributing
-</h4>
-
-ILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the following guidelines.
-
-## Branches
-
-| Branch    | Purpose                            |
-| --------- | ---------------------------------- |
-| `main`    | The latest version of all packages |
-| `develop` | The next release of all packages   |
-
-## Contribution workflow
-
-1. Fork and clone the repo
-2. Create a new branch from the `develop` branch
-3. Make your changes and [add a changeset](#versioning) identifying the changes and affected packages
-4. Push your branch to the forked version of the repo
-5. Open a pull request back to the `develop` branch of the main repo
-
-## Versioning
-
-The project uses [changesets](https://github.com/changesets/changesets) to manage package versioning. All pull requests that will affect the project's semantic versioning must include a changest.
-
-See more information on [how to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
-
-## Conventions
-
-Contributions should respect the following conventions for branch names, commit messages and pull request descriptions
+You will want to install the latest versions of both `@ilo-org/twig` and `@ilo-org/styles`. The first includes all of the Twig and JavaScript files that you'll need to use the component, whereas the second includes the stylesheets that you'll need to render them.
 
-### Commits
+In the root of your custom theme, run the following command:
 
-Commits should follow [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#commit).
+`$ npm i @ilo-org/twig @ilo-org/styles`
 
-```
-<type>(<scope>): <subject>
-```
-
-Examples:
-
-```
-fix(react): change button color on hover
-feat(twig): add button component
-ci(github): add release workflow
-perf(react): improve modal animations
-```
-
-#### Types
-
-- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
-- ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
-- docs: Documentation only changes
-- feat: A new feature
-- fix: A bug fix
-- perf: A code change that improves performance
-- refactor: A code change that neither fixes a bug nor adds a feature
-- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
-- test: Adding missing tests or correcting existing tests
-
-#### Scopes
+⚠️ Note that the two libraries are versioned separately so you'll want to make sure that you're always using the latest versions of both to ensure they're both in sync. You should see an installation warning if you try to install incompatible versions.
 
-This should be a package name or an aspect of the project's configuration.
+## Usage
 
-### Branches
+Now that you have installed the component library, you'll need to expose them so that you can integrate them into your templates.
 
-Branch names should broadly mirror the same convention as commits.
+### Bundle JavaScript
 
-Examples:
+You'll want to start by moving the components' JavaScript to a distribution folder where you can serve it as static assets. The easiest way to do this is with a JavaScript bundler like [Rollup.js](https://rollupjs.org/). Here's a sample configuration to illustrate.
 
-```
-feat/react/modal-wrapper
-fix/twig/modal-wrapper
-```
-
-### Pull requests
-
-Pull requests should include a descriptive name and detailed explanation of what merging the pull request will accomplish. Authors should make sure to reference Github issues that the the pull request will fix or affect.
-
-## Building the project
+```js
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import { globSync } from "glob";
 
-Use [nvm](https://github.com/nvm-sh/nvm) to make sure you have the correct version of node installed.
+const designSystemEntries = globSync(
+  "node_modules/@ilo-org/twig/dist/components/**"
+);
 
-```bash
-nvm use
+export default () => {
+  return designSystemEntries.map((entry) => {
+    return {
+      input: entry,
+      output: {
+        dir: "dist/js",
+        compact: true,
+        format: "umd",
+        name: entry.match(/([^\/]+)\.js$/)[1],
+      },
+      plugins: [nodeResolve(), commonjs()],
+    };
+  });
+};
 ```
 
-Install [pnpm](https://pnpm.io/).
+This will output all of the Components JavaScript files into a `dist/js` directory so you'll have a list of both the component JavaScript and the `Drupal.behavior` declarations that you'll need to attach them to components.
 
-```bash
-npm i -g pnpm
+```tree
+📦js
+ ┣ 📜accordion.behavior.js
+ ┣ 📜accordion.js
+ ┣ 📜breadcrumb.behavior.js
+ ┣ 📜breadcrumb.js
+ ┣ 📜callout.behavior.js
+ ┣ 📜callout.js
+ ...
 ```
 
-Install dependencies
+### Bundle CSS
 
-```bash
-pnpm recursive install
-```
-
-Build all packages.
+The CSS files are available in the 'dist/css' subdirectories:
 
-```bash
-pnpm build:all
+```tree
+📦css
+ ┣ 📂00-base
+ ┃ ┣ 📜base.css
+ ┣ 📂01-paragraphs
+ ┃ ┣ 📜paragraphs.css
+ ┃ ┗ 📜breadcrumb.css
+ ┣ 📂02-templates
+ ┃ ┣ 📜maintenance-page.css
+ ...
 ```
 
-Start React storybook
-
-```bash
-pnpm start:react-storybook
-```
+### Populating the theme.libraries.yml file
 
-Start Twig storybook
+The theme.libraries.yml should first include the base CSS file:
 
-```bash
-pnpm start:twig-storybook
+```yaml
+base:
+  css:
+    theme:
+      dist/css/00-base/base.css: {}
+      node_modules/@ilo-org/styles/css/global.css: {}
+      node_modules/@ilo-org/styles/css/components/container.css: {}
 ```
 
-Check types
+Then, for each component, you have to declare the CSS file in the theme.libraries.yml file. For example, for the breadcrumb component:
 
-```bash
-pnpm check:types
+```yaml
+breadcrumb:
+  css:
+    theme:
+      dist/css/01-paragraphs/breadcrumb.css: {}
 ```
 
-Run all tests
+With the 'dist' directory in your theme, you have to declare the components in the theme.libraries.yml file. For example, for the breadcrumb component:
 
-```bash
-pnpm test:all
+```yaml
+breadcrumb:
+  css:
+    theme:
+      dist/css/01-paragraphs/breadcrumb.css: {}
+  embeds:
+    js:
+      dist/js/embeds.js: { defer: true }
+```
+
+The documentation for the theme.libraries.yml file is available [here](https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module).
+
+In the template file of the component, you have to declare the component in the Twig file. For example, for the breadcrumb component:
+
+```twig
+{{ attach_library('ilo/breadcrumb') }}
+
+{% include '@ilo-org/twig/breadcrumb/breadcrumb.twig' with {
+  home: breadcrumb_home,
+  links: breadcrumb_links,
+} %}
+```
+
+A helper function in your theme.theme file to aggregate all .behavior.js files:
+
+```php
+/**
+* Implements hook_library_info_build().
+*
+* Generate libraries for all components if they don't already exist.
+* The library name will mapped be the name of the source CSS / JS file,
+* e.g. site_header.css will be mapped to `{THEME}/site_header`.
+*
+*/
+function theme_library_info_build() {
+  // Define libraries based on the components.
+  $extensions = ['css'];
+  $directory = 'themes/custom/ilo/node_modules/@ilo-org/styles/css/components';
+  $css = 'node_modules/@ilo-org/styles/css/components';
+  $js = 'dist/js';
+  $extensions = array_map('preg_quote', $extensions);
+  $extensions = implode('|', $extensions);
+  $file_scan = \Drupal::service('file_system')->scanDirectory($directory, "/{$extensions}$/");
+  $libraries = [];
+  foreach ($file_scan as $file) {
+    $libraries[$file->name]['css'] = [
+      'component' => [
+        $css . '/' . $file->name . '.css' => [],
+      ],
+    ];
+  if (file_exists('themes/custom/ilo/' . $js . '/' . $file->name . '.behavior.js')) {
+    $libraries[$file->name]['js'] = [
+      $js . '/' . $file->name . '.behavior.js' => [],
+    ];
+  }
+
+  return $libraries;
+}
 ```

package/apps/storybook/patterns/welcome.stories.mdx

@@ -24,12 +24,21 @@ import LinkTo from "@storybook/addon-links/react";
   </a>
   <a
     class="ilo--button ilo--button--large ilo--button--tertiary optionalclass"
-    href="https://brand.ilo.org"
+    href="https://brand.ilo.org/designsystem"
     target="true"
     rel="noopener noreferrer"
    style={{ margin: "1rem 20px 0 0" }}
   >
     <span class="link__label">Design Docs</span>
+  </a>
+    <a
+    class="ilo--button ilo--button--large ilo--button--tertiary optionalclass"
+    href="https://www.figma.com/file/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?type=design&node-id=34%3A1554&mode=design&t=mMJCQdfOgEz1AsYP-1"
+    target="true"
+    rel="noopener noreferrer"
+   style={{ margin: "1rem 20px 0 0" }}
+  >
+    <span class="link__label">Figma</span>
   </a>
   <a
     class="ilo--button ilo--button--large ilo--button--tertiary optionalclass"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -21,11 +21,12 @@
     "components"
   ],
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "video.js": "^7.21.2",
     "@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/fonts": "0.1.2",
+    "@ilo-org/styles": "0.13.0",
     "@ilo-org/themes": "0.7.0",
     "@ilo-org/utils": "0.0.11"
   },
@@ -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",
@@ -76,8 +77,8 @@
     "webpack": "^4.46.0",
     "yaml-loader": "0.6.0",
     "yo": "^3.1.1",
-    "@ilo-org/eslint-config": "0.1.0",
-    "@ilo-org/prettier-config": "0.0.2"
+    "@ilo-org/prettier-config": "0.0.2",
+    "@ilo-org/eslint-config": "0.1.0"
   },
   "scripts": {
     "storybook": "node importprefix.js && node importsvgs.js && start-storybook --config-dir apps/storybook",

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

@@ -3,12 +3,12 @@
 {% set icontheme = icontheme|default("light") %}
 {% set theme = theme|default("dark") %}
 
-<div class="{{prefix}}--tooltip--wrapper {% if icon %} {{prefix}}--tooltip--wrapper__icon {{prefix}}--tooltip--wrapper__icon__theme__{{icontheme}} {% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="{{prefix}}">
+<div class="{{prefix}}--tooltip--wrapper {% if icon and icon != "false" %} {{prefix}}--tooltip--wrapper__icon {{prefix}}--tooltip--wrapper__icon__theme__{{icontheme}} {% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="{{prefix}}">
 	{% 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>