@pareto-engineering/design-system 4.0.0-alpha.59 → 4.0.0-alpha.60

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

@@ -13970,7 +13970,6 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
     </span>
     <button
       className="base toggle-switch"
-      onClick={[Function]}
       style={
         {
           "--size": undefined,
@@ -13981,6 +13980,7 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
       <input
         checked={false}
         id="switch"
+        onChange={[Function]}
         type="checkbox"
       />
       <label
@@ -20127,7 +20127,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox On Single Row 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Multiple Select With Prompt For New Options 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -20142,8 +20142,8 @@ exports[`Storyshots f/fields/QueryCombobox On Single Row 1`] = `
       id="downshift-4-label"
       style={
         {
-          "--column-span": 4,
-          "--column-span-md": 4,
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
         }
       }
     >
@@ -20153,8 +20153,8 @@ exports[`Storyshots f/fields/QueryCombobox On Single Row 1`] = `
       className="base input-wrapper base multiple-combobox"
       style={
         {
-          "--column-span": 4,
-          "--column-span-md": 10,
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
         }
       }
     >
@@ -20210,7 +20210,7 @@ exports[`Storyshots f/fields/QueryCombobox On Single Row 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
+exports[`Storyshots f/fields/QueryCombobox On Single Row 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -20220,25 +20220,24 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
     className="grid"
   >
     <label
-      className="base form-label x-paragraph"
-      htmlFor="team"
+      className="base form-label base multiple-combobox x-paragraph"
+      htmlFor="teams"
       id="downshift-5-label"
       style={
         {
-          "--column-span": "var(--columns)",
-          "--column-span-md": "var(--columns)",
+          "--column-span": 4,
+          "--column-span-md": 4,
         }
       }
     >
       Search for a team
-       (Optional)
     </label>
     <div
-      className="base input-wrapper base combobox y-interactive"
+      className="base input-wrapper base multiple-combobox"
       style={
         {
-          "--column-span": "var(--columns)",
-          "--column-span-md": "var(--columns)",
+          "--column-span": 4,
+          "--column-span-md": 10,
         }
       }
     >
@@ -20252,6 +20251,7 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
         id="downshift-5-input"
         onBlur={[Function]}
         onChange={[Function]}
+        onClick={[Function]}
         onKeyDown={[Function]}
         value=""
       />
@@ -20286,14 +20286,14 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
         onClick={[Function]}
         type="button"
       >
-        Replace formik value
+        Add formik values
       </button>
     </div>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -20314,6 +20314,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
       }
     >
       Search for a team
+       (Optional)
     </label>
     <div
       className="base input-wrapper base combobox y-interactive"
@@ -20375,7 +20376,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -20417,6 +20418,88 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
         onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
+        value=""
+      />
+      <div
+        className="base popover x-background-near bottom left"
+      >
+        <ul
+          aria-labelledby="downshift-7-label"
+          className="base menu y-interactive"
+          id="downshift-7-menu"
+          onMouseLeave={[Function]}
+          role="listbox"
+        />
+      </div>
+    </div>
+    <div
+      className="container"
+    >
+      <div
+        className="debugger"
+      >
+        <button
+          className="base button x-main2"
+          onClick={[Function]}
+          type="button"
+        >
+          Open FormDebugger
+        </button>
+      </div>
+      <button
+        className="base button x-main"
+        onClick={[Function]}
+        type="button"
+      >
+        Replace formik value
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="grid"
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="team"
+      id="downshift-8-label"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      Search for a team
+    </label>
+    <div
+      className="base input-wrapper base combobox y-interactive"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-8-menu"
+        aria-labelledby="downshift-8-label"
+        autoComplete="off"
+        className="input"
+        disabled={false}
+        id="downshift-8-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
         value="Apple"
       />
       <button
@@ -20438,9 +20521,175 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
         className="base popover x-background-near bottom left"
       >
         <ul
-          aria-labelledby="downshift-7-label"
+          aria-labelledby="downshift-8-label"
           className="base menu y-interactive"
-          id="downshift-7-menu"
+          id="downshift-8-menu"
+          onMouseLeave={[Function]}
+          role="listbox"
+        />
+      </div>
+    </div>
+    <div
+      className="container"
+    >
+      <div
+        className="debugger"
+      >
+        <button
+          className="base button x-main2"
+          onClick={[Function]}
+          type="button"
+        >
+          Open FormDebugger
+        </button>
+      </div>
+      <button
+        className="base button x-main"
+        onClick={[Function]}
+        type="button"
+      >
+        Replace formik value
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox With Placeholder 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="grid"
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="team"
+      id="downshift-9-label"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      Search for a team
+    </label>
+    <div
+      className="base input-wrapper base combobox y-interactive"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-9-menu"
+        aria-labelledby="downshift-9-label"
+        autoComplete="off"
+        className="input"
+        disabled={false}
+        id="downshift-9-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Search for a team"
+        value=""
+      />
+      <div
+        className="base popover x-background-near bottom left"
+      >
+        <ul
+          aria-labelledby="downshift-9-label"
+          className="base menu y-interactive"
+          id="downshift-9-menu"
+          onMouseLeave={[Function]}
+          role="listbox"
+        />
+      </div>
+    </div>
+    <div
+      className="container"
+    >
+      <div
+        className="debugger"
+      >
+        <button
+          className="base button x-main2"
+          onClick={[Function]}
+          type="button"
+        >
+          Open FormDebugger
+        </button>
+      </div>
+      <button
+        className="base button x-main"
+        onClick={[Function]}
+        type="button"
+      >
+        Replace formik value
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox With Prompt To Create New Option 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="grid"
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="team"
+      id="downshift-10-label"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      Search for a team
+    </label>
+    <div
+      className="base input-wrapper base combobox y-interactive"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-10-menu"
+        aria-labelledby="downshift-10-label"
+        autoComplete="off"
+        className="input"
+        disabled={false}
+        id="downshift-10-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Search for a team"
+        value=""
+      />
+      <div
+        className="base popover x-background-near bottom left"
+      >
+        <ul
+          aria-labelledby="downshift-10-label"
+          className="base menu y-interactive"
+          id="downshift-10-menu"
           onMouseLeave={[Function]}
           role="listbox"
         />