Rewrite <Banner/> to use backgroundImage

MediaContainer / image credited is not being correctly used here. To avoid redundant markup we use backgroundImage inline instead. DDFFORM-540
danskernesdigitalebibliotek · Jul 2, 2024 · 00e28b5 · 00e28b5
1 parent bb9a2e2
commit 00e28b5
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 56 deletions.
diff --git a/src/stories/Library/banner/Banner.stories.tsx b/src/stories/Library/banner/Banner.stories.tsx
@@ -1,7 +1,6 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import Banner from "./Banner";
-import ImageCredited from "../image-credited/ImageCredited";
 
 export default {
   title: "Library / Banner",
@@ -14,13 +13,9 @@ export default {
     },
   },
   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"
-        />
-      ),
+    imageSrc: {
+      defaultValue: "images/campaign_cover.jpg",
+      control: { type: "text" },
     },
     title: {
       name: "Title",
@@ -47,20 +42,20 @@ export const Default = Template.bind({});
 
 export const NoImage = Template.bind({});
 NoImage.args = {
-  image: undefined,
+  imageSrc: undefined,
 };
 
 export const NoImageOnlyTitle = Template.bind({});
 NoImageOnlyTitle.args = {
   title: "Title <u>uden</u> billede",
-  image: undefined,
+  imageSrc: undefined,
   description: undefined,
 };
 
 export const NoImageOnlyDescription = Template.bind({});
 NoImageOnlyDescription.args = {
   title: undefined,
-  image: undefined,
+  imageSrc: undefined,
   description:
     "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.",
 };

diff --git a/src/stories/Library/banner/Banner.tsx b/src/stories/Library/banner/Banner.tsx
@@ -1,31 +1,30 @@
-import { FC, ReactNode } from "react";
 import clsx from "clsx";
-import MediaContainer from "../media-container/MediaContainer";
+import { FC, ReactNode } from "react";
 import { ReactComponent as ArrowLargeRight } from "../Arrows/icon-arrow-ui/icon-arrow-ui-large-right.svg";
 
 type BannerType = {
   link: string;
   title: string;
-  image?: ReactNode;
+  imageSrc?: ReactNode;
   description?: string;
 };
 
-const Banner: FC<BannerType> = ({ link, image, title, description }) => {
+const Banner: FC<BannerType> = ({ link, imageSrc, title, description }) => {
+  const backgroundImageStyle = imageSrc
+    ? { backgroundImage: `url(${imageSrc})` }
+    : {};
   return (
-    <a href={link} className="banner">
-      {image && (
-        <div className="banner__media-wrapper">
-          <MediaContainer media={image} />
-        </div>
-      )}
-      <div
-        className={clsx("banner__content-wrapper", {
-          "banner__content-wrapper--no-image": !image,
-        })}
-      >
+    <a
+      href={link}
+      className={clsx(`banner arrow__hover--right-large`, {
+        "banner--has-image": imageSrc,
+      })}
+      style={backgroundImageStyle}
+    >
+      <div className="banner__content-wrapper">
         <div
-          className={clsx("banner__content arrow__hover--right-large", {
-            "banner__content--no-image": !image,
+          className={clsx("banner__content", {
+            "banner__content--has-image": imageSrc,
           })}
         >
           {title && (

diff --git a/src/stories/Library/banner/banner.scss b/src/stories/Library/banner/banner.scss
@@ -1,5 +1,5 @@
 $_banner-content-wrapper-width: 944px;
-$_banner-content-max-width-small: 300px;
+$_banner-content-max-width-small: 330px;
 $_banner-content-max-width-medium: 569px;
 $_banner-content-no-image-max-width-small: $layout__max-width--small;
 $_banner-height-small: 500px;
@@ -13,51 +13,54 @@ $_banner-height-medium: 810px;
   text-decoration: none;
   box-sizing: border-box;
   background-color: $color__global-secondary;
-  height: $_banner-height-small;
+  min-height: $_banner-height-small;
 
-  @include media-query__small {
-    height: $_banner-height-medium;
+  &--has-image {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    height: 100%;
+    width: 100%;
   }
-}
 
-.banner__media-wrapper {
-  grid-row: 1;
-  grid-column: 1;
-  height: $_banner-height-small;
   @include media-query__small {
-    height: $_banner-height-medium;
+    min-height: $_banner-height-medium;
   }
 }
 
 .banner__content-wrapper {
   @include layout-container($_banner-content-wrapper-width, 0);
   width: 100%;
-  grid-row: 1;
-  grid-column: 1;
-  padding: $s-2xl $s-2xl $s-2xl 0;
+  padding: $s-2xl 0;
+
+  &--has-image {
+    padding-right: $s-2xl;
+  }
+
   @include media-query__small {
     padding-right: unset;
   }
-  &--no-image {
-    padding: unset;
-  }
 }
 
 .banner__content {
-  padding: $s-xl;
-  max-width: $_banner-content-max-width-small;
-  background-color: $color__global-white;
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: $s-md;
+  text-align: center;
+  padding: $s-xl;
+  margin: 0 auto;
+  max-width: $_banner-content-max-width-medium;
 
-  &--no-image {
+  &--has-image {
+    padding: $s-xl;
+    margin: unset;
+    text-align: unset;
+    align-items: unset;
+    background-color: $color__global-white;
     max-width: $_banner-content-max-width-small;
-    margin: 0 auto;
-    background-color: unset;
-    text-align: center;
-    align-items: center;
   }
+
   @include media-query__small {
     gap: $s-lg;
     padding: calc($s-2xl + 6px);
@@ -73,5 +76,4 @@ $_banner-height-medium: 810px;
 .banner__description {
   @include typography($typo__body-placeholder);
   line-height: 160%;
-  color: $color__global-grey;
 }
diff --git a/src/styles/scss/tools/mixins.tools.scss b/src/styles/scss/tools/mixins.tools.scss
@@ -87,8 +87,10 @@
       bottom: -5px;
       left: 0;
       width: 100%;
-      height: 10px;
-      background-size: 100% 100%;
+      height: 12px;
+      background-repeat: no-repeat;
+      background-position: left;
+      background-size: cover;
       // Underlined icon from public/icons/basic/icon-underlined.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");
     }