@pareto-engineering/design-system 4.0.0-alpha.81 → 4.0.0-alpha.83

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

@@ -31249,6 +31249,701 @@ exports[`Storyshots f/fields/TextareaInput Vertical Resize 1`] = `
 </form>
 `;
 
+exports[`Storyshots g/DragAndDrop Base 1`] = `
+<ul
+  className="base drag-and-drop"
+>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      1
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      2
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      3
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      4
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      5
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      6
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      7
+    </div>
+  </li>
+  <li
+    className="base draggable-item"
+    draggable={true}
+    onDragEnd={[Function]}
+    onDragOver={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+  >
+    <div
+      style={
+        {
+          "backgroundColor": "white",
+          "border": "1px solid black",
+          "padding": "1rem",
+        }
+      }
+    >
+      Item
+      8
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`Storyshots g/DragAndDrop With Formik Inputs 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <ul
+    className="base drag-and-drop"
+  >
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            1
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-1"
+              name="input-1"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            2
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-2"
+              name="input-2"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            3
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-3"
+              name="input-3"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            4
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-4"
+              name="input-4"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            5
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-5"
+              name="input-5"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            6
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-6"
+              name="input-6"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            7
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-7"
+              name="input-7"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      className="base draggable-item"
+      draggable={true}
+      onDragEnd={[Function]}
+      onDragOver={[Function]}
+      onDragStart={[Function]}
+      onDrop={[Function]}
+    >
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": "var(--gap)",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="ai-icon"
+        >
+          H
+        </span>
+        <div
+          style={
+            {
+              "alignItems": "center",
+              "borderBottom": "1px solid var(--ui-lines)",
+              "display": "flex",
+              "gap": "var(--gap)",
+              "padding": "calc(var(--theme-default-padding) / 2)",
+              "width": "100%",
+            }
+          }
+        >
+          <p
+            style={
+              {
+                "margin": "0",
+              }
+            }
+          >
+            Input
+            8
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="input-8"
+              name="input-8"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
 <div
   className="base expandable-lexical-preview y-paragraph"