Merge branch 'develop' into release/brahma-16

danskernesdigitalebibliotek · May 27, 2024 · 15a0831 · 15a0831
2 parents a77db2d + dbc6110
commit 15a0831
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 79 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/content-list-item/ContentListItem.tsx b/src/stories/Library/content-list-item/ContentListItem.tsx
@@ -47,9 +47,7 @@ export const ContentListItem: React.FC<ContentListItemProps> = ({
         )}
         <div className="content-list-item__date">{date}</div>
         <h2 className="content-list-item__title">{title}</h2>
-        <div className="content-list-item__description">
-          <p>{description}</p>
-        </div>
+        <div className="content-list-item__description">{description}</div>
         <div className="content-list-item__content-bottom-container">
           <p className="content-list-item__location">{location}</p>
         </div>

diff --git a/src/stories/Library/content-list-item/content-list-item.scss b/src/stories/Library/content-list-item/content-list-item.scss
@@ -107,9 +107,7 @@ $_stacked-reduce-width: 20px;
 .content-list-item__description {
   grid-area: description;
   margin-bottom: $s-lg;
-  p {
-    @include text-ellipsis-truncation(3);
-  }
+  @include text-ellipsis-truncation(3);
 }
 
 .content-list-item__content-bottom-container {
@@ -211,12 +209,9 @@ $_stacked-reduce-width: 20px;
   }
 
   .content-list-item__description {
-    margin-bottom: unset;
+    margin-bottom: auto;
     grid-area: description;
-
-    p {
-      @include text-ellipsis-truncation(2);
-    }
+    @include text-ellipsis-truncation(2);
   }
 
   .content-list-item__content-right-container {

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;
+  }
 }
diff --git a/src/stories/Library/rich-text/rich-text.scss b/src/stories/Library/rich-text/rich-text.scss
@@ -25,7 +25,6 @@ $_max-width-rich-text: $block-max-width__small;
   ol > li,
   ul > li {
     $_dash-width: 21px;
-    $_dash-width--wide: 33px;
 
     position: relative;
     padding-left: $_dash-width + $s-md;
@@ -39,19 +38,11 @@ $_max-width-rich-text: $block-max-width__small;
       width: $_dash-width;
       text-align: center;
     }
-
-    @include media-query__medium {
-      padding-left: $_dash-width--wide + $s-lg;
-
-      &::before {
-        width: $_dash-width--wide;
-      }
-    }
   }
 
   ul > li::before {
     content: "";
-    height: 1px;
+    height: 2px;
     background-color: $color__global-black;
   }
 
@@ -68,8 +59,9 @@ $_max-width-rich-text: $block-max-width__small;
         )
       );
 
+      top: 0;
       font-weight: normal;
-      line-height: 0;
+      line-height: normal;
       counter-increment: list;
       content: counter(list) ".";
     }