From 00e28b52c0dc194540a72a081e542cb465c3ff6c Mon Sep 17 00:00:00 2001 From: LasseStaus Date: Thu, 20 Jun 2024 14:02:46 +0200 Subject: [PATCH] Rewrite to use backgroundImage MediaContainer / image credited is not being correctly used here. To avoid redundant markup we use backgroundImage inline instead. DDFFORM-540 --- src/stories/Library/banner/Banner.stories.tsx | 19 +++---- src/stories/Library/banner/Banner.tsx | 33 ++++++------ src/stories/Library/banner/banner.scss | 52 ++++++++++--------- src/styles/scss/tools/mixins.tools.scss | 6 ++- 4 files changed, 54 insertions(+), 56 deletions(-) diff --git a/src/stories/Library/banner/Banner.stories.tsx b/src/stories/Library/banner/Banner.stories.tsx index a01564384..4f5ac8a6b 100644 --- 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: ( - - ), + 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 uden 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 index 9c7675a17..9bdb2787e 100644 --- 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 = ({ link, image, title, description }) => { +const Banner: FC = ({ link, imageSrc, title, description }) => { + const backgroundImageStyle = imageSrc + ? { backgroundImage: `url(${imageSrc})` } + : {}; return ( - - {image && ( -
- -
- )} -
+ +
{title && ( diff --git a/src/stories/Library/banner/banner.scss b/src/stories/Library/banner/banner.scss index 75c103bae..7a6bd4e47 100644 --- 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 index d789392c9..62a722ab6 100644 --- 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"); }