Merge pull request #1137 from dpc-sdp/feature/rpl-form-hidden-fields

[R20-1967] add RplFormHidden component

examples/nuxt-app/test/features/landingpage/forms.feature

@@ -39,6 +39,7 @@ Feature: Forms
     Then a textarea field with the label "Message" should exist
       | help               | required |
       | Enter your message | true     |
+    Then a hidden field named "site_section" should exist with the value "DPC"
 
   @mockserver
   Scenario: Error summary

examples/nuxt-app/test/fixtures/landingpage/full-form.json

@@ -275,6 +275,12 @@
               "accepted": "You must accept the terms"
             }
           },
+          {
+            "$formkit": "RplFormHidden",
+            "name": "site_section",
+            "id": "site_section",
+            "value": "DPC"
+          },
           {
             "$formkit": "RplFormActions",
             "name": "submit",

packages/nuxt-ripple/components/TideContentRating.vue

@@ -37,11 +37,19 @@ onMounted(() => {
           >
             <template #default="{ value }">
               <div class="tide-content-rating__rating">
-                <FormKit type="hidden" name="url" :value="pageUrl" />
                 <FormKit
-                  type="hidden"
+                  id="was_this_page_helpful_url"
+                  type="RplFormHidden"
+                  name="url"
+                  :value="pageUrl"
+                  :pii="false"
+                />
+                <FormKit
+                  id="was_this_page_helpful_section"
+                  type="RplFormHidden"
                   name="site_section_name"
                   :value="siteSectionName"
+                  :pii="false"
                 />
                 <FormKit
                   id="was_this_page_helpful"

packages/ripple-test-utils/step_definitions/components/forms.ts

@@ -209,6 +209,16 @@ Then(
   }
 )
 
+Then(
+  'a hidden field named {string} should exist with the value {string}',
+  (name: string, value: string) => {
+    cy.get(`input[name=${name}]`).as('hiddenInput')
+
+    cy.get('@hiddenInput').should('have.attr', 'type', 'hidden')
+    cy.get('@hiddenInput').should('have.value', value)
+  }
+)
+
 When(
   'I click {string} from the select field with label {string}',
   (value: string, label: string) => {

packages/ripple-tide-landing-page/mapping/components/webforms/webforms-mapping.ts

@@ -35,11 +35,12 @@ const getFormSchemaFromMapping = async (
     switch (field['#type']) {
       case 'hidden':
         mappedField = {
-          $formkit: 'hidden',
+          $formkit: 'RplFormHidden',
           key: fieldKey,
           name: fieldKey,
           id: fieldID,
-          value: field['#default_value']
+          value: field['#default_value'],
+          pii: false
         }
         break
       case 'textfield':

packages/ripple-ui-forms/src/components/RplFormHidden/RplFormHidden.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup lang="ts">
+interface Props {
+  id: string
+  name: string
+  value?: string
+  pii?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  value: undefined,
+  invalid: false,
+  required: false,
+  pii: true
+})
+</script>
+
+<template>
+  <input :id="id" :name="name" :value="value" v-bind="$attrs" />
+</template>

packages/ripple-ui-forms/src/inputs/hidden.ts

@@ -0,0 +1,48 @@
+import { FormKitTypeDefinition } from '@formkit/core'
+import {
+  createRplFormInputOnly,
+  inputLibrary,
+  rplFeatures
+} from './input-utils'
+
+/**
+ * Input definition for Ripple hidden input.
+ * @public
+ */
+export const hidden: FormKitTypeDefinition = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: createRplFormInputOnly({
+    $cmp: 'RplFormHidden',
+    props: {
+      id: '$id',
+      value: '$_value',
+      name: '$node.name',
+      pii: '$node.props.pii',
+      type: 'hidden'
+    }
+  }),
+  library: inputLibrary,
+  /**
+   * The type of node can be a list, group, or input.
+   */
+  type: 'input',
+  /**
+   * The family of inputs this one belongs too. For example "text" and "email"
+   * are both part of the "text" family. This is primary used for styling.
+   */
+  family: 'text',
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: ['pii'],
+  /**
+   * Forces node.props.type to be this explicit value.
+   */
+  forceTypeProp: 'hidden',
+  /**
+   * Additional features that should be added to your input
+   */
+  features: rplFeatures
+}

packages/ripple-ui-forms/src/inputs/index.ts

@@ -16,3 +16,4 @@ export { label } from './label'
 export { fieldset } from './fieldset'
 export { divider } from './divider'
 export { actions } from './actions'
+export { hidden } from './hidden'

packages/ripple-ui-forms/src/inputs/input-utils.ts

@@ -61,6 +61,8 @@ import FormkitInputError from '../components/RplForm/FormkitInputError.vue'
 import FormkitOuter from '../components/RplForm/FormkitOuter.vue'
 // @ts-expect-error vue SFC
 import RplFormNumber from '../components/RplFormNumber/RplFormNumber.vue'
+// @ts-expect-error vue SFC
+import RplFormHidden from '../components/RplFormHidden/RplFormHidden.vue'
 
 export const inputLibrary = {
   RplFormInput: markRaw(RplFormInput),
@@ -81,7 +83,8 @@ export const inputLibrary = {
   RplFormActions: markRaw(RplFormActions),
   FormkitInputError: markRaw(FormkitInputError),
   FormkitOuter: markRaw(FormkitOuter),
-  RplFormNumber: markRaw(RplFormNumber)
+  RplFormNumber: markRaw(RplFormNumber),
+  RplFormHidden: markRaw(RplFormHidden)
 }
 
 export const rplFeatures = [
@@ -145,6 +148,20 @@ export const createRplFormGroup = (
   ) as unknown as FormKitExtendableSchemaRoot
 }
 
+/*
+ * Creates a Formkit schema for UI-less fields
+ * this is useful for when you don't need the wrapping elements
+ * and just want the input itself, for example, when using a hidden input
+ */
+export const createRplFormInputOnly = (
+  cmp: FormKitSchemaComponent
+): FormKitExtendableSchemaRoot => {
+  return createSection(
+    'input',
+    () => cmp
+  )() as unknown as FormKitExtendableSchemaRoot
+}
+
 export const defaultRplFormInputProps = {
   onInput: '$handlers.DOMInput',
   onBlur: '$handlers.blur',

packages/ripple-ui-forms/src/plugin.ts

@@ -16,7 +16,8 @@ import {
   date,
   datePicker,
   optionButtons,
-  fieldset
+  fieldset,
+  hidden
 } from './inputs/index'
 
 const rplFormInputs = () => {
@@ -61,6 +62,8 @@ rplFormInputs.library = (node) => {
       return node.define(divider)
     case 'RplFormActions':
       return node.define(actions)
+    case 'RplFormHidden':
+      return node.define(hidden)
   }
 }