Merge pull request #737 from danskernesdigitalebibliotek/develop

Release 2024.40.0
danskernesdigitalebibliotek · Oct 1, 2024 · c006877 · c006877
2 parents b108f09 + 1edc0f8
commit c006877
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 26 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -34,7 +34,7 @@ jobs:
       - run: yarn css:build
 
       - name: Publish to Chromatic
-        uses: chromaui/[email protected].2
+        uses: chromaui/[email protected].4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: c6b96f9648b6
diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-webpack-plugin": "^4.2.0",
     "flatpickr": "^4.6.13",
@@ -83,7 +83,7 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-scripts": "^4.0.3",
-    "sass": "^1.79.3",
+    "sass": "^1.79.4",
     "skeleton-screen-css": "^1.1.0",
     "storybook-addon-designs": "^6.2.1",
     "stylelint": "^14.16.1",

diff --git a/src/stories/Blocks/advanced-search/AdvancedSearch.tsx b/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
@@ -7,6 +7,9 @@ import data from "../../Library/card-list-page/SearchResultPageData";
 import { CardListItem } from "../../Library/card-list-item/CardListItem";
 import ResultPager from "../../Library/card-list-page/ResultPager";
 import { ReactComponent as PlusButtonIcon } from "../../../public/icons/collection/PlusButton.svg";
+import Input from "../../Library/Forms/input/Input";
+import { Checkbox } from "../../Library/Forms/checkbox/Checkbox";
+import Textarea from "../../Library/Forms/textarea/Textarea";
 
 export interface AdvancedSearchProps {
   inputPlaceholder: string;
@@ -92,12 +95,34 @@ export const AdvancedSearch: React.FC<AdvancedSearchProps> = ({
         </>
       )}
       {isCqlSearch && (
-        <textarea
-          className="advanced-search__cql-input focus-styling__input"
-          cols={100}
-          rows={5}
-          placeholder="e.g. title=snemand*"
-        />
+        <form className="advanced-search-cql-form">
+          <Textarea
+            id="cql"
+            name="name"
+            label="CQL"
+            className="advanced-search-cql-form__input focus-styling__input"
+            cols={100}
+            rows={5}
+            placeholder="e.g. 'harry potter'"
+          />
+          <Input
+            label="Location"
+            type="text"
+            id="location"
+            description="Add a comma separated list for multiple locations"
+          />
+          <Input
+            label="Sublocation"
+            type="text"
+            id="sublocation"
+            description="Add a comma separated list for multiple sublocations"
+          />
+          <Checkbox
+            isChecked={false}
+            hiddenLabel={false}
+            label=" Holding Status On Shelf"
+          />
+        </form>
       )}
       <footer className="advanced-search__footer">
         {isCqlSearch && (

diff --git a/src/stories/Blocks/advanced-search/advanced-search.scss b/src/stories/Blocks/advanced-search/advanced-search.scss
@@ -94,18 +94,26 @@
     margin: $s-2xl 0;
     width: 100%;
   }
+}
 
-  &__cql-input {
-    @include typography($typo__body-placeholder);
-    border: solid 1px $color__global-tertiary-1;
-    width: 100%;
-    margin-bottom: 46px;
-    padding: $s-md;
-    resize: none;
-    background-color: $color__global-primary;
+.advanced-search-cql-form {
+  display: grid;
+  gap: $s-lg;
+  @include media-query__small {
+    gap: $s-xl;
   }
 }
 
+.advanced-search-cql-form__input {
+  @include typography($typo__body-placeholder);
+  border: solid 1px $color__global-tertiary-1;
+  width: 100%;
+  height: 100%;
+  padding: $s-md;
+  resize: none;
+  background-color: $color__global-primary;
+}
+
 .input-and-preview {
   display: flex;
   flex-direction: row;

diff --git a/src/stories/Library/Forms/textarea/Textarea.tsx b/src/stories/Library/Forms/textarea/Textarea.tsx
@@ -1,3 +1,4 @@
+import { clsx } from "clsx";
 import { FC } from "react";
 import Label from "../label/Label";
 
@@ -7,6 +8,8 @@ export interface TextareaProps {
   label: string;
   rows?: number;
   cols?: number;
+  className?: string;
+  placeholder?: string;
 }
 
 const Textarea: FC<TextareaProps> = ({
@@ -15,12 +18,21 @@ const Textarea: FC<TextareaProps> = ({
   label,
   rows = 8,
   cols = 80,
+  className,
+  placeholder,
 }) => {
   return (
     <div className="dpl-input">
       <Label id={id}>{label}</Label>
       <div>
-        <textarea id={id} name={name} rows={rows} cols={cols} />
+        <textarea
+          className={clsx(className)}
+          id={id}
+          name={name}
+          rows={rows}
+          cols={cols}
+          placeholder={placeholder}
+        />
       </div>
     </div>
   );

diff --git a/src/stories/Library/tag/tag.scss b/src/stories/Library/tag/tag.scss
@@ -1,3 +1,7 @@
+a.tag {
+  @extend %text-inline-link;
+}
+
 .tag {
   color: $color__global-black;
   display: inline-flex;

diff --git a/yarn.lock b/yarn.lock
@@ -7301,10 +7301,10 @@ eslint-plugin-react-hooks@^4.2.0, eslint-plugin-react-hooks@^4.6.2:
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz#c829eb06c0e6f484b3fbb85a97e57784f328c596"
   integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==
 
-eslint-plugin-react@^7.21.5, eslint-plugin-react@^7.36.1:
-  version "7.36.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.36.1.tgz#f1dabbb11f3d4ebe8b0cf4e54aff4aee81144ee5"
-  integrity sha512-/qwbqNXZoq+VP30s1d4Nc1C5GTxjJQjk4Jzs4Wq2qzxFM7dSmuG2UkIjg2USMLh3A/aVcUNrK7v0J5U1XEGGwA==
+eslint-plugin-react@^7.21.5, eslint-plugin-react@^7.37.0:
+  version "7.37.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.0.tgz#c21f64a32fc34df1eaeca571ec8f70bdc40dd20a"
+  integrity sha512-IHBePmfWH5lKhJnJ7WB1V+v/GolbB0rjS8XYVCSQCZKaQCAUhMoVoOEn1Ef8Z8Wf0a7l8KTJvuZg5/e4qrZ6nA==
   dependencies:
     array-includes "^3.1.8"
     array.prototype.findlast "^1.2.5"
@@ -14370,10 +14370,10 @@ sass-loader@^10.0.5:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
-sass@^1.79.3:
-  version "1.79.3"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.79.3.tgz#7811b000eb68195fe51dea89177e73e7ef7f546f"
-  integrity sha512-m7dZxh0W9EZ3cw50Me5GOuYm/tVAJAn91SUnohLRo9cXBixGUOdvmryN+dXpwR831bhoY3Zv7rEFt85PUwTmzA==
+sass@^1.79.4:
+  version "1.79.4"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.79.4.tgz#f9c45af35fbeb53d2c386850ec842098d9935267"
+  integrity sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg==
   dependencies:
     chokidar "^4.0.0"
     immutable "^4.0.0"