Merge pull request #593 from danskernesdigitalebibliotek/release/herm…

…od-sprint-12 Hermod sprint 12
danskernesdigitalebibliotek · Apr 23, 2024 · 273114b · 273114b
2 parents 0e21fc6 + bcde7b4
commit 273114b
Show file tree

Hide file tree

Showing 14 changed files with 327 additions and 74 deletions.
diff --git a/base.scss b/base.scss
@@ -137,6 +137,7 @@
 @import "./src/stories/Library/opening-hours-editor/opening-hours-editor";
 @import "./src/stories/Library/opening-hours/opening-hours";
 @import "./src/stories/Library/opening-hours/opening-hours-skeleton";
+@import "./src/stories/Library/filtered-event-list/filtered-event-list";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

diff --git a/src/stories/Blocks/header/header-sticky.js b/src/stories/Blocks/header/header-sticky.js
@@ -26,14 +26,20 @@ window.addEventListener("DOMContentLoaded", () => {
     lastScrollY = scrollY > 0 ? scrollY : 0;
 
     // Control header direction class.
+    const headerContainerSelector = ".header";
+
     if (scrollDirection === "down") {
-      const headerHeight = document.querySelector("header").offsetHeight;
+      const headerHeight = document.querySelector(
+        headerContainerSelector
+      ).offsetHeight;
       const headerDownTopPosition = headerHeight + headerDownTopPositionOffset;
       document.querySelector(
-        "header"
+        headerContainerSelector
       ).style.top = `-${headerDownTopPosition}px`;
     } else {
-      document.querySelector("header").style.top = `${headerYStartPosition}px`;
+      document.querySelector(
+        headerContainerSelector
+      ).style.top = `${headerYStartPosition}px`;
     }
   };
 

diff --git a/src/stories/Library/filtered-event-list/FilteredEventList.stories.tsx b/src/stories/Library/filtered-event-list/FilteredEventList.stories.tsx
@@ -0,0 +1,43 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import FilteredEventList from "./FilteredEventlist";
+import FilteredListData from "./FilteredEventListData";
+
+export default {
+  title: "Library/ Filtered Event List",
+
+  component: FilteredEventList,
+  argTypes: {
+    title: {
+      defaultValue: "Aktiviteter på biblioteket",
+      control: "text",
+      description: "Title of the recommendation",
+    },
+    events: {
+      defaultValue: FilteredListData,
+      control: "object",
+      description: "List of events to be displayed",
+    },
+    buttonText: {
+      defaultValue: "Se alle",
+      control: "text",
+      description: "Text for the button",
+    },
+    buttonShowLessText: {
+      defaultValue: "Se færre",
+      control: "text",
+      description: "Text for the button",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7567-80202&mode=design&t=eZs7Tgx4a1ebZQiO-4",
+    },
+  },
+} as ComponentMeta<typeof FilteredEventList>;
+
+const Template: ComponentStory<typeof FilteredEventList> = (args) => (
+  <FilteredEventList {...args} />
+);
+
+export const FilteredList = Template.bind({});
diff --git a/src/stories/Library/filtered-event-list/FilteredEventListData.tsx b/src/stories/Library/filtered-event-list/FilteredEventListData.tsx
@@ -0,0 +1,59 @@
+import { ContentListItemProps } from "../content-list-item/ContentListItem";
+import ImageCredited from "../image-credited/ImageCredited";
+
+const FilteredListData: ContentListItemProps[] = [
+  {
+    image: (
+      <ImageCredited src="https://images.unsplash.com/photo-1549277513-f1b32fe1f8f5?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    ),
+    tagText: "Foredrag",
+    title: "Kunst og kultur i middelalderen",
+    description: "En dybdegåendenalysef kunst og kultur i middelalderen.",
+    location: "Kulturhuset",
+    price: "50 - 100 KR",
+    href: "/",
+    date: "2023-01-10",
+    time: "15:00 - 17:00",
+  },
+  {
+    image: (
+      <ImageCredited src="https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    ),
+    tagText: "arrangement",
+    title: "Fars Legestue",
+    description: "Kom forbi til hygge i Fars Legestue",
+    location: "Hovedbiblioteket",
+    price: "60 KR",
+    href: "/",
+    date: "2023-01-12",
+    time: "18:00 - 20:00",
+  },
+  {
+    image: (
+      <ImageCredited src="https://images.unsplash.com/photo-1549277513-f1b32fe1f8f5?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    ),
+    tagText: "arrangement",
+    title: "Fars Legestue",
+    description: "Kom forbi til hygge i Fars Legestue",
+    location: "Hovedeblibloteket",
+    price: "60 KR",
+    href: "/",
+    date: "2023-01-13",
+    time: "18:00 - 20:00",
+  },
+  {
+    image: (
+      <ImageCredited src="https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+    ),
+    tagText: "arrangement",
+    title: "Fars Legestue",
+    description: "Kom forbi til hygge i Fars Legestue",
+    location: "Hovedeblibloteket",
+    price: "60 KR",
+    href: "/",
+    date: "2023-01-14",
+    time: "18:00 - 20:00",
+  },
+];
+
+export default FilteredListData;
diff --git a/src/stories/Library/filtered-event-list/FilteredEventlist.tsx b/src/stories/Library/filtered-event-list/FilteredEventlist.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect } from "react";
+import {
+  ContentListItem,
+  ContentListItemProps,
+} from "../content-list-item/ContentListItem";
+
+interface PromoteEventsListProps {
+  title: string;
+  events: ContentListItemProps[];
+  buttonText: string;
+  buttonShowLessText?: string;
+}
+
+const PromoteEventsList: React.FC<PromoteEventsListProps> = ({
+  title,
+  events,
+  buttonText,
+  buttonShowLessText,
+}) => {
+  useEffect(() => {
+    require("../../utils/show-more");
+  }, []);
+
+  return (
+    <div className="filtered-event-list" data-show-more-list-wrapper>
+      <h2 className="filtered-event-list__heading">{title}</h2>
+      <ul
+        className="filtered-event-list__list"
+        data-show-more-list
+        data-initial-visible-items="2"
+        data-hide-list-button-after-expand="false"
+        data-show-more-list-id="filtered-event-list"
+      >
+        {events.map((event) => (
+          <li className="filtered-event-list__list-item" data-show-more-item>
+            <ContentListItem {...event} />
+          </li>
+        ))}
+      </ul>
+      <button
+        className="filtered-event-list__button btn-primary btn-outline btn-medium"
+        type="button"
+        data-show-more-button
+        data-show-more-text={buttonText}
+        data-show-less-text={buttonShowLessText}
+      >
+        {buttonText}
+      </button>
+    </div>
+  );
+};
+export default PromoteEventsList;
diff --git a/src/stories/Library/filtered-event-list/filtered-event-list.scss b/src/stories/Library/filtered-event-list/filtered-event-list.scss
@@ -0,0 +1,28 @@
+.filtered-event-list {
+  @include layout-container($layout__max-width--medium);
+}
+.filtered-event-list__heading {
+  @include typography($typo__h2);
+  margin-bottom: $s-xl;
+}
+.filtered-event-list__list-item {
+  border-bottom: 1px solid $color__global-tertiary-1;
+
+  &--hidden {
+    display: none;
+  }
+
+  &:first-child {
+    border-top: 1px solid $color__global-tertiary-1;
+  }
+}
+
+.filtered-event-list__button {
+  width: min-content;
+  margin: 0 auto;
+  margin-top: $s-xl;
+
+  &--hidden {
+    display: none;
+  }
+}
diff --git a/src/stories/Library/recommended-material/RecommendedMaterial.tsx b/src/stories/Library/recommended-material/RecommendedMaterial.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { ButtonFavourite } from "../Buttons/button-favourite/ButtonFavourite";
 import Cover from "../cover/Cover";
 
@@ -22,9 +23,9 @@ export const RecommendedMaterial: React.FC<RecommendedMaterialProps> = ({
 }) => {
   return (
     <div
-      className={`recommended-material ${
-        partOfGrid && "recommended-material--in-grid "
-      }`}
+      className={clsx("recommended-material", {
+        "recommended-material--in-grid": partOfGrid,
+      })}
     >
       <div className="recommended-material__icon">
         <ButtonFavourite fill={favoriteFill} />

diff --git a/src/stories/Library/recommended-material/recommended-material-skeleton.scss b/src/stories/Library/recommended-material/recommended-material-skeleton.scss
@@ -6,7 +6,7 @@
   }
 
   .ssc-square.image-square {
-    height: 216px;
+    height: 100%;
     aspect-ratio: 0.79;
     width: auto;
     justify-self: center;
@@ -16,8 +16,11 @@
     display: flex;
     flex-direction: column;
     gap: 5px;
-  }
-  .ssc-line {
-    width: 60%;
+    margin-top: 12px;
+
+    .ssc-line {
+      width: 60%;
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/src/stories/Library/recommended-material/recommended-material.scss b/src/stories/Library/recommended-material/recommended-material.scss
@@ -1,29 +1,29 @@
-// MATERIAL_LARGE_DESKTOP is equivalent to the one being used in cover.scss
-$MATERIAL_LARGE_DESKTOP: 216px;
+// MATERIAL_LARGE_DESKTOP & MATERIAL_MEDIUM_MOBILE are variables
+// taken from the cover.scss file.
+// Aspect ratio is equal the defined cover value of large in cover.scss.
+$cover_height_small: $MATERIAL_MEDIUM_MOBILE;
+$cover_height_large: $MATERIAL_LARGE_DESKTOP;
+$cover_aspect_ratio: 0.79;
 $_recommended-material-max-height: 432px;
 $_recommended-material-max-width: 378px;
-$_aspect-ratio-mobile: 285 / 320;
-// stylelint-disable-next-line
-$_aspect-ratio-desktop: $_recommended-material-max-width /
-  $_recommended-material-max-height;
-$_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
 
 .recommended-material {
   background-color: $color__global-secondary;
   max-height: $_recommended-material-max-height;
   width: 100%;
+  height: 100%;
   padding: $s-md;
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto;
+  grid-auto-rows: auto $cover_height_large auto;
   row-gap: $s-lg;
   justify-items: center;
   align-items: center;
-  aspect-ratio: $_aspect-ratio-mobile;
+  align-content: space-between;
+  aspect-ratio: 0.79;
 
   @include media-query__small {
     padding: $s-lg;
-    aspect-ratio: $_aspect-ratio-desktop;
     max-width: $_recommended-material-max-width;
   }
 }
@@ -35,6 +35,7 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
 
 .recommended-material__texts {
   justify-self: start;
+  align-self: baseline;
 }
 
 .recommended-material__description,
@@ -53,13 +54,13 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
 .recommended-material--in-grid {
   max-width: unset;
   border: 1px solid $color__global-tertiary-1;
+  aspect-ratio: unset;
 
+  grid-template-rows: min-content $cover_height_small 1fr;
   > .cover {
     height: 100%;
-    max-height: $MATERIAL_LARGE_DESKTOP;
-    @include media-query__medium {
-      height: $MATERIAL_LARGE_DESKTOP;
-      max-height: unset;
-    }
+  }
+  @include media-query__small {
+    grid-template-rows: min-content $cover_height_large 1fr;
   }
 }
diff --git a/src/stories/Library/tag/tag-list/TagList.tsx b/src/stories/Library/tag/tag-list/TagList.tsx
@@ -17,8 +17,13 @@ const TagList: FC<TagListProps> = ({ tags }) => {
   return (
     <>
       {tags.length > 1 && (
-        <div data-show-more-list className="tag-list">
-          <ul>
+        <div data-show-more-list-wrapper className="tag-list">
+          <ul
+            data-show-more-list
+            data-initial-visible-items="3"
+            data-hide-list-button-after-expand="false"
+            data-show-more-list-id="tag-list"
+          >
             {tags.map((tag, index) => (
               <li data-show-more-item>
                 <Tag key={index} hasBackground size="large">
@@ -31,6 +36,8 @@ const TagList: FC<TagListProps> = ({ tags }) => {
             className="tag tag--fill cursor-pointer"
             aria-expanded="false"
             data-show-more-button
+            data-show-more-text="..."
+            data-show-less-text="-"
           >
             ...
           </button>