@kickstartds/ds-agency-premium 1.2.10--canary.171.76273d8.0 → 1.2.10--canary.178.33c3c92.0

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

@@ -3,33 +3,42 @@
   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);
+.c-teaser.dsa-teaser-card {
+  --dsa-teaser-card--background: var(--ks-background-color-card-interactive);
+  --dsa-teaser-card--border-width: var(--ks-border-width-default);
+  --dsa-teaser-card--border-color: var(--ks-border-color-card-interactive);
+  --dsa-teaser-card--border-color_hover: var(--ks-border-color-card-interactive-hover);
+  --dsa-teaser-card--border-radius: var(--ks-border-radius-card);
+  --dsa-teaser-card--shadow_hover: var(--ks-box-shadow-card-hover);
+  --dsa-teaser-card__label--font: var(--ks-font-interface-m);
+  --dsa-teaser-card__label--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-teaser-card__label--color: var(--ks-color-fg-base);
+  --dsa-teaser-card__label--background-color: var(--ks-background-color-primary);
+  --dsa-teaser-card__label--padding: 0.5em 1em;
+  --dsa-teaser-card__label--border-radius: var(--ks-border-radius-pill);
+  --dsa-teaser-card__topic--font: var(--ks-font-display-l);
+  --dsa-teaser-card__topic--font-weight: var(--dsa-topic--font-weight);
+  --dsa-teaser-card__copy--font: var(--dsa-rich-text--font);
+  --dsa-teaser-card__copy--color: var(--ks-text-color-default);
+  --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
 }
 @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);
+  .c-teaser.dsa-teaser-card {
+    --dsa-teaser-card__topic--font: var(--ks-font-display-s);
+    --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
+    --dsa-teaser-card--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);
+    .c-teaser.dsa-teaser-card {
+      --dsa-teaser-card__copy--font: var(--ks-font-copy-m);
+      --dsa-teaser-card__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);
+    .c-teaser.dsa-teaser-card {
+      --dsa-teaser-card__topic--font: var(--ks-font-display-l);
+      --dsa-teaser-card__copy--font: var(--ks-font-copy-l);
+      --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
     }
   }
 }
@@ -43,56 +52,75 @@
   display: flex;
 }
 
-.c-teaser.c-teaser-card {
+.c-teaser.dsa-teaser-card {
+  --c-teaser--padding: var(--dsa-teaser-card--padding, var(--ks-spacing-inset-l));
+  --c-teaser--background: var(--dsa-teaser-card--background, var(--ks-background-color-card-interactive));
+  --c-teaser--color: var(--dsa-teaser-card__copy--color, var(--ks-text-color-default));
+  --c-teaser--border: var(--dsa-teaser-card--border-color, var(--ks-background-color-card-interactive))
+    var(--dsa-teaser-card--border-width) solid;
+  --c-teaser--border-radius: var(--dsa-teaser-card--border-radius, var(--ks-border-radius-card));
+  --c-teaser--shadow-hover: var(--dsa-teaser-card--shadow_hover, var(--ks-box-shadow-card-hover));
   position: relative;
   overflow: visible;
+  transition-property: border-color, background-color, box-shadow;
 }
-.c-teaser.c-teaser-card > :first-child:not(.c-teaser__body) {
+.c-teaser.dsa-teaser-card > :first-child:not(.c-teaser__body) {
   overflow: hidden;
-  border-radius: var(--c-teaser--border-radius) var(--c-teaser--border-radius) 0 0;
+  border-radius: var(--dsa-teaser-card--border-radius) var(--dsa-teaser-card--border-radius) 0 0;
 }
-.c-teaser.c-teaser-card img {
+.c-teaser.dsa-teaser-card:hover {
+  --c-teaser--border: var(--dsa-teaser-card--border-color_hover, var(--ks-background-color-card-interactive))
+    var(--dsa-teaser-card--border-width) solid;
+}
+.c-teaser.dsa-teaser-card img {
   object-fit: cover;
 }
-.c-teaser.c-teaser-card--wide img {
+.c-teaser.dsa-teaser-card--wide img {
   aspect-ratio: 4/3;
 }
-.c-teaser.c-teaser-card--landscape img {
+.c-teaser.dsa-teaser-card--landscape img {
   aspect-ratio: 16/9;
 }
-.c-teaser.c-teaser-card--square img {
+.c-teaser.dsa-teaser-card--square img {
   aspect-ratio: 1/1;
 }
+.c-teaser.dsa-teaser-card .c-rich-text {
+  font: var(--dsa-teaser-card-card--font, var(--dsa-rich-text--font), var(--ks-font-copy-m));
+}
+.c-teaser.dsa-teaser-card .c-teaser__topic {
+  font: var(--dsa-teaser-card__topic--font, var(--dsa-topic-font));
+  font-weight: var(--dsa-teaser-card__topic--font-weight, var(--dsa-topic-font-weight));
+}
 @container teaser-card (min-width: 640px) {
-  .c-teaser.c-teaser-card--unset img {
+  .c-teaser.dsa-teaser-card--unset img {
     height: 100%;
   }
-  .c-teaser.c-teaser-card--row {
+  .c-teaser.dsa-teaser-card--row {
     flex-direction: row;
   }
-  .c-teaser.c-teaser-card--row .c-teaser__body {
+  .c-teaser.dsa-teaser-card--row .c-teaser__body {
     justify-content: center;
     flex-basis: 50%;
   }
-  .c-teaser.c-teaser-card--row .c-teaser__body .c-teaser__text {
+  .c-teaser.dsa-teaser-card--row .c-teaser__body .c-teaser__text {
     flex: 0;
   }
-  .c-teaser.c-teaser-card--row > :first-child:not(.c-teaser__body) {
+  .c-teaser.dsa-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);
+    border-radius: var(--dsa-teaser-card--border-radius) 0 0 var(--dsa-teaser-card--border-radius);
   }
 }
-.c-teaser.c-teaser-card--label .c-teaser__label {
-  border-radius: var(--ks-border-radius-pill);
+.c-teaser.dsa-teaser-card--label .dsa-teaser-card__label {
+  border-radius: var(--dsa-teaser-card__label--border-radius);
   pointer-events: initial;
-  padding: 0.5em 1em;
+  padding: var(--dsa-teaser-card__label--padding);
   transform: translate(0.5em, -50%);
-  font: var(--ks-font-interface-m);
+  font: var(--dsa-teaser-card__label--font);
   text-align: center;
-  font-weight: var(--ks-font-weight-semi-bold);
-  color: var(--ks-color-fg-base);
+  font-weight: var(--dsa-teaser-card__label--font-weight);
+  color: var(--dsa-teaser-card__label--color);
   position: absolute;
-  background: var(--ks-color-primary-inverted);
+  background-color: var(--dsa-teaser-card__label--background-color);
   top: 0;
   right: 0;
 }

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

@@ -47,7 +47,7 @@
         },
         "chevron": {
           "title": "Icon",
-          "description": "Toggle chevron icon",
+          "description": "Toggle arrow icon",
           "type": "boolean",
           "default": false
         },
@@ -67,7 +67,7 @@
       "type": "string",
       "title": "Image",
       "description": "Image to display as cover",
-      "format": "uri"
+      "format": "image"
     },
     "imageRatio": {
       "type": "string",

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

@@ -44,7 +44,7 @@
         },
         "chevron": {
           "title": "Icon",
-          "description": "Toggle chevron icon",
+          "description": "Toggle arrow icon",
           "type": "boolean",
           "default": false
         },
@@ -61,7 +61,7 @@
       "type": "string",
       "title": "Image",
       "description": "Image to display as cover",
-      "format": "uri"
+      "format": "image"
     },
     "imageRatio": {
       "type": "string",

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { HTMLAttributes } 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.
+ */
+/**
+ * The testimonial quote
+ */
+type Quote = string;
+/**
+ * The name of the quote author
+ */
+type Name = string;
+/**
+ * The title of the quote author
+ */
+type Title = string;
+/**
+ * The image to display with the testimonial
+ */
+type Source = string;
+/**
+ * The alt text of the image file
+ */
+type AltText = string;
+/**
+ * Testimonial entry of Testimonials component
+ */
+interface TestimonialProps {
+    quote: Quote;
+    name: Name;
+    title?: Title;
+    image: {
+        src?: Source;
+        alt?: AltText;
+    };
+}
+declare const TestimonialContextDefault: import("react").ForwardRefExoticComponent<TestimonialProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TestimonialContext: import("react").Context<import("react").ForwardRefExoticComponent<TestimonialProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Testimonial: import("react").ForwardRefExoticComponent<TestimonialProps & import("react").RefAttributes<HTMLDivElement>>;
+export { TestimonialContextDefault, TestimonialContext, Testimonial };

package/dist/components/testimonial/index.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { TextMedia } from '@kickstartds/base/lib/text-media';
+
+const TestimonialContextDefault = forwardRef(({ image, quote, name, title, ...rest }, ref) => (jsx(TextMedia, { ...rest, ref: ref, mediaAlignment: "beside-left", media: [
+        {
+            image: {
+                src: image?.src,
+                alt: image?.alt,
+            },
+        },
+    ], text: quote, renderText: () => (jsxs(Fragment, { children: ["\"", quote, "\"", jsx("br", {}), jsx("br", {}), jsx("b", { children: name }), jsx("br", {}), title] })) })));
+const TestimonialContext = createContext(TestimonialContextDefault);
+const Testimonial = forwardRef((props, ref) => {
+    const Component = useContext(TestimonialContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+
+export { Testimonial, TestimonialContext, TestimonialContextDefault };

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

@@ -0,0 +1,60 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/testimonial.schema.json",
+  "title": "Testimonial",
+  "description": "Testimonial entry of Testimonials component",
+  "type": "object",
+  "properties": {
+    "quote": {
+      "title": "Quote",
+      "description": "The testimonial quote",
+      "type": "string",
+      "format": "markdown",
+      "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"
+    },
+    "image": {
+      "type": "object",
+      "properties": {
+        "src": {
+          "title": "Source",
+          "description": "The image to display with the testimonial",
+          "type": "string",
+          "format": "image",
+          "examples": [
+            "https://example.com/image.jpg"
+          ]
+        },
+        "alt": {
+          "title": "Alt Text",
+          "description": "The alt text of the image file",
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
+    "type": {
+      "const": "testimonial"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "quote",
+    "name",
+    "image"
+  ]
+}

package/dist/components/testimonial/testimonial.schema.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/testimonial.schema.json",
+  "title": "Testimonial",
+  "description": "Testimonial entry of Testimonials component",
+  "type": "object",
+  "properties": {
+    "quote": {
+      "title": "Quote",
+      "description": "The testimonial quote",
+      "type": "string",
+      "format": "markdown",
+      "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"
+    },
+    "image": {
+      "type": "object",
+      "properties": {
+        "src": {
+          "title": "Source",
+          "description": "The image to display with the testimonial",
+          "type": "string",
+          "format": "image",
+          "examples": ["https://example.com/image.jpg"]
+        },
+        "alt": {
+          "title": "Alt Text",
+          "description": "The alt text of the image file",
+          "type": "string"
+        }
+      }
+    }
+  },
+  "additionalProperties": false,
+  "required": ["quote", "name", "image"]
+}

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

@@ -1,4 +1,7 @@
-import { HTMLAttributes, FC } from "react";
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
 import { TextProps } from "../../TextProps-a23170d2.js";
-declare const Text: FC<TextProps & HTMLAttributes<HTMLElement>>;
-export { Text };
+declare const TextContextDefault: import("react").ForwardRefExoticComponent<TextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TextContext: import("react").Context<import("react").ForwardRefExoticComponent<TextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Text: import("react").ForwardRefExoticComponent<TextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { TextContextDefault, TextContext, Text };

package/dist/components/text/index.js

@@ -1,13 +1,19 @@
 import "./text.css";
 import { jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
+import { forwardRef, createContext, useContext } from 'react';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 
-const Text = ({ text, layout = "singleColumn", align = "left", highlightText = false, ...props }) => {
+const TextContextDefault = forwardRef(({ text, layout = "singleColumn", align = "left", highlightText = false, ...rest }, ref) => {
     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 }));
-};
+    return (jsx(RichText, { ...rest, ref: ref, className: classnames("dsa-text", `${layoutClass}`, `${alignClass}`, `${highlightClass}`), text: text }));
+});
+const TextContext = createContext(TextContextDefault);
+const Text = forwardRef((props, ref) => {
+    const Component = useContext(TextContext);
+    return jsx(Component, { ...props, ref: ref });
+});
 
-export { Text };
+export { Text, TextContext, TextContextDefault };

package/dist/components/text/text.css

@@ -1,15 +1,25 @@
-.c-rich-text {
-  --ks-text-col-width: 16em;
+:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+  --dsa-text--font: var(--dsa-rich-text--font);
+  --dsa-text--color: var(--dsa-rich-text--color);
+  --dsa-text__highlight--color: var(--ks-text-color-default);
+  --dsa-text__highlight--font: var(--ks-font-copy-l);
+  --dsa-text__col--width: 16em;
+  --dsa-text__col--gap: var(--ks-spacing-inline-m);
 }
-.c-rich-text--highlight.c-rich-text {
-  color: var(--ks-color-fg);
-  font: var(--ks-font-copy-l);
+
+.c-rich-text.dsa-text {
+  font: var(--dsa-text--font, var(--dsa-rich-text--font), var(--ks-font-copy-m));
+  color: var(--dsa-text--color, var(--dsa-rich-text--color), var(--ks-text-color-default));
 }
-.c-rich-text--center.c-rich-text {
+.c-rich-text.dsa-text--highlight.c-rich-text {
+  color: var(--dsa-text-highlight--color, var(--ks-text-color-primary));
+  font: var(--dsa-text-highlight--font, var(--ks-font-copy-l));
+}
+.c-rich-text.dsa-text--center.c-rich-text {
   text-align: center;
 }
-.c-rich-text--columns.c-rich-text {
-  column-gap: var(--ks-spacing-inline-m);
+.c-rich-text.dsa-text--columns.c-rich-text {
+  column-gap: var(--dsa-text__col--gap, var(--ks-spacing-inline-m));
+  column-width: var(--dsa-text__col--width, 16em);
   column-count: auto;
-  column-width: var(--ks-text-col-width);
 }

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

@@ -7,6 +7,7 @@
   "properties": {
     "text": {
       "type": "string",
+      "format": "markdown",
       "title": "Text",
       "description": "Text",
       "examples": [

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

@@ -7,6 +7,7 @@
   "properties": {
     "text": {
       "type": "string",
+      "format": "markdown",
       "title": "Text",
       "description": "Text",
       "examples": [

package/dist/components/video-curtain/video-curtain.css

@@ -37,7 +37,7 @@
   --c-visual_text--color: var(--c-visual--text-color-neutral);
   --c-visual_subheadline--color: var(--c-visual--text-color-neutral);
 }
-.c-visual.c-video-curtain .c-headline .c-headline__subheadline {
+.c-visual.c-video-curtain .dsa-headline .dsa-headline__subheadline {
   color: var(--c-visual_subheadline--color);
 }
 .c-visual.c-video-curtain.c-visual--full {