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; + } }