Merge branch 'develop' into feat/require-heading-level

Author: VincentSmedinga

packages/css/src/components/alert/README.md

@@ -4,21 +4,19 @@
 
 An Alert informs the user of a significant or time-sensitive message without interrupting their task.
 
-## Specifications
-
-There are four types of notifications:
-
-- **Warning** (orange) when action is needed to prevent damage.
-- **Error** (red) indicates an error has occurred.
-- **Confirmation** (green) to reassure that a process is complete.
-- **Notification** (blue) to bring attention to a message.
-
 ## Guidelines
 
-- Place an orange Alert directly below the Header for important and urgent information.
+- Use an Alert if the message’s purpose matches one of the following:
+  - **Information** to bring attention to a message.
+    This variation is blue and it is the default.
+  - **Success** to reassure that a process is complete.
+    This variation is green.
+  - **Warning** when action is needed to prevent damage.
+    This variation is orange.
+  - **Error** indicates an error has occurred.
+    This variation is red.
+- Place the Alert in a Grid Cell to create enough white space around it.
+- Important and urgent information is to be placed directly below the Header.
   Examples: system outage or changes in the opening hours of a City Office.
-- Ensure sufficient white space around the Alert.
-  The grid’s white space is a good reference – place the Alert in its own cell.
-- By default, the Alert cannot be closed.
-  This functionality can be added optionally.
-- Optionally, the heading can be omitted.
+  This can be applied to the entire application or to a part of it.
+- Add a close button if the user should be able to dismiss the Alert.

packages/css/src/components/alert/alert.scss

@@ -4,36 +4,52 @@
  */
 
 .ams-alert {
-  align-items: flex-start;
   background-color: var(--ams-alert-background-color);
-  border-style: var(--ams-alert-border-style);
-  border-width: var(--ams-alert-border-width);
+  box-shadow: var(--ams-alert-box-shadow);
   display: flex;
-  gap: var(--ams-alert-gap);
-  justify-content: space-between;
-  padding-block: var(--ams-alert-padding-block);
-  padding-inline: var(--ams-alert-padding-inline);
+
+  @media (forced-colors: active) {
+    border-style: solid;
+    border-width: var(--ams-alert-forced-colors-border-width);
+  }
+}
+
+.ams-alert__severity-indicator {
+  background-color: var(--ams-alert-severity-indicator-background-color);
+  flex: none;
+  padding-block: var(--ams-alert-severity-indicator-padding-block);
+  padding-inline: var(--ams-alert-severity-indicator-padding-inline);
 }
 
 .ams-alert__content {
   display: flex;
   flex: auto;
   flex-direction: column;
   gap: var(--ams-alert-content-gap);
+  padding-block: var(--ams-alert-content-padding-block);
+  padding-inline: var(--ams-alert-content-padding-inline);
 }
 
 .ams-alert--error {
-  border-color: var(--ams-alert-error-border-color);
-}
+  box-shadow: var(--ams-alert-error-box-shadow);
 
-.ams-alert--info {
-  border-color: var(--ams-alert-info-border-color);
+  > .ams-alert__severity-indicator {
+    background-color: var(--ams-alert-error-severity-indicator-background-color);
+  }
 }
 
 .ams-alert--success {
-  border-color: var(--ams-alert-success-border-color);
+  box-shadow: var(--ams-alert-success-box-shadow);
+
+  > .ams-alert__severity-indicator {
+    background-color: var(--ams-alert-success-severity-indicator-background-color);
+  }
 }
 
 .ams-alert--warning {
-  border-color: var(--ams-alert-warning-border-color);
+  box-shadow: var(--ams-alert-warning-box-shadow);
+
+  > .ams-alert__severity-indicator {
+    background-color: var(--ams-alert-warning-severity-indicator-background-color);
+  }
 }

packages/react/src/Alert/Alert.test.tsx

@@ -5,10 +5,10 @@ import '@testing-library/jest-dom'
 
 describe('Alert', () => {
   it('renders', () => {
-    const { container } = render(<Alert headingLevel={2} />)
+    const { container } = render(<Alert heading="Let op!" headingLevel={2} />)
 
     const component = container.querySelector(':only-child')
-    const icon = component?.querySelector('.ams-alert__icon')
+    const icon = component?.querySelector('.ams-alert__severity-indicator > .ams-icon')
 
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
@@ -17,15 +17,15 @@ describe('Alert', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<Alert headingLevel={2} />)
+    const { container } = render(<Alert heading="Let op!" headingLevel={2} />)
 
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('ams-alert')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<Alert className="extra" headingLevel={2} />)
+    const { container } = render(<Alert className="extra" heading="Let op!" headingLevel={2} />)
 
     const component = container.querySelector(':only-child')
 
@@ -35,7 +35,7 @@ describe('Alert', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
 
-    const { container } = render(<Alert ref={ref} headingLevel={2} />)
+    const { container } = render(<Alert heading="Let op!" headingLevel={2} ref={ref} />)
 
     const component = container.querySelector(':only-child')
 
@@ -53,7 +53,7 @@ describe('Alert', () => {
   })
 
   it('renders the close button', () => {
-    const { container } = render(<Alert closeable={true} headingLevel={2} />)
+    const { container } = render(<Alert closeable heading="Let op!" headingLevel={2} />)
 
     const component = container.querySelector(':only-child')
     const closeButton = component?.querySelector('.ams-icon-button')
@@ -63,7 +63,7 @@ describe('Alert', () => {
   })
 
   it('renders the close button with a label', () => {
-    render(<Alert closeable={true} closeButtonLabel="Close" headingLevel={2} />)
+    render(<Alert closeable closeButtonLabel="Close" heading="Let op!" headingLevel={2} />)
 
     const closeButton = screen.getByRole('button', { name: 'Close' })
 
@@ -72,7 +72,7 @@ describe('Alert', () => {
 
   it('fires the onClose event when the close button is clicked', () => {
     const onClose = jest.fn()
-    const { container } = render(<Alert closeable={true} onClose={onClose} headingLevel={2} />)
+    const { container } = render(<Alert closeable onClose={onClose} heading="Let op!" headingLevel={2} />)
 
     const component = container.querySelector(':only-child')
     const closeButton = component?.querySelector('.ams-icon-button')

packages/react/src/Alert/Alert.tsx

@@ -11,14 +11,17 @@ import { Heading } from '../Heading'
 import type { HeadingProps } from '../Heading'
 import { Icon } from '../Icon'
 import { IconButton } from '../IconButton'
+import { Row } from '../Row'
+
+type Severity = 'error' | 'success' | 'warning'
 
 export type AlertProps = {
   /** Whether the user can dismiss the Alert. Adds a button to its top right. */
   closeable?: boolean
   /** The label for the button that dismisses the Alert. */
   closeButtonLabel?: string
   /** The text for the Heading. */
-  heading?: string
+  heading: string
   /**
    * The hierarchical level of the Alert’s Heading within the document.
    * There is no default value; determine the correct level for each instance.
@@ -28,12 +31,11 @@ export type AlertProps = {
   /** A function to run when dismissing. */
   onClose?: () => void
   /** The significance of the message conveyed. */
-  severity?: 'error' | 'info' | 'success' | 'warning'
+  severity?: Severity
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
-const iconSvgBySeverity = {
+const iconSvgBySeverity: Record<Severity, Function> = {
   error: AlertIcon,
-  info: InfoIcon,
   success: CheckmarkIcon,
   warning: AlertIcon,
 }
@@ -48,29 +50,28 @@ export const Alert = forwardRef(
       heading,
       headingLevel,
       onClose,
-      severity = 'warning',
+      severity,
       ...restProps
     }: AlertProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
-    const alertSize = heading ? 'level-4' : 'level-5'
-    const Tag = heading ? 'section' : 'div'
+    const SeverityIcon = severity ? iconSvgBySeverity[severity] : InfoIcon
 
     return (
-      <Tag {...restProps} ref={ref} className={clsx('ams-alert', severity && `ams-alert--${severity}`, className)}>
-        <div className="ams-alert__icon">
-          <Icon size={alertSize} svg={iconSvgBySeverity[severity]} />
+      <section {...restProps} ref={ref} className={clsx('ams-alert', severity && `ams-alert--${severity}`, className)}>
+        <div className="ams-alert__severity-indicator">
+          <Icon inverseColor size="level-4" svg={SeverityIcon} />
         </div>
         <div className="ams-alert__content">
-          {heading && (
+          <Row align="between" alignVertical="start">
             <Heading level={headingLevel} size="level-4">
               {heading}
             </Heading>
-          )}
+            {closeable && <IconButton label={closeButtonLabel} onClick={onClose} size="level-4" />}
+          </Row>
           {children}
         </div>
-        {closeable && <IconButton label={closeButtonLabel} size={alertSize} onClick={onClose} />}
-      </Tag>
+      </section>
     )
   },
 )

packages/react/src/Avatar/Avatar.tsx

@@ -8,7 +8,6 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Icon } from '../Icon'
-import { Image } from '../Image'
 
 export const avatarColors = [
   'black',
@@ -36,7 +35,7 @@ type AvatarContentProps = {
 
 const AvatarContent = ({ imageSrc, initials }: AvatarContentProps) => {
   if (imageSrc) {
-    return <Image alt="" src={imageSrc} />
+    return <img alt="" src={imageSrc} />
   }
 
   if (initials.length) {

proprietary/tokens/src/components/ams/alert.tokens.json

@@ -2,25 +2,37 @@
   "ams": {
     "alert": {
       "background-color": { "value": "{ams.color.primary-white}" },
-      "border-width": { "value": "{ams.border.width.xl}" },
-      "border-style": { "value": "solid" },
-      "gap": { "value": "{ams.space.sm}" },
-      "padding-block": { "value": "{ams.space.md}" },
-      "padding-inline": { "value": "{ams.space.lg}" },
-      "error": {
-        "border-color": { "value": "{ams.color.primary-red}" }
+      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.blue}" },
+      "forced-colors": {
+        "border-width": { "value": "{ams.border.width.xl}" }
+      },
+      "severity-indicator": {
+        "background-color": { "value": "{ams.color.blue}" },
+        "padding-block": { "value": "{ams.space.md}" },
+        "padding-inline": { "value": "{ams.space.xs}" }
       },
-      "info": {
-        "border-color": { "value": "{ams.color.blue}" }
+      "content": {
+        "gap": { "value": "{ams.space.sm}" },
+        "padding-block": { "value": "{ams.space.md}" },
+        "padding-inline": { "value": "{ams.space.md}" }
+      },
+      "error": {
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.primary-red}" },
+        "severity-indicator": {
+          "background-color": { "value": "{ams.color.primary-red}" }
+        }
       },
       "success": {
-        "border-color": { "value": "{ams.color.dark-green}" }
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.dark-green}" },
+        "severity-indicator": {
+          "background-color": { "value": "{ams.color.dark-green}" }
+        }
       },
       "warning": {
-        "border-color": { "value": "{ams.color.orange}" }
-      },
-      "content": {
-        "gap": { "value": "{ams.space.sm}" }
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.orange}" },
+        "severity-indicator": {
+          "background-color": { "value": "{ams.color.orange}" }
+        }
       }
     }
   }

storybook/src/components/Alert/Alert.docs.mdx

@@ -17,7 +17,6 @@ import README from "../../../../packages/css/src/components/alert/README.md?raw"
 ### Warning
 
 Display a warning when user action is required.
-This is the default severity.
 
 <Canvas of={AlertStories.Warning} />
 
@@ -34,7 +33,7 @@ Announce the success of a significant action.
 
 <Canvas of={AlertStories.Success} />
 
-### Info
+### Information
 
 An informative message can emphasize matters that are useful to follow.
 
@@ -45,16 +44,3 @@ An informative message can emphasize matters that are useful to follow.
 Include an inline link in the text to guide the user.
 
 <Canvas of={AlertStories.WithInlineLink} />
-
-### With list
-
-For clarification, formatted text can be included in the alert.
-
-<Canvas of={AlertStories.WithList} />
-
-### Without heading
-
-Sometimes, a heading is unnecessary.
-The icon automatically becomes slightly smaller.
-
-<Canvas of={AlertStories.WithoutHeading} />