Feat(web-react): Use Icon in Alert and add centered variant #DS-304

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

@@ -15,5 +15,6 @@ export default {
 
 export { default as Alert } from './stories/Alert';
 export { default as AlertColors } from './stories/AlertColors';
+export { default as AlertIcons } from './stories/AlertIcons';
 export { default as HTML } from './stories/AlertHtml';
 export { default as Props } from './stories/AlertProps';

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

@@ -1,21 +1,26 @@
 import React, { ElementType } from 'react';
 import classNames from 'classnames';
+import { useAlertIcon } from './useAlertIcon';
 import { useAlertStyleProps } from './useAlertStyleProps';
 import { SpiritAlertProps } from '../../types';
 import { useStyleProps } from '../../hooks/styleProps';
+import { Icon } from '../Icon';
 
 const defaultProps = {
   color: 'success',
+  isCentered: false,
 };
 
 export const Alert = <T extends ElementType = 'div'>(props: SpiritAlertProps<T>): JSX.Element => {
   const { elementType: ElementTag = 'div', children, ...restProps } = props;
   const { classProps, props: modifiedProps } = useAlertStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+  const iconName = useAlertIcon(restProps);
 
   return (
     <ElementTag {...otherProps} {...styleProps} className={classNames(classProps, styleProps.className)} role="alert">
-      {children}
+      <Icon name={iconName} />
+      <div>{children}</div>
     </ElementTag>
   );
 };

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

@@ -10,13 +10,17 @@ import { Alert } from '@lmc-eu/spirit-web-react/components';
 <Alert color="success">Hey! Pay attention!</Alert>
 <Alert color="danger">Hey! Pay attention!</Alert>
 <Alert color="informative">Hey! Pay attention!</Alert>
+<Alert color="informative" iconName="warning">Hey! Pay attention!</Alert>
+<Alert color="informative" isCentered>Hey! Pay attention!</Alert>
 ```
 
 ## Available props
 
-| Name       | Type                               | Description                               |
-| ---------- | ---------------------------------- | ----------------------------------------- |
-| `children` | `any`                              | Content of the Alert                      |
-| `color`    | `success`, `danger`, `informative` | Color of the component, default `success` |
+| Name         | Type                               | Description                               |
+| ------------ | ---------------------------------- | ----------------------------------------- |
+| `children`   | `any`                              | Content of the Alert                      |
+| `color`      | `success`, `danger`, `informative` | Color of the component, default `success` |
+| `iconName`   | `string`                           | Icon used in Alert                        |
+| `isCentered` | `boolean`                          | If true, Alert is centered                |
 
 For detailed information see [Alert](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/components/Alert/README.md) component

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

@@ -35,6 +35,13 @@ describe('Alert', () => {
     expect(element).toBeInTheDocument();
   });
 
+  it('should have icon', () => {
+    const dom = render(<Alert>Hello World</Alert>);
+
+    const element = dom.container.querySelector('svg') as SVGSVGElement;
+    expect(element).toBeInTheDocument();
+  });
+
   it.each([['success'], ['danger'], ['informative']])('should render color %s', (color) => {
     const dom = render(<Alert color={color as AlertColor}>Hello World</Alert>);
 

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

@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { SpiritAlertProps } from '../../../types';
+import { useAlertIcon } from '../useAlertIcon';
+
+describe('useAlertIcon', () => {
+  it('should return defaults', () => {
+    const props = {};
+    const { result } = renderHook(() => useAlertIcon(props));
+
+    expect(result.current).toBe('info');
+  });
+
+  it('danger alert should return warning icon', () => {
+    const props = { color: 'danger' } as SpiritAlertProps;
+    const { result } = renderHook(() => useAlertIcon(props));
+
+    expect(result.current).toBe('warning');
+  });
+});

packages/web-react/src/components/Alert/__tests__/useAlertStyleProps.test.tsx

@@ -16,4 +16,11 @@ describe('useAlertStyleProps', () => {
 
     expect(result.current.classProps).toBe(`Alert Alert--${color}`);
   });
+
+  it('should return centered', () => {
+    const props = { isCentered: true } as SpiritAlertProps;
+    const { result } = renderHook(() => useAlertStyleProps(props));
+
+    expect(result.current.classProps).toBe(`Alert Alert--center`);
+  });
 });

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

@@ -1,10 +1,18 @@
+// Because there is no `dist` directory during the CI run
+/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React, { ElementType } from 'react';
 import { ComponentStory } from '@storybook/react';
-import Alert from '../Alert';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: No declaration file
+import icons from '@lmc-eu/spirit-icons/dist/icons';
+import { IconsProvider } from '../../../context';
 import { SpiritAlertProps } from '../../../types';
+import Alert from '../Alert';
 
 const Story: ComponentStory<typeof Alert> = <T extends ElementType = 'div'>(args: SpiritAlertProps<T>) => (
-  <Alert {...args} />
+  <IconsProvider value={icons}>
+    <Alert {...args} />
+  </IconsProvider>
 );
 
 Story.args = {

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

@@ -1,16 +1,22 @@
+// Because there is no `dist` directory during the CI run
+/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: No declaration file
+import icons from '@lmc-eu/spirit-icons/dist/icons';
+import { IconsProvider } from '../../../context';
 import Alert from '../Alert';
 
 // @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Story = (props: unknown) => (
-  <>
+  <IconsProvider value={icons}>
     <Alert color="success">This is a success alert — check it out!</Alert>
     <div className="mb-500" />
     <Alert color="danger">This is a danger alert — check it out!</Alert>
     <div className="mb-500" />
     <Alert color="informative">This is an informative alert — check it out!</Alert>
-  </>
+  </IconsProvider>
 );
 
 export default Story;

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

@@ -0,0 +1,28 @@
+// Because there is no `dist` directory during the CI run
+/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
+import React from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: No declaration file
+import icons from '@lmc-eu/spirit-icons/dist/icons';
+import { IconsProvider } from '../../../context';
+import Alert from '../Alert';
+
+// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Story = (props: unknown) => (
+  <IconsProvider value={icons}>
+    <Alert color="success" iconName="profile">
+      This is a success alert — check it out!
+    </Alert>
+    <div className="mb-500" />
+    <Alert color="danger" iconName="close">
+      This is a danger alert — check it out!
+    </Alert>
+    <div className="mb-500" />
+    <Alert color="informative" iconName="warning">
+      This is an informative alert — check it out!
+    </Alert>
+  </IconsProvider>
+);
+
+export default Story;

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

@@ -0,0 +1,11 @@
+import { useIconName } from '../../hooks/useIconName';
+import { SpiritAlertProps } from '../../types';
+
+export function useAlertIcon({ color, iconName }: SpiritAlertProps) {
+  const iconNameValue = useIconName(color, {
+    default: 'info',
+    danger: 'warning',
+  });
+
+  return iconName || iconNameValue;
+}

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { ElementType } from 'react';
-import { useClassNamePrefix } from '../../hooks/useClassNamePrefix';
+import { useClassNamePrefix } from '../../hooks';
 import { SpiritAlertProps, AlertProps } from '../../types';
 
 export interface AlertStyles {
@@ -11,11 +11,15 @@ export interface AlertStyles {
 }
 
 export function useAlertStyleProps<T extends ElementType = 'div'>(props: SpiritAlertProps<T>): AlertStyles {
-  const { color, ...modifiedProps } = props;
+  const { color, isCentered, ...modifiedProps } = props;
 
   const alertClass = useClassNamePrefix('Alert');
   const alertColorClass = `${alertClass}--${color}`;
-  const classProps = classNames(alertClass, { [alertColorClass]: color });
+  const alertCenteredClass = `${alertClass}--center`;
+  const classProps = classNames(alertClass, {
+    [alertColorClass]: color,
+    [alertCenteredClass]: isCentered,
+  });
 
   return {
     classProps,

packages/web-react/src/components/Icon/stories/Icon.tsx

@@ -1,4 +1,4 @@
-// Because of there is no `dist` directory during the CI run
+// Because there is no `dist` directory during the CI run
 /* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
 import { ComponentStory } from '@storybook/react';

packages/web-react/src/hooks/useIconName.tsx

@@ -0,0 +1,3 @@
+export function useIconName(key: string | undefined, iconMap: Record<string, string>) {
+  return key && iconMap[key] ? iconMap[key] : iconMap.default;
+}

packages/web-react/src/types/alert.ts

@@ -17,4 +17,8 @@ export interface AlertProps extends ChildrenProps, StyleProps {}
 export interface SpiritAlertProps<T extends ElementType = 'div'> extends AriaAlertElementTypeProps<T>, AlertProps {
   /** The color of the alert. */
   color?: AlertColor;
+  /** Icon used in Alert. */
+  iconName?: string;
+  /** Whether the alert should be centered. */
+  isCentered?: boolean;
 }