diff --git a/packages/components-css/alert/index.scss b/packages/components-css/alert/index.scss index fa21b1eda..2f2fb8a52 100644 --- a/packages/components-css/alert/index.scss +++ b/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); } } diff --git a/packages/components-react/src/Alert.test.tsx b/packages/components-react/src/Alert.test.tsx index 11ee44623..e6ec962cd 100644 --- a/packages/components-react/src/Alert.test.tsx +++ b/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( , @@ -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( + , + ); + + 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(); + }, +); diff --git a/packages/components-react/src/Alert.tsx b/packages/components-react/src/Alert.tsx index 908822270..067ea566e 100644 --- a/packages/components-react/src/Alert.tsx +++ b/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, + { type, heading, headingLevel, textContent, ...restProps }: PropsWithChildren, ref: ForwardedRef, ) => { return ( - {children ? ( - children - ) : ( -
-
- - - -
-
- {heading} - {textContent} -
+
+
+ + +
- )} +
+ + {heading} + + {textContent} +
+
); }, diff --git a/packages/storybook/src/community/alert.md b/packages/storybook/src/community/alert.md index 618eba588..eb788e862 100644 --- a/packages/storybook/src/community/alert.md +++ b/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'; - - -
- -
- Heading - Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * -
-
-; -``` - -- Als je wilt de Alert gebruiken met een `type` en defualt `children` - ```tsx import { Alert } from '@rijkshuisstijl-community/components-react'; diff --git a/packages/storybook/src/community/alert.stories.tsx b/packages/storybook/src/community/alert.stories.tsx index fbd0d39d0..c6d6d7ea0 100644 --- a/packages/storybook/src/community/alert.stories.tsx +++ b/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 ; -}; - 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,8 +58,7 @@ const meta = { }, }, }, - render: AlertStoryComponent, -} as Meta; +} as Meta; export default meta; @@ -78,7 +66,6 @@ export const Informative: StoryObj = { 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 = { 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 = { 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 = { args: { type: 'warning', heading: 'Heading', - headingLevel: 3, textContent: 'Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *', }, }; diff --git a/packages/storybook/src/community/checkbox-group.md b/packages/storybook/src/community/checkbox-group.md index 3d31896c7..7f81f27a9 100644 --- a/packages/storybook/src/community/checkbox-group.md +++ b/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';