Skip to content

Commit

Permalink
BREAKING CHANGE(web-twig): Rename inverted variant of Toast to `n…
Browse files Browse the repository at this point in the history 
…eutral` #DS-1446

Refactor ToastBarLink and ToastCloseButton.
  • Loading branch information
@crishpeen
crishpeen committed Sep 26, 2024
1 parent e136e11 commit 81581d2
Show file tree
Hide file tree
Showing 9 changed files with 53 additions and 60 deletions.
38 changes: 17 additions & 21 deletions packages/web-twig/src/Resources/components/Toast/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ Alternatively, a custom icon can be used:
| ------------- | ------------- |
| `danger` | `danger` |
| `informative` | `info` |
| `inverted` | `info` |
| `neutral` | `info` |
| `success` | `check-plain` |
| `warning` | `warning` |

Expand Down Expand Up @@ -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]
Expand All @@ -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:
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand Down
12 changes: 6 additions & 6 deletions packages/web-twig/src/Resources/components/Toast/ToastBar.twig
View file
Original file line number Diff line number Diff line change
@@ -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) -%}
Expand All @@ -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' -%}
Expand Down Expand Up @@ -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>
28 changes: 13 additions & 15 deletions packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig
View file
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBar.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<ToastBar isTemplate />

<!-- Render as template with props -->
<ToastBar color="inverted" id="template-toast" isTemplate hasIcon isDismissible isOpen={ false } />
<ToastBar color="neutral" id="template-toast" isTemplate hasIcon isDismissible isOpen={ false } />

<!-- Render with all props -->
<ToastBar
Expand Down
1 change: 0 additions & 1 deletion packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBarLink.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

<!-- Render with all props -->
<ToastBarLink
color="primary"
href="https://www.google.com"
target="_blank"
isUnderlined={false}
Expand Down
22 changes: 11 additions & 11 deletions ...s/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ...b-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBarLink.twig.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig
View file
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
Loading

0 comments on commit 81581d2

Please sign in to comment.