feat: image component

components/img/README.md

@@ -0,0 +1,12 @@
+<!-- @license CC0-1.0 -->
+
+# Image
+
+## Relevante WCAG eisen
+
+- [WCAG eis 1.1.1](https://www.w3.org/TR/WCAG21/#non-text-content): afbeeldingen moeten een tekst als alternatief hebben, bijvoorbeeld via het `alt`-attribuut
+- [WCAG eis 1.4.5](https://www.w3.org/TR/WCAG21/#images-of-text)
+- [WCAG eis 1.4.6](https://www.w3.org/TR/WCAG21/#contrast-enhanced)
+- [WCAG eis 1.4.9](https://www.w3.org/TR/WCAG21/#images-of-text-no-exception)
+- [WCAG eis 1.4.11](https://www.w3.org/TR/WCAG21/#non-text-contrast)
+- [WCAG eis 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts): de taal van de `alt` tag moet instelbaar zijn

components/img/css/_mixin.scss

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+
+@mixin utrecht-img {
+  height: auto;
+  width: auto;
+}
+
+@mixin utrecht-img--scale-down {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+@mixin utrecht-img--photo {
+  @include utrecht-img--scale-down;
+}

components/img/css/index.scss

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+
+@import "./mixin";
+
+.utrecht-img {
+  @include utrecht-img;
+}
+
+.utrecht-img--scale-down {
+  /* use this class name with caution, text contained in image might become too small to read */
+  @include utrecht-img--scale-down;
+}
+
+.utrecht-img--photo {
+  @include utrecht-img--photo;
+}

components/img/css/stories/01-default.stories.mdx

@@ -0,0 +1,37 @@
+<!-- @license CC0-1.0 -->
+
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { argTypes, defaultArgs, Img } from "../story-template";
+import "../index.scss";
+
+<Meta
+  id="css-img"
+  title="CSS Component/Image"
+  argTypes={argTypes}
+  parameters={{
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Image
+
+Styling via the `.utrecht-img` class name:
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      ...defaultArgs,
+      src: "logo.svg",
+      width: 188,
+      height: 101,
+      alt: "Gemeente Utrecht",
+    }}
+  >
+    {Img.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />

components/img/css/stories/02-photo.stories.mdx

@@ -0,0 +1,38 @@
+<!-- @license CC0-1.0 -->
+
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { argTypes, defaultArgs, Img } from "../story-template";
+import "../index.scss";
+
+<Meta
+  id="css-img"
+  title="CSS Component/Image"
+  argTypes={argTypes}
+  parameters={{
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Photo
+
+Photo © 2022 Gemeente Utrecht.
+
+<Canvas>
+  <Story
+    name="Photo"
+    args={{
+      ...defaultArgs,
+      src: "example/photo-nijntje-vuelta.jpg",
+      width: 2048,
+      height: 1536,
+      photo: true,
+      alt: "Nijntje mascotte met Vuelta 2022 t-shirt bij het Utrecht stadskantoor",
+    }}
+  >
+    {Img.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Photo" />

components/img/css/stories/03-text.stories.mdx

@@ -0,0 +1,38 @@
+<!-- @license CC0-1.0 -->
+
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { argTypes, defaultArgs, Img } from "../story-template";
+import "../index.scss";
+
+<Meta
+  id="css-img"
+  title="CSS Component/Image"
+  argTypes={argTypes}
+  parameters={{
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Photo
+
+Photo © 2022 Gemeente Utrecht.
+
+<Canvas>
+  <Story
+    name="Text alternative in another language"
+    args={{
+      ...defaultArgs,
+      src: "example/je-maintiendrai.svg",
+      alt: "Je maintiendrai",
+      lang: "fr",
+      width: "200",
+      height: "50",
+    }}
+  >
+    {Img.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Text alternative in another language" />

components/img/css/stories/readme.stories.mdx

@@ -0,0 +1,6 @@
+import { Description, Meta } from "@storybook/addon-docs";
+import document from "../../README.md";
+
+<Meta title="CSS Component/Image/README" />
+
+<Description>{document}</Description>

components/img/css/story-template.jsx

@@ -0,0 +1,71 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+
+import clsx from 'clsx';
+import React from 'react';
+
+export const argTypes = {
+  alt: {
+    description: 'Text alternative',
+    type: {
+      name: 'text',
+      required: true,
+    },
+  },
+  lang: {
+    description: 'Language of text alternative',
+    type: {
+      name: 'text',
+      required: false,
+    },
+  },
+  height: {
+    description: 'Height (in pixels)',
+    type: {
+      name: 'text',
+      required: true,
+    },
+  },
+  width: {
+    description: 'Width (in pixels)',
+    type: {
+      name: 'text',
+      required: true,
+    },
+  },
+  src: {
+    description: 'URL of image',
+    type: {
+      name: 'text',
+      required: true,
+    },
+  },
+  photo: {
+    description: 'Image is a photo',
+    type: {
+      name: 'boolean',
+      required: false,
+    },
+  },
+};
+
+export const defaultArgs = {
+  photo: false,
+  src: '',
+};
+
+export const Img = ({ alt, height, lang, photo, src, width }) => (
+  <img
+    className={clsx('utrecht-img', photo && 'utrecht-img--photo')}
+    width={String(width)}
+    height={String(height)}
+    src={src}
+    alt={alt}
+    lang={lang}
+  />
+);
+
+export default Img;

packages/component-library-css/src/index.scss

@@ -49,6 +49,7 @@
 @import "../../../components/heading-4/css";
 @import "../../../components/heading-5/css";
 @import "../../../components/heading-6/css";
+@import "../../../components/img/css";
 @import "../../../components/link-list/css";
 @import "../../../components/link-button/css";
 @import "../../../components/link-social/css";