@pareto-engineering/design-system 4.0.0-alpha.39 → 4.0.0-alpha.41

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

@@ -2280,6 +2280,41 @@ exports[`Storyshots a/People One Person 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/People Without Role 1`] = `
+<div
+  className="x-background-far b-x v1 p-v"
+>
+  <div
+    className="base people u1"
+    style={
+      {
+        "--column-width": "12em",
+        "--image-size": "3em",
+      }
+    }
+  >
+    <div
+      className="base person y-background4"
+    >
+      <img
+        alt="Camillie Arigo, undefined"
+        className="image v50 mr-v"
+        src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg"
+      />
+      <div
+        className="details"
+      >
+        <p
+          className="name"
+        >
+          Camillie Arigo
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/Popover Bottom Left 1`] = `
 <main
   className="u1 ph-u"
@@ -15861,7 +15896,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     Search for a team
   </label>
   <div
-    className="base input-wrapper base combobox form-input"
+    className="base input-wrapper base combobox form-input y-interactive"
     style={
       {
         "--column-span": "var(--columns)",
@@ -18378,6 +18413,670 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/EditorInput Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="grid"
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="instructions"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      Project Instructions
+    </label>
+    <div
+      className="base input-wrapper base editor-input y-paragraph"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+          "--resize": "vertical",
+          "--rows": "10em",
+        }
+      }
+    >
+      <div
+        className="base toolbar"
+      >
+        <div
+          className="group"
+        >
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              |
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              }
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ~
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ?
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ]
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              .
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              -
+            </span>
+          </button>
+        </div>
+        <div
+          className="group"
+        >
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ^
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              _
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              \`
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              {
+            </span>
+          </button>
+        </div>
+        <div
+          className="group"
+        >
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              \\
+            </span>
+          </button>
+          <button
+            className="flip"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              \\
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        className="content-editable"
+        contentEditable={true}
+        id="instructions"
+        role="textbox"
+        spellCheck={true}
+      />
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/EditorInput Disabled 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="grid"
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="instructions"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      Project Instructions
+    </label>
+    <div
+      className="base input-wrapper base editor-input y-paragraph disabled"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+          "--resize": "vertical",
+          "--rows": "10em",
+        }
+      }
+    >
+      <div
+        aria-autocomplete="none"
+        aria-readonly={true}
+        className="content-editable"
+        contentEditable={false}
+        id="instructions"
+        role="textbox"
+        spellCheck={true}
+      />
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/EditorInput On Single Row 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="grid"
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="instructions"
+      style={
+        {
+          "--column-span": 4,
+          "--column-span-md": 4,
+        }
+      }
+    >
+      Project Instructions
+    </label>
+    <div
+      className="base input-wrapper base editor-input y-paragraph"
+      style={
+        {
+          "--column-span": 4,
+          "--column-span-md": 10,
+          "--resize": "vertical",
+          "--rows": "10em",
+        }
+      }
+    >
+      <div
+        className="base toolbar"
+      >
+        <div
+          className="group"
+        >
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              |
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              }
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ~
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ?
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ]
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              .
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              -
+            </span>
+          </button>
+        </div>
+        <div
+          className="group"
+        >
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ^
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              _
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              \`
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              {
+            </span>
+          </button>
+        </div>
+        <div
+          className="group"
+        >
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              \\
+            </span>
+          </button>
+          <button
+            className="flip"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              \\
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        className="content-editable"
+        contentEditable={true}
+        id="instructions"
+        role="textbox"
+        spellCheck={true}
+      />
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/EditorInput Optional 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="grid"
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="instructions"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+        }
+      }
+    >
+      Project Instructions
+       (Optional)
+    </label>
+    <div
+      className="base input-wrapper base editor-input y-paragraph"
+      style={
+        {
+          "--column-span": "var(--columns)",
+          "--column-span-md": "var(--columns)",
+          "--resize": "vertical",
+          "--rows": "10em",
+        }
+      }
+    >
+      <div
+        className="base toolbar"
+      >
+        <div
+          className="group"
+        >
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              |
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              }
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ~
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ?
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ]
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              .
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              -
+            </span>
+          </button>
+        </div>
+        <div
+          className="group"
+        >
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              ^
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              _
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              \`
+            </span>
+          </button>
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              {
+            </span>
+          </button>
+        </div>
+        <div
+          className="group"
+        >
+          <button
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              \\
+            </span>
+          </button>
+          <button
+            className="flip"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="icon"
+            >
+              \\
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        className="content-editable"
+        contentEditable={true}
+        id="instructions"
+        role="textbox"
+        spellCheck={true}
+      />
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/LinkInput Base 1`] = `
 <form
   action="#"
@@ -19300,7 +19999,7 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
        (Optional)
     </label>
     <div
-      className="base input-wrapper base combobox"
+      className="base input-wrapper base combobox y-interactive"
       style={
         {
           "--column-span": "var(--columns)",
@@ -19382,7 +20081,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
       Search for a team
     </label>
     <div
-      className="base input-wrapper base combobox"
+      className="base input-wrapper base combobox y-interactive"
       style={
         {
           "--column-span": "var(--columns)",
@@ -19464,7 +20163,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
       Search for a team
     </label>
     <div
-      className="base input-wrapper base combobox"
+      className="base input-wrapper base combobox y-interactive"
       style={
         {
           "--column-span": "var(--columns)",