@nascentdigital/funnel-ui 4.4.21 → 4.5.1

package/dist/server/blocks/Outcome.js

@@ -1,489 +1,35 @@
 "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.Outcome = Outcome;
 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 fields_1 = require("../fields");
-const panels_1 = require("../panels");
-const schema_1 = require("../schema");
 const Block_1 = require("./Block");
 const OutcomeDetail_1 = require("./OutcomeDetail");
 // component
-function Outcome(_a) {
-    var _b, _c, _d;
-    var { className, titleTag = 'span', headlineTag = 'h2', captionTag = 'div', detailsTag = 'ul', detailTag = 'li', outcome, visualLoading } = _a, props = __rest(_a, ["className", "titleTag", "headlineTag", "captionTag", "detailsTag", "detailTag", "outcome", "visualLoading"]);
-    // don't render if missing model
-    if (!outcome) {
-        console.warn('[Outcome] attempted to render without outcome model');
-        return null;
-    }
-    // destructure props
-    const config = (_b = outcome.config) !== null && _b !== void 0 ? _b : {};
-    const fields = (_c = outcome.fields) !== null && _c !== void 0 ? _c : {};
-    const { title: titleRaw, headline: headlineRaw, caption: captionRaw, link: linkRaw, visual: visualRaw, details: detailsRaw } = 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 link = linkRaw === null || linkRaw === void 0 ? void 0 : linkRaw.value;
-    const visual = visualRaw === null || visualRaw === void 0 ? void 0 : visualRaw.value;
-    const details = ((_d = detailsRaw === null || detailsRaw === void 0 ? void 0 : detailsRaw.value) !== null && _d !== void 0 ? _d : []);
-    // panel layout
-    const layout = getOutcomeLayout({ fields, config });
-    const getPanel = ({ className, panel }) => {
-        var _a;
-        switch (panel.type) {
-            case 'message':
-                return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, { className: (0, classnames_1.default)(className, 'nd-Outcome-message'), panel: panel, title: title, titleTag: titleTag, headline: headline, headlineTag: headlineTag, caption: caption, captionTag: captionTag, ctas: link }));
-            case 'visual':
-                return visual
-                    ?
-                        (0, jsx_runtime_1.jsx)(panels_1.VisualPanel, { className: (0, classnames_1.default)(className, 'nd-Outcome-visual'), panel: panel, visual: visual, anchor: (_a = funnel_core_1.Schema.EnumField.Value.fromData(config.visualAnchor)) !== null && _a !== void 0 ? _a : 'center', visualLoading: visualLoading })
-                    : undefined;
-            case 'list':
-                return renderDetails({
-                    className,
-                    panel,
-                    details,
-                    detailsTag,
-                    detailTag
-                });
-        }
-    };
-    // render block
-    return ((0, jsx_runtime_1.jsx)(Block_1.Block, Object.assign({ className: (0, classnames_1.default)("nd-Outcome", className), config: outcome.config, layout: layout, renderPanel: getPanel }, props)));
+function Outcome(props) {
+    return (0, jsx_runtime_1.jsx)(Outcome.Component, Object.assign({}, props));
 }
 // extension
 (function (Outcome) {
-    let IntroPosition;
-    (function (IntroPosition) {
-        // schema
-        IntroPosition.Enum = {
-            left: { name: 'Top-Left', hint: 'Place headline on top-left of the block.' },
-            center: { name: 'Top-Center', hint: 'Place headline on top-center of the block.' },
-            right: { name: 'Top-Right', hint: 'Place headline on top-right of the block.' },
-            inline: { name: 'Inline', hint: 'Place headline beside the visual.' },
-        };
-        IntroPosition.schema = funnel_core_1.Schema.Field.enumeration({
-            name: 'Intro Position',
-            semantics: 'dropdown',
-            hint: 'Set position',
-            description: 'Control the positioning of the intro.',
-            options: IntroPosition.Enum,
-            defaultOption: 'inline'
-        });
-        // helpers
-        function getClassName(position) {
-            switch (position) {
-                case 'inline':
-                    return 'nd-Block-intro-inline';
-                case 'left':
-                    return 'nd-Block-intro-left';
-                case 'center':
-                    return 'nd-Block-intro-center';
-                case 'right':
-                    return 'nd-Block-intro-right';
-                default:
-                    console.warn('[Outcome] unrecognized intro position: ', position);
-                    return 'nd-Block-intro-inline';
-            }
-        }
-        IntroPosition.getClassName = getClassName;
-    })(IntroPosition = Outcome.IntroPosition || (Outcome.IntroPosition = {}));
-    // schema
-    Outcome.configSchema = Object.assign(Object.assign({}, schema_1.BlockConfig.Presets.ThemeOnly.schema), { introPosition: IntroPosition.schema.optional(), introTextAlignment: schema_1.TextAlignment.schema.rename('Intro Text Alignment').optional(), introWidth: schema_1.ItemSize.schema
-            .modify({ semantics: 'segmented', name: 'Intro Width' })
-            .keepOptions('md', 'lg')
-            .setDefault('md')
-            .optional(), detailsWidth: schema_1.ItemSize.schema
-            .modify({ semantics: 'segmented', name: 'Details Width' })
-            .keepOptions('sm', 'md', 'lg')
-            .setDefault('md')
-            .optional(), detailsPosition: schema_1.ItemAlignment.Horizontal.schema.rename('Details Position').optional(), visualPosition: schema_1.ItemPosition.schema
-            .modify({ name: 'Visual Position' })
-            .keepOptions('left', 'right', 'top', 'bottom')
-            .setDefault('left')
-            .optional(), visualAspect: schema_1.AspectRatio.schema
-            .rename('Visual Aspect')
-            .optional(), visualAnchor: schema_1.Anchor.schema
-            .rename('Visual Anchor')
-            .optional(), contentAlignment: schema_1.ItemAlignment.Vertical.schema.rename('Content Alignment').optional() });
-    const fieldsSchema = {
-        visual: fields_1.Visual.schema.modify({
-            tags: ['lifestyle', 'person', 'product', 'brand']
-        }).optional(),
-        title: fields_1.Title.schema.optional(),
-        headline: fields_1.Headline.schema,
-        caption: fields_1.Caption.schema.optional(),
-        link: funnel_core_1.Schema.Field.link({ name: 'Link' }).optional(),
-        details: funnel_core_1.Schema.Field.list({
-            name: 'Outcome Details',
-            itemTypes: {
-                detail: OutcomeDetail_1.OutcomeDetail.schema
-            },
-            min: 1,
-            max: 3
-        }).optional()
-    };
-    Outcome.schema = funnel_core_1.Schema.Block.create({
+    var _a;
+    // factory
+    _a = Block_1.Block.create({
         id: '_nd-outcome',
         name: 'Outcome',
         version: 1,
-        config: Outcome.configSchema,
-        fields: fieldsSchema,
-        getConfig: getOutcomeConfig,
-        getLayout: getOutcomeLayout
-    });
-})(Outcome || (exports.Outcome = Outcome = {}));
-// helpers
-function getOutcomeConfig(args) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-    // parse args
-    const { configSchema, config, fields } = args;
-    // current config helpers
-    const visual = fields === null || fields === void 0 ? void 0 : fields.visual;
-    const hasVisual = ((_a = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _a === void 0 ? void 0 : _a.value) !== undefined;
-    const hasDetails = !!((_c = (_b = fields === null || fields === void 0 ? void 0 : fields.details) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length);
-    const visualConfig = panels_1.VisualPanel.getConfig({ visual, config, aspectKey: 'visualAspect', anchorKey: 'visualAnchor' });
-    const defaultConfig = Object.assign(Object.assign(Object.assign(Object.assign({}, config), { theme: funnel_core_1.Schema.EnumField.Value.toData('default'), introPosition: funnel_core_1.Schema.EnumField.Value.toData('left'), introTextAlignment: funnel_core_1.Schema.EnumField.Value.toData('left'), introWidth: funnel_core_1.Schema.EnumField.Value.toData('md'), detailsPosition: funnel_core_1.Schema.EnumField.Value.toData('start'), detailsWidth: funnel_core_1.Schema.EnumField.Value.toData('sm'), visualPosition: funnel_core_1.Schema.EnumField.Value.toData('left') }), visualConfig.defaultConfig), { contentAlignment: funnel_core_1.Schema.EnumField.Value.toData('start') });
-    // current values or fallback to a valid value
-    const introPosition = (_d = funnel_core_1.Schema.EnumField.Value.fromData(config.introPosition)) !== null && _d !== void 0 ? _d : (_e = defaultConfig.introPosition) === null || _e === void 0 ? void 0 : _e.value;
-    const introTextAlignment = (_f = funnel_core_1.Schema.EnumField.Value.fromData(config.introTextAlignment)) !== null && _f !== void 0 ? _f : (_g = defaultConfig.introTextAlignment) === null || _g === void 0 ? void 0 : _g.value;
-    const introWidth = (_h = funnel_core_1.Schema.EnumField.Value.fromData(config.introWidth)) !== null && _h !== void 0 ? _h : (_j = defaultConfig.introWidth) === null || _j === void 0 ? void 0 : _j.value;
-    const detailsPosition = (_k = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsPosition)) !== null && _k !== void 0 ? _k : (_l = defaultConfig.detailsPosition) === null || _l === void 0 ? void 0 : _l.value;
-    const detailsWidth = (_m = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsWidth)) !== null && _m !== void 0 ? _m : (_o = defaultConfig.detailsWidth) === null || _o === void 0 ? void 0 : _o.value;
-    const visualPosition = (_p = funnel_core_1.Schema.EnumField.Value.fromData(config.visualPosition)) !== null && _p !== void 0 ? _p : (_q = defaultConfig.visualPosition) === null || _q === void 0 ? void 0 : _q.value;
-    const contentAlignment = (_r = funnel_core_1.Schema.EnumField.Value.fromData(config.contentAlignment)) !== null && _r !== void 0 ? _r : (_s = defaultConfig.contentAlignment) === null || _s === void 0 ? void 0 : _s.value;
-    // has details and has visual
-    if (hasDetails && hasVisual) {
-        const updatedConfigSchema = Object.assign(Object.assign({}, configSchema), visualConfig.configSchema);
-        let newVisualPosition = visualPosition;
-        // if intro is inline, drop introTextAlignment, introWidth and reduce visual position options
-        if (introPosition === 'inline') {
-            delete updatedConfigSchema.introTextAlignment;
-            delete updatedConfigSchema.introWidth;
-            const newVisualPositionOptions = {
-                left: { name: 'Left', hint: 'Aligns the item to the left.' },
-                right: { name: 'Right', hint: 'Aligns the item to the right.' },
-            };
-            // use the current visual position as the new one if it's valid. otherwise, fallback to left
-            newVisualPosition =
-                Object.keys(newVisualPositionOptions).includes(visualPosition) ? visualPosition : 'left';
-            updatedConfigSchema.visualPosition = configSchema.visualPosition.modify({
-                semantics: 'segmented',
-                options: newVisualPositionOptions
-            });
-        }
-        if (newVisualPosition === 'left' || newVisualPosition === 'right') {
-            delete updatedConfigSchema.detailsWidth;
-            delete updatedConfigSchema.detailsPosition;
+        className: 'nd-Outcome',
+        message: true,
+        visual: true,
+        list: {
+            schema: funnel_core_1.Schema.Field.list({
+                name: 'Outcome Details',
+                itemTypes: {
+                    detail: OutcomeDetail_1.OutcomeDetail.schema
+                },
+                min: 1,
+                max: 3
+            }),
+            itemRenderer: (item, itemProps) => ((0, jsx_runtime_1.jsx)(OutcomeDetail_1.OutcomeDetail, Object.assign({ as: "li", className: "nd-Outcome-detail", detail: item }, itemProps)))
         }
-        // return configuration
-        return {
-            updatedConfigSchema,
-            updatedConfig: Object.assign(Object.assign(Object.assign(Object.assign({}, config), { introPosition: funnel_core_1.Schema.EnumField.Value.toData(introPosition), introTextAlignment: funnel_core_1.Schema.EnumField.Value.toData(introTextAlignment), introWidth: funnel_core_1.Schema.EnumField.Value.toData(introWidth), detailsWidth: funnel_core_1.Schema.EnumField.Value.toData(detailsWidth), detailsPosition: funnel_core_1.Schema.EnumField.Value.toData(detailsPosition), visualPosition: funnel_core_1.Schema.EnumField.Value.toData(newVisualPosition) }), visualConfig.config), { contentAlignment: funnel_core_1.Schema.EnumField.Value.toData(contentAlignment) }),
-            defaultConfig
-        };
-    }
-    // has only visual
-    else if (hasVisual) {
-        const newVisualPositionOptions = {
-            left: { name: 'Left', hint: 'Aligns the item to the left.' },
-            right: { name: 'Right', hint: 'Aligns the item to the right.' },
-        };
-        // use the current visual position as the new one if it's valid. otherwise, fallback to left
-        const newVisualPosition = Object.keys(newVisualPositionOptions).includes(introPosition) ? visualPosition : 'left';
-        return {
-            updatedConfigSchema: Object.assign(Object.assign({ theme: configSchema.theme, visualPosition: configSchema.visualPosition.modify({
-                    semantics: 'segmented',
-                    options: newVisualPositionOptions
-                }) }, visualConfig.configSchema), { contentAlignment: configSchema.contentAlignment }),
-            updatedConfig: Object.assign(Object.assign(Object.assign(Object.assign({}, config), { visualPosition: funnel_core_1.Schema.EnumField.Value.toData(newVisualPosition) }), visualConfig.config), { contentAlignment: funnel_core_1.Schema.EnumField.Value.toData(contentAlignment) }),
-            defaultConfig
-        };
-    }
-    // has only details
-    else if (hasDetails) {
-        // use the current intro position as the new one if it's valid. otherwise, fallback to left
-        const newIntroPositionOptions = {
-            left: { name: 'Left', hint: 'Align all the text inside the intro to left.' },
-            right: { name: 'Right', hint: 'Align all the text inside the intro to right.' }
-        };
-        const newIntroPosition = Object.keys(newIntroPositionOptions).includes(introPosition) ? introPosition : 'left';
-        // return configuration
-        return {
-            updatedConfigSchema: {
-                theme: configSchema.theme,
-                introPosition: configSchema.introPosition.modify({
-                    semantics: 'segmented',
-                    options: newIntroPositionOptions
-                }),
-                contentAlignment: configSchema.contentAlignment
-            },
-            updatedConfig: Object.assign(Object.assign({}, config), { introPosition: funnel_core_1.Schema.EnumField.Value.toData(newIntroPosition), contentAlignment: funnel_core_1.Schema.EnumField.Value.toData(contentAlignment) }),
-            defaultConfig
-        };
-    }
-    // has only intro
-    else {
-        // define new intro position options
-        const newIntroPositionOptions = {
-            left: { name: 'Left', hint: 'Align all the text inside the intro to left.' },
-            center: { name: 'Center', hint: 'Align all the text inside the intro to center.' },
-            right: { name: 'Right', hint: 'Align all the text inside the intro to right.' }
-        };
-        // use the current intro position as the new one if it's valid. otherwise, fallback to left
-        const newIntroPosition = Object.keys(newIntroPositionOptions).includes(introPosition) ? introPosition : 'left';
-        return {
-            updatedConfigSchema: {
-                theme: configSchema.theme,
-                introPosition: configSchema.introPosition.modify({
-                    semantics: 'segmented',
-                    options: newIntroPositionOptions
-                }),
-                introTextAlignment: configSchema.introTextAlignment,
-                introWidth: configSchema.introWidth
-            },
-            updatedConfig: Object.assign(Object.assign({}, config), { introPosition: funnel_core_1.Schema.EnumField.Value.toData(newIntroPosition), introTextAlignment: funnel_core_1.Schema.EnumField.Value.toData(introTextAlignment), introWidth: funnel_core_1.Schema.EnumField.Value.toData(introWidth) }),
-            defaultConfig
-        };
-    }
-}
-function getOutcomeLayout(args) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    // parse args
-    const { config, fields } = args;
-    const hasVisual = ((_a = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _a === void 0 ? void 0 : _a.value) !== undefined;
-    const hasDetails = !!((_c = (_b = fields === null || fields === void 0 ? void 0 : fields.details) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length);
-    const introPosition = (_d = funnel_core_1.Schema.EnumField.Value.fromData(config.introPosition)) !== null && _d !== void 0 ? _d : 'left';
-    const introAlign = introPosition === 'center'
-        ? 'center'
-        : introPosition === 'right'
-            ? 'end'
-            : 'start';
-    const introTextAlign = (_e = funnel_core_1.Schema.EnumField.Value.fromData(config.introTextAlignment)) !== null && _e !== void 0 ? _e : 'left';
-    const introWidth = (_f = funnel_core_1.Schema.EnumField.Value.fromData(config.introWidth)) !== null && _f !== void 0 ? _f : 'md';
-    const visualPosition = (_g = funnel_core_1.Schema.EnumField.Value.fromData(config.visualPosition)) !== null && _g !== void 0 ? _g : 'left';
-    const detailsWidth = (_h = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsWidth)) !== null && _h !== void 0 ? _h : 'md';
-    const detailsPosition = (_j = funnel_core_1.Schema.EnumField.Value.fromData(config.detailsPosition)) !== null && _j !== void 0 ? _j : 'start';
-    const visualAspect = (_k = funnel_core_1.Schema.EnumField.Value.fromData(config.visualAspect)) !== null && _k !== void 0 ? _k : 'auto';
-    const contentAlign = (_l = funnel_core_1.Schema.EnumField.Value.fromData(config.contentAlignment)) !== null && _l !== void 0 ? _l : 'start';
-    // create layout with all parts
-    let layout;
-    if (hasDetails && hasVisual) {
-        layout = introPosition === 'inline'
-            // inline message
-            ? visualPosition === 'left'
-                // language=XML (visual left)
-                ? `
-          <block 
-            xmlns="nd:block" 
-            name="Inline, Visual-Left"
-          >
-            <row alignY="${contentAlign}">
-              <visual aspect="${visualAspect}" mobileOrder="last" />
-              <col>
-                <message textAlign="${introTextAlign}" />
-                <list itemType="message" />
-              </col>
-            </row>
-          </block>
-        `
-                // language=XML (visual right)
-                : `
-          <block 
-            xmlns="nd:block" 
-            name="Inline, Visual-Right"
-          >
-            <row alignY="${contentAlign}">
-              <col>
-                <message textAlign="${introTextAlign}" />
-                <list itemType="message" />
-              </col>
-              <visual aspect="${visualAspect}"  />
-            </row>
-          </block>
-        `
-            // top message
-            : visualPosition === 'left'
-                // language=XML (visual left)
-                ? `
-            <block 
-              xmlns="nd:block" 
-              name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Left"
-            >
-              <col>
-                <message
-                  size="${introWidth}"
-                  alignX="${introAlign}"
-                  textAlign="${introTextAlign}"
-                />
-                <row alignY="${contentAlign}">
-                  <visual aspect="${visualAspect}" mobileOrder="last" />
-                  <list itemType="message" />
-                </row>
-              </col>
-            </block>
-          `
-                : visualPosition === 'right' ?
-                    // language=XML (visual right)
-                    `
-          <block 
-            xmlns="nd:block" 
-            name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Right"
-          >
-            <col>
-              <message
-                size="${introWidth}"
-                alignX="${introAlign}"
-                textAlign="${introTextAlign}"
-              />
-              <row alignY="${contentAlign}">
-                <list itemType="message" />
-                <visual aspect="${visualAspect}" mobileOrder="first" />
-              </row>
-            </col>
-          </block>
-        `
-                    : visualPosition === 'top' ?
-                        // language=XML (visual top)
-                        `
-            <block 
-              xmlns="nd:block" 
-              name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Top"
-            >
-              <col>
-                <message
-                  size="${introWidth}"
-                  alignX="${introAlign}"
-                  textAlign="${introTextAlign}"
-                />
-                <visual aspect="${visualAspect}" />
-                <list
-                  itemType="message"
-                  size="${detailsWidth}"
-                  alignX="${detailsPosition}" />
-              </col>
-            </block>
-          `
-                        // language=XML (visual bottom)
-                        : `
-          <block 
-            xmlns="nd:block" 
-            name="Intro-${funnel_core_1.StringUtils.capitalize(introPosition)}, Visual-Bottom"
-          >
-            <col>
-              <message
-                size="${introWidth}"
-                alignX="${introAlign}"
-                textAlign="${introTextAlign}"
-              />
-              <list
-                itemType="message"
-                size="${detailsWidth}"
-                alignX="${detailsPosition}" />
-              <visual aspect="${visualAspect}" />
-            </col>
-          </block>
-        `;
-    }
-    // or layout with only visual
-    else if (hasVisual) {
-        layout = visualPosition === 'left'
-            // language=XML (visual left)
-            ? `
-        <block 
-          xmlns="nd:block" 
-          name="Visual-Left"
-        >
-          <row alignY="${contentAlign}">
-            <visual aspect="${visualAspect}" />
-            <message textAlign="${introTextAlign}" mobileOrder="first" />
-          </row>
-        </block>
-      `
-            // language=XML (visual right)
-            : `
-        <block 
-          xmlns="nd:block" 
-          name="Visual-Left"
-        >
-          <row alignY="${contentAlign}">
-            <message textAlign="${introTextAlign}" />
-            <visual aspect="${visualAspect}" />
-          </row>
-        </block>
-      `;
-    }
-    // or layout with only details
-    else if (hasDetails) {
-        layout = introPosition === 'left'
-            // language=XML (visual message left)
-            ? `
-        <block 
-          xmlns="nd:block" 
-          name="Intro-Left"
-        >
-          <row alignY="${contentAlign}">
-            <message textAlign="${introTextAlign}" />
-            <list itemType="message" />
-          </row>
-        </block>
-      `
-            // language=XML (visual right)
-            : `
-        <block 
-          xmlns="nd:block" 
-          name="Intro-Left"
-        >
-          <row alignY="${contentAlign}">
-            <list itemType="message" />
-            <message textAlign="${introTextAlign}" mobileOrder="first" />
-          </row>
-        </block>
-      `;
-    }
-    // or with only intro
-    else {
-        // language=XML
-        layout = `
-      <block 
-        xmlns="nd:block" 
-        name="Intro-only, ${funnel_core_1.StringUtils.capitalize(introPosition)}"
-      >
-        <col>
-          <message 
-            size="${introWidth}" 
-            alignX="${introAlign}" 
-            textAlign="${introTextAlign}" 
-          />
-        </col>
-      </block>
-    `;
-    }
-    // return skeleton
-    return funnel_core_1.BlockLayout.parse(layout);
-}
-function renderDetails({ className, panel, details, detailsTag, detailTag }) {
-    // skip if there's no details
-    if (details.length === 0) {
-        return undefined;
-    }
-    // render details
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, panels_1.BlockPanel.getClassNames({ panel }), 'nd-Outcome-detailsWrap'), children: (0, react_1.createElement)(detailsTag, { className: 'nd-BlockPanel-content nd-Outcome-details' }, details.map(detail => ((0, jsx_runtime_1.jsx)(OutcomeDetail_1.OutcomeDetail, { as: detailTag, detail: detail }, detail.id)))) }));
-}
+    }), Outcome.Component = _a.Component, Outcome.schema = _a.schema;
+})(Outcome || (exports.Outcome = Outcome = {}));

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

@@ -291,8 +291,6 @@ export declare namespace OutcomeDetail {
         icon: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
         link: Schema.Optional<Schema.LinkField>;
     }>;
-    type Model = Schema.Field.LinkedData<typeof schema>;
-    type Tag = HTMLElements.Standard.Container;
     type Props<T extends Tag> = Omit<HTMLAttributes<HTMLElements.Standard[T]>, 'children'> & {
         as: T;
         titleTag?: Title.Tag;
@@ -300,4 +298,9 @@ export declare namespace OutcomeDetail {
         captionTag?: Caption.Tag;
         detail: Model;
     };
+    namespace Props {
+        type Configuration = Pick<Partial<Props<Tag>>, 'as' | 'titleTag' | 'headlineTag' | 'captionTag'>;
+    }
+    type Model = Schema.Field.LinkedData<typeof schema>;
+    type Tag = HTMLElements.Standard.Container;
 }

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

@@ -1,30 +1,95 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { HTMLBlockElement } from '../../types';
-import { Quote, Title } from '../fields';
-import { BlockConfig } from '../schema';
-export declare function Testimonial({ className, titleTag, quoteTag, testimonial, ...props }: Testimonial.Props): import("react/jsx-runtime").JSX.Element | null;
+import { BlockPanel, TestimonialPanel, VisualPanel } from '../panels';
+export declare function Testimonial({ className, testimonial, testimonialPanelProps, visualPanelProps, ...props }: Testimonial.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Testimonial {
-    const schema: Schema.Block<"_nd-testimonial", {
+    const fieldsSchema: {
         visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
         title: Schema.Optional<Schema.TextField>;
         quote: Schema.RichTextField;
         author: Schema.CollectionField<Schema.Collection<{
             title: Schema.Optional<Schema.TextField>;
-            company: 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>>;
         }>>;
-        link: Schema.Optional<Schema.LinkField>;
-    }, {
-        theme: Schema.EnumField<Readonly<import("@nascentdigital/funnel-core").BlockThemes.Options>>;
-        visualLayout: Schema.EnumField<Schema.EnumField.Options<BlockConfig.VisualLayout>>;
-        copyLayout: Schema.EnumField<Schema.EnumField.Options<BlockConfig.CopyLayout>>;
-        fullbleed: Schema.BooleanField;
-    }>;
-    type Props = HTMLBlockElement<'div'> & {
-        titleTag?: Title.Tag;
-        quoteTag?: Quote.Tag;
+        ctas: Schema.Optional<Schema.ListField<{
+            cta: Schema.LinkField;
+        }>>;
+    };
+    const configSchema: BlockPanel.GetConfigSchema.Result<{
+        visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+        title: Schema.Optional<Schema.TextField>;
+        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>>;
+        }>>;
+        ctas: Schema.Optional<Schema.ListField<{
+            cta: Schema.LinkField;
+        }>>;
+    }, "message", "visual", undefined, Schema.Block.Config>;
+    export const schema: Schema.Block<"_nd-testimonial", {
+        visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+        title: Schema.Optional<Schema.TextField>;
+        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>>;
+        }>>;
+        ctas: Schema.Optional<Schema.ListField<{
+            cta: Schema.LinkField;
+        }>>;
+    }, BlockPanel.GetConfigSchema.Result<{
+        visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+        title: Schema.Optional<Schema.TextField>;
+        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>>;
+        }>>;
+        ctas: Schema.Optional<Schema.ListField<{
+            cta: Schema.LinkField;
+        }>>;
+    }, "message", "visual", undefined, Schema.Block.Config>>;
+    export type Props = HTMLBlockElement<'div'> & {
         testimonial: Model;
+        testimonialPanelProps?: TestimonialPanel.Props.Configuration;
+        visualPanelProps?: VisualPanel.Props.Configuration;
     };
-    type Model = Schema.Block.LinkedData<typeof schema>;
+    export type GetConfigArgs = Schema.Block.GetConfig.Args<typeof configSchema, typeof fieldsSchema>;
+    export type GetConfigResult = Schema.Block.GetConfig.Result<typeof configSchema>;
+    export type GetLayoutArgs = Schema.Block.GetLayout.Args<typeof configSchema, typeof fieldsSchema>;
+    export type Model = Schema.Block.LinkedData<typeof schema>;
+    export {};
 }