[R20-1602][R20-1608] published by label

examples/nuxt-app/test/features/news/news.feature

@@ -15,7 +15,7 @@ Feature: News page
     When I visit the page "/sample-news"
     And the news page details should include "Published:" "Friday, 11 November 2022 at 12:11 pm"
     And the news page details should include "Location:" "Melbourne metropolitan, Eastern metropolitan Melbourne"
-    And the news page details should include "Department:" "DPC"
+    And the news page details should include "Published by:" "DPC"
 
   @mockserver
   Scenario: Body
@@ -31,7 +31,7 @@ Feature: News page
     When I visit the page "/sample-news"
     Then the news page details should display only the description for "Published:" "Friday, 11 November 2022 at 12:11 pm"
     Then the news page details should display only the description for "Location:" "Melbourne metropolitan, Eastern metropolitan Melbourne"
-    Then the news page details should display only the description for "Department:" "DPC"
+    Then the news page details should display only the description for "Published by:" "DPC"
 
   @mockserver
   Scenario: Feature flags can set the feature image aspect ratio

examples/nuxt-app/test/features/publication/publication.feature

@@ -12,6 +12,16 @@ Feature: Publication page
   Example: Publication parent
     When I visit the page "/victorian-skills-plan-2023-implementation-update"
     Then the title should be "Victorian Skills Plan Implementation Update"
+    And the publication details should include the following items
+      | term          | description          |
+      | Published by: | DPC                  |
+      | Date:         | 24 Oct 2023          |
+      | Copyright:    | All rights reserved. |
+    And the publication should display the following chapters
+      | title                                                            | content                                                                                 | url                                                                                                    |
+      | The Victorian Skills Plan 2022 into 2023 actions and initiatives | The 25 initiatives scheduled to start in year one are well underway.                    | /victorian-skills-plan-2023-implementation-update/2022-victorian-skills-plan-actions-and-initiatives   |
+      | Promoting post-secondary education skills and career pathways    | The first priority area's actions and initiatives from the Victorian Skills Plan 2022.  | /victorian-skills-plan-2023-implementation-update/promoting-post-secondary-education-skills-and-career |
+      | Lifting participation in education and training                  | The second priority area's actions and initiatives from the Victorian Skills Plan 2022. | /victorian-skills-plan-2023-implementation-update/lifting-participation-education-and-training         |
 
   @mockserver
   Example: Publication child

examples/nuxt-app/test/fixtures/publication/sample-publication.json

@@ -89,9 +89,9 @@
   "showInPageNav": false,
   "inPageNavHeadingLevel": "h2",
   "details": {
-    "author": "",
+    "author": "DPC",
     "date": "2023-10-24T11:00:00+11:00",
-    "copyright": null
+    "copyright": "All rights reserved."
   },
   "chapters": [
     {
@@ -103,7 +103,7 @@
     {
       "id": "7f608818-51e5-4c42-831a-a51d46a41ff6",
       "title": "Promoting post-secondary education skills and career pathways",
-      "summary": "The first priority area's actions and initiatives from the Victorian Skills Plan 2022.\r\n",
+      "summary": "The first priority area's actions and initiatives from the Victorian Skills Plan 2022.",
       "url": "/victorian-skills-plan-2023-implementation-update/promoting-post-secondary-education-skills-and-career"
     },
     {

packages/ripple-test-utils/step_definitions/content-types/listing.ts

@@ -136,7 +136,6 @@ Then(
       cy.get(`[data-component-type="search-result"]`)
         .eq(i)
         .then((item) => {
-          cy.log(item)
           cy.wrap(item).should('contain', row.title)
 
           if (row.url) {

packages/ripple-test-utils/step_definitions/content-types/publication.ts

@@ -1,4 +1,4 @@
-import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
+import { DataTable, Then, When } from '@badeball/cypress-cucumber-preprocessor'
 
 When('I visit the print all page {string}', (route: string) => {
   cy.visit(route, {
@@ -26,3 +26,47 @@ Then(
     cy.get('.rpl-page-links__link-text').contains(desc).should('exist')
   }
 )
+
+Then(
+  'the publication details should include the following items',
+  (dataTable: DataTable) => {
+    const table = dataTable.hashes()
+
+    cy.get(`.tide-publication__details dt`).as('items')
+
+    table.forEach((row, i: number) => {
+      cy.get('@items')
+        .eq(i)
+        .then((item) => {
+          cy.wrap(item).as('item')
+
+          cy.get('@item').contains(row.term)
+          cy.get('@item').next('dd').contains(row.description)
+        })
+    })
+  }
+)
+
+Then(
+  'the publication should display the following chapters',
+  (dataTable: DataTable) => {
+    const table = dataTable.hashes()
+
+    cy.get(`.tide-publication__chapters li`).as('items')
+
+    table.forEach((row, i: number) => {
+      cy.get('@items')
+        .eq(i)
+        .then((item) => {
+          cy.wrap(item).as('item')
+
+          cy.get('@item').find('a').as('link')
+          cy.get('@link').contains(row.title)
+          cy.get('@link').should('have.attr', 'href', row.url)
+          cy.get('@item')
+            .find('.rpl-card__content')
+            .should('have.text', row.content)
+        })
+    })
+  }
+)

packages/ripple-tide-news/components/TideNewsBody.vue

@@ -41,24 +41,33 @@ const aspectRatio = computed(() =>
 )
 
 const detailsList = computed(() => {
-  return Object.keys(props.details)
-    .map((key) => {
-      if (!props.details[key]) return null
+  const list = []
 
-      let description = props.details[key]
-      if (key === 'published') {
-        description = formatDate(description, {
-          dateStyle: 'full',
-          timeStyle: 'short'
-        })
-      }
-
-      return {
-        term: key[0].toUpperCase() + key.substring(1) + ':',
-        hideTerm: flags?.hideDetailLabels,
-        description: description
-      }
+  if (props.details?.published) {
+    list.push({
+      term: 'Published:',
+      hideTerm: flags?.hideDetailLabels,
+      description: formatDate(props.details?.published, {
+        dateStyle: 'full',
+        timeStyle: 'short'
+      })
+    })
+  }
+  if (props.details?.location) {
+    list.push({
+      term: 'Location:',
+      hideTerm: flags?.hideDetailLabels,
+      description: props.details.location
     })
-    .filter(Boolean)
+  }
+  if (props.details?.department) {
+    list.push({
+      term: 'Published by:',
+      hideTerm: flags?.hideDetailLabels,
+      description: props.details.department
+    })
+  }
+
+  return list
 })
 </script>

packages/ripple-tide-publication/components/TidePublicationBody.vue

@@ -29,22 +29,27 @@ interface IRplDescriptionListItem {
 }
 
 const processed = computed(() => {
-  if (!props.details) return []
+  const list: Array<IRplDescriptionListItem> = []
 
-  const out: Array<IRplDescriptionListItem> = []
-  for (const [key, value] of Object.entries(props.details)) {
-    let val = value
-    if (val) {
-      if (key === 'date') {
-        const published = new Date(props.details.date)
-        val = formatDate(published)
-      }
-      out.push({
-        term: key[0].toUpperCase() + key.substring(1) + ':',
-        description: val
-      })
-    }
+  if (props.details?.author) {
+    list.push({
+      term: 'Published by:',
+      description: props.details.author
+    })
   }
-  return out
+  if (props.details?.date) {
+    list.push({
+      term: 'Date:',
+      description: formatDate(new Date(props.details.date))
+    })
+  }
+  if (props.details?.copyright) {
+    list.push({
+      term: 'Copyright:',
+      description: props.details.copyright
+    })
+  }
+
+  return list
 })
 </script>

packages/ripple-tide-publication/components/TidePublicationChapters.vue

@@ -3,7 +3,7 @@ export default { name: 'TidePublicationChapters' }
 </script>
 
 <template>
-  <ul class="rpl-grid rpl-u-margin-t-6">
+  <ul class="tide-publication__chapters rpl-grid rpl-u-margin-t-6">
     <TidePublicationChapterCard
       v-for="(chapter, i) in chapters"
       :key="i"