@kickstartds/ds-agency-premium 1.6.71--canary.45.1756.0 → 1.6.71--canary.45.1762.0

package/dist/components/split-even/split-even.schema.json

@@ -4,13 +4,20 @@
   "title": "Split Even",
   "type": "object",
   "properties": {
-    "sectionMinWidth": {
-      "title": "Section Minimum Width",
-      "description": "Sets the minimum width for each section in the split layout",
+    "contentMinWidth": {
+      "title": "Content Minimum Width",
+      "description": "Sets the minimum width for each half of the split layout",
       "type": "string",
       "enum": ["narrow", "medium", "wide"],
       "default": "medium"
     },
+    "contentGutter": {
+      "title": "Content Gutter",
+      "description": "Sets the space between the content inside the two halves of the split layout",
+      "type": "string",
+      "enum": ["narrow", "medium", "wide", "none"],
+      "default": "medium"
+    },
     "mobileLayout": {
       "title": "Mobile Layout",
       "description": "Determines the layout of the sections on mobile devices",
@@ -18,12 +25,6 @@
       "enum": ["stack", "stackReverse"],
       "default": "stack"
     },
-    "sticky": {
-      "title": "Sticky",
-      "type": "boolean",
-      "description": "Enable sticky positioning for the sections",
-      "default": false
-    },
     "verticalAlign": {
       "title": "Vertical Alignment",
       "type": "string",
@@ -34,9 +35,129 @@
     "gutter": {
       "title": "Gutter",
       "type": "string",
-      "description": "The space between the two sections",
+      "description": "Sets the space between the two halves of the split layout",
       "enum": ["large", "default", "small", "none"],
       "default": "default"
+    },
+    "firstComponents": {
+      "type": "array",
+      "title": "First",
+      "description": "Allowed components for the first half of the split layout",
+      "items": {
+        "anyOf": [
+          {
+            "$ref": "http://schema.mydesignsystem.com/cta.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/divider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/faq.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/features.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/gallery.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/hero.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/html.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-story.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/logos.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/mosaic.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/slider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/stats.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/teaser-card.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/testimonials.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/video-curtain.schema.json"
+          }
+        ]
+      }
+    },
+    "secondComponents": {
+      "type": "array",
+      "title": "Second",
+      "description": "Allowed components for the second half of the split layout",
+      "items": {
+        "anyOf": [
+          {
+            "$ref": "http://schema.mydesignsystem.com/cta.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/divider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/faq.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/features.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/gallery.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/hero.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/html.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-story.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/logos.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/mosaic.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/slider.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/stats.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/teaser-card.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/testimonials.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/video-curtain.schema.json"
+          }
+        ]
+      }
     }
   },
   "additionalProperties": false

package/dist/components/split-weighted/index.d.ts

@@ -0,0 +1,101 @@
+/// <reference types="react" />
+import { FC } from "react";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+import { CtaProps } from "../../CtaProps-babe4ee6.js";
+import { DividerProps } from "../../DividerProps-2ef31901.js";
+import { FaqProps } from "../../FaqProps-ad618cd5.js";
+import { FeaturesProps } from "../../FeaturesProps-a9041d97.js";
+import { GalleryProps } from "../../GalleryProps-76e7de44.js";
+import { HeroProps } from "../../HeroProps-40f6c7f5.js";
+import { HtmlProps } from "../../HtmlProps-9d091769.js";
+import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
+import { ImageTextProps } from "../../ImageTextProps-9286cca4.js";
+import { LogosProps } from "../../LogosProps-f9474fe2.js";
+import { MosaicProps } from "../../MosaicProps-d52c7151.js";
+import { SliderProps } from "../../SliderProps-babe4ee6.js";
+import { StatsProps } from "../../StatsProps-bf5ef578.js";
+import { TeaserCardProps } from "../../TeaserCardProps-994cb119.js";
+import { TestimonialsProps } from "../../TestimonialsProps-e344f597.js";
+import { TextProps } from "../../TextProps-a23170d2.js";
+import { VideoCurtainProps } from "../../VideoCurtainProps-a2c0cc7f.js";
+/**
+ * Sets the vertical space between the content of the split layout
+ */
+type VerticalGutter = "large" | "default" | "small" | "none";
+/**
+ * Sets the horizontal space between the content of the split layout
+ */
+type HorizontalGutter = "large" | "default" | "small" | "none";
+/**
+ * Makes the side part sticky on scroll
+ */
+type Sticky = boolean;
+/**
+ * Sets the space between the content of the split layout
+ */
+type ContentGutter = "large" | "default" | "small" | "none";
+/**
+ * Sets the minimum width of the main section
+ */
+type MinimumWidth = "narrow" | "wide";
+/**
+ * Size of gutter to use
+ */
+type Gutter = "large" | "default" | "small" | "none";
+/**
+ * Sets the minimum width of the main section
+ */
+type MinimumWidth1 = "narrow" | "wide";
+/**
+ * Determines the order of sections on mobile devices
+ */
+type MobileOrder = "mainFirst" | "contextFirst";
+/**
+ * Determines the order of sections on desktop devices
+ */
+type DesktopOrder = "mainFirst" | "contextFirst";
+/**
+ * Allowed components for the main half of the split layout
+ */
+type Main = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
+/**
+ * Allowed components for the context half of the split layout
+ */
+type Context = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
+interface SplitWeightedProps {
+    verticalGutter?: VerticalGutter;
+    horizontalGutter?: HorizontalGutter;
+    sticky?: Sticky;
+    mainLayout?: MainLayout;
+    contextLayout?: ContextLayout;
+    order?: Order;
+    mainComponents?: Main;
+    contextComponents?: Context;
+}
+interface MainLayout {
+    gutter?: ContentGutter;
+    minWidth?: MinimumWidth;
+}
+interface ContextLayout {
+    gutter?: Gutter;
+    minWidth?: MinimumWidth1;
+}
+/**
+ * Sets the order of the main and context sections in the split layout
+ */
+interface Order {
+    mobile?: MobileOrder;
+    desktop?: DesktopOrder;
+}
+interface ComponentProps {
+    main?: React.ReactNode;
+    context?: React.ReactNode;
+}
+type SplitWeightedComponentProps = SplitWeightedProps & ComponentProps;
+declare const SplitWeighted: FC<SplitWeightedComponentProps>;
+export { ComponentProps, SplitWeightedComponentProps, SplitWeighted };

package/dist/components/split-weighted/index.js

@@ -0,0 +1,13 @@
+import "./split-weighted.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+
+const SplitWeighted = ({ order, mainLayout, contextLayout, horizontalGutter = "default", verticalGutter = "default", main, context, sticky = false, }) => (jsxs("div", { className: classnames("l-split-weighted", order?.desktop === "contextFirst" &&
+        "l-split-weighted--desktop-context-first", order?.mobile === "contextFirst" &&
+        "l-split-weighted--mobile-context-first", horizontalGutter && `l-split-weighted--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-weighted--v-gutter-${verticalGutter}`, sticky && `l-split-weighted--sticky`), children: [jsx("div", { className: classnames("l-split-weighted__main l-split-weighted__content", mainLayout?.gutter &&
+                `l-split-weighted__main--gutter-${mainLayout.gutter}`, mainLayout?.minWidth &&
+                `l-split-weighted__main--width-${mainLayout.minWidth}`), children: sticky ? (jsx("div", { className: "l-split-weighted__sticky-container", children: main })) : (main) }), jsx("div", { className: classnames("l-split-weighted__context l-split-weighted__content", contextLayout?.gutter &&
+                `l-split-weighted__context--gutter-${contextLayout.gutter || "large"}`, contextLayout?.minWidth &&
+                `l-split-weighted__context--width-${contextLayout.minWidth}`), children: sticky ? (jsx("div", { className: "l-split-weighted__sticky-container", children: context })) : (context) })] }));
+
+export { SplitWeighted };

package/dist/components/split-weighted/split-weighted.css

@@ -0,0 +1,101 @@
+.l-split-weighted {
+  --dsa-split-weighted--sticky-margin: var(--ks-spacing-stack-l);
+  --dsa-split-weighted--v-gutter_default: var(--ks-spacing-stack-m);
+  --dsa-split-weighted--v-gutter_small: var(--ks-spacing-stack-l);
+  --dsa-split-weighted--v-gutter_large: var(--dsa-content--vertical-spacing);
+  --dsa-split-weighted--h-gutter_default: var(--ks-spacing-inline-l);
+  --dsa-split-weighted--h-gutter_small: var(--ks-spacing-inline-m);
+  --dsa-split-weighted--h-gutter_large: var(--ks-spacing-xxl);
+  --dsa-split-weighted__main--flex-basis_narrow: var(--dsa-content--width_narrow);
+  --dsa-split-weighted__main--flex-basis_default: var(--dsa-content--width_default);
+  --dsa-split-weighted__main--gutter_default: var(--ks-spacing-stack-l);
+  --dsa-split-weighted__main--gutter_small: var(--ks-spacing-stack-s);
+  --dsa-split-weighted__main--gutter_large: var(--dsa-content--vertical-spacing);
+  --dsa-split-weighted__context--flex-basis_narrow: var(--dsa-tile--width_small);
+  --dsa-split-weighted__context--flex-basis_default: var(--dsa-tile--width_medium);
+  --dsa-split-weighted__context--gutter_default: var(--ks-spacing-stack-s);
+  --dsa-split-weighted__context--gutter_small: var(--ks-spacing-stack-xs);
+  --dsa-split-weighted__context--gutter_large: var(--ks-spacing-stack-m);
+}
+
+.l-split-weighted {
+  --dsa-split-weighted--v-gutter: var(--dsa-split-weighted--v-gutter_default, var(--ks-spacing-stack-m));
+  --dsa-split-weighted--h-gutter: var(--dsa-split-weighted--h-gutter_default, var(--ks-spacing-inline-l));
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsa-split-weighted--v-gutter) var(--dsa-split-weighted--h-gutter);
+}
+.l-split-weighted--sticky {
+  position: relative;
+}
+.l-split-weighted--sticky .l-split-weighted__sticky-container {
+  position: sticky;
+  top: var(--dsa-split-weighted--sticky-margin, var(--ks-spacing-stack-l));
+  height: fit-content;
+}
+.l-split-weighted--desktop-context-first {
+  flex-direction: row-reverse;
+}
+.l-split-weighted--mobile-context-first {
+  flex-wrap: wrap-reverse;
+}
+.l-split-weighted--v-gutter-small {
+  --dsa-split-weighted--v-gutter: var(--dsa-split-weighted--v-gutter_small, var(--ks-spacing-stack-l));
+}
+.l-split-weighted--v-gutter-large {
+  --dsa-split-weighted--v-gutter: var(--dsa-split-weighted--v-gutter_large, var(--dsa-content--vertical-spacing));
+}
+.l-split-weighted--v-gutter-none {
+  --dsa-split-weighted--v-gutter: 0;
+}
+.l-split-weighted--h-gutter-small {
+  --dsa-split-weighted--h-gutter: var(--dsa-split-weighted--h-gutter_small, var(--ks-spacing-inline-m));
+}
+.l-split-weighted--h-gutter-large {
+  --dsa-split-weighted--h-gutter: var(--dsa-split-weighted--h-gutter_large, var(--ks-spacing-xxl));
+}
+.l-split-weighted--h-gutter-none {
+  --dsa-split-weighted--h-gutter: 0;
+}
+.l-split-weighted__content {
+  display: flex;
+  flex-direction: column;
+}
+.l-split-weighted__content .c-button {
+  width: fit-content;
+}
+.l-split-weighted__main {
+  flex-basis: var(--dsa-split-weighted__main--flex-basis_default, calc(var(--dsa-content--width_default) * 1));
+  flex-grow: 1000;
+  flex-shrink: 1;
+  gap: var(--dsa-split-weighted__main--gutter_default, var(--ks-spacing-stack-m));
+}
+.l-split-weighted__main--width-narrow {
+  flex-basis: var(--dsa-split-weighted__main--flex-basis_narrow, calc(var(--dsa-tile--width_medium) * 2));
+}
+.l-split-weighted__main--gutter-small {
+  gap: var(--dsa-split-weighted__main--gutter_small, var(--ks-spacing-stack-s));
+}
+.l-split-weighted__main--gutter-large {
+  gap: var(--dsa-split-weighted__main--gutter_large, var(--ks-spacing-stack-l));
+}
+.l-split-weighted__main--gutter-none {
+  gap: 0;
+}
+.l-split-weighted__context {
+  flex-basis: var(--dsa-split-weighted__context--flex-basis_default, var(--dsa-tile--width_large));
+  flex-grow: 1;
+  gap: var(--dsa-split-weighted__context--gutter_default, var(--ks-spacing-stack-s));
+}
+.l-split-weighted__context--width-narrow {
+  flex-basis: var(--dsa-split-weighted__context--flex-basis_narrow, var(--dsa-tile--width_small));
+}
+.l-split-weighted__context--gutter-small {
+  gap: var(--dsa-split-weighted__context--gutter_small, var(--ks-spacing-stack-xs));
+}
+.l-split-weighted__context--gutter-large {
+  gap: var(--dsa-split-weighted__context--gutter_large, var(--ks-spacing-stack-m));
+}
+.l-split-weighted__context--gutter-none {
+  gap: 0;
+}