@kickstartds/ds-agency-premium 1.0.1

package/dist/components/teaser-card/teaser-card.css

@@ -0,0 +1,98 @@
+.l-container--teaser-card {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: teaser-card;
+}
+
+.c-teaser.c-teaser-card {
+  --g-topic--font: var(--ks-font-display-l);
+  --c-rich-text--font: var(--ks-font-copy-m);
+  --c-teaser--padding: var(--ks-spacing-inset-l);
+  --c-teaser--background: var(--ks-color-fg-alpha-9);
+  --c-teaser--color: var(--ks-color-fg-to-bg-3);
+  --c-teaser--border: 1px solid var(--ks-color-fg-alpha-8);
+  --c-teaser--border-radius: var(--ks-border-radius-card);
+  --c-teaser--shadow-hover: 0 1px 11px var(--ks-color-fg-alpha-6);
+}
+@media (min-width: 48rem) {
+  .c-teaser.c-teaser-card {
+    --g-topic--font: var(--ks-font-display-s);
+    --c-rich-text--font: var(--ks-font-copy-s);
+    --c-teaser--padding: var(--ks-spacing-inset-s);
+  }
+  @container teaser-card (min-width: 300px) {
+    .c-teaser.c-teaser-card {
+      --c-rich-text--font: var(--ks-font-copy-m);
+      --g-topic--font: var(--ks-font-display-m);
+    }
+  }
+  @container teaser-card (min-width: 820px) {
+    .c-teaser.c-teaser-card {
+      --g-topic--font: var(--ks-font-display-l);
+      --c-rich-text--font: var(--ks-font-copy-l);
+      --c-teaser--padding: var(--ks-spacing-inset-l);
+    }
+  }
+}
+
+.l-container--teaser-card {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: teaser-card;
+}
+
+.l-container--teaser-card {
+  display: flex;
+}
+
+.c-teaser.c-teaser-card {
+  position: relative;
+  overflow: visible;
+}
+.c-teaser.c-teaser-card > :first-child:not(.c-teaser__body) {
+  overflow: hidden;
+  border-radius: var(--c-teaser--border-radius) var(--c-teaser--border-radius) 0 0;
+}
+.c-teaser.c-teaser-card img {
+  object-fit: cover;
+}
+.c-teaser.c-teaser-card--wide img {
+  aspect-ratio: 4/3;
+}
+.c-teaser.c-teaser-card--landscape img {
+  aspect-ratio: 16/9;
+}
+.c-teaser.c-teaser-card--square img {
+  aspect-ratio: 1/1;
+}
+@container teaser-card (min-width: 640px) {
+  .c-teaser.c-teaser-card--unset img {
+    height: 100%;
+  }
+  .c-teaser.c-teaser-card--row {
+    flex-direction: row;
+  }
+  .c-teaser.c-teaser-card--row .c-teaser__body {
+    justify-content: center;
+    flex-basis: 50%;
+  }
+  .c-teaser.c-teaser-card--row .c-teaser__body .c-teaser__text {
+    flex: 0;
+  }
+  .c-teaser.c-teaser-card--row > :first-child:not(.c-teaser__body) {
+    flex: 50%;
+    border-radius: var(--c-teaser--border-radius) 0 0 var(--c-teaser--border-radius);
+  }
+}
+.c-teaser.c-teaser-card--label .c-teaser__label {
+  border-radius: var(--ks-border-radius-pill);
+  pointer-events: initial;
+  padding: 0.5em 1em;
+  transform: translate(0.5em, -50%);
+  font: var(--ks-font-interface-m);
+  text-align: center;
+  font-weight: var(--ks-font-weight-semi-bold);
+  color: var(--ks-color-fg-base);
+  position: absolute;
+  background: var(--ks-color-primary-inverted);
+  top: 0;
+  right: 0;
+}

package/dist/components/teaser-card/teaser-card.schema.dereffed.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json",
+  "title": "Teaser Card",
+  "description": "Component used to tease content",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "type": "string",
+      "title": "Headline",
+      "description": "Headline for the teaser card",
+      "format": "markdown"
+    },
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "Body text for the teaser card",
+      "format": "markdown"
+    },
+    "label": {
+      "type": "string",
+      "title": "Label",
+      "description": "Label for the Teaser Card"
+    },
+    "layout": {
+      "type": "string",
+      "enum": [
+        "stack",
+        "row"
+      ],
+      "description": "Layout for the Teaser Card",
+      "default": "stack"
+    },
+    "target": {
+      "type": "string",
+      "title": "Target",
+      "description": "Target that should be linked",
+      "format": "uri"
+    },
+    "displayButton": {
+      "type": "boolean",
+      "title": "Display Button",
+      "description": "Toggle wether you want the card to have a visible button or not",
+      "default": true
+    },
+    "image": {
+      "type": "string",
+      "title": "Image",
+      "description": "Image to display as cover",
+      "format": "uri"
+    },
+    "imageRatio": {
+      "type": "string",
+      "enum": [
+        "wide",
+        "landscape",
+        "square",
+        "unset"
+      ],
+      "description": "Aspect ratio of the image",
+      "default": "wide"
+    },
+    "type": {
+      "const": "teaser-card"
+    }
+  },
+  "additionalProperties": false,
+  "required": []
+}

package/dist/components/teaser-card/teaser-card.schema.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/teaser-card.schema.json",
+  "title": "Teaser Card",
+  "description": "Component used to tease content",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "type": "string",
+      "title": "Headline",
+      "description": "Headline for the teaser card",
+      "format": "markdown"
+    },
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "Body text for the teaser card",
+      "format": "markdown"
+    },
+    "label": {
+      "type": "string",
+      "title": "Label",
+      "description": "Label for the Teaser Card"
+    },
+    "layout": {
+      "type": "string",
+      "enum": ["stack", "row"],
+      "description": "Layout for the Teaser Card",
+      "default": "stack"
+    },
+    "target": {
+      "type": "string",
+      "title": "Target",
+      "description": "Target that should be linked",
+      "format": "uri"
+    },
+    "displayButton": {
+      "type": "boolean",
+      "title": "Display Button",
+      "description": "Toggle wether you want the card to have a visible button or not",
+      "default": true
+    },
+    "image": {
+      "type": "string",
+      "title": "Image",
+      "description": "Image to display as cover",
+      "format": "uri"
+    },
+    "imageRatio": {
+      "type": "string",
+      "enum": ["wide", "landscape", "square", "unset"],
+      "description": "Aspect ratio of the image",
+      "default": "wide"
+    }
+  },
+  "additionalProperties": false,
+  "required": []
+}

package/dist/components/teaser-component/component-teaser.css

@@ -0,0 +1,33 @@
+:root .c-teaser.c-component-teaser {
+  --g-topic--font: var(--ks-font-copy-l);
+  --g-topic--font-weight: var(--ks-font-weight-semi-bold);
+  --c-teaser_text--spacing: 0.25em;
+  --c-rich-text--font: var(--ks-font-copy-s);
+  --c-teaser--background: var(--ks-color-fg-alpha-9);
+  --c-teaser--color: var(--ks-color-fg-to-bg-3);
+  --c-teaser--border: 1px solid var(--ks-color-fg-alpha-8);
+  --c-teaser--border-radius: var(--ks-border-radius-card);
+  --c-teaser--shadow-hover: 0 1px 11px var(--ks-color-fg-alpha-6);
+}
+
+.c-teaser.c-component-teaser {
+  position: relative;
+  overflow: visible;
+}
+.c-teaser.c-component-teaser img {
+  border-radius: var(--c-teaser--border-radius) var(--c-teaser--border-radius) 0 0;
+}
+.c-teaser.c-component-teaser--label .c-teaser__label {
+  border-radius: var(--ks-border-radius-pill);
+  pointer-events: initial;
+  padding: 0.5em 1em;
+  transform: translate(0.5em, -50%);
+  font: var(--ks-font-interface-m);
+  text-align: center;
+  font-weight: var(--ks-font-weight-semi-bold);
+  color: var(--ks-color-fg-base);
+  position: absolute;
+  background: var(--ks-color-primary-inverted);
+  top: 0;
+  right: 0;
+}

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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { HTMLAttributes, FC, PropsWithChildren } 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.
+ */
+/**
+ * Headline for the teaser card
+ */
+type Headline = string;
+/**
+ * Body text for the teaser card
+ */
+type Text = string;
+/**
+ * Label for the Teaser Card
+ */
+type Label = string;
+/**
+ * Target that should be linked
+ */
+type Target = string;
+/**
+ * Image to display as cover
+ */
+type Image = string;
+/**
+ * Component used to tease content
+ */
+interface ComponentTeaserProps {
+    title?: Headline;
+    text?: Text;
+    label?: Label;
+    target?: Target;
+    image?: Image;
+}
+declare const ComponentTeaser: import("react").ForwardRefExoticComponent<ComponentTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TeaserBoxProvider: FC<PropsWithChildren>;
+export { ComponentTeaser, TeaserBoxProvider };

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

@@ -0,0 +1,18 @@
+import "./component-teaser.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';
+
+const ComponentTeaser = forwardRef(({ title, text, target, image, label, ...props }, ref) => {
+    return (jsx(TeaserBoxContextDefault, { ...props, className: classnames(`c-component-teaser`, label && `c-component-teaser--label`), ratio: "16:6", topic: title, text: text, 
+        // @ts-expect-error
+        renderTopic: () => (jsxs(Fragment, { children: [label ? jsx("span", { className: "c-teaser__label", children: label }) : "", title] })), link: {
+            hidden: true,
+            label: "Read more",
+            target: target,
+        }, image: image, ref: ref }));
+});
+const TeaserBoxProvider = (props) => (jsx(TeaserBoxContext.Provider, { ...props, value: ComponentTeaser }));
+
+export { ComponentTeaser, TeaserBoxProvider };

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes, FC, PropsWithChildren } from "react";
+import { TestimonialsProps } from "../../TestimonialsProps-d27ae4b4.js";
+import { SliderProps } from "../../SliderProps-69b2f1d7.js";
+interface ConditionalSliderProps extends SliderProps {
+    layout: "slider" | "list" | "alternating";
+}
+declare const ConditionalSlider: FC<PropsWithChildren<ConditionalSliderProps>>;
+declare const Testimonials: FC<TestimonialsProps & HTMLAttributes<HTMLElement>>;
+export { ConditionalSlider, Testimonials };

package/dist/components/testimonials/index.js

@@ -0,0 +1,22 @@
+import "./testimonials.css";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Quote } from '@kickstartds/content/lib/quote';
+import { Slider } from '../slider/index.js';
+import '@kickstartds/content/lib/slider';
+
+const ConditionalSlider = ({ layout, children, arrows, nav, ...props }) => {
+    if (layout === "slider") {
+        return (jsx(Slider, { className: "c-testimonials c-testimonials--slider", arrows: arrows, nav: nav, ...props, children: children }));
+    }
+    else {
+        return (jsx("div", { className: "c-testimonials c-testimonials--list", ...props, children: children }));
+    }
+};
+const Testimonials = ({ testimonials, layout = "slider", ...props }) => {
+    return (jsx(ConditionalSlider, { layout: layout, arrows: true, nav: true, ...props, children: testimonials.map((testimonial, index) => (jsx(Quote, { className: layout === "alternating" && index % 2 === 1
+                ? "c-quote--reverse"
+                : "", text: testimonial.quote, source: testimonial.name, byline: testimonial.title, image: testimonial.image.src, renderSource: () => (jsxs(Fragment, { children: [testimonial?.rating &&
+                        (testimonial?.rating ? (jsx("div", { children: [...Array(testimonial?.rating)].map((_, index) => (jsx("span", { children: "\u2605" }, index))) })) : ("")), jsx("div", { className: "c-quote__source", children: testimonial.name })] })) }, index))) }));
+};
+
+export { ConditionalSlider, Testimonials };

package/dist/components/testimonials/testimonials.css

@@ -0,0 +1,63 @@
+.c-testimonials .c-quote {
+  --c-quote_text--font: var(--ks-font-copy-l);
+  --c-quote_source--color: var(--ks-color-fg);
+  --c-quote_source--font: var(--ks-font-copy-m);
+  --c-quote_content--padding-left: var(--ks-spacing-xl);
+  --c-quote_icon--font-family: var(--ks-font-family-copy);
+  --c-quote_icon--font-size: 3em;
+  --c-quote_icon--color: var(--ks-text-color-primary);
+  --c-quote_byline--font: var(--ks-font-copy-m);
+  --c-quote_byline--font-weight: var(--ks-font-weight-regular);
+  --c-quote_byline--color: var(--ks-text-color-default);
+  --c-quote_content--padding-left: var(--ks-spacing-xl);
+}
+@container quote (min-width: 640px) {
+  .c-testimonials .c-quote {
+    --c-quote_image--max-width: 40%;
+  }
+}
+@container quote (min-width: 960px) {
+  .c-testimonials .c-quote {
+    --c-quote_content--padding-left: var(--ks-spacing-l);
+  }
+}
+.c-testimonials .c-slider-main {
+  --c-slider_bullet--outline-color-active: var(--ks-text-color-primary);
+  --c-slider_bullet--size: 1rem;
+}
+
+.c-testimonials--list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-xl);
+}
+.c-testimonials .c-quote__source {
+  color: var(--c-quote_source--color);
+}
+.c-testimonials .c-quote__byline {
+  color: var(--c-quote_byline--color);
+}
+.c-testimonials .c-quote__text {
+  margin-bottom: var(--ks-spacing-stack-s);
+}
+.c-testimonials .c-quote--reverse {
+  flex-direction: row-reverse;
+}
+.c-testimonials .c-quote--reverse .c-quote__content {
+  padding-right: var(--c-quote_content--padding-left);
+  padding-left: unset;
+}
+.c-testimonials .c-quote--reverse .c-quote__content:before {
+  right: var(--c-quote_icon--left, calc(var(--c-quote_content--padding-left) / -2));
+  top: 0;
+  left: unset;
+}
+.c-testimonials .c-quote .c-quote__content {
+  font: var(--c-quote_text--font);
+}
+.c-testimonials .c-quote .c-quote__content::before {
+  line-height: 0.7;
+}
+.c-testimonials .c-slider .c-slider-nav {
+  margin-top: var(--ks-spacing-stack-s);
+}

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

@@ -0,0 +1,93 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/testimonials.schema.json",
+  "title": "Testimonials",
+  "description": "Display testimonials with an optional image and rating",
+  "type": "object",
+  "properties": {
+    "layout": {
+      "title": "Quote",
+      "description": "The testimonial quote",
+      "type": "string",
+      "enum": [
+        "slider",
+        "list",
+        "alternating"
+      ],
+      "default": "slider"
+    },
+    "testimonials": {
+      "type": "array",
+      "title": "Testimonials",
+      "description": "Add testimonials featuring an image, a quote, a source and a rating",
+      "items": {
+        "type": "object",
+        "properties": {
+          "quote": {
+            "title": "Quote",
+            "description": "The testimonial quote",
+            "type": "string",
+            "examples": [
+              "This product is amazing!"
+            ]
+          },
+          "name": {
+            "title": "Name",
+            "description": "The name of the quote author",
+            "type": "string",
+            "examples": [
+              "John Doe"
+            ]
+          },
+          "title": {
+            "title": "Title",
+            "description": "The title of the quote author",
+            "type": "string",
+            "examples": [
+              "CEO"
+            ]
+          },
+          "image": {
+            "type": "object",
+            "properties": {
+              "src": {
+                "title": "Source",
+                "description": "The image to display with the testimonial",
+                "type": "string",
+                "examples": [
+                  "https://example.com/image.jpg"
+                ]
+              },
+              "alt": {
+                "title": "Alt Text",
+                "description": "The alt text of the image file",
+                "type": "string"
+              }
+            },
+            "additionalProperties": false
+          },
+          "rating": {
+            "title": "Rating",
+            "description": "The rating of the testimonial, from 1 to 5",
+            "type": "integer",
+            "minimum": 1,
+            "maximum": 5
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "quote",
+          "name",
+          "image"
+        ]
+      }
+    },
+    "type": {
+      "const": "testimonials"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "quote"
+  ]
+}

package/dist/components/testimonials/testimonials.schema.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/testimonials.schema.json",
+  "title": "Testimonials",
+  "description": "Display testimonials with an optional image and rating",
+  "type": "object",
+  "properties": {
+    "layout": {
+      "title": "Quote",
+      "description": "The testimonial quote",
+      "type": "string",
+      "enum": ["slider", "list", "alternating"],
+      "default": "slider"
+    },
+    "testimonials": {
+      "type": "array",
+      "title": "Testimonials",
+      "description": "Add testimonials featuring an image, a quote, a source and a rating",
+      "items": {
+        "type": "object",
+        "properties": {
+          "quote": {
+            "title": "Quote",
+            "description": "The testimonial quote",
+            "type": "string",
+            "examples": ["This product is amazing!"]
+          },
+          "name": {
+            "title": "Name",
+            "description": "The name of the quote author",
+            "type": "string",
+            "examples": ["John Doe"]
+          },
+          "title": {
+            "title": "Title",
+            "description": "The title of the quote author",
+            "type": "string",
+            "examples": ["CEO"]
+          },
+          "image": {
+            "type": "object",
+            "properties": {
+              "src": {
+                "title": "Source",
+                "description": "The image to display with the testimonial",
+                "type": "string",
+                "examples": ["https://example.com/image.jpg"]
+              },
+              "alt": {
+                "title": "Alt Text",
+                "description": "The alt text of the image file",
+                "type": "string"
+              }
+            }
+          },
+          "rating": {
+            "title": "Rating",
+            "description": "The rating of the testimonial, from 1 to 5",
+            "type": "integer",
+            "minimum": 1,
+            "maximum": 5
+          }
+        },
+        "additionalProperties": false,
+        "required": ["quote", "name", "image"]
+      }
+    }
+  },
+  "additionalProperties": false,
+  "required": ["quote"]
+}

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

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

package/dist/components/text/index.js

@@ -0,0 +1,13 @@
+import "./text.css";
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+
+const Text = ({ text, layout = "singleColumn", align = "left", highlightText = false, ...props }) => {
+    const layoutClass = `${layout === "multiColumn" ? "c-rich-text--columns" : ""}`;
+    const highlightClass = `${highlightText ? "c-rich-text--highlight" : ""}`;
+    const alignClass = `${align === "center" ? "c-rich-text--center" : ""}`;
+    return (jsx(RichText, { className: classnames("c-text", `${layoutClass}`, `${alignClass}`, `${highlightClass}`), ...props, text: text }));
+};
+
+export { Text };

package/dist/components/text/text.css

@@ -0,0 +1,15 @@
+.c-rich-text {
+  --ks-text-col-width: 16em;
+}
+.c-rich-text--highlight.c-rich-text {
+  color: var(--ks-color-fg);
+  font: var(--ks-font-copy-l);
+}
+.c-rich-text--center.c-rich-text {
+  text-align: center;
+}
+.c-rich-text--columns.c-rich-text {
+  column-gap: var(--ks-spacing-inline-m);
+  column-count: auto;
+  column-width: var(--ks-text-col-width);
+}

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

@@ -0,0 +1,50 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/text.schema.json",
+  "title": "Text",
+  "description": "Component used for displaying text in chapters",
+  "type": "object",
+  "properties": {
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "Text",
+      "examples": [
+        "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+      ]
+    },
+    "layout": {
+      "type": "string",
+      "title": "Layout",
+      "description": "Variant of layout to be used",
+      "enum": [
+        "singleColumn",
+        "multiColumn"
+      ],
+      "default": "singleColumn"
+    },
+    "align": {
+      "type": "string",
+      "title": "Alignment",
+      "description": "Alignment of text",
+      "enum": [
+        "left",
+        "center"
+      ],
+      "default": "left"
+    },
+    "highlightText": {
+      "type": "boolean",
+      "title": "Highlight Text",
+      "description": "Visually highlight the text",
+      "default": false
+    },
+    "type": {
+      "const": "text"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "text"
+  ]
+}