[DEV-13006] Implement renderer for Callout node

src/Renderer.tsx

@@ -3,6 +3,7 @@ import {
     AttachmentNode,
     BookmarkNode,
     ButtonBlockNode,
+    CalloutNode,
     ContactNode,
     DividerNode,
     DocumentNode,
@@ -69,6 +70,7 @@ export function Renderer<N extends Node | Node[]>({
                         component={Elements.ButtonBlock}
                     />
                     <Component match={BookmarkNode.isBookmarkNode} component={Elements.Bookmark} />
+                    <Component match={CalloutNode.isCalloutNode} component={Elements.Callout} />
                     <Component match={ContactNode.isContactNode} component={Elements.Contact} />
                     <Component match={DividerNode.isDividerNode} component={Elements.Divider} />
                     <Component match={DocumentNode.isDocumentNode} component={Elements.Document} />

src/elements/Callout/Callout.scss

@@ -0,0 +1,33 @@
+@import "styles/variables";
+
+.prezly-slate-callout {
+    display: flex;
+    flex-direction: row;
+
+    padding: $spacing-3;
+    gap: $spacing-1-5;
+
+    background: rgba($color-link, 0.08);
+    border: 1px solid rgba($color-link, 0.60);
+    border-radius: $spacing-half;
+
+    &[data-icon]::before {
+        content: attr(data-icon);
+        display: block;
+    }
+
+    &--align-left {
+        text-align: left;
+        flex-direction: row;
+    }
+
+    &--align-center {
+        text-align: center;
+        flex-direction: column;
+    }
+
+    &--align-right {
+        text-align: right;
+        flex-direction: row-reverse;
+    }
+}

src/elements/Callout/Callout.slate.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, Story } from '@storybook/react';
+
+import { StoryNameDecorator } from '../../dev/StoryNameDecorator';
+import { Renderer } from '../../Renderer';
+
+export default {
+    title: 'Elements/Quote',
+    decorators: [StoryNameDecorator],
+} as Meta;
+
+export const BlockQuote: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'block-quote',
+                children: [
+                    {
+                        text: 'I love how Prezly has been created by people who really understand the needs of PR professionals. Its features and functionality are just right for our business.',
+                    },
+                ],
+            },
+        ]}
+    />
+);
+
+export const Alignment: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'block-quote',
+                align: 'center',
+                children: [
+                    {
+                        text: 'Same goes for blockquotes',
+                    },
+                ],
+            },
+        ]}
+    />
+);

src/elements/Callout/Callout.tsx

@@ -0,0 +1,34 @@
+import { CalloutNode } from '@prezly/story-content-format';
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+import { stringifyNode } from '../../lib';
+
+import './Callout.scss';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    node: CalloutNode;
+}
+
+export function Callout({ children, className, node, ...props }: Props) {
+    const isEmpty = stringifyNode(node).trim() === '';
+
+    if (isEmpty) {
+        return null;
+    }
+
+    return (
+        <div
+            className={classNames('prezly-slate-callout', className, {
+                'prezly-slate-callout--align-inherit': node.align === undefined,
+                'prezly-slate-callout--align-left': node.align === CalloutNode.Alignment.LEFT,
+                'prezly-slate-callout--align-center': node.align === CalloutNode.Alignment.CENTER,
+                'prezly-slate-callout--align-right': node.align === CalloutNode.Alignment.RIGHT,
+            })}
+            data-icon={node.icon || undefined}
+            {...props}
+        >
+            <p>{children}</p>
+        </div>
+    );
+}

src/elements/Callout/index.ts

@@ -0,0 +1 @@
+export { Callout } from './Callout';

src/elements/index.ts

@@ -6,6 +6,7 @@ export { Passthru } from './Passthru';
 export { Attachment } from './Attachment';
 export { Bookmark } from './Bookmark';
 export { ButtonBlock } from './ButtonBlock';
+export { Callout } from './Callout';
 export { Contact } from './Contact';
 export { Divider } from './Divider';
 export { Embed } from './Embed';