@kickstartds/ds-agency-premium 1.0.1

package/dist/components/section/section.schema.json

@@ -0,0 +1,222 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/section.schema.json",
+  "title": "Section",
+  "description": "Component used to layout components into pages",
+  "type": "object",
+  "properties": {
+    "width": {
+      "type": "string",
+      "title": "Width",
+      "description": "Width of section to use",
+      "enum": ["full", "max", "wide", "default", "narrow"],
+      "default": "default"
+    },
+    "style": {
+      "type": "string",
+      "title": "Style",
+      "description": "Style of background",
+      "enum": [
+        "stagelights",
+        "horizontalGradient",
+        "verticalGradient",
+        "accentTransition",
+        "boldTransition",
+        "symmetricGlow",
+        "anchorGlow"
+      ],
+      "default": "default"
+    },
+    "backgroundColor": {
+      "type": "string",
+      "title": "Style",
+      "description": "Color of background",
+      "enum": ["default", "accent", "bold"],
+      "default": "default"
+    },
+    "spotlight": {
+      "type": "boolean",
+      "title": "Spotlight",
+      "description": "Show spotlight behind cursor",
+      "default": false
+    },
+    "spaceBefore": {
+      "type": "string",
+      "title": "Space Before",
+      "description": "Amount of spacing before the section",
+      "enum": ["default", "small", "none"],
+      "default": "default"
+    },
+    "spaceAfter": {
+      "type": "string",
+      "title": "Space After",
+      "description": "Amount of spacing after the section",
+      "enum": ["default", "small", "none"],
+      "default": "default"
+    },
+    "inverted": {
+      "type": "boolean",
+      "title": "Inverted",
+      "description": "Whether to invert the section",
+      "default": false
+    },
+    "headerSpacing": {
+      "type": "boolean",
+      "title": "Header Spacing",
+      "description": "Reserve additional spacing for a floating header",
+      "default": false
+    },
+    "headline": {
+      "type": "object",
+      "properties": {
+        "text": {
+          "type": "string",
+          "title": "Headline",
+          "description": "Headline Text for the section",
+          "format": "markdown",
+          "examples": ["Section headline"]
+        },
+        "large": {
+          "type": "boolean",
+          "title": "Large Headline",
+          "description": "Make the headline larger",
+          "default": false
+        },
+        "width": {
+          "type": "string",
+          "title": "Headline Width",
+          "description": "Width of headline to use",
+          "enum": ["unset", "narrow", "default", "wide"],
+          "default": "unset"
+        },
+        "textAlign": {
+          "title": "Headline Text Alignment",
+          "description": "Choose the text alignment for the headline",
+          "type": "string",
+          "enum": ["left", "center", "right"]
+        },
+        "align": {
+          "title": "Headline Alignment",
+          "description": "Choose an alignment for positioning the headline",
+          "type": "string",
+          "enum": ["left", "center", "right"]
+        },
+        "sub": {
+          "type": "string",
+          "title": "Subheadline",
+          "description": "Subheadline for the section",
+          "format": "markdown"
+        },
+        "switchOrder": {
+          "type": "boolean",
+          "title": "Switch Headline Order",
+          "description": "Switch the order of headline and subheadline"
+        }
+      },
+      "additionalProperties": false
+    },
+    "content": {
+      "type": "object",
+      "properties": {
+        "width": {
+          "type": "string",
+          "title": "Content Width",
+          "description": "Width of content to use",
+          "enum": ["unset", "narrow", "default", "wide"],
+          "default": "unset"
+        },
+        "align": {
+          "title": "Content Alignment",
+          "description": "Choose an alignment for the content",
+          "type": "string",
+          "enum": ["left", "center", "right"],
+          "default": "center"
+        },
+        "gutter": {
+          "type": "string",
+          "title": "Gutter",
+          "description": "Size of gutter to use",
+          "enum": ["large", "default", "small", "none"],
+          "default": "default"
+        },
+        "mode": {
+          "type": "string",
+          "title": "Mode",
+          "description": "Layout mode used for section contents",
+          "enum": ["default", "tile", "list", "slider"],
+          "default": "default"
+        },
+        "tileWidth": {
+          "type": "string",
+          "title": "Tile Width",
+          "description": "Set min-width for the tiles in the grid",
+          "enum": ["control", "card", "narrow", "medium", "wide"],
+          "default": "cards"
+        }
+      },
+      "additionalProperties": false
+    },
+    "components": {
+      "type": "array",
+      "title": "Content",
+      "description": "Allowed components for content",
+      "items": {
+        "anyOf": [
+          {
+            "$ref": "http://schema.mydesignsystem.com/hero.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/cta.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/mosaic.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/headline.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-story.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/split.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"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/image-text.schema.json"
+          },
+          {
+            "$ref": "http://schema.mydesignsystem.com/logos.schema.json"
+          }
+        ]
+      }
+    },
+    "buttons": {
+      "$ref": "http://schema.mydesignsystem.com/button-group.schema.json#/properties/buttons"
+    }
+  },
+  "additionalProperties": false,
+  "required": []
+}

package/dist/components/slider/index.d.ts

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from "react";
+import { SliderProps } from "../../SliderProps-69b2f1d7.js";
+declare const Slider: FC<PropsWithChildren<SliderProps>>;
+export { Slider };

package/dist/components/slider/index.js

@@ -0,0 +1,7 @@
+import "./slider.css";
+import { jsx } from 'react/jsx-runtime';
+import { Slider as Slider$1 } from '@kickstartds/content/lib/slider';
+
+const Slider = ({ gap, type, autoplay, arrows, perView, children, ...props }) => (jsx(Slider$1, { gap: gap, type: type, arrows: arrows, autoplay: autoplay, perView: perView, ...props, children: children }));
+
+export { Slider };

package/dist/components/slider/slider.css

@@ -0,0 +1,24 @@
+.c-slider {
+  --c-slider_bullet--outline-color: var(--ks-border-color-interface-interactive);
+  --c-slider_bullet--outline-color-hover: var(--ks-border-color-interface-interactive-hover);
+  --c-slider_bullet--outline-color-active: var(--ks-border-color-interface-interactive-active);
+  --c-slider_bullet--background-color-hover: transparent;
+  --c-slider_bullet--background-color-active: transparent;
+  --c-slider_arrow--color: var(--ks-text-color-interface-interactive);
+}
+
+.c-slider__nav {
+  margin-top: var(--ks-spacing-stack-m);
+}
+.c-slider .c-slider__nav-item:hover .c-slider__bullet {
+  border-color: var(--c-slider_bullet--outline-color-hover);
+  background-color: var(--c-slider_bullet--background-color-hover);
+}
+.c-slider .c-slider__nav-item.c-slider__nav-item--active .c-slider__bullet, .c-slider .c-slider__nav-item.c-slider__nav-item--active:hover .c-slider__bullet {
+  border-color: var(--c-slider_bullet--outline-color-active);
+  background-color: var(--c-slider_bullet--background-color-active);
+}
+.c-slider .c-slider__nav-item .c-slider__bullet {
+  display: block;
+  transition: border-color var(--ks-transition-hover);
+}

package/dist/components/slider/slider.schema.dereffed.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/slider.schema.json",
+  "title": "Slider",
+  "type": "object",
+  "properties": {
+    "autoplay": {
+      "title": "Auto play",
+      "description": "Automatically move to next slide after 4 seconds without user interaction",
+      "type": "boolean",
+      "default": false
+    },
+    "nav": {
+      "title": "Show Navigation",
+      "description": "Add bullet navigation",
+      "type": "boolean",
+      "examples": [
+        true
+      ]
+    },
+    "perView": {
+      "title": "Slides per view",
+      "description": "The number of visible slides",
+      "type": "number",
+      "default": 1
+    },
+    "gap": {
+      "title": "Gap",
+      "description": "Size of the gap added between slides in pixels",
+      "type": "number",
+      "default": 0
+    },
+    "arrows": {
+      "title": "Show Arrows",
+      "description": "Add arrows on the left and right to navigate to next or previous slide",
+      "type": "boolean",
+      "examples": [
+        true
+      ]
+    },
+    "type": {
+      "const": "slider"
+    },
+    "className": {
+      "title": "Class",
+      "description": "Additional css classes attached to the wrapping element",
+      "type": "string"
+    },
+    "typeProp": {
+      "const": "slider"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/slider/slider.schema.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/slider.schema.json",
+  "title": "Slider",
+  "type": "object",
+  "properties": {
+    "autoplay": {
+      "$ref": "http://schema.kickstartds.com/content/slider.schema.json#/properties/autoplay"
+    },
+    "nav": {
+      "$ref": "http://schema.kickstartds.com/content/slider.schema.json#/properties/nav"
+    },
+    "perView": {
+      "$ref": "http://schema.kickstartds.com/content/slider.schema.json#/properties/perView"
+    },
+    "gap": {
+      "$ref": "http://schema.kickstartds.com/content/slider.schema.json#/properties/gap"
+    },
+    "arrows": {
+      "$ref": "http://schema.kickstartds.com/content/slider.schema.json#/properties/arrows"
+    },
+    "type": {
+      "$ref": "http://schema.kickstartds.com/content/slider.schema.json#/properties/type"
+    },
+    "className": {
+      "$ref": "http://schema.kickstartds.com/content/slider.schema.json#/properties/className"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from "react";
+import { SplitProps } from "../../SplitProps-89ef39c4.js";
+declare const Split: FC<PropsWithChildren<SplitProps>>;
+export { Split };

package/dist/components/split/index.js

@@ -0,0 +1,7 @@
+import "./split.css";
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+
+const Split = ({ layout, children, }) => (jsx("div", { className: classnames(`l-split l-split--${layout}`), children: children }));
+
+export { Split };

package/dist/components/split/split.css

@@ -0,0 +1,24 @@
+.l-split--sidebarRight {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-xl);
+}
+@media (min-width: 48em) {
+  .l-split--sidebarRight {
+    justify-content: space-between;
+  }
+}
+.l-split--sidebarRight > :first-child {
+  flex-basis: calc(var(--l-section--content-width-default) - var(--l-section--content-padding) * 2);
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+.l-split--sidebarRight > :last-child {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 210px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: var(--ks-spacing-stack-l);
+  height: fit-content;
+}

package/dist/components/split/split.schema.dereffed.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/split.schema.json",
+  "title": "Split",
+  "type": "object",
+  "properties": {
+    "layout": {
+      "type": "string",
+      "enum": [
+        "sidebarRight",
+        "sidebarLeft",
+        "even"
+      ]
+    },
+    "type": {
+      "const": "split"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,13 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/split.schema.json",
+  "title": "Split",
+  "type": "object",
+  "properties": {
+    "layout": {
+      "type": "string",
+      "enum": ["sidebarRight", "sidebarLeft", "even"]
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/stats/index.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes, FC } from "react";
+import { StatsProps } from "../../StatsProps-afa48599.js";
+declare const Stats: FC<StatsProps & HTMLAttributes<HTMLElement>>;
+export { Stats };

package/dist/components/stats/index.js

@@ -0,0 +1,11 @@
+import "./stats.css";
+import { jsx } from 'react/jsx-runtime';
+import { CountUp } from '@kickstartds/content/lib/count-up';
+
+const Stats = ({ stats = [], }) => {
+    return (jsx("div", { className: "c-stats", children: stats.map((stat, index) => (jsx(CountUp, { className: "c-stats__item", to: stat.number, icon: {
+                icon: stat?.icon,
+            }, text: stat?.description, topic: stat.title }, index))) }));
+};
+
+export { Stats };

package/dist/components/stats/stats.css

@@ -0,0 +1,49 @@
+.c-stats {
+  --c-stats-icon--size: 5em;
+}
+
+.c-stats {
+  display: flex;
+  justify-content: center;
+  gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-m);
+  flex-wrap: wrap;
+  align-items: center;
+}
+.c-stats .l-container--rich-text {
+  width: 100%;
+}
+.c-stats__item.c-count-up {
+  flex: 1 1;
+  flex-basis: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ks-spacing-stack-xs);
+  max-width: 400px;
+}
+.c-stats__item.c-count-up > * {
+  margin: 0;
+}
+.c-stats .c-count-up__number {
+  background: linear-gradient(135deg, var(--ks-color-primary-base) 0%, var(--ks-color-secondary-base) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: var(--g-filter-drop-shadow--higlight);
+  font: var(--ks-font-display-xl);
+  font-weight: var(--ks-font-weight-semi-bold);
+}
+.c-stats .c-count-up__icon {
+  color: var(--ks-text-color-primary);
+  width: var(--c-stats-icon--size);
+  height: var(--c-stats-icon--size);
+}
+.c-stats .c-count-up__topic {
+  color: var(--ks-color-fg);
+  font: var(--ks-font-interface-xl);
+  text-align: center;
+}
+.c-stats .c-count-up__text {
+  color: var(--ks-text-color-default);
+  font: var(--ks-font-copy-s);
+  text-align: center;
+}

package/dist/components/stats/stats.schema.dereffed.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/stats.schema.json",
+  "title": "Stats",
+  "description": "Component used to display stats with a number upcounter",
+  "type": "object",
+  "properties": {
+    "stats": {
+      "type": "array",
+      "title": "Stats",
+      "description": "The stats to display with a number upcounter",
+      "items": {
+        "type": "object",
+        "title": "Stat",
+        "properties": {
+          "number": {
+            "title": "Number",
+            "description": "The number of the stat",
+            "type": "integer",
+            "examples": [
+              1,
+              2,
+              3,
+              4
+            ]
+          },
+          "description": {
+            "title": "Description",
+            "description": "Optional description of the stat",
+            "type": "string"
+          },
+          "title": {
+            "title": "Title",
+            "description": "Title of the stat",
+            "type": "string",
+            "examples": [
+              "Stat 1",
+              "Stat 2",
+              "Stat 3",
+              "Stat 4"
+            ]
+          },
+          "icon": {
+            "title": "Icon",
+            "description": "Optional icon of the stat",
+            "type": "string",
+            "examples": [
+              "person",
+              "home",
+              "map"
+            ]
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "number",
+          "title"
+        ]
+      },
+      "minItems": 1,
+      "maxItems": 4
+    },
+    "type": {
+      "const": "stats"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "stats"
+  ]
+}

package/dist/components/stats/stats.schema.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/stats.schema.json",
+  "title": "Stats",
+  "description": "Component used to display stats with a number upcounter",
+  "type": "object",
+  "properties": {
+    "stats": {
+      "type": "array",
+      "title": "Stats",
+      "description": "The stats to display with a number upcounter",
+      "items": {
+        "type": "object",
+        "title": "Stat",
+        "properties": {
+          "number": {
+            "title": "Number",
+            "description": "The number of the stat",
+            "type": "integer",
+            "examples": [1, 2, 3, 4]
+          },
+          "description": {
+            "title": "Description",
+            "description": "Optional description of the stat",
+            "type": "string"
+          },
+          "title": {
+            "title": "Title",
+            "description": "Title of the stat",
+            "type": "string",
+            "examples": ["Stat 1", "Stat 2", "Stat 3", "Stat 4"]
+          },
+          "icon": {
+            "title": "Icon",
+            "description": "Optional icon of the stat",
+            "type": "string",
+            "examples": ["person", "home", "map"]
+          }
+        },
+        "additionalProperties": false,
+        "required": ["number", "title"]
+      },
+      "minItems": 1,
+      "maxItems": 4
+    }
+  },
+  "additionalProperties": false,
+  "required": ["stats"]
+}

package/dist/components/teaser-card/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { HTMLAttributes, FC, PropsWithChildren } from "react";
+import { TeaserCardProps } from "../../TeaserCardProps-b52479e5.js";
+declare const TeaserCard: import("react").ForwardRefExoticComponent<TeaserCardProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TeaserBoxProvider: FC<PropsWithChildren>;
+export { TeaserCard, TeaserBoxProvider };

package/dist/components/teaser-card/index.js

@@ -0,0 +1,25 @@
+import "./teaser-card.css";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import classnames from 'classnames';
+import { TeaserBoxContextDefault, TeaserBoxContext } from '@kickstartds/base/lib/teaser-box';
+import { Container } from '@kickstartds/core/lib/container';
+
+const TeaserCard = forwardRef(({ headline, text, target, image, imageRatio = "wide", label, layout = "stack", displayButton = true, ...props }, ref) => {
+    return (jsx(Container, { name: "teaser-card", children: jsx(TeaserBoxContextDefault, { ...props, className: classnames(`c-teaser-card`, label && `c-teaser-card--label`, `c-teaser-card--${layout}`, `c-teaser-card--${imageRatio}`), topic: headline, text: text, 
+            // @ts-expect-error
+            renderTopic: () => (jsxs(Fragment, { children: [label ? jsx("span", { className: "c-teaser__label", children: label }) : "", headline] })), link: {
+                hidden: displayButton === true
+                    ? false
+                    : displayButton === false
+                        ? true
+                        : true,
+                label: "Read more",
+                variant: "secondary",
+                target: target,
+            }, image: image, ref: ref }) }));
+});
+TeaserCard.displayName = "TeaserCard";
+const TeaserBoxProvider = (props) => (jsx(TeaserBoxContext.Provider, { ...props, value: TeaserCard }));
+
+export { TeaserBoxProvider, TeaserCard };