From c2ada1b9b0def488e755638ef29f262a48a76fdb Mon Sep 17 00:00:00 2001 From: Adham Abo Hasson Date: Mon, 19 Aug 2024 11:20:41 +0200 Subject: [PATCH] Feature/alert (#517) closes #472 Alert Component --- apps/rhc-templates/src/app/collage/page.tsx | 54 +++++--- apps/rhc-templates/src/app/page.tsx | 2 +- packages/components-css/alert/index.scss | 21 +++ packages/components-css/index.scss | 1 + packages/components-react/package.json | 1 + packages/components-react/src/Accordion.tsx | 2 - packages/components-react/src/Alert.test.tsx | 18 +++ packages/components-react/src/Alert.tsx | 121 ++++++++++++++++++ packages/components-react/src/index.ts | 3 + packages/storybook/src/community/alert.md | 40 ++++++ .../storybook/src/community/alert.stories.tsx | 53 +------- .../storybook/src/community/link.stories.tsx | 1 - .../src/icon-error/stencil.tsx | 24 +--- .../src/icon-info/stencil.tsx | 30 +++-- .../src/icon-success/stencil.tsx | 19 +-- .../src/icon-warning/stencil.tsx | 18 +-- pnpm-lock.yaml | 3 + .../design-tokens/token-transformer.mjs | 1 - 18 files changed, 291 insertions(+), 121 deletions(-) create mode 100644 packages/components-css/alert/index.scss create mode 100644 packages/components-react/src/Alert.test.tsx create mode 100644 packages/components-react/src/Alert.tsx diff --git a/apps/rhc-templates/src/app/collage/page.tsx b/apps/rhc-templates/src/app/collage/page.tsx index 19bab3f3a..68e9269ff 100644 --- a/apps/rhc-templates/src/app/collage/page.tsx +++ b/apps/rhc-templates/src/app/collage/page.tsx @@ -178,7 +178,7 @@ export default function Collage() {
- }> + Heading @@ -219,28 +219,48 @@ export default function Collage() {
-
- }> - Heading - Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * +
+ +
+ +
+ Heading + Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * +
+
-
- }> - Heading - Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * +
+ +
+ +
+ Heading + Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * +
+
-
- }> - Heading - Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * +
+ +
+ +
+ Heading + Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * +
+
-
- }> - Heading - Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * +
+ +
+ +
+ Heading + Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * +
+
Klik op de bovenstaande links om de verschillende templates te zien.

); -} \ No newline at end of file +} diff --git a/packages/components-css/alert/index.scss b/packages/components-css/alert/index.scss new file mode 100644 index 000000000..3bfdc69ea --- /dev/null +++ b/packages/components-css/alert/index.scss @@ -0,0 +1,21 @@ +.rhc-alert-container { + display: flex; +} + +.rhc-alert-container__icon { + inline-size: var(--rhc-space-300); + padding-block-start: var(--rhc-space-100); + padding-inline-end: var(--rhc-space-100); + &-ok { + color: var(--rhc-color-feedback-success-default); + } + &-error { + color: var(--rhc-color-feedback-error-default); + } + &-warning { + color: var(--rhc-color-feedback-warning-default); + } + &-info { + color: var(--rhc-color-feedback-info-default); + } +} diff --git a/packages/components-css/index.scss b/packages/components-css/index.scss index d26fa6658..aeea1fce0 100644 --- a/packages/components-css/index.scss +++ b/packages/components-css/index.scss @@ -4,5 +4,6 @@ */ @import "accordion/index"; +@import "alert/index"; @import "link/index"; @import "logo/index"; diff --git a/packages/components-react/package.json b/packages/components-react/package.json index 4ab25928c..4c9f8be39 100644 --- a/packages/components-react/package.json +++ b/packages/components-react/package.json @@ -35,6 +35,7 @@ "sideEffects": false, "dependencies": { "@rijkshuisstijl-community/components-css": "workspace:*", + "@rijkshuisstijl-community/web-components-react": "workspace:*", "@utrecht/component-library-react": "5.0.0", "clsx": "2.1.1", "date-fns": "3.6.0", diff --git a/packages/components-react/src/Accordion.tsx b/packages/components-react/src/Accordion.tsx index d8e007b5b..a7aabe934 100644 --- a/packages/components-react/src/Accordion.tsx +++ b/packages/components-react/src/Accordion.tsx @@ -1,5 +1,3 @@ -import '@rijkshuisstijl-community/components-css/index.scss'; - export { Accordion, type AccordionProps, diff --git a/packages/components-react/src/Alert.test.tsx b/packages/components-react/src/Alert.test.tsx new file mode 100644 index 000000000..e6b64b8a2 --- /dev/null +++ b/packages/components-react/src/Alert.test.tsx @@ -0,0 +1,18 @@ +import { render, screen } from '@testing-library/react'; +import { Alert } from './Alert'; +import '@testing-library/jest-dom'; + +describe('Alert', () => { + it('should render successfully', () => { + render( + , + ); + const alert = screen.getByRole('alert'); + expect(alert).toBeInTheDocument(); + }); +}); diff --git a/packages/components-react/src/Alert.tsx b/packages/components-react/src/Alert.tsx new file mode 100644 index 000000000..3c5f6f463 --- /dev/null +++ b/packages/components-react/src/Alert.tsx @@ -0,0 +1,121 @@ +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'; +const RhcIcon = ({ type }: { type: string }) => + type === 'info' ? ( + + ) : type === 'ok' ? ( + + ) : type === 'warning' ? ( + + ) : type === 'error' ? ( + + ) : ( + <> + ); +interface AlertProps { + type: 'info' | 'ok' | 'warning' | 'error'; + heading?: string; + headingLevel?: number; + textContent?: string; +} +export const Alert = forwardRef( + ( + { type, children, heading, headingLevel, textContent, ...restProps }: PropsWithChildren, + ref: ForwardedRef, + ) => { + return ( + + {children ? ( + children + ) : ( +
+
+ + + +
+
+ {heading} + {textContent} +
+
+ )} + + ); + }, +); + +Alert.displayName = 'Alert'; + +const IconInfo = () => { + return ( + + + + + + ); +}; + +const IconSuccess = () => { + return ( + + + + ); +}; + +const IconWarning = () => { + return ( + + + + ); +}; + +const IconError = () => { + return ( + + + + ); +}; diff --git a/packages/components-react/src/index.ts b/packages/components-react/src/index.ts index b5ea198fc..40f029f51 100644 --- a/packages/components-react/src/index.ts +++ b/packages/components-react/src/index.ts @@ -1,5 +1,7 @@ // Export all Utrecht components export * from '@utrecht/component-library-react/dist/css-module'; +// Import CSS from Rijkshuisstijl Community components-css +import '@rijkshuisstijl-community/components-css/index.scss'; // Export overwrites and new components export { @@ -14,4 +16,5 @@ export { export { Link } from './Link'; export { ActionGroup } from './ActionGroup'; export { Logo } from './Logo'; +export { Alert } from './Alert'; export type { LogoProps } from './Logo'; diff --git a/packages/storybook/src/community/alert.md b/packages/storybook/src/community/alert.md index e67100174..618eba588 100644 --- a/packages/storybook/src/community/alert.md +++ b/packages/storybook/src/community/alert.md @@ -1,3 +1,43 @@ # Rijkshuisstijl Community alert component + +[NL design system](https://www.nldesignsystem.nl/alert/) | [Figma](https://www.figma.com/design/txFX5MGRf4O904dtIFcGTF/NLDS---Rijkshuisstijl---Bibliotheek?node-id=1195-4201&t=n1djYpmvDCKmAEUi-0) | [GitHub](https://github.com/nl-design-system/rijkshuisstijl-community/issues/472) + +De alert component is er voor berichten die de gebruiker snel moet weten, omdat ze belangrijk zijn voor het uitvoeren van de huidige taak. De alert is alleen voor eenvoudige berichten. Gebruik in de alert geen buttons, geen formulier-componenten en geen complexe opmaak zoals tabellen. + +Let op: de alert component gebruiken kan essentieël zijn voor gebruikers van een schermvoorlezer, maar onjuist gebruik kan heel erg vervelend zijn. + +Gebruik niet een alert voor een algemene aankondiging die op meerdere pagina's staat, als het niet per se relevant is voor de huidige taak van de bezoeker. De alert wordt door schermvoorlezers als eerste voorgelezen op elke pagina waar de alert staat, het kan lastig zijn de website te gebruiken als de schermlezer elke keer wordt geblokkeerd met steeds dezelfde melding. Gebruik in die situaties de notification banner component. + +## 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 6a6f37fa6..f5f622162 100644 --- a/packages/storybook/src/community/alert.stories.tsx +++ b/packages/storybook/src/community/alert.stories.tsx @@ -1,48 +1,18 @@ /* @license CC0-1.0 */ -import { - RhcIconError, - RhcIconInfo, - RhcIconSuccess, - RhcIconWarning, -} from '@rijkshuisstijl-community/web-components-react'; +import { Alert } from '@rijkshuisstijl-community/components-react'; import type { Meta, StoryObj } from '@storybook/react'; -import { Alert, Heading, Icon, Paragraph } from '@utrecht/component-library-react/dist/css-module'; import readme from './alert.md?raw'; interface AlertStoryComponentProps { - type: string; - icon?: string; + type: 'info' | 'error' | 'warning' | 'ok'; heading: string; textContent: string; headingLevel: number; } -const AlertStoryComponent = ({ type, icon, heading, textContent, headingLevel }: AlertStoryComponentProps) => { - const RhcIcon = () => - icon === 'info' ? ( - - ) : icon === 'success' ? ( - - ) : icon === 'warning' ? ( - - ) : icon === 'error' ? ( - - ) : ( - <> - ); - - return ( - - {icon && ( - - - - )} - {heading} - {textContent} - - ); +const AlertStoryComponent = ({ type, heading, textContent, headingLevel }: AlertStoryComponentProps) => { + return ; }; const meta = { @@ -58,14 +28,6 @@ const meta = { category: 'Property', }, }, - icon: { - description: 'Alert Icon', - control: { type: 'select' }, - options: ['', 'info', 'error', 'warning', 'succes'], - table: { - category: 'Webcomponent Slot', - }, - }, heading: { description: 'Alert heading - used in default webcomponent slot', type: { @@ -95,7 +57,6 @@ const meta = { }, args: { type: 'info', - icon: 'info', heading: 'Heading', headingLevel: 3, textContent: 'Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *', @@ -116,7 +77,6 @@ export default meta; export const Informative: StoryObj = { args: { type: 'info', - icon: 'info', heading: 'Heading', headingLevel: 3, textContent: 'Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *', @@ -126,7 +86,6 @@ export const Informative: StoryObj = { export const Negative: StoryObj = { args: { type: 'error', - icon: 'error', heading: 'Heading', headingLevel: 3, textContent: 'Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *', @@ -135,8 +94,7 @@ export const Negative: StoryObj = { export const Positive: StoryObj = { args: { - type: 'succes', - icon: 'succes', + type: 'ok', heading: 'Heading', headingLevel: 3, textContent: 'Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *', @@ -146,7 +104,6 @@ export const Positive: StoryObj = { export const Warning: StoryObj = { args: { type: 'warning', - icon: '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/link.stories.tsx b/packages/storybook/src/community/link.stories.tsx index d2a68659a..ce3d332af 100644 --- a/packages/storybook/src/community/link.stories.tsx +++ b/packages/storybook/src/community/link.stories.tsx @@ -15,7 +15,6 @@ interface LinkStoryProps { const LinkStory = ({ href, children, iconLeft, iconRight, external, ...props }: PropsWithChildren) => ( - {iconLeft && ( diff --git a/packages/web-components-stencil/src/icon-error/stencil.tsx b/packages/web-components-stencil/src/icon-error/stencil.tsx index 3f0370f9e..eace66ba9 100644 --- a/packages/web-components-stencil/src/icon-error/stencil.tsx +++ b/packages/web-components-stencil/src/icon-error/stencil.tsx @@ -12,23 +12,13 @@ import { Component, h } from '@stencil/core'; export class IconError { render() { return ( - - - - - - - - - - - + + ); } diff --git a/packages/web-components-stencil/src/icon-info/stencil.tsx b/packages/web-components-stencil/src/icon-info/stencil.tsx index ea52c38c0..3d7167b44 100644 --- a/packages/web-components-stencil/src/icon-info/stencil.tsx +++ b/packages/web-components-stencil/src/icon-info/stencil.tsx @@ -12,17 +12,25 @@ import { Component, h } from '@stencil/core'; export class IconInfo { render() { return ( - - - - - - - - + + + + ); } diff --git a/packages/web-components-stencil/src/icon-success/stencil.tsx b/packages/web-components-stencil/src/icon-success/stencil.tsx index 5ab238b69..339998229 100644 --- a/packages/web-components-stencil/src/icon-success/stencil.tsx +++ b/packages/web-components-stencil/src/icon-success/stencil.tsx @@ -12,18 +12,13 @@ import { Component, h } from '@stencil/core'; export class IconSuccess { render() { return ( - - - - - + + ); } diff --git a/packages/web-components-stencil/src/icon-warning/stencil.tsx b/packages/web-components-stencil/src/icon-warning/stencil.tsx index ac0975a91..a4c1436ee 100644 --- a/packages/web-components-stencil/src/icon-warning/stencil.tsx +++ b/packages/web-components-stencil/src/icon-warning/stencil.tsx @@ -12,17 +12,13 @@ import { Component, h } from '@stencil/core'; export class IconWarning { render() { return ( - - - - - - - - + + ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 33ea9814d..53237d1cc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -218,6 +218,9 @@ importers: '@rijkshuisstijl-community/components-css': specifier: workspace:* version: link:../components-css + '@rijkshuisstijl-community/web-components-react': + specifier: workspace:* + version: link:../web-components-react '@utrecht/component-library-react': specifier: 5.0.0 version: 5.0.0(@babel/runtime@7.24.8)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) diff --git a/proprietary/design-tokens/token-transformer.mjs b/proprietary/design-tokens/token-transformer.mjs index 27b89a15c..5228ce63e 100644 --- a/proprietary/design-tokens/token-transformer.mjs +++ b/proprietary/design-tokens/token-transformer.mjs @@ -11,7 +11,6 @@ const init = async ({ input, output }) => { // The following components didn't work yet because of broken design token references. // You can remove excludes from this list at any time, as long as they don't break the build. const excludes = [ - 'components/alert', 'components/avatar', 'components/backdrop', 'components/blockquote',