Merge pull request #621 from danskernesdigitalebibliotek/DDFFORM-696

Refactor logo into logo-link
danskernesdigitalebibliotek · May 14, 2024 · 1737eab · 1737eab
2 parents 5e61f7d + ff724e8
commit 1737eab
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 57 deletions.
diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx
@@ -38,13 +38,12 @@ export const Header = (props: HeaderProps) => {
     <>
       <header className="header">
         <div className="header__logo-desktop">
-          <a className="header__logo-desktop-link" href="/">
-            <Logo
-              fallback={false}
-              libraryName="Hjørring"
-              altText="PromoTitle image of libary"
-            />
-          </a>
+          <Logo
+            hasImage
+            libraryName="Hjørring"
+            libraryPlace="Bibliotekerne"
+            altText="PromoTitle image of libary"
+          />
         </div>
 
         <div className="header__menu">
@@ -71,8 +70,9 @@ export const Header = (props: HeaderProps) => {
                 </Pagefold>
                 <div className="header__menu-navigation-logo">
                   <Logo
-                    fallback
+                    hasImage
                     libraryName="Lyngby-Taarbæk"
+                    libraryPlace="Bibliotekerne"
                     altText="PromoTitle image of libary"
                   />
                 </div>

diff --git 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
@@ -14,7 +14,12 @@ const FooterWidgets: FC<FooterWidgetsType> = ({ footerLanguages }) => {
         ariaLabel="dropdown"
         arrowIcon="triangles"
       />
-      <Logo fallback={false} libraryName="" altText="logo" />
+      <Logo
+        hasImage
+        libraryName="Hjørring"
+        libraryPlace="Bibliotekerne"
+        altText="logo"
+      />
     </div>
   );
 };

diff --git 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<typeof Logo> = (args: LogoProps) => (
   <Logo {...args} />
 );
 
-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
@@ -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 ? (
-    <div className="logo-fallback">
-      <p className="logo-fallback__text-name">{libraryName}</p>
-      <p className="logo-fallback__text-libraries">Bibliotekerne</p>
-    </div>
-  ) : (
-    <div>
-      <img className="logo" src={logo} alt={altText} />
-    </div>
+const Logo = ({ hasImage, libraryName, libraryPlace, altText }: LogoProps) => {
+  return (
+    <a href="/" className="logo" aria-label="Gå til forsiden">
+      <figure className="logo__content">
+        {hasImage && <img src={logo} alt={altText} />}
+        <div
+          className={clsx("logo__description", {
+            "logo__description--has-image": hasImage,
+          })}
+        >
+          <p className="logo__library-name">{libraryName}</p>
+          {libraryPlace && <p>{libraryPlace}</p>}
+        </div>
+      </figure>
+    </a>
   );
 };
 

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