Merge pull request #243 from reload/feature/advanced-search

Feature/advanced search

base.scss

@@ -93,6 +93,8 @@
 @import "./src/stories/Library/Lists/fee-list/fee-list";
 @import "./src/stories/Library/instant-loan/instant-loan";
 @import "./src/stories/Library/scroll-lock-background/scroll-lock-background";
+@import "./src/stories/Library/multiselect/multiselect";
+@import "./src/stories/Library/input-with-dropdown/input-with-dropdown";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";
@@ -106,6 +108,7 @@
 @import "./src/stories/Blocks/status-loans/status-loans";
 @import "./src/stories/Blocks/status-userprofile/status-userprofile";
 @import "./src/stories/Blocks/material-manifestation-item/material-manifestation-item";
+@import "./src/stories/Blocks/advanced-search/advanced-search";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";

src/stories/Blocks/advanced-search/AdvancedSearch.stories.tsx

@@ -0,0 +1,52 @@
+import { ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import {
+  AdvancedSearch as AdvancedSearchComp,
+  AdvancedSearchProps,
+} from "./AdvancedSearch";
+
+export default {
+  title: "Blocks / Advanced Search",
+  component: AdvancedSearchComp,
+  decorators: [withDesign],
+  argTypes: {
+    inputPlaceholder: {
+      name: "Input placeholder",
+      defaultValue: "Søgeterm",
+      control: { type: "text" },
+    },
+    inputAmount: {
+      name: "Amount of input rows",
+      defaultValue: 2,
+      control: { type: "number" },
+    },
+    cqlPreviewText: {
+      name: "CQL preview text",
+      defaultValue:
+        "title = harry potter AND subtitle = and the philosophers stone",
+      control: { type: "text" },
+    },
+    isCqlSearch: {
+      name: "Is CQL search?",
+      defaultValue: false,
+      control: { type: "boolean" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=9759%3A31313&mode=design&t=G77riF8Vp9iyZ7pP-1",
+    },
+  },
+};
+
+const Template: ComponentStory<typeof AdvancedSearchComp> = (
+  args: AdvancedSearchProps
+) => <AdvancedSearchComp {...args} />;
+
+export const AdvancedSearch = Template.bind({});
+
+export const CqlSearch = Template.bind({});
+CqlSearch.args = {
+  isCqlSearch: true,
+};

src/stories/Blocks/advanced-search/AdvancedSearch.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import { InputWithDropdown } from "../../Library/input-with-dropdown/InputWithDropdown";
+import { Multiselect } from "../../Library/multiselect/Multiselect";
+import { Button } from "../../Library/Buttons/button/Button";
+import InputPreview from "../../Library/input-preview/InputPreview";
+import data from "../../Library/card-list-page/CardListPageData";
+import { CardListItem } from "../../Library/card-list-item/CardListItem";
+import ResultPager from "../../Library/card-list-page/ResultPager";
+
+export interface AdvancedSearchProps {
+  inputPlaceholder: string;
+  inputAmount: number;
+  cqlPreviewText: string;
+  isCqlSearch: boolean;
+}
+
+export const AdvancedSearch: React.FC<AdvancedSearchProps> = ({
+  inputPlaceholder,
+  inputAmount,
+  cqlPreviewText,
+  isCqlSearch,
+}) => {
+  return (
+    <div className="advanced-search">
+      <h1 className="text-header-h2 advanced-search__title capitalize-first">
+        {isCqlSearch ? "CQL søgning" : "Avanceret søgning"}
+      </h1>
+      {!isCqlSearch && (
+        <>
+          <div className="input-and-preview">
+            <div className="input-and-preview__input">
+              <InputWithDropdown inputPlaceholder={inputPlaceholder} />
+              {Array(inputAmount - 1)
+                .fill(0)
+                .map(() => {
+                  return (
+                    <>
+                      <div className="advanced-search__clauses">
+                        <button className="advanced-search__clause focus-styling">
+                          OG
+                        </button>
+                        <button className="advanced-search__clause advanced-search__clause--grey focus-styling">
+                          ELLER
+                        </button>
+                        <button className="advanced-search__clause advanced-search__clause--grey focus-styling">
+                          IKKE
+                        </button>
+                      </div>
+                      <InputWithDropdown inputPlaceholder={inputPlaceholder} />
+                    </>
+                  );
+                })}
+              <button className="advanced-search__clauses">
+                <img
+                  className="mr-8"
+                  src="icons/collection/PlusButton.svg"
+                  alt="Plus button icon"
+                />
+                Tilføj ny linje
+              </button>
+            </div>
+            <InputPreview cqlPreviewText={cqlPreviewText} />
+          </div>
+          <section className="advanced-search__filters">
+            {Array(3)
+              .fill(0)
+              .map((item, index) => {
+                return (
+                  <div
+                    className="advanced-search__filter"
+                    key={`${item}${index}`}
+                  >
+                    <Multiselect
+                      options={["Mulighed 1", "Mulighed 2", "Mulighed 3"]}
+                      withCaption
+                      isOpen={index === 0}
+                    />
+                  </div>
+                );
+              })}
+          </section>
+          <InputPreview cqlPreviewText={cqlPreviewText} isMobile />
+        </>
+      )}
+      {isCqlSearch && (
+        <textarea
+          className="advanced-search__cql-input focus-styling__input"
+          cols={100}
+          rows={5}
+          placeholder="e.g. title=snemand*"
+        />
+      )}
+      <footer className="advanced-search__footer">
+        {isCqlSearch && (
+          <button className="link-tag advanced-search__back-button">
+            Til avanceret søgning
+          </button>
+        )}
+        <Button
+          size="xlarge"
+          label="Søg"
+          buttonType="none"
+          variant="filled"
+          collapsible={false}
+          disabled={false}
+          classNames="advanced-search__search-button"
+        />
+      </footer>
+      <div className="advanced-search__divider" />
+      <section>
+        <h2 className="text-header-h2 advanced-search__title capitalize-first">
+          Viser materialer (20)
+        </h2>
+        <button className="link-tag mb-16">Link til søgninget</button>
+        <div className="card-list-page__list my-32">
+          {data.searchResult.map((item, i) => {
+            return <CardListItem {...item} tintIndex={i} />;
+          })}
+        </div>
+        <ResultPager currentResults={10} totalResults={20} />
+      </section>
+    </div>
+  );
+};
+
+export default {};

src/stories/Blocks/advanced-search/advanced-search.scss

@@ -0,0 +1,152 @@
+.advanced-search {
+  width: 100%;
+  padding: 40px $s-md;
+
+  background-color: $c-global-primary;
+
+  @include breakpoint-m {
+    width: 100%;
+    padding: $s-4xl 157px 64px 157px;
+  }
+
+  &__title {
+    margin-bottom: $s-xl;
+
+    @include breakpoint-m {
+      margin-bottom: 48px;
+    }
+  }
+
+  &__clauses {
+    @extend %text-button-placeholder;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 0 $s-md $s-xl;
+
+    @include breakpoint-m {
+      margin: 0 0 $s-lg $s-xl;
+    }
+  }
+
+  &__clause {
+    display: inline-block;
+    margin-right: $s-xl;
+    color: $c-text-primary-black;
+
+    &.advanced-search__clause--grey {
+      color: $c-global-tertiary-2;
+    }
+  }
+
+  &__filters {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: $s-xl;
+    margin-bottom: 46px;
+  }
+
+  &__filter {
+    width: 100%;
+
+    @include breakpoint-s {
+      width: 260px;
+      margin-right: $s-lg;
+    }
+  }
+
+  &__footer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    @include breakpoint-s {
+      flex-direction: row;
+    }
+  }
+
+  &__back-button {
+    align-self: center;
+    margin-bottom: $s-lg;
+
+    @include breakpoint-s {
+      align-self: center;
+      margin-bottom: 0;
+    }
+  }
+
+  &__search-button {
+    width: 100%;
+
+    @include breakpoint-s {
+      margin-left: $s-lg;
+      width: 266px;
+    }
+  }
+
+  &__divider {
+    height: 1px;
+    background-color: $c-global-tertiary-1;
+    margin: $s-2xl 0;
+    width: 100%;
+  }
+
+  &__cql-input {
+    @extend %text-body-medium-regular-placeholder;
+    border: solid 1px $c-global-tertiary-1;
+    width: 100%;
+    margin-bottom: 46px;
+    padding: $s-md;
+    resize: none;
+    background-color: $c-global-primary;
+  }
+}
+
+.input-and-preview {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 64px;
+
+  &__input {
+    width: 100%;
+
+    @include breakpoint-m {
+      padding-right: $s-4xl;
+      margin-bottom: 48px;
+    }
+  }
+
+  &__preview {
+    padding: $s-xl 48px $s-xl 64px;
+    background-color: $c-global-secondary;
+    flex-direction: column;
+    align-self: flex-start;
+    display: none;
+
+    @include breakpoint-m {
+      display: flex;
+      width: 300px;
+      min-width: 300px;
+      padding: $s-2xl $s-xl;
+    }
+    @include breakpoint-l {
+      padding: $s-xl 48px $s-xl 64px;
+      width: 420px;
+      min-width: 420px;
+      display: flex;
+    }
+
+    &--mobile {
+      display: flex;
+      width: 100%;
+      margin-bottom: 48px;
+
+      @include breakpoint-m {
+        display: none;
+      }
+    }
+  }
+}

src/stories/Blocks/autosuggest/Autosuggest.stories.tsx

@@ -48,6 +48,11 @@ const Template: ComponentStory<typeof Autosuggest> = (
             src="icons/basic/icon-search.svg"
             alt="search icon"
           />
+          <img
+            className="header__menu-dropdown-icon"
+            src="icons/collection/ExpandMore.svg"
+            alt="expand dropdown icon"
+          />
           <Autosuggest {...args} />
         </div>
       </div>

src/stories/Blocks/header/Header.stories.tsx

@@ -20,6 +20,9 @@ export default {
     inputPlaceholder: {
       defaultValue: "Søg blandt bibliotekets materialer",
     },
+    openDropdown: {
+      defaultValue: false,
+    },
   },
   parameters: {
     design: {