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

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

@@ -2959,6 +2959,9 @@ exports[`Storyshots a/SVG Stroke 1`] = `
 exports[`Storyshots a/SnapScroller Base 1`] = `
 <div
   className="base snap-scroller u1 pv-u"
+  onMouseDown={[Function]}
+  onMouseMove={[Function]}
+  onMouseUp={[Function]}
   style={
     {
       "background": "var(--background4)",
@@ -3036,6 +3039,9 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
 exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
 <div
   className="base snap-scroller u1 pv-u desktop-no-scroll"
+  onMouseDown={null}
+  onMouseMove={null}
+  onMouseUp={null}
   style={
     {
       "background": "var(--background4)",
@@ -11731,6 +11737,9 @@ exports[`Storyshots b/Card Card With Progress 1`] = `
 exports[`Storyshots b/Card/Group Base 1`] = `
 <div
   className="base snap-scroller base group span-8 snap-scroller desktop-vertical-flexbox desktop-no-scroll"
+  onMouseDown={null}
+  onMouseMove={null}
+  onMouseUp={null}
 >
   <div
     className="base card span-2"
@@ -11771,6 +11780,9 @@ exports[`Storyshots b/Card/Group Base 1`] = `
 exports[`Storyshots b/Card/Group Card Group Grid On Desktop 1`] = `
 <div
   className="base snap-scroller base group span-8 snap-scroller desktop-grid desktop-no-scroll"
+  onMouseDown={null}
+  onMouseMove={null}
+  onMouseUp={null}
 >
   <div
     className="base card span-2"
@@ -13958,7 +13970,6 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
     </span>
     <button
       className="base toggle-switch"
-      onClick={[Function]}
       style={
         {
           "--size": undefined,
@@ -13969,6 +13980,7 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
       <input
         checked={false}
         id="switch"
+        onChange={[Function]}
         type="checkbox"
       />
       <label
@@ -20115,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]}
@@ -20130,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)",
         }
       }
     >
@@ -20141,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)",
         }
       }
     >
@@ -20198,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]}
@@ -20208,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,
         }
       }
     >
@@ -20240,6 +20251,7 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
         id="downshift-5-input"
         onBlur={[Function]}
         onChange={[Function]}
+        onClick={[Function]}
         onKeyDown={[Function]}
         value=""
       />
@@ -20274,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]}
@@ -20302,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"
@@ -20363,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]}
@@ -20405,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
@@ -20426,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"
         />