Merge pull request danskernesdigitalebibliotek#117 from reload/feature/reviews

Adamik10 · web-flow · commit a32d9eda1a17 · 2022-08-05T11:26:30.000+02:00
Merge feature/reviews into release/3
diff --git a/base.scss b/base.scss
@@ -68,6 +68,7 @@
 @import "./src/stories/Library/search-result-page/search-result-pager";
 @import "./src/stories/Library/search-result-page/search-result-title";
 @import "./src/stories/Library/search-result-page/search-result-zero";
+@import "./src/stories/Library/review/review";
 @import "./src/stories/Library/shadows/shadows";
 
 // Blocks
diff --git a/public/icons/basic/icon-heart-filled.svg b/public/icons/basic/icon-heart-filled.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 20L10.2675 18.921C5.89 15.1035 3 12.5858 3 9.49591C3 6.9782 5.057 5 7.675 5C9.154 5 10.5735 5.66213 11.5 6.70845C12.4265 5.66213 13.846 5 15.325 5C17.943 5 20 6.9782 20 9.49591C20 12.5858 17.11 15.1035 12.7325 18.9292L11.5 20Z" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/public/icons/basic/icon-heart-grey.svg b/public/icons/basic/icon-heart-grey.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 20L10.2675 18.921C5.89 15.1035 3 12.5858 3 9.49591C3 6.9782 5.057 5 7.675 5C9.154 5 10.5735 5.66213 11.5 6.70845C12.4265 5.66213 13.846 5 15.325 5C17.943 5 20 6.9782 20 9.49591C20 12.5858 17.11 15.1035 12.7325 18.9292L11.5 20Z" stroke="#484848" stroke-width="2"/>
+</svg>
diff --git a/src/stories/Blocks/material-page/MaterialPage.tsx b/src/stories/Blocks/material-page/MaterialPage.tsx
@@ -6,6 +6,7 @@ import ListDescription, {
 import fakeData from "../../Library/Lists/list-description/ListDescriptionFakeData";
 import MaterialDescription from "../../Library/material-description/MaterialDescription";
 import MaterialHeader from "../../Library/material-header/MaterialHeader";
+import { Review } from "../../Library/review/Review";
 import { MaterialMainfestationItem } from "../material-manifestation-item/MaterialMainfestationItem";
 
 export interface MaterialPageProps {
@@ -50,7 +51,15 @@ const MaterialPage: React.FC<MaterialPageProps> = ({
         <ListDescription data={fakeData as ListData} className="pl-80 pb-48" />
       </Disclosure>
       <Disclosure headline="Anmeldelser" icon="Create">
-        Content
+        <Review
+          numberOfReviews={1}
+          meta="Meta headline"
+          hearts={3}
+          headline="Headline"
+          body="Body text of the review..."
+          linkText="Link to review"
+          linkLink="/"
+        />
       </Disclosure>
     </div>
   );
diff --git a/src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx b/src/stories/Blocks/status-userprofile/statusUserprofile.stories.tsx
@@ -37,6 +37,7 @@ export default {
           },
           title: "Afleveret for sent",
           showDot: true,
+          href: "/",
         },
         {
           label: {
@@ -49,6 +50,7 @@ export default {
           },
           title: "Afleveres snart",
           showDot: true,
+          href: "/",
         },
         {
           number: {
@@ -57,6 +59,7 @@ export default {
           },
           title: "Længere afleveringstid",
           showDot: false,
+          href: "/",
         },
       ],
     },
@@ -84,6 +87,7 @@ export default {
           },
           title: "Klar til dig",
           showDot: true,
+          href: "/",
         },
         {
           number: {
@@ -92,6 +96,7 @@ export default {
           },
           title: "Stadig i kø",
           showDot: false,
+          href: "/",
         },
       ],
     },
diff --git a/src/stories/Blocks/status-userprofile/statusUserprofile.tsx b/src/stories/Blocks/status-userprofile/statusUserprofile.tsx
@@ -30,6 +30,7 @@ export const StatusUserprofile = (props: StatusUserprofileProps) => {
                 number={item.number}
                 label={item.label}
                 showDot={item.showDot}
+                href={item.href}
               />
             </div>
           ))
@@ -51,6 +52,7 @@ export const StatusUserprofile = (props: StatusUserprofileProps) => {
                 number={item.number}
                 label={item.label}
                 showDot={item.showDot}
+                href={item.href}
               />
             </div>
           ))
diff --git a/src/stories/Library/Buttons/button/Button.tsx b/src/stories/Library/Buttons/button/Button.tsx
@@ -8,6 +8,7 @@ export type ButtonProps = {
   size: "large" | "medium" | "small" | "xsmall";
   variant: "outline" | "filled";
   onClick?: () => void;
+  classNames?: string;
 };
 
 export const Button: React.FC<ButtonProps> = ({
@@ -18,6 +19,7 @@ export const Button: React.FC<ButtonProps> = ({
   size,
   variant,
   onClick,
+  classNames,
 }) => {
   const iconClassName = `btn-icon ${collapsible ? "btn-collapsible" : ""}`;
 
@@ -62,7 +64,7 @@ export const Button: React.FC<ButtonProps> = ({
   return (
     <button
       type="button"
-      className={`btn-primary ${getVariant()} ${getSize()} arrow__hover--right-small`}
+      className={`btn-primary ${getVariant()} ${getSize()} arrow__hover--right-small ${classNames}`}
       disabled={disabled}
       onClick={onClick}
     >
diff --git a/src/stories/Library/Forms/checkbox/checkbox.scss b/src/stories/Library/Forms/checkbox/checkbox.scss
@@ -22,7 +22,7 @@
   transform: translate3d(0, 0, 0);
 }
 
-.checkbox__label .checkbox__icon:first-child {
+.checkbox__label .checkbox__icon:first-of-type {
   position: relative;
   flex: 0 0 18px;
   width: 18px;
@@ -33,7 +33,7 @@
   transition: all 0.3s ease;
 }
 
-.checkbox__label .checkbox__icon:first-child svg {
+.checkbox__label .checkbox__icon:first-of-type svg {
   position: absolute;
   top: 3px;
   left: 2px;
@@ -58,12 +58,12 @@
   }
 }
 
-.checkbox__label:hover .checkbox__icon:first-child {
+.checkbox__label:hover .checkbox__icon:first-of-type {
   border-color: $c-text-secondary-gray;
 }
 
 /* stylelint-disable selector-max-compound-selectors */
-.checkbox__input:checked + .checkbox__label .checkbox__icon:first-child {
+.checkbox__input:checked + .checkbox__label .checkbox__icon:first-of-type {
   background: $c-text-secondary-gray;
   border-color: $c-text-secondary-gray;
   animation: zoom-in-out 0.3s ease;
diff --git a/src/stories/Library/material-header/MaterialHeader.tsx b/src/stories/Library/material-header/MaterialHeader.tsx
@@ -72,6 +72,7 @@ const MaterialHeader: React.FC<MaterialHeaderProps> = ({
             disabled={false}
             collapsible={false}
             size="large"
+            classNames="capitalize-all"
           />
           <Button
             label="FIND PÅ HYLDEN"
@@ -80,6 +81,7 @@ const MaterialHeader: React.FC<MaterialHeaderProps> = ({
             disabled={false}
             collapsible={false}
             size="large"
+            classNames="capitalize-all"
           />
         </div>
         {ctaText && <p className="mt-16 text-small-caption">{ctaText}</p>}
diff --git a/src/stories/Library/review/Review.stories.tsx b/src/stories/Library/review/Review.stories.tsx
@@ -0,0 +1,64 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import { Review as ReviewsComp } from "./Review";
+
+export default {
+  title: "Library / Review",
+  component: ReviewsComp,
+  decorators: [withDesign],
+  argTypes: {
+    numberOfReviews: {
+      defaultValue: 1,
+      control: { type: null },
+    },
+    meta: {
+      defaultValue: "Berlingske tidende, 2021.03.19",
+      control: "text",
+    },
+    hearts: {
+      defaultValue: 5,
+    },
+    headline: {
+      defaultValue: "Anmeldelse af: Efterskælv",
+      control: "text",
+    },
+    body: {
+      defaultValue:
+        "Den anerkendte forfatter tager udgangspunkt i sit ægteskabs nøgne efterskælv. Veloplagt, men rystet, byder hun indenfor - også i de mørkeste kamre. Der har aldrig før været en skilsmisse i denne klan....",
+      control: "text",
+    },
+    linkText: {
+      defaultValue: "Berlingske tidende, 2021.03.19",
+      control: "text",
+    },
+    linkLink: {
+      defaultValue: "/",
+      control: "text",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=1030%3A16233",
+    },
+  },
+} as ComponentMeta<typeof ReviewsComp>;
+
+const Template: ComponentStory<typeof ReviewsComp> = (args) => {
+  return <ReviewsComp {...args} />;
+};
+
+export const Single = Template.bind({});
+Single.args = {};
+
+// Show multiple reviews to showcase different spacing
+export const Multiple = Template.bind({});
+Multiple.args = {
+  numberOfReviews: 2,
+  meta: "Berlingske tidende, 2021.03.19",
+  hearts: 2,
+  headline: "Headline",
+  body: "Body text.",
+  linkLink: "/",
+  linkText: "Berlingske tidende, 2021.03.19",
+};
diff --git a/src/stories/Library/review/Review.tsx b/src/stories/Library/review/Review.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+export type ReviewProps = {
+  numberOfReviews: number;
+  meta: string;
+  hearts: 1 | 2 | 3 | 4 | 5 | 6;
+  headline: string;
+  body?: string;
+  linkText: string;
+  linkLink?: string;
+};
+
+export const Review: React.FC<ReviewProps> = ({
+  numberOfReviews,
+  meta,
+  hearts,
+  headline,
+  body,
+  linkText,
+  linkLink,
+}) => {
+  const filledHeartsArray = Array.from({ length: hearts }, (_, i) => i + 1);
+  const emptyHeartsArray = Array.from({ length: 6 - hearts }, (_, i) => i + 1);
+  const reviewsArray = Array.from({ length: numberOfReviews }, (_, i) => i + 1);
+  return (
+    <ul className="reviews">
+      {reviewsArray.map((reviewNumber) => {
+        return (
+          <li className="review text-small-caption" key={reviewNumber}>
+            <div className="review__meta mb-8">{meta}</div>
+            <div
+              className="mb-4"
+              role="figure"
+              aria-label={`Rating of this item is ${hearts} out of 6`}
+            >
+              {filledHeartsArray.map((value) => {
+                return (
+                  <img
+                    key={value}
+                    src="icons/basic/icon-heart-filled.svg"
+                    className="review__heart"
+                    alt=""
+                  />
+                );
+              })}
+              {emptyHeartsArray.map((value) => {
+                return (
+                  <img
+                    key={value}
+                    src="icons/basic/icon-heart-grey.svg"
+                    className="review__heart"
+                    alt=""
+                  />
+                );
+              })}
+            </div>
+            <div className="review__headline mb-8">{headline}</div>
+            {body && <p className="review__body mb-8">{body}</p>}
+            {linkText && (
+              <a href={linkLink} className="link-tag text-small-caption mb-8">
+                {linkText}
+              </a>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default Review;
diff --git a/src/stories/Library/review/review.scss b/src/stories/Library/review/review.scss
@@ -0,0 +1,33 @@
+.reviews {
+  margin: 0 $s-4xl;
+}
+
+.review {
+  margin-bottom: $s-xl;
+  &:last-of-type {
+    margin-bottom: $s-2xl;
+  }
+
+  &__meta {
+    color: $c-text-secondary-gray;
+  }
+
+  &__heart {
+    // Ensure SVG has same height as font despite top whitespace.
+    height: 14px;
+    display: inline-block;
+    margin-right: 2px;
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  &__headline {
+    color: $c-text-secondary-gray;
+  }
+
+  &__body {
+    max-width: 545px;
+    color: $c-text-secondary-gray;
+  }
+}
diff --git a/src/styles/scss/shared.scss b/src/styles/scss/shared.scss
@@ -106,3 +106,11 @@
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
 }
+
+.capitalize-all {
+  text-transform: uppercase;
+}
+
+.capitalize-first:first-letter {
+  text-transform: uppercase;
+}

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`	`transform: translate3d(0, 0, 0);`
`23`	`23`	`}`
`24`	`24`
`25`		`-.checkbox__label .checkbox__icon:first-child {`
	`25`	`+.checkbox__label .checkbox__icon:first-of-type {`
`26`	`26`	`position: relative;`
`27`	`27`	`flex: 0 0 18px;`
`28`	`28`	`width: 18px;`
`@@ -33,7 +33,7 @@`
`33`	`33`	`transition: all 0.3s ease;`
`34`	`34`	`}`
`35`	`35`
`36`		`-.checkbox__label .checkbox__icon:first-child svg {`
	`36`	`+.checkbox__label .checkbox__icon:first-of-type svg {`
`37`	`37`	`position: absolute;`
`38`	`38`	`top: 3px;`
`39`	`39`	`left: 2px;`
`@@ -58,12 +58,12 @@`
`58`	`58`	`}`
`59`	`59`	`}`
`60`	`60`
`61`		`-.checkbox__label:hover .checkbox__icon:first-child {`
	`61`	`+.checkbox__label:hover .checkbox__icon:first-of-type {`
`62`	`62`	`border-color: $c-text-secondary-gray;`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`/* stylelint-disable selector-max-compound-selectors */`
`66`		`-.checkbox__input:checked + .checkbox__label .checkbox__icon:first-child {`
	`66`	`+.checkbox__input:checked + .checkbox__label .checkbox__icon:first-of-type {`
`67`	`67`	`background: $c-text-secondary-gray;`
`68`	`68`	`border-color: $c-text-secondary-gray;`
`69`	`69`	`animation: zoom-in-out 0.3s ease;`