[R20-166] Extend form inputs

.github/workflows/components.yml

@@ -12,11 +12,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 9.0.6
       - name: Install Dependencies
@@ -37,16 +37,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         env:
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
         with:
           version: 9.0.6
           run_install: true
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
@@ -60,16 +60,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         env:
           PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
         with:
           version: 9.0.6
           run_install: true
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'

.github/workflows/docs.yml

@@ -11,14 +11,14 @@ jobs:
   Docs:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 9.0.6
           run_install: false
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'

.github/workflows/main.yml

@@ -4,14 +4,14 @@ jobs:
   Test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 9.0.6
           run_install: false
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'

.github/workflows/nuxt.yml

@@ -11,14 +11,14 @@ jobs:
   TestNuxt:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 9.0.6
           run_install: false
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
@@ -45,10 +45,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 9.0.6
 

.github/workflows/publish-canary.yml

@@ -11,17 +11,17 @@ jobs:
       packages: write
       contents: read
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 9.0.6
           run_install: false
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           registry-url: 'https://npm.pkg.github.com/'
           node-version: 20

.github/workflows/publish.yml

@@ -10,14 +10,14 @@ jobs:
       packages: write
       contents: write
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 9.0.6
           run_install: false
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           registry-url: 'https://npm.pkg.github.com/'
           node-version: 20

.github/workflows/studio.yml

@@ -51,7 +51,7 @@ jobs:
         with:
           version: 9.0.6
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           version: ${{ matrix.node }}
           cache: ${{ steps.pkgman.outputs.cache }}

.github/workflows/vue.yml

@@ -11,16 +11,16 @@ jobs:
   Examples:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 9.0.6
           run_install: false
 
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'

.github/workflows/webcomponents.yml

@@ -11,16 +11,16 @@ jobs:
   Examples:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 9.0.6
           run_install: false
 
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'

examples/nuxt-app/cypress.config.mjs

@@ -12,7 +12,6 @@ export default defineConfig({
     baseUrl: 'http://localhost:3000',
     specPattern: '**/*.{feature,feature.ts}',
     supportFile: false,
-    supportFolder: './test',
     downloadsFolder: './test/downloads',
     fixturesFolder: './test/fixtures',
     videosFolder: './test/videos',

examples/nuxt-app/layers/ripple-ui-forms-ext/__test__/fixtures/webform.json

@@ -0,0 +1,155 @@
+{
+  "title": "Webform",
+  "changed": "2024-06-07T17:15:09+10:00",
+  "created": "2024-05-02T14:42:13+10:00",
+  "type": "landing_page",
+  "nid": "45fa8751-74af-43ee-9cb9-8a8fdee7e593",
+  "_sectionId": "8888",
+  "sidebar": {
+    "contacts": [],
+    "relatedLinks": [],
+    "whatsNext": [],
+    "socialShareNetworks": ["Facebook", "X", "LinkedIn"],
+    "siteSectionNav": null
+  },
+  "status": "published",
+  "topicTags": [
+    {
+      "text": "Demo Topic",
+      "url": "/topic/demo-topic"
+    }
+  ],
+  "siteSection": {
+    "id": 8888,
+    "name": "Demo Site",
+    "siteOverrides": {
+      "showQuickExit": null,
+      "theme": {},
+      "featureFlags": {}
+    }
+  },
+  "meta": {
+    "url": "/webform",
+    "langcode": "en",
+    "description": "Testing the landing page webform mapping",
+    "additional": [
+      {
+        "tag": "meta",
+        "attributes": {
+          "name": "title",
+          "content": "Webform | Single Digital Presence Content Management System"
+        }
+      },
+      {
+        "tag": "link",
+        "attributes": {
+          "rel": "canonical",
+          "href": "http://content-sdp.docker.internal/webform"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "property": "og:locale",
+          "content": "en-AU"
+        }
+      }
+    ],
+    "keywords": "",
+    "image": null
+  },
+  "showContentRating": true,
+  "summary": "Testing the landing page webform mapping",
+  "showHeroAcknowledgement": false,
+  "showInPageNav": false,
+  "showHeroImageCaption": false,
+  "showTopicTags": true,
+  "inPageNavHeadingLevel": "h2",
+  "background": "default",
+  "header": {
+    "title": "Webform",
+    "summary": "",
+    "links": {
+      "title": "",
+      "items": [],
+      "more": null
+    },
+    "backgroundImageCaption": "",
+    "theme": "default",
+    "logoImage": null,
+    "backgroundImage": null,
+    "cornerTop": null,
+    "cornerBottom": null,
+    "primaryAction": null,
+    "secondaryAction": null,
+    "secondaryActionLabel": ""
+  },
+  "primaryCampaign": null,
+  "secondaryCampaign": null,
+  "headerComponents": [],
+  "bodyComponents": [
+    {
+      "uuid": "986aca36-9a3a-408c-9455-c00396dcfb39",
+      "component": "TideLandingPageWebForm",
+      "id": 1795,
+      "title": "Input support",
+      "props": {
+        "title": "Input support",
+        "formId": "test_of_fields",
+        "hideFormOnSubmit": false,
+        "successMessageTitle": "Form submitted",
+        "successMessageHTML": "Thank you! Your response has been submitted.",
+        "errorMessageTitle": "Form not submitted",
+        "errorMessageHTML": "We are experiencing a server error. Please try again, otherwise contact us.",
+        "schema": [
+          {
+            "$formkit": "RplFormText",
+            "key": "name",
+            "name": "name",
+            "label": "Supported",
+            "id": "test_of_fields_name",
+            "validation": [["length", 0, 255]],
+            "validationMessages": {
+              "required": "Name is required",
+              "accepted": "Name is required",
+              "length": "You can enter a maximum of 255 characters"
+            }
+          },
+          {
+            "$formkit": "RplFormItem",
+            "key": "test",
+            "name": "test",
+            "label": "Extended",
+            "id": "test_of_fields_test",
+            "validation": [["length", 0, 255]],
+            "validationMessages": {
+              "required": "Item is required!",
+              "accepted": "Item is required",
+              "length": "You can enter a maximum of 255 characters"
+            }
+          },
+          {
+            "$el": "div",
+            "attrs": {
+              "class": "rpl-form__outer rpl-form__input--unsupported"
+            },
+            "children": ["\"signature\" is not yet supported"]
+          },
+          {
+            "$formkit": "RplFormActions",
+            "key": "actions",
+            "name": "submit",
+            "variant": "filled",
+            "id": "test_of_fields_actions",
+            "displayResetButton": false,
+            "validation": [],
+            "validationMessages": {
+              "required": "Submit is required",
+              "accepted": "Submit is required"
+            }
+          }
+        ]
+      }
+    }
+  ]
+}

examples/nuxt-app/layers/ripple-ui-forms-ext/__test__/forms-ext.feature

@@ -0,0 +1,20 @@
+Feature: Forms, extended
+
+  As a developer, I can add custom form inputs that are not provided in the core offering
+
+  Background:
+    Given the mock server has started
+    And the page endpoint for path "/webform" returns fixture "../../layers/ripple-ui-forms-ext/__test__/fixtures/webform" with status 200
+    And the site endpoint returns fixture "/site/reference" with status 200
+
+  @mockserver
+  Scenario: Custom input
+    Given I visit the page "/webform"
+    Then the landing page component "TideLandingPageWebForm" should exist
+    And a field labelled "Extended" should exist with the CSS class ".rpl-form__input--type-item"
+
+  @mockserver
+  Scenario: Unsupported input
+    Given I visit the page "/webform"
+    Then the landing page component "TideLandingPageWebForm" should exist
+    And an input of type "signature" is not yet supported