WIP

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} />
+);

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;

src/stories/Library/media/media.scss

@@ -0,0 +1 @@
+.media {}

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} />
+);

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;

src/stories/Library/medias/medias.scss

@@ -0,0 +1 @@
+.medias {}