Merge pull request #636 from danskernesdigitalebibliotek/DDFFORM-611-…

…backend-anbefalings-komp

DDFFORM 611 backend anbefalings komp

admin-base.scss

@@ -0,0 +1,6 @@
+@import "./src/styles/scss/tools";
+
+// CSS sheets that are used to style the admin interface.
+@import "./src/stories/Library/opening-hours-editor/opening-hours-editor";
+@import "./src/stories/Library/material-search/material-search";
+@import "./src/stories/Library/cover/cover";

base.scss

@@ -143,6 +143,7 @@
 @import "./src/stories/Library/opening-hours/opening-hours-skeleton";
 @import "./src/stories/Library/filtered-event-list/filtered-event-list";
 @import "./src/stories/Library/event-list-stacked/event-list-stacked";
+@import "./src/stories/Library/material-search/material-search";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

package.json

@@ -16,7 +16,7 @@
     "css:lint": "concurrently 'yarn:css:stylelint' 'yarn:css:prettier -- --check' --raw",
     "css:lint:watch": "chokidar 'src/**/*.scss' -c 'yarn css:lint'",
     "css:format": "concurrently 'yarn:css:stylelint -- --fix' 'yarn:css:prettier -- --write' --max-processes 1 --raw",
-    "css:build": "sass base.scss:src/styles/css/base.css wysiwyg.scss:src/styles/css/wysiwyg.css src/stories/Library/opening-hours-editor/opening-hours-editor.scss:src/styles/css/opening-hours-editor.css --style compressed",
+    "css:build": "sass base.scss:src/styles/css/base.css wysiwyg.scss:src/styles/css/wysiwyg.css admin-base.scss:src/styles/css/admin-base.css --style compressed",
     "css:watch": "yarn css:build -- --watch",
     "build": "concurrently 'yarn:css:build' --raw",
     "markdown:lint": "markdownlint-cli2",

src/stories/Library/cover/Cover.tsx

@@ -6,6 +6,7 @@ import { CoverProps } from "./types";
 
 const Cover: FC<CoverProps> = ({
   size,
+  displaySize,
   animate,
   src,
   tint,
@@ -16,11 +17,13 @@ const Cover: FC<CoverProps> = ({
 }) => {
   const [imageLoaded, setImageLoaded] = useState<boolean | null>(null);
 
+  const coverDisplaySize = displaySize || size;
+
   const classes = {
     wrapper: clsx(
       "cover",
-      `cover--size-${size}`,
-      `cover--aspect-${size}`,
+      `cover--size-${coverDisplaySize}`,
+      `cover--aspect-${coverDisplaySize}`,
       imageLoaded || tintClasses[tint || "default"]
     ),
   };

src/stories/Library/cover/cover.scss

@@ -1,3 +1,5 @@
+$MATERIAL_2XSMALL_MOBILE: 52px;
+$MATERIAL_2XSMALL_DESKTOP: 68.5px;
 $MATERIAL_XSMALL_MOBILE: 104px;
 $MATERIAL_XSMALL_DESKTOP: 104px;
 $MATERIAL_SMALL_MOBILE: 104px;
@@ -10,6 +12,14 @@ $MATERIAL_XLARGE_MOBILE: 284px;
 $MATERIAL_XLARGE_DESKTOP: 460px;
 
 .cover--size {
+  &-2xsmall {
+    border-radius: 3px;
+    height: $MATERIAL_2XSMALL_MOBILE;
+    @include media-query__small {
+      height: $MATERIAL_2XSMALL_DESKTOP;
+    }
+  }
+
   &-xsmall {
     border-radius: 3px;
     height: $MATERIAL_XSMALL_MOBILE;
@@ -48,6 +58,10 @@ $MATERIAL_XLARGE_DESKTOP: 460px;
 }
 
 .cover--aspect {
+  &-2xsmall {
+    aspect-ratio: 0.69;
+  }
+
   &-xsmall {
     aspect-ratio: 0.69;
   }

src/stories/Library/cover/types.ts

@@ -1,7 +1,11 @@
+type Sizes = "xsmall" | "small" | "medium" | "large" | "xlarge";
+type DisplaySizes = "2xsmall" | Sizes;
+
 export type CoverProps = {
   src: string;
   animate: boolean;
-  size: "xsmall" | "small" | "medium" | "large" | "xlarge";
+  size: Sizes;
+  displaySize?: DisplaySizes;
   tint?: "20" | "40" | "80" | "100" | "120";
   coverUrl?: string;
   alt?: string;

src/stories/Library/material-search/MaterialSearch.stories.tsx

@@ -0,0 +1,51 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import MaterialSearch from "./MaterialSearch";
+
+export default {
+  title: "Library / Material Search",
+  component: MaterialSearch,
+  argTypes: {},
+} as ComponentMeta<typeof MaterialSearch>;
+
+const uniqueIdentifier = Math.floor(Math.random() * 10000);
+
+const Template: ComponentStory<typeof MaterialSearch> = () => {
+  return (
+    <div className="material-search">
+      <div className="material-search__inputs-container">
+        <label
+          className="material-search__label"
+          htmlFor="hidden-work-id-input"
+        >
+          Hidden Work ID field
+          <input
+            data-field-input-work-id={uniqueIdentifier}
+            id="hidden-work-id-input"
+            type="text"
+            placeholder=""
+            className="material-search__input"
+            disabled
+          />
+        </label>
+        <label
+          className="material-search__label"
+          htmlFor="hidden-material-type-input"
+        >
+          Hidden Material Type field
+          <input
+            type="text"
+            id="hidden-material-type-input"
+            data-field-input-material-type-id={uniqueIdentifier}
+            className="material-search__input"
+            disabled
+          />
+        </label>
+      </div>
+
+      <MaterialSearch />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});

src/stories/Library/material-search/MaterialSearch.tsx

@@ -0,0 +1,35 @@
+import { FC, useState } from "react";
+import MaterialSearchInputs from "./MaterialSearchInputs";
+import MaterialSearchPreview from "./MaterialSearchPreview";
+import MaterialSearchList from "./MaterialSearchList";
+import { PreviewData } from "./MaterialSearchExampleData";
+
+const MaterialSearch: FC = () => {
+  const [searchInput, setSearchInput] = useState("");
+  const [selectedMaterialType, setSelectedMaterialType] = useState("");
+  const [selectedWorkId] = useState(PreviewData.workId);
+
+  const handleSetSearchInput = (value: string) => {
+    setSearchInput(value);
+  };
+
+  return (
+    <div className="material-search">
+      <MaterialSearchInputs
+        searchInput={searchInput}
+        setSearchInput={handleSetSearchInput}
+        selectedMaterialType={selectedMaterialType}
+        onMaterialTypeChange={setSelectedMaterialType}
+      />
+      <div className="material-search__materials-wrapper">
+        <MaterialSearchPreview displayMaterial={searchInput.length > 1} />
+        <MaterialSearchList
+          showListResults={searchInput.length > 1}
+          selectedWorkId={selectedWorkId}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MaterialSearch;

src/stories/Library/material-search/MaterialSearchExampleData.ts

@@ -0,0 +1,69 @@
+export const MaterialTypes = [
+  "bog",
+  "artikel",
+  "tidsskrift",
+  "lydbog",
+  "film",
+  "musik",
+  "spil",
+];
+
+export interface PreviewDataProps {
+  coverUrl: string;
+  title: string;
+  author: string;
+  publicationYear: number;
+  source: string;
+  workId: string;
+}
+export const PreviewData: PreviewDataProps = {
+  coverUrl: "images/book_cover_6.jpg",
+  title: "Rødhals",
+  author: "Jo Nesbø",
+  publicationYear: 2022,
+  source: "eReolen",
+  workId: "work-of:800010-katalog:99122475830405763",
+};
+
+export const ListResultData: PreviewDataProps[] = [
+  {
+    coverUrl: "images/book_cover_3.jpg",
+    title: "Book Title 3",
+    author: "Author 3",
+    publicationYear: 2019,
+    source: "Library",
+    workId: "work-of:800010-katalog:98432897",
+  },
+  {
+    coverUrl: "images/book_cover_2.jpg",
+    title: "Book Title 2",
+    author: "Author 2",
+    publicationYear: 2020,
+    source: "eReolen",
+    workId: "work-of:800010-katalog:2389129",
+  },
+  {
+    coverUrl: "images/book_cover_6.jpg",
+    title: "Rødhals",
+    author: "Jo Nesbø",
+    publicationYear: 2022,
+    source: "eReolen",
+    workId: "work-of:800010-katalog:99122475830405763",
+  },
+  {
+    coverUrl: "images/book_cover_4.jpg",
+    title: "Book Title 4",
+    author: "Author 4",
+    publicationYear: 2018,
+    source: "eReolen",
+    workId: "work-of:800010-katalog:9778817",
+  },
+  {
+    coverUrl: "images/book_cover_5.jpg",
+    title: "Book Title 5",
+    author: "Author 5",
+    publicationYear: 2017,
+    source: "Library",
+    workId: "work-of:800010-katalog:2093",
+  },
+];

src/stories/Library/material-search/MaterialSearchInputs.tsx

@@ -0,0 +1,55 @@
+import { MaterialTypes } from "./MaterialSearchExampleData";
+
+interface MaterialSearchInputsProps {
+  searchInput: string;
+  selectedMaterialType: string;
+  setSearchInput: (value: string) => void;
+  onMaterialTypeChange: (value: string) => void;
+}
+
+const MaterialSearchInputs = ({
+  searchInput,
+  selectedMaterialType,
+  setSearchInput,
+  onMaterialTypeChange,
+}: MaterialSearchInputsProps) => {
+  return (
+    <div className="material-search__inputs-container">
+      <label className="material-search__label" htmlFor="material-search-input">
+        Search for materials
+        <input
+          id="material-search-input"
+          type="search"
+          value={searchInput}
+          onChange={(e) => setSearchInput(e.target.value)}
+          placeholder="Enter search terms"
+          className="material-search__input"
+        />
+      </label>
+      <label
+        className="material-search__label"
+        htmlFor="material-type-selector"
+      >
+        Choose material type
+        <select
+          id="material-type-selector"
+          className="material-search__selector"
+          disabled={!searchInput}
+          onChange={(e) => onMaterialTypeChange(e.target.value)}
+          value={selectedMaterialType || ""}
+        >
+          <option value="" disabled>
+            -- Choose material type --
+          </option>
+          {MaterialTypes.map((materialType: string) => (
+            <option key={materialType} value={materialType}>
+              {materialType}
+            </option>
+          ))}
+        </select>
+      </label>
+    </div>
+  );
+};
+
+export default MaterialSearchInputs;