Component/image (#534)

closes #477

---------

Co-authored-by: Ruben Smit <[email protected]>
Co-authored-by: Mees <[email protected]>
Co-authored-by: Sjimmie <[email protected]>

packages/components-react/src/Image.tsx

@@ -0,0 +1,10 @@
+import { Image as UtrechtImage } from '@utrecht/component-library-react/dist/css-module';
+import { ForwardedRef, forwardRef, ImgHTMLAttributes } from 'react';
+
+export const Image = forwardRef(
+  ({ className, ...restProps }: ImgHTMLAttributes<HTMLImageElement>, ref: ForwardedRef<HTMLImageElement>) => (
+    <UtrechtImage {...restProps} ref={ref} photo className={className} />
+  ),
+);
+
+Image.displayName = 'Image';

packages/storybook/package.json

@@ -36,6 +36,7 @@
     "@rijkshuisstijl-community/rivm-design-tokens": "workspace:*",
     "@rijkshuisstijl-community/web-components-stencil": "workspace:*",
     "@rijkshuisstijl-community/web-components-react": "workspace:*",
+    "@rijkshuisstijl-community/components-react": "workspace:*",
     "@storybook/addon-a11y": "8.2.4",
     "@storybook/addon-actions": "8.2.4",
     "@storybook/addon-docs": "8.2.4",

packages/storybook/src/community/image.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# Rijkshuisstijl Community image component

packages/storybook/src/community/image.stories.tsx

@@ -0,0 +1,61 @@
+import { Image } from '@rijkshuisstijl-community/components-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import readme from './image.md?raw';
+
+const meta = {
+  title: 'Rijkshuisstijl/Image',
+  id: 'rijkshuisstijl-image',
+  component: Image,
+  argTypes: {
+    src: {
+      description: 'Image source',
+      control: { type: 'text' },
+      table: {
+        category: 'Property',
+      },
+    },
+    alt: {
+      description: 'Image alt text',
+      control: { type: 'text' },
+      table: {
+        category: 'Property',
+      },
+    },
+    width: {
+      description: 'Image width',
+      control: { type: 'number' },
+      table: {
+        category: 'Property',
+      },
+    },
+    height: {
+      description: 'Image height',
+      control: { type: 'number' },
+      table: {
+        category: 'Property',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} as Meta<typeof Image>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    alt: 'Multicolored tulip field',
+    height: 763,
+    width: 640,
+    src: './placeholder.jpg',
+  },
+  name: 'Image',
+};