Added classes for webform and events search form (#629)

dpc-sdp · Feb 17, 2020 · 1bde179 · 1bde179
1 parent 8db306c
commit 1bde179
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 6 deletions.
diff --git a/packages/ripple-nuxt-tide/lib/core/tide-helper.js b/packages/ripple-nuxt-tide/lib/core/tide-helper.js
@@ -83,3 +83,7 @@ export const getFormattedSize = (fileSize) => {
   const i = Math.floor(Math.log(fileSize) / Math.log(k))
   return parseFloat((fileSize / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
+
+export const stringToClass = (str) => {
+  return str.toLowerCase().replace(/(&\w+?;)/gim, ' ').replace(/[^a-zA-Z0-9\s]/gim, '').replace(/(^\s+)|(\s+$)/gim, '').replace(/\s+/gm, '-')
+}
diff --git a/packages/ripple-nuxt-tide/modules/event/formdata.js b/packages/ripple-nuxt-tide/modules/event/formdata.js
@@ -27,7 +27,7 @@ export default {
               fields: [
                 {
                   type: 'rplchecklist',
-                  styleClasses: ['form-group--col-two'],
+                  styleClasses: ['form-group--col-two', 'rpl-event-filter--category'],
                   label: 'Select an event category',
                   model: 'field_event_category_name',
                   values: eventCategoryValues,
@@ -42,7 +42,7 @@ export default {
                   type: 'input',
                   inputType: 'text',
                   maxlength: 50,
-                  styleClasses: ['form-group--col-two'],
+                  styleClasses: ['form-group--col-two', 'rpl-event-filter--location'],
                   label: 'Location',
                   model: 'location',
                   placeholder: 'Start typing suburb or postcode...',
@@ -62,7 +62,7 @@ export default {
                 {
                   type: 'rpldatepicker',
                   ranged: false,
-                  styleClasses: ['form-group--col-two'],
+                  styleClasses: ['form-group--col-two', 'rpl-event-filter--date'],
                   label: 'Select an event date',
                   model: 'field_event_date_end_value',
                   placeholder: 'DD/MM/YYYY',
@@ -74,7 +74,7 @@ export default {
                 {
                   type: 'rplchecklist',
                   label: 'Event requirements',
-                  styleClasses: ['form-group--col-two'],
+                  styleClasses: ['form-group--col-two', 'rpl-event-filter--requirements'],
                   model: 'field_event_details_event_requirements_name',
                   // TODO: There are no values for this field how can we programmactically hide a field in this instance.
                   values: eventNameValues,

diff --git a/packages/ripple-nuxt-tide/modules/landing-page/tide.config.js b/packages/ripple-nuxt-tide/modules/landing-page/tide.config.js
@@ -272,7 +272,8 @@ module.exports = {
             field: 'field_paragraph_webform',
             filters: ['webform']
           }
-        }
+        },
+        class: ['tide-webform']
       },
 
       'paragraph--card_promotion': {

diff --git a/packages/ripple-nuxt-tide/modules/webform/mapping-filters.js b/packages/ripple-nuxt-tide/modules/webform/mapping-filters.js
@@ -1,6 +1,7 @@
 module.exports = {
   // Convert Drupal webform data struture to Vue Form Generator structure
   webform: async (drupalFormEntity, { mapping }) => {
+    const stringToClass = require('@dpc-sdp/ripple-nuxt-tide/lib/core/tide-helper').stringToClass
     const elements = drupalFormEntity.elements
     // Below data structure is following VFG 2.2.3.
     // `tideId`, `formState` and `messages` are our own custom properties.
@@ -50,7 +51,8 @@ module.exports = {
       const field = {
         type: null,
         model: eName,
-        validator: []
+        validator: [],
+        styleClasses: ['tide-webform-field']
       }
 
       const group = {}
@@ -59,6 +61,8 @@ module.exports = {
       // TODO: If elementName is `reset`, add a custom reset(cancel) button.
       if (element['#title']) {
         field.label = element['#title']
+        const fieldClass = 'tide-webform-field--' + stringToClass(element['#title'])
+        field.styleClasses.push(fieldClass)
       }
 
       if (element['#placeholder']) {

diff --git a/packages/ripple-nuxt-tide/test/unit/tide.test.js b/packages/ripple-nuxt-tide/test/unit/tide.test.js
@@ -114,6 +114,20 @@ describe('tide helpers', () => {
     })
     /* eslint-enable indent */
   })
+
+  describe('stringToClass', () => {
+    /* eslint-disable indent */
+    test.each`
+      text                                                | expected
+      ${'Anchor&nbsp;&amp;&nbsp;&copy;&nbsp;Link'}        | ${'anchor-link'}
+      ${'Anchor`~!@#$%^&*()-_=+{}[]\\|;:\'"<>,.?/\nLink'} | ${'anchor-link'}
+      ${'   ANCHOR   LINK   '}                            | ${'anchor-link'}
+      ${'1234567890'}                                     | ${'1234567890'}
+    `('returns $expected for $text', ({ text, expected }) => {
+      expect(helper.stringToClass(text)).toBe(expected)
+    })
+    /* eslint-enable indent */
+  })
 })
 
 describe('tide', () => {