diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx index 6df00af5c..5116f3b22 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/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 { 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; + } } 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) "."; }