Hackathon/poc1

packages/components-react/README.md

@@ -0,0 +1,5 @@
+# React Componenten voor het LUX Design System
+
+> **Experimental**
+
+React componenten voor LUX. Deze package is gegenereerd tijdens een Hackathon, het is niet aan te raden deze in productie te gebruiken.

packages/components-react/package.json

@@ -1,16 +1,16 @@
 {
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.3",
   "author": "Community for NL Design System",
-  "description": "React component library for the Example repository, based on the NL Design System architecture",
+  "description": "React component library  for LUX, the Design System for Logius, based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "name": "@lux-design-system/components-react",
   "keywords": [
-    "nl-design-system"
+    "nl-design-system",
+    "lux-design-system"
   ],
-  "private": true,
+  "private": false,
   "publishConfig": {
-    "access": "restricted",
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
   "repository": {
     "type": "git+ssh",
@@ -19,6 +19,7 @@
   },
   "scripts": {
     "prebuild": "npm run clean",
+    "prepack": "npm run build",
     "build": "npm-run-all build:**",
     "build:components": "vite build",
     "clean": "rimraf dist/ pages/",
@@ -33,6 +34,7 @@
     "dist/"
   ],
   "dependencies": {
+    "@utrecht/component-library-react": "5",
     "clsx": "2.1.1",
     "date-fns": "3.6.0",
     "lodash.chunk": "4.2.0"

packages/components-react/src/Alert.css

@@ -0,0 +1,16 @@
+.lux-alert {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--lux-alert-column-gap);
+
+  .lux-alert-type-icon {
+    min-inline-size: var(--lux-alert-icon-size);
+    min-block-size: var(--lux-alert-icon-size);
+  }
+
+  .lux-alert-cross-icon {
+    min-inline-size: var(--lux-alert-close-button-size);
+    min-block-size: var(--lux-alert-close-button-size);
+  }
+}

packages/components-react/src/Alert.tsx

@@ -0,0 +1,65 @@
+import {
+  Alert as UtrechtAlert,
+  AlertProps as UtrechtAlertProps,
+  AlertType as UtrechtAlertType,
+  Icon as UtrechtIcon,
+} from '@utrecht/component-library-react/dist/css-module';
+import { PropsWithChildren, ReactNode, useState } from 'react';
+import { CrossIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from './icons';
+import './Alert.css';
+
+type AlertType = Exclude<UtrechtAlertType, 'ok'> | 'success';
+
+export interface LuxAlertProps extends Omit<UtrechtAlertProps, 'type'> {
+  type?: AlertType;
+  closable?: boolean;
+  onClose?: Function;
+}
+
+export const LuxAlert = ({
+  children,
+  type = 'info',
+  closable = false,
+  onClose,
+  ...props
+}: PropsWithChildren<LuxAlertProps>): ReactNode => {
+  const [_closed, setClosed] = useState(false);
+  const utrechtAlertType: UtrechtAlertType = type === 'success' ? 'ok' : type;
+
+  const icon =
+    type === 'info' ? (
+      <InfoIcon />
+    ) : type === 'success' ? (
+      <SuccessIcon />
+    ) : type === 'warning' ? (
+      <WarningIcon />
+    ) : type === 'error' ? (
+      <ErrorIcon />
+    ) : (
+      <></>
+    );
+  return (
+    !_closed && (
+      <UtrechtAlert icon={<></>} type={utrechtAlertType} {...props}>
+        <div className="lux-alert">
+          <UtrechtIcon className="lux-alert-type-icon">{icon}</UtrechtIcon>
+          {children}
+          {closable && (
+            <UtrechtIcon
+              className="lux-alert-cross-icon"
+              onClick={(e) => {
+                setClosed(true);
+                if (onClose) {
+                  onClose();
+                }
+                e.preventDefault();
+              }}
+            >
+              {CrossIcon()}
+            </UtrechtIcon>
+          )}
+        </div>
+      </UtrechtAlert>
+    )
+  );
+};

packages/components-react/src/blockquote/Blockquote.tsx

@@ -0,0 +1,8 @@
+import { type BlockquoteProps as UtrechtBlockquoteProps } from '@utrecht/component-library-react';
+import { Blockquote as UtrechtBlockquote } from '@utrecht/component-library-react/dist/css-module';
+
+// import './blockquote.scss';
+
+export type LuxBlockquoteProps = Omit<UtrechtBlockquoteProps, 'appearance'> & {};
+
+export const LuxBlockquote = UtrechtBlockquote;

packages/components-react/src/button/Button.tsx

@@ -0,0 +1,31 @@
+import { type ButtonProps as UtrechtButtonProps } from '@utrecht/component-library-react';
+import { Button as UtrechtButton } from '@utrecht/component-library-react/dist/css-module';
+
+import './button.scss';
+
+type Variant = 'primary' | 'secondary' | 'tertiary';
+
+export type LuxButtonProps = Omit<UtrechtButtonProps, 'appearance'> & {
+  variant: Variant;
+  size: undefined | 'small';
+};
+
+const mapVariant = (variant: Variant): string => {
+  return {
+    undefined: 'primary-action-button',
+    primary: 'primary-action-button',
+    secondary: 'secondary-action-button',
+    tertiary: 'subtle-button',
+  }[variant];
+};
+
+export const LuxButton = (props: LuxButtonProps) => {
+  const newProps: any = {
+    ...props,
+    appearance: mapVariant(props.variant),
+  };
+
+  const classNames = { 'lux-button--small': props.size === 'small' };
+
+  return <UtrechtButton {...newProps} className={classNames} />;
+};

packages/components-react/src/button/button.scss

@@ -0,0 +1,17 @@
+.lux-button {
+  padding-block-start: var(--lux-button-default-padding-block-start);
+  padding-block-end: var(--lux-button-default-padding-block-end);
+  min-inline-size: var(--lux-button-default-min-inline-size);
+  min-block-size: var(--lux-button-default-min-block-size);
+}
+
+.lux-button--small {
+  padding-block-start: var(--lux-button-small-padding-block-start);
+  padding-block-end: var(--lux-button-small-padding-block-end);
+  min-inline-size: var(--lux-button-small-min-inline-size);
+  min-block-size: var(--lux-button-small-min-block-size);
+}
+
+.lux-remy {
+  color: blue;
+}

packages/components-react/src/icons/CrossIcon.tsx

@@ -0,0 +1,8 @@
+export const CrossIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.0967 2.27459L7.94538 5.93572L3.79406 2.27459C3.35708 1.90847 2.70161 1.90847 2.33746 2.27459C1.90048 2.71392 1.90048 3.37293 2.26463 3.81226L5.97897 7.98596L2.33746 12.1597C1.97331 12.599 1.97331 13.258 2.33746 13.6973C2.77444 14.0634 3.42991 14.1367 3.86689 13.6973L8.01821 10.0362L12.1695 13.6973C12.6065 14.0634 13.262 14.0634 13.699 13.6973C14.0631 13.258 14.1359 12.599 13.699 12.1597L9.98462 7.98596L13.6261 3.81226C13.9903 3.37293 13.9903 2.71392 13.6261 2.27459C13.1891 1.90847 12.5337 1.90847 12.0967 2.27459Z"
+      fill="#282828"
+    />
+  </svg>
+);

packages/components-react/src/icons/ErrorIcon.tsx

@@ -0,0 +1,11 @@
+export const ErrorIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="10.5" fill="#D52B1E" />
+      <path
+        d="M15.12 7.71L12 10.48L8.88 7.71C8.55 7.42 8.05 7.43 7.73 7.73C7.43 8.05 7.42 8.54 7.71 8.87L10.48 12L7.71 15.12C7.42 15.45 7.42 15.95 7.73 16.26C8.05 16.56 8.54 16.57 8.87 16.28L12 13.52L15.12 16.29C15.45 16.58 15.95 16.57 16.26 16.27C16.56 15.95 16.57 15.46 16.28 15.13L13.52 12L16.29 8.88C16.58 8.55 16.58 8.05 16.27 7.74C15.95 7.43 15.45 7.42 15.12 7.71Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

packages/components-react/src/icons/InfoIcon.tsx

@@ -0,0 +1,16 @@
+export const InfoIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M22.04 3.78C21.88 2.83 21.16 2.11 20.21 1.95C17.48 1.5 12.91 1.5 12 1.5C11.09 1.5 6.52 1.5 3.78 1.96C2.84 2.11 2.11 2.84 1.96 3.78C1.5 6.52 1.5 11.09 1.5 12C1.5 12.91 1.5 17.48 1.96 20.22C2.12 21.17 2.84 21.89 3.79 22.05C6.53 22.51 11.09 22.51 12.01 22.51C12.92 22.51 17.49 22.51 20.23 22.05C21.18 21.89 21.9 21.17 22.06 20.22C22.52 17.48 22.52 12.92 22.52 12C22.5 9.26 22.5 6.52 22.04 3.78Z"
+        fill="#007BC7"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.04 6.05004C10.82 6.30004 10.71 6.59004 10.71 6.93004C10.71 7.28004 10.82 7.57004 11.04 7.81004C11.27 8.04004 11.58 8.16004 11.99 8.16004C12.39 8.16004 12.71 8.04004 12.93 7.79004C13.15 7.54004 13.26 7.25004 13.26 6.93004C13.26 6.57004 13.15 6.27004 12.93 6.03004C12.71 5.79004 12.4 5.67004 11.99 5.67004C11.58 5.67004 11.26 5.80004 11.04 6.05004ZM13.11 18.28V9.32004L10.9 9.41004V18.28H13.11Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

packages/components-react/src/icons/SuccessIcon.tsx

@@ -0,0 +1,14 @@
+export const SuccessIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M22.04 3.78C21.88 2.83 21.16 2.11 20.21 1.95C17.48 1.5 12.91 1.5 12 1.5C11.09 1.5 6.52 1.5 3.78 1.96C2.83 2.11 2.11 2.83 1.96 3.78C1.5 6.52 1.5 11.09 1.5 12C1.5 12.91 1.5 17.48 1.96 20.22C2.12 21.17 2.84 21.89 3.79 22.05C6.53 22.51 11.09 22.51 12.01 22.51C12.92 22.51 17.49 22.51 20.23 22.05C21.18 21.89 21.9 21.17 22.06 20.22C22.52 17.48 22.52 12.92 22.52 12C22.5 9.26 22.5 6.52 22.04 3.78Z"
+        fill="#39870C"
+      />
+      <path
+        d="M16.5 7.35C16.19 7.12 15.75 7.16 15.49 7.45L11.09 12.4L8.44 10.1C8.16 9.86 7.75 9.86 7.47 10.1C7.19 10.34 7.12 10.75 7.31 11.07L10.51 16.45C10.65 16.68 10.89 16.82 11.15 16.82C11.41 16.82 11.66 16.68 11.79 16.46L16.68 8.37C16.89 8.02 16.81 7.59 16.5 7.35Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

packages/components-react/src/icons/WarningIcon.tsx

@@ -0,0 +1,16 @@
+export const WarningIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M23.38 19.64L13.67 2.47C12.94 1.17 11.07 1.17 10.33 2.47L0.620006 19.64C-0.0999945 20.92 0.820006 22.5 2.29001 22.5H21.72C23.18 22.5 24.1 20.92 23.38 19.64Z"
+        fill="#FFB612"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13.33 6.98L10.85 7.18H10.84V15.17L13.11 15.12V12.49L13.33 6.98ZM10.9 16.33C10.66 16.63 10.54 17.01 10.54 17.45C10.54 17.96 10.67 18.34 10.92 18.59C11.17 18.85 11.54 18.98 12.02 18.98C12.51 18.98 12.87 18.83 13.11 18.54C13.35 18.25 13.47 17.88 13.47 17.45C13.47 16.93 13.34 16.54 13.09 16.27C12.84 16.01 12.47 15.87 11.99 15.87C11.5 15.87 11.14 16.02 10.9 16.33Z"
+        fill="black"
+      />
+    </svg>
+  );
+};

packages/components-react/src/icons/index.ts

@@ -0,0 +1,5 @@
+export { ErrorIcon } from './ErrorIcon';
+export { InfoIcon } from './InfoIcon';
+export { SuccessIcon } from './SuccessIcon';
+export { WarningIcon } from './WarningIcon';
+export { CrossIcon } from './CrossIcon';

packages/components-react/src/index.ts

@@ -0,0 +1,3 @@
+export { LuxAlert } from './Alert';
+export { LuxBlockquote } from './blockquote/Blockquote';
+export { LuxButton } from './button/Button';

packages/components-react/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'Components React',
       // the proper extensions will be added
-      fileName: 'components-react',
+      fileName: 'index',
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
@@ -24,6 +24,7 @@ export default defineConfig({
         },
       },
     },
+    minify: false,
   },
   plugins: [react()],
 });

packages/storybook/package.json

@@ -27,6 +27,7 @@
     "@chromatic-com/storybook": "1.6.1",
     "@lux-design-system/assets": "workspace:*",
     "@lux-design-system/components-css": "workspace:*",
+    "@lux-design-system/components-react": "workspace:*",
     "@lux-design-system/design-tokens": "workspace:*",
     "@lux-design-system/font": "workspace:*",
     "@lux-design-system/web-components-react": "workspace:*",

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

@@ -0,0 +1,47 @@
+import { Canvas, Controls, Description, Markdown, Meta } from "@storybook/blocks";
+import markdown from "@utrecht/alert-css/README.md?raw";
+import * as AlertStories from "./alert.stories";
+import { CitationDocumentation } from "../../utils/CitationDocumentation";
+
+<Meta of={AlertStories} />
+
+<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 (type)
+
+### Info
+
+<Description of={AlertStories.Info} />
+<Canvas of={AlertStories.Info} />
+
+### OK / Confirm
+
+<Description of={AlertStories.Ok} />
+<Canvas of={AlertStories.Ok} />
+
+### Warning
+
+<Description of={AlertStories.Warning} />
+<Canvas of={AlertStories.Warning} />
+
+### Error
+
+<Description of={AlertStories.Error} />
+<Canvas of={AlertStories.Error} />
+
+## Inhoud
+
+### Aria `role=alert`
+
+<Description of={AlertStories.AriaRole} />
+<Canvas of={AlertStories.AriaRole} sourceState="shown" />