Components React - Alert

.changeset/hungry-books-hug.md

@@ -0,0 +1,5 @@
+---
+"@lux-design-system/components-react": minor
+---
+
+Nieuw component: LuxAlert

.lux.stylelintrc.json

@@ -14,7 +14,7 @@
     "order/properties-alphabetical-order": null,
     "scss/dollar-variable-pattern": "^(lux)-[a-z0-9-]+$",
     "scss/percent-placeholder-pattern": "^(lux)-[a-z0-9-]+$",
-    "custom-property-pattern": "^_?(lux)-[a-z0-9-]+$",
+    "custom-property-pattern": "^_?(lux|utrecht)-[a-z0-9-]+$",
     "selector-class-pattern": "^(lux)-[a-z0-9_-]+|(force-state)--[a-z]+$",
     "keyframes-name-pattern": "^(lux)-[a-z0-9-]+$"
   }

packages/components-react/src/alert/Alert.css

@@ -0,0 +1,20 @@
+.lux-alert {
+  --utrecht-heading-1-color: var(--utrecht-alert-color);
+  --utrecht-heading-1-font-size: var(--lux-alert-heading-font-size);
+  --utrecht-heading-1-line-height: var(--lux-alert-heading-font-size);
+  --utrecht-heading-2-color: var(--utrecht-alert-color);
+  --utrecht-heading-2-font-size: var(--lux-alert-heading-font-size);
+  --utrecht-heading-2-line-height: var(--lux-alert-heading-font-size);
+  --utrecht-heading-3-color: var(--utrecht-alert-color);
+  --utrecht-heading-3-font-size: var(--lux-alert-heading-font-size);
+  --utrecht-heading-3-line-height: var(--lux-alert-heading-font-size);
+  --utrecht-heading-4-color: var(--utrecht-alert-color);
+  --utrecht-heading-4-font-size: var(--lux-alert-heading-font-size);
+  --utrecht-heading-4-line-height: var(--lux-alert-heading-font-size);
+  --utrecht-heading-5-color: var(--utrecht-alert-color);
+  --utrecht-heading-5-font-size: var(--lux-alert-heading-font-size);
+  --utrecht-heading-5-line-height: var(--lux-alert-heading-font-size);
+  --utrecht-heading-6-color: var(--utrecht-alert-color);
+  --utrecht-heading-6-font-size: var(--lux-alert-heading-font-size);
+  --utrecht-heading-6-line-height: var(--lux-alert-heading-font-size);
+}

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

@@ -0,0 +1,60 @@
+import {
+  Alert as UtrechtAlert,
+  AlertProps as UtrechtAlertProps,
+  AlertType as UtrechtAlertType,
+} from '@utrecht/component-library-react/dist/css-module';
+import './Alert.css';
+
+type AlertType = Exclude<UtrechtAlertType, 'ok'> | 'success';
+
+export interface LuxAlertProps extends Omit<UtrechtAlertProps, 'type'> {
+  type: AlertType;
+}
+
+//TODO replace icons in #308
+const InfoIcon = () => (
+  <svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <circle r="7" cx="8" cy="8" fill="transparent" stroke="var(--utrecht-alert-icon-info-color)" />
+  </svg>
+);
+const SuccessIcon = () => (
+  <svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <circle r="7" cx="8" cy="8" fill="transparent" stroke="var(--utrecht-alert-icon-ok-color)" />
+  </svg>
+);
+const WarningIcon = () => (
+  <svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <circle r="7" cx="8" cy="8" fill="transparent" stroke="var(--utrecht-alert-icon-warning-color)" />
+  </svg>
+);
+const ErrorIcon = () => (
+  <svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <circle r="7" cx="8" cy="8" fill="transparent" stroke="var(--utrecht-alert-icon-error-color)" />
+  </svg>
+);
+
+export const LuxAlert = (props: LuxAlertProps) => {
+  const { children, type, className, ...otherProps } = props;
+  const utrechtAlertType: UtrechtAlertType = type === 'success' ? 'ok' : type;
+
+  const icons = {
+    info: InfoIcon,
+    success: SuccessIcon,
+    warning: WarningIcon,
+    error: ErrorIcon,
+  };
+
+  const Icon = icons[type];
+  const icon = Icon ? <Icon /> : <></>;
+
+  return (
+    <UtrechtAlert
+      type={utrechtAlertType}
+      className={`lux-alert ${className !== undefined ? className : ''}`}
+      icon={icon}
+      {...otherProps}
+    >
+      {children}
+    </UtrechtAlert>
+  );
+};

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

@@ -0,0 +1,99 @@
+import { describe, expect, it } from '@jest/globals';
+import { render } from '@testing-library/react';
+import { LuxHeading1, LuxParagraph } from '../../index';
+import { LuxAlert } from '../Alert';
+
+describe('Alert', () => {
+  it('renders an info alert', () => {
+    const { container } = render(
+      <LuxAlert type="info">
+        <LuxHeading1>Heading</LuxHeading1>
+        <LuxParagraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis massa lorem. Ut laoreet varius rhoncus.
+        </LuxParagraph>
+      </LuxAlert>,
+    );
+
+    const alert = container.querySelector(':only-child');
+    expect(alert).toBeInTheDocument();
+
+    expect(alert).toHaveClass('utrecht-alert--info');
+  });
+
+  it('renders an success alert', () => {
+    const { container } = render(
+      <LuxAlert type="success">
+        <LuxHeading1>Heading</LuxHeading1>
+        <LuxParagraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis massa lorem. Ut laoreet varius rhoncus.
+        </LuxParagraph>
+      </LuxAlert>,
+    );
+
+    const alert = container.querySelector(':only-child');
+    expect(alert).toBeInTheDocument();
+
+    expect(alert).toHaveClass('utrecht-alert--ok');
+  });
+
+  it('renders an warning alert', () => {
+    const { container } = render(
+      <LuxAlert type="warning">
+        <LuxHeading1>Heading</LuxHeading1>
+        <LuxParagraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis massa lorem. Ut laoreet varius rhoncus.
+        </LuxParagraph>
+      </LuxAlert>,
+    );
+
+    const alert = container.querySelector(':only-child');
+    expect(alert).toBeInTheDocument();
+
+    expect(alert).toHaveClass('utrecht-alert--warning');
+  });
+
+  it('renders an error alert', () => {
+    const { container } = render(
+      <LuxAlert type="error">
+        <LuxHeading1>Heading</LuxHeading1>
+        <LuxParagraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis massa lorem. Ut laoreet varius rhoncus.
+        </LuxParagraph>
+      </LuxAlert>,
+    );
+
+    const alert = container.querySelector(':only-child');
+    expect(alert).toBeInTheDocument();
+
+    expect(alert).toHaveClass('utrecht-alert--error');
+  });
+
+  it('can have an additional class name', () => {
+    const { container } = render(
+      <LuxAlert type="info" className="custom-alert">
+        <LuxHeading1>Heading</LuxHeading1>
+        <LuxParagraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis massa lorem. Ut laoreet varius rhoncus.
+        </LuxParagraph>
+      </LuxAlert>,
+    );
+
+    const alert = container.querySelector(':only-child');
+
+    expect(alert).toHaveClass('custom-alert');
+
+    expect(alert).toHaveClass('lux-alert');
+  });
+
+  it('can have extra properties', () => {
+    const { container } = render(
+      <LuxAlert type="info" hidden={true}>
+        Lux Section
+      </LuxAlert>,
+    );
+
+    const alert = container.querySelector(':only-child');
+
+    expect(alert).not.toBeVisible();
+  });
+});

packages/components-react/src/index.ts

@@ -1,3 +1,4 @@
+export { LuxAlert, type LuxAlertProps } from './alert/Alert';
 export { LuxButton, type LuxButtonProps } from './button/Button';
 export { LuxDocument, type LuxDocumentProps } from './document/Document';
 export {

packages/storybook/src/react-components/alert/alert.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Controls, Markdown, Meta } from "@storybook/blocks";
+import markdown from "@utrecht/alert-css/README.md?raw";
+import * as AlertStories from "./alert.stories.tsx";
+import { CitationDocumentation } from "../../utils/CitationDocumentation.tsx";
+
+<Meta of={AlertStories} />
+
+# Alert
+
+<CitationDocumentation
+  component="Utrecht Alert"
+  url="https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-alert--docs"
+/>
+
+<Markdown>{markdown}</Markdown>
+
+## Playground
+
+<Canvas of={AlertStories.Playground} />
+<Controls of={AlertStories.Playground} />
+
+## Variants
+
+<Canvas of={AlertStories.InfoAlert} />
+<Canvas of={AlertStories.SuccessAlert} />
+<Canvas of={AlertStories.WarningAlert} />
+<Canvas of={AlertStories.ErrorAlert} />

packages/storybook/src/react-components/alert/alert.stories.tsx

@@ -0,0 +1,113 @@
+import { LuxAlert, type LuxAlertProps, LuxHeading1, LuxParagraph } from '@lux-design-system/components-react';
+import tokens from '@lux-design-system/design-tokens/dist/index.json';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  title: 'React Components/Alert',
+  id: 'react-components-alert',
+  component: LuxAlert,
+  subcomponents: {},
+  parameters: {
+    tokens,
+    tokensPrefix: 'utrecht-alert',
+  },
+  argTypes: {
+    type: {
+      description: 'Type modifier',
+      control: 'select',
+      options: ['info', 'success', 'warning', 'error'],
+    },
+    children: {
+      name: 'content (children)',
+      description: 'Alert inhoud',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'HTML Content',
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof LuxAlert>;
+
+export default meta;
+
+const AlertTemplate: Story = {
+  args: {
+    type: 'info',
+    children: (
+      <>
+        <LuxHeading1>Heading</LuxHeading1>
+        <LuxParagraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis massa lorem. Ut laoreet varius rhoncus.
+        </LuxParagraph>
+      </>
+    ),
+  },
+  render: ({ children, ...args }: LuxAlertProps) => <LuxAlert {...args}>{children}</LuxAlert>,
+};
+
+export const Playground: Story = {
+  ...AlertTemplate,
+  name: 'Playground',
+  parameters: {
+    docs: {
+      sourceState: 'shown',
+    },
+  },
+  tags: ['!autodocs'],
+};
+
+export const InfoAlert: Story = {
+  ...AlertTemplate,
+  args: {
+    ...AlertTemplate.args,
+    type: 'info',
+  },
+  parameters: {
+    docs: {
+      sourceState: 'shown',
+    },
+  },
+};
+
+export const SuccessAlert: Story = {
+  ...AlertTemplate,
+  args: {
+    ...AlertTemplate.args,
+    type: 'success',
+  },
+  parameters: {
+    docs: {
+      sourceState: 'shown',
+    },
+  },
+};
+
+export const WarningAlert: Story = {
+  ...AlertTemplate,
+  args: {
+    ...AlertTemplate.args,
+    type: 'warning',
+  },
+  parameters: {
+    docs: {
+      sourceState: 'shown',
+    },
+  },
+};
+
+export const ErrorAlert: Story = {
+  ...AlertTemplate,
+  args: {
+    ...AlertTemplate.args,
+    type: 'error',
+  },
+  parameters: {
+    docs: {
+      sourceState: 'shown',
+    },
+  },
+};

packages/storybook/src/react-components/button/button.mdx

@@ -9,7 +9,7 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation.tsx";
 
 <CitationDocumentation
   component="Utrecht Button"
-  url="https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-heading--docs"
+  url="https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-button--docs"
 />
 
 <Markdown>{markdown}</Markdown>