From 3ef46e29149256976d20a73eb51997338664396f Mon Sep 17 00:00:00 2001
From: Benjamin Rasmussen <benjamin@reload.dk>
Date: Mon, 11 Dec 2023 15:31:01 +0100
Subject: [PATCH] WIP

---
 src/stories/Library/media/Media.stories.tsx   | 21 ++++++++++++++++++
 src/stories/Library/media/Media.tsx           | 22 +++++++++++++++++++
 src/stories/Library/media/media.scss          |  1 +
 src/stories/Library/medias/Medias.stories.tsx | 21 ++++++++++++++++++
 src/stories/Library/medias/Medias.tsx         | 18 +++++++++++++++
 src/stories/Library/medias/medias.scss        |  1 +
 6 files changed, 84 insertions(+)
 create mode 100644 src/stories/Library/media/Media.stories.tsx
 create mode 100644 src/stories/Library/media/Media.tsx
 create mode 100644 src/stories/Library/media/media.scss
 create mode 100644 src/stories/Library/medias/Medias.stories.tsx
 create mode 100644 src/stories/Library/medias/Medias.tsx
 create mode 100644 src/stories/Library/medias/medias.scss

diff --git a/src/stories/Library/media/Media.stories.tsx b/src/stories/Library/media/Media.stories.tsx
new file mode 100644
index 000000000..cb5cf9990
--- /dev/null
+++ b/src/stories/Library/media/Media.stories.tsx
@@ -0,0 +1,21 @@
+import { withDesign } from "storybook-addon-designs";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Media } from "./Media";
+
+export default {
+  title: "Library / Medias",
+  component: Medias,
+  decorators: [withDesign],
+  argTypes: {},
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39100&mode=design&t=sPixP2kXWpSn7p74-4",
+    },
+  },
+} as ComponentMeta<typeof Medias>;
+
+const Template: ComponentStory<typeof Medias> = (args) => (
+  <Medias {...args} />
+);
diff --git a/src/stories/Library/media/Media.tsx b/src/stories/Library/media/Media.tsx
new file mode 100644
index 000000000..71250690a
--- /dev/null
+++ b/src/stories/Library/media/Media.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+export type MediaProps = {
+  imageUrl?: string;
+  altText?: string;
+  byline?: string;
+};
+
+const Media: React.FunctionComponent<MediaProps> = ({
+  imageUrl,
+  byline,
+  altText,
+}) => {
+  return (
+    <figure className="media">
+      <img src={imageUrl} alt={altText} />
+      {byline ?? <figcaption>{byline}</figcaption>}
+    </figure>
+  );
+};
+
+export default Media;
diff --git a/src/stories/Library/media/media.scss b/src/stories/Library/media/media.scss
new file mode 100644
index 000000000..0f8603efa
--- /dev/null
+++ b/src/stories/Library/media/media.scss
@@ -0,0 +1 @@
+.media {}
diff --git a/src/stories/Library/medias/Medias.stories.tsx b/src/stories/Library/medias/Medias.stories.tsx
new file mode 100644
index 000000000..c24fae0ec
--- /dev/null
+++ b/src/stories/Library/medias/Medias.stories.tsx
@@ -0,0 +1,21 @@
+import { withDesign } from "storybook-addon-designs";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Medias } from "./Medias";
+
+export default {
+  title: "Library / Medias",
+  component: Medias,
+  decorators: [withDesign],
+  argTypes: {},
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39100&mode=design&t=sPixP2kXWpSn7p74-4",
+    },
+  },
+} as ComponentMeta<typeof Medias>;
+
+const Template: ComponentStory<typeof Medias> = (args) => (
+  <Medias {...args} />
+);
diff --git a/src/stories/Library/medias/Medias.tsx b/src/stories/Library/medias/Medias.tsx
new file mode 100644
index 000000000..0cc8f5f57
--- /dev/null
+++ b/src/stories/Library/medias/Medias.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import Media from "../media/Media";
+
+export type MediasProps = {
+  mediaItems?: Array<typeof Media>;
+};
+
+const Medias: React.FunctionComponent<MediasProps> = ({ mediaItems }) => {
+  return (
+    <div class="medias">
+      {mediaItems.map((media) => (
+        <Media />
+      ))}
+    </div>
+  );
+};
+
+export default Medias;
diff --git a/src/stories/Library/medias/medias.scss b/src/stories/Library/medias/medias.scss
new file mode 100644
index 000000000..198dc363e
--- /dev/null
+++ b/src/stories/Library/medias/medias.scss
@@ -0,0 +1 @@
+.medias {}