@nascentdigital/funnel-ui 4.4.21 → 4.5.1

package/dist/server/blocks/Testimonial.js

@@ -18,51 +18,83 @@ exports.Testimonial = Testimonial;
 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 schema_1 = require("../schema");
+const panels_1 = require("../panels");
+const Block_1 = require("./Block");
 // block
 function Testimonial(_a) {
-    var _b;
-    var { className, titleTag = 'span', quoteTag = 'h2', testimonial } = _a, props = __rest(_a, ["className", "titleTag", "quoteTag", "testimonial"]);
+    var _b, _c;
+    var { className, testimonial, testimonialPanelProps = {}, visualPanelProps = {} } = _a, props = __rest(_a, ["className", "testimonial", "testimonialPanelProps", "visualPanelProps"]);
     // dont render if missing model
     if (!testimonial) {
         console.warn('[Testimonial] attempted to render without testimonial model');
         return null;
     }
-    // render
-    const { visual: visualRaw, title: titleRaw, quote: quoteRaw, author: authorRaw, link: linkRaw } = (_b = testimonial.fields) !== null && _b !== void 0 ? _b : {};
+    // destructure props
+    const config = (_b = testimonial.config) !== null && _b !== void 0 ? _b : {};
+    const fields = (_c = testimonial.fields) !== null && _c !== void 0 ? _c : {};
+    const { visual: visualRaw, title: titleRaw, quote: quoteRaw, author: authorRaw, ctas: ctasRaw } = fields;
     const visual = visualRaw === null || visualRaw === void 0 ? void 0 : visualRaw.value;
     const title = titleRaw === null || titleRaw === void 0 ? void 0 : titleRaw.value;
     const quote = quoteRaw === null || quoteRaw === void 0 ? void 0 : quoteRaw.value;
     const author = authorRaw === null || authorRaw === void 0 ? void 0 : authorRaw.value;
-    const link = linkRaw === null || linkRaw === void 0 ? void 0 : linkRaw.value;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(className, 'nd-Testimonial', schema_1.BlockConfig.Presets.VisualAndCopy.getClassName(testimonial.config)) }, props, { children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-Testimonial-content", children: [visual &&
-                    (0, jsx_runtime_1.jsx)("div", { className: "nd-Testimonial-visualWrap", children: (0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-Testimonial-visual", visual: visual }) }), (0, jsx_runtime_1.jsx)("div", { className: "nd-Testimonial-copyWrap", children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-Testimonial-copy", children: [title &&
-                                (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-Testimonial-title", as: titleTag, title: title }), (0, jsx_runtime_1.jsx)(fields_1.Quote, { className: "nd-Testimonial-quote", as: quoteTag, quote: quote }), (0, jsx_runtime_1.jsx)(entities_1.Person, { as: "div", className: "nd-Testimonial-author", person: author }), link &&
-                                (0, jsx_runtime_1.jsx)(fields_1.Link, { className: "nd-Testimonial-link", link: link })] }) })] }) })));
+    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
+    , ["className"]);
+    // panel layout
+    const layout = panels_1.BlockPanel.getLayout({
+        args: { fields, config },
+        messageKey: 'message',
+        visualKey: 'visual'
+    });
+    const getPanel = ({ className, panel }) => {
+        var _a;
+        switch (panel.type) {
+            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;
+            default:
+                return undefined;
+        }
+    };
+    // render block
+    return ((0, jsx_runtime_1.jsx)(Block_1.Block, Object.assign({ className: (0, classnames_1.default)(className, 'nd-Testimonial'), config: config, layout: layout, renderPanel: getPanel }, props)));
 }
 // extension
 (function (Testimonial) {
     // schema
+    const fieldsSchema = {
+        visual: panels_1.VisualPanel.Fields.visual,
+        title: panels_1.TestimonialPanel.Fields.title,
+        quote: panels_1.TestimonialPanel.Fields.quote,
+        author: panels_1.TestimonialPanel.Fields.author,
+        ctas: panels_1.TestimonialPanel.Fields.ctas
+    };
+    const configSchema = panels_1.BlockPanel.getConfigSchema({
+        fields: fieldsSchema,
+        messageKey: 'message',
+        visualKey: 'visual'
+    });
     Testimonial.schema = funnel_core_1.Schema.Block.create({
         id: '_nd-testimonial',
         name: 'Testimonial',
         version: 1,
-        config: Object.assign({}, schema_1.BlockConfig.Presets.VisualAndCopy.schema),
-        fields: {
-            visual: fields_1.Visual.schema.modify({
-                hint: 'Create some context about the speaker or the statement',
-                tags: ['lifestyle', 'person', 'product', 'brand']
-            }).optional(),
-            title: fields_1.Title.schema.optional(),
-            quote: fields_1.Quote.schema,
-            author: funnel_core_1.Schema.Field.collection({
-                name: 'Author',
-                hint: 'Who said it?',
-                collections: [entities_1.Person.schema]
-            }),
-            link: funnel_core_1.Schema.Field.link({ name: 'Link' }).optional()
-        }
+        config: configSchema,
+        fields: fieldsSchema,
+        getConfig: args => panels_1.BlockPanel.getConfig({
+            args,
+            messageKey: 'message',
+            visualKey: 'visual'
+        }),
+        getLayout: args => panels_1.BlockPanel.getLayout({
+            args,
+            messageKey: 'message',
+            visualKey: 'visual'
+        })
     });
 })(Testimonial || (exports.Testimonial = Testimonial = {}));

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

@@ -0,0 +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;
+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>;
+                    }>>>;
+                    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;
+    };
+    type Model = Schema.Block.LinkedData<typeof schema>;
+}

package/dist/server/blocks/Testimonials.js

@@ -0,0 +1,90 @@
+"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)));
+}
+// extension
+(function (Testimonials) {
+    // schema
+    const testimonialSchema = funnel_core_1.Schema.Field.object({
+        name: 'Testimonial',
+        preview: {
+            title: 'quote'
+        },
+        content: {
+            quote: panels_1.TestimonialPanel.Fields.quote,
+            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({
+        id: '_nd-testimonials',
+        name: 'Testimonials',
+        version: 1,
+        fields: fieldsSchema
+    });
+})(Testimonials || (exports.Testimonials = Testimonials = {}));

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

@@ -1,43 +1,25 @@
 import { Schema } from '@nascentdigital/funnel-core';
-import { HTMLBlockElement, HTMLElements } from '../../types';
+import { ComponentProps } from 'react';
 import { UniqueSellingPoint } from '../entities';
-import { Caption, Headline, Title } from '../fields';
-export declare function ValueProp({ className, titleTag, headlineTag, captionTag, uspProps, valueProp, ...props }: ValueProp.Props): import("react/jsx-runtime").JSX.Element | null;
+import { Block } from './Block';
+export declare function ValueProp(props: ComponentProps<typeof ValueProp.Component>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ValueProp {
-    type Layout = 'riverflow' | 'lineup' | 'cards';
-    namespace Layout {
-        const Enum: Schema.EnumField.Options<Layout>;
-        const schema: Schema.EnumField<Schema.EnumField.Options<Layout>>;
-        function getClassName(layout?: Layout): string;
-    }
-    const schema: Schema.Block<"_nd-valueProp", {
-        title: Schema.Optional<Schema.TextField>;
-        headline: Schema.RichTextField;
-        caption: Schema.Optional<Schema.RichTextField>;
-        ctas: Schema.Optional<Schema.ListField<{
-            cta: Schema.LinkField;
+    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-valueProp", true, true, Schema.ListField<{
+        item: Schema.CollectionField<Schema.Collection<{
+            icon: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+            image: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+            headline: Schema.RichTextField;
+            caption: Schema.Optional<Schema.RichTextField>;
+            link: Schema.Optional<Schema.LinkField>;
         }>>;
-        items: Schema.ListField<{
-            item: Schema.CollectionField<Schema.Collection<{
-                icon: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
-                image: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
-                headline: Schema.RichTextField;
-                caption: Schema.Optional<Schema.RichTextField>;
-                link: Schema.Optional<Schema.LinkField>;
-            }>>;
-        }>;
-    }, {
-        layout: Schema.EnumField<Schema.EnumField.Options<Layout>>;
-        theme: Schema.EnumField<Readonly<import("@nascentdigital/funnel-core").BlockThemes.Options>>;
-    }>;
-    type Props = HTMLBlockElement<'div'> & {
-        titleTag?: Title.Tag;
-        headlineTag?: Headline.Tag;
-        captionTag?: Caption.Tag;
-        uspProps?: UniqueSellingPoint.Props.Configuration;
-        valueProp: Model;
-    };
-    type Tag = HTMLElements.Standard.Container;
+    }>, Schema.Block.Config, UniqueSellingPoint.Props.Configuration>>, schema: Block.Create.Result.Schema<"_nd-valueProp", true, true, Schema.ListField<{
+        item: Schema.CollectionField<Schema.Collection<{
+            icon: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+            image: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+            headline: Schema.RichTextField;
+            caption: Schema.Optional<Schema.RichTextField>;
+            link: Schema.Optional<Schema.LinkField>;
+        }>>;
+    }>, Schema.Block.Config>;
     type Model = Schema.Block.LinkedData<typeof schema>;
-    type ItemModel = Model['fields']['items']['value'][number];
 }

package/dist/server/blocks/ValueProp.js

@@ -1,104 +1,27 @@
 "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.ValueProp = ValueProp;
-const react_1 = require("react");
 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 schema_1 = require("../schema");
+const Block_1 = require("./Block");
 // component
-function ValueProp(_a) {
-    var _b, _c, _d, _e, _f;
-    var { className, titleTag = 'span', headlineTag = 'h2', captionTag = 'div', uspProps = {}, valueProp } = _a, props = __rest(_a, ["className", "titleTag", "headlineTag", "captionTag", "uspProps", "valueProp"]);
-    // dont render if missing model
-    const { config, fields } = valueProp !== null && valueProp !== void 0 ? valueProp : {};
-    const items = (_c = (_b = fields === null || fields === void 0 ? void 0 : fields.items) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : [];
-    if (!valueProp) {
-        console.warn('[ValueProp] attempted to render without valueProp model');
-        return null;
-    }
-    // render
-    const { title: titleRaw, headline: headlineRaw, caption: captionRaw, ctas: ctasRaw } = 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 = (_d = ctasRaw === null || ctasRaw === void 0 ? void 0 : ctasRaw.value) !== null && _d !== void 0 ? _d : [];
-    const layout = (_f = (_e = config === null || config === void 0 ? void 0 : config.layout) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : 'riverflow';
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(className, 'nd-ValueProp', ValueProp.Layout.getClassName(layout), schema_1.BlockConfig.Presets.ThemeOnly.getClassName(config)) }, props, { children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-ValueProp-content", children: [(0, jsx_runtime_1.jsx)("div", { className: "nd-ValueProp-copyWrap", children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-ValueProp-copy", children: [title &&
-                                (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-ValueProp-title", as: titleTag, title: title }), (0, jsx_runtime_1.jsx)(fields_1.Headline, { className: "nd-ValueProp-headline", as: headlineTag, headline: headline }), caption &&
-                                (0, jsx_runtime_1.jsx)(fields_1.Caption, { className: "nd-ValueProp-caption", as: captionTag, caption: caption }), ctas.length > 0 &&
-                                (0, jsx_runtime_1.jsx)("div", { className: "nd-ValueProp-ctas", children: ctas.map(cta => (0, jsx_runtime_1.jsx)(fields_1.Link, { className: "nd-ValueProp-cta", link: cta.value }, cta.id)) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "nd-ValueProp-uspsWrap", children: renderLayout({ layout, usps: items, uspProps }) })] }) })));
+function ValueProp(props) {
+    return (0, jsx_runtime_1.jsx)(ValueProp.Component, Object.assign({}, props));
 }
 // extension
 (function (ValueProp) {
-    let Layout;
-    (function (Layout) {
-        // enum
-        Layout.Enum = {
-            cards: { name: 'Cards', hint: 'A set of cards that wrap.' },
-            riverflow: { name: 'Riverflow', hint: 'A vertically alternating pattern.' },
-            lineup: { name: 'Lineup', hint: 'A horizontal stack.' }
-        };
-        // schema
-        Layout.schema = funnel_core_1.Schema.Field.enumeration({
-            name: 'Layout',
-            hint: 'Select you selling point layout',
-            description: 'Determine how your USPs will be presented.',
-            options: Layout.Enum,
-            defaultOption: 'cards'
-        });
-        // helpers
-        function getClassName(layout) {
-            switch (layout) {
-                case 'cards':
-                    return 'nd-ValueProp-layout-cards';
-                case 'riverflow':
-                    return 'nd-ValueProp-layout-riverflow';
-                case 'lineup':
-                    return 'nd-ValueProp-layout-lineup';
-                default:
-                    console.warn('[ValueProp] unrecognized layout:', layout);
-                    return 'nd-ValueProp-layout-cards';
-            }
-        }
-        Layout.getClassName = getClassName;
-    })(Layout = ValueProp.Layout || (ValueProp.Layout = {}));
-    // schema
-    ValueProp.schema = funnel_core_1.Schema.Block.create({
+    var _a;
+    // factory
+    _a = Block_1.Block.create({
         id: '_nd-valueProp',
         name: 'Value Proposition',
         version: 1,
-        config: Object.assign(Object.assign({}, schema_1.BlockConfig.Presets.ThemeOnly.schema), { layout: Layout.schema }),
-        fields: {
-            title: fields_1.Title.schema.optional(),
-            headline: fields_1.Headline.schema,
-            caption: fields_1.Caption.schema.optional(),
-            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: funnel_core_1.Schema.Field.link({ name: 'Call to Action' })
-                },
-                min: 1,
-                max: 2
-            }).optional(),
-            items: funnel_core_1.Schema.Field.list({
+        className: 'nd-ValueProp',
+        message: true,
+        visual: true,
+        list: {
+            schema: funnel_core_1.Schema.Field.list({
                 name: 'Selling Points',
                 description: 'Project will be displayed in the order you present them.',
                 itemTypes: {
@@ -109,17 +32,8 @@ function ValueProp(_a) {
                 },
                 min: 3,
                 max: 300
-            })
+            }),
+            itemRenderer: (item, itemProps) => ((0, jsx_runtime_1.jsx)(entities_1.UniqueSellingPoint, Object.assign({ as: "li", className: "nd-ValueProp-usp", usp: item.value }, itemProps)))
         }
-    });
+    }), ValueProp.Component = _a.Component, ValueProp.schema = _a.schema;
 })(ValueProp || (exports.ValueProp = ValueProp = {}));
-function renderLayout(args) {
-    // render based on layout
-    const { usps = [], layout, uspProps } = args;
-    switch (layout) {
-        case 'riverflow':
-        case 'lineup':
-        default:
-            return ((0, jsx_runtime_1.jsx)("ul", { className: "nd-ValueProp-usps", children: usps.map(({ id, value: usp }) => (0, react_1.createElement)(entities_1.UniqueSellingPoint, Object.assign({}, uspProps, { key: id, as: "li", className: "nd-ValueProp-usp", usp: usp }))) }));
-    }
-}

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

@@ -11,3 +11,4 @@ export * from './Stat';
 export * from './Stats';
 export * from './Testimonial';
 export * from './ValueProp';
+export * from './summary';

package/dist/server/blocks/index.js

@@ -27,3 +27,4 @@ __exportStar(require("./Stat"), exports);
 __exportStar(require("./Stats"), exports);
 __exportStar(require("./Testimonial"), exports);
 __exportStar(require("./ValueProp"), exports);
+__exportStar(require("./summary"), exports);