BREAKING CHANGE(web): Toast JS plugin linkProps changed to underlined

- `isUnderlined` changed to `underlined` in `Toast` JS plugin to better reflect changes in react and twig `Link` component - solves #DS-1509
lmc-eu · Oct 17, 2024 · e7e7d36 · e7e7d36
1 parent 33d2629
commit e7e7d36
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/packages/web/src/js/Toast.ts b/packages/web/src/js/Toast.ts
@@ -14,6 +14,7 @@ import {
   CLASS_NAME_TRANSITIONING,
   CLASS_NAME_VISIBLE,
   DEFAULT_TOAST_AUTO_CLOSE_INTERVAL,
+  CLASS_NAME_LINK_NOT_UNDERLINED,
 } from './constants';
 import { EventHandler, SelectorEngine } from './dom';
 import { enableDismissTrigger, enableToggleTrigger, executeAfterTransition, SpiritConfig } from './utils';
@@ -35,6 +36,12 @@ const COLOR_ICON_MAP = {
   warning: 'warning',
 };
 
+const UNDERLINE_MAP = {
+  hover: 'hover',
+  always: 'always',
+  never: 'never',
+};
+
 const SELECTOR_QUEUE_ELEMENT = `[${ATTRIBUTE_DATA_ELEMENT}="toast-queue"]`;
 const SELECTOR_TEMPLATE_ELEMENT = `[${ATTRIBUTE_DATA_SNIPPET}="item"]`;
 const SELECTOR_ITEM_ELEMENT = `[${ATTRIBUTE_DATA_POPULATE_FIELD}="item"]`;
@@ -52,6 +59,7 @@ export const PROPERTY_NAME_SLOWEST_TRANSITION = {
 const PROPERTY_NAME_FALLBACK_TRANSITION = 'opacity';
 
 type Color = keyof typeof COLOR_ICON_MAP;
+type Underlined = keyof typeof UNDERLINE_MAP;
 
 type Config = {
   autoCloseInterval: number;
@@ -66,7 +74,7 @@ type Config = {
     elementType: string;
     href: string;
     isDisabled: boolean;
-    isUnderlined: boolean;
+    underlined: Underlined;
     target: '_blank' | '_self' | '_parent' | '_top';
   };
   hasIcon: boolean;
@@ -195,12 +203,15 @@ class Toast extends BaseComponent {
     if (linkContent) {
       const linkElementWithType = document.createElement(linkProps.elementType || 'a');
       linkElement.replaceWith(linkElementWithType);
-      const isUnderlined = linkProps.isUnderlined != null ? linkProps.isUnderlined : true;
+      const { underlined = UNDERLINE_MAP.always } = linkProps;
 
       linkElementWithType.classList.add('ToastBar__link');
-      if (isUnderlined) {
+      if (underlined === UNDERLINE_MAP.always) {
         linkElementWithType.classList.add(CLASS_NAME_LINK_UNDERLINED);
       }
+      if (underlined === UNDERLINE_MAP.never) {
+        linkElementWithType.classList.add(CLASS_NAME_LINK_NOT_UNDERLINED);
+      }
       if (linkProps.isDisabled) {
         linkElementWithType.classList.add(CLASS_NAME_LINK_DISABLED);
       }

diff --git a/packages/web/src/js/constants.ts b/packages/web/src/js/constants.ts
@@ -13,6 +13,7 @@ export const CLASS_NAME_OPEN = 'is-open';
 export const CLASS_NAME_TRANSITIONING = 'is-transitioning';
 export const CLASS_NAME_VISIBLE = 'is-visible';
 export const CLASS_NAME_LINK_UNDERLINED = 'link-underlined';
+export const CLASS_NAME_LINK_NOT_UNDERLINED = 'link-not-underlined';
 export const CLASS_NAME_LINK_DISABLED = 'link-disabled';
 
 export const DEFAULT_TOAST_AUTO_CLOSE_INTERVAL = 3000; // milliseconds

diff --git a/packages/web/src/scss/components/Toast/README.md b/packages/web/src/scss/components/Toast/README.md
@@ -418,7 +418,7 @@ const toast = new Toast(null, {
   linkProps: {
     href: 'https://example.com', // Link URL
     target: '_blank', // Optional link target attribute
-    isUnderlined: false, // Optional link underlining, default: true
+    underlined: false, // Optional link underlining, one of ['always' (default), 'hover', 'never']
     isDisabled: false, // Optional link disabling, default: false
     elementType: 'a', // Optional link element type, default: 'a'
   },