Merge pull request #1315 from dpc-sdp/feat/sd-198-reusable-paragraphs

[SD-198] Reusable paragraphs

packages/ripple-tide-landing-page/mapping/components.ts

@@ -1,4 +1,7 @@
+import { reusableParagraphTypes } from '../types'
+
 import basicTextMapping from './components/basic-text/basic-text-mapping'
+import fromLibraryMapping from './components/from-library/from-library-mapping'
 import accordionMapping from './components/accordion/accordion-mapping'
 import promoCardMapping from './components/promo-card/promo-card-mapping'
 import navigationCardMapping from './components/navigation-card/navigation-card-mapping'
@@ -17,8 +20,15 @@ import dataTableMapping from './components/data-table/data-table-mapping'
 import compactCardsMapping from './components/compact-cards/compact-cards-mapping'
 import openFormsMapping from './components/openforms/openforms-mapping'
 
-export default {
+const mappings: {
+  [key: string]: {
+    includes: string[]
+    mapping: Function
+    contentTypes: string[]
+  }
+} = {
   'paragraph--basic_text': basicTextMapping,
+  'paragraph--from_library': fromLibraryMapping,
   'paragraph--accordion': accordionMapping,
   'paragraph--promotion_card': promoCardMapping,
   'paragraph--navigation_card': navigationCardMapping,
@@ -37,3 +47,20 @@ export default {
   'paragraph--compact_card_collection': compactCardsMapping,
   'paragraph--form_embed_openforms': openFormsMapping
 }
+
+// Add reusable include on whitelisted paragraph types
+reusableParagraphTypes.forEach((k) => {
+  if (mappings[k].includes.length > 0) {
+    mappings[k].includes = [
+      ...mappings[k].includes,
+      ...mappings[k].includes.map((j) =>
+        j.replace(
+          'field_landing_page_component.',
+          'field_landing_page_component.field_reusable_paragraph.paragraphs.'
+        )
+      )
+    ]
+  }
+})
+
+export default mappings

packages/ripple-tide-landing-page/mapping/components/from-library/from-library-mapping.ts

@@ -0,0 +1,33 @@
+import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'
+import componentMappings from '../../components'
+import { reusableParagraphTypes } from '../../../types'
+
+interface TideFromLibrary {
+  id: string | null
+  type: string
+}
+
+export const fromLibraryMapping = (
+  field: { field_reusable_paragraph: { paragraphs: TideFromLibrary } },
+  page: any,
+  tidePageApi: any
+): TideDynamicPageComponent<TideFromLibrary> => {
+  const paragraph = field?.field_reusable_paragraph?.paragraphs
+  if (paragraph && reusableParagraphTypes.includes(paragraph.type)) {
+    return componentMappings[paragraph.type].mapping(
+      paragraph,
+      page,
+      tidePageApi
+    )
+  }
+
+  console.error(`No mapping found for paragraphs library item ${field?.id}`)
+}
+
+export const fromLibraryIncludes = []
+
+export default {
+  includes: fromLibraryIncludes,
+  mapping: fromLibraryMapping,
+  contentTypes: ['landing_page']
+}

packages/ripple-tide-landing-page/types.ts

@@ -28,3 +28,18 @@ export interface TideLandingPagePage extends TidePageBase {
    * @description Background body colour
    */
 }
+
+// Whitelist reusable paragraph types
+export const reusableParagraphTypes = [
+  'paragraph--basic_text',
+  'paragraph--from_library',
+  'paragraph--accordion',
+  'paragraph--promotion_card',
+  'paragraph--navigation_card',
+  'paragraph--statistics_grid',
+  'paragraph--timelines',
+  'paragraph--call_to_action',
+  'paragraph--card_carousel',
+  'paragraph--complex_image',
+  'paragraph--data_table'
+]