feat(@dpc-sdp/ripple-ui-forms): add webform autocomplete attribute su…

…pport
dpc-sdp · Sep 4, 2024 · 2e21be5 · 2e21be5
1 parent cd987b4
commit 2e21be5
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 0 deletions.
diff --git a/examples/nuxt-app/test/features/landingpage/forms.feature b/examples/nuxt-app/test/features/landingpage/forms.feature
@@ -40,6 +40,11 @@ Feature: Forms
       | help               | required |
       | Enter your message | true     |
     Then a hidden field named "site_section" should exist with the value "DPC"
+    And the following field attributes should exist
+      | field     | attribute    | value |
+      | Last name | autocomplete | on    |
+      | Role      | autocomplete | off   |
+      | Email     | autocomplete | email |
 
   @mockserver
   Scenario: Error summary

diff --git a/examples/nuxt-app/test/fixtures/landingpage/full-form.json b/examples/nuxt-app/test/fixtures/landingpage/full-form.json
@@ -74,6 +74,7 @@
             "$formkit": "RplFormText",
             "name": "last_name",
             "label": "Last name",
+            "autocomplete": "on",
             "id": "last_name",
             "validation": "",
             "validationMessages": {}
@@ -84,6 +85,7 @@
             "label": "Role",
             "id": "role",
             "help": "Enter your role",
+            "autocomplete": "off",
             "counter": "word",
             "counterMin": 0,
             "counterMax": 5,
@@ -97,6 +99,7 @@
             "name": "email",
             "label": "Email",
             "id": "email",
+            "autocomplete": "email",
             "validation": "email",
             "validationMessages": {
               "email": "Email must be a valid email address"

diff --git a/packages/ripple-test-utils/step_definitions/components/forms.ts b/packages/ripple-test-utils/step_definitions/components/forms.ts
@@ -349,6 +349,19 @@ Then(
   }
 )
 
+Then('the following field attributes should exist', (dataTable: DataTable) => {
+  const table = dataTable.hashes()
+
+  table.forEach((row) => {
+    cy.get('label.rpl-form-label')
+      .contains(row.field)
+      .closest('.rpl-form__outer')
+      .as('field')
+
+    cy.get('@field').find('input').should('have.attr', row.attribute, row.value)
+  })
+})
+
 // Extended
 Then(
   'a field labelled {string} should exist with the CSS class {string}',

diff --git a/packages/ripple-tide-webform/mapping/webforms-mapping.ts b/packages/ripple-tide-webform/mapping/webforms-mapping.ts
@@ -52,6 +52,7 @@ export const getFormSchemaFromMapping = async (
           id: fieldID,
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
+          autocomplete: field['#autocomplete'],
           ...getValidationAndConditionals(field),
           ...getInputIcons(field)
         }
@@ -67,6 +68,7 @@ export const getFormSchemaFromMapping = async (
           id: fieldID,
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
+          autocomplete: field['#autocomplete'],
           ...getValidationAndConditionals(field),
           ...getInputIcons(field)
         }
@@ -82,6 +84,7 @@ export const getFormSchemaFromMapping = async (
           id: fieldID,
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
+          autocomplete: field['#autocomplete'],
           min: field['#min'],
           max: field['#max'],
           step: field['#step'],
@@ -100,6 +103,7 @@ export const getFormSchemaFromMapping = async (
           id: fieldID,
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
+          autocomplete: field['#autocomplete'],
           ...getValidationAndConditionals(field),
           ...getInputIcons(field)
         }
@@ -115,6 +119,7 @@ export const getFormSchemaFromMapping = async (
           id: fieldID,
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
+          autocomplete: field['#autocomplete'],
           ...getValidationAndConditionals(field),
           ...getInputIcons(field)
         }
@@ -131,6 +136,7 @@ export const getFormSchemaFromMapping = async (
           rows: field['#rows'],
           help: field['#description'] || field['#help_title'],
           value: field['#default_value'],
+          autocomplete: field['#autocomplete'],
           ...getValidationAndConditionals(field)
         }
         break

diff --git a/packages/ripple-ui-forms/src/inputs/email.ts b/packages/ripple-ui-forms/src/inputs/email.ts
@@ -40,6 +40,7 @@ export const email: FormKitTypeDefinition = {
   props: [
     ...minMaxProps,
     'placeholder',
+    'autocomplete',
     'validationMeta',
     'columnClasses',
     'pii'

diff --git a/packages/ripple-ui-forms/src/inputs/input-utils.ts b/packages/ripple-ui-forms/src/inputs/input-utils.ts
@@ -150,6 +150,7 @@ export const defaultRplFormInputProps = {
   prefixIcon: '$node.props.prefixIcon',
   suffixIcon: '$node.props.suffixIcon',
   value: '$_value',
+  autocomplete: '$node.props.autocomplete',
   disabled: '$node.context.disabled',
   placeholder: '$node.context.placeholder',
   options: '$node.context.options',

diff --git a/packages/ripple-ui-forms/src/inputs/number.ts b/packages/ripple-ui-forms/src/inputs/number.ts
@@ -44,6 +44,7 @@ export const number: FormKitTypeDefinition = {
     'max',
     'step',
     'placeholder',
+    'autocomplete',
     'validationMeta',
     'columnClasses',
     'pii',

diff --git a/packages/ripple-ui-forms/src/inputs/tel.ts b/packages/ripple-ui-forms/src/inputs/tel.ts
@@ -40,6 +40,7 @@ export const tel: FormKitTypeDefinition = {
   props: [
     ...minMaxProps,
     'placeholder',
+    'autocomplete',
     'validationMeta',
     'columnClasses',
     'pii'

diff --git a/packages/ripple-ui-forms/src/inputs/text.ts b/packages/ripple-ui-forms/src/inputs/text.ts
@@ -44,6 +44,7 @@ export const text: FormKitTypeDefinition = {
     ...minMaxProps,
     ...counterProps,
     'placeholder',
+    'autocomplete',
     'validationMeta',
     'columnClasses',
     'pii'

diff --git a/packages/ripple-ui-forms/src/inputs/textarea.ts b/packages/ripple-ui-forms/src/inputs/textarea.ts
@@ -27,6 +27,7 @@ export const textarea: FormKitTypeDefinition = {
       label: '$label',
       disabled: '$node.context.disabled',
       placeholder: '$node.props.placeholder',
+      autocomplete: '$node.props.autocomplete',
       rows: '$node.props.rows',
       options: '$node.props.options',
       validationMeta: '$node.props.validationMeta',
@@ -56,6 +57,7 @@ export const textarea: FormKitTypeDefinition = {
     ...counterProps,
     'rows',
     'placeholder',
+    'autocomplete',
     'validationMeta',
     'columnClasses',
     'pii'

diff --git a/packages/ripple-ui-forms/src/inputs/url.ts b/packages/ripple-ui-forms/src/inputs/url.ts
@@ -40,6 +40,7 @@ export const url: FormKitTypeDefinition = {
   props: [
     ...minMaxProps,
     'placeholder',
+    'autocomplete',
     'validationMeta',
     'columnClasses',
     'pii'