@pareto-engineering/design-system 2.0.0-alpha.48 → 2.0.0-alpha.50

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

@@ -2663,7 +2663,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  in 4 months
+  in 3 months
 </p>
 `;
 
@@ -10366,34 +10366,38 @@ exports[`Storyshots f/FormInput Base 1`] = `
     >
       What do you want for dinner ?
     </label>
-    <select
-      className="input"
-      disabled={false}
-      id="food"
-      name="food"
-      onBlur={[Function]}
-      onChange={[Function]}
-      value=""
+    <div
+      className="select-wrapper"
     >
-      <option
-        disabled={false}
-        value="italian"
-      >
-        A nice pizza
-      </option>
-      <option
-        disabled={false}
-        value="turkish"
-      >
-        A delicious kebab
-      </option>
-      <option
+      <select
+        className="input"
         disabled={false}
-        value="french"
+        id="food"
+        name="food"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
       >
-        A three course delicate french meal
-      </option>
-    </select>
+        <option
+          disabled={false}
+          value="italian"
+        >
+          A nice pizza
+        </option>
+        <option
+          disabled={false}
+          value="turkish"
+        >
+          A delicious kebab
+        </option>
+        <option
+          disabled={false}
+          value="french"
+        >
+          A three course delicate french meal
+        </option>
+      </select>
+    </div>
   </div>
   <div
     className="debugger"
@@ -10555,34 +10559,38 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     >
       What do you want for dinner ?
     </label>
-    <select
-      className="input"
-      disabled={true}
-      id="food"
-      name="food"
-      onBlur={[Function]}
-      onChange={[Function]}
-      value=""
+    <div
+      className="select-wrapper"
     >
-      <option
-        disabled={false}
-        value="italian"
-      >
-        A nice pizza
-      </option>
-      <option
-        disabled={false}
-        value="turkish"
-      >
-        A delicious kebab
-      </option>
-      <option
-        disabled={false}
-        value="french"
+      <select
+        className="input"
+        disabled={true}
+        id="food"
+        name="food"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
       >
-        A three course delicate french meal
-      </option>
-    </select>
+        <option
+          disabled={false}
+          value="italian"
+        >
+          A nice pizza
+        </option>
+        <option
+          disabled={false}
+          value="turkish"
+        >
+          A delicious kebab
+        </option>
+        <option
+          disabled={false}
+          value="french"
+        >
+          A three course delicate french meal
+        </option>
+      </select>
+    </div>
   </div>
   <div
     className="debugger"
@@ -10637,6 +10645,142 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/FormInput With Prefetched Query Select 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 select-input form-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="status"
+    >
+      Select Task Status
+    </label>
+    <div
+      className="select-wrapper"
+    >
+      <select
+        className="input"
+        disabled={false}
+        id="status"
+        name="status"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/FormInput With Query Combobox 1`] = `
 <form
   action="#"
@@ -10778,6 +10922,49 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
       />
     </div>
   </div>
+  <div
+    className="base multiple-combobox form-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="teams"
+      id="downshift-1-label"
+    >
+      Search for teams
+    </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]}
+        onClick={[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
     className="debugger"
   >
@@ -11365,24 +11552,24 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
     <label
       className="base label x-main2"
       htmlFor="teams"
-      id="downshift-3-label"
+      id="downshift-4-label"
     >
       Search for a team
     </label>
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-3-menu"
+      aria-owns="downshift-4-menu"
       className="input-wrapper"
       role="combobox"
     >
       <input
         aria-autocomplete="list"
-        aria-controls="downshift-3-menu"
-        aria-labelledby="downshift-3-label"
+        aria-controls="downshift-4-menu"
+        aria-labelledby="downshift-4-label"
         autoComplete="off"
         className="input"
-        id="downshift-3-input"
+        id="downshift-4-input"
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}
@@ -11394,9 +11581,9 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
       className="base popover x-background1 bottom left"
     >
       <ul
-        aria-labelledby="downshift-3-label"
+        aria-labelledby="downshift-4-label"
         className="base menu"
-        id="downshift-3-menu"
+        id="downshift-4-menu"
         onMouseLeave={[Function]}
         role="listbox"
       />
@@ -11445,7 +11632,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
     <label
       className="base label x-main2"
       htmlFor="teams"
-      id="downshift-4-label"
+      id="downshift-5-label"
     >
       Search for a team
     </label>
@@ -11502,17 +11689,17 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-4-menu"
+      aria-owns="downshift-5-menu"
       className="input-wrapper"
       role="combobox"
     >
       <input
         aria-autocomplete="list"
-        aria-controls="downshift-4-menu"
-        aria-labelledby="downshift-4-label"
+        aria-controls="downshift-5-menu"
+        aria-labelledby="downshift-5-label"
         autoComplete="off"
         className="input"
-        id="downshift-4-input"
+        id="downshift-5-input"
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}
@@ -11524,9 +11711,9 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
       className="base popover x-background1 bottom left"
     >
       <ul
-        aria-labelledby="downshift-4-label"
+        aria-labelledby="downshift-5-label"
         className="base menu"
-        id="downshift-4-menu"
+        id="downshift-5-menu"
         onMouseLeave={[Function]}
         role="listbox"
       />
@@ -11575,24 +11762,24 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
     <label
       className="base label x-main2"
       htmlFor="team"
-      id="downshift-1-label"
+      id="downshift-2-label"
     >
       Search for a team
     </label>
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-1-menu"
+      aria-owns="downshift-2-menu"
       className="input-wrapper"
       role="combobox"
     >
       <input
         aria-autocomplete="list"
-        aria-controls="downshift-1-menu"
-        aria-labelledby="downshift-1-label"
+        aria-controls="downshift-2-menu"
+        aria-labelledby="downshift-2-label"
         autoComplete="off"
         className="input"
-        id="downshift-1-input"
+        id="downshift-2-input"
         onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
@@ -11603,9 +11790,9 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
       className="base popover x-background1 bottom left"
     >
       <ul
-        aria-labelledby="downshift-1-label"
+        aria-labelledby="downshift-2-label"
         className="base menu"
-        id="downshift-1-menu"
+        id="downshift-2-menu"
         onMouseLeave={[Function]}
         role="listbox"
       />
@@ -11654,24 +11841,24 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
     <label
       className="base label x-main2"
       htmlFor="team"
-      id="downshift-2-label"
+      id="downshift-3-label"
     >
       Search for a team
     </label>
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-2-menu"
+      aria-owns="downshift-3-menu"
       className="input-wrapper"
       role="combobox"
     >
       <input
         aria-autocomplete="list"
-        aria-controls="downshift-2-menu"
-        aria-labelledby="downshift-2-label"
+        aria-controls="downshift-3-menu"
+        aria-labelledby="downshift-3-label"
         autoComplete="off"
         className="input"
-        id="downshift-2-input"
+        id="downshift-3-input"
         onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
@@ -11682,9 +11869,9 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
       className="base popover x-background1 bottom left"
     >
       <ul
-        aria-labelledby="downshift-2-label"
+        aria-labelledby="downshift-3-label"
         className="base menu"
-        id="downshift-2-menu"
+        id="downshift-3-menu"
         onMouseLeave={[Function]}
         role="listbox"
       />
@@ -11721,6 +11908,135 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
 </form>
 `;
 
+exports[`Storyshots f/fields/QuerySelect Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="status"
+    >
+      Select Task Status
+    </label>
+    <div
+      className="select-wrapper"
+    >
+      <select
+        className="input"
+        disabled={false}
+        id="status"
+        name="status"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QuerySelect Loading Options 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="status"
+    >
+      Select Task Status
+    </label>
+    <div
+      className="select-wrapper"
+    >
+      <select
+        className="input"
+        disabled={false}
+        id="status"
+        name="status"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QuerySelect With Default Value 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="status"
+    >
+      Select Task Status
+    </label>
+    <div
+      className="select-wrapper"
+    >
+      <select
+        className="input"
+        disabled={false}
+        id="status"
+        name="status"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value="VGFza1N0YXR1c05vZGU6NGRiYjNlMmItMGIxYy00ZjIxLTk0MmUtZTNjZGQwMjdiNjU3"
+      />
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/RatingsInput Base 1`] = `
 <form
   action="#"
@@ -12523,40 +12839,44 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     >
       Work Type
     </label>
-    <select
-      className="input"
-      disabled={false}
-      id="workType"
-      name="workType"
-      onBlur={[Function]}
-      onChange={[Function]}
-      value=""
+    <div
+      className="select-wrapper"
     >
-      <option
-        disabled={true}
-        value=""
-      >
-        Select an option
-      </option>
-      <option
-        disabled={false}
-        value="Work"
-      >
-        Work
-      </option>
-      <option
-        disabled={false}
-        value="Managing"
-      >
-        Managing
-      </option>
-      <option
+      <select
+        className="input"
         disabled={false}
-        value="Training"
+        id="workType"
+        name="workType"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
       >
-        Training
-      </option>
-    </select>
+        <option
+          disabled={true}
+          value=""
+        >
+          Select an option
+        </option>
+        <option
+          disabled={false}
+          value="Work"
+        >
+          Work
+        </option>
+        <option
+          disabled={false}
+          value="Managing"
+        >
+          Managing
+        </option>
+        <option
+          disabled={false}
+          value="Training"
+        >
+          Training
+        </option>
+      </select>
+    </div>
   </div>
   <div
     className="debugger"
@@ -12587,52 +12907,56 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     >
       Work Type
     </label>
-    <select
-      className="input"
-      disabled={true}
-      id="workType"
-      name="workType"
-      onBlur={[Function]}
-      onChange={[Function]}
-      value=""
+    <div
+      className="select-wrapper"
     >
-      <option
+      <select
+        className="input"
         disabled={true}
+        id="workType"
+        name="workType"
+        onBlur={[Function]}
+        onChange={[Function]}
         value=""
       >
-        Select an option
-      </option>
-      <option
-        disabled={false}
-        value="Work"
-      >
-        Work
-      </option>
-      <option
-        disabled={false}
-        value="Managing"
-      >
-        Managing
-      </option>
-      <option
-        disabled={false}
-        value="Training"
-      >
-        Training
-      </option>
-      <option
-        disabled={false}
-        value="20th Aug 2020 to 19th Sept, 2020"
-      >
-        20th Aug 2020 to 19th Sept, 2020
-      </option>
-      <option
-        disabled={false}
-        value="20th Sept 2020 to 19th Oct, 2020"
-      >
-        20th Sept 2020 to 19th Oct, 2020
-      </option>
-    </select>
+        <option
+          disabled={true}
+          value=""
+        >
+          Select an option
+        </option>
+        <option
+          disabled={false}
+          value="Work"
+        >
+          Work
+        </option>
+        <option
+          disabled={false}
+          value="Managing"
+        >
+          Managing
+        </option>
+        <option
+          disabled={false}
+          value="Training"
+        >
+          Training
+        </option>
+        <option
+          disabled={false}
+          value="20th Aug 2020 to 19th Sept, 2020"
+        >
+          20th Aug 2020 to 19th Sept, 2020
+        </option>
+        <option
+          disabled={false}
+          value="20th Sept 2020 to 19th Oct, 2020"
+        >
+          20th Sept 2020 to 19th Oct, 2020
+        </option>
+      </select>
+    </div>
   </div>
   <div
     className="debugger"
@@ -12663,34 +12987,38 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     >
       Work Type
     </label>
-    <select
-      className="input"
-      disabled={false}
-      id="workType"
-      name="workType"
-      onBlur={[Function]}
-      onChange={[Function]}
-      value=""
+    <div
+      className="select-wrapper"
     >
-      <option
-        disabled={true}
-        value=""
-      >
-        Select an option
-      </option>
-      <option
-        disabled={false}
-        value="20th Aug 2020 to 19th Sept, 2020"
-      >
-        20th Aug 2020 to 19th Sept, 2020
-      </option>
-      <option
+      <select
+        className="input"
         disabled={false}
-        value="20th Sept 2020 to 19th Oct, 2020"
+        id="workType"
+        name="workType"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
       >
-        20th Sept 2020 to 19th Oct, 2020
-      </option>
-    </select>
+        <option
+          disabled={true}
+          value=""
+        >
+          Select an option
+        </option>
+        <option
+          disabled={false}
+          value="20th Aug 2020 to 19th Sept, 2020"
+        >
+          20th Aug 2020 to 19th Sept, 2020
+        </option>
+        <option
+          disabled={false}
+          value="20th Sept 2020 to 19th Oct, 2020"
+        >
+          20th Sept 2020 to 19th Oct, 2020
+        </option>
+      </select>
+    </div>
   </div>
   <div
     className="debugger"
@@ -12721,34 +13049,38 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
     >
       Activity Type
     </label>
-    <select
-      className="input"
-      disabled={false}
-      id="activity"
-      name="activity"
-      onBlur={[Function]}
-      onChange={[Function]}
-      value=""
+    <div
+      className="select-wrapper"
     >
-      <option
-        disabled={true}
-        value=""
-      >
-        Select an option
-      </option>
-      <option
-        disabled={false}
-        value="review"
-      >
-        Review
-      </option>
-      <option
+      <select
+        className="input"
         disabled={false}
-        value="Approve"
+        id="activity"
+        name="activity"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
       >
-        Approve
-      </option>
-    </select>
+        <option
+          disabled={true}
+          value=""
+        >
+          Select an option
+        </option>
+        <option
+          disabled={false}
+          value="review"
+        >
+          Review
+        </option>
+        <option
+          disabled={false}
+          value="Approve"
+        >
+          Approve
+        </option>
+      </select>
+    </div>
   </div>
   <div
     className="debugger"
@@ -12779,52 +13111,56 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     >
       Work Type
     </label>
-    <select
-      className="input"
-      disabled={false}
-      id="workType"
-      name="workType"
-      onBlur={[Function]}
-      onChange={[Function]}
-      value=""
+    <div
+      className="select-wrapper"
     >
-      <option
-        disabled={true}
-        value=""
-      >
-        Select an option
-      </option>
-      <option
-        disabled={false}
-        value="Work"
-      >
-        Work
-      </option>
-      <option
-        disabled={false}
-        value="Managing"
-      >
-        Managing
-      </option>
-      <option
-        disabled={false}
-        value="Training"
-      >
-        Training
-      </option>
-      <option
-        disabled={false}
-        value="20th Aug 2020 to 19th Sept, 2020"
-      >
-        20th Aug 2020 to 19th Sept, 2020
-      </option>
-      <option
+      <select
+        className="input"
         disabled={false}
-        value="20th Sept 2020 to 19th Oct, 2020"
+        id="workType"
+        name="workType"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
       >
-        20th Sept 2020 to 19th Oct, 2020
-      </option>
-    </select>
+        <option
+          disabled={true}
+          value=""
+        >
+          Select an option
+        </option>
+        <option
+          disabled={false}
+          value="Work"
+        >
+          Work
+        </option>
+        <option
+          disabled={false}
+          value="Managing"
+        >
+          Managing
+        </option>
+        <option
+          disabled={false}
+          value="Training"
+        >
+          Training
+        </option>
+        <option
+          disabled={false}
+          value="20th Aug 2020 to 19th Sept, 2020"
+        >
+          20th Aug 2020 to 19th Sept, 2020
+        </option>
+        <option
+          disabled={false}
+          value="20th Sept 2020 to 19th Oct, 2020"
+        >
+          20th Sept 2020 to 19th Oct, 2020
+        </option>
+      </select>
+    </div>
   </div>
   <div
     className="debugger"