@nascentdigital/funnel-ui 4.6.7 → 5.0.2

package/dist/styles/blocks/Block-layout.css

@@ -28,69 +28,6 @@
     .nd-Block {
         min-height: var(--nd-block-height-min);
     }
-    .nd-Block-rootContainerWrap {
-
-        /* for row (always on) */
-        &:has(> .nd-Block-row) {
-            @apply container-p;
-        }
-        > .nd-Block-rootContainer > .nd-Block-row {
-            @media screen and (max-width: theme('screens.md')) {
-                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-mobile)) {
-                    @apply container-p;
-                }
-            }
-            @media screen(md) {
-                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet)) {
-                    @apply container-p;
-                }
-            }
-            @media screen(lg) {
-                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop)) {
-                    @apply container-p;
-                }
-            }
-        }
-
-        /* for column/stack (apply container to panels if not fullbleed) */
-        &:has(> :is(.nd-Block-column, .nd-Block-stack)) {
-            @media screen and (max-width: theme('screens.md')) {
-                &:not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-mobile))) {
-                    @apply container-p;
-                }
-                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-mobile)) {
-
-                    > .nd-Block-rootContainer > *:not(:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-mobile)):not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-mobile))) {
-                        @apply container-p;
-                    }
-                }
-            }
-            @media screen(md) {
-                &:not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet))) {
-                    @apply container-p;
-                }
-                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet)) {
-
-                    > .nd-Block-rootContainer > *:not(:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet)):not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet))) {
-                        @apply container-p;
-                    }
-                }
-            }
-            @media screen(lg) {
-                &:not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop))) {
-                    @apply container-p;
-                }
-                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop)) {
-
-                    > .nd-Block-rootContainer > *:not(:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop)):not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop))) {
-                        @apply container-p;
-                    }
-                }
-            }
-        }
-    }
-    .nd-Block-rootContainer {
-    }
 
     /* container/fullbleed */
     ._nd-Block-fullbleed-left {
@@ -102,6 +39,10 @@
 
 
     /* row layout */
+    .nd-Block-row {
+        @apply max-md:_nd-Block-row-mobile md:_nd-Block-row-desktop;
+    }
+
     ._nd-Block-row-mobile {
         @apply flex flex-col gap-[var(--nd-block-layout-gap-y)];
         container-type: inline-size;
@@ -116,50 +57,44 @@
             }
         }
     }
+
     ._nd-Block-row-desktop {
         @apply grid auto-cols-fr gap-[var(--nd-block-layout-gap-x)];
         container-type: inline-size;
 
-        /* row widths */
-        &.nd-Block-items-1 {
-            @apply grid-cols-1;
-        }
-        &.nd-Block-items-2 {
-            @apply grid-cols-2;
-        }
-        &.nd-Block-items-3 {
-            @apply grid-cols-3;
-        }
-        &.nd-Block-items-4 {
-            @apply grid-cols-4;
-        }
-
         /* row alignment */
+
         &.nd-Block-y-start {
             @apply items-start;
         }
+
         &.nd-Block-y-center {
             @apply items-center;
         }
+
         &.nd-Block-y-end {
             @apply items-end;
         }
 
         /* fullbleed (l1 OR l2) */
+
         & > .nd-BlockPanel {
             &.nd-BlockPanel-fullbleed {
                 &:first-child {
                     @apply _nd-Block-fullbleed-left;
                 }
+
                 &:last-child {
                     @apply _nd-Block-fullbleed-right;
                 }
             }
+
             @media screen(md) {
                 &.nd-BlockPanel-fullbleed-tablet {
                     &:first-child {
                         @apply _nd-Block-fullbleed-left;
                     }
+
                     &:last-child {
                         @apply _nd-Block-fullbleed-right;
                     }
@@ -170,6 +105,7 @@
                     &:first-child {
                         @apply _nd-Block-fullbleed-left;
                     }
+
                     &:last-child {
                         @apply _nd-Block-fullbleed-right;
                     }
@@ -177,10 +113,36 @@
             }
         }
     }
-    .nd-Block-row {
-        @apply max-md:_nd-Block-row-mobile md:_nd-Block-row-desktop;
+
+    .nd-Block-row-ratio-1_1 {
+        @apply grid-cols-[1fr,1fr];
+    }
+
+    .nd-Block-row-ratio-1_2 {
+        @apply grid-cols-[1fr,2fr];
     }
 
+    .nd-Block-row-ratio-1_3 {
+        @apply grid-cols-[1fr,3fr];
+    }
+
+    .nd-Block-row-ratio-2_1 {
+        @apply grid-cols-[2fr,1fr];
+    }
+
+    .nd-Block-row-ratio-2_3 {
+        @apply grid-cols-[2fr,3fr];
+    }
+
+    .nd-Block-row-ratio-3_1 {
+        @apply grid-cols-[3fr,1fr];
+    }
+
+    .nd-Block-row-ratio-3_2 {
+        @apply grid-cols-[3fr,2fr];
+    }
+
+
     /* column layout  */
     ._nd-Block-column-mobile {
         @apply flex flex-col gap-[var(--nd-block-layout-gap-y)];
@@ -192,7 +154,8 @@
         @apply w-full max-md:_nd-Block-column-mobile md:_nd-Block-column-desktop;
     }
 
-    /* column layout  */
+
+    /* stack layout  */
     .nd-Block-stack {
         @apply stacked;
 
@@ -226,6 +189,7 @@
         }
     }
 
+
     /* panel layout */
     ._nd-BlockPanel-desktop {
         @apply grid grid-cols-12;
@@ -281,4 +245,41 @@
     .nd-BlockPanel-mobileLast {
         @apply max-md:order-last;
     }
+
+    /*  containers   */
+    .nd-Block-rowWrap {
+        @apply container;
+    }
+}
+
+.nd-Block-rootContainer:not(.nd-Block-row) {
+
+    /* direct descendent */
+    > .nd-BlockPanel-wrap {
+        @media screen and (max-width: theme('screens.md')) {
+            &:not(:is(.nd-Block-fullbleed, .nd-Block-fullbleed-mobile)){
+                @apply container;
+            }
+        }
+
+        @media screen(md) {
+            &:not(:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet)){
+                @apply container;
+            }
+        }
+
+        @media screen(lg) {
+            &:not(:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop)){
+                @apply container;
+            }
+        }
+
+    }
+
+    /* nested */
+    > .nd-Block-containerWrap:not(.nd-Block-rowWrap) {
+        .nd-BlockPanel-wrap {
+            @apply container;
+        }
+    }
 }

package/dist/styles/blocks/Editorial.css

@@ -42,7 +42,7 @@
             @apply w-full;
         }
         .nd-Editorial-headerWrap {
-            @apply container-p relative;
+            @apply container relative;
         }
         .nd-Editorial-header {
             @apply flex flex-col gap-[var(--nd-editorial-header-gap)];
@@ -60,7 +60,7 @@
             margin: var(--nd-editorial-ctas-margin);
         }
         .nd-Editorial-bodyWrap {
-            @apply container-p relative;
+            @apply container relative;
         }
         .nd-Editorial-visualWrap {
             @apply relative;

package/dist/styles/blocks/Form.css

@@ -3,11 +3,11 @@
     .nd-Form {
 
         .nd-Form-copyWrap {
-            @apply container-p;
+            @apply container;
         }
 
         .nd-Form-formWrap {
-            @apply container-p;
+            @apply container;
         }
     }
 }

package/dist/styles/blocks/MediaLayout.css

@@ -64,7 +64,7 @@
         /* vertical stack */
         .nd-StackLayout.nd-StackLayout-direction-vertical {
             .nd-MediaLayout-itemWrap {
-                @apply aspect-cinema @panel-lg:aspect-cinemascope;
+                @apply nd-VisualPanel nd-VisualPanel-aspect-auto;
             }
         }
     }

package/dist/styles/components/container.css

@@ -2,57 +2,36 @@
 
     :root {
         --nd-container-size: theme('screens.xl');
-        --nd-container-size-wide: 1800px;
         --nd-container-gutter-xs: 24px;
-        --nd-container-gutter-wide-xs: var(--nd-container-gutter-xs);
         --nd-container-gutter-sm: 40px;
-        --nd-container-gutter-wide-sm: var(--nd-container-gutter-sm);
         --nd-container-gutter-md: 80px;
-        --nd-container-gutter-wide-md: var(--nd-container-gutter-md);
         --nd-container-gutter-lg: 102px;
-        --nd-container-gutter-wide-lg: var(--nd-container-gutter-lg);
         --nd-container-gutter-xl: 102px;
-        --nd-container-gutter-wide-xl: 80px;
 
         --nd-container-gutter: var(--nd-container-gutter-xs);
-        --nd-container-gutter-wide: var(--nd-container-gutter-wide-xs);
         @media screen(sm) {
             --nd-container-gutter: var(--nd-container-gutter-sm);
-            --nd-container-gutter-wide: var(--nd-container-gutter-wide-sm);
         }
         @media screen(md) {
             --nd-container-gutter: var(--nd-container-gutter-md);
-            --nd-container-gutter-wide: var(--nd-container-gutter-wide-md);
         }
         @media screen(lg) {
             --nd-container-gutter: var(--nd-container-gutter-lg);
-            --nd-container-gutter-wide: var(--nd-container-gutter-wide-lg);
         }
         @media screen(xl) {
             --nd-container-gutter: var(--nd-container-gutter-xl);
-            --nd-container-gutter-wide: var(--nd-container-gutter-wide-xl);
         }
     }
 
     .container {
-        @apply max-w-[var(--nd-container-size)] mx-auto;
-    }
-    .container-wide {
-        @apply max-w-[var(--nd-container-size-wide)] mx-auto;
+        @apply max-w-[var(--nd-container-size)] mx-auto container-gutter;
     }
     .container-gutter {
         @apply px-[var(--nd-container-gutter)];
     }
-    .container-gutter-wide {
-        @apply px-[var(--nd-container-gutter-wide)];
-    }
-    .container-p {
-        @apply container container-gutter;
-    }
-    .container-wide-p {
-        @apply container-wide container-gutter-wide;
-    }
     .container-none {
         @apply max-w-none px-revert;
     }
 }
+
+/* TODO: find replace only on UI and nascentdigital , NOT: Editor!!!*/

package/dist/styles/layouts/Accordion.css

@@ -0,0 +1,29 @@
+@layer components {
+
+    :root {
+    }
+
+    /* list */
+    .nd-AccordionLayout {
+    }
+
+    /* item */
+    .nd-AccordionItem {
+    }
+    .nd-AccordionItem-expanded {
+    }
+
+    /* header */
+    .nd-AccordionItem-headerWrap {
+    }
+    .nd-AccordionItem-header {
+    }
+    .nd-AccordionItem-headerFocus {
+    }
+
+    /* panel */
+    .nd-AccordionItem-panelWrap {
+    }
+    .nd-AccordionItem-panel {
+    }
+}

package/dist/styles/layouts/_index.css

@@ -1,8 +1,9 @@
-@import "./Layout.css";
+@import "./Accordion.css";
 @import "./BentoLayout.css";
 @import "./CardLayout.css";
 @import "./BrickLayout.css";
 @import "./FlexWrapLayout.css";
 @import "./GridLayout.css";
+@import "./Layout.css";
 @import "./MasonryLayout.css";
 @import "./StackLayout.css";

package/dist/styles/panels/VisualPanel.css

@@ -9,7 +9,8 @@
 
     /* aspect ratios */
     .nd-VisualPanel-aspect-auto {
-        --nd-visual-aspect: theme(aspectRatio.auto);
+        --nd-visual-aspect: unset;
+        --nd-visual-width: 100%;
         --nd-visual-height: auto;
     }
     .nd-VisualPanel-aspect-square {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nascentdigital/funnel-ui",
   "description": "UI components for funnel",
-  "version": "4.6.7",
+  "version": "5.0.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -69,5 +69,5 @@
     "react-dom": "^19",
     "ts-jest": "^29.3.2"
   },
-  "gitHead": "b17e33b4400391b3984e61225c572f097c4c26c9"
+  "gitHead": "24d9690cf813052f6561c3ccef11c7cf69ad7f7c"
 }

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

@@ -1,33 +0,0 @@
-import { Schema } from '@nascentdigital/funnel-core';
-import { ReactNode } from 'react';
-import { HTMLBlockElement } from '../../types';
-import { Caption, FreeFormContent, Headline, Title, Visual } from '../fields';
-import { BlockConfig } from '../schema';
-export declare function Editorial({ className, model, titleTag, headlineTag, captionTag, freeFormContentTag, headerDecorator, visualDecorator, visualLoading, ...props }: Editorial.Props): import("react/jsx-runtime").JSX.Element | null;
-export declare namespace Editorial {
-    const schema: Schema.Block<"_nd-editorial", {
-        visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
-        title: Schema.Optional<Schema.TextField>;
-        headline: Schema.Optional<Schema.RichTextField>;
-        caption: Schema.Optional<Schema.RichTextField>;
-        ctas: Schema.Optional<Schema.ListField<{
-            cta: Schema.LinkField;
-        }>>;
-        content: Schema.RichTextField;
-        extraContent: Schema.Optional<Schema.RichTextField>;
-    }, {
-        theme: Schema.EnumField<Readonly<import("@nascentdigital/funnel-core").BlockThemes.Options>>;
-        visualLayout: Schema.EnumField<Schema.EnumField.Options<BlockConfig.VisualLayout>>;
-    }>;
-    type Props = HTMLBlockElement<'div'> & {
-        model: Model;
-        titleTag?: Title.Tag;
-        headlineTag?: Headline.Tag;
-        captionTag?: Caption.Tag;
-        freeFormContentTag?: FreeFormContent.Tag;
-        headerDecorator?: ReactNode;
-        visualDecorator?: ReactNode;
-        visualLoading?: Visual.Loading;
-    };
-    type Model = Schema.Block.LinkedData<typeof schema>;
-}

package/dist/server/blocks/Editorial.js

@@ -1,80 +0,0 @@
-"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.Editorial = Editorial;
-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");
-// block
-function Editorial(_a) {
-    var _b, _c, _d, _e, _f;
-    var { className, model, titleTag = 'span', headlineTag = 'div', captionTag = 'div', freeFormContentTag = 'div', headerDecorator, visualDecorator, visualLoading = 'eager' } = _a, props = __rest(_a, ["className", "model", "titleTag", "headlineTag", "captionTag", "freeFormContentTag", "headerDecorator", "visualDecorator", "visualLoading"]);
-    // dont render if missing model
-    if (!model) {
-        console.warn('[Editorial] attempted to render without editorial model');
-        return null;
-    }
-    // render
-    const { title: titleRaw, headline: headlineRaw, caption: captionRaw, ctas: ctasRaw, visual: visualRaw, content: contentRaw, extraContent: extraContentRaw } = model.fields;
-    const visual = visualRaw === null || visualRaw === void 0 ? void 0 : visualRaw.value;
-    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 = (_b = ctasRaw === null || ctasRaw === void 0 ? void 0 : ctasRaw.value) !== null && _b !== void 0 ? _b : [];
-    const content = contentRaw === null || contentRaw === void 0 ? void 0 : contentRaw.value;
-    const extraContent = extraContentRaw === null || extraContentRaw === void 0 ? void 0 : extraContentRaw.value;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(className, 'nd-Block nd-Editorial', schema_1.BlockConfig.Theme.getClassName((_d = (_c = model === null || model === void 0 ? void 0 : model.config) === null || _c === void 0 ? void 0 : _c.theme) === null || _d === void 0 ? void 0 : _d.value), schema_1.BlockConfig.VisualLayout.getClassName((_f = (_e = model === null || model === void 0 ? void 0 : model.config) === null || _e === void 0 ? void 0 : _e.visualLayout) === null || _f === void 0 ? void 0 : _f.value)) }, props, { children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-content", children: [(title || headline || caption || ctas.length > 0) &&
-                    (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-headerWrap", children: [(0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-header", children: [title &&
-                                        (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-Editorial-title", as: titleTag, title: title }), headline &&
-                                        (0, jsx_runtime_1.jsx)(fields_1.Headline, { className: "nd-Editorial-headline", as: headlineTag, headline: headline }), caption &&
-                                        (0, jsx_runtime_1.jsx)(fields_1.Caption, { className: "nd-Editorial-caption", as: captionTag, caption: caption }), ctas.length > 0 &&
-                                        (0, jsx_runtime_1.jsx)("div", { className: "nd-Editorial-ctas", children: ctas.map(cta => (0, jsx_runtime_1.jsx)(fields_1.Link, { className: "nd-Editorial-cta", link: cta.value }, cta.id)) })] }), headerDecorator] }), (0, jsx_runtime_1.jsx)("div", { className: "nd-Editorial-bodyWrap", children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-body", children: [(visual || visualDecorator) &&
-                                (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-visualWrap", children: [visual &&
-                                            (0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-Editorial-visual", visual: visual, loading: visualLoading }), visualDecorator] }), (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-columns", children: [(0, jsx_runtime_1.jsx)(fields_1.FreeFormContent, { as: freeFormContentTag, className: "nd-Editorial-freeFormContent", content: content }), extraContent &&
-                                        (0, jsx_runtime_1.jsx)(fields_1.FreeFormContent, { as: freeFormContentTag, className: "nd-Editorial-freeFormContent", content: extraContent })] })] }) })] }) })));
-}
-// extension
-(function (Editorial) {
-    // schema
-    Editorial.schema = funnel_core_1.Schema.Block.create({
-        id: '_nd-editorial',
-        name: 'Editorial',
-        version: 1,
-        config: {
-            theme: schema_1.BlockConfig.Theme.schema,
-            visualLayout: schema_1.BlockConfig.VisualLayout.schema
-        },
-        fields: {
-            visual: fields_1.Visual.schema.optional(),
-            title: fields_1.Title.schema.modify({ description: 'A short intro or heading for the message' }).optional(),
-            headline: fields_1.Headline.schema.optional(),
-            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(),
-            content: fields_1.FreeFormContent.schema.full,
-            extraContent: fields_1.FreeFormContent.schema.full.optional()
-        }
-    });
-})(Editorial || (exports.Editorial = Editorial = {}));