Styling for 'medias' component, supporting 1 or 2 images. DDFFORM-73

base.scss

@@ -100,6 +100,7 @@
 @import "./src/stories/Library/event-description/event-description";
 @import "./src/stories/Library/link-with-icon/link-with-icon";
 @import "./src/stories/Library/rich-text/rich-text";
+@import "./src/stories/Library/medias/medias";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

src/stories/Library/image-credited/ImageCredited.tsx

@@ -1,11 +1,11 @@
 import clsx from "clsx";
 import { FC } from "react";
 
-type ImageCreditedProps = {
+export type ImageCreditedProps = {
   src: string;
   alt?: string;
-  description: string;
-  year: string;
+  description?: string;
+  year?: string;
   className?: string;
 };
 
@@ -18,7 +18,9 @@ const ImageCredited: FC<ImageCreditedProps> = ({
 }) => {
   return (
     <figure className={clsx("image-credited", className)}>
-      <img src={src} className="image-credited__img" alt={alt} />
+      <div className="image-credited__image">
+        <img src={src} alt={alt} />
+      </div>
       <div className="image-credited__info">
         <span>{description}</span>
         <span>{year}</span>

src/stories/Library/medias/Medias.stories.tsx

@@ -0,0 +1,39 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import Medias from "./Medias";
+import ImageCredited from "../image-credited/ImageCredited";
+
+export default {
+  title: "Library / Medias",
+  component: Medias,
+  decorators: [withDesign],
+  argTypes: {
+    items: {
+      control: false,
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39100&mode=design&t=SREzD6mFi3A15ap4-4",
+    },
+  },
+} as ComponentMeta<typeof Medias>;
+
+const Template: ComponentStory<typeof Medias> = (args) => <Medias {...args} />;
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  items: [
+    <ImageCredited
+      src="https://i.imgur.com/0Fis99n.jpeg"
+      description="Happy dog is Happy"
+    />,
+    <ImageCredited src="https://i.imgur.com/KYhYZkp.jpeg" />,
+  ],
+};
+
+export const Single = Template.bind({});
+Single.args = {
+  items: [<ImageCredited src="https://i.imgur.com/KYhYZkp.jpeg" />],
+};

src/stories/Library/medias/Medias.tsx

@@ -0,0 +1,37 @@
+import { FC, ReactNode } from "react";
+
+type MediasProps = {
+  items: ReactNode[];
+};
+
+const Medias: FC<MediasProps> = ({ items }) => {
+  let classes = "medias";
+
+  if (items.length > 1) {
+    classes += " medias--multiple";
+  } else {
+    classes += " medias--single";
+  }
+
+  return (
+    <div className={classes}>
+      {items.map((item, index) => {
+        let itemClasses = "medias__item";
+
+        if (index === 0) {
+          itemClasses += " medias__item--first";
+        } else if (index === items.length - 1) {
+          itemClasses += " medias__item--last";
+        }
+
+        return (
+          <div key={index} className={itemClasses}>
+            {item}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Medias;

src/stories/Library/medias/medias.scss

@@ -0,0 +1,68 @@
+$_medias-breakpoint: 550px;
+
+.medias__item {
+  width: 100%;
+  box-sizing: border-box;
+
+  img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 33 / 25;
+    object-fit: cover;
+  }
+}
+
+.medias--single {
+  max-width: $layout__max-width--single-media;
+  margin: auto;
+
+  .medias__item {
+    padding: 0 $s-md;
+  }
+}
+
+@include media-query($_medias-breakpoint) {
+  .medias--multiple {
+    display: grid;
+    grid-gap: 8%;
+    grid-template-columns: auto 40%;
+  }
+
+  .medias__item {
+    width: 100%;
+    min-width: 250px;
+  }
+
+  .medias__item--last {
+    margin-top: 4rem;
+  }
+}
+
+@include media-query($_medias-breakpoint, "max-width") {
+  .medias--multiple {
+    .medias__item {
+      max-width: 330px;
+      padding-right: $s-lg;
+    }
+    .medias__item--last {
+      max-width: 300px;
+      margin-top: $s-md;
+      margin-left: auto;
+      padding-left: $s-lg;
+      padding-right: 0;
+    }
+  }
+}
+
+.medias--multiple {
+  max-width: $layout__max-width--multiple-medias;
+  //max-width: 900px;
+  margin: auto;
+
+  .medias__item--last {
+    img {
+      aspect-ratio: 1 / 1;
+      object-fit: cover;
+    }
+  }
+}

src/styles/scss/tools/variables.layout.scss

@@ -3,3 +3,5 @@ $layout__max-width--small: 768px;
 $layout__max-width--large: 1440px;
 
 $layout__max-width--text: 780px;
+$layout__max-width--single-media: 896px;
+$layout__max-width--multiple-medias: 1240px;