[SDPA-1166] Form alerts. (#451)

* [SDPA-1166] Fix to form alerts. * Form alert content was being overridden by a v-html="" property. Message inserted within form-alert slot. * 'Error' color is now 'Danger' - Add support for both 'danger' and 'error' variant for backwards compatibility. * Added a storybook page to test alerts. * [SDPA-1166] Add storybook for 'Form Submission Alerts' * [SDPA-1166] Updated text field name to better reflect use.
dpc-sdp · Jul 25, 2019 · ec98687 · ec98687
1 parent e4f4129
commit ec98687
Show file tree

Hide file tree

Showing 4 changed files with 215 additions and 4 deletions.
diff --git a/packages/components/Molecules/Form/formAlert.vue b/packages/components/Molecules/Form/formAlert.vue
@@ -26,21 +26,25 @@ export default {
       return this.getValues().color
     },
     classes () {
-      return [ 'rpl-form-alert--' + this.variant ]
+      const suffix = this.getValues().classSuffix
+      return suffix ? 'rpl-form-alert--' + this.getValues().classSuffix : null
     }
   },
   methods: {
     getValues () {
-      let icon, color
+      let icon, color, classSuffix
       switch (this.variant) {
         case 'success':
           icon = 'success'
           color = 'success'
+          classSuffix = 'success'
           break
 
+        case 'error':
         case 'danger':
           icon = 'alert_information'
           color = 'danger'
+          classSuffix = 'danger'
           break
 
         default:
@@ -49,7 +53,8 @@ export default {
       }
       return {
         icon,
-        color
+        color,
+        classSuffix
       }
     }
   }

diff --git a/packages/components/Molecules/Form/index.vue b/packages/components/Molecules/Form/index.vue
@@ -1,7 +1,8 @@
 <template>
   <form class="rpl-form" @submit="onSubmit">
     <h3 class="rpl-form__title" v-if="title">{{title}}</h3>
-    <rpl-form-alert v-if="formData.formState.response && formData.formState.response.message" :variant="formData.formState.response.status" v-html="formData.formState.response.message">
+    <rpl-form-alert v-if="formData.formState.response && formData.formState.response.message" :variant="formData.formState.response.status">
+      <span v-html="formData.formState.response.message"></span>
     </rpl-form-alert>
     <vue-form-generator
       :schema="formData.schema"

diff --git a/packages/components/Molecules/Form/stories.js b/packages/components/Molecules/Form/stories.js
@@ -300,3 +300,64 @@ storiesOf('Molecules/Form', module)
       }
     }
   }))
+  .add('Submission Alerts', () => ({
+    components: { RplForm },
+    template: `<rpl-form :formData="formData" :submitHandler="submitHandler" :title="title"></rpl-form>`,
+    data () {
+      return {
+        title: 'Submission Alerts',
+        isNewModel: true,
+        options: {
+          validateAfterChanged: true,
+          validateAfterLoad: false
+        },
+        formData: {
+          model: {
+            submissionType: 'Success',
+            message: 'Thank you! Your response has been submitted.'
+          },
+          schema: {
+            fields: [
+              {
+                type: 'radios',
+                label: 'Alert type',
+                model: 'submissionType',
+                values: [
+                  'Success',
+                  'Error',
+                  'Other'
+                ]
+              },
+              {
+                type: 'input',
+                inputType: 'text',
+                label: 'Message',
+                model: 'message'
+              },
+              {
+                type: 'rplsubmitloader',
+                buttonText: 'Submit',
+                loading: false,
+                autoUpdate: true
+              }
+            ]
+          },
+          formState: {}
+        }
+      }
+    },
+    methods: {
+      submitHandler () {
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            const status = this.formData.model.submissionType.toLowerCase()
+            const message = this.formData.model.message
+            this.formData.formState = {
+              response: { status, message }
+            }
+            resolve()
+          }, 250)
+        })
+      }
+    }
+  }))
diff --git a/src/test/__snapshots__/storyshots.test.js.snap b/src/test/__snapshots__/storyshots.test.js.snap
@@ -5200,6 +5200,150 @@ exports[`RippleStoryshots Molecules/Form Default 1`] = `
 </form>
 `;
 
+exports[`RippleStoryshots Molecules/Form Submission Alerts 1`] = `
+<form
+  class="rpl-form"
+>
+  <h3
+    class="rpl-form__title"
+  >
+    Submission Alerts
+  </h3>
+   
+  <!---->
+   
+  <div
+    class="vue-form-generator"
+  >
+    <fieldset>
+      <div
+        class="form-group field-radios"
+      >
+        <label
+          for="alert-type"
+        >
+          <span>
+            Alert type
+          </span>
+           
+          <!---->
+        </label>
+         
+        <div
+          class="field-wrap"
+        >
+          <div
+            class="radio-list"
+          >
+            <label
+              class="is-checked"
+            >
+              <input
+                id="alert-type-12"
+                name="submissionType"
+                type="radio"
+                value="Success"
+              />
+              Success
+            </label>
+            <label
+              class=""
+            >
+              <input
+                id="alert-type-13"
+                name="submissionType"
+                type="radio"
+                value="Error"
+              />
+              Error
+            </label>
+            <label
+              class=""
+            >
+              <input
+                id="alert-type-14"
+                name="submissionType"
+                type="radio"
+                value="Other"
+              />
+              Other
+            </label>
+          </div>
+           
+          <!---->
+        </div>
+         
+        <!---->
+         
+        <!---->
+      </div>
+      <div
+        class="form-group field-input"
+      >
+        <label
+          for="message"
+        >
+          <span>
+            Message
+          </span>
+           
+          <!---->
+        </label>
+         
+        <div
+          class="field-wrap"
+        >
+          <div
+            class="wrapper"
+          >
+            <input
+              class="form-control"
+              id="message"
+              type="text"
+            />
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <!---->
+         
+        <!---->
+      </div>
+      <div
+        class="form-group field-rplsubmitloader"
+      >
+        <!---->
+         
+        <div
+          class="field-wrap"
+        >
+          <button
+            class="rpl-submit-loader form-control"
+            type="submit"
+          >
+            <span
+              class="rpl-submit-loader__text"
+            >
+              Submit
+            </span>
+             
+            <!---->
+          </button>
+           
+          <!---->
+        </div>
+         
+        <!---->
+         
+        <!---->
+      </div>
+    </fieldset>
+  </div>
+</form>
+`;
+
 exports[`RippleStoryshots Molecules/Layout Base Layout 1`] = `
 <div
   class="rpl-site-layout"