From 13738f9fefc1234bf71b1ca4aab0c04d78f788af Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Tue, 30 Jul 2024 12:59:23 +0200
Subject: [PATCH] Show watch on small screens  / Refactor `header` CSS + Markup

- Improve code readability
Deconstruct props, simplify Profile text logic, fix typos

- Combined `.header__menu-profile` + `.header__menu-bookmarked` + `.header__menu-navigation-button`
Consolidated for simplicity

- Restructure nested CSS
Added BEM classes for child items and modifiers

- Align markup with dpl-cms
  - Introduced `.header__menu-second`
  - Converted profile to an HTML button

- Eliminated redundant CSS
  - `.hide-linkstyle`

- Added `.header__button-responsive-switch`
a container to handle the switch between `.header__button` based on screen size
---
 src/stories/Blocks/header/Header.tsx  |  69 ++++++++++-------
 src/stories/Blocks/header/header.scss | 105 ++++++++++++++------------
 2 files changed, 97 insertions(+), 77 deletions(-)

diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx
index c1b2d31d4..b46b6d62c 100644
--- a/src/stories/Blocks/header/Header.tsx
+++ b/src/stories/Blocks/header/Header.tsx
@@ -20,14 +20,13 @@ export type HeaderProps = {
   openDropdown: boolean;
 };
 
-export const Header = (props: HeaderProps) => {
-  const {
-    signedIn,
-    haveNotification,
-    username,
-    inputPlaceholder,
-    openDropdown,
-  } = props;
+export const Header = ({
+  signedIn,
+  haveNotification,
+  username,
+  inputPlaceholder,
+  openDropdown,
+}: HeaderProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(openDropdown);
 
   useEffect(() => {
@@ -43,7 +42,7 @@ export const Header = (props: HeaderProps) => {
             hasImage
             libraryName="Hjørring"
             libraryPlace="Bibliotekerne"
-            altText="PromoTitle image of libary"
+            altText="PromoTitle image of library"
           />
         </div>
 
@@ -56,7 +55,7 @@ export const Header = (props: HeaderProps) => {
               <div className="header__menu-navigation-mobile">
                 <button
                   id="header-sidebar-nav__toggle"
-                  className="header__menu-navigation-button header__button"
+                  className="header__button header__button--right-border"
                   aria-controls="sidebarNav"
                   aria-expanded="false"
                 >
@@ -74,32 +73,48 @@ export const Header = (props: HeaderProps) => {
                     hasImage
                     libraryName="Lyngby-Taarbæk"
                     libraryPlace="Bibliotekerne"
-                    altText="PromoTitle image of libary"
+                    altText="PromoTitle image of library"
                   />
                 </div>
               </div>
               <MenuItemList menuItems={menuItems} />
             </div>
-            <div className="header__menu-profile header__button">
-              <a href="/" className="hide-linkstyle">
-                {signedIn && haveNotification && (
-                  <div className="header__notification bg-signal-alert" />
-                )}
-                <ProfileIcon aria-label="go to user profile" />
-                {signedIn && (
-                  <span className="text-small-caption">{username}</span>
-                )}
-                {!signedIn && <span className="text-small-caption">Login</span>}
+            <button className="header__button header__button--left-border btn-ui">
+              {signedIn && haveNotification && (
+                <div className="header__button-notification bg-signal-alert" />
+              )}
+              <ProfileIcon
+                className="header__button-icon"
+                aria-label="go to user profile"
+              />
+              <span className="header__button-text">
+                {signedIn ? username : "Login"}
+              </span>
+            </button>
+            <div className="header__button-responsive-switch">
+              <a
+                href="/"
+                className="header__button header__button--left-border"
+              >
+                <WatchStaticIcon
+                  className="header__button-icon"
+                  aria-label="go to opening hours"
+                />
+                <span className="header__button-text">Opening hours</span>
               </a>
-            </div>
-            <div className="header__menu-bookmarked header__button">
-              <a href="/">
-                <HeartIcon aria-label="go to favorites list" />
-                <span className="text-small-caption">Liked</span>
+              <a
+                href="/"
+                className="header__button header__button--left-border"
+              >
+                <HeartIcon
+                  className="header__button-icon"
+                  aria-label="go to favorites list"
+                />
+                <span className="header__button-text">Liked</span>
               </a>
             </div>
           </nav>
-          <div>
+          <div className="header__menu-second">
             <div className="header__menu-search">
               <form className="header__menu-search-form">
                 <input
diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss
index bf26fdb48..2f1f05f99 100644
--- a/src/stories/Blocks/header/header.scss
+++ b/src/stories/Blocks/header/header.scss
@@ -1,6 +1,5 @@
 .header {
   border: 1px solid $color__global-tertiary-1;
-  width: 100%;
   display: grid;
   grid-template-columns: 250px 1fr 105px;
   background-color: $color__global-primary;
@@ -49,12 +48,6 @@
   }
 }
 
-.header__menu-navigation-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-right: 1px solid $color__global-tertiary-1;
-}
 .header__menu-navigation-pagefold {
   height: 100%;
   width: 100%;
@@ -63,46 +56,76 @@
   align-items: center;
 }
 
-.header__menu-profile,
-.header__menu-bookmarked {
+.header__button {
+  cursor: pointer;
   position: relative;
+  height: 56px;
+  width: 56px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $color__text-primary-black;
+
+  @include media-query__small {
+    height: 70px;
+    width: 70px;
+  }
+}
+
+.header__button-notification {
+  position: absolute;
+  width: $s-sm;
+  height: $s-sm;
+  border-radius: 100%;
+  transform: translateX(10px) translateY(-12px);
+}
+
+.header__button--left-border {
   border-left: 1px solid $color__global-tertiary-1;
+}
 
-  a {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+.header__button--right-border {
+  border-right: 1px solid $color__global-tertiary-1;
+}
+
+.header__button-responsive-switch {
+  > *:first-child {
+    @include media-query__small {
+      display: none;
+    }
   }
 
-  span {
-    position: absolute;
-    bottom: 0;
+  > *:last-child {
+    display: none;
+
+    @include media-query__small {
+      display: flex;
+    }
+  }
+}
+
+.header__button-text {
+  display: none;
+
+  @include media-query__small {
+    display: block;
+    @include typography($typo__small-caption);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
     padding: 0 $s-xs;
     text-align: center;
-  }
-
-  @include media-query__small {
-    span {
-      bottom: $s-xs;
-    }
-  }
-
-  .header__notification {
     position: absolute;
-    width: $s-sm;
-    height: $s-sm;
-    border-radius: 100%;
-    transform: translateX(10px) translateY(-12px);
+    bottom: $s-xs;
   }
 }
 
+.header__button-icon {
+  width: 24px;
+  height: 24px;
+}
+
 .header__menu-second {
   height: 100%;
 }
@@ -206,20 +229,6 @@
   align-items: center;
 }
 
-.header__button {
-  height: 56px;
-  width: 56px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: $color__text-primary-black;
-
-  @include media-query__small {
-    height: 70px;
-    width: 70px;
-  }
-}
-
 // has-burger-menu is added dynamically using JS, by calculating if there
 // is enough space to show the desktop menu, and otherwise enabling the
 // burger menu. @see header-state.js
@@ -248,7 +257,3 @@
     display: flex;
   }
 }
-
-#header-sidebar-nav__toggle {
-  cursor: pointer;
-}