Merge pull request #929 from prezly/feature/dev-13192-add-support-for…

…-rendering-coverage-cards-in-sites

[DEV-13192] Add support for coverage cards

components/ContactCard/ContactCard.module.scss

@@ -82,6 +82,7 @@
         @include border-radius-lg;
 
         padding: $spacing-4;
+        background: $color-base-white;
         border: 1px solid $color-borders;
     }
 }

components/ContentRenderer/ContentRenderer.module.scss

@@ -89,6 +89,12 @@
                 }
             }
         }
+
+        .prezly-slate-coverage,
+        .prezly-slate-bookmark,
+        .prezly-slate-story-bookmark {
+            background-color: $color-base-white;
+        }
         /* stylelint-enable selector-class-pattern, max-nesting-depth, selector-max-compound-selectors */
     }
 }

components/ContentRenderer/ContentRenderer.tsx

@@ -1,4 +1,5 @@
 import { Component, Elements, Renderer } from '@prezly/content-renderer-react-js';
+import type { ExtendedStory } from '@prezly/sdk';
 import type { Node } from '@prezly/story-content-format';
 import {
     AttachmentNode,
@@ -20,6 +21,7 @@ import {
     VideoNode,
 } from '@prezly/story-content-format';
 import { useEffect } from 'react';
+import { FormattedDate } from 'react-intl';
 
 import {
     Heading,
@@ -47,9 +49,14 @@ import styles from './ContentRenderer.module.scss';
 
 interface Props {
     nodes: Node | Node[];
+    story?: ExtendedStory;
 }
 
-function ContentRenderer({ nodes }: Props) {
+function ContentRenderer({ nodes, story }: Props) {
+    function renderDate(date: string) {
+        return <FormattedDate value={date} year="numeric" month="long" day="numeric" />;
+    }
+
     useEffect(() => {
         document.body.classList.add(styles.body);
 
@@ -60,7 +67,12 @@ function ContentRenderer({ nodes }: Props) {
 
     return (
         <div className={styles.renderer}>
-            <Renderer nodes={nodes} defaultComponents>
+            <Renderer
+                nodes={nodes}
+                defaultComponents
+                coverageEntries={story?.referenced_entities.coverages}
+                renderDate={renderDate}
+            >
                 <Component match={AttachmentNode.isAttachmentNode} component={Attachment} />
                 <Component
                     match={ButtonBlockNode.isButtonBlockNode}

modules/Story/Story.tsx

@@ -75,7 +75,7 @@ function Story({ story }: Props) {
                         </p>
                     )}
                     {isTablet && url && visibility === 'public' && <StoryLinks url={url} />}
-                    <ContentRenderer nodes={nodes} />
+                    <ContentRenderer nodes={nodes} story={story} />
                 </div>
             </article>
             {!isTablet && url && visibility === 'public' && <StoryLinks url={url} />}

package.json

@@ -30,12 +30,12 @@
     "@headlessui/react": "1.7.18",
     "@playwright/test": "^1.33.0",
     "@prezly/analytics-nextjs": "3.0.0",
-    "@prezly/content-renderer-react-js": "0.38.4",
-    "@prezly/sdk": "21.6.0",
+    "@prezly/content-renderer-react-js": "0.39.0",
+    "@prezly/sdk": "21.12.0",
     "@prezly/story-content-format": "0.65.1",
-    "@prezly/theme-kit-core": "7.6.0",
+    "@prezly/theme-kit-core": "7.7.0",
     "@prezly/theme-kit-intl": "7.5.1",
-    "@prezly/theme-kit-nextjs": "7.6.0",
+    "@prezly/theme-kit-nextjs": "7.7.0",
     "@prezly/uploadcare": "2.4.4",
     "@prezly/uploadcare-image": "0.3.2",
     "@react-hookz/web": "14.7.1",