Merge 1ace288 into ed4df63

packages/web-react/DEPRECATIONS-v2.md

@@ -0,0 +1,10 @@
+# Deprecations List
+
+Following deprecations will be removed in version 2 of the _spirit-web-react_ package.
+
+> Please follow these steps to safely upgrade your design system to Spirit Design System v2 components.
+
+## Add the `danger` icon to your project's assets
+
+The `warning` icon as a fallback for the `danger` color in the Alert component will be removed in favor of the `danger` icon.
+Please, add the `danger` icon to your project's assets.

packages/web-react/src/components/Alert/Alert.tsx

@@ -1,6 +1,7 @@
-import React, { ElementType } from 'react';
 import classNames from 'classnames';
-import { useStyleProps } from '../../hooks';
+import React, { ElementType, useContext } from 'react';
+import IconsContext from '../../context/IconsContext';
+import { useDeprecationMessage, useStyleProps } from '../../hooks';
 import { SpiritAlertProps } from '../../types';
 import { Icon } from '../Icon';
 import { useAlertIcon } from './useAlertIcon';
@@ -16,6 +17,16 @@ export const Alert = <T extends ElementType = 'div', E = void>(props: SpiritAler
   const { classProps, props: modifiedProps } = useAlertStyleProps({ color, ...restProps });
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
   const alertIconName = useAlertIcon({ color, iconName, ...otherProps });
+  const icons = useContext(IconsContext);
+
+  useDeprecationMessage({
+    method: 'custom',
+    trigger: color === 'danger' && (icons == null || icons[alertIconName] == null),
+    componentName: 'Alert',
+    customText: `The "warning" icon for the "danger" color is deprecated.
+    Make sure you have the "danger" icon in your project assets.
+    The fallback to the "warning" icon will be removed in favor of the "danger" icon in the next major version.`,
+  });
 
   return (
     <ElementTag {...otherProps} {...styleProps} className={classNames(classProps, styleProps.className)} role="alert">

packages/web-react/src/components/Alert/README.md

@@ -17,13 +17,17 @@ import { Alert } from '@lmc-eu/spirit-web-react/components';
 
 ## Default Icons according to Color Variant
 
-| Color name    | Icon name     |
-| ------------- | ------------- |
-| `danger`      | `warning`     |
-| `default`     | `info`        |
-| `informative` | `info`        |
-| `success`     | `check-plain` |
-| `warning`     | `warning`     |
+| Color name    | Icon name            |
+| ------------- | -------------------- |
+| `danger`      | `warning`/`danger`\* |
+| `default`     | `info`               |
+| `informative` | `info`               |
+| `success`     | `check-plain`        |
+| `warning`     | `warning`            |
+
+(\*) The `warning` icon for the `danger` color has been marked as [deprecated].
+Please make sure you have the `danger` icon in your project assets.
+The `warning` icon for the `danger` color will be removed in favor of the `danger` icon in the next major version.
 
 ## API
 
@@ -45,6 +49,7 @@ and [escape hatches][readme-escape-hatches].
 For detailed information see [Alert][alert] component.
 
 [alert]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Alert/README.md
+[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations
 [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
 [icon-package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes

packages/web-react/src/components/Alert/__tests__/useAlertIcon.test.ts

@@ -15,7 +15,7 @@ describe('useAlertIcon', () => {
     ['informative', 'info'],
     ['success', 'check-plain'],
     ['warning', 'warning'],
-    ['danger', 'warning'],
+    ['danger', 'danger'],
   ])('danger alert should return warning icon', (color, iconName) => {
     const props = { color } as SpiritAlertProps;
     const { result } = renderHook(() => useAlertIcon(props));

packages/web-react/src/components/Alert/useAlertIcon.ts

@@ -8,7 +8,7 @@ export function useAlertIcon<T extends ElementType = 'div', E = void>({ color, i
     success: 'check-plain',
     informative: 'info',
     warning: 'warning',
-    danger: 'warning',
+    danger: 'danger',
   });
 
   return iconName || iconNameValue;

packages/web-react/src/hooks/useIcon.ts

@@ -1,8 +1,33 @@
 import { useContext } from 'react';
+import warning from '../common/utilities/warning';
 import IconsContext from '../context/IconsContext';
 
 export const useIcon = (name: string) => {
   const icons = useContext(IconsContext);
 
-  return icons != null ? icons[name] : '';
+  /**
+   * @todo Remove this block when DS-1177 is resolved and return the previous code
+   *
+   * @see { @link https://jira.almacareer.tech/browse/DS-1177 }
+   *
+   * Previous code: return icons != null ? icons[name] : '';
+   */
+  const iconFallbacks: { [key: string]: string } = {
+    danger: 'warning',
+  };
+
+  if (icons != null && icons[name] != null) {
+    return icons[name];
+  }
+
+  if (icons != null && icons[name] == null) {
+    warning(
+      name !== 'danger' || iconFallbacks[name] !== 'warning',
+      'The "danger" icon is missing from your assets. It will be required in the next major version. Using "warning" as a fallback.',
+    );
+
+    return icons[iconFallbacks[name]];
+  }
+
+  return '';
 };

packages/web-twig/DEPRECATIONS-v3.md

@@ -0,0 +1,10 @@
+# Deprecations List
+
+Following deprecations will be removed in version 3 of the _spirit-web-twig_ package.
+
+> Please follow these steps to safely upgrade your design system to Spirit Design System v3 components.
+
+## Add the `danger` icon to your project's assets
+
+The `warning` icon as a fallback for the `danger` color in the Alert component will be removed in favor of the `danger` icon.
+Please, add the `danger` icon to your project's assets.

packages/web-twig/src/Resources/components/Alert/Alert.twig

@@ -19,10 +19,17 @@
 {% elseif _color == 'warning' %}
   {%- set _iconNameByColor = 'warning' -%}
 {% elseif _color == 'danger' %}
+  {# @TODO: set the value to the `danger` in https://jira.almacareer.tech/browse/DS-1177 #}
   {%- set _iconNameByColor = 'warning' -%}
 {% endif %}
 {%- set _iconNameValue = _iconName | default(_iconNameByColor) -%}
 
+{# Deprecations #}
+{% if _color == 'danger' %}
+    {% deprecated 'Alert: The "warning" icon for the "danger" color is deprecated. Make sure you have the "danger" icon in your assets.
+    The fallback to the "warning" icon will be removed in favor of the "danger" icon in the next major version.' %}
+{% endif %}
+
 <{{ _elementType }} {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }} role="alert">
   <Icon name="{{ _iconNameValue }}" />
   <div>

packages/web-twig/src/Resources/components/Alert/README.md

@@ -31,12 +31,16 @@ Without lexer:
 
 | Color name    | Icon name     |
 | ------------- | ------------- |
-| `danger`      | `warning`     |
+| `danger`      | `warning`\*   |
 | `default`     | `info`        |
 | `informative` | `info`        |
 | `success`     | `check-plain` |
 | `warning`     | `warning`     |
 
+(\*) The `warning` icon for the `danger` color has been marked as [deprecated].
+Please make sure you have the `danger` icon in your project assets.
+The `warning` icon for the `danger` color will be removed in favor of the `danger` icon in the next major version.
+
 ## API
 
 | Name          | Type                                         | Default   | Required | Description                |
@@ -55,6 +59,7 @@ If you need more control over the styling of a component, you can use [style pro
 and [escape hatches][readme-escape-hatches].
 
 [alert]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Alert
+[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
 [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
 [icon-package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes

packages/web/src/scss/components/Alert/_Alert.scss

@@ -11,6 +11,7 @@
     justify-content: flex-start;
     width: 100%;
     padding: theme.$padding;
+    border: theme.$border-width theme.$border-style var(--alert-color);
     border-radius: theme.$border-radius;
 }
 

packages/web/src/scss/components/Alert/_theme.scss

@@ -7,6 +7,8 @@ $typography: tokens.$body-medium-text-regular;
 $gap: tokens.$space-600;
 $padding: tokens.$space-600;
 $border-radius: tokens.$radius-200;
+$border-style: tokens.$border-style-100;
+$border-width: tokens.$border-width-100;
 
 $content-max-width: 640px;