@pareto-engineering/design-system 4.0.0-alpha.68 → 4.0.0-alpha.70

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

@@ -3264,6 +3264,18 @@ exports[`Storyshots a/ToggleSwitch Base 1`] = `
 </button>
 `;
 
+exports[`Storyshots a/XMLEditor Base 1`] = `
+<div
+  className="base code-editor"
+  style={
+    {
+      "--gutter-width": "3em",
+      "--height": "20em",
+    }
+  }
+/>
+`;
+
 exports[`Storyshots b/Button Arrow Left 1`] = `
 [
   <button
@@ -18869,7 +18881,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Multiple Select With Prompt For New Options 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Multiple Select With Get Tag Color Function 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -18898,6 +18910,52 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Prompt For New O
       >
         Search for a team
       </label>
+      <div
+        className="selected-items"
+      >
+        <div
+          className="item"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          tabIndex={-1}
+        >
+          <button
+            className="base button x-red modifierCompact"
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Apple
+            </span>
+            <span
+              className="icon close"
+            >
+              Y
+            </span>
+          </button>
+        </div>
+        <div
+          className="item"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          tabIndex={-1}
+        >
+          <button
+            className="base button x-green modifierCompact"
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Pear
+            </span>
+            <span
+              className="icon close"
+            >
+              Y
+            </span>
+          </button>
+        </div>
+      </div>
       <div
         className="input-container"
       >
@@ -18952,7 +19010,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Prompt For New O
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Multiple Select With Prompt For New Options 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -18971,16 +19029,15 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="downshift-5-menu"
-      className="base combobox y-interactive"
+      className="base multiple-combobox"
       role="combobox"
     >
       <label
-        className="base form-label x-paragraph"
-        htmlFor="team"
+        className="base form-label base multiple-combobox x-paragraph"
+        htmlFor="teams"
         id="downshift-5-label"
       >
         Search for a team
-         (Optional)
       </label>
       <div
         className="input-container"
@@ -18995,6 +19052,7 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
           id="downshift-5-input"
           onBlur={[Function]}
           onChange={[Function]}
+          onClick={[Function]}
           onKeyDown={[Function]}
           value=""
         />
@@ -19028,14 +19086,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]}
@@ -19063,6 +19121,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
         id="downshift-6-label"
       >
         Search for a team
+         (Optional)
       </label>
       <div
         className="input-container"
@@ -19117,7 +19176,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]}
@@ -19160,6 +19219,88 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
+          value=""
+        />
+      </div>
+      <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>
+      <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
+    style={
+      {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "1rem",
+      }
+    }
+  >
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-8-menu"
+      className="base combobox y-interactive"
+      role="combobox"
+    >
+      <label
+        className="base form-label x-paragraph"
+        htmlFor="team"
+        id="downshift-8-label"
+      >
+        Search for a team
+      </label>
+      <div
+        className="input-container"
+      >
+        <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
@@ -19182,9 +19323,9 @@ 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"
         />
@@ -19232,14 +19373,14 @@ exports[`Storyshots f/fields/QueryCombobox With Placeholder 1`] = `
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-8-menu"
+      aria-owns="downshift-9-menu"
       className="base combobox y-interactive"
       role="combobox"
     >
       <label
         className="base form-label x-paragraph"
         htmlFor="team"
-        id="downshift-8-label"
+        id="downshift-9-label"
       >
         Search for a team
       </label>
@@ -19248,12 +19389,12 @@ exports[`Storyshots f/fields/QueryCombobox With Placeholder 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="downshift-8-menu"
-          aria-labelledby="downshift-8-label"
+          aria-controls="downshift-9-menu"
+          aria-labelledby="downshift-9-label"
           autoComplete="off"
           className="input"
           disabled={false}
-          id="downshift-8-input"
+          id="downshift-9-input"
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -19265,9 +19406,9 @@ exports[`Storyshots f/fields/QueryCombobox With Placeholder 1`] = `
         className="base popover x-background-near bottom left"
       >
         <ul
-          aria-labelledby="downshift-8-label"
+          aria-labelledby="downshift-9-label"
           className="base menu y-interactive"
-          id="downshift-8-menu"
+          id="downshift-9-menu"
           onMouseLeave={[Function]}
           role="listbox"
         />
@@ -19315,14 +19456,14 @@ exports[`Storyshots f/fields/QueryCombobox With Prompt To Create New Option 1`]
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-9-menu"
+      aria-owns="downshift-10-menu"
       className="base combobox y-interactive"
       role="combobox"
     >
       <label
         className="base form-label x-paragraph"
         htmlFor="team"
-        id="downshift-9-label"
+        id="downshift-10-label"
       >
         Search for a team
       </label>
@@ -19331,12 +19472,12 @@ exports[`Storyshots f/fields/QueryCombobox With Prompt To Create New Option 1`]
       >
         <input
           aria-autocomplete="list"
-          aria-controls="downshift-9-menu"
-          aria-labelledby="downshift-9-label"
+          aria-controls="downshift-10-menu"
+          aria-labelledby="downshift-10-label"
           autoComplete="off"
           className="input"
           disabled={false}
-          id="downshift-9-input"
+          id="downshift-10-input"
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -19348,9 +19489,9 @@ exports[`Storyshots f/fields/QueryCombobox With Prompt To Create New Option 1`]
         className="base popover x-background-near bottom left"
       >
         <ul
-          aria-labelledby="downshift-9-label"
+          aria-labelledby="downshift-10-label"
           className="base menu y-interactive"
-          id="downshift-9-menu"
+          id="downshift-10-menu"
           onMouseLeave={[Function]}
           role="listbox"
         />