@kickstartds/ds-agency-premium 1.0.1

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

@@ -0,0 +1,105 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/image.schema.json",
+  "title": "Image",
+  "description": "Base component to display a picture",
+  "type": "object",
+  "properties": {
+    "src": {
+      "title": "Source",
+      "description": "Picture source",
+      "type": "string",
+      "format": "image",
+      "examples": [
+        "img/close-up-young-business-team-working.png"
+      ]
+    },
+    "srcSet": {
+      "title": "Picture sourceset",
+      "description": "Use a srcSet to display picture",
+      "type": "string",
+      "format": "image"
+    },
+    "alt": {
+      "title": "Alt text",
+      "description": "Alt text to display for picture",
+      "type": "string"
+    },
+    "width": {
+      "title": "Width",
+      "description": "Width of the picture",
+      "type": "integer",
+      "minimum": 0
+    },
+    "height": {
+      "title": "Height",
+      "description": "Height of the picture",
+      "type": "integer",
+      "minimum": 0
+    },
+    "aspectRatio": {
+      "type": "string",
+      "title": "Aspect Ratio",
+      "description": "The aspect ratio of the image",
+      "enum": [
+        "unset",
+        "square",
+        "wide",
+        "landscape"
+      ],
+      "default": "unset"
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the button",
+      "type": "string"
+    },
+    "style": {
+      "title": "`style` attribute",
+      "description": "Define a style attribute for the picture",
+      "type": "string"
+    },
+    "lazy": {
+      "title": "Lazy",
+      "description": "Load the picture lazily",
+      "type": "boolean",
+      "default": true
+    },
+    "sources": {
+      "title": "Sources",
+      "description": "Additional sources. This will result in a `picture`-Element",
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "srcSet": {
+            "title": "Picture sourceset",
+            "description": "Use a srcSet to display picture",
+            "type": "string",
+            "format": "image"
+          },
+          "media": {
+            "title": "TODO MEDIA TITLE",
+            "description": "TODO MEDIA DESCRIPTION",
+            "type": "string"
+          },
+          "type": {
+            "title": "TODO TYPE TITLE",
+            "description": "TODO TYPE DESCRIPTION",
+            "type": "string"
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "pictureClassName": {
+      "title": "`class` attribute",
+      "description": "Set additional class(es) to the picture",
+      "type": "string"
+    },
+    "type": {
+      "const": "image"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/image/image.schema.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/image.schema.json",
+  "title": "Image",
+  "description": "Base component to display a picture",
+  "type": "object",
+  "properties": {
+    "src": {
+      "title": "Source",
+      "description": "Picture source",
+      "type": "string",
+      "format": "image",
+      "examples": ["img/close-up-young-business-team-working.png"]
+    },
+    "srcSet": {
+      "title": "Picture sourceset",
+      "description": "Use a srcSet to display picture",
+      "type": "string",
+      "format": "image"
+    },
+    "alt": {
+      "title": "Alt text",
+      "description": "Alt text to display for picture",
+      "type": "string"
+    },
+    "width": {
+      "title": "Width",
+      "description": "Width of the picture",
+      "type": "integer",
+      "minimum": 0
+    },
+    "height": {
+      "title": "Height",
+      "description": "Height of the picture",
+      "type": "integer",
+      "minimum": 0
+    },
+    "aspectRatio": {
+      "type": "string",
+      "title": "Aspect Ratio",
+      "description": "The aspect ratio of the image",
+      "enum": ["unset", "square", "wide", "landscape"],
+      "default": "unset"
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the button",
+      "type": "string"
+    },
+    "style": {
+      "title": "`style` attribute",
+      "description": "Define a style attribute for the picture",
+      "type": "string"
+    },
+    "lazy": {
+      "title": "Lazy",
+      "description": "Load the picture lazily",
+      "type": "boolean",
+      "default": true
+    },
+    "sources": {
+      "title": "Sources",
+      "description": "Additional sources. This will result in a `picture`-Element",
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "srcSet": {
+            "title": "Picture sourceset",
+            "description": "Use a srcSet to display picture",
+            "type": "string",
+            "format": "image"
+          },
+          "media": {
+            "title": "TODO MEDIA TITLE",
+            "description": "TODO MEDIA DESCRIPTION",
+            "type": "string"
+          },
+          "type": {
+            "title": "TODO TYPE TITLE",
+            "description": "TODO TYPE DESCRIPTION",
+            "type": "string"
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "pictureClassName": {
+      "title": "`class` attribute",
+      "description": "Set additional class(es) to the picture",
+      "type": "string"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,87 @@
+/// <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.
+ */
+/**
+ * Picture source
+ */
+type Source = string;
+/**
+ * Use a srcSet to display picture
+ */
+type PictureSourceset = string;
+/**
+ * Alt text to display for picture
+ */
+type AltText = string;
+/**
+ * Width of the picture
+ */
+type Width = number;
+/**
+ * Height of the picture
+ */
+type Height = number;
+/**
+ * The aspect ratio of the image
+ */
+type AspectRatio = "unset" | "square" | "wide" | "landscape";
+/**
+ * Add additional css classes that should be applied to the button
+ */
+type AdditionalClasses = string;
+/**
+ * Define a style attribute for the picture
+ */
+type StyleAttribute = string;
+/**
+ * Load the picture lazily
+ */
+type Lazy = boolean;
+/**
+ * Use a srcSet to display picture
+ */
+type PictureSourceset1 = string;
+/**
+ * TODO MEDIA DESCRIPTION
+ */
+type TODOMEDIATITLE = string;
+/**
+ * TODO TYPE DESCRIPTION
+ */
+type TODOTYPETITLE = string;
+/**
+ * Additional sources. This will result in a `picture`-Element
+ */
+type Sources = {
+    srcSet?: PictureSourceset1;
+    media?: TODOMEDIATITLE;
+    type?: TODOTYPETITLE;
+}[];
+/**
+ * Set additional class(es) to the picture
+ */
+type ClassAttribute = string;
+/**
+ * Base component to display a picture
+ */
+interface ImageProps {
+    src?: Source;
+    srcSet?: PictureSourceset;
+    alt?: AltText;
+    width?: Width;
+    height?: Height;
+    aspectRatio?: AspectRatio;
+    className?: AdditionalClasses;
+    style?: StyleAttribute;
+    lazy?: Lazy;
+    sources?: Sources;
+    pictureClassName?: ClassAttribute;
+}
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLImageElement>>;
+declare const ImageProvider: FC<PropsWithChildren>;
+export { Image, ImageProvider };

package/dist/components/image/index.js

@@ -0,0 +1,11 @@
+import "./image.css";
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { forwardRef } from 'react';
+import { PictureContextDefault, PictureContext } from '@kickstartds/base/lib/picture';
+
+const Image = forwardRef(({ src, srcSet, alt, width, height, aspectRatio, className, id, itemProp, style, lazy, sources, pictureClassName, ...props }, ref) => (jsx(PictureContextDefault, { ...props, src: src, srcSet: srcSet, alt: alt, width: width, height: height, id: id, itemProp: itemProp, style: style, lazy: lazy, sources: sources, pictureClassName: pictureClassName, ref: ref, className: classnames("c-image", aspectRatio !== "unset" && `c-image--${aspectRatio}`, className) })));
+Image.displayName = "Image";
+const ImageProvider = (props) => (jsx(PictureContext.Provider, { ...props, value: Image }));
+
+export { Image, ImageProvider };

package/dist/components/image-story/image-story.css

@@ -0,0 +1,26 @@
+.c-image-story.c-storytelling {
+  --c-image-story--gap: var(--ks-spacing-m);
+  --c-storytelling--horizontal-padding: var(--l-section--content-padding);
+}
+.c-image-story.c-storytelling--full {
+  --c-storytelling--vertical-padding: 0px;
+}
+
+.c-storytelling.c-image-story {
+  gap: var(--c-storytelling--horizontal-padding);
+}
+.c-storytelling.c-image-story .c-storytelling__box__content {
+  max-width: var(--l-section--content-width-narrow);
+}
+.c-storytelling.c-image-story .c-storytelling__box,
+.c-storytelling.c-image-story .c-storytelling__image {
+  padding: 0;
+}
+.c-storytelling.c-image-story .c-storytelling__image img {
+  position: sticky;
+  top: calc(var(--c-storytelling--vertical-padding) * 2);
+}
+.c-storytelling.c-image-story.c-storytelling--full .c-storytelling__image img {
+  padding-top: 0;
+  padding-bottom: 0;
+}

package/dist/components/image-story/image-story.schema.dereffed.json

@@ -0,0 +1,165 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/image-story.schema.json",
+  "title": "Image Story",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "title": "Module Headline",
+      "description": "Headline for the module element",
+      "type": "string",
+      "examples": [
+        "Headline"
+      ]
+    },
+    "largeHeadline": {
+      "type": "boolean",
+      "title": "Large Headline",
+      "description": "Make the headline larger",
+      "default": false
+    },
+    "sub": {
+      "title": "Module Subheadline",
+      "description": "Subheadline below the module headline",
+      "type": "string",
+      "examples": [
+        "Subheadline"
+      ]
+    },
+    "text": {
+      "title": "Module Text",
+      "description": "Info text for the module element",
+      "type": "string"
+    },
+    "layout": {
+      "type": "string",
+      "title": "Layout",
+      "description": "Choose the layout for the component",
+      "enum": [
+        "textLeft",
+        "imageLeft"
+      ],
+      "default": "imageLeft"
+    },
+    "padding": {
+      "type": "boolean",
+      "title": "Padding",
+      "default": false,
+      "description": "Give the component padding"
+    },
+    "buttons": {
+      "title": "Buttons",
+      "description": "Buttons of the Button Group",
+      "type": "array",
+      "items": {
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/button.schema.json",
+        "title": "Button",
+        "description": "Component used for user interaction",
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "title": "Label",
+            "description": "Text content to display inside the button",
+            "examples": [
+              "Book a meeting"
+            ]
+          },
+          "target": {
+            "type": "string",
+            "title": "Target",
+            "description": "Target that should be linked, makes the button behave like a link semantically",
+            "format": "uri"
+          },
+          "variant": {
+            "type": "string",
+            "title": "Variant",
+            "description": "Variant of button to be used",
+            "enum": [
+              "primary",
+              "secondary",
+              "tertiary"
+            ],
+            "default": "secondary"
+          },
+          "icon": {
+            "type": "string",
+            "title": "Icon",
+            "description": "Choose an icon"
+          },
+          "size": {
+            "type": "string",
+            "title": "Size",
+            "description": "Size of button to use",
+            "enum": [
+              "small",
+              "medium",
+              "large"
+            ],
+            "default": "medium"
+          },
+          "disabled": {
+            "type": "boolean",
+            "title": "Disabled?",
+            "description": "Whether the button should be disabled",
+            "default": false
+          },
+          "type": {
+            "const": "button"
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "label"
+        ]
+      }
+    },
+    "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"
+        },
+        "ratio": {
+          "title": "Image aspect ratio",
+          "description": "Select an aspect ratio to use for cropping and displaying the image",
+          "type": "string",
+          "enum": [
+            "4:3",
+            "3:2",
+            "16:9",
+            "1:1",
+            "none"
+          ],
+          "default": "none"
+        },
+        "alt": {
+          "title": "Alt text",
+          "description": "Image description",
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
+    "textAlign": {
+      "title": "Text Alignment",
+      "description": "Choose the alginment of the text",
+      "enum": [
+        "left",
+        "center"
+      ],
+      "type": "string",
+      "default": "left"
+    },
+    "type": {
+      "const": "image-story"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/image-story/image-story.schema.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/image-story.schema.json",
+  "title": "Image Story",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "title": "Module Headline",
+      "description": "Headline for the module element",
+      "type": "string",
+      "examples": ["Headline"]
+    },
+    "largeHeadline": {
+      "type": "boolean",
+      "title": "Large Headline",
+      "description": "Make the headline larger",
+      "default": false
+    },
+    "sub": {
+      "title": "Module Subheadline",
+      "description": "Subheadline below the module headline",
+      "type": "string",
+      "examples": ["Subheadline"]
+    },
+    "text": {
+      "title": "Module Text",
+      "description": "Info text for the module element",
+      "type": "string"
+    },
+    "layout": {
+      "type": "string",
+      "title": "Layout",
+      "description": "Choose the layout for the component",
+      "enum": ["textLeft", "imageLeft"],
+      "default": "imageLeft"
+    },
+    "padding": {
+      "type": "boolean",
+      "title": "Padding",
+      "default": false,
+      "description": "Give the component padding"
+    },
+    "buttons": {
+      "$ref": "http://schema.mydesignsystem.com/button-group.schema.json#/properties/buttons"
+    },
+    "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"
+        },
+        "ratio": {
+          "title": "Image aspect ratio",
+          "description": "Select an aspect ratio to use for cropping and displaying the image",
+          "type": "string",
+          "enum": ["4:3", "3:2", "16:9", "1:1", "none"],
+          "default": "none"
+        },
+        "alt": {
+          "title": "Alt text",
+          "description": "Image description",
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
+    "textAlign": {
+      "title": "Text Alignment",
+      "description": "Choose the alginment of the text",
+      "enum": ["left", "center"],
+      "type": "string",
+      "default": "left"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/image-story/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.js";
+declare const ImageStory: FC<ImageStoryProps>;
+export { ImageStory };

package/dist/components/image-story/index.js

@@ -0,0 +1,39 @@
+import "./image-story.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 ImageStory = ({ headline, largeHeadline = false, sub, image, padding = false, textAlign = "left", layout = "textLeft", buttons = [], text, }) => {
+    const ButtonGroup = useButtonGroup();
+    return (jsx(ButtonContext.Provider
+    // @ts-expect-error
+    , { 
+        // @ts-expect-error
+        value: ButtonGroup, children: jsx(Storytelling, { className: classnames("c-image-story"), full: padding === false ? true : false, image: {
+                source: image?.src,
+                order: {
+                    desktopImageLast: layout === "imageLeft" ? false : true,
+                },
+                vAlign: "top",
+            }, box: {
+                text: text,
+                textAlign: textAlign,
+                vAlign: "top",
+                // @ts-expect-error
+                link: { buttons },
+                headline: {
+                    text: headline,
+                    level: "h2",
+                    style: largeHeadline === true ? "h1" : undefined,
+                    sub: sub,
+                    spaceAfter: largeHeadline === true ? "large" : undefined,
+                    align: textAlign,
+                },
+            } }) }));
+};
+
+export { ImageStory };

package/dist/components/image-text/image-text.css

@@ -0,0 +1,4 @@
+.c-image-text--highlight {
+  --c-rich-text--font: var(--ks-font-copy-l);
+  --c-rich-text--color: var(--ks-color-fg);
+}