@nascentdigital/funnel-ui 4.4.21 → 4.5.1

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

@@ -0,0 +1,63 @@
+import { BlockLayout, Schema, Transform } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+import { HTMLElements } from '../../types';
+import { ItemAlignment, ItemSize, ListPanelLayout } from '../schema';
+import { BlockPanel } from './BlockPanel';
+export declare function ListPanel<TItem extends ListPanel.Item>({ as, className, panel, layout, items, overrides, children }: ListPanel.Props<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ListPanel {
+    namespace Config {
+        type Key<TPrefix extends string = string> = Key.HorizontalAlign<TPrefix> | Key.VerticalAlign<TPrefix> | Key.Width<TPrefix>;
+        namespace Key {
+            type Layout<TPrefix extends string> = `${TPrefix}Layout`;
+            function layout<TPrefix extends string>(prefix: TPrefix): Layout<TPrefix>;
+            type Width<TPrefix extends string> = `${TPrefix}Width`;
+            function width<TPrefix extends string>(prefix: TPrefix): Width<TPrefix>;
+            type HorizontalAlign<TPrefix extends string> = `${TPrefix}HorizontalAlign`;
+            function horizontalAlign<TPrefix extends string>(prefix: TPrefix): HorizontalAlign<TPrefix>;
+            type VerticalAlign<TPrefix extends string> = `${TPrefix}VerticalAlign`;
+            function verticalAlign<TPrefix extends string>(prefix: TPrefix): VerticalAlign<TPrefix>;
+        }
+        type Keys<TPrefix extends string> = {
+            layout: Key.Layout<TPrefix>;
+            width: Key.Width<TPrefix>;
+            horizontalAlign: Key.HorizontalAlign<TPrefix>;
+            verticalAlign: Key.VerticalAlign<TPrefix>;
+        };
+        function getKeys<TPrefix extends string>(prefix: TPrefix): Keys<TPrefix>;
+        type Entries<TPrefix extends string> = Record<Key.Width<TPrefix>, ItemSize.Schema> & Record<Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema> & Record<Key.VerticalAlign<TPrefix>, ItemAlignment.Vertical.Schema>;
+    }
+    type Item = {
+        id: string;
+    };
+    type Props<TItem extends Item> = {
+        as?: HTMLElements.Standard.Container;
+        className?: string;
+        panel: BlockLayout.List;
+        layout: ListPanelLayout;
+        items: ReadonlyArray<TItem>;
+        overrides?: Overrides;
+        children: Transform<TItem, ReactNode>;
+    };
+    namespace Props {
+        type Configuration = Pick<Partial<Props<any>>, 'className' | 'layout' | 'overrides'>;
+    }
+    type Overrides = {
+        [TKey in keyof ListPanelLayout.Configs]?: Partial<ListPanelLayout.Configs[TKey]>;
+    };
+    namespace GetConfig {
+        type ConfigSchema<TPrefix extends string> = Record<Config.Key.Layout<TPrefix>, ListPanelLayout.Schema> & Record<Config.Key.Width<TPrefix>, ItemSize.Schema> & Record<Config.Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema> & Record<Config.Key.VerticalAlign<TPrefix>, ItemAlignment.Vertical.Schema>;
+        type ConfigData<TPrefix extends string> = Schema.Block.Data.ForConfig<ConfigSchema<TPrefix>>;
+        type Args<TPrefix extends string> = {
+            listKey: TPrefix;
+            config?: Partial<ConfigData<TPrefix>>;
+            flexDirection?: BlockPanel.Slots.FlexDirection;
+        };
+        type Result<TPrefix extends string> = {
+            configSchema: Partial<ConfigSchema<TPrefix>>;
+            config: Partial<ConfigData<TPrefix>>;
+            defaultConfig: Partial<ConfigData<TPrefix>>;
+        };
+    }
+    function getConfig<TPrefix extends string>({ listKey, config, flexDirection }: GetConfig.Args<TPrefix>): GetConfig.Result<TPrefix>;
+    function ItemPlaceholder(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/server/panels/ListPanel.js

@@ -0,0 +1,147 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListPanel = ListPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const layouts_1 = require("../layouts");
+const schema_1 = require("../schema");
+const BlockPanel_1 = require("./BlockPanel");
+// component
+function ListPanel({ as = 'ul', className, panel, layout, items, overrides = {}, children }) {
+    // render items (or placeholder)
+    const itemsComponent = items.length > 0
+        ?
+            items.map(item => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: children(item) }, item.id))
+        :
+            funnel_core_1.ArrayUtils.series(panel.itemCount.base - 1).map(num => (0, jsx_runtime_1.jsx)(ListPanel.ItemPlaceholder, {}, num));
+    // build layout options
+    const { brick, brickFlipped, card, flexWrap, grid, horizontalStack, verticalStack, } = overrides;
+    // render layout
+    let layoutComponent;
+    switch (layout) {
+        case 'brick':
+            layoutComponent = ((0, jsx_runtime_1.jsx)(layouts_1.BrickLayout, Object.assign({ as: as }, brick, { children: itemsComponent })));
+            break;
+        case 'brickFlipped':
+            layoutComponent = ((0, jsx_runtime_1.jsx)(layouts_1.BrickLayout, Object.assign({ as: as, flipped: true }, brickFlipped, { children: itemsComponent })));
+            break;
+        case 'card':
+            layoutComponent = ((0, jsx_runtime_1.jsx)(layouts_1.CardLayout, Object.assign({ as: as }, card, { children: itemsComponent })));
+            break;
+        case 'flexWrap':
+            layoutComponent = ((0, jsx_runtime_1.jsx)(layouts_1.FlexWrapLayout, Object.assign({ as: as }, flexWrap, { children: itemsComponent })));
+            break;
+        case 'grid':
+            layoutComponent = ((0, jsx_runtime_1.jsx)(layouts_1.GridLayout, Object.assign({ as: as, columns: 3 }, grid, { children: itemsComponent })));
+            break;
+        case 'horizontalStack':
+            layoutComponent = ((0, jsx_runtime_1.jsx)(layouts_1.StackLayout, Object.assign({ as: as, direction: "horizontal" }, horizontalStack, { children: itemsComponent })));
+            break;
+        case 'verticalStack':
+            layoutComponent = ((0, jsx_runtime_1.jsx)(layouts_1.StackLayout, Object.assign({ as: as, direction: "vertical" }, verticalStack, { children: itemsComponent })));
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, '@container nd-ListPanel', 
+        // base layout
+        BlockPanel_1.BlockPanel.getClassNames({ panel })), children: (0, jsx_runtime_1.jsx)("div", { className: "nd-BlockPanel-content nd-ListPanel-content", children: layoutComponent }) }));
+}
+// extension
+(function (ListPanel) {
+    // config
+    let Config;
+    (function (Config) {
+        let Key;
+        (function (Key) {
+            function layout(prefix) {
+                return `${prefix}Layout`;
+            }
+            Key.layout = layout;
+            function width(prefix) {
+                return `${prefix}Width`;
+            }
+            Key.width = width;
+            function horizontalAlign(prefix) {
+                return `${prefix}HorizontalAlign`;
+            }
+            Key.horizontalAlign = horizontalAlign;
+            function verticalAlign(prefix) {
+                return `${prefix}VerticalAlign`;
+            }
+            Key.verticalAlign = verticalAlign;
+        })(Key = Config.Key || (Config.Key = {}));
+        function getKeys(prefix) {
+            return {
+                layout: `${prefix}Layout`,
+                width: `${prefix}Width`,
+                horizontalAlign: `${prefix}HorizontalAlign`,
+                verticalAlign: `${prefix}VerticalAlign`
+            };
+        }
+        Config.getKeys = getKeys;
+    })(Config = ListPanel.Config || (ListPanel.Config = {}));
+    function getConfig({ listKey, config = {}, flexDirection }) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const keys = Config.getKeys(listKey);
+        const configSchema = {
+            [keys.layout]: schema_1.ListPanelLayout.schema,
+            [keys.width]: schema_1.ItemSize.schema,
+            [keys.horizontalAlign]: schema_1.ItemAlignment.Horizontal.schema,
+            [keys.verticalAlign]: schema_1.ItemAlignment.Vertical.schema
+        };
+        // resolve values
+        const defaultLayout = 'card';
+        const layout = (_b = (_a = config[keys.layout]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultLayout;
+        const defaultWidth = 'md';
+        let width = (_d = (_c = config[keys.width]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultWidth;
+        const defaultHorizontalAlign = 'start';
+        const horizontalAlign = (_f = (_e = config[keys.horizontalAlign]) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : defaultHorizontalAlign;
+        const defaultVerticalAlign = 'start';
+        const verticalAlign = (_h = (_g = config[keys.verticalAlign]) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : defaultVerticalAlign;
+        if (flexDirection === 'x') {
+            delete configSchema[keys.verticalAlign];
+        }
+        else if (flexDirection === 'y') {
+            delete configSchema[keys.width];
+            delete configSchema[keys.horizontalAlign];
+        }
+        else if (flexDirection === 'none') {
+            // update options for width
+            const newWidthSchema = schema_1.ItemSize.schema.keepOptions('full', 'fullBleed');
+            configSchema[keys.width] = newWidthSchema;
+            newWidthSchema.isValidOption(width);
+            width = newWidthSchema.isValidOption(width) ? width : 'full';
+            // drop unnecessary config
+            delete configSchema[keys.horizontalAlign];
+            delete configSchema[keys.verticalAlign];
+        }
+        if (width === 'full' || width === 'fullBleed') {
+            delete configSchema[keys.horizontalAlign];
+        }
+        return {
+            configSchema,
+            config: {
+                [keys.layout]: funnel_core_1.Schema.EnumField.Value.toData(layout),
+                [keys.width]: funnel_core_1.Schema.EnumField.Value.toData(width),
+                [keys.verticalAlign]: funnel_core_1.Schema.EnumField.Value.toData(verticalAlign),
+                [keys.horizontalAlign]: funnel_core_1.Schema.EnumField.Value.toData(horizontalAlign)
+            },
+            defaultConfig: {
+                [keys.layout]: funnel_core_1.Schema.EnumField.Value.toData(defaultLayout),
+                [keys.width]: funnel_core_1.Schema.EnumField.Value.toData(defaultWidth),
+                [keys.verticalAlign]: funnel_core_1.Schema.EnumField.Value.toData(defaultVerticalAlign),
+                [keys.horizontalAlign]: funnel_core_1.Schema.EnumField.Value.toData(defaultHorizontalAlign)
+            },
+        };
+    }
+    ListPanel.getConfig = getConfig;
+    // item placeholder
+    function ItemPlaceholder() {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "nd-ListPanel-itemPlaceholder", children: "No items" }));
+    }
+    ListPanel.ItemPlaceholder = ItemPlaceholder;
+})(ListPanel || (exports.ListPanel = ListPanel = {}));

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

@@ -1,8 +1,9 @@
 import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
 import { Caption, Headline, Title } from '../fields';
-import { TextAlignment } from '../schema';
+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 }: MessagePanel.Props): import("react/jsx-runtime").JSX.Element;
+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;
 export declare namespace MessagePanel {
     type Props = BlockPanel.Props & {
         className?: string;
@@ -10,15 +11,42 @@ export declare namespace MessagePanel {
         titleTag?: Title.Tag;
         title?: Title.Value;
         headlineTag?: Headline.Tag;
-        headline: Headline.Value;
+        headline?: Headline.Value;
         caption?: Caption.Value;
         captionTag?: Caption.Tag;
         ctas?: Schema.LinkField.LinkedValue | Fields.ctas.Value;
         textAlign?: TextAlignment;
+        decorator?: ReactNode;
     };
+    namespace Props {
+        type Configuration = Pick<Props, 'className' | 'titleTag' | 'headlineTag' | 'captionTag' | 'decorator'>;
+    }
+    namespace Config {
+        type Key<TPrefix extends string = string> = Key.TextAlign<TPrefix> | Key.HorizontalAlign<TPrefix> | Key.VerticalAlign<TPrefix> | Key.Width<TPrefix>;
+        namespace Key {
+            type Position<TPrefix extends string> = `${TPrefix}Position`;
+            function position<TPrefix extends string>(prefix: TPrefix): Position<TPrefix>;
+            type TextAlign<TPrefix extends string> = `${TPrefix}TextAlign`;
+            function textAlign<TPrefix extends string>(prefix: TPrefix): TextAlign<TPrefix>;
+            type Width<TPrefix extends string> = `${TPrefix}Width`;
+            function width<TPrefix extends string>(prefix: TPrefix): Width<TPrefix>;
+            type HorizontalAlign<TPrefix extends string> = `${TPrefix}HorizontalAlign`;
+            function horizontalAlign<TPrefix extends string>(prefix: TPrefix): HorizontalAlign<TPrefix>;
+            type VerticalAlign<TPrefix extends string> = `${TPrefix}VerticalAlign`;
+            function verticalAlign<TPrefix extends string>(prefix: TPrefix): VerticalAlign<TPrefix>;
+        }
+        type Keys<TPrefix extends string> = {
+            textAlign: Key.TextAlign<TPrefix>;
+            width: Key.Width<TPrefix>;
+            horizontalAlign: Key.HorizontalAlign<TPrefix>;
+            verticalAlign: Key.VerticalAlign<TPrefix>;
+        };
+        function getKeys<TPrefix extends string>(prefix: TPrefix): Keys<TPrefix>;
+        type Entries<TPrefix extends string> = Record<Key.TextAlign<TPrefix>, TextAlignment.Schema> & Record<Key.Width<TPrefix>, ItemSize.Schema> & Record<Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema> & Record<Key.VerticalAlign<TPrefix>, ItemAlignment.Vertical.Schema>;
+    }
     namespace Fields {
-        const title: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
-        const headline: Schema.RichTextField;
+        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<{
@@ -27,5 +55,43 @@ export declare namespace MessagePanel {
         namespace ctas {
             type Value = Schema.Field.LinkedValue.ForOptionalType<typeof ctas>;
         }
+        const all: {
+            readonly title: Schema.Optional<Schema.TextField>;
+            readonly headline: Schema.Optional<Schema.RichTextField>;
+            readonly caption: Schema.Optional<Schema.RichTextField>;
+            readonly ctas: Schema.Optional<Schema.ListField<{
+                cta: Schema.LinkField;
+            }>>;
+        };
+        type Keys<TitleKey extends string | undefined = string | undefined, HeadlineKey extends string | undefined = string | undefined, CaptionKey extends string | undefined = string | undefined, CtasKey extends string | undefined = string | undefined> = {
+            title: TitleKey;
+            headline: HeadlineKey;
+            caption: CaptionKey;
+            ctas: CtasKey;
+        };
+        namespace GetSchema {
+            type Result<TKeys extends Partial<Keys> = {}> = Record<TKeys['title'] extends string ? TKeys['title'] : 'title', typeof title> & Record<TKeys['headline'] extends string ? TKeys['headline'] : 'headline', typeof headline> & Record<TKeys['caption'] extends string ? TKeys['caption'] : 'caption', typeof caption> & Record<TKeys['ctas'] extends string ? TKeys['ctas'] : 'ctas', typeof ctas>;
+        }
+        function getSchema<TitleKey extends string | undefined, HeadlineKey extends string | undefined, CaptionKey extends string | undefined, CtasKey extends string | undefined>(keys?: Partial<Keys<TitleKey, HeadlineKey, CaptionKey, CtasKey>>): GetSchema.Result<Keys<TitleKey, HeadlineKey, CaptionKey, CtasKey>>;
+        function exists(fields: Record<string, Schema.Field.Data | Schema.Field.LinkedData>, keys?: Partial<Keys>): boolean;
+        function isEmpty(fields: Record<string, Schema.Field.Data | Schema.Field.LinkedData>, keys?: Partial<Keys>): boolean;
+    }
+    namespace GetConfig {
+        type ConfigSchema<TPrefix extends string> = Record<Config.Key.TextAlign<TPrefix>, TextAlignment.Schema> & Record<Config.Key.Width<TPrefix>, ItemSize.Schema> & Record<Config.Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema> & Record<Config.Key.VerticalAlign<TPrefix>, ItemAlignment.Vertical.Schema>;
+        type ConfigData<TPrefix extends string> = Schema.Block.Data.ForConfig<ConfigSchema<TPrefix>>;
+        type Args<TPrefix extends string, TFields extends Schema.Fields = Schema.Fields> = {
+            messageKey: TPrefix;
+            config?: Partial<ConfigData<TPrefix>>;
+            fields: TFields;
+            flexDirection?: BlockPanel.Slots.FlexDirection;
+        };
+        type Result<TPrefix extends string> = {
+            configSchema: Partial<ConfigSchema<TPrefix>>;
+            config: Partial<ConfigData<TPrefix>>;
+            defaultConfig: Partial<ConfigData<TPrefix>>;
+            isInline: boolean;
+        };
     }
+    function getConfig<TPrefix extends string, TFields extends Schema.Fields = Schema.Fields>({ messageKey, config, flexDirection }: GetConfig.Args<TPrefix, TFields>): GetConfig.Result<TPrefix>;
+    function Placeholder(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/server/panels/MessagePanel.js

@@ -8,9 +8,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
 const fields_1 = require("../fields");
+const schema_1 = require("../schema");
 const BlockPanel_1 = require("./BlockPanel");
 // component
-function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag = 'h2', headline, captionTag = 'div', caption, ctas: ctasRaw = [], textAlign, alignX, alignY, size, fullbleed, mobileOrder }) {
+function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag = 'h2', headline, captionTag = 'div', caption, ctas: ctasRaw = [], textAlign, alignX, alignY, size, fullbleed, mobileOrder, decorator }) {
     // normalize ctas
     let ctas;
     if (Array.isArray(ctasRaw)) {
@@ -54,20 +55,60 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
                     center: 'lg:nd-MessagePanel-textCenter',
                     right: 'lg:nd-MessagePanel-textEnd'
                 }
-            })), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-MessagePanel-content", children: [title &&
-                    (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-MessagePanel-title", as: titleTag, title: title }), (0, jsx_runtime_1.jsx)(fields_1.Headline, { className: "nd-MessagePanel-headline", as: headlineTag, headline: headline }), caption &&
+            })), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-MessagePanel-content", children: [!title && !headline && !caption && ctas.length === 0 &&
+                    (0, jsx_runtime_1.jsx)(MessagePanel.Placeholder, {}), title &&
+                    (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)) })] }) }));
+                    (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)("div", { className: "nd-MessagePanel-decorator", children: decorator })] }) }));
 }
 // extension
 (function (MessagePanel) {
+    // config
+    let Config;
+    (function (Config) {
+        let Key;
+        (function (Key) {
+            function position(prefix) {
+                return `${prefix}Position`;
+            }
+            Key.position = position;
+            function textAlign(prefix) {
+                return `${prefix}TextAlign`;
+            }
+            Key.textAlign = textAlign;
+            function width(prefix) {
+                return `${prefix}Width`;
+            }
+            Key.width = width;
+            function horizontalAlign(prefix) {
+                return `${prefix}HorizontalAlign`;
+            }
+            Key.horizontalAlign = horizontalAlign;
+            function verticalAlign(prefix) {
+                return `${prefix}VerticalAlign`;
+            }
+            Key.verticalAlign = verticalAlign;
+        })(Key = Config.Key || (Config.Key = {}));
+        function getKeys(prefix) {
+            return {
+                textAlign: `${prefix}TextAlign`,
+                width: `${prefix}Width`,
+                horizontalAlign: `${prefix}HorizontalAlign`,
+                verticalAlign: `${prefix}VerticalAlign`
+            };
+        }
+        Config.getKeys = getKeys;
+    })(Config = MessagePanel.Config || (MessagePanel.Config = {}));
     // fields
     let Fields;
     (function (Fields) {
-        Fields.title = fields_1.Visual.schema.modify({
+        // schemas
+        Fields.title = fields_1.Title.schema.modify({
             description: 'A short intro or heading for the message'
         }).optional();
-        Fields.headline = fields_1.Headline.schema;
+        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({
@@ -77,5 +118,116 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
             min: 1,
             max: 2
         }).optional();
+        Fields.all = {
+            title: Fields.title,
+            headline: Fields.headline,
+            caption: Fields.caption,
+            ctas: Fields.ctas
+        };
+        function getSchema(keys = {}) {
+            var _a, _b, _c, _d;
+            return {
+                [(_a = keys.title) !== null && _a !== void 0 ? _a : 'title']: Fields.title,
+                [(_b = keys.headline) !== null && _b !== void 0 ? _b : 'headline']: Fields.headline,
+                [(_c = keys.caption) !== null && _c !== void 0 ? _c : 'caption']: Fields.caption,
+                [(_d = keys.ctas) !== null && _d !== void 0 ? _d : 'ctas']: Fields.ctas
+            };
+        }
+        Fields.getSchema = getSchema;
+        // exists
+        function exists(fields, keys = {}) {
+            var _a, _b, _c, _d;
+            return !!fields[((_a = keys.title) !== null && _a !== void 0 ? _a : 'title')]
+                || !!fields[((_b = keys.headline) !== null && _b !== void 0 ? _b : 'headline')]
+                || !!fields[((_c = keys.caption) !== null && _c !== void 0 ? _c : 'caption')]
+                || !!fields[((_d = keys.ctas) !== null && _d !== void 0 ? _d : 'ctas')];
+        }
+        Fields.exists = exists;
+        // exists
+        function isEmpty(fields, keys = {}) {
+            var _a, _b, _c, _d;
+            // helper
+            const isEmptyText = (key) => {
+                var _a;
+                const data = fields[key];
+                return !data || ((_a = funnel_core_1.Schema.Field.Data.getText(data)) !== null && _a !== void 0 ? _a : '').trim().length === 0;
+            };
+            const isEmptyList = (key) => {
+                var _a;
+                const data = fields[key];
+                return !data || ((_a = data.value) !== null && _a !== void 0 ? _a : []).length === 0;
+            };
+            // evaluate
+            return isEmptyText((_a = keys.title) !== null && _a !== void 0 ? _a : 'title')
+                && isEmptyText((_b = keys.headline) !== null && _b !== void 0 ? _b : 'headline')
+                && isEmptyText((_c = keys.caption) !== null && _c !== void 0 ? _c : 'caption')
+                && isEmptyList((_d = keys.ctas) !== null && _d !== void 0 ? _d : 'ctas');
+        }
+        Fields.isEmpty = isEmpty;
     })(Fields = MessagePanel.Fields || (MessagePanel.Fields = {}));
+    function getConfig({ messageKey, config = {}, flexDirection }) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        // create schema
+        const keys = Config.getKeys(messageKey);
+        const configSchema = {
+            [keys.textAlign]: schema_1.TextAlignment.schema,
+            [keys.width]: schema_1.ItemSize.schema,
+            [keys.horizontalAlign]: schema_1.ItemAlignment.Horizontal.schema,
+            [keys.verticalAlign]: schema_1.ItemAlignment.Vertical.schema
+        };
+        // resolve values
+        const defaultTextAlign = 'left';
+        const textAlign = (_b = (_a = config[keys.textAlign]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultTextAlign;
+        const defaultWidth = 'full';
+        let width = (_d = (_c = config[keys.width]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultWidth;
+        const defaultHorizontalAlign = 'start';
+        const horizontalAlign = (_f = (_e = config[keys.horizontalAlign]) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : defaultHorizontalAlign;
+        const defaultVerticalAlign = 'start';
+        const verticalAlign = (_h = (_g = config[keys.verticalAlign]) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : defaultVerticalAlign;
+        if (flexDirection === 'x') {
+            delete configSchema[keys.verticalAlign];
+        }
+        else if (flexDirection === 'y') {
+            delete configSchema[keys.textAlign];
+            delete configSchema[keys.width];
+            delete configSchema[keys.horizontalAlign];
+        }
+        else if (flexDirection === 'none') {
+            // update options for width
+            const newWidthSchema = schema_1.ItemSize.schema.keepOptions('full', 'fullBleed');
+            configSchema[keys.width] = newWidthSchema;
+            newWidthSchema.isValidOption(width);
+            width = newWidthSchema.isValidOption(width) ? width : 'full';
+            // drop unnecessary config
+            // drop unnecessary config
+            delete configSchema[keys.textAlign];
+            delete configSchema[keys.horizontalAlign];
+            delete configSchema[keys.verticalAlign];
+        }
+        if (width === 'full' || width === 'fullBleed') {
+            delete configSchema[keys.horizontalAlign];
+        }
+        // return result
+        return {
+            configSchema,
+            config: {
+                [keys.textAlign]: funnel_core_1.Schema.EnumField.Value.toData(textAlign),
+                [keys.width]: funnel_core_1.Schema.EnumField.Value.toData(width),
+                [keys.verticalAlign]: funnel_core_1.Schema.EnumField.Value.toData(verticalAlign),
+                [keys.horizontalAlign]: funnel_core_1.Schema.EnumField.Value.toData(horizontalAlign)
+            },
+            defaultConfig: {
+                [keys.textAlign]: funnel_core_1.Schema.EnumField.Value.toData(defaultTextAlign),
+                [keys.width]: funnel_core_1.Schema.EnumField.Value.toData(defaultWidth),
+                [keys.verticalAlign]: funnel_core_1.Schema.EnumField.Value.toData(defaultVerticalAlign),
+                [keys.horizontalAlign]: funnel_core_1.Schema.EnumField.Value.toData(defaultHorizontalAlign)
+            },
+        };
+    }
+    MessagePanel.getConfig = getConfig;
+    // placeholder
+    function Placeholder() {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "nd-BlockPanel-placeholder nd-MessagePanel-placeholder", children: "No message content" }));
+    }
+    MessagePanel.Placeholder = Placeholder;
 })(MessagePanel || (exports.MessagePanel = MessagePanel = {}));

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

@@ -0,0 +1,47 @@
+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;
+export declare namespace TestimonialPanel {
+    type Layout = 'companyQuoteAuthor' | 'quoteAuthor';
+    type 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'>;
+    }
+    namespace Fields {
+        const title: Schema.Optional<Schema.TextField>;
+        const quote: Schema.RichTextField;
+        const 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>>;
+        }>>;
+        const cta: Schema.LinkField;
+        const ctas: Schema.Optional<Schema.ListField<{
+            cta: Schema.LinkField;
+        }>>;
+        namespace ctas {
+            type Value = Schema.Field.LinkedValue.ForOptionalType<typeof ctas>;
+        }
+    }
+}

package/dist/server/panels/TestimonialPanel.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestimonialPanel = TestimonialPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+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;
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-TestimonialPanel', 
+        // base layout
+        BlockPanel_1.BlockPanel.getClassNames({ panel }), 
+        // text-align
+        funnel_core_1.BlockLayout.ResponsiveClassNames.parse({
+            value: panel.textAlign,
+            mobile: {
+                left: 'max-md:nd-TestimonialPanel-textStart',
+                center: 'max-md:nd-TestimonialPanel-textCenter',
+                right: 'max-md:nd-TestimonialPanel-textEnd'
+            },
+            base: {
+                left: 'md:nd-TestimonialPanel-textStart',
+                center: 'md:nd-TestimonialPanel-textCenter',
+                right: 'md:nd-TestimonialPanel-textEnd'
+            },
+            desktop: {
+                left: 'lg:nd-TestimonialPanel-textStart',
+                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 })] }) }));
+}
+// extension
+(function (TestimonialPanel) {
+    // fields
+    let Fields;
+    (function (Fields) {
+        Fields.title = fields_1.Title.schema.modify({
+            description: 'A short intro or heading for the message'
+        }).optional();
+        Fields.quote = fields_1.Quote.schema;
+        Fields.author = funnel_core_1.Schema.Field.collection({
+            name: 'Author',
+            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 = TestimonialPanel.Fields || (TestimonialPanel.Fields = {}));
+})(TestimonialPanel || (exports.TestimonialPanel = TestimonialPanel = {}));