Merge pull request #1151 from dpc-sdp/feat/export-webform-mapping

Move webform mapping to separate package
dpc-sdp · May 8, 2024 · f0d550b · f0d550b
2 parents 31c0048 + 3ca6fbf
commit f0d550b
Show file tree

Hide file tree

Showing 29 changed files with 1,666 additions and 660 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -30,6 +30,7 @@
     "@dpc-sdp/nuxt-ripple-analytics",
     "eslint-config-ripple",
     "@dpc-sdp/ripple-ui-maps",
+    "@dpc-sdp/ripple-tide-webform",
     "ripple-storybook"
   ],
   "cSpell.words": [

diff --git a/examples/nuxt-app/nuxt.config.ts b/examples/nuxt-app/nuxt.config.ts
@@ -26,7 +26,8 @@ export default defineNuxtConfig({
     '@dpc-sdp/ripple-tide-publication',
     '@dpc-sdp/ripple-tide-media',
     '@dpc-sdp/ripple-tide-news',
-    '@dpc-sdp/ripple-tide-search'
+    '@dpc-sdp/ripple-tide-search',
+    '@dpc-sdp/ripple-tide-webform'
   ],
   // Nuxt devtools
   sourcemap: true,

diff --git a/examples/nuxt-app/package.json b/examples/nuxt-app/package.json
@@ -33,6 +33,7 @@
     "@dpc-sdp/ripple-tide-publication": "workspace:*",
     "@dpc-sdp/ripple-tide-search": "workspace:*",
     "@dpc-sdp/ripple-tide-topic": "workspace:*",
+    "@dpc-sdp/ripple-tide-webform": "workspace:*",
     "@dpc-sdp/ripple-ui-maps": "workspace:*"
   },
   "devDependencies": {

diff --git a/examples/nuxt-app/pages/_form.vue b/examples/nuxt-app/pages/_form.vue
@@ -0,0 +1,87 @@
+<template>
+  <TideBaseLayout
+    :site="site"
+    :page="page"
+    :siteSection="page.siteSection"
+    :background="page.background"
+    :pageTitle="page.title"
+    :pageLanguage="page.lang"
+    :footerImageCaption="
+      page.showHeroImageCaption ? page.header?.backgroundImageCaption : ''
+    "
+    :topicTags="page.showTopicTags ? page.topicTags : []"
+    :updatedDate="page.changed || page.created"
+    :showContentRating="page.showContentRating"
+  >
+    <template #aboveHeader>
+      <slot name="aboveHeader"></slot>
+    </template>
+    <template #primaryNav>
+      <slot name="primaryNav"></slot>
+    </template>
+    <template #breadcrumbs>
+      <slot name="breadcrumbs"></slot>
+    </template>
+    <template #aboveBody="{ hasBreadcrumbs }">
+      <TideHeroHeader
+        :header="page.header"
+        :hasBreadcrumbs="hasBreadcrumbs"
+        :hideBottomCornerGraphic="!!page.primaryCampaign"
+        :cornerTop="site?.cornerGraphic?.top"
+        :cornerBottom="site?.cornerGraphic?.bottom"
+      />
+      <TideLandingPageHeroAcknowledgement
+        v-if="page.showHeroAcknowledgement"
+        :message="site?.acknowledgementHeader"
+      />
+      <TideDynamicComponents
+        v-if="page.headerComponents?.length > 0"
+        :components="page.headerComponents"
+        class="rpl-col-12"
+        :fullWidth="true"
+      />
+      <TideLandingPagePrimaryCampaignBanner
+        v-if="page.primaryCampaign"
+        :campaign="page.primaryCampaign"
+      />
+    </template>
+    <template #body="{ hasSidebar }">
+      <TideLandingPageInPageNavigation
+        v-if="page.showInPageNav"
+        :headingLevel="page.inPageNavHeadingLevel"
+        :components="page.bodyComponents"
+      />
+      <TideDynamicComponents
+        v-if="page.bodyComponents?.length > 0"
+        :components="page.bodyComponents"
+        :hasSidebar="hasSidebar"
+        :pageBackground="page.background"
+      />
+    </template>
+    <template #belowBody>
+      <TideLandingPageSecondaryCampaignBanner
+        v-if="page.secondaryCampaign"
+        :campaign="page.secondaryCampaign"
+      />
+    </template>
+    <template #aboveSidebar>
+      <slot name="aboveSidebar"></slot>
+    </template>
+    <template #sidebar>
+      <slot name="sidebar"></slot>
+    </template>
+    <template #belowSidebar>
+      <slot name="aboveSidebar"></slot>
+    </template>
+    <template #footer>
+      <slot name="footer"> </slot>
+    </template>
+  </TideBaseLayout>
+</template>
+
+<script setup lang="ts">
+import page from '../test/fixtures/case/landing-page-webform.json'
+import { useTideSite } from '#imports'
+
+const site = await useTideSite()
+</script>
diff --git a/examples/nuxt-app/test/fixtures/case/landing-page-webform.json b/examples/nuxt-app/test/fixtures/case/landing-page-webform.json
@@ -0,0 +1,169 @@
+{
+  "title": "Webform",
+  "changed": "2024-05-02T16:22:08+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"
+  },
+  "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": "2947c380-ab74-4b11-ac53-64ff91c760ff",
+      "component": "TideLandingPageWebForm",
+      "id": 1793,
+      "title": "Use the form",
+      "props": {
+        "title": "Use the form",
+        "formId": "contact",
+        "hideFormOnSubmit": false,
+        "successMessageTitle": "Form submitted",
+        "successMessageHTML": "Your message has been sent.",
+        "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": "Your Name",
+            "id": "contact_name",
+            "validation": [["length", 0, 255], ["required"]],
+            "validationMessages": {
+              "required": "Your Name is required",
+              "accepted": "Your Name is required",
+              "length": "You can enter a maximum of 255 characters"
+            }
+          },
+          {
+            "$formkit": "RplFormEmail",
+            "key": "email",
+            "name": "email",
+            "label": "Your Email",
+            "id": "contact_email",
+            "validation": [["email"], ["length", 0, 255], ["required"]],
+            "validationMessages": {
+              "required": "Your Email is required",
+              "accepted": "Your Email is required",
+              "email": "Your Email must be a valid email address",
+              "length": "You can enter a maximum of 255 characters"
+            }
+          },
+          {
+            "$formkit": "RplFormText",
+            "key": "subject",
+            "name": "subject",
+            "label": "Subject",
+            "id": "contact_subject",
+            "validation": [["required"]],
+            "validationMessages": {
+              "required": "Subject is required",
+              "accepted": "Subject is required"
+            }
+          },
+          {
+            "$formkit": "RplFormTextarea",
+            "key": "message",
+            "id": "contact_message",
+            "name": "message",
+            "label": "Message",
+            "validation": [["required"]],
+            "validationMessages": {
+              "required": "Message is required",
+              "accepted": "Message is required"
+            }
+          },
+          {
+            "$formkit": "RplFormActions",
+            "key": "actions",
+            "name": "submit",
+            "variant": "filled",
+            "label": "Send message",
+            "id": "contact_actions",
+            "displayResetButton": false,
+            "validation": [],
+            "validationMessages": {
+              "required": "Submit button(s) is required",
+              "accepted": "Submit button(s) is required"
+            }
+          }
+        ]
+      }
+    }
+  ]
+}