Add new banner component

This component contains a required link and title. It can be used with a description and a background image to enhance visual appeal.

The title field is a `ReactNode` where the `<u>` (underlined) tag has a custom underline SVG placed beneath it.

base.scss

@@ -142,6 +142,7 @@
 @import "./src/stories/Library/opening-hours/opening-hours-skeleton";
 @import "./src/stories/Library/filtered-event-list/filtered-event-list";
 @import "./src/stories/Library/event-list-stacked/event-list-stacked";
+@import "./src/stories/Library/banner/banner";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

src/stories/Library/banner/Banner.stories.tsx

@@ -0,0 +1,53 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import Banner from "./Banner";
+import ImageCredited from "../image-credited/ImageCredited";
+
+export default {
+  title: "Library / Banner",
+  component: Banner,
+  decorators: [withDesign],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=446-6957&t=IWAOniAbcjV2y2Hf-4",
+    },
+  },
+  argTypes: {
+    image: {
+      defaultValue: (
+        <ImageCredited
+          src="https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=8
+0&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080"
+        />
+      ),
+    },
+    title: {
+      name: "Title",
+      defaultValue: "Hvad skal jeg <u>høre?</u>",
+      control: { type: "text" },
+    },
+    description: {
+      name: "Description",
+      defaultValue:
+        "Om du er dedikeret musiknørd eller moderat musikinteresseret, så er dette siden til dig. Her kan du finde anbefalinger, digitale musikmagasiner, nyheder, musiklitteratur og meget mere.",
+      control: { type: "text" },
+    },
+  },
+} as ComponentMeta<typeof Banner>;
+
+const Template: ComponentStory<typeof Banner> = (args) => <Banner {...args} />;
+
+export const Default = Template.bind({});
+
+export const NoImage = Template.bind({});
+NoImage.args = {
+  title: "Title <u>uden</u> billede",
+  image: undefined,
+};
+
+export const NoDescription = Template.bind({});
+NoDescription.args = {
+  title: "Banner <u>uden</u> beskrivelse",
+  description: undefined,
+};

src/stories/Library/banner/Banner.tsx

@@ -0,0 +1,40 @@
+import { FC, ReactNode } from "react";
+import clsx from "clsx";
+import MediaContainer from "../media-container/MediaContainer";
+import { ReactComponent as ArrowLargeRight } from "../Arrows/icon-arrow-ui/icon-arrow-ui-large-right.svg";
+
+type BannerType = {
+  title: string;
+  image?: ReactNode;
+  description?: string;
+};
+
+const Banner: FC<BannerType> = ({ image, title, description }) => {
+  return (
+    <a href="#" className="banner">
+      {image && (
+        <div className="banner-visual">
+          <MediaContainer media={image} />
+        </div>
+      )}
+      <div
+        className={clsx("banner-content arrow__hover--right-large", {
+          "banner-content--no-image": !image,
+        })}
+      >
+        <h2
+          className="banner-content__title"
+          // We need to be able to replicate our WYSIWYG field in Drupal that makes it possible to underline (<u>) words.
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: title }}
+        />
+        {description && (
+          <p className="banner-content__description">{description}</p>
+        )}
+        <ArrowLargeRight />
+      </div>
+    </a>
+  );
+};
+
+export default Banner;

src/stories/Library/banner/banner.scss

@@ -0,0 +1,66 @@
+@mixin banner-height {
+  height: 500px;
+  @include media-query__medium {
+    height: 810px;
+  }
+}
+
+@mixin banner-text-margin {
+  margin-bottom: $s-md;
+  @include media-query__medium {
+    margin-bottom: $s-xl;
+  }
+}
+
+.banner {
+  @include layout-container($layout__max-width--large, 0);
+  @include banner-height;
+  display: grid;
+  grid-template-rows: 1fr auto 1fr;
+  text-decoration: none;
+}
+
+.banner-content {
+  padding: $s-xl;
+  max-width: 375px;
+  background-color: white;
+  grid-row: 2;
+  grid-column: 1;
+
+  @include media-query__medium {
+    padding: $s-2xl;
+    max-width: 575px;
+    margin-left: 250px;
+  }
+
+  &--no-image {
+    max-width: unset;
+    background-color: unset;
+    margin-left: unset;
+    text-align: center;
+  }
+}
+
+.banner-content__title {
+  @include typography($typo__h1);
+  @include underlined-title;
+  @include banner-text-margin;
+}
+
+.banner-content__description {
+  @include typography($typo__body-medium);
+  @include banner-text-margin;
+  color: $color__global-grey;
+}
+
+.banner-visual {
+  grid-row: 1 / -1;
+  grid-column: 1;
+
+  // Todo: can this be done in drupal?
+  img {
+    @include banner-height;
+    object-fit: cover;
+    object-position: center;
+  }
+}

src/styles/scss/tools/mixins.tools.scss

@@ -70,3 +70,29 @@
   text-overflow: ellipsis;
   text-align: left;
 }
+
+/**
+ * Mixin `underlined-title` applies a custom underline effect to `<u>` elements.
+ * - Uses a pseudo-element (::after) with a positioned SVG image as the underline.
+ * - Removes default text underline.
+ */
+@mixin underlined-title {
+  u {
+    position: relative;
+    text-decoration: none;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -5px;
+      left: 0;
+      width: 100%;
+      height: 10px;
+      background-size: 100% 100%;
+      // Underlined icon from public/icons/basic/icon-underlined.svg
+      // background-image: url("data:image/svg+xml,%3Csvg width='101' height='7' viewBox='0 0 101 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.88867 6C36.7022 -0.286878 63.0591 0.988901 99.1109 1.35819' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+      // Underlined icon from public/icons/basic/icon-underlined-large.svg
+      background-image: url("data:image/svg+xml,%3Csvg width='205' height='8' viewBox='0 0 205 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.11133 6.87425C73.7223 0.129386 128.695 1.4981 203.889 1.8943' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    }
+  }
+}