Merge pull request #1069 from dpc-sdp/feature/R20-1807-repeated-foote…

…r-links [R20-1807] repeating link moves to title on desktop
dpc-sdp · Mar 14, 2024 · b52de20 · b52de20
2 parents 3fc81a6 + faf0ef0
commit b52de20
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/examples/nuxt-app/test/features/site/shared-elements.feature b/examples/nuxt-app/test/features/site/shared-elements.feature
@@ -65,14 +65,12 @@ Feature: Shared site elements
     And the page endpoint for path "/some-random-page" returns fixture "/landingpage/home" with status 200
     Given I visit the page "/some-random-page"
 
-    Then the footer nav section with title "Level 1 - Item 1" should have the following links
+    Then the footer nav section with title "Level 1 - Item 1" should link to "/level-1-item-1"
+    And the footer nav section with title "Level 1 - Item 1" should have the following links
       | text             | url             |
-      | Level 1 - Item 1 | /level-1-item-1 |
       | Level 2 - Item 1 | /level-2-item-1 |
       | Level 2 - Item 2 | /level-2-item-2 |
-    Then the footer nav section with title "Level 1 - Item 2" should have the following links
-      | text             | url             |
-      | Level 1 - Item 2 | /level-1-item-2 |
+    Then the footer nav section with title "Level 1 - Item 2" should link to "/level-1-item-2"
     Then the footer nav section with title "Connect with us" should have the following links
       | text     | url                       |
       | Facebook | https://www.facebook.com/ |
@@ -88,4 +86,21 @@ Feature: Shared site elements
       | Test logo 1 | /test-logo-1 | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg?w=1984 |
       | Test logo 2 | /test-logo-2 | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg?w=1984                   |
 
+  @mockserver
+  Scenario: Footer (Mobile)
+    Given the site endpoint returns fixture "/site/shared-elements" with status 200
+    And the page endpoint for path "/some-random-page" returns fixture "/landingpage/home" with status 200
+    Given I visit the page "/some-random-page"
+    And I am using a "iphone-x" device
+
+    When I open the footer nav section with title "Level 1 - Item 1"
+    Then the footer nav section with title "Level 1 - Item 1" should have the following links
+      | text             | url             |
+      | Level 1 - Item 1 | /level-1-item-1 |
+      | Level 2 - Item 1 | /level-2-item-1 |
+      | Level 2 - Item 2 | /level-2-item-2 |
 
+    When I open the footer nav section with title "Level 1 - Item 1"
+    Then the footer nav section with title "Level 1 - Item 2" should have the following links
+      | text             | url             |
+      | Level 1 - Item 2 | /level-1-item-2 |
diff --git a/packages/ripple-test-utils/step_definitions/common/shared-elements.ts b/packages/ripple-test-utils/step_definitions/common/shared-elements.ts
@@ -1,4 +1,4 @@
-import { Then, DataTable } from '@badeball/cypress-cucumber-preprocessor'
+import { Then, DataTable, When } from '@badeball/cypress-cucumber-preprocessor'
 
 Then('the page title should be {string}', (title: string) => {
   cy.title().should('equal', title)
@@ -103,6 +103,25 @@ Then(
     })
   }
 )
+
+Then(
+  'the footer nav section with title {string} should link to {string}',
+  (title: string, link: string) => {
+    cy.get('.rpl-footer-nav-section__title a')
+      .contains(title)
+      .should('have.attr', 'href', link)
+  }
+)
+
+When(
+  'I open the footer nav section with title {string}',
+  (sectionTitle: string) => {
+    cy.get('.rpl-footer-nav-section button')
+      .contains('h3', sectionTitle)
+      .click()
+  }
+)
+
 Then(
   'the footer nav should have the following single level items',
   (dataTable: DataTable) => {

diff --git a/packages/ripple-ui-core/src/components/footer/RplNavSection.vue b/packages/ripple-ui-core/src/components/footer/RplNavSection.vue
@@ -38,7 +38,7 @@ const { toggleProps, triggerProps } = useExpandable(
 )
 
 const items = computed(() => {
-  if (props.section.url) {
+  if (props.section.url && props.isExpandable) {
     return [
       {
         text: props.section.text,
@@ -111,7 +111,7 @@ const handleClick = (event) => {
           class="rpl-footer-nav-section__title rpl-type-label rpl-type-weight-bold"
         >
           <RplTextLink
-            v-if="singleLevel && section?.url"
+            v-if="!canExpand && section?.url"
             :url="section.url"
             class="rpl-list__link"
             @click="