@nascentdigital/funnel-ui 4.4.21 → 4.5.1

package/dist/Tailwind.d.ts

@@ -183,13 +183,17 @@ export declare namespace Tailwind {
                     '600': string;
                     '800': string;
                 };
+                containers: {
+                    'panel-md': string;
+                    'panel-lg': string;
+                };
             };
         };
         plugins: ({
             handler: () => void;
         } | {
             handler: import("tailwindcss/types/config").PluginCreator;
-            config?: Partial<import("tailwindcss/types/config").Config>;
+            config?: Partial<import("tailwindcss/types/config").Config> | undefined;
         })[];
     };
     function toPixel(value: number): PixelSize;

package/dist/Tailwind.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tailwind = void 0;
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const aspect_ratio_1 = __importDefault(require("@tailwindcss/aspect-ratio"));
+const container_queries_1 = __importDefault(require("@tailwindcss/container-queries"));
 const color_1 = __importDefault(require("color"));
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
@@ -161,6 +162,12 @@ var Tailwind;
                         '450': '450ms',
                         '600': '600ms',
                         '800': '800ms'
+                    },
+                    containers: {
+                        // below the 900px with 80px gutters
+                        'panel-md': '739px',
+                        // 1280px with 102px gutters
+                        'panel-lg': '1075px'
                     }
                 }
             },
@@ -168,6 +175,8 @@ var Tailwind;
             plugins: [
                 // aspect ratios
                 aspect_ratio_1.default,
+                // container queries
+                container_queries_1.default,
                 // custom selectors
                 (0, plugin_1.default)(function ({ addVariant }) {
                     // not first/last child

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

@@ -1,6 +1,7 @@
-import { BlockLayout, Transform } from '@nascentdigital/funnel-core';
-import { ReactNode } from 'react';
+import { BlockLayout, Schema, Transform } from '@nascentdigital/funnel-core';
+import { FunctionComponent, ReactNode } from 'react';
 import { HTMLBlockElement } from '../../types';
+import { BlockPanel, ListPanel, MessagePanel, VisualPanel } from '../panels';
 import { BlockConfig } from '../schema';
 export declare function Block({ className, config, layout, renderPanel, ...props }: Block.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Block {
@@ -13,4 +14,43 @@ export declare namespace Block {
         className?: string;
         panel: BlockLayout.Panel;
     };
+    function create<TBlockId extends string, TMessage extends boolean | undefined = undefined, TVisual extends boolean | undefined = undefined, TList extends Schema.ListField | undefined = undefined, TExtend extends Schema.Block.Config = Schema.Block.Config, TItemProps = any>(args: Create.Args<TBlockId, TMessage, TVisual, TList, TExtend, TItemProps>): Create.Result<TBlockId, TMessage, TVisual, TList, TExtend, TItemProps>;
+    namespace Create {
+        type Args<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
+            id: TBlockId;
+            name: string;
+            version: number;
+            className?: string;
+            message?: TMessage;
+            visual?: TVisual;
+            list?: {
+                schema: TList;
+                itemRenderer: TList extends Schema.ListField<infer TContent> ? (item: Schema.ListField.LinkedValue.ForItem<TContent>, itemProps: TItemProps) => ReactNode : never;
+            };
+            extendConfigSchema?: TExtend;
+        };
+        type Result<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
+            Component: FunctionComponent<Result.Component<TBlockId, TMessage, TVisual, TList, TExtend, TItemProps>>;
+            schema: Result.Schema<TBlockId, TMessage, TVisual, TList, TExtend>;
+        };
+        namespace Result {
+            type FieldsSchema<TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined> = ((TMessage extends true ? typeof MessagePanel.Fields.all : {}) & (TVisual extends true ? typeof VisualPanel.Fields.all : {}) & (TList extends Schema.ListField ? {
+                list: TList;
+            } : {}));
+            type ConfigSchema<TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TFields extends FieldsSchema<TMessage, TVisual, TList> = FieldsSchema<TMessage, TVisual, TList>> = BlockPanel.GetConfigSchema.Result<TFields, TMessage extends true ? 'message' : undefined, TVisual extends true ? 'visual' extends Schema.Fields.AssetFields.Keys<TFields> ? 'visual' : undefined : undefined, TList extends Schema.ListField ? 'list' extends Schema.Fields.ListFields.Keys<TFields> ? 'list' : undefined : undefined, TExtend>;
+            type Schema<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config> = Schema.Block<TBlockId, FieldsSchema<TMessage, TVisual, TList>, ConfigSchema<TMessage, TVisual, TList, TExtend>>;
+            type Component<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
+                className?: string;
+                model: Schema.Block.LinkedData<Schema<TBlockId, TMessage, TVisual, TList, TExtend>>;
+            } & ((TMessage extends true ? {
+                messagePanelProps?: MessagePanel.Props.Configuration;
+            } : {}) & (TVisual extends true ? {
+                visualPanelProps?: VisualPanel.Props.Configuration;
+            } : {}) & (TList extends Schema.ListField ? {
+                listPanelProps?: ListPanel.Props.Configuration & {
+                    itemProps: TItemProps;
+                };
+            } : {}));
+        }
+    }
 }

package/dist/server/blocks/Block.js

@@ -19,6 +19,7 @@ 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 panels_1 = require("../panels");
 const schema_1 = require("../schema");
 // component
 function Block(_a) {
@@ -47,6 +48,93 @@ function Block(_a) {
             }
         }), schema_1.BlockConfig.Theme.getClassName((_b = config === null || config === void 0 ? void 0 : config.theme) === null || _b === void 0 ? void 0 : _b.value)) }, props, { children: renderLayout({ renderPanel, layout }) })));
 }
+// extension
+(function (Block) {
+    function createSchema({ id, name, version, message, visual, list }) {
+        // build fields schema and panel key mapping
+        let fieldsSchema = {};
+        const panelKeyMapping = {};
+        if (message) {
+            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), panels_1.MessagePanel.Fields.all);
+            panelKeyMapping.messageKey = 'message';
+        }
+        if (visual) {
+            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), panels_1.VisualPanel.Fields.all);
+            panelKeyMapping.visualKey = 'visual';
+        }
+        if (list) {
+            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), { list: list.schema });
+            panelKeyMapping.listKey = 'list';
+        }
+        // create config schema
+        const configSchema = panels_1.BlockPanel.getConfigSchema(Object.assign({ fields: fieldsSchema }, panelKeyMapping));
+        // create block schema
+        const schema = funnel_core_1.Schema.Block.create({
+            id,
+            name,
+            version,
+            config: configSchema,
+            fields: fieldsSchema,
+            getConfig: args => panels_1.BlockPanel.getConfig(Object.assign({ args }, panelKeyMapping)),
+            getLayout: args => panels_1.BlockPanel.getLayout(Object.assign({ args }, panelKeyMapping))
+        });
+        // return
+        return {
+            schema: schema,
+            panelKeyMapping
+        };
+    }
+    function create(args) {
+        // create schema
+        const { schema, panelKeyMapping } = createSchema(args);
+        // component
+        const Component = (_a) => {
+            var _b, _c;
+            var { className, model } = _a, props = __rest(_a, ["className", "model"]);
+            // skip if no model
+            if (!model) {
+                console.warn('[Block] attempted to render block without model');
+                return null;
+            }
+            // destructure
+            const config = (_b = model.config) !== null && _b !== void 0 ? _b : {};
+            const fields = (_c = model.fields) !== null && _c !== void 0 ? _c : {};
+            // panel layout
+            const layout = panels_1.BlockPanel.getLayout(Object.assign({ args: { fields, config } }, panelKeyMapping));
+            // FIXME: internal typing of fields, props, and config need some work
+            const getPanel = ({ className, panel }) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                switch (panel.type) {
+                    case 'message': {
+                        const messagePanelFields = fields;
+                        const _m = (_a = props === null || props === void 0 ? void 0 : props.messagePanelProps) !== null && _a !== void 0 ? _a : {}, { className: messagePanelClassname } = _m, messagePanelProps = __rest(_m, ["className"]);
+                        return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, Object.assign({ className: (0, classnames_1.default)(className, messagePanelClassname), panel: panel, title: (_b = messagePanelFields.title) === null || _b === void 0 ? void 0 : _b.value, headline: (_c = messagePanelFields.headline) === null || _c === void 0 ? void 0 : _c.value, caption: (_d = messagePanelFields.caption) === null || _d === void 0 ? void 0 : _d.value, ctas: (_e = messagePanelFields.ctas) === null || _e === void 0 ? void 0 : _e.value }, messagePanelProps)));
+                    }
+                    case 'visual': {
+                        const visualPanelFields = fields;
+                        const visualPanelConfig = config;
+                        const _o = (_f = props === null || props === void 0 ? void 0 : props.visualPanelProps) !== null && _f !== void 0 ? _f : {}, { className: visualPanelClassname } = _o, visualPanelProps = __rest(_o, ["className"]);
+                        return ((0, jsx_runtime_1.jsx)(panels_1.VisualPanel, Object.assign({ className: (0, classnames_1.default)(className, visualPanelClassname), panel: panel, visual: (_g = visualPanelFields.visual) === null || _g === void 0 ? void 0 : _g.value, anchor: (_h = funnel_core_1.Schema.EnumField.Value.fromData(visualPanelConfig.visualAnchor)) !== null && _h !== void 0 ? _h : 'center' }, visualPanelProps)));
+                    }
+                    case 'list': {
+                        const listPanelFields = fields;
+                        const listPanelConfig = config;
+                        const _p = (_j = props === null || props === void 0 ? void 0 : props.listPanelProps) !== null && _j !== void 0 ? _j : {}, { className: listPanelClassname, itemProps } = _p, listPanelProps = __rest(_p, ["className", "itemProps"]);
+                        return ((0, jsx_runtime_1.jsx)(panels_1.ListPanel, Object.assign({ className: (0, classnames_1.default)(className, listPanelClassname), panel: panel, layout: ((_k = funnel_core_1.Schema.EnumField.Value.fromData(listPanelConfig.listLayout)) !== null && _k !== void 0 ? _k : 'card'), items: (_l = listPanelFields.list) === null || _l === void 0 ? void 0 : _l.value }, listPanelProps, { children: item => { var _a; return (_a = args.list) === null || _a === void 0 ? void 0 : _a.itemRenderer(item, itemProps); } })));
+                    }
+                }
+            };
+            // render block
+            return ((0, jsx_runtime_1.jsx)(Block, { className: (0, classnames_1.default)(className, args.className), config: config, layout: layout, renderPanel: getPanel }));
+        };
+        // return
+        return {
+            Component,
+            schema
+        };
+    }
+    Block.create = create;
+})(Block || (exports.Block = Block = {}));
 function renderLayout({ renderPanel, layout }) {
     // render root container (row/column/stack)
     const { root } = layout;

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

@@ -1,33 +1,25 @@
 import { Schema } from '@nascentdigital/funnel-core';
-import { HTMLBlockElement, HTMLElements } from '../../types';
+import { ComponentProps } from 'react';
 import { Client } from '../entities';
-import { Caption, Headline } from '../fields';
-export declare function Clients({ className, headlineTag, captionTag, clientsTag, clientTag, clientProps, clients: clientData, ...props }: Clients.Props): import("react/jsx-runtime").JSX.Element | null;
+import { Block } from './Block';
+export declare function Clients(props: ComponentProps<typeof Clients.Component>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Clients {
-    const schema: Schema.Block<"_nd-clients", {
-        headline: Schema.Optional<Schema.RichTextField>;
-        caption: Schema.Optional<Schema.RichTextField>;
-        items: Schema.ListField<{
-            item: 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>;
-            }>>;
-        }>;
-    }, {
-        theme: Schema.EnumField<Readonly<import("@nascentdigital/funnel-core").BlockThemes.Options>>;
-    }>;
-    type Props = HTMLBlockElement<'div'> & {
-        headlineTag?: Headline.Tag;
-        captionTag?: Caption.Tag;
-        clientsTag?: HTMLElements.Standard.Container;
-        clientTag?: Client.Tag;
-        clientProps?: Client.Props.Configuration;
-        clients: Model;
-    };
-    type Tag = HTMLElements.Standard.Container;
+    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-clients", true, undefined, Schema.ListField<{
+        item: 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>;
+        }>>;
+    }>, Schema.Block.Config, Client.Props.Configuration>>, schema: Block.Create.Result.Schema<"_nd-clients", true, undefined, Schema.ListField<{
+        item: 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>;
+        }>>;
+    }>, Schema.Block.Config>;
     type Model = Schema.Block.LinkedData<typeof schema>;
-    type ItemModel = Model['fields']['items']['value'][number];
 }

package/dist/server/blocks/Clients.js

@@ -1,71 +1,26 @@
 "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.Clients = Clients;
 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 entities_1 = require("../entities");
-const fields_1 = require("../fields");
-const schema_1 = require("../schema");
+const Block_1 = require("./Block");
 // component
-function Clients(_a) {
-    var _b, _c;
-    var { className, headlineTag = 'h2', captionTag = 'div', clientsTag = 'ul', clientTag = 'li', clientProps = {}, clients: clientData } = _a, props = __rest(_a, ["className", "headlineTag", "captionTag", "clientsTag", "clientTag", "clientProps", "clients"]);
-    // dont render if missing model
-    const { config, fields } = clientData !== null && clientData !== void 0 ? clientData : {};
-    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 (!clientData) {
-        console.warn('[Clients] attempted to render without clients model');
-        return null;
-    }
-    // slice clients for layout
-    let clients;
-    let trailingClients;
-    if (items.length >= 4) {
-        const trailingLogoOffset = items.length - 2;
-        clients = items.slice(0, trailingLogoOffset);
-        trailingClients = items.slice(trailingLogoOffset);
-    }
-    else {
-        clients = items;
-        trailingClients = undefined;
-    }
-    // render
-    const { headline: headlineRaw, caption: captionRaw } = fields;
-    const headline = headlineRaw === null || headlineRaw === void 0 ? void 0 : headlineRaw.value;
-    const caption = captionRaw === null || captionRaw === void 0 ? void 0 : captionRaw.value;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(className, 'nd-Clients', schema_1.BlockConfig.Presets.ThemeOnly.getClassName(config)) }, props, { children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-Clients-content", children: [(headline || caption) &&
-                    (0, jsx_runtime_1.jsx)("div", { className: "nd-Clients-copyWrap", children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-Clients-copy", children: [headline &&
-                                    (0, jsx_runtime_1.jsx)(fields_1.Headline, { className: "nd-Clients-headline", as: headlineTag, headline: headline }), caption &&
-                                    (0, jsx_runtime_1.jsx)(fields_1.Caption, { className: "nd-Clients-caption", as: captionTag, caption: caption })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "nd-Clients-clientsWrap", children: (0, react_1.createElement)(clientsTag, { className: 'nd-Clients-clients' }, (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [clients.map((client) => (0, jsx_runtime_1.jsx)(entities_1.Client, Object.assign({}, clientProps, { as: clientTag, className: "nd-Clients-client", client: client.value }), client.id)), trailingClients && (0, react_1.createElement)(clientTag, { className: 'nd-Clients-trailingClients' }, (0, react_1.createElement)(clientsTag, { className: 'nd-Clients-clients' }, trailingClients.map(client => (0, jsx_runtime_1.jsx)(entities_1.Client, Object.assign({}, clientProps, { as: clientTag, className: "nd-Clients-client", client: client.value }), client.id))))] })) })] }) })));
+function Clients(props) {
+    return (0, jsx_runtime_1.jsx)(Clients.Component, Object.assign({}, props));
 }
 // extension
 (function (Clients) {
-    // schema
-    Clients.schema = funnel_core_1.Schema.Block.create({
+    var _a;
+    // factory
+    _a = Block_1.Block.create({
         id: '_nd-clients',
         name: 'Clients',
         version: 1,
-        config: Object.assign({}, schema_1.BlockConfig.Presets.ThemeOnly.schema),
-        fields: {
-            headline: fields_1.Headline.schema.optional(),
-            caption: fields_1.Caption.schema.optional(),
-            items: funnel_core_1.Schema.Field.list({
+        className: 'nd-Clients',
+        message: true,
+        list: {
+            schema: funnel_core_1.Schema.Field.list({
                 name: 'Clients',
                 description: 'Client brands will be displayed in the order you present them.',
                 itemTypes: {
@@ -76,7 +31,8 @@ function Clients(_a) {
                 },
                 min: 3,
                 max: 20
-            })
+            }),
+            itemRenderer: (item, itemProps) => ((0, jsx_runtime_1.jsx)(entities_1.Client, Object.assign({ as: "li", className: "nd-Clients-client", client: item.value }, itemProps)))
         }
-    });
+    }), Clients.Component = _a.Component, Clients.schema = _a.schema;
 })(Clients || (exports.Clients = Clients = {}));