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

@@ -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>

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;

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

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",
 };

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

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