[R20-1985] add custom content rating text

examples/nuxt-app/test/features/site/shared-elements.feature

@@ -83,6 +83,28 @@ Feature: Shared site elements
       | Demo Topic | /topic/demo-topic |
       | Demo Tag   | /tags/demo-tag    |
 
+  @mockserver
+  Scenario: Content Rating (visible)
+    Given the site endpoint returns fixture "/site/shared-elements" with status 200
+    And I load the page fixture with "/landingpage/home"
+    And the content rating form is enabled
+    Then the page endpoint for path "/page" returns the loaded fixture
+
+    Given I visit the page "/page"
+    Then the content rating form should be displayed
+    And I click the content rating option labelled "Yes"
+    Then the content rating form should display the custom text "Test custom rating text."
+
+  @mockserver
+  Scenario: Content Rating (hidden)
+    Given the site endpoint returns fixture "/site/shared-elements" with status 200
+    And I load the page fixture with "/landingpage/home"
+    And the content rating form is disabled
+    Then the page endpoint for path "/page" returns the loaded fixture
+
+    Given I visit the page "/page"
+    Then the content rating form should not be displayed
+
   @mockserver
   Scenario: Footer
     Given the site endpoint returns fixture "/site/shared-elements" with status 200

examples/nuxt-app/test/fixtures/site/shared-elements.json

@@ -5,6 +5,7 @@
   "acknowledgementHeader": "The Victorian Government acknowledges Aboriginal Traditional Owners of Country throughout Victoria and pays respect to their cultures and Elders past, present and emerging.",
   "acknowledgementFooter": "Test footer acknowledgement",
   "copyrightHtml": "<p>Test <strong>footer</strong> copyright html</p>",
+  "contentRatingText": "<p>Test custom rating text.</p>",
   "footerLogos": [
     {
       "alt": "Test logo 1",

packages/nuxt-ripple/components/TideBaseLayout.vue

@@ -63,6 +63,7 @@
       <slot name="belowBody"></slot>
       <TideContentRating
         v-if="showContentRating"
+        :contentRatingText="site?.contentRatingText"
         :siteSectionName="siteSection ? siteSection.name : ''"
       />
     </template>

packages/nuxt-ripple/components/TideContentRating.vue

@@ -3,10 +3,12 @@ import { onMounted, ref } from 'vue'
 
 interface Props {
   siteSectionName: string
+  contentRatingText: string
 }
 
 withDefaults(defineProps<Props>(), {
-  siteSectionName: ''
+  siteSectionName: '',
+  contentRatingText: ''
 })
 
 // This is an actual webform that exists in drupal
@@ -78,14 +80,11 @@ onMounted(() => {
                       matches: 'You must enter between 1 and 500 words'
                     }"
                   />
-                  <RplContent>
-                    <p>
-                      If you need a response, please use our
-                      <RplTextLink url="/contact-us"
-                        >contact us form</RplTextLink
-                      >.
-                    </p>
-                  </RplContent>
+                  <RplContent
+                    v-if="contentRatingText"
+                    :html="contentRatingText"
+                    class="tide-content-rating__text"
+                  />
                   <FormKit
                     v-if="value.was_this_page_helpful"
                     type="RplFormActions"

packages/nuxt-ripple/mapping/site/index.ts

@@ -1,6 +1,7 @@
 import {
   getImageFromField,
   getBody,
+  getBodyFromField,
   getMediaPath,
   getLinkFromField,
   getSiteKeyValues,
@@ -43,6 +44,11 @@ export default {
       bottom: (src: any) =>
         getImageFromField(src, 'field_bottom_corner_graphic')
     },
+    contentRatingText: (src: any) => {
+      return src.hasOwnProperty('field_additional_comment')
+        ? getBodyFromField(src, 'field_additional_comment')
+        : '<p>If you need a response, please use our <a href="/contact-us" class="rpl-text-link rpl-u-focusable-inline">contact us form</a>.</p>'
+    },
     acknowledgementFooter: 'field_acknowledgement_to_country',
     copyrightHtml: (src: any) => {
       return getBody(src.field_site_footer_text?.processed)

packages/ripple-test-utils/step_definitions/common/shared-elements.ts

@@ -241,6 +241,37 @@ Then('the quick exit should not be displayed', () => {
   cy.get('.rpl-primary-nav__quick-exit').should('not.exist')
 })
 
+Then('the content rating form should be displayed', () => {
+  cy.get('.tide-content-rating').should('be.visible')
+})
+
+Then('the content rating form should not be displayed', () => {
+  cy.get('.tide-content-rating').should('not.exist')
+})
+
+Then(
+  'the content rating form should display the custom text {string}',
+  (text: string) => {
+    cy.get('.tide-content-rating__text').should('have.text', text)
+  }
+)
+
+Then('I click the content rating option labelled {string}', (label: string) => {
+  cy.get('.tide-content-rating label').contains(label).click()
+})
+
+Given('the content rating form is enabled', () => {
+  cy.get('@pageFixture').then((response) => {
+    set(response, 'showContentRating', true)
+  })
+})
+
+Given('the content rating form is disabled', () => {
+  cy.get('@pageFixture').then((response) => {
+    set(response, 'showContentRating', false)
+  })
+})
+
 Given('the site sections share links are set to included WhatsApp', () => {
   cy.get('@pageFixture').then((response) => {
     set(

packages/ripple-tide-api/types.d.ts

@@ -30,6 +30,7 @@ export interface TideSiteData {
     top?: TideImageField
     bottom?: TideImageField
   }
+  contentRatingText?: string
   acknowledgementHeader?: string
   acknowledgementFooter: string
   copyrightHtml: string