BREAKING CHANGE(web-twig): Rename inverted variant of Toast to `n…

…eutral` #DS-1446 Refactor ToastBarLink and ToastCloseButton.
lmc-eu · Oct 17, 2024 · 9ef6fb9 · 9ef6fb9
1 parent fa4d505
commit 9ef6fb9
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 60 deletions.
diff --git a/packages/web-twig/src/Resources/components/Toast/README.md b/packages/web-twig/src/Resources/components/Toast/README.md
@@ -180,7 +180,7 @@ Alternatively, a custom icon can be used:
 | ------------- | ------------- |
 | `danger`      | `danger`      |
 | `informative` | `info`        |
-| `inverted`    | `info`        |
+| `neutral`     | `info`        |
 | `success`     | `check-plain` |
 | `warning`     | `warning`     |
 
@@ -221,13 +221,10 @@ and [escape hatches][readme-escape-hatches].
 
 #### API
 
-| Name           | Type                                             | Default    | Required | Description                    |
-| -------------- | ------------------------------------------------ | ---------- | -------- | ------------------------------ |
-| `children`     | `string`                                         | —          | ✓        | Content of the link            |
-| `color`        | [Action Link Color dictionary][dictionary-color] | `inverted` | ✕        | Color of the link              |
-| `href`         | `string`                                         | —          | ✕        | ToastBarLink's href attribute  |
-| `isDisabled`   | `bool`                                           | `false`    | ✕        | Whether is the link disabled   |
-| `isUnderlined` | `bool`                                           | `true`     | ✕        | Whether is the link underlined |
+| Name       | Type     | Default | Required | Description                   |
+| ---------- | -------- | ------- | -------- | ----------------------------- |
+| `children` | `string` | —       | ✓        | Content of the link           |
+| `href`     | `string` | —       | ✕        | ToastBarLink's href attribute |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
@@ -239,7 +236,7 @@ said action), as it is very hard (if not impossible) to reach for users with ass
 
 ### Colors
 
-The ToastBar component is available in all [emotion colors][dictionary-color], plus the `inverted` variant (default).
+The ToastBar component is available in all [emotion colors][dictionary-color], plus the `neutral` variant (default).
 Use the `color` option to change the color of the ToastBar component.
 
 For example:
@@ -283,16 +280,16 @@ To make the ToastBar dismissible, add the `isDismissible` prop along with a uniq
 
 ### API
 
-| Name            | Type                                                         | Default    | Required | Description                                                          |
-| --------------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------------------------------- |
-| `closeLabel`    | `string`                                                     | `Close`    | ✕        | Close label                                                          |
-| `color`         | [[Emotion Color dictionary][dictionary-color] \| `inverted`] | `inverted` | ✕        | Color variant                                                        |
-| `hasIcon`       | `bool`                                                       | `false` \* | ✕        | If true, an icon is shown along the message                          |
-| `iconName`      | `string`                                                     | `info` \*  | ✕        | Name of a custom icon to be shown along the message                  |
-| `id`            | `string`                                                     | —          | ✕        | Optional ToastBar ID. Required when `isDismissible` is set to `true` |
-| `isDismissible` | `bool`                                                       | `false`    | ✕        | If true, ToastBar can be dismissed by user                           |
-| `isTemplate`    | `bool`                                                       | `false`    | ✕        | If true, ToastBar will be adjusted for rendering inside `<template>` |
-| `isOpen`        | `bool`                                                       | `true`     | ✕        | If true, ToastBar is visible                                         |
+| Name            | Type                                                        | Default    | Required | Description                                                          |
+| --------------- | ----------------------------------------------------------- | ---------- | -------- | -------------------------------------------------------------------- |
+| `closeLabel`    | `string`                                                    | `Close`    | ✕        | Close label                                                          |
+| `color`         | [[Emotion Color dictionary][dictionary-color] \| `neutral`] | `neutral`  | ✕        | Color variant                                                        |
+| `hasIcon`       | `bool`                                                      | `false` \* | ✕        | If true, an icon is shown along the message                          |
+| `iconName`      | `string`                                                    | `info` \*  | ✕        | Name of a custom icon to be shown along the message                  |
+| `id`            | `string`                                                    | —          | ✕        | Optional ToastBar ID. Required when `isDismissible` is set to `true` |
+| `isDismissible` | `bool`                                                      | `false`    | ✕        | If true, ToastBar can be dismissed by user                           |
+| `isTemplate`    | `bool`                                                      | `false`    | ✕        | If true, ToastBar will be adjusted for rendering inside `<template>` |
+| `isOpen`        | `bool`                                                      | `true`     | ✕        | If true, ToastBar is visible                                         |
 
 (\*) For each emotion color, a default icon is defined.
 The icons come from the [Icon package][icon-package], or from your custom source of icons.
@@ -364,7 +361,7 @@ import Toast from '@lmc-eu/spirit-web/dist/js/Toast';
 
 const toast = new Toast(null, {
   autoCloseInterval: 3000, // Set interval after ToastBar will be closed in ms, default: 3000
-  color: 'informative', // One of ['inverted' (default), 'success', 'warning, 'danger', 'informative']
+  color: 'informative', // One of ['neutral' (default), 'success', 'warning, 'danger', 'informative']
   containerId: 'toast-example', // Must match the ID of the Toast container in HTML
   enableAutoClose: true, // If true, ToastBar will close after `autoCloseInterval`, default: true
   hasIcon: true,
@@ -376,7 +373,6 @@ const toast = new Toast(null, {
     isUnderlined: false, // Optional link underlining, default: true
     isDisabled: false, // Optional link disabling, default: false
     elementType: 'a', // Optional link element type, default: 'a'
-    color: 'inverted', // Optional link color variant, default: 'inverted'
   },
   iconName: 'info', // Optional icon name used as the #fragment in the SVG sprite URL
   id: 'my-toast', // An ID is required for dismissible ToastBar

diff --git a/packages/web-twig/src/Resources/components/Toast/ToastBar.twig b/packages/web-twig/src/Resources/components/Toast/ToastBar.twig
@@ -1,7 +1,7 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _closeLabel = props.closeLabel | default('Close') -%}
-{%- set _color = props.color | default('inverted') -%}
+{%- set _color = props.color | default('neutral') -%}
 {%- set _hasIcon = props.hasIcon | default(false) -%}
 {%- set _iconName = props.iconName | default(null) -%}
 {%- set _id = props.id | default(null) -%}
@@ -14,6 +14,7 @@
 {%- set _rootColorClassName = _spiritClassPrefix ~ 'ToastBar--' ~ _color -%}
 {%- set _rootDismissibleClassName = _isDismissible is same as(true) and _isTemplate is same as(false) ? _spiritClassPrefix ~ 'ToastBar--dismissible' : null -%}
 {%- set _boxClassName = _spiritClassPrefix ~ 'ToastBar__box' -%}
+{%- set _closeClassName = _spiritClassPrefix ~ 'ToastBar__close' -%}
 {%- set _containerClassName = _spiritClassPrefix ~ 'ToastBar__container' -%}
 {%- set _contentClassName = _spiritClassPrefix ~ 'ToastBar__content' -%}
 {%- set _isOpenClassName = _isOpen or _isTemplate ? 'is-open' : 'is-hidden' -%}
@@ -58,19 +59,18 @@
             </div>
         </div>
         {% if _isDismissible is same as(true) %}
-            <Button
-                color="{{ _color }}"
+            <button
+                class="{{ _closeClassName }}"
+                type="button"
                 data-spirit-dismiss="toast"
                 data-spirit-populate-field="close-button"
                 data-spirit-target="{{ '#' ~ _id | escape('html_attr') }}"
                 aria-controls="{{ _id | escape('html_attr') }}"
                 aria-expanded="true"
-                size="small"
-                isSquare
             >
                 <Icon isReusable={ false } name="close" />
                 <VisuallyHidden>{{ _closeLabel }}</VisuallyHidden>
-            </Button>
+            </button>
         {% endif %}
     </div>
 </div>
diff --git a/packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig b/packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig
@@ -1,24 +1,22 @@
 {# API #}
-{%- set props = props | default([]) -%}
-{%- set _color = props.color | default('inverted') -%}
-{%- set _isUnderlined = props.isUnderlined ?? true -%}
-{%- set _children = block('content') -%}
+{%- set _color = props.color | default('primary') -%}
+{%- set _href = props.href -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'ToastBar__link' -%}
+{%- set _rootUnderlinedClassName = _spiritClassPrefix ~ 'link-underlined' -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _rootClassName, _rootUnderlinedClassName, _styleProps.className ] -%}
 {%- set _allowedAttributes = [ 'target', 'title' ] -%}
-{%- set _classNames = [ _rootClassName, _styleProps.className  ] -%}
-
-{% embed "@spirit/link.twig" with { props: props | merge({
-    color: _color,
-    isUnderlined: _isUnderlined,
-    'data-spirit-populate-field': 'link',
-    UNSAFE_className: _classNames | join(' '),
-    UNSAFE_style: _styleProps.style,
-}) } %}
-    {% block content %}{{ _children }}{% endblock %}
-{% endembed %}
 
+<a
+    {{ mainProps(props, _allowedAttributes) }}
+    href="{{ _href }}"
+    {{ styleProp(_styleProps) }}
+    {{ classProp(_classNames) }}
+    data-spirit-populate-field="link"
+>
+    {%- block content %}{% endblock %}
+</a>
diff --git a/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBar.twig b/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBar.twig
@@ -21,7 +21,7 @@
 <ToastBar isTemplate />
 
 <!-- Render as template with props -->
-<ToastBar color="inverted" id="template-toast" isTemplate hasIcon isDismissible isOpen={ false } />
+<ToastBar id="template-toast" isTemplate hasIcon isDismissible isOpen={ false } />
 
 <!-- Render with all props -->
 <ToastBar

diff --git a/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBarLink.twig b/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBarLink.twig
@@ -2,7 +2,6 @@
 
 <!-- Render with all props -->
 <ToastBarLink
-    color="primary"
     href="https://www.google.com"
     target="_blank"
     isUnderlined={false}

diff --git a/...s/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html b/...s/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html
@@ -5,7 +5,7 @@
     </title>
   </head>
   <body>
-    <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
+    <div class="ToastBar ToastBar--neutral is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
         <div class="ToastBar__container">
           <div class="ToastBar__content">
@@ -18,7 +18,7 @@
     </div>
     <!-- Render with default icon -->
 
-    <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
+    <div class="ToastBar ToastBar--neutral is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
         <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true">
@@ -34,7 +34,7 @@
     </div>
     <!-- Render with custom icon using `iconName` alone -->
 
-    <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
+    <div class="ToastBar ToastBar--neutral is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
         <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true">
@@ -59,14 +59,14 @@
             </div>
           </div>
         </div>
-        <button data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#toast-dismiss" aria-controls="toast-dismiss" aria-expanded="true" class="Button Button--success Button--small Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
+        <button class="ToastBar__close" type="button" data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#toast-dismiss" aria-controls="toast-dismiss" aria-expanded="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
         <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7 5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" fill="currentColor">
         </path></svg> <span class="accessibility-hidden">Close</span></button>
       </div>
     </div>
     <!-- Render as template -->
 
-    <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
+    <div class="ToastBar ToastBar--neutral is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
         <div class="ToastBar__container">
           <div class="ToastBar__content">
@@ -76,7 +76,7 @@
     </div>
     <!-- Render as template with props -->
 
-    <div class="ToastBar ToastBar--inverted is-open" id="template-toast" data-spirit-populate-field="item">
+    <div class="ToastBar ToastBar--neutral is-open" id="template-toast" data-spirit-populate-field="item">
       <div class="ToastBar__box">
         <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true" data-spirit-populate-field="icon">
@@ -85,7 +85,7 @@
           <div class="ToastBar__content">
           </div>
         </div>
-        <button data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#template-toast" aria-controls="template-toast" aria-expanded="true" class="Button Button--inverted Button--small Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
+        <button class="ToastBar__close" type="button" data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#template-toast" aria-controls="template-toast" aria-expanded="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
         <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7 5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" fill="currentColor">
         </path></svg> <span class="accessibility-hidden">Close</span></button>
       </div>
@@ -102,10 +102,10 @@
             <div class="text-truncate-multiline" data-spirit-populate-field="message">
               Dismissible message with custom icon and action
             </div>
-            <a data-spirit-populate-field="link" href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
+            <a href="#" class="ToastBar__link link-underlined" data-spirit-populate-field="link">Action</a>
           </div>
         </div>
-        <button data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#my-toast" aria-controls="my-toast" aria-expanded="true" class="Button Button--success Button--small Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
+        <button class="ToastBar__close" type="button" data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#my-toast" aria-controls="my-toast" aria-expanded="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
         <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7 5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" fill="currentColor">
         </path></svg> <span class="accessibility-hidden">Dismiss</span></button>
       </div>
@@ -122,10 +122,10 @@
             <div class="text-truncate-multiline" data-spirit-populate-field="message">
               Dismissible message with custom icon and action
             </div>
-            <a data-spirit-populate-field="link" href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
+            <a href="#" class="ToastBar__link link-underlined" data-spirit-populate-field="link">Action</a>
           </div>
         </div>
-        <button data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#my-toast-template" aria-controls="my-toast-template" aria-expanded="true" class="Button Button--success Button--small Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
+        <button class="ToastBar__close" type="button" data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#my-toast-template" aria-controls="my-toast-template" aria-expanded="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
         <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7 5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" fill="currentColor">
         </path></svg> <span class="accessibility-hidden">Dismiss</span></button>
       </div>

diff --git a/...b-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBarLink.twig.snap.html b/...b-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBarLink.twig.snap.html
@@ -5,8 +5,8 @@
     </title>
   </head>
   <body>
-    <a data-spirit-populate-field="link" href="" class="link-inverted link-underlined ToastBar__link">ToastBar Link</a>
+    <a href="" class="ToastBar__link link-underlined" data-spirit-populate-field="link">ToastBar Link</a> 
     <!-- Render with all props -->
-     <a target="_blank" data-spirit-populate-field="link" href="https://www.google.com" style="outline: 5px solid blue; outline-offset: -5px;" class="link-primary ToastBar__link custom-class">ToastBar Link</a>
+     <a target="_blank" href="https://www.google.com" style="outline: 5px solid blue; outline-offset: -5px;" class="ToastBar__link link-underlined custom-class" data-spirit-populate-field="link">ToastBar Link</a>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig
@@ -1,5 +1,5 @@
-<ToastBar id="my-toast-color-inverted" hasIcon isDismissible>
-    <ToastBarMessage>Inverted</ToastBarMessage>
+<ToastBar id="my-toast-color-neutral" hasIcon isDismissible>
+    <ToastBarMessage>Neutral</ToastBarMessage>
     <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 

diff --git a/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig
@@ -75,7 +75,7 @@
                 id="toast-color"
                 autocomplete="off"
             >
-                <option value="inverted">Inverted</option>
+                <option value="neutral">Neutral</option>
                 <option value="success">Success</option>
                 <option value="warning">Warning</option>
                 <option value="danger">Danger</option>