@pareto-engineering/design-system 4.3.4 → 4.3.7-alpha.2

package/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx

@@ -22,16 +22,25 @@ const baseClassName = styleNames.base
 const componentClassName = 'renderer'
 
 const reconstructFormDataWithValues = (formData, values) => {
-  const newData = { ...formData }
+  const valuesMap = {}
   Object.keys(values).forEach(async (key) => {
-    const [sectionIdx, inputIdx] = key.match(/\d+/g).map(Number)
     if (key.includes('files')) {
       const files = values[key].map((file) => URL.createObjectURL(file))
-      newData.sections[sectionIdx].inputs[inputIdx].files = files
+      valuesMap[key] = files
     } else {
-      newData.sections[sectionIdx].inputs[inputIdx].value = values[key]
+      valuesMap[key] = values[key]
     }
   })
+  const newData = {
+    ...formData,
+    sections:formData.sections.map((section) => ({
+      ...section,
+      inputs:section.inputs.map((input) => ({
+        ...input,
+        value:valuesMap[input.name] || input.value,
+      })),
+    })),
+  }
   return newData
 }
 
@@ -74,10 +83,9 @@ const Renderer = ({
     setUpdatedFormData(formData)
   }, [formData])
 
-  const initialValues = formData.sections.reduce((acc, section, sectionIndex) => {
-    section.inputs.forEach((input, inputIndex) => {
-      const inputName = `section_${sectionIndex}_input_${inputIndex}`
-      acc[inputName] = input.value || ''
+  const initialValues = formData.sections.reduce((acc, section) => {
+    section.inputs.forEach((input) => {
+      acc[input.name] = input.value || ''
     })
     return acc
   }, {})

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

@@ -10466,6 +10466,355 @@ exports[`Storyshots a/MetaCard With Blur 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/Notification Base 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "100px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification x-deepblue"
+  >
+    <div
+      className="message-container"
+    >
+      <span
+        className="icon"
+      >
+        g
+      </span>
+      <span
+        className="message"
+      >
+        This is a notification with a custom color
+      </span>
+    </div>
+    <button
+      className="base button close x-deepblue modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="icon"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Notification Error 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "100px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification x-error"
+  >
+    <div
+      className="message-container"
+    >
+      <span
+        className="icon"
+      >
+        g
+      </span>
+      <span
+        className="message"
+      >
+        This is an error notification
+      </span>
+    </div>
+    <button
+      className="base button close x-error modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="icon"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Notification Info 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "100px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification x-in-progress"
+  >
+    <div
+      className="message-container"
+    >
+      <span
+        className="icon"
+      >
+        h
+      </span>
+      <span
+        className="message"
+      >
+        This is an info notification
+      </span>
+    </div>
+    <button
+      className="base button close x-in-progress modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="icon"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Notification Success 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "100px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification x-success"
+  >
+    <div
+      className="message-container"
+    >
+      <span
+        className="icon"
+      >
+        I
+      </span>
+      <span
+        className="message"
+      >
+        This is a success notification
+      </span>
+    </div>
+    <button
+      className="base button close x-success modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="icon"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Notification Warning 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "100px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification x-blocked"
+  >
+    <div
+      className="message-container"
+    >
+      <span
+        className="icon"
+      >
+        x
+      </span>
+      <span
+        className="message"
+      >
+        This is a warning notification
+      </span>
+    </div>
+    <button
+      className="base button close x-blocked modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="icon"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/NotificationStack Base 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "500px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification-stack"
+  >
+    <div
+      className="base notification stacked x-error"
+    >
+      <div
+        className="message-container"
+      >
+        <span
+          className="icon"
+        >
+          g
+        </span>
+        <span
+          className="message"
+        >
+          This is an error notification
+        </span>
+      </div>
+      <button
+        className="base button close x-error modifierCompact"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="icon"
+        >
+          Y
+        </span>
+      </button>
+    </div>
+    <div
+      className="base notification stacked x-blocked"
+    >
+      <div
+        className="message-container"
+      >
+        <span
+          className="icon"
+        >
+          x
+        </span>
+        <span
+          className="message"
+        >
+          This is a warning notification
+        </span>
+      </div>
+      <button
+        className="base button close x-blocked modifierCompact"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="icon"
+        >
+          Y
+        </span>
+      </button>
+    </div>
+    <div
+      className="base notification stacked x-in-progress"
+    >
+      <div
+        className="message-container"
+      >
+        <span
+          className="icon"
+        >
+          h
+        </span>
+        <span
+          className="message"
+        >
+          This is an info notification
+        </span>
+      </div>
+      <button
+        className="base button close x-in-progress modifierCompact"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="icon"
+        >
+          Y
+        </span>
+      </button>
+    </div>
+    <div
+      className="base notification stacked x-success"
+    >
+      <div
+        className="message-container"
+      >
+        <span
+          className="icon"
+        >
+          I
+        </span>
+        <span
+          className="message"
+        >
+          This is a success notification
+        </span>
+      </div>
+      <button
+        className="base button close x-success modifierCompact"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="icon"
+        >
+          Y
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/People Base 1`] = `
 <div
   className="x-background-far b-x v1 p-v"