@kickstartds/ds-agency-premium 1.0.1

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

@@ -0,0 +1,158 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/cta.schema.json",
+  "title": "Cta",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "title": "Component Headline",
+      "description": "Headline for the Component element",
+      "type": "string",
+      "examples": [
+        "Headline"
+      ]
+    },
+    "sub": {
+      "title": "Component Subheadline",
+      "description": "Subheadline below the component headline",
+      "type": "string",
+      "examples": [
+        "Subheadline"
+      ]
+    },
+    "text": {
+      "title": "Component Text",
+      "description": "Info text for the component element",
+      "type": "string"
+    },
+    "highlightText": {
+      "type": "boolean",
+      "title": "Highlight Text",
+      "description": "Visually highlight the text",
+      "default": false
+    },
+    "colorNeutral": {
+      "title": "Color Neutral",
+      "description": "Make the text and buttons color neutral",
+      "default": false,
+      "type": "boolean"
+    },
+    "fullWidth": {
+      "title": "Width",
+      "description": "Set the width of the content to the full width of the element",
+      "type": "boolean",
+      "default": false
+    },
+    "buttons": {
+      "type": "array",
+      "items": {
+        "title": "Button",
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "title": "Label",
+            "description": "Text content to display inside the button",
+            "examples": [
+              "Book a meeting"
+            ]
+          },
+          "icon": {
+            "type": "string",
+            "title": "Icon",
+            "description": "Choose an icon"
+          },
+          "target": {
+            "type": "string",
+            "title": "Target",
+            "description": "Target that should be linked, makes the button behave like a link semantically",
+            "format": "uri"
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "backgroundColor": {
+      "title": "Background color",
+      "description": "Background color for the whole element",
+      "type": "string",
+      "format": "color"
+    },
+    "backgroundImage": {
+      "title": "Background image",
+      "description": "Background image for the whole element",
+      "type": "string",
+      "format": "image"
+    },
+    "image": {
+      "title": "Image",
+      "description": "Image displayed alongside the text content",
+      "type": "object",
+      "properties": {
+        "src": {
+          "title": "Image source",
+          "description": "Image source to use",
+          "type": "string",
+          "format": "image"
+        },
+        "padding": {
+          "title": "Padding",
+          "description": "Toggle padding of the image",
+          "type": "boolean",
+          "default": true
+        },
+        "alt": {
+          "title": "Alt text",
+          "description": "Image description",
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
+    "order": {
+      "title": "Order",
+      "description": "Choose what comes first on mobile and desktop: image or text",
+      "type": "object",
+      "properties": {
+        "mobileImageLast": {
+          "title": "Mobile image after text",
+          "description": "Switch to displaying the image after the text on mobile",
+          "type": "boolean",
+          "default": false
+        },
+        "desktopImageLast": {
+          "title": "Desktop image after text",
+          "description": "Switch to displaying the image after the text on desktop",
+          "type": "boolean",
+          "default": true
+        }
+      },
+      "additionalProperties": false
+    },
+    "textAlign": {
+      "title": "Text Alignment",
+      "description": "Choose the alginment of the text",
+      "enum": [
+        "left",
+        "center"
+      ],
+      "type": "string",
+      "default": "left"
+    },
+    "contentAlign": {
+      "title": "Vertical alignment of the content",
+      "description": "Select a vertical alignment for the image",
+      "type": "string",
+      "enum": [
+        "center",
+        "top",
+        "bottom"
+      ],
+      "default": "center"
+    },
+    "type": {
+      "const": "cta"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/cta/cta.schema.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/cta.schema.json",
+  "title": "Cta",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "title": "Component Headline",
+      "description": "Headline for the Component element",
+      "type": "string",
+      "examples": ["Headline"]
+    },
+    "sub": {
+      "title": "Component Subheadline",
+      "description": "Subheadline below the component headline",
+      "type": "string",
+      "examples": ["Subheadline"]
+    },
+    "text": {
+      "title": "Component Text",
+      "description": "Info text for the component element",
+      "type": "string"
+    },
+    "highlightText": {
+      "type": "boolean",
+      "title": "Highlight Text",
+      "description": "Visually highlight the text",
+      "default": false
+    },
+    "colorNeutral": {
+      "title": "Color Neutral",
+      "description": "Make the text and buttons color neutral",
+      "default": false,
+      "type": "boolean"
+    },
+    "fullWidth": {
+      "title": "Width",
+      "description": "Set the width of the content to the full width of the element",
+      "type": "boolean",
+      "default": false
+    },
+    "buttons": {
+      "type": "array",
+      "items": {
+        "title": "Button",
+        "type": "object",
+        "properties": {
+          "label": {
+            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/label"
+          },
+          "icon": {
+            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/icon"
+          },
+          "target": {
+            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
+          }
+        }
+      }
+    },
+    "backgroundColor": {
+      "$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/backgroundColor"
+    },
+    "backgroundImage": {
+      "$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/backgroundImage"
+    },
+    "image": {
+      "title": "Image",
+      "description": "Image displayed alongside the text content",
+      "type": "object",
+      "properties": {
+        "src": {
+          "title": "Image source",
+          "description": "Image source to use",
+          "type": "string",
+          "format": "image"
+        },
+        "padding": {
+          "title": "Padding",
+          "description": "Toggle padding of the image",
+          "type": "boolean",
+          "default": true
+        },
+        "alt": {
+          "title": "Alt text",
+          "description": "Image description",
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
+    "order": {
+      "title": "Order",
+      "description": "Choose what comes first on mobile and desktop: image or text",
+      "type": "object",
+      "properties": {
+        "mobileImageLast": {
+          "title": "Mobile image after text",
+          "description": "Switch to displaying the image after the text on mobile",
+          "type": "boolean",
+          "default": false
+        },
+        "desktopImageLast": {
+          "title": "Desktop image after text",
+          "description": "Switch to displaying the image after the text on desktop",
+          "type": "boolean",
+          "default": true
+        }
+      },
+      "additionalProperties": false
+    },
+    "textAlign": {
+      "title": "Text Alignment",
+      "description": "Choose the alginment of the text",
+      "enum": ["left", "center"],
+      "type": "string",
+      "default": "left"
+    },
+    "contentAlign": {
+      "title": "Vertical alignment of the content",
+      "description": "Select a vertical alignment for the image",
+      "type": "string",
+      "enum": ["center", "top", "bottom"],
+      "default": "center"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { CtaProps } from "../../CtaProps-93230a76.js";
+declare const Cta: FC<CtaProps>;
+export { Cta };

package/dist/components/cta/index.js

@@ -0,0 +1,40 @@
+import "./cta.css";
+import { jsx } from 'react/jsx-runtime';
+import { Storytelling } from '@kickstartds/content/lib/storytelling';
+import { ButtonContext } from '@kickstartds/base/lib/button';
+import classnames from 'classnames';
+import { useButtonGroup } from '../button-group/index.js';
+import 'react';
+import '@kickstartds/base/lib/button-group';
+
+const Cta = ({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, contentAlign, order, fullWidth = false, buttons = [], }) => {
+    const ButtonGroup = useButtonGroup();
+    return (jsx(ButtonContext.Provider
+    // @ts-expect-error
+    , { 
+        // @ts-expect-error
+        value: ButtonGroup, children: jsx(Storytelling, { className: classnames("c-cta", fullWidth ? `c-cta--full-width` : "", highlightText ? `c-cta--highlight-text` : "", colorNeutral ? `c-cta--color-neutral` : "", contentAlign && contentAlign !== "center"
+                ? `c-cta--align-${contentAlign}`
+                : ""), backgroundImage: backgroundImage, backgroundColor: backgroundColor, full: image?.padding === false, image: {
+                source: image?.src,
+                order: order,
+            }, box: {
+                text: text,
+                textAlign: textAlign,
+                link: {
+                    // @ts-expect-error
+                    buttons,
+                    colorNeutral: colorNeutral,
+                },
+                headline: {
+                    text: headline,
+                    level: "h2",
+                    style: highlightText === true ? "h1" : undefined,
+                    sub: sub,
+                    spaceAfter: highlightText === true ? "large" : undefined,
+                    align: textAlign,
+                },
+            } }) }));
+};
+
+export { Cta };

package/dist/components/faq/faq.css

@@ -0,0 +1,17 @@
+.c-collapsible-box {
+  --c-collapsible-box-summary--color: var(--g-headline--color);
+  --c-collapsible-box-summary--font-weight: var(--g-headline--font-weight);
+  --c-collapsible-box-summary--font: var(--ks-font-copy-l);
+  --c-collapsible-box-icon--color: var(--ks-text-color-default);
+  --c-collapsible-box_header--padding: 1em 0;
+  --c-collapsible-box_content--padding: 0em 0em 1em 0em;
+}
+.c-collapsible-box__header__text {
+  color: var(--c-collapsible-box-summary--color);
+  font: var(--c-collapsible-box-summary--font);
+  font-weight: var(--c-collapsible-box-summary--font-weight);
+  font-family: var(--ks-font-family-display);
+}
+.c-collapsible-box__header__icon {
+  color: var(--c-collapsible-box-icon--color);
+}

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

@@ -0,0 +1,48 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/faq.schema.json",
+  "title": "Faq",
+  "description": "Component used to display a Faq section",
+  "type": "object",
+  "properties": {
+    "questions": {
+      "type": "array",
+      "title": "Questions",
+      "description": "The questions and answers in the Faq section",
+      "items": {
+        "type": "object",
+        "properties": {
+          "question": {
+            "type": "string",
+            "title": "Question",
+            "description": "The question",
+            "examples": [
+              "What is the product made of?"
+            ]
+          },
+          "answer": {
+            "type": "string",
+            "title": "Answer",
+            "description": "The answer to the question",
+            "examples": [
+              "The product is made of high-quality materials"
+            ]
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "question",
+          "answer"
+        ]
+      },
+      "minItems": 1
+    },
+    "type": {
+      "const": "faq"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "questions"
+  ]
+}

package/dist/components/faq/faq.schema.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/faq.schema.json",
+  "title": "Faq",
+  "description": "Component used to display a Faq section",
+  "type": "object",
+  "properties": {
+    "questions": {
+      "type": "array",
+      "title": "Questions",
+      "description": "The questions and answers in the Faq section",
+      "items": {
+        "type": "object",
+        "properties": {
+          "question": {
+            "type": "string",
+            "title": "Question",
+            "description": "The question",
+            "examples": ["What is the product made of?"]
+          },
+          "answer": {
+            "type": "string",
+            "title": "Answer",
+            "description": "The answer to the question",
+            "examples": ["The product is made of high-quality materials"]
+          }
+        },
+        "additionalProperties": false,
+        "required": ["question", "answer"]
+      },
+      "minItems": 1
+    }
+  },
+  "additionalProperties": false,
+  "required": ["questions"]
+}

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

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

package/dist/components/faq/index.js

@@ -0,0 +1,9 @@
+import "./faq.css";
+import { jsx } from 'react/jsx-runtime';
+import { CollapsibleBox } from '@kickstartds/base/lib/collapsible-box';
+
+const Faq = ({ questions, }) => {
+    return (jsx("div", { className: `c-faq`, children: questions.map((question, index) => (jsx(CollapsibleBox, { summary: question.question, text: question.answer }, index))) }));
+};
+
+export { Faq };

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

@@ -0,0 +1,49 @@
+import { HTMLAttributes, 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.
+ */
+/**
+ * The icon for the feature
+ */
+type Icon = string;
+/**
+ * The title of the feature
+ */
+type Title = string;
+/**
+ * The description of the feature
+ */
+type Text = string;
+/**
+ * The CTA target
+ */
+type CallToActionTarget = string;
+/**
+ * The text label displayed on the link
+ */
+type LinkLabel = string;
+/**
+ * Activate/disable the CTAs
+ */
+type CallToActionToggle = boolean;
+/**
+ * Partial Component used to display a feature
+ */
+interface FeatureProps {
+    icon?: Icon;
+    title: Title;
+    text: Text;
+    style?: "intext" | "stack" | "centered" | "besideLarge" | "besideSmall";
+    ctaTarget?: CallToActionTarget;
+    ctaLabel?: LinkLabel;
+    ctaToggle?: CallToActionToggle;
+    /**
+     * Choose the style of the CTA
+     */
+    ctaStyle?: "button" | "link" | "intext";
+}
+declare const Feature: FC<FeatureProps & HTMLAttributes<HTMLElement>>;
+export { Feature };

package/dist/components/feature/index.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { Button } from '../button/index.js';
+import { Link } from '@kickstartds/base/lib/link';
+import 'react';
+import '@kickstartds/base/lib/button';
+
+const Feature = ({ style = "stack", title, text, icon, ctaToggle = true, ctaStyle = "link", ctaTarget, ctaLabel = "Read more", }) => {
+    return (jsxs("div", { className: classnames(`c-feature c-feature--${style === `stack`
+            ? `stack c-feature--large`
+            : style === `besideSmall`
+                ? `beside c-feature--small`
+                : style === `besideLarge`
+                    ? `beside c-feature--large`
+                    : style === `intext`
+                        ? `intext c-feature--small`
+                        : style === `centered`
+                            ? `centered c-feature--large`
+                            : `${style}`}`), children: [jsxs("div", { className: "c-feature__header", children: [icon && jsx(Icon, { className: "c-feature__icon", icon: icon }), jsx("span", { className: "c-feature__title", children: title })] }), text || ctaStyle === "intext" ? (jsxs("p", { className: "c-feature__text", children: [text, ctaStyle === "intext" && ctaToggle ? (jsxs(Fragment, { children: [" ", " ", jsx(Link, { href: ctaTarget, children: ctaLabel ? ctaLabel : "See more" })] })) : ("")] })) : (""), ctaToggle && (ctaStyle === "link" || ctaStyle === "button") && (jsx("div", { className: "c-feature__cta", children: ctaStyle === "link" ? (jsxs(Link, { className: "c-feature__link", href: ctaTarget, children: [ctaLabel ? ctaLabel : "See more", jsx(Icon, { icon: "arrow-right" })] })) : ctaStyle === "button" ? (jsx(Button, { className: "c-feature__button", size: "small", target: ctaTarget, label: ctaLabel ? ctaLabel : "See more" })) : ("") }))] }));
+};
+
+export { Feature };

package/dist/components/features/features.css

@@ -0,0 +1,115 @@
+.c-feature {
+  --c-feature-icon--color: var(--ks-text-color-primary);
+}
+.c-feature--small {
+  --c-feature-icon--size: calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m));
+  --c-feature--stack: var(--ks-spacing-stack-xs);
+  --c-feature-icon--gap: var(--ks-spacing-xs);
+}
+.c-feature--large {
+  --c-feature-icon--size: calc(var(--ks-font-size-copy-m) * 2.5);
+  --c-feature--stack: var(--ks-spacing-stack-s);
+  --c-feature-icon--gap: var(--ks-spacing-s);
+}
+.c-feature--large.c-feature--beside {
+  --c-feature--stack: var(--ks-spacing-stack-xs);
+}
+.c-feature--stack.c-feature--large {
+  --c-feature-icon--gap: var(--ks-spacing-xs);
+}
+
+.c-features--list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-m);
+}
+.c-features--large-tiles {
+  display: grid;
+  gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-m);
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+}
+.c-features--large-tiles .c-feature {
+  flex-basis: 300px;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+.c-features--small-tiles {
+  display: grid;
+  gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-m);
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+.l-section--align-center .c-features--small-tiles {
+  justify-content: center;
+}
+
+.c-feature {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: var(--c-feature--stack);
+}
+.c-feature--beside {
+  padding-left: calc(var(--c-feature-icon--size) + var(--c-feature-icon--gap));
+}
+.c-feature--beside .c-feature__icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.c-feature--stack .c-feature__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.c-feature--centered .c-feature__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.c-feature--centered .c-feature__title,
+.c-feature--centered .c-feature__text {
+  text-align: center;
+}
+.c-feature--centered .c-feature__cta {
+  display: flex;
+  justify-content: center;
+}
+.c-feature__header {
+  display: flex;
+  align-items: center;
+  gap: var(--c-feature-icon--gap);
+}
+.c-feature__title {
+  font: var(--ks-font-interface-m);
+  color: var(--ks-color-fg);
+  font-family: var(--ks-font-family-display);
+  font-weight: var(--ks-font-weight-semi-bold);
+}
+.c-feature__text {
+  color: var(--ks-text-color-default);
+  font: var(--ks-font-copy-s);
+  margin: 0;
+}
+.c-feature__icon {
+  color: var(--c-feature-icon--color);
+  width: var(--c-feature-icon--size);
+  height: var(--c-feature-icon--size);
+}
+.c-feature__cta {
+  margin-top: auto;
+}
+.c-feature__link {
+  font: var(--ks-font-copy-s);
+  display: flex;
+  align-items: center;
+  gap: var(--ks-spacing-xxs);
+  font-weight: var(--ks-font-weight-semi-bold) !important;
+  width: fit-content;
+}
+.c-feature__link .icon {
+  width: 1.125em;
+  height: 1.125em;
+}
+.c-feature__button {
+  margin-top: calc(var(--c-feature--stack) * 0.5);
+}