Refactor/Alert

packages/components-css/alert/index.scss

@@ -3,24 +3,25 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
-.rhc-alert-container {
+.rhc-alert__container {
   display: flex;
 }
 
-.rhc-alert-container__icon {
-  inline-size: var(--rhc-space-300);
-  padding-block-start: var(--rhc-space-100);
+.rhc-alert__icon-container {
+  inline-size: var(--utrecht-alert-icon-size);
+  inset-block-start: var(--utrecht-alert-icon-inset-block-start);
+  min-inline-size: var(--utrecht-alert-icon-size);
   padding-inline-end: var(--rhc-space-100);
-  &-ok {
+  &--ok {
     color: var(--rhc-color-feedback-success-default);
   }
-  &-error {
+  &--error {
     color: var(--rhc-color-feedback-error-default);
   }
-  &-warning {
+  &--warning {
     color: var(--rhc-color-feedback-warning-default);
   }
-  &-info {
+  &--info {
     color: var(--rhc-color-feedback-info-default);
   }
 }

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

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
 import { Alert } from './Alert';
 import '@testing-library/jest-dom';
 
@@ -7,7 +7,6 @@ describe('Alert', () => {
     render(
       <Alert
         heading="Heading"
-        headingLevel={3}
         textContent="Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *"
         type="info"
       />,
@@ -16,3 +15,20 @@ describe('Alert', () => {
     expect(alert).toBeInTheDocument();
   });
 });
+
+test.each([['info'], ['ok'], ['warning'], ['error']])(
+  'should apply the correct class based on the type prop: %s',
+  (type) => {
+    render(
+      <Alert heading="Test Heading" textContent="Test content" type={type as 'info' | 'ok' | 'warning' | 'error'} />,
+    );
+
+    const alert = screen.getByRole('alert');
+    const iconContainer = alert.querySelector('.rhc-alert__icon-container');
+
+    expect(iconContainer).toHaveClass(`rhc-alert__icon-container`);
+    expect(iconContainer).toHaveClass(`rhc-alert__icon-container--${type}`);
+
+    cleanup();
+  },
+);

packages/components-react/src/Alert.tsx

@@ -1,6 +1,6 @@
 import { Heading, Icon, Paragraph, Alert as UtrechtAlert } from '@utrecht/component-library-react/dist/css-module';
 import clsx from 'clsx';
-import { ForwardedRef, forwardRef, PropsWithChildren } from 'react';
+import { ForwardedRef, forwardRef, PropsWithChildren, ReactNode } from 'react';
 import { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from './icons';
 const RhcIcon = ({ type }: { type: string }) =>
   type === 'info' ? (
@@ -16,40 +16,37 @@ const RhcIcon = ({ type }: { type: string }) =>
   );
 export interface AlertProps {
   type: 'info' | 'ok' | 'warning' | 'error';
-  heading?: string;
-  headingLevel?: number;
-  textContent?: string;
+  heading?: ReactNode;
+  headingLevel?: 1 | 2 | 3 | 4 | 5;
+  textContent?: ReactNode;
 }
 export const Alert = forwardRef(
   (
-    { type, children, heading, headingLevel, textContent, ...restProps }: PropsWithChildren<AlertProps>,
+    { type, heading, headingLevel, textContent, ...restProps }: PropsWithChildren<AlertProps>,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
     return (
       <UtrechtAlert ref={ref} role="alert" type={type} {...restProps}>
-        {children ? (
-          children
-        ) : (
-          <div className="rhc-alert-container">
-            <div
-              className={clsx({
-                'rhc-alert-container__icon': true,
-                'rhc-alert-container__icon-ok': type === 'ok',
-                'rhc-alert-container__icon-error': type === 'error',
-                'rhc-alert-container__icon-warning': type === 'warning',
-                'rhc-alert-container__icon-info': type === 'info',
-              })}
-            >
-              <Icon>
-                <RhcIcon type={type} />
-              </Icon>
-            </div>
-            <div>
-              <Heading level={headingLevel || 3}>{heading}</Heading>
-              <Paragraph>{textContent}</Paragraph>
-            </div>
+        <div className="rhc-alert__container">
+          <div
+            className={clsx('rhc-alert__icon-container', {
+              'rhc-alert__icon-container--ok': type === 'ok',
+              'rhc-alert__icon-container--error': type === 'error',
+              'rhc-alert__icon-container--warning': type === 'warning',
+              'rhc-alert__icon-container--info': type === 'info',
+            })}
+          >
+            <Icon>
+              <RhcIcon type={type} />
+            </Icon>
           </div>
-        )}
+          <div>
+            <Heading appearance="utrecht-heading-5" level={headingLevel || 3}>
+              {heading}
+            </Heading>
+            <Paragraph>{textContent}</Paragraph>
+          </div>
+        </div>
       </UtrechtAlert>
     );
   },

packages/storybook/src/community/alert.md

@@ -12,24 +12,6 @@ Gebruik niet een alert voor een algemene aankondiging die op meerdere pagina's s
 
 ## Usage
 
-- Als je wilt de Alert gebruiken met je eigen `children`
-
-```tsx
-import { Alert, Heading, Paragraph } from '@rijkshuisstijl-community/components-react';
-
-<Alert type="info">
-  <div className="rhc-alert-container">
-    <IconInfoCircle className="rhc-alert-container__icon rhc-alert-container__icon-info " />
-    <div>
-      <Heading level={3}>Heading</Heading>
-      <Paragraph>Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *</Paragraph>
-    </div>
-  </div>
-</Alert>;
-```
-
-- Als je wilt de Alert gebruiken met een `type` en defualt `children`
-
 ```tsx
 import { Alert } from '@rijkshuisstijl-community/components-react';
 

packages/storybook/src/community/alert.stories.tsx

@@ -4,21 +4,10 @@ import { Alert } from '@rijkshuisstijl-community/components-react';
 import type { Meta, StoryObj } from '@storybook/react';
 import readme from './alert.md?raw';
 
-interface AlertStoryComponentProps {
-  type: 'info' | 'error' | 'warning' | 'ok';
-  heading: string;
-  textContent: string;
-  headingLevel: number;
-}
-
-const AlertStoryComponent = ({ type, heading, textContent, headingLevel }: AlertStoryComponentProps) => {
-  return <Alert heading={heading} headingLevel={headingLevel} textContent={textContent} type={type}></Alert>;
-};
-
 const meta = {
   title: 'Rijkshuisstijl/Alert',
   id: 'rhc-alert',
-  component: AlertStoryComponent,
+  component: Alert,
   argTypes: {
     type: {
       description: 'Alert type',
@@ -40,7 +29,7 @@ const meta = {
     headingLevel: {
       description: 'Alert heading level',
       control: { type: 'select' },
-      options: [1, 2, 3, 4, 5, 6],
+      options: [1, 2, 3, 4, 5],
       table: {
         category: 'Demo',
       },
@@ -69,16 +58,14 @@ const meta = {
       },
     },
   },
-  render: AlertStoryComponent,
-} as Meta<typeof AlertStoryComponent>;
+} as Meta<typeof Alert>;
 
 export default meta;
 
 export const Informative: StoryObj<typeof meta> = {
   args: {
     type: 'info',
     heading: 'Heading',
-    headingLevel: 3,
     textContent: 'Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *',
   },
 };
@@ -87,7 +74,6 @@ export const Negative: StoryObj<typeof meta> = {
   args: {
     type: 'error',
     heading: 'Heading',
-    headingLevel: 3,
     textContent: 'Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *',
   },
 };
@@ -96,7 +82,6 @@ export const Positive: StoryObj<typeof meta> = {
   args: {
     type: 'ok',
     heading: 'Heading',
-    headingLevel: 3,
     textContent: 'Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *',
   },
 };
@@ -105,7 +90,6 @@ export const Warning: StoryObj<typeof meta> = {
   args: {
     type: 'warning',
     heading: 'Heading',
-    headingLevel: 3,
     textContent: 'Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *',
   },
 };

packages/storybook/src/community/checkbox-group.md

@@ -6,8 +6,6 @@
 
 ## Usage
 
-- Als je wilt de CheckboxGroup gebruiken met je eigen `children`
-
 ```tsx
 import { CheckboxGroup, Checkbox } from '@rijkshuisstijl-community/components-react';