From e9122cd155cd599b902ec7fc63ce1009ac980e33 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 3 May 2024 15:17:56 +0200 Subject: [PATCH 1/3] Refactor `content-list-item__description` Remove unnecessary `p` tag and set margin-bottom back to default `auto`, which is needed for the truncate to work properly. --- .../Library/content-list-item/ContentListItem.tsx | 4 +--- .../Library/content-list-item/content-list-item.scss | 11 +++-------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/stories/Library/content-list-item/ContentListItem.tsx b/src/stories/Library/content-list-item/ContentListItem.tsx index 1552528ba..c8b6b30e9 100644 --- a/src/stories/Library/content-list-item/ContentListItem.tsx +++ b/src/stories/Library/content-list-item/ContentListItem.tsx @@ -47,9 +47,7 @@ export const ContentListItem: React.FC = ({ )}
{date}

{title}

-
-

{description}

-
+
{description}

{location}

diff --git a/src/stories/Library/content-list-item/content-list-item.scss b/src/stories/Library/content-list-item/content-list-item.scss index 587d77c48..db1760eb9 100644 --- a/src/stories/Library/content-list-item/content-list-item.scss +++ b/src/stories/Library/content-list-item/content-list-item.scss @@ -107,9 +107,7 @@ $_stacked-reduce-width: 20px; .content-list-item__description { grid-area: description; margin-bottom: $s-lg; - p { - @include text-ellipsis-truncation(3); - } + @include text-ellipsis-truncation(3); } .content-list-item__content-bottom-container { @@ -211,12 +209,9 @@ $_stacked-reduce-width: 20px; } .content-list-item__description { - margin-bottom: unset; + margin-bottom: auto; grid-area: description; - - p { - @include text-ellipsis-truncation(2); - } + @include text-ellipsis-truncation(2); } .content-list-item__content-right-container { From d01cf89704937158e71f6346e547e8886ce76f55 Mon Sep 17 00:00:00 2001 From: Benjamin Rasmussen Date: Fri, 10 May 2024 14:46:17 +0200 Subject: [PATCH 2/3] Tweak rich-text list styling. DDFFORM-114 --- src/stories/Library/rich-text/rich-text.scss | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/stories/Library/rich-text/rich-text.scss b/src/stories/Library/rich-text/rich-text.scss index b023e0d63..773abdb26 100644 --- a/src/stories/Library/rich-text/rich-text.scss +++ b/src/stories/Library/rich-text/rich-text.scss @@ -25,7 +25,6 @@ $_max-width-rich-text: $block-max-width__small; ol > li, ul > li { $_dash-width: 21px; - $_dash-width--wide: 33px; position: relative; padding-left: $_dash-width + $s-md; @@ -39,19 +38,11 @@ $_max-width-rich-text: $block-max-width__small; width: $_dash-width; text-align: center; } - - @include media-query__medium { - padding-left: $_dash-width--wide + $s-lg; - - &::before { - width: $_dash-width--wide; - } - } } ul > li::before { content: ""; - height: 1px; + height: 2px; background-color: $color__global-black; } @@ -68,8 +59,9 @@ $_max-width-rich-text: $block-max-width__small; ) ); + top: 0; font-weight: normal; - line-height: 0; + line-height: normal; counter-increment: list; content: counter(list) "."; } From ff724e8e5d742c8a492253177c315d6c61e9dba8 Mon Sep 17 00:00:00 2001 From: LasseStaus Date: Fri, 3 May 2024 14:33:53 +0200 Subject: [PATCH 3/3] Refactor logo into logo-link The current logo CSS / markup is outdated. This refactors the logo component so that it displays the image, and / or the library name / place accordingly. This also moves css for the logo away from "Header", as the logo is used elsewhere that the header as well. Additionally the story has been updated, and any component using the component has has its' props updated in accordance with the changes. This also introduces an aria-label for the logo, which was requested in a seperate ticket: DDFFORM-750 DDFFORM-696 --- src/stories/Blocks/header/Header.tsx | 16 +++++----- src/stories/Blocks/header/header.scss | 9 ------ .../Library/footer-widgets/FooterWidgets.tsx | 7 ++++- src/stories/Library/logo/Logo.stories.tsx | 28 +++++++---------- src/stories/Library/logo/Logo.tsx | 31 +++++++++++-------- src/stories/Library/logo/logo.scss | 27 ++++++++++------ 6 files changed, 61 insertions(+), 57 deletions(-) diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx index ba8cf2c11..f36683503 100644 --- a/src/stories/Blocks/header/Header.tsx +++ b/src/stories/Blocks/header/Header.tsx @@ -38,13 +38,12 @@ export const Header = (props: HeaderProps) => { <>
- - - +
@@ -71,8 +70,9 @@ export const Header = (props: HeaderProps) => {
diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss index 5f1a6a892..20e7db67e 100644 --- a/src/stories/Blocks/header/header.scss +++ b/src/stories/Blocks/header/header.scss @@ -15,15 +15,6 @@ border-right: 1px solid $color__global-tertiary-1; } -.header__logo-desktop-link { - text-decoration: none; - height: 100%; - width: 100%; - display: flex; - align-items: center; - justify-content: center; -} - .header__menu { display: grid; grid-template-rows: 1fr 1fr; diff --git a/src/stories/Library/footer-widgets/FooterWidgets.tsx b/src/stories/Library/footer-widgets/FooterWidgets.tsx index fbcb35d75..b66dfa105 100644 --- a/src/stories/Library/footer-widgets/FooterWidgets.tsx +++ b/src/stories/Library/footer-widgets/FooterWidgets.tsx @@ -14,7 +14,12 @@ const FooterWidgets: FC = ({ footerLanguages }) => { ariaLabel="dropdown" arrowIcon="triangles" /> - +
); }; diff --git a/src/stories/Library/logo/Logo.stories.tsx b/src/stories/Library/logo/Logo.stories.tsx index f83d4bb18..7e84bde4c 100644 --- a/src/stories/Library/logo/Logo.stories.tsx +++ b/src/stories/Library/logo/Logo.stories.tsx @@ -1,19 +1,9 @@ import { ComponentStory } from "@storybook/react"; -import { withDesign } from "storybook-addon-designs"; import Logo, { LogoProps } from "./Logo"; export default { title: "Library / Logo", component: Logo, - decorators: [withDesign], - argTypes: { - libraryName: { - defaultValue: "Hjørring", - }, - altText: { - defaultValue: "Logo", - }, - }, parameters: { design: { type: "figma", @@ -27,14 +17,18 @@ const Template: ComponentStory = (args: LogoProps) => ( ); -export const Default = Template.bind({}); -Default.args = { - fallback: false, - altText: "logo", +export const LogoWithImage = Template.bind({}); +LogoWithImage.args = { + hasImage: true, + libraryName: "Hjørring", + libraryPlace: "Bibliotekerne", + altText: "Logo", }; -export const LogoFallback = Template.bind({}); -LogoFallback.args = { - fallback: true, +export const LogoWithoutImage = Template.bind({}); +LogoWithoutImage.args = { + hasImage: false, libraryName: "Hjørring", + libraryPlace: "Bibliotekerne", + altText: "Logo", }; diff --git a/src/stories/Library/logo/Logo.tsx b/src/stories/Library/logo/Logo.tsx index 200180175..71206a091 100644 --- a/src/stories/Library/logo/Logo.tsx +++ b/src/stories/Library/logo/Logo.tsx @@ -1,24 +1,29 @@ import "../../../styles/css/base.css"; +import clsx from "clsx"; import logo from "./logo.png"; export type LogoProps = { - fallback: boolean; + hasImage: boolean; libraryName: string; + libraryPlace?: string; altText: string; }; -const Logo = (props: LogoProps) => { - const { fallback, libraryName, altText } = props; - - return fallback ? ( -
-

{libraryName}

-

Bibliotekerne

-
- ) : ( -
- {altText} -
+const Logo = ({ hasImage, libraryName, libraryPlace, altText }: LogoProps) => { + return ( + +
+ {hasImage && {altText}} +
+

{libraryName}

+ {libraryPlace &&

{libraryPlace}

} +
+
+ ); }; diff --git a/src/stories/Library/logo/logo.scss b/src/stories/Library/logo/logo.scss index 11a0a3c33..19f8f9410 100644 --- a/src/stories/Library/logo/logo.scss +++ b/src/stories/Library/logo/logo.scss @@ -1,30 +1,39 @@ .logo { + text-decoration: none; + height: 100%; + width: auto; + display: flex; + align-items: center; + justify-content: center; + img { display: none; - - height: 100px; width: auto; - @include media-query__small { display: block; } } } -.logo-fallback { +.logo__description { @include typography($typo__body-small); } -.logo-fallback__text-name { +.logo__library-name { font-weight: 700; } -.logo-fallback__text-libraries { - font-weight: 300; +.logo__description--has-image { + @include media-query__small { + display: none; + } } -.logo-fallback--has-image { - @include media-query__small { +.has-burger-menu .header__menu-navigation-mobile .logo { + img { display: none; } + .logo__description--has-image { + display: block; + } }