Add EventPage + EventHeader

base.scss

@@ -1,6 +1,7 @@
 @import "./src/styles/scss/reset";
 @import "./src/stories/Library/colors/color-variables";
 @import "./src/styles/scss/skeleton";
+@import "./src/styles/scss/container";
 
 // The imports below are not advised to be moved around, because
 // they cross-reference various defined variables between each other.
@@ -100,6 +101,8 @@
 @import "./src/stories/Library/Buttons/row-button/row-button";
 @import "./src/stories/Library/Buttons/row-button/row-buttons";
 @import "./src/stories/Library/article-header/article-header";
+@import "./src/stories/Library/event-header/event-header";
+@import "./src/stories/Library/image-credited/image-credited";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";
@@ -115,6 +118,7 @@
 @import "./src/stories/Blocks/material-manifestation-item/material-manifestation-item";
 @import "./src/stories/Blocks/advanced-search/advanced-search";
 @import "./src/stories/Blocks/article/article";
+@import "./src/stories/Blocks/event-page/event-page";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";

src/stories/Blocks/event-page/EventPage.stories.tsx

@@ -0,0 +1,34 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import Event from "./EventPage";
+
+export default {
+  title: "Blocks / Event page",
+  component: Event,
+  decorators: [withDesign],
+  argTypes: {
+    title: {
+      defaultValue: "Fernisering Modern Dans",
+      type: "string",
+    },
+    date: {
+      defaultValue: "06 Dec - 12 Jan 2022",
+      type: "string",
+    },
+    image: {
+      defaultValue:
+        "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      type: "string",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39846&mode=dev",
+    },
+  },
+} as ComponentMeta<typeof Event>;
+
+const Template: ComponentStory<typeof Event> = (args) => <Event {...args} />;
+
+export const Default = Template.bind({});

src/stories/Blocks/event-page/EventPage.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+import EventHeader from "../../Library/event-header/EventHeader";
+
+type EventPageProps = {
+  title: string;
+  date: string;
+  image: string;
+};
+
+const EventPage: FC<EventPageProps> = ({ title, date, image }) => {
+  return (
+    <article className="event-page">
+      <EventHeader title={title} date={date} image={image} />
+    </article>
+  );
+};
+
+export default EventPage;

src/stories/Blocks/event-page/event-page.scss

@@ -0,0 +1,3 @@
+.event-page {
+  background-color: $c-global-primary;
+}

src/stories/Library/event-header/EventHeader.tsx

@@ -0,0 +1,38 @@
+import { FC } from "react";
+import { Tag } from "../tag/Tag";
+import ImageCredited from "../image-credited/ImageCredited";
+
+type EventHeaderProps = {
+  title: string;
+  date: string;
+  image: string;
+};
+
+const EventHeader: FC<EventHeaderProps> = ({ title, date, image }) => {
+  return (
+    <header className="event-header">
+      <section className="event-header__content">
+        <Tag hasBackground className="event-header__tag">
+          Udstilling
+        </Tag>
+        <time className="event-header__date">{date}</time>
+        <h1 className="event-header__title">{title}</h1>
+        <a
+          href="/"
+          className="btn-primary btn-filled btn-large event-header__button"
+        >
+          Køb billet
+        </a>
+      </section>
+      <section className="event-header__visual">
+        <ImageCredited
+          src={image}
+          description="Photo by Unsplash"
+          year="©2021"
+        />
+      </section>
+    </header>
+  );
+};
+
+export default EventHeader;

src/stories/Library/event-header/event-header.scss

@@ -0,0 +1,79 @@
+.event-header {
+  @include container(medium);
+  border-bottom: 1px solid $c-global-tertiary-1;
+  display: grid;
+  gap: $s-lg;
+  padding-bottom: $s-2xl;
+  @include breakpoint-s {
+    grid-template-columns: 2fr 1fr;
+    gap: 0;
+    padding-bottom: 0;
+  }
+}
+
+.event-header__content,
+.event-header__visual {
+  padding: 0 $s-md;
+  @include breakpoint-s {
+    padding: $s-2xl;
+  }
+}
+
+.event-header__content {
+  display: grid;
+  grid-template-columns: $s-3xl 1fr $s-3xl;
+  grid-template-areas:
+    ". tag  ."
+    ". date  ."
+    ". title  ."
+    "btn btn btn";
+
+  @include breakpoint-s {
+    grid-template-columns: 1fr;
+  }
+}
+
+.event-header__tag {
+  grid-area: tag;
+  width: max-content;
+  margin: $s-md 0;
+  @include breakpoint-s {
+    margin: $s-lg 0;
+  }
+}
+
+.event-header__date {
+  grid-area: date;
+  @extend %text-header-h4;
+  display: block;
+  margin-bottom: $s-md;
+  @include breakpoint-s {
+    margin-bottom: $s-sm;
+  }
+}
+
+.event-header__title {
+  grid-area: title;
+  @extend %text-header-h1;
+  margin-bottom: $s-xl;
+  @include breakpoint-s {
+    margin-bottom: $s-5xl;
+  }
+}
+
+.event-header__button {
+  grid-area: btn;
+  width: 100%;
+  text-decoration: none;
+  @include breakpoint-s {
+    width: auto;
+  }
+}
+
+.event-header__visual {
+  @include breakpoint-s {
+    grid-column: 1/2;
+    grid-row: 1/2;
+    border-right: 1px solid $c-global-tertiary-1;
+  }
+}

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

@@ -0,0 +1,40 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import ImageCredited from "./ImageCredited";
+
+export default {
+  title: "Library / Image Credited",
+  component: ImageCredited,
+  decorators: [withDesign],
+  argTypes: {
+    src: {
+      defaultValue:
+        "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      type: "string",
+    },
+    alt: {
+      defaultValue: "Photo by Unsplash",
+      type: "string",
+    },
+    description: {
+      defaultValue: "Fernisering Modern Dans",
+      type: "string",
+    },
+    year: {
+      defaultValue: "©2021",
+      type: "string",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39846&mode=dev",
+    },
+  },
+} as ComponentMeta<typeof ImageCredited>;
+
+const Template: ComponentStory<typeof ImageCredited> = (args) => (
+  <ImageCredited {...args} />
+);
+
+export const Default = Template.bind({});

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

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

src/stories/Library/image-credited/image-credited.scss

@@ -0,0 +1,10 @@
+.image-credited__img {
+  width: 100%;
+}
+
+.image-credited__info {
+  @extend %text-small-caption;
+  margin-top: $s-md;
+  display: flex;
+  justify-content: space-between;
+}

src/stories/Library/tag/Tag.tsx

@@ -8,6 +8,7 @@ type TagProps = {
   hasBackground?: boolean;
   showCloseIcon?: boolean;
   isClickable?: boolean;
+  className?: string;
 };
 
 export const Tag = ({
@@ -17,6 +18,7 @@ export const Tag = ({
   usesCursor = true,
   showCloseIcon = false,
   isClickable = true,
+  className,
 }: TagProps) => {
   const [selected, setSelected] = useState(false);
 
@@ -28,7 +30,8 @@ export const Tag = ({
         "tag",
         (hasBackground || selected) && "tag--fill",
         usesCursor && "cursor-pointer",
-        `tag--${size}`
+        `tag--${size}`,
+        className
       )}
     >
       {children}

src/styles/scss/container.scss

@@ -0,0 +1,10 @@
+@mixin container($size) {
+  margin: 0 auto;
+  @if $size == small {
+    max-width: 768px;
+  } @else if $size == medium {
+    max-width: 1024px;
+  } @else if $size == large {
+    max-width: 1440px;
+  }
+}