wipw

base.scss

@@ -139,6 +139,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 src/stories/Library/opening-hours-editor/opening-hours-editor.scss:src/styles/css/opening-hours-editor.css src/stories/Library/material-search/material-search.scss:src/styles/css/material-search.css --style compressed",
     "css:watch": "yarn css:build -- --watch",
     "build": "concurrently 'yarn:css:build' --raw",
     "markdown:lint": "markdownlint-cli2",

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

@@ -0,0 +1,20 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import MaterialSearch from "./MaterialSearch";
+
+export default {
+  title: "Library / Find Mig Igen",
+  component: MaterialSearch,
+  argTypes: {
+    workId: {
+      defaultValue: "1",
+      type: "string",
+    },
+  },
+} as ComponentMeta<typeof MaterialSearch>;
+
+const Template: ComponentStory<typeof MaterialSearch> = (args) => (
+  <MaterialSearch {...args} />
+);
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,92 @@
+import { FC, ChangeEvent, useState, useEffect } from "react";
+import clsx from "clsx";
+// Define the props type for the MaterialSearch component
+type MaterialSearchProps = {
+  workId: string;
+};
+
+// Functional component using the FC type from React with defined props
+const MaterialSearch: FC<MaterialSearchProps> = ({ workId }) => {
+  // Handler for changes in the search input
+
+  const [fieldWorkId, setFieldWorkId] = useState<number | null>(null);
+  const [fieldMaterialTypeId, setFieldMaterialTypeId] = useState<number | null>(
+    null
+  );
+
+  useEffect(() => {
+    setFieldWorkId(Math.floor(Math.random() * 1000));
+    setFieldMaterialTypeId(Math.floor(Math.random() * 1000));
+  }, []);
+
+  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+    const SearchInputValue = e.target.value;
+    const hiddenFieldWorkId = document.querySelector(
+      `#material-search__field-work-id--${fieldWorkId}`
+    );
+    const hiddenFieldMaterialTypeId = document.querySelector(
+      `#material-search__field-material-type-id--${fieldMaterialTypeId}`
+    );
+
+    if (hiddenFieldWorkId) {
+      hiddenFieldWorkId.setAttribute("value", SearchInputValue);
+    }
+    console.log("Searching for:", SearchInputValue);
+  };
+
+  return (
+    <div className="material-search">
+      <div className="material-search__hidden-inputs">
+        <div>Work ID for testing: {workId} </div>
+        <label htmlFor={clsx(`material-search__field-work-id--${fieldWorkId}`)}>
+          <input
+            id={clsx(`material-search__field-work-id--${fieldWorkId}`)}
+            type="text"
+            disabled
+          />
+        </label>
+        <label
+          htmlFor={clsx(
+            `material-search__field-material-type-id--${fieldMaterialTypeId}`
+          )}
+        >
+          <input
+            id={clsx(
+              `material-search__field-material-type-id--${fieldMaterialTypeId}`
+            )}
+            type="text"
+            disabled
+          />
+        </label>
+      </div>
+
+      <label className="material-search__label" htmlFor="material-search-input">
+        Søg efter materiale
+        <input
+          id="material-search-input"
+          type="search"
+          placeholder="Enter search terms"
+          onChange={handleSearch}
+          className="material-search__input"
+        />
+      </label>
+
+      <label
+        className="material-search__label"
+        htmlFor="material-type-selector"
+      >
+        Vælg Materiale Type
+        <select
+          id="material-type-selector"
+          className="material-search__selector"
+        >
+          <option value="1">Bog</option>
+          <option value="2">Film</option>
+          <option value="3">Musik</option>
+        </select>
+      </label>
+    </div>
+  );
+};
+
+export default MaterialSearch;

src/stories/Library/material-search/material-search.scss

@@ -0,0 +1,67 @@
+$_gin_border_color: #8e929c;
+@import "../../../styles/scss/tools/variables.spacings.scss";
+@import "../../../styles/scss/tools/variables.colors.scss";
+
+.material-search {
+  margin: auto;
+  padding: 2rem;
+  border: 1px solid black;
+  border-radius: 10px;
+  max-width: 550px;
+}
+
+.material-search__label {
+  display: flex;
+  flex-direction: column;
+  gap: $s-md;
+
+  margin-bottom: $s-lg;
+}
+
+.material-search__hidden-inputs {
+  margin-bottom: $s-xl;
+}
+
+.material-search__inputs-container {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: $s-md;
+}
+
+.material-search__preview {
+  display: grid;
+  min-height: 150px;
+  color: $color__global-grey;
+  cursor: not-allowed;
+
+  border: 1px solid $_gin_border_color;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.material-search__preview-placeholder {
+  height: 100%;
+  background-color: $color__global-tertiary-1;
+}
+.material-search__preview-material-content {
+  display: grid;
+}
+.material-search__preview-material {
+  background-color: white;
+
+  display: flex;
+  gap: $s-md;
+  padding: $s-md;
+  align-items: center;
+}
+
+.material-search__input,
+.material-search__selector {
+  border: 1px solid $_gin_border_color;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  height: 100%;
+  font-family: inherit;
+  &:disabled {
+    background-color: $color__global-tertiary-1;
+  }
+}