Merge pull request danskernesdigitalebibliotek#207 from itk-dev/feature/5409-favorites-list-material-component

Feature/5409-favorites-list-material-component

Author: jeppekroghitk

base.scss

@@ -92,6 +92,7 @@
 @import "./src/stories/Library/Lists/list-intermediates/list-intermediates";
 @import "./src/stories/Library/instant-loan/instant-loan";
 @import "./src/stories/Library/scroll-lock-background/scroll-lock-background";
+@import "./src/stories/Library/favorites-list-material-component/favorites-list-material-component";
 
 // Blocks
 @import "./src/stories/Blocks/footer/footer";

src/stories/Library/cover/Cover.tsx

@@ -28,7 +28,13 @@ const Cover: FC<CoverProps> = ({
     // Images inside links must have an non-empty alt text to meet accessibility requirements.
     // Only render the cover as a link if we have both an url and a description.
     return (
-      <a className={classes.wrapper} href={coverUrl}>
+      <a
+        className={classes.wrapper}
+        href={coverUrl}
+        aria-label="cover aria label"
+        aria-labelledby="cover labelled by"
+        title="cover title text"
+      >
         <CoverImage
           setImageLoaded={() => setImageLoaded(true)}
           src={src}

src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss

@@ -0,0 +1,105 @@
+.favorites-list-mc {
+  background-color: $c-global-tertiary-2;
+  color: $c-text-primary-white;
+  border-color: $c-text-secondary-gray;
+
+  @include breakpoint-m {
+    padding: $s-6xl;
+  }
+
+  &--bright {
+    background-color: $c-global-primary;
+    color: $c-text-primary-black;
+    border-color: $c-global-tertiary-1;
+
+    @include breakpoint-m {
+      padding: $s-6xl;
+    }
+  }
+
+  &__title {
+    text-align: center;
+    padding: $s-lg;
+
+    &--left {
+      text-align: left;
+    }
+
+    @include breakpoint-m {
+      padding-bottom: $s-6xl;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: end;
+    margin-bottom: $s-md;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: 50% 50%;
+
+    @include breakpoint-m {
+      grid-template-columns: 25% 25% 25% 25%;
+    }
+  }
+}
+
+.favorites-list-mc-material {
+  border: 1px solid $c-text-secondary-gray;
+  padding: $s-xl;
+  display: flex;
+  width: 100%;
+  position: relative;
+  height: 350px;
+
+  &--bright {
+    border: 1px solid $c-global-tertiary-1;
+  }
+
+  &__favourite {
+    position: absolute;
+    top: $s-sm;
+    right: $s-sm;
+  }
+
+  &__cover-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-top: $s-sm;
+  }
+
+  &__meta {
+    position: absolute;
+    left: $s-sm;
+    bottom: $s-sm;
+    width: 100%;
+    padding-right: $s-sm;
+  }
+
+  &__title {
+    @extend %text-body-medium-regular-placeholder;
+    text-decoration: none;
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__author {
+    @extend %text-body-medium-regular-placeholder;
+    font-weight: 500;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: inherit;
+  }
+}

src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx

@@ -0,0 +1,49 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import FavoritesListMaterialComponent from "./favorites-list-material-component";
+
+export default {
+  title: "Library / Favorites list material-component",
+  component: FavoritesListMaterialComponent,
+  argTypes: {
+    title: {
+      control: "text",
+      defaultValue: "Din favoritliste",
+    },
+    bright: {
+      control: { type: "boolean" },
+      defaultValue: true,
+    },
+    recommenderData: {
+      control: "object",
+      defaultValue: [
+        {
+          title: "Ella Fitzgerald",
+          authors: "Af Isabel Sánchez Vegara",
+          filled: true,
+        },
+        {
+          title: "Ella Fitzgerald",
+          authors: "Af Isabel Sánchez Vegara",
+          filled: true,
+        },
+        {
+          title: "Ella Fitzgerald",
+          authors: "Af Isabel Sánchez Vegara",
+          filled: true,
+        },
+        {
+          title: "Ella Fitzgerald",
+          authors: "Af Isabel Sánchez Vegara",
+          filled: true,
+        },
+      ],
+    },
+  },
+} as ComponentMeta<typeof FavoritesListMaterialComponent>;
+
+const Template: ComponentStory<typeof FavoritesListMaterialComponent> = (
+  args
+) => <FavoritesListMaterialComponent {...args} />;
+
+export const FavoritesList = Template.bind({});
+FavoritesList.args = {};

src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx

@@ -0,0 +1,76 @@
+import Cover from "../cover/Cover";
+import { ReactComponent as SvgIcon } from "../Icons/icon-favourite/icon-favourite.svg";
+
+export type RecommenderData = {
+  title: string;
+  authors: string;
+  filled: boolean;
+};
+export type RecommenderProps = {
+  recommenderData: RecommenderData[];
+  title: string;
+  bright: boolean;
+};
+
+const FavoritesListMaterialComponent: React.FC<RecommenderProps> = ({
+  recommenderData,
+  title,
+  bright,
+}) => {
+  return (
+    <div
+      className={`favorites-list-mc ${
+        bright ? "favorites-list-mc--bright" : ""
+      }`}
+    >
+      <h3 className="text-header-h3 recommender__title--left">{title}</h3>
+      <div className="favorites-list-mc__buttons">
+        <button
+          type="button"
+          className={`button-link ${bright ? "button-link--bright" : ""}`}
+        >
+          Gå til dine favoritter
+        </button>
+      </div>
+      <ul className="favorites-list-mc__grid">
+        {recommenderData.map(({ title: recTitle, filled, authors }) => (
+          <li
+            className={`favorites-list-mc-material ${
+              bright ? "`favorites-list-mc-material--bright" : ""
+            }`}
+          >
+            <div className="favorites-list-mc-material__favourite">
+              <div className="button-favourite button-favourite">
+                <SvgIcon
+                  className={`icon-favourite icon-favourite${
+                    !bright ? "--bright" : ""
+                  } ${
+                    filled
+                      ? `icon-favourite--${!bright ? "bright-" : ""}filled`
+                      : ""
+                  }`}
+                />
+              </div>
+            </div>
+            <div className="favorites-list-mc-material__cover-container">
+              <Cover
+                src="images/book_cover_3.jpg"
+                size="medium"
+                animate={false}
+                tint="120"
+              />
+            </div>
+            <div className="favorites-list-mc-material__meta">
+              <a className="favorites-list-mc-material__title">{recTitle}</a>
+              <div className="favorites-list-mc-material__author">
+                {authors}
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default FavoritesListMaterialComponent;

src/stories/Library/scroll-lock-background/scroll-lock-background.scss

@@ -1,4 +1,4 @@
 .scroll-lock-background {
-  overflow: "hidden";
-  height: "100vh";
+  overflow: hidden;
+  height: 100vh;
 }