@pareto-engineering/design-system 4.0.0 → 4.1.0

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

@@ -11606,7 +11606,63 @@ exports[`Storyshots a/Tip Base 1`] = `
 </p>
 `;
 
-exports[`Storyshots a/ToggleSwitch Base 1`] = `
+exports[`Storyshots a/ToggleSwitch Multiple 1`] = `
+[
+  <button
+    className="base toggle-switch"
+    style={
+      {
+        "--size": undefined,
+      }
+    }
+    type="button"
+  >
+    <input
+      id="option1"
+      type="checkbox"
+    />
+    <label
+      htmlFor="option1"
+    />
+  </button>,
+  <button
+    className="base toggle-switch"
+    style={
+      {
+        "--size": undefined,
+      }
+    }
+    type="button"
+  >
+    <input
+      id="option2"
+      type="checkbox"
+    />
+    <label
+      htmlFor="option2"
+    />
+  </button>,
+  <button
+    className="base toggle-switch"
+    style={
+      {
+        "--size": undefined,
+      }
+    }
+    type="button"
+  >
+    <input
+      id="option3"
+      type="checkbox"
+    />
+    <label
+      htmlFor="option3"
+    />
+  </button>,
+]
+`;
+
+exports[`Storyshots a/ToggleSwitch Single 1`] = `
 <button
   className="base toggle-switch"
   style={
@@ -26922,6 +26978,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
         className="content-editable"
         contentEditable={true}
         id="instructions"
+        name="instructions"
         role="textbox"
         spellCheck={true}
       />
@@ -26977,6 +27034,7 @@ exports[`Storyshots f/fields/EditorInput Disabled 1`] = `
         className="content-editable"
         contentEditable={false}
         id="instructions"
+        name="instructions"
         role="textbox"
         spellCheck={true}
       />
@@ -27400,6 +27458,7 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
         className="content-editable"
         contentEditable={true}
         id="instructions"
+        name="instructions"
         role="textbox"
         spellCheck={true}
       />
@@ -30306,6 +30365,7 @@ exports[`Storyshots f/fields/SelectInput With Default No Override 1`] = `
           name="workType"
           onBlur={[Function]}
           onChange={[Function]}
+          testOverride={true}
           value="Training"
         >
           <option
@@ -31973,6 +32033,7 @@ exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
       className="content-editable"
       contentEditable={false}
       id="taskDescription"
+      name="taskDescription"
       role="textbox"
       spellCheck={true}
     />
@@ -31987,6 +32048,737 @@ exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
 </div>
 `;
 
+exports[`Storyshots g/FormBuilder Builder 1`] = `
+[
+  <div
+    className="base form-builder"
+  >
+    <div
+      className="base builder"
+    >
+      <p
+        className="h3"
+      >
+        Form Builder
+      </p>
+      <form
+        action="#"
+        id="some-sample-form-id"
+        onReset={[Function]}
+        onSubmit={[Function]}
+      >
+        <div
+          className="base section"
+        >
+          <p
+            className="h4"
+          >
+            Form title
+          </p>
+          <div
+            className="base text-input y-paragraph "
+            style={{}}
+          >
+            <input
+              className="input"
+              disabled={false}
+              id="sections.0.title"
+              name="sections.0.title"
+              onBlur={[Function]}
+              onChange={[Function]}
+              placeholder="Title of the form"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            className="base editor-input y-paragraph"
+            style={
+              {
+                "--resize": "vertical",
+                "--rows": "10em",
+              }
+            }
+          >
+            <label
+              className="base form-label x-paragraph"
+              htmlFor="sections.0.description"
+            >
+              Form description
+            </label>
+            <div
+              className="base toolbar-plugin x-background-far"
+            >
+              <div
+                className="group"
+              >
+                <button
+                  className="ai-icon"
+                  disabled={true}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  A
+                </button>
+                <button
+                  className="ai-icon"
+                  disabled={true}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  B
+                </button>
+              </div>
+              <button
+                className="base block-format-drop-down group"
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="ai-icon"
+                >
+                  N
+                </span>
+                <span>
+                  Normal
+                </span>
+                <span
+                  className="icon"
+                >
+                  V
+                </span>
+              </button>
+              <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>
+              </div>
+              <button
+                className="base font-size-drop-down group"
+                onClick={[Function]}
+                type="button"
+              >
+                <span>
+                  15px
+                </span>
+                <span
+                  className="icon"
+                >
+                  V
+                </span>
+              </button>
+              <div
+                className="group"
+              >
+                <div
+                  className="base color-picker"
+                >
+                  <button
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="icon"
+                    >
+                      '
+                    </span>
+                    <span
+                      className="icon"
+                    >
+                      V
+                    </span>
+                  </button>
+                  <div
+                    className="base popover x-background-far bottom left"
+                  >
+                    <div
+                      className="rcp-root rcp"
+                    >
+                      <div
+                        className="rcp-interactive"
+                        onPointerDown={[Function]}
+                      >
+                        <div
+                          className="rcp-saturation"
+                          style={
+                            {
+                              "backgroundColor": "hsl(0 100% 50%)",
+                              "height": 200,
+                            }
+                          }
+                        >
+                          <div
+                            className="rcp-saturation-cursor"
+                            style={
+                              {
+                                "backgroundColor": "rgb(255 255 255)",
+                                "left": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                        </div>
+                      </div>
+                      <div
+                        className="rcp-body"
+                      >
+                        <section
+                          className="rcp-section"
+                        >
+                          <div
+                            className="rcp-interactive"
+                            onPointerDown={[Function]}
+                          >
+                            <div
+                              className="rcp-hue"
+                            >
+                              <div
+                                className="rcp-hue-cursor"
+                                style={
+                                  {
+                                    "backgroundColor": "hsl(0 100% 50%)",
+                                    "left": 0,
+                                  }
+                                }
+                              />
+                            </div>
+                          </div>
+                          <div
+                            className="rcp-interactive"
+                            onPointerDown={[Function]}
+                          >
+                            <div
+                              className="rcp-alpha"
+                              style={
+                                {
+                                  "background": "linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 1)) top left / auto auto,
+                      conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
+                      repeat",
+                                }
+                              }
+                            >
+                              <div
+                                className="rcp-alpha-cursor"
+                                style={
+                                  {
+                                    "background": "linear-gradient(to right, rgb(255 255 255 / 1), rgb(255 255 255 / 1)) top left / auto auto,
+                        conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) -5px 2px / 12px 12px
+                        repeat",
+                                    "left": 1,
+                                  }
+                                }
+                              />
+                            </div>
+                          </div>
+                        </section>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="base color-picker"
+                >
+                  <button
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="icon"
+                    >
+                      #
+                    </span>
+                    <span
+                      className="icon"
+                    >
+                      V
+                    </span>
+                  </button>
+                  <div
+                    className="base popover x-background-far bottom left"
+                  >
+                    <div
+                      className="rcp-root rcp"
+                    >
+                      <div
+                        className="rcp-interactive"
+                        onPointerDown={[Function]}
+                      >
+                        <div
+                          className="rcp-saturation"
+                          style={
+                            {
+                              "backgroundColor": "hsl(0 100% 50%)",
+                              "height": 200,
+                            }
+                          }
+                        >
+                          <div
+                            className="rcp-saturation-cursor"
+                            style={
+                              {
+                                "backgroundColor": "rgb(255 255 255)",
+                                "left": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                        </div>
+                      </div>
+                      <div
+                        className="rcp-body"
+                      >
+                        <section
+                          className="rcp-section"
+                        >
+                          <div
+                            className="rcp-interactive"
+                            onPointerDown={[Function]}
+                          >
+                            <div
+                              className="rcp-hue"
+                            >
+                              <div
+                                className="rcp-hue-cursor"
+                                style={
+                                  {
+                                    "backgroundColor": "hsl(0 100% 50%)",
+                                    "left": 0,
+                                  }
+                                }
+                              />
+                            </div>
+                          </div>
+                          <div
+                            className="rcp-interactive"
+                            onPointerDown={[Function]}
+                          >
+                            <div
+                              className="rcp-alpha"
+                              style={
+                                {
+                                  "background": "linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 1)) top left / auto auto,
+                      conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
+                      repeat",
+                                }
+                              }
+                            >
+                              <div
+                                className="rcp-alpha-cursor"
+                                style={
+                                  {
+                                    "background": "linear-gradient(to right, rgb(255 255 255 / 1), rgb(255 255 255 / 1)) top left / auto auto,
+                        conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) -5px 2px / 12px 12px
+                        repeat",
+                                    "left": 1,
+                                  }
+                                }
+                              />
+                            </div>
+                          </div>
+                        </section>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </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>
+            <div
+              className="content-editable"
+              contentEditable={true}
+              id="sections.0.description"
+              name="sections.0.description"
+              role="textbox"
+              spellCheck={true}
+            />
+          </div>
+          <form
+            action="#"
+            onReset={[Function]}
+            onSubmit={[Function]}
+          >
+            <ul
+              className="base drag-and-drop"
+            />
+            <button
+              className="add-question-cta"
+              onClick={[Function]}
+              type="button"
+            >
+              <div
+                className="icon-container"
+              >
+                <span
+                  className="icon "
+                >
+                  +
+                </span>
+              </div>
+              Add question
+            </button>
+          </form>
+        </div>
+        <div
+          className="section-footer"
+        >
+          <button
+            className="add-section-cta"
+            onClick={[Function]}
+            type="button"
+          >
+            <div
+              className="icon-container"
+            >
+              <span
+                className="icon"
+              >
+                +
+              </span>
+            </div>
+            <span
+              className="text x-paragraph c-x"
+            >
+              Add Section
+            </span>
+          </button>
+          <div
+            className="section-navigation"
+          >
+            <span
+              className="x-paragraph c-x"
+            >
+              After Section
+               
+              1
+            </span>
+            <div
+              className="base select-input"
+            >
+              <div
+                className="base single"
+              >
+                <div
+                  className="select-wrapper"
+                >
+                  <select
+                    className="input y-paragraph"
+                    disabled={false}
+                    id="sections.0.navigation.nextSection"
+                    name="sections.0.navigation.nextSection"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    value="next"
+                  >
+                    <option
+                      disabled={true}
+                      value=""
+                    >
+                      Select section
+                    </option>
+                    <option
+                      disabled={false}
+                      value="next"
+                    >
+                      Continue to next section
+                    </option>
+                    <option
+                      disabled={false}
+                      value={0}
+                    >
+                      Go to Untitled Section 1
+                    </option>
+                    <option
+                      disabled={false}
+                      value="submit"
+                    >
+                      Submit form
+                    </option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>,
+  <button
+    className="base button x-main"
+    form="some-sample-form-id"
+    type="submit"
+  >
+    Sample Next Button in a Work flow
+  </button>,
+  <pre>
+    {}
+  </pre>,
+]
+`;
+
+exports[`Storyshots g/FormBuilder Renderer 1`] = `
+<div
+  className="base form-builder"
+>
+  <div
+    className="base renderer"
+  >
+    <form
+      action="#"
+      onReset={[Function]}
+      onSubmit={[Function]}
+    >
+      <div
+        className="base section"
+      >
+        <h3>
+          titlel
+        </h3>
+        <div
+          className="base expandable-lexical-preview y-paragraph"
+        >
+          <div
+            className="base editor-input y-paragraph disabled"
+            id="the-bad-ass-input"
+            style={
+              {
+                "--resize": "vertical",
+                "--rows": "10em",
+              }
+            }
+          >
+            <label
+              className="base form-label x-paragraph"
+              htmlFor="instructions"
+            />
+            <div
+              aria-autocomplete="none"
+              aria-readonly={true}
+              className="content-editable"
+              contentEditable={false}
+              id="instructions"
+              name="instructions"
+              role="textbox"
+              spellCheck={true}
+            />
+          </div>
+          <button
+            className="base button expand-button ai-icon x-background-far modifierCompact"
+            onClick={[Function]}
+            type="button"
+          >
+            D
+          </button>
+        </div>
+        <div
+          className="base choices-input form-input"
+        >
+          <label
+            className="base form-label x-paragraph"
+            htmlFor="section_0_input_0"
+          >
+            Names
+          </label>
+          <div
+            className="choices"
+          >
+            <div
+              className="base choice x-interactive"
+            >
+              <input
+                checked={false}
+                disabled={false}
+                id="section_0_input_0-James"
+                name="section_0_input_0"
+                onBlur={[Function]}
+                onChange={[Function]}
+                type="checkbox"
+                value="James"
+              />
+              <label
+                className=""
+                htmlFor="section_0_input_0-James"
+              >
+                James
+              </label>
+            </div>
+            <div
+              className="base choice x-interactive"
+            >
+              <input
+                checked={false}
+                disabled={false}
+                id="section_0_input_0-Coigo"
+                name="section_0_input_0"
+                onBlur={[Function]}
+                onChange={[Function]}
+                type="checkbox"
+                value="Coigo"
+              />
+              <label
+                className=""
+                htmlFor="section_0_input_0-Coigo"
+              >
+                Coigo
+              </label>
+            </div>
+            <div
+              className="base choice x-interactive"
+            >
+              <input
+                checked={false}
+                disabled={false}
+                id="section_0_input_0-Nyanjui"
+                name="section_0_input_0"
+                onBlur={[Function]}
+                onChange={[Function]}
+                type="checkbox"
+                value="Nyanjui"
+              />
+              <label
+                className=""
+                htmlFor="section_0_input_0-Nyanjui"
+              >
+                Nyanjui
+              </label>
+            </div>
+            <div
+              className="base choice x-interactive"
+            >
+              <input
+                checked={false}
+                disabled={false}
+                id="section_0_input_0-Masalia"
+                name="section_0_input_0"
+                onBlur={[Function]}
+                onChange={[Function]}
+                type="checkbox"
+                value="Masalia"
+              />
+              <label
+                className=""
+                htmlFor="section_0_input_0-Masalia"
+              >
+                Masalia
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="navigator-container"
+      >
+        <button
+          className="base button x-interactive modifierGhost modifierGradient"
+          disabled={true}
+          onClick={[Function]}
+          type="button"
+        >
+          Previous
+        </button>
+        <button
+          className="base button x-interactive modifierGradient"
+          type="submit"
+        >
+          Next
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;
+
 exports[`Storyshots r/SwitchRouteMap Base 1`] = `"This component does not need a visual test."`;
 
 exports[`Storyshots r/common/PrivateRoute Base 1`] = `"This component does not need a visual test."`;