From fa44c72d27d6233628352a4aec69f19961d7a891 Mon Sep 17 00:00:00 2001
From: LasseStaus <l.stausgaard@gmail.com>
Date: Fri, 3 May 2024 14:33:53 +0200
Subject: [PATCH] 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 <logo/> 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            | 20 ++++++------
 6 files changed, 54 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) => {
     <>
       <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
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<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
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<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
index 200180175..9e7fc041b 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 ? (
-    <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-link" aria-label="Gå til forsiden">
+      <figure className="logo-link__content">
+        {hasImage && <img className="logo" src={logo} alt={altText} />}
+        <div
+          className={clsx(" logo-link__description", {
+            "logo-link__description--has-image": hasImage,
+          })}
+        >
+          <p className="logo-link__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
index 11a0a3c33..66e853d0d 100644
--- a/src/stories/Library/logo/logo.scss
+++ b/src/stories/Library/logo/logo.scss
@@ -1,8 +1,14 @@
-.logo {
+.logo-link {
+  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 {
@@ -11,19 +17,15 @@
   }
 }
 
-.logo-fallback {
+.logo-link__description {
   @include typography($typo__body-small);
 }
 
-.logo-fallback__text-name {
+.logo-link__library-name {
   font-weight: 700;
 }
 
-.logo-fallback__text-libraries {
-  font-weight: 300;
-}
-
-.logo-fallback--has-image {
+.logo-link__description--has-image {
   @include media-query__small {
     display: none;
   }