@pareto-engineering/design-system 4.2.0 → 4.2.1

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

@@ -32068,13 +32068,17 @@ exports[`Storyshots g/FormBuilder Builder 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="base section"
+          className="base builder-section"
         >
-          <p
-            className="h4"
+          <div
+            className="section-header"
           >
-            Form title
-          </p>
+            <p
+              className="h4"
+            >
+              Form title
+            </p>
+          </div>
           <div
             className="base text-input y-paragraph "
             style={{}}
@@ -32602,181 +32606,439 @@ exports[`Storyshots g/FormBuilder Builder 1`] = `
     Sample Next Button in a Work flow
   </button>,
   <pre>
-    {}
+    {
+  "sections": [
+    {
+      "title": "",
+      "description": "",
+      "key": "section-0",
+      "inputs": [],
+      "orderedInputDragIds": [],
+      "navigation": {
+        "nextSection": "next"
+      }
+    }
+  ]
+}
   </pre>,
 ]
 `;
 
 exports[`Storyshots g/FormBuilder Renderer 1`] = `
-<div
-  className="base form-builder"
->
+[
   <div
-    className="base renderer"
+    className="base form-builder"
   >
-    <form
-      action="#"
-      onReset={[Function]}
-      onSubmit={[Function]}
+    <div
+      className="base renderer"
     >
-      <div
-        className="base section"
+      <form
+        action="#"
+        onReset={[Function]}
+        onSubmit={[Function]}
       >
-        <h3>
-          titlel
-        </h3>
         <div
-          className="base expandable-lexical-preview y-paragraph"
+          className="base section"
         >
+          <p
+            className="h3"
+          >
+            This is a survey of some of the best LLM models out there
+          </p>
           <div
-            className="base editor-input y-paragraph disabled"
-            id="the-bad-ass-input"
-            style={
-              {
-                "--resize": "vertical",
-                "--rows": "10em",
+            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 text-input form-input y-paragraph "
+            style={{}}
           >
             <label
               className="base form-label x-paragraph"
-              htmlFor="instructions"
+              htmlFor="section_0_input_0"
+            >
+              Name the Model
+            </label>
+            <input
+              className="input"
+              conditionalLogic={null}
+              disabled={false}
+              id="section_0_input_0"
+              name="section_0_input_0"
+              onBlur={[Function]}
+              onChange={[Function]}
+              options={[]}
+              required={true}
+              type="text"
+              value=""
             />
-            <div
-              aria-autocomplete="none"
-              aria-readonly={true}
-              className="content-editable"
-              contentEditable={false}
-              id="instructions"
-              name="instructions"
-              role="textbox"
-              spellCheck={true}
+          </div>
+          <div
+            className="base text-area-input form-input y-paragraph"
+          >
+            <label
+              className="base form-label x-paragraph"
+              htmlFor="section_0_input_1"
+            >
+              Describe the Model in detail
+            </label>
+            <textarea
+              className="textarea"
+              disabled={false}
+              id="section_0_input_1"
+              name="section_0_input_1"
+              onBlur={[Function]}
+              onChange={[Function]}
+              rows={10}
+              style={
+                {
+                  "resize": "vertical",
+                }
+              }
+              value=""
             />
+            <div
+              className="base description s-1 x-metadata"
+            >
+              brief model description
+            </div>
           </div>
+        </div>
+        <div
+          className="navigator-container"
+        >
           <button
-            className="base button expand-button ai-icon x-background-far modifierCompact"
+            className="base button x-interactive modifierGhost modifierCompact modifierGradient"
+            disabled={true}
             onClick={[Function]}
             type="button"
           >
-            D
+            Previous
+          </button>
+          <button
+            className="base button x-interactive modifierGradient"
+            type="submit"
+          >
+            Next
           </button>
         </div>
+      </form>
+    </div>
+  </div>,
+  <pre>
+    {}
+  </pre>,
+]
+`;
+
+exports[`Storyshots g/FormBuilder Renderer With Disabled 1`] = `
+[
+  <div
+    className="base form-builder"
+  >
+    <div
+      className="base renderer"
+    >
+      <form
+        action="#"
+        onReset={[Function]}
+        onSubmit={[Function]}
+      >
         <div
-          className="base choices-input form-input"
+          className="base section"
         >
-          <label
-            className="base form-label x-paragraph"
-            htmlFor="section_0_input_0"
+          <p
+            className="h3"
           >
-            Names
-          </label>
+            This is a survey of some of the best LLM models out there
+          </p>
           <div
-            className="choices"
+            className="base expandable-lexical-preview y-paragraph"
           >
             <div
-              className="base choice x-interactive"
+              className="base editor-input y-paragraph disabled"
+              id="the-bad-ass-input"
+              style={
+                {
+                  "--resize": "vertical",
+                  "--rows": "10em",
+                }
+              }
             >
-              <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>
+                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 text-input form-input y-paragraph "
+            style={{}}
+          >
+            <label
+              className="base form-label x-paragraph"
+              htmlFor="section_0_input_0"
+            >
+              Name the Model
+            </label>
+            <input
+              className="input"
+              conditionalLogic={null}
+              disabled={true}
+              id="section_0_input_0"
+              name="section_0_input_0"
+              onBlur={[Function]}
+              onChange={[Function]}
+              options={[]}
+              required={true}
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            className="base text-area-input form-input y-paragraph"
+          >
+            <label
+              className="base form-label x-paragraph"
+              htmlFor="section_0_input_1"
+            >
+              Describe the Model in detail
+            </label>
+            <textarea
+              className="textarea"
+              disabled={true}
+              id="section_0_input_1"
+              name="section_0_input_1"
+              onBlur={[Function]}
+              onChange={[Function]}
+              rows={10}
+              style={
+                {
+                  "resize": "vertical",
+                }
+              }
+              value=""
+            />
             <div
-              className="base choice x-interactive"
+              className="base description s-1 x-metadata"
             >
-              <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>
+              brief model description
             </div>
+          </div>
+        </div>
+        <div
+          className="navigator-container"
+        >
+          <button
+            className="base button x-interactive modifierGhost modifierCompact modifierGradient"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            Previous
+          </button>
+          <button
+            className="base button x-interactive modifierGradient"
+            type="submit"
+          >
+            Next
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>,
+  <pre>
+    {}
+  </pre>,
+]
+`;
+
+exports[`Storyshots g/FormBuilder Renderer With Submit 1`] = `
+[
+  <div
+    className="base form-builder"
+  >
+    <div
+      className="base renderer"
+    >
+      <form
+        action="#"
+        onReset={[Function]}
+        onSubmit={[Function]}
+      >
+        <div
+          className="base section"
+        >
+          <p
+            className="h3"
+          >
+            This is a survey of some of the best LLM models out there
+          </p>
+          <div
+            className="base expandable-lexical-preview y-paragraph"
+          >
             <div
-              className="base choice x-interactive"
+              className="base editor-input y-paragraph disabled"
+              id="the-bad-ass-input"
+              style={
+                {
+                  "--resize": "vertical",
+                  "--rows": "10em",
+                }
+              }
             >
-              <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>
+                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 text-input form-input y-paragraph "
+            style={{}}
+          >
+            <label
+              className="base form-label x-paragraph"
+              htmlFor="section_0_input_0"
+            >
+              Name the Model
+            </label>
+            <input
+              className="input"
+              conditionalLogic={null}
+              disabled={false}
+              id="section_0_input_0"
+              name="section_0_input_0"
+              onBlur={[Function]}
+              onChange={[Function]}
+              options={[]}
+              required={true}
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            className="base text-area-input form-input y-paragraph"
+          >
+            <label
+              className="base form-label x-paragraph"
+              htmlFor="section_0_input_1"
+            >
+              Describe the Model in detail
+            </label>
+            <textarea
+              className="textarea"
+              disabled={false}
+              id="section_0_input_1"
+              name="section_0_input_1"
+              onBlur={[Function]}
+              onChange={[Function]}
+              rows={10}
+              style={
+                {
+                  "resize": "vertical",
+                }
+              }
+              value=""
+            />
             <div
-              className="base choice x-interactive"
+              className="base description s-1 x-metadata"
             >
-              <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>
+              brief model description
             </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"
+        <div
+          className="navigator-container"
         >
-          Next
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
+          <button
+            className="base button x-interactive modifierGhost modifierCompact modifierGradient"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            Previous
+          </button>
+          <button
+            className="base button x-interactive modifierGradient"
+            type="submit"
+          >
+            Next
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>,
+  <pre>
+    {}
+  </pre>,
+]
 `;
 
 exports[`Storyshots r/SwitchRouteMap Base 1`] = `"This component does not need a visual test."`;