@nascentdigital/funnel-ui 4.5.1 → 4.5.3

package/dist/client/hooks/breakpoint/BreakpointContainer.d.ts

@@ -1,6 +1,6 @@
 import { Breakpoints } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
-export declare function BreakpointContainer({ breakpoints, children }: BreakpointContainer.Props): import("react/jsx-runtime").JSX.Element;
+export declare function BreakpointContainer({ breakpoints: breakpointsRaw, children }: BreakpointContainer.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace BreakpointContainer {
     type Props = {
         breakpoints?: Readonly<Breakpoints>;

package/dist/client/hooks/breakpoint/BreakpointContainer.js

@@ -4,10 +4,12 @@ exports.BreakpointContainer = BreakpointContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const react_1 = require("react");
+const useLatestValue_1 = require("../useLatestValue");
 const BreakpointContext_1 = require("./BreakpointContext");
 // container
-function BreakpointContainer({ breakpoints = funnel_core_1.Breakpoints.defaults, children }) {
+function BreakpointContainer({ breakpoints: breakpointsRaw = funnel_core_1.Breakpoints.defaults, children }) {
     // bind state + observer
+    const breakpoints = (0, useLatestValue_1.useLatestValue)(breakpointsRaw);
     const [context, setContext] = (0, react_1.useState)({
         breakpoints
     });

package/dist/client/interaction/index.d.ts

@@ -3,10 +3,4 @@ export * from './ClickObserver';
 export * from './InfiniteScroller';
 export * from './Loader';
 export * from './Marquee';
-export * from './Popup';
-export * from './Tooltip';
-export * from './UILevel';
-export * from './backdrop';
-export * from './focus';
-export * from './modal/index';
 export * from './paginator/index';

package/dist/client/interaction/index.js

@@ -19,10 +19,4 @@ __exportStar(require("./ClickObserver"), exports);
 __exportStar(require("./InfiniteScroller"), exports);
 __exportStar(require("./Loader"), exports);
 __exportStar(require("./Marquee"), exports);
-__exportStar(require("./Popup"), exports);
-__exportStar(require("./Tooltip"), exports);
-__exportStar(require("./UILevel"), exports);
-__exportStar(require("./backdrop"), exports);
-__exportStar(require("./focus"), exports);
-__exportStar(require("./modal/index"), exports);
 __exportStar(require("./paginator/index"), exports);

package/dist/server/blocks/Block.js

@@ -50,7 +50,7 @@ function Block(_a) {
 }
 // extension
 (function (Block) {
-    function createSchema({ id, name, version, message, visual, list }) {
+    function createSchema({ id, name, version, message, visual, list, extendConfigSchema }) {
         // build fields schema and panel key mapping
         let fieldsSchema = {};
         const panelKeyMapping = {};
@@ -67,7 +67,7 @@ function Block(_a) {
             panelKeyMapping.listKey = 'list';
         }
         // create config schema
-        const configSchema = panels_1.BlockPanel.getConfigSchema(Object.assign({ fields: fieldsSchema }, panelKeyMapping));
+        const configSchema = panels_1.BlockPanel.getConfigSchema(Object.assign(Object.assign({ fields: fieldsSchema }, panelKeyMapping), { extend: extendConfigSchema }));
         // create block schema
         const schema = funnel_core_1.Schema.Block.create({
             id,

package/dist/server/blocks/Message.js

@@ -21,9 +21,10 @@ const classnames_1 = __importDefault(require("classnames"));
 const Block_1 = require("./Block");
 // component
 function Message(_a) {
+    var _b;
     var { className } = _a, props = __rest(_a, ["className"]);
     // extract variant
-    const variant = funnel_core_1.Schema.EnumField.Value.fromData(props.model.config.variant);
+    const variant = funnel_core_1.Schema.EnumField.Value.fromData((_b = props.model) === null || _b === void 0 ? void 0 : _b.config.variant);
     // render
     return (0, jsx_runtime_1.jsx)(Message.Component, Object.assign({ className: (0, classnames_1.default)(className, 'nd-Message', Message.Variant.getClassName(variant)) }, props));
 }

package/dist/server/blocks/Testimonial.js

@@ -40,8 +40,9 @@ function Testimonial(_a) {
     const ctas = ctasRaw === null || ctasRaw === void 0 ? void 0 : ctasRaw.value;
     const { className: testimonialPanelClassname } = testimonialPanelProps, testimonialPanelPropsRest = __rest(testimonialPanelProps, ["className"]);
     const { className: visualPanelClassname } = visualPanelProps, visualPanelPropsRest = __rest(visualPanelProps
-    // panel layout
+    // FIXME: this is a hack to force the message panel to show (should always be rendered since quote is required)
     , ["className"]);
+    fields.headline = {};
     // panel layout
     const layout = panels_1.BlockPanel.getLayout({
         args: { fields, config },
@@ -54,10 +55,7 @@ function Testimonial(_a) {
             case 'message':
                 return ((0, jsx_runtime_1.jsx)(panels_1.TestimonialPanel, Object.assign({ className: (0, classnames_1.default)(className, testimonialPanelClassname, 'nd-Testimonial-message'), panel: panel, title: title, quote: quote, author: author, ctas: ctas }, testimonialPanelPropsRest)));
             case 'visual':
-                return visual
-                    ?
-                        (0, jsx_runtime_1.jsx)(panels_1.VisualPanel, Object.assign({ className: (0, classnames_1.default)(className, visualPanelClassname, 'nd-Testimonial-visual'), panel: panel, visual: visual, anchor: (_a = funnel_core_1.Schema.EnumField.Value.fromData(config.visualAnchor)) !== null && _a !== void 0 ? _a : 'center' }, visualPanelPropsRest))
-                    : undefined;
+                return ((0, jsx_runtime_1.jsx)(panels_1.VisualPanel, Object.assign({ className: (0, classnames_1.default)(className, visualPanelClassname, 'nd-Testimonial-visual'), panel: panel, visual: visual, anchor: (_a = funnel_core_1.Schema.EnumField.Value.fromData(config.visualAnchor)) !== null && _a !== void 0 ? _a : 'center' }, visualPanelPropsRest)));
             default:
                 return undefined;
         }
@@ -86,11 +84,16 @@ function Testimonial(_a) {
         version: 1,
         config: configSchema,
         fields: fieldsSchema,
-        getConfig: args => panels_1.BlockPanel.getConfig({
-            args,
-            messageKey: 'message',
-            visualKey: 'visual'
-        }),
+        getConfig: args => {
+            // FIXME: this is a hack to force the message panel configs (message panel should always exist)
+            ;
+            args.fields.headline = {};
+            return panels_1.BlockPanel.getConfig({
+                args,
+                messageKey: 'message',
+                visualKey: 'visual'
+            });
+        },
         getLayout: args => panels_1.BlockPanel.getLayout({
             args,
             messageKey: 'message',

package/dist/server/blocks/Testimonials.d.ts

@@ -1,41 +1,41 @@
 import { Schema } from '@nascentdigital/funnel-core';
-import { HTMLBlockElement, HTMLElements } from '../../types';
-import { MessagePanel } from '../panels';
-export declare function Testimonials({ className, testimonials, messagePanelProps, testimonialsPanelProps, ...props }: Testimonials.Props): import("react/jsx-runtime").JSX.Element | null;
+import { ComponentProps } from 'react';
+import { TestimonialPanel } from '../panels';
+import { Block } from './Block';
+export declare function Testimonials(props: ComponentProps<typeof Testimonials.Component>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Testimonials {
-    const schema: Schema.Block<"_nd-testimonials", {
-        title: Schema.Optional<Schema.TextField>;
-        headline: Schema.Optional<Schema.RichTextField>;
-        caption: Schema.Optional<Schema.RichTextField>;
-        ctas: Schema.Optional<Schema.ListField<{
-            cta: Schema.LinkField;
-        }>>;
-        testimonials: Schema.ListField<{
-            testimonial: Schema.ObjectField<{
-                quote: Schema.RichTextField;
-                author: Schema.CollectionField<Schema.Collection<{
-                    title: Schema.Optional<Schema.TextField>;
-                    company: Schema.Optional<Schema.CollectionField<Schema.Collection<{
-                        division: Schema.Optional<Schema.TextField>;
-                        location: Schema.Optional<Schema.TextField>;
-                        logo: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
-                        badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
-                        badgeText: Schema.Optional<Schema.TextField>;
-                    }>>>;
+    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-testimonials", true, undefined, Schema.ListField<{
+        testimonial: Schema.ObjectField<{
+            quote: Schema.RichTextField;
+            author: Schema.CollectionField<Schema.Collection<{
+                title: Schema.Optional<Schema.TextField>;
+                company: Schema.Optional<Schema.CollectionField<Schema.Collection<{
+                    division: Schema.Optional<Schema.TextField>;
                     location: Schema.Optional<Schema.TextField>;
-                    picture: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
-                }>>;
-            }>;
+                    logo: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+                    badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+                    badgeText: Schema.Optional<Schema.TextField>;
+                }>>>;
+                location: Schema.Optional<Schema.TextField>;
+                picture: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+            }>>;
         }>;
-    }, Schema.Block.Config>;
-    type Props = HTMLBlockElement<'div'> & {
-        testimonials: Model;
-        messagePanelProps?: MessagePanel.Props.Configuration;
-        testimonialsPanelProps?: TestimonialsPanelProps;
-    };
-    type TestimonialsPanelProps = {
-        className?: string;
-        tag?: HTMLElements.Standard.Container;
-    };
+    }>, Schema.Block.Config, TestimonialPanel.Testimonial.Props.Configuration>>, schema: Block.Create.Result.Schema<"_nd-testimonials", true, undefined, Schema.ListField<{
+        testimonial: Schema.ObjectField<{
+            quote: Schema.RichTextField;
+            author: Schema.CollectionField<Schema.Collection<{
+                title: Schema.Optional<Schema.TextField>;
+                company: Schema.Optional<Schema.CollectionField<Schema.Collection<{
+                    division: Schema.Optional<Schema.TextField>;
+                    location: Schema.Optional<Schema.TextField>;
+                    logo: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+                    badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+                    badgeText: Schema.Optional<Schema.TextField>;
+                }>>>;
+                location: Schema.Optional<Schema.TextField>;
+                picture: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+            }>>;
+        }>;
+    }>, Schema.Block.Config>;
     type Model = Schema.Block.LinkedData<typeof schema>;
 }

package/dist/server/blocks/Testimonials.js

@@ -1,62 +1,18 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Testimonials = Testimonials;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
-const classnames_1 = __importDefault(require("classnames"));
 const panels_1 = require("../panels");
 const Block_1 = require("./Block");
-// block
-function Testimonials(_a) {
-    var _b, _c, _d;
-    var { className, testimonials, messagePanelProps = {}, testimonialsPanelProps = {} } = _a, props = __rest(_a, ["className", "testimonials", "messagePanelProps", "testimonialsPanelProps"]);
-    // don't render if missing model
-    if (!testimonials) {
-        console.warn('[Testimonials] attempted to render without testimonials model');
-        return null;
-    }
-    // destructure props
-    const config = (_b = testimonials.config) !== null && _b !== void 0 ? _b : {};
-    const fields = (_c = testimonials.fields) !== null && _c !== void 0 ? _c : {};
-    const { title: titleRaw, headline: headlineRaw, caption: captionRaw, ctas: ctasRaw, testimonials: testimonialsRaw } = fields;
-    const title = titleRaw === null || titleRaw === void 0 ? void 0 : titleRaw.value;
-    const headline = headlineRaw === null || headlineRaw === void 0 ? void 0 : headlineRaw.value;
-    const caption = captionRaw === null || captionRaw === void 0 ? void 0 : captionRaw.value;
-    const ctas = ctasRaw === null || ctasRaw === void 0 ? void 0 : ctasRaw.value;
-    const testimonialItems = (_d = testimonialsRaw === null || testimonialsRaw === void 0 ? void 0 : testimonialsRaw.value) !== null && _d !== void 0 ? _d : [];
-    const { className: messagePanelClassname } = messagePanelProps, messagePanelPropsRest = __rest(messagePanelProps, ["className"]);
-    const { className: testimonialsPanelClassname } = testimonialsPanelProps;
-    // panel layout
-    const layout = {};
-    const getPanel = ({ className, panel }) => {
-        var _a;
-        switch (panel.type) {
-            case 'message':
-                return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, Object.assign({ className: (0, classnames_1.default)(className, messagePanelClassname, 'nd-Testimonials-message'), panel: panel, title: title, headline: headline, caption: caption, ctas: ctas }, messagePanelPropsRest)));
-            case 'list':
-                return ((0, jsx_runtime_1.jsx)(panels_1.ListPanel, { as: (_a = testimonialsPanelProps.tag) !== null && _a !== void 0 ? _a : 'ul', className: (0, classnames_1.default)(className, testimonialsPanelClassname, 'nd-Testimonials-list'), panel: panel, items: testimonialItems, layout: "horizontalStack", children: testimonial => (0, jsx_runtime_1.jsx)(panels_1.TestimonialPanel, { panel: {}, quote: testimonial.value.quote.value, author: testimonial.value.author.value }) }));
-        }
-    };
-    // render block
-    return ((0, jsx_runtime_1.jsx)(Block_1.Block, Object.assign({ className: (0, classnames_1.default)(className, 'nd-Testimonials'), layout: layout, renderPanel: getPanel }, props)));
+// component
+function Testimonials(props) {
+    return (0, jsx_runtime_1.jsx)(Testimonials.Component, Object.assign({}, props));
 }
 // extension
 (function (Testimonials) {
-    // schema
+    var _a;
+    // testimonial schema
     const testimonialSchema = funnel_core_1.Schema.Field.object({
         name: 'Testimonial',
         preview: {
@@ -67,24 +23,23 @@ function Testimonials(_a) {
             author: panels_1.TestimonialPanel.Fields.author
         }
     });
-    const fieldsSchema = {
-        title: panels_1.MessagePanel.Fields.title,
-        headline: panels_1.MessagePanel.Fields.headline,
-        caption: panels_1.MessagePanel.Fields.caption,
-        ctas: panels_1.MessagePanel.Fields.ctas,
-        testimonials: funnel_core_1.Schema.Field.list({
-            name: 'Testimonials',
-            min: 1,
-            max: 3,
-            itemTypes: {
-                testimonial: testimonialSchema
-            }
-        })
-    };
-    Testimonials.schema = funnel_core_1.Schema.Block.create({
+    // factory
+    _a = Block_1.Block.create({
         id: '_nd-testimonials',
         name: 'Testimonials',
         version: 1,
-        fields: fieldsSchema
-    });
+        className: 'nd-Testimonials',
+        message: true,
+        list: {
+            schema: funnel_core_1.Schema.Field.list({
+                name: 'Testimonials',
+                min: 1,
+                max: 3,
+                itemTypes: {
+                    testimonial: testimonialSchema
+                }
+            }),
+            itemRenderer: ({ value }, itemProps) => ((0, jsx_runtime_1.jsx)(panels_1.TestimonialPanel.Testimonial, Object.assign({ quote: value.quote.value, author: value.author.value }, itemProps)))
+        }
+    }), Testimonials.Component = _a.Component, Testimonials.schema = _a.schema;
 })(Testimonials || (exports.Testimonials = Testimonials = {}));

package/dist/server/blocks/index.d.ts

@@ -10,5 +10,6 @@ export * from './Projects';
 export * from './Stat';
 export * from './Stats';
 export * from './Testimonial';
+export * from './Testimonials';
 export * from './ValueProp';
 export * from './summary';

package/dist/server/blocks/index.js

@@ -26,5 +26,6 @@ __exportStar(require("./Projects"), exports);
 __exportStar(require("./Stat"), exports);
 __exportStar(require("./Stats"), exports);
 __exportStar(require("./Testimonial"), exports);
+__exportStar(require("./Testimonials"), exports);
 __exportStar(require("./ValueProp"), exports);
 __exportStar(require("./summary"), exports);

package/dist/server/fields/CallToActions.d.ts

@@ -0,0 +1,12 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function CallToActions({ className, ctas }: CallToActions.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CallToActions {
+    const schema: Schema.ListField<{
+        cta: Schema.LinkField;
+    }>;
+    type Props = {
+        className?: string;
+        ctas: Value;
+    };
+    type Value = Schema.Field.LinkedValue.ForOptionalType<typeof schema>;
+}

package/dist/server/fields/CallToActions.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallToActions = CallToActions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const Link_1 = require("./Link");
+// component
+function CallToActions({ className, ctas }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-CallToActions'), children: ctas.map(cta => (0, jsx_runtime_1.jsx)(Link_1.Link, { link: cta.value }, cta.id)) }));
+}
+// extension
+(function (CallToActions) {
+    // schema
+    const cta = funnel_core_1.Schema.Field.link({ name: 'Call to Action' });
+    CallToActions.schema = funnel_core_1.Schema.Field.list({
+        name: 'CTAs',
+        description: 'Add your call-to-actions in the order you\'d like them to appear *(these are optional)*.',
+        itemTypes: { cta },
+        min: 1,
+        max: 2
+    });
+})(CallToActions || (exports.CallToActions = CallToActions = {}));

package/dist/server/fields/index.d.ts

@@ -1,3 +1,4 @@
+export * from './CallToActions';
 export * from './Caption';
 export * from './Description';
 export * from './FreeFormContent';

package/dist/server/fields/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CallToActions"), exports);
 __exportStar(require("./Caption"), exports);
 __exportStar(require("./Description"), exports);
 __exportStar(require("./FreeFormContent"), exports);

package/dist/server/panels/BlockPanel.js

@@ -435,9 +435,8 @@ var BlockPanel;
         if (panelCount < 2) {
             delete updatedConfigSchema.layout;
         }
-        // FIXME: add missing layout config
         // create default config
-        const defaultConfig = Object.assign(Object.assign(Object.assign({ theme: funnel_core_1.Schema.EnumField.Value.toData('default'), contentAlign: funnel_core_1.Schema.EnumField.Value.toData('start') }, messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.defaultConfig), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.defaultConfig), listConfig === null || listConfig === void 0 ? void 0 : listConfig.defaultConfig);
+        const defaultConfig = Object.assign(Object.assign(Object.assign(Object.assign({ theme: funnel_core_1.Schema.EnumField.Value.toData('default'), contentAlign: funnel_core_1.Schema.EnumField.Value.toData('start') }, messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.defaultConfig), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.defaultConfig), listConfig === null || listConfig === void 0 ? void 0 : listConfig.defaultConfig), { layout: layoutSchema.defaultOption, slotVariation: slotVariationSchema.defaultOption });
         // create new config
         const updatedConfig = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, config), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.config), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.config), listConfig === null || listConfig === void 0 ? void 0 : listConfig.config), { layout: funnel_core_1.Schema.EnumField.Value.toData(layout), slotVariation: funnel_core_1.Schema.EnumField.Value.toData(slotVariation) });
         // return config

package/dist/server/panels/MessagePanel.d.ts

@@ -1,6 +1,6 @@
 import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
-import { Caption, Headline, Title } from '../fields';
+import { CallToActions, Caption, Headline, Title } from '../fields';
 import { ItemAlignment, ItemSize, TextAlignment } from '../schema';
 import { BlockPanel } from './BlockPanel';
 export declare function MessagePanel({ className, panel, titleTag, title, headlineTag, headline, captionTag, caption, ctas: ctasRaw, textAlign, alignX, alignY, size, fullbleed, mobileOrder, decorator }: MessagePanel.Props): import("react/jsx-runtime").JSX.Element;
@@ -14,7 +14,7 @@ export declare namespace MessagePanel {
         headline?: Headline.Value;
         caption?: Caption.Value;
         captionTag?: Caption.Tag;
-        ctas?: Schema.LinkField.LinkedValue | Fields.ctas.Value;
+        ctas?: Schema.LinkField.LinkedValue | CallToActions.Value;
         textAlign?: TextAlignment;
         decorator?: ReactNode;
     };
@@ -48,13 +48,9 @@ export declare namespace MessagePanel {
         const title: Schema.Optional<Schema.TextField>;
         const headline: Schema.Optional<Schema.RichTextField>;
         const caption: Schema.Optional<Schema.RichTextField>;
-        const cta: Schema.LinkField;
         const ctas: Schema.Optional<Schema.ListField<{
             cta: Schema.LinkField;
         }>>;
-        namespace ctas {
-            type Value = Schema.Field.LinkedValue.ForOptionalType<typeof ctas>;
-        }
         const all: {
             readonly title: Schema.Optional<Schema.TextField>;
             readonly headline: Schema.Optional<Schema.RichTextField>;

package/dist/server/panels/MessagePanel.js

@@ -60,7 +60,7 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
                     (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-MessagePanel-title", as: titleTag, title: title }), headline &&
                     (0, jsx_runtime_1.jsx)(fields_1.Headline, { className: "nd-MessagePanel-headline", as: headlineTag, headline: headline }), caption &&
                     (0, jsx_runtime_1.jsx)(fields_1.Caption, { className: "nd-MessagePanel-caption", as: captionTag, caption: caption }), ctas.length > 0 &&
-                    (0, jsx_runtime_1.jsx)("div", { className: "nd-MessagePanel-ctas", children: ctas.map(cta => (0, jsx_runtime_1.jsx)(fields_1.Link, { className: "nd-MessagePanel-cta", link: cta.value }, cta.id)) }), decorator &&
+                    (0, jsx_runtime_1.jsx)(fields_1.CallToActions, { className: "nd-MessagePanel-ctas", ctas: ctas }), decorator &&
                     (0, jsx_runtime_1.jsx)("div", { className: "nd-MessagePanel-decorator", children: decorator })] }) }));
 }
 // extension
@@ -110,14 +110,7 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
         }).optional();
         Fields.headline = fields_1.Headline.schema.optional();
         Fields.caption = fields_1.Caption.schema.optional();
-        Fields.cta = funnel_core_1.Schema.Field.link({ name: 'Call to Action' });
-        Fields.ctas = funnel_core_1.Schema.Field.list({
-            name: 'CTAs',
-            description: 'Add your call-to-actions in the order you\'d like them to appear *(these are optional)*.',
-            itemTypes: { cta: Fields.cta },
-            min: 1,
-            max: 2
-        }).optional();
+        Fields.ctas = fields_1.CallToActions.schema.optional();
         Fields.all = {
             title: Fields.title,
             headline: Fields.headline,

package/dist/server/panels/TestimonialPanel.d.ts

@@ -1,25 +1,15 @@
 import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
-import { Person } from '../entities';
-import { Quote, Title } from '../fields';
-export declare function TestimonialPanel({ className, panel, layout, title, titleTag, quote, quoteTag, author, authorTag, ctas, decorator }: TestimonialPanel.Props): import("react/jsx-runtime").JSX.Element;
+import { Client, Person } from '../entities';
+import { CallToActions, Quote, Title } from '../fields';
+export declare function TestimonialPanel({ className, panel, ...testimonialProps }: TestimonialPanel.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace TestimonialPanel {
-    type Layout = 'companyQuoteAuthor' | 'quoteAuthor';
-    type Props = {
+    type Props = Testimonial.Props & {
         className?: string;
         panel: BlockLayout.Message;
-        layout?: Layout;
-        titleTag?: Title.Tag;
-        title?: Title.Value;
-        quoteTag?: Quote.Tag;
-        quote: Quote.Value;
-        authorTag?: Person.Tag;
-        author: Person.Value;
-        ctas?: Fields.ctas.Value;
-        decorator?: ReactNode;
     };
     namespace Props {
-        type Configuration = Pick<Props, 'className' | 'layout' | 'titleTag' | 'quoteTag' | 'authorTag' | 'decorator'>;
+        type Configuration = Testimonial.Props.Configuration;
     }
     namespace Fields {
         const title: Schema.Optional<Schema.TextField>;
@@ -36,12 +26,48 @@ export declare namespace TestimonialPanel {
             location: Schema.Optional<Schema.TextField>;
             picture: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
         }>>;
-        const cta: Schema.LinkField;
         const ctas: Schema.Optional<Schema.ListField<{
             cta: Schema.LinkField;
         }>>;
-        namespace ctas {
-            type Value = Schema.Field.LinkedValue.ForOptionalType<typeof ctas>;
+        const all: {
+            readonly title: Schema.Optional<Schema.TextField>;
+            readonly quote: Schema.RichTextField;
+            readonly author: Schema.CollectionField<Schema.Collection<{
+                title: Schema.Optional<Schema.TextField>;
+                company: Schema.Optional<Schema.CollectionField<Schema.Collection<{
+                    division: Schema.Optional<Schema.TextField>;
+                    location: Schema.Optional<Schema.TextField>;
+                    logo: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+                    badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+                    badgeText: Schema.Optional<Schema.TextField>;
+                }>>>;
+                location: Schema.Optional<Schema.TextField>;
+                picture: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+            }>>;
+            readonly ctas: Schema.Optional<Schema.ListField<{
+                cta: Schema.LinkField;
+            }>>;
+        };
+    }
+    function Testimonial({ className, layout, titleTag, title, quoteTag, quote, authorTag, author, ctas, companyDisplayFields, decorator }: Testimonial.Props): import("react/jsx-runtime").JSX.Element;
+    namespace Testimonial {
+        type Layout = 'companyQuoteAuthor' | 'quoteAuthor';
+        type Props = {
+            className?: string;
+            layout?: Layout;
+            titleTag?: Title.Tag;
+            title?: Title.Value;
+            quoteTag?: Quote.Tag;
+            quote: Quote.Value;
+            authorTag?: Person.Tag;
+            author: Person.Value;
+            ctas?: CallToActions.Value;
+            companyDisplayFields?: Client.DisplayFields.Id[];
+            decorator?: ReactNode;
+        };
+        namespace Props {
+            type Configuration = Pick<Props, 'className' | 'layout' | 'titleTag' | 'quoteTag' | 'authorTag' | 'companyDisplayFields' | 'decorator'>;
         }
+        function Placeholder(): import("react/jsx-runtime").JSX.Element;
     }
 }

package/dist/server/panels/TestimonialPanel.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -11,10 +22,8 @@ const entities_1 = require("../entities");
 const fields_1 = require("../fields");
 const BlockPanel_1 = require("./BlockPanel");
 // component
-function TestimonialPanel({ className, panel, layout = 'quoteAuthor', title, titleTag = 'span', quote, quoteTag = 'h2', author, authorTag = 'div', ctas = [], decorator }) {
-    var _a, _b;
-    // extract company from author
-    const company = (_b = (_a = author.fields) === null || _a === void 0 ? void 0 : _a.company) === null || _b === void 0 ? void 0 : _b.value;
+function TestimonialPanel(_a) {
+    var { className, panel } = _a, testimonialProps = __rest(_a, ["className", "panel"]);
     // render
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-TestimonialPanel', 
         // base layout
@@ -37,13 +46,7 @@ function TestimonialPanel({ className, panel, layout = 'quoteAuthor', title, tit
                 center: 'lg:nd-TestimonialPanel-textCenter',
                 right: 'lg:nd-TestimonialPanel-textEnd'
             }
-        })), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-TestimonialPanel-content", children: [company && layout === 'companyQuoteAuthor' &&
-                    (0, jsx_runtime_1.jsx)(entities_1.Client, { as: "div", className: "nd-TestimonialPanel-company", client: company, displayFields: ['name', 'logo'] }), title &&
-                    (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-TestimonialPanel-title", as: titleTag, title: title }), (0, jsx_runtime_1.jsx)(fields_1.Quote, { className: "nd-TestimonialPanel-quote", as: quoteTag, quote: quote }), (0, jsx_runtime_1.jsx)(entities_1.Person, { as: authorTag, className: "nd-TestimonialPanel-author", person: author, displayFields: layout === 'companyQuoteAuthor'
-                        ? entities_1.Person.DisplayFields.exclude('company')
-                        : entities_1.Person.DisplayFields.Id.values }), ctas.length > 0 &&
-                    (0, jsx_runtime_1.jsx)("div", { className: "nd-TestimonialPanel-ctas", children: ctas.map(cta => (0, jsx_runtime_1.jsx)(fields_1.Link, { className: "nd-TestimonialPanel-cta", link: cta.value }, cta.id)) }), decorator &&
-                    (0, jsx_runtime_1.jsx)("div", { className: "nd-TestimonialPanel-decorator", children: decorator })] }) }));
+        })), children: (0, jsx_runtime_1.jsx)(TestimonialPanel.Testimonial, Object.assign({ className: "nd-BlockPanel-content nd-TestimonialPanel-content" }, testimonialProps)) }));
 }
 // extension
 (function (TestimonialPanel) {
@@ -59,13 +62,35 @@ function TestimonialPanel({ className, panel, layout = 'quoteAuthor', title, tit
             hint: 'Who said it?',
             collections: [entities_1.Person.schema]
         });
-        Fields.cta = funnel_core_1.Schema.Field.link({ name: 'Call to Action' });
-        Fields.ctas = funnel_core_1.Schema.Field.list({
-            name: 'CTAs',
-            description: 'Add your call-to-actions in the order you\'d like them to appear *(these are optional)*.',
-            itemTypes: { cta: Fields.cta },
-            min: 1,
-            max: 2
-        }).optional();
+        Fields.ctas = fields_1.CallToActions.schema.optional();
+        Fields.all = {
+            title: Fields.title,
+            quote: Fields.quote,
+            author: Fields.author,
+            ctas: Fields.ctas
+        };
     })(Fields = TestimonialPanel.Fields || (TestimonialPanel.Fields = {}));
+    // component
+    function Testimonial({ className, layout, titleTag = 'span', title, quoteTag = 'h2', quote, authorTag = 'div', author, ctas = [], companyDisplayFields = ['logo'], decorator }) {
+        var _a, _b;
+        // extract company from author
+        const company = (_b = (_a = author === null || author === void 0 ? void 0 : author.fields) === null || _a === void 0 ? void 0 : _a.company) === null || _b === void 0 ? void 0 : _b.value;
+        // render
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'nd-Testimonial'), children: [!title && !quote && !author && ctas.length === 0 &&
+                    (0, jsx_runtime_1.jsx)(Testimonial.Placeholder, {}), company && layout === 'companyQuoteAuthor' &&
+                    (0, jsx_runtime_1.jsx)(entities_1.Client, { as: "div", className: "nd-TestimonialPanel-company", client: company, displayFields: companyDisplayFields }), title &&
+                    (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-TestimonialPanel-title", as: titleTag, title: title }), (0, jsx_runtime_1.jsx)(fields_1.Quote, { className: "nd-TestimonialPanel-quote", as: quoteTag, quote: quote }), (0, jsx_runtime_1.jsx)(entities_1.Person, { as: authorTag, className: "nd-TestimonialPanel-author", person: author, displayFields: layout === 'companyQuoteAuthor'
+                        ? entities_1.Person.DisplayFields.exclude('company')
+                        : entities_1.Person.DisplayFields.Id.values }), ctas.length > 0 &&
+                    (0, jsx_runtime_1.jsx)(fields_1.CallToActions, { className: "nd-TestimonialPanel-ctas", ctas: ctas }), decorator &&
+                    (0, jsx_runtime_1.jsx)("div", { className: "nd-TestimonialPanel-decorator", children: decorator })] }));
+    }
+    TestimonialPanel.Testimonial = Testimonial;
+    (function (Testimonial) {
+        // placeholder
+        function Placeholder() {
+            return ((0, jsx_runtime_1.jsx)("div", { className: "nd-Testimonial-placeholder", children: "No testimonial content" }));
+        }
+        Testimonial.Placeholder = Placeholder;
+    })(Testimonial = TestimonialPanel.Testimonial || (TestimonialPanel.Testimonial = {}));
 })(TestimonialPanel || (exports.TestimonialPanel = TestimonialPanel = {}));