Add EventPage + EventHeader

Introduced markup and CSS for `EventHeader`, now included in `EventPage`.

Additionally, made small modifications to the `tag` component to allow the addition of extra CSS classes. In typography, I introduced a placeholder for `.text-header-h1` to facilitate future extension of this class

base.scss

@@ -101,6 +101,7 @@
 @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";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";
@@ -116,6 +117,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,29 @@
+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",
+    },
+  },
+  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,17 @@
+import { FC } from "react";
+import EventHeader from "../../Library/event-header/EventHeader";
+
+type EventPageProps = {
+  title: string;
+  date: string;
+};
+
+const EventPage: FC<EventPageProps> = ({ title, date }) => {
+  return (
+    <article className="event-page">
+      <EventHeader title={title} date={date} />
+    </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,46 @@
+import { FC } from "react";
+import { Tag } from "../tag/Tag";
+import { Button } from "../Buttons/button/Button";
+
+type EventHeaderProps = {
+  title: string;
+  date: string;
+};
+
+const EventHeader: FC<EventHeaderProps> = ({ title, date }) => {
+  return (
+    <header className="event-header">
+      <section className="event-header__content">
+        <div className="event-header__extra-padding">
+          <Tag hasBackground className="event-header__tag">
+            UDSTILLING
+          </Tag>
+          <time className="event-header__date">{date}</time>
+          <h1 className="event-header__title">{title}</h1>
+        </div>
+        <Button
+          classNames="event-header__button"
+          label="Køb billet"
+          buttonType="none"
+          disabled={false}
+          collapsible={false}
+          size="large"
+          variant="filled"
+        />
+      </section>
+      <section className="event-header__visual">
+        <img
+          className="event-header__image"
+          src="/images/event_image.jpg"
+          alt=""
+        />
+        <div className="event-header__image-info">
+          <span>Photo by Smith on Unsplash </span>
+          <span>©2021</span>
+        </div>
+      </section>
+    </header>
+  );
+};
+
+export default EventHeader;

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

@@ -0,0 +1,77 @@
+.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__extra-padding {
+  padding: 0 $s-3xl;
+  @include breakpoint-s {
+    padding: 0;
+  }
+}
+
+.event-header__tag {
+  margin: $s-md 0;
+  @include breakpoint-s {
+    margin: $s-lg 0;
+  }
+}
+
+.event-header__date {
+  @extend %text-header-h4;
+  display: block;
+  margin-bottom: $s-md;
+  @include breakpoint-s {
+    margin-bottom: $s-sm;
+  }
+}
+
+.event-header__title {
+  @extend %text-header-h1;
+  margin-bottom: $s-xl;
+  @include breakpoint-s {
+    margin-bottom: $s-5xl;
+  }
+}
+
+.event-header__button {
+  width: 100%;
+  @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;
+  }
+}
+
+.event-header__image {
+  width: 100%;
+}
+
+.event-header__image-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}