@cntrl-site/sdk-nextjs 1.9.110 → 1.9.111

package/lib/components/Section/Section.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSectionHeight = exports.Section = void 0;
+exports.getSectionHeight = exports.getSectionHeightFallback = exports.Section = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
@@ -71,6 +71,7 @@ const Section = ({ section, data, zIndex, articleHeight }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, style: { zIndex }, children: [media && media.size !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `section-background-wrapper-${section.id}`, style: Object.assign({ transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset' }, (sectionHeight && { height: media.position === 'fixed' ? `calc(${sectionHeight}px + 200vh)` : `${sectionHeight}px` })), children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => (`
          .section-${section.id} {
+            min-height: ${getSectionHeightFallback(height)};
             min-height: ${getSectionHeight(height)};
             position: relative;
             background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
@@ -84,6 +85,7 @@ const Section = ({ section, data, zIndex, articleHeight }) => {
          .section-background-wrapper-${section.id} {
             transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
             position: relative;
+            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeightFallback(height)} + 200vh)` : getSectionHeightFallback(height)};
             height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
             width: 100%;
          }
@@ -92,7 +94,7 @@ const Section = ({ section, data, zIndex, articleHeight }) => {
     ` })] }));
 };
 exports.Section = Section;
-function getSectionHeight(heightData) {
+function getSectionHeightFallback(heightData) {
     const { units, vhUnits, mode } = heightData;
     if (mode === sdk_1.SectionHeightMode.ViewportHeightUnits)
         return `${vhUnits}vh`;
@@ -100,4 +102,13 @@ function getSectionHeight(heightData) {
         return `${units * 100}vw`;
     return '0';
 }
+exports.getSectionHeightFallback = getSectionHeightFallback;
+function getSectionHeight(heightData) {
+    const { units, vhUnits, mode } = heightData;
+    if (mode === sdk_1.SectionHeightMode.ViewportHeightUnits)
+        return `${vhUnits}svh`;
+    if (mode === sdk_1.SectionHeightMode.ControlUnits)
+        return `${units * 100}vw`;
+    return '0';
+}
 exports.getSectionHeight = getSectionHeight;

package/lib/utils/getFill.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFill = void 0;
+const color_1 = require("@cntrl-site/color");
 function getFill(fill) {
     var _a;
     if (fill.type === 'linear-gradient' && Array.isArray(fill.colors)) {
         return `linear-gradient(${fill.angle}deg, ${fill.colors
-            .map(c => `${c.value} ${c.position}%`)
+            .map(c => `${getParsedColor(c.value)} ${c.position}%`)
             .join(', ')})`;
     }
     if (fill.type === 'radial-gradient' && Array.isArray(fill.colors)) {
@@ -14,7 +15,7 @@ function getFill(fill) {
             : '50% 50%';
         const diameter = fill.diameter;
         return `radial-gradient(circle ${diameter * 100} at ${center}, ${fill.colors
-            .map(c => `${c.value} ${c.position}%`)
+            .map(c => `${getParsedColor(c.value)} ${c.position}%`)
             .join(', ')})`;
     }
     if (fill.type === 'conic-gradient' && Array.isArray(fill.colors)) {
@@ -26,18 +27,23 @@ function getFill(fill) {
         const lastStop = fill.colors[fill.colors.length - 1];
         const shouldAppendWrapStop = hasMultipleStops && typeof lastStop.position === 'number' && lastStop.position < 100;
         const colorsWithWrap = shouldAppendWrapStop
-            ? [...fill.colors, { value: fill.colors[0].value, position: 100 }]
+            ? [...fill.colors, { value: getParsedColor(fill.colors[0].value), position: 100 }]
             : fill.colors;
         return `conic-gradient(from ${angle + 90}deg at ${center}, ${colorsWithWrap
-            .map(c => `${c.value} ${c.position}%`)
+            .map(c => `${getParsedColor(c.value)} ${c.position}%`)
             .join(', ')})`;
     }
     if (fill.type === 'image' && fill.src) {
         return `url(${fill.src})`;
     }
     if (fill.type === 'solid') {
-        return fill.value;
+        return getParsedColor(fill.value);
     }
     return 'transparent';
 }
 exports.getFill = getFill;
+function getParsedColor(color) {
+    if (!color)
+        return color;
+    return color_1.CntrlColor.parse(color).fmt('rgba');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.110",
+  "version": "1.9.111",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/Section/Section.tsx

@@ -129,6 +129,7 @@ export const Section: FC<PropsWithChildren<Props>> = ({ section, data, zIndex, a
       ${
     getLayoutStyles(layouts, layoutValues, ([height, color, media]) => (`
          .section-${section.id} {
+            min-height: ${getSectionHeightFallback(height)};
             min-height: ${getSectionHeight(height)};
             position: relative;
             background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
@@ -142,6 +143,7 @@ export const Section: FC<PropsWithChildren<Props>> = ({ section, data, zIndex, a
          .section-background-wrapper-${section.id} {
             transform: ${media?.position === 'fixed' ? 'translateY(-100vh)' : 'unset'};
             position: relative;
+            height: ${media?.position === 'fixed' ? `calc(${getSectionHeightFallback(height)} + 200vh)` : getSectionHeightFallback(height)};
             height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
             width: 100%;
          }
@@ -154,9 +156,16 @@ export const Section: FC<PropsWithChildren<Props>> = ({ section, data, zIndex, a
   );
 };
 
-export function getSectionHeight(heightData: SectionHeight): string {
+export function getSectionHeightFallback(heightData: SectionHeight): string {
   const { units, vhUnits, mode } = heightData;
   if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
   if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
   return '0';
 }
+
+export function getSectionHeight(heightData: SectionHeight): string {
+  const { units, vhUnits, mode } = heightData;
+  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}svh`;
+  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
+  return '0';
+}

package/src/utils/getFill.ts

@@ -1,9 +1,10 @@
+import { CntrlColor } from '@cntrl-site/color';
 import { FillLayer } from '@cntrl-site/sdk';
 
 export function getFill(fill: FillLayer) {
   if (fill.type === 'linear-gradient' && Array.isArray(fill.colors)) {
     return `linear-gradient(${fill.angle}deg, ${fill.colors
-      .map(c => `${c.value} ${c.position}%`)
+      .map(c => `${getParsedColor(c.value)} ${c.position}%`)
       .join(', ')})`;
   }
 
@@ -13,7 +14,7 @@ export function getFill(fill: FillLayer) {
       : '50% 50%';
     const diameter = fill.diameter;
     return `radial-gradient(circle ${diameter * 100} at ${center}, ${fill.colors
-      .map(c => `${c.value} ${c.position}%`)
+      .map(c => `${getParsedColor(c.value)} ${c.position}%`)
       .join(', ')})`;
   }
 
@@ -26,11 +27,11 @@ export function getFill(fill: FillLayer) {
     const lastStop = fill.colors[fill.colors.length - 1];
     const shouldAppendWrapStop = hasMultipleStops && typeof lastStop.position === 'number' && lastStop.position < 100;
     const colorsWithWrap = shouldAppendWrapStop
-      ? [...fill.colors, { value: fill.colors[0].value, position: 100 }]
+      ? [...fill.colors, { value: getParsedColor(fill.colors[0].value), position: 100 }]
       : fill.colors;
 
     return `conic-gradient(from ${angle + 90}deg at ${center}, ${colorsWithWrap
-      .map(c => `${c.value} ${c.position}%`)
+      .map(c => `${getParsedColor(c.value)} ${c.position}%`)
       .join(', ')})`;
   }
 
@@ -39,8 +40,13 @@ export function getFill(fill: FillLayer) {
   }
 
   if (fill.type === 'solid') {
-    return fill.value;
+    return getParsedColor(fill.value);
   }
 
   return 'transparent';
 }
+
+function getParsedColor(color?: string) {
+  if (!color) return color;
+  return CntrlColor.parse(color).fmt('rgba');
+}