@pareto-engineering/design-system 2.0.0-alpha.44 → 2.0.0-alpha.47

package/dist/es/f/fields/QueryCombobox/styles.scss

@@ -5,61 +5,74 @@
 $default-input-padding: .75em .75em .55em;
 $default-padding: 1em;
 $default-margin: 1em;
+$default-loading-circle-displacement: 1em;
 
-.#{bem.$base}.query-combobox {
-    .input {
-        background: var(--light-y);
-        border: var(--theme-border-style) var(--dark-y);
-        color: var(--on-y);
-        padding: $default-input-padding;
-        width: 100%;
+.#{bem.$base}.combobox,
+.#{bem.$base}.multiple-combobox {
+    position: relative;
 
-        &::placeholder {
-            color: var(--metadata);
-        }
+    .#{bem.$base}.label {
+        margin-bottom: $default-margin
+    }
 
-        &:not(:disabled):hover {
-            border: var(--theme-border-style) var(--light-background4);
-        }
+    .#{bem.$base}.popover {
+        width: 100%;
 
-        &:disabled {
-            background-color: var(--dark-y);
-        }
+        >.menu {
+            list-style: none;
+            margin: 0;
+            outline: 0;
+            padding: 0;
 
-        &:focus {
-            background: var(--light-background4);
+            >.item {
+                padding: $default-padding / 2;
+
+                &.#{bem.$modifier-active} {
+                    background-color: var(--background2);
+                }
+            }
         }
     }
 
-    .menu {
-        list-style: none;
-        margin: 0;
-        outline: 0;
-        padding: 0;
+    >.input-wrapper {
+        position: relative;
 
-        /* stylelint-disable selector-max-universal -- Allow */
-        >* {
-            padding-block: $default-padding / 2;
+        >.#{bem.$base}.loading-circle {
+            position: absolute;
+            top: $default-loading-circle-displacement;
+            right: $default-loading-circle-displacement;
         }
 
-        /* stylelint-enable selector-max-universal */
-        >.item {
-            &.#{bem.$modifier-active} {
-                background-color: var(--background2);
+        >.input {
+            background: var(--light-y);
+            border: var(--theme-border-style) var(--dark-y);
+            color: var(--on-y);
+            padding: $default-input-padding;
+            width: 100%;
+
+            &::placeholder {
+                color: var(--metadata);
             }
-        }
-    }
 
-    .multiple-combobox {
-        .selected-items {
-            display: flex;
+            &:not(:disabled):hover {
+                border: var(--theme-border-style) var(--light-background4);
+            }
 
-            /* stylelint-disable selector-max-universal -- Allow */
-            >*:not(:first-child) {
-                margin-left: $default-margin;
+            &:disabled {
+                background-color: var(--dark-y);
             }
 
-            /* stylelint-enable selector-max-universal */
+            &:focus {
+                background: var(--light-background4);
+            }
         }
     }
+}
+
+
+.#{bem.$base}.multiple-combobox {
+    >.selected-items {
+        display: flex;
+        gap: var(--default-gap);
+    }
 }

package/dist/es/f/fields/index.js

@@ -2,4 +2,5 @@ export { TextInput } from "./TextInput";
 export { SelectInput } from "./SelectInput";
 export { ChoicesInput } from "./ChoicesInput";
 export { TextareaInput } from "./TextareaInput";
-export { RatingsInput } from "./RatingsInput";
+export { RatingsInput } from "./RatingsInput";
+export { QueryCombobox } from "./QueryCombobox";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.44",
+  "version": "2.0.0-alpha.47",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -88,10 +88,11 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^2.0.0-alpha.18",
+    "@pareto-engineering/assets": "^2.0.0-alpha.21",
     "@pareto-engineering/bem": "^0.1.5",
     "@pareto-engineering/styles": "^2.0.0-alpha.8",
     "date-fns": "^2.22.1",
+    "downshift": "^6.1.7",
     "formik": "^2.2.9",
     "hamburgers": "^1.1.3",
     "lodash": "^4.17.21",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -10637,6 +10637,161 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/FormInput With Query Combobox 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-input form-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="firstName"
+    >
+      What's your first name ?
+    </label>
+    <input
+      className="input"
+      disabled={false}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value="Test"
+    />
+  </div>
+  <div
+    className="base choices-input form-input x-background2 y-main2"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base label x-main2"
+    >
+      What are your favourite colors ?
+    </p>
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-red"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="red"
+        />
+        <label
+          htmlFor="undefined-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-blue"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="blue"
+        />
+        <label
+          htmlFor="undefined-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-green"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="green"
+        />
+        <label
+          htmlFor="undefined-green"
+        >
+          Color Green
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="base combobox form-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-0-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-0-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-0-menu"
+        aria-labelledby="downshift-0-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-0-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-0-label"
+        className="base menu"
+        id="downshift-0-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/common/Description Base 1`] = `
 <div
   className="base description x-metadata"
@@ -11198,6 +11353,359 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base multiple-combobox y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="teams"
+      id="downshift-3-label"
+    >
+      Search for a team
+    </label>
+    <div
+      className="selected-items"
+    />
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-3-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-3-menu"
+        aria-labelledby="downshift-3-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-3-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-3-label"
+        className="base menu"
+        id="downshift-3-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Add formik values
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik State 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base multiple-combobox y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="teams"
+      id="downshift-4-label"
+    >
+      Search for a team
+    </label>
+    <div
+      className="selected-items"
+    >
+      <div
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+      >
+        Apple
+        <button
+          className="base button f-icons x-main2 modifierCompact modifierSimple"
+          onClick={[Function]}
+          type="button"
+        >
+          X
+        </button>
+      </div>
+      <div
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+      >
+        Pear
+        <button
+          className="base button f-icons x-main2 modifierCompact modifierSimple"
+          onClick={[Function]}
+          type="button"
+        >
+          X
+        </button>
+      </div>
+    </div>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-4-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-4-menu"
+        aria-labelledby="downshift-4-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-4-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-4-label"
+        className="base menu"
+        id="downshift-4-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Add formik values
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base combobox y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-1-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-1-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-1-menu"
+        aria-labelledby="downshift-1-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-1-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-1-label"
+        className="base menu"
+        id="downshift-1-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Replace formik value
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base combobox y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-2-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-2-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-2-menu"
+        aria-labelledby="downshift-2-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-2-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value="Apple"
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-2-label"
+        className="base menu"
+        id="downshift-2-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Replace formik value
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/RatingsInput Base 1`] = `
 <form
   action="#"

package/src/local.scss

@@ -5,12 +5,12 @@
   --theme-border-style: 1px solid;
   --theme-border-color: var(--paragraph);
   --theme-border: var(--theme-border-style) var(--theme-border-color);
+  --default-gap: 1em;
 }
 
 html {
   font-family: var(--font-default);
   font-size: 18px;
-  font-feature-settings:'liga' on;
+  font-feature-settings: 'liga' on;
   scroll-behavior: smooth;
-}
-
+}