feat(components-react): add Icon component and Icons package (#349)

.changeset/wise-kids-return.md

@@ -0,0 +1,9 @@
+---
+"@lux-design-system/components-react": major
+"@lux-design-system/icons": minor
+---
+
+💡
+
+- Icons package toegevoegd (alleen intern).
+- Icon component toegevoegd met mogelijkheid een eigen icon library toe te voegen.

.gitignore

@@ -65,3 +65,4 @@ components.d.ts
 # Do not ignore our build scripts 
 # (This leaves other build/ folders ignored, see line #9)
 !/proprietary/design-tokens/build
+!/proprietary/icons/build

.nlds.eslintrc.json

@@ -88,7 +88,8 @@
           "packages/components-react/tsconfig.json",
           "packages/components-react/tsconfig.test.json",
           "packages/web-components-stencil/tsconfig.json",
-          "packages/web-components-stencil/tsconfig.jest.json"
+          "packages/web-components-stencil/tsconfig.jest.json",
+          "proprietary/icons/tsconfig.json"
         ]
       },
       "plugins": ["@typescript-eslint"]

.npmrc

@@ -2,3 +2,4 @@ engine-strict=true
 save-prefix=
 strict-peer-dependencies=false
 auto-install-peers=false
+@jsr:registry=https://npm.jsr.io

packages/components-react/package.json

@@ -41,6 +41,7 @@
     "dist/"
   ],
   "dependencies": {
+    "@lux-design-system/icons": "workspace:*",
     "@utrecht/component-library-css": "6.1.0",
     "@utrecht/component-library-react": "7.1.0",
     "@utrecht/focus-ring-css": "2.3.0",

packages/components-react/src/icon/FallbackIcon.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+/**
+ * Lux lamp icoon
+ *
+ * @param {SVGProps<SVGSVGElement>} props SVG Attributes
+ * @returns {*} SVG Element
+ */
+const FallbackIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 440 440"
+    width="1em"
+    height="1em"
+    data-icon-name="zoek"
+    {...props}
+  >
+    <g>
+      <path d="M182.483 437.665L219.245 437.665L219.245 271.697C213.621 274.254 207.434 275.737 200.838 275.737C194.242 275.737 188.056 274.254 182.431 271.697L182.431 437.665L182.483 437.665Z" />
+      <path d="M182.483 231.306C182.483 241.43 190.766 249.662 200.889 249.662C211.013 249.662 219.296 241.43 219.296 231.255L219.296 193.674L245.372 193.674L245.372 231.255C245.372 241.379 253.604 249.662 263.779 249.662C273.954 249.662 282.186 241.43 282.186 231.255L282.186 193.674L308.262 193.674L308.262 231.255C308.262 255.797 288.321 275.738 263.779 275.738C257.234 275.738 250.997 274.255 245.372 271.699L245.372 437.666L315.88 437.666L315.88 428.769C315.88 375.901 308.824 375.646 345.229 337.298C383.883 296.548 405.562 239.538 398.762 177.466C388.689 85.6882 314.602 11.4476 222.875 1.27273C102.158 -12.1233 0.000107732 82.0068 8.70987e-05 200.014C7.78817e-05 252.729 20.452 300.536 53.7376 336.224C90.1931 375.236 84.1087 375.441 84.1087 428.821L84.1087 437.615L156.406 437.615L156.406 271.545C150.731 274.153 144.442 275.687 137.795 275.687C113.253 275.687 93.3121 255.746 93.3121 231.204L93.3121 193.623L119.388 193.623L119.388 231.204C119.388 241.327 127.62 249.61 137.795 249.61C147.97 249.61 156.202 241.379 156.202 231.204L156.202 193.623L182.483 193.623L182.483 231.204" />
+    </g>
+  </svg>
+);
+export default FallbackIcon;

packages/components-react/src/icon/Icon.tsx

@@ -0,0 +1,25 @@
+import IconSet, { type IconId } from '@lux-design-system/icons';
+import { Icon as UtrechtIcon, type IconProps as UtrechtIconProps } from '@utrecht/component-library-react';
+import { PropsWithChildren, ReactNode } from 'react';
+import FallbackIcon from './FallbackIcon';
+
+export type LuxIconProps = UtrechtIconProps & {
+  iconId: IconId | string;
+  library?: Record<string, ReactNode>;
+};
+
+export const LuxIcon = ({ iconId, library, children }: PropsWithChildren<LuxIconProps>): ReactNode => {
+  const iconSet: Record<string, ReactNode> = library || IconSet;
+
+  return (
+    <UtrechtIcon>
+      <style>
+        {`svg {
+  fill: currentColor;          
+          }`}
+      </style>
+      {iconId in iconSet ? iconSet[iconId] : <FallbackIcon />}
+      {children}
+    </UtrechtIcon>
+  );
+};

packages/components-react/src/index.ts

@@ -13,6 +13,7 @@ export {
   type LuxHeadingProps,
 } from './heading/Heading';
 export { LuxHeadingGroup, type LuxHeadingGroupProps } from './heading-group/HeadingGroup';
+export { LuxIcon, type LuxIconProps } from './icon/Icon';
 export { LuxFormField, type LuxFormFieldProps } from './form-field/FormField';
 export { LuxFormFieldCheckbox, type LuxFormFieldCheckboxProps } from './form-field-checkbox/FormFieldCheckbox';
 export {

packages/storybook/package.json

@@ -31,6 +31,7 @@
     "@lux-design-system/components-react": "workspace:*",
     "@lux-design-system/design-tokens": "workspace:*",
     "@lux-design-system/font": "workspace:*",
+    "@lux-design-system/icons": "workspace:*",
     "@lux-design-system/web-components-react": "workspace:*",
     "@lux-design-system/web-components-stencil": "workspace:*",
     "@storybook/addon-a11y": "8.2.7",
@@ -49,6 +50,7 @@
     "@storybook/react-vite": "8.2.7",
     "@storybook/test": "8.2.7",
     "@storybook/testing-library": "0.2.2",
+    "@tabler/icons-react": "3.26.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@utrecht/alert-css": "1.1.0",

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

@@ -0,0 +1,11 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks";
+import * as IconStories from "./icon.stories";
+
+<Meta of={IconStories} />
+
+# Icon
+
+## Playground
+
+<Canvas of={IconStories.Playground} />
+<Controls of={IconStories.Playground} />

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

@@ -0,0 +1,87 @@
+import { LuxIcon, LuxIconProps } from '@lux-design-system/components-react';
+import { IconId, iconIds } from '@lux-design-system/icons';
+import type { ArgTypes, Meta, StoryObj } from '@storybook/react';
+import * as tablerIcons from '@tabler/icons-react';
+import { ReactNode } from 'react';
+
+const CustomLibrary: Partial<Record<string, ReactNode>> = {
+  candle: <tablerIcons.IconCandle />,
+  bulb: <tablerIcons.IconBulb />,
+  lamp: <tablerIcons.IconLamp />,
+  'building-lighthouse': <tablerIcons.IconBuildingLighthouse />,
+};
+
+interface ExtraArgs {
+  size?: number | string;
+}
+
+type Story = StoryObj<typeof meta> & { args: ExtraArgs };
+
+const meta = {
+  title: 'React Components/Icon',
+  id: 'react-components-icon',
+  component: LuxIcon,
+  decorators: [
+    (Story, { args }: { args: LuxIconProps & ExtraArgs }) => (
+      <>
+        <style>
+          {`:root {
+            --utrecht-icon-color: ${args.color};
+            --utrecht-icon-size: ${args.size}rem;
+          }`}
+        </style>
+        <Story />
+      </>
+    ),
+  ],
+  args: {
+    size: 4,
+  },
+  argTypes: {
+    color: {
+      control: 'color',
+    },
+    size: {
+      control: 'number',
+    },
+  },
+  parameters: {},
+} satisfies Meta<typeof LuxIcon> & { args: ExtraArgs; argTypes: ArgTypes<ExtraArgs> };
+
+export default meta;
+
+export const Playground: Story = {
+  name: 'Playground',
+  parameters: {
+    docs: {
+      sourceState: 'shown',
+    },
+  },
+  args: {
+    iconId: 'lux' as IconId,
+  },
+  argTypes: {
+    iconId: {
+      control: 'select',
+      options: iconIds,
+    },
+    library: {
+      control: 'object',
+    },
+  },
+  tags: ['!autodocs'],
+};
+
+export const IconLibrary: Story = {
+  name: 'Icon Library',
+  args: {
+    library: CustomLibrary,
+    iconId: 'candle',
+  },
+  argTypes: {
+    iconId: {
+      control: 'select',
+      options: Object.keys(CustomLibrary),
+    },
+  },
+};

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

@@ -42,8 +42,13 @@ export const Playground: Story = {
   name: 'Playground',
   args: {
     appearance: undefined,
-    children:
-      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Dolor ante id varius, aenean eu faucibus vitae malesuada. Viverra malesuada aliquam et placerat justo porta ipsum parturient. Cursus nostra varius efficitur lobortis aliquam lectus bibendum.',
+    children: (
+      <>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Dolor ante id varius, aenean eu faucibus vitae
+        malesuada. Viverra malesuada aliquam et placerat justo porta ipsum parturient. Cursus nostra varius efficitur
+        lobortis aliquam lectus bibendum.
+      </>
+    ),
   },
   parameters: {
     docs: {