@kickstartds/ds-agency-premium 1.0.1

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

@@ -0,0 +1,86 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/headline.schema.json",
+  "title": "Headline",
+  "description": "Component used for headlines",
+  "type": "object",
+  "properties": {
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "Text content of headline",
+      "format": "markdown"
+    },
+    "sub": {
+      "type": "string",
+      "title": "Sub",
+      "description": "Subheadline content",
+      "format": "markdown"
+    },
+    "switchOrder": {
+      "type": "boolean",
+      "title": "Switch order?",
+      "description": "Switch order of headline and subheadline",
+      "default": false
+    },
+    "align": {
+      "type": "string",
+      "title": "Section alignment",
+      "enum": [
+        "left",
+        "center",
+        "right"
+      ]
+    },
+    "level": {
+      "type": "string",
+      "title": "Level",
+      "description": "Level of headline to use",
+      "enum": [
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "p"
+      ],
+      "default": "h2"
+    },
+    "style": {
+      "type": "string",
+      "title": "Style",
+      "description": "Style of headline to show",
+      "enum": [
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "p"
+      ],
+      "default": "h2"
+    },
+    "spaceAfter": {
+      "type": "string",
+      "title": "Space after?",
+      "description": "Whether to display space after headline",
+      "enum": [
+        "minimum",
+        "small",
+        "large"
+      ],
+      "default": "small"
+    },
+    "className": {
+      "type": "string",
+      "title": "Class Name",
+      "description": "Set a custom class name"
+    },
+    "type": {
+      "const": "headline"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "level",
+    "text"
+  ]
+}

package/dist/components/headline/headline.schema.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/headline.schema.json",
+  "title": "Headline",
+  "description": "Component used for headlines",
+  "type": "object",
+  "properties": {
+    "text": {
+      "type": "string",
+      "title": "Text",
+      "description": "Text content of headline",
+      "format": "markdown"
+    },
+    "sub": {
+      "type": "string",
+      "title": "Sub",
+      "description": "Subheadline content",
+      "format": "markdown"
+    },
+    "switchOrder": {
+      "type": "boolean",
+      "title": "Switch order?",
+      "description": "Switch order of headline and subheadline",
+      "default": false
+    },
+    "align": {
+      "type": "string",
+      "title": "Section alignment",
+      "enum": ["left", "center", "right"]
+    },
+    "level": {
+      "type": "string",
+      "title": "Level",
+      "description": "Level of headline to use",
+      "enum": ["h1", "h2", "h3", "h4", "p"],
+      "default": "h2"
+    },
+    "style": {
+      "type": "string",
+      "title": "Style",
+      "description": "Style of headline to show",
+      "enum": ["h1", "h2", "h3", "h4", "p"],
+      "default": "h2"
+    },
+    "spaceAfter": {
+      "type": "string",
+      "title": "Space after?",
+      "description": "Whether to display space after headline",
+      "enum": ["minimum", "small", "large"],
+      "default": "small"
+    },
+    "className": {
+      "type": "string",
+      "title": "Class Name",
+      "description": "Set a custom class name"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["level", "text"]
+}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { HTMLAttributes, FC, PropsWithChildren } from "react";
+import { defaultRenderFn } from "@kickstartds/core/lib/core";
+import { HeadlineProps } from "../../HeadlineProps-d413a2cc.js";
+interface RenderFunctions {
+    renderContent?: typeof defaultRenderFn;
+    renderSubheadline?: typeof defaultRenderFn;
+}
+declare const Headline: import("react").ForwardRefExoticComponent<HeadlineProps & RenderFunctions & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+declare const HeadlineProvider: FC<PropsWithChildren>;
+export { Headline, HeadlineProvider };

package/dist/components/headline/index.js

@@ -0,0 +1,18 @@
+import "./headline.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { forwardRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { HeadlineContext } from '@kickstartds/base/lib/headline';
+
+const markdownRenderFn = (text) => (jsx(ReactMarkdown, { children: text, components: { p: "span" } }));
+const Headline = forwardRef(({ content, text = content, sub, align = "left", switchOrder = false, level = "h2", 
+// @ts-expect-error: Some kDS Components set the `styleAs`Props (e.g. https://github.com/kickstartDS/content/blob/next/source/storytelling/StorytellingComponent.tsx#L146)
+styleAs, style = styleAs || "h2", spaceAfter = "small", className, renderContent = markdownRenderFn, renderSubheadline = markdownRenderFn, ...props }, ref) => {
+    const TagName = level;
+    return text || sub ? (jsxs("header", { className: classnames("c-headline", `c-headline--${style}`, style !== "none" && style !== level && `c-headline--${style}`, `c-headline--align-${align}`, spaceAfter && `c-headline--space-after-${spaceAfter}`, className), ref: ref, ...props, children: [sub && switchOrder && (jsx("p", { className: "c-headline__subheadline", children: renderSubheadline(sub) })), jsx(TagName, { className: classnames("c-headline__headline"), children: renderContent(text) }), sub && !switchOrder && (jsx("p", { className: "c-headline__subheadline", children: renderSubheadline(sub) }))] })) : null;
+});
+Headline.displayName = "Headline";
+const HeadlineProvider = (props) => (jsx(HeadlineContext.Provider, { ...props, value: Headline }));
+
+export { Headline, HeadlineProvider };

package/dist/components/hero/hero.css

@@ -0,0 +1,95 @@
+:root .c-visual.c-hero {
+  --c-visual_overlay--background-size: 100%;
+  --c-visual--text-color-neutral: var(--ks-color-fg);
+  --c-visual_overlay--background: transparent;
+}
+:root .c-visual.c-hero .c-visual__box {
+  --c-visual_box--background: var(--ks-color-bg-alpha-2);
+  --c-visual_box--color: var(--ks-color-fg);
+  --c-visual_subheadline--color: var(--ks-text-color-primary);
+  --c-visual_headline--color: var(--ks-color-fg);
+  --c-visual_box--border-radius: var(--ks-border-radius-surface);
+  --c-visual_box--padding: var(--ks-spacing-inset-squish-xl);
+}
+:root .c-visual.c-hero--highlight-text.c-visual .c-visual__box {
+  --c-visual_text--font: var(--ks-font-copy-l);
+}
+:root .c-visual.c-hero--color-neutral.c-visual .c-visual__box {
+  --c-visual_text--color: var(--c-visual--text-color-neutral);
+  --c-visual_subheadline--color: var(--c-visual--text-color-neutral);
+}
+@container visual (min-width: 640px) {
+  :root .c-visual.c-hero {
+    --c-visual_overlay--background: radial-gradient(
+      50% 125% at 100% 0%,
+      var(--ks-color-primary-alpha-5) 0%,
+      var(--ks-color-bg-alpha-5) 100%
+    );
+  }
+  :root .c-visual.c-hero.c-hero--content-below {
+    --c-visual_overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
+  }
+  :root .c-visual.c-hero .c-visual__box {
+    --c-visual_box--max-width: 50rem;
+  }
+}
+
+.l-container--visual {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: visual;
+}
+
+.c-visual.c-hero .c-headline .c-headline__subheadline {
+  color: var(--c-visual_subheadline--color);
+}
+.c-visual.c-hero .c-button-group {
+  --c-button-group--vertical-gutter: var(--ks-spacing-stack-m);
+  --c-button-group--horizontal-gutter: var(--ks-spacing-inline-m);
+}
+.c-visual.c-hero.c-visual--full {
+  height: 100vh;
+}
+.c-visual.c-hero .c-visual__box {
+  max-width: var(--c-visual_box--max-width);
+  padding: var(--c-visual_box--padding);
+}
+.c-visual.c-hero .c-visual__content--indent {
+  max-width: var(--l-section--content-width-wide);
+}
+@container visual (min-width: 640px) {
+  .c-visual.c-hero.c-hero--content-below .c-visual__media {
+    position: relative;
+  }
+  .c-visual.c-hero.c-hero--content-below .c-visual__media .c-visual__image {
+    height: var(--c-visual--min-height);
+  }
+  .c-visual.c-hero.c-hero--content-below .c-visual__content {
+    padding: 0 var(--l-section--content-padding);
+    margin-top: -10%;
+    position: relative;
+  }
+  .c-visual.c-hero.c-hero--content-below .c-visual__content .c-visual__box {
+    --c-visual_box--max-width: var(--l-section--content-width-default);
+  }
+  @container visual (min-width: 640px) {
+    .c-visual.c-hero.c-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
+      height: fit-content;
+    }
+    .c-visual.c-hero.c-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image img {
+      object-fit: contain;
+      height: auto;
+    }
+  }
+  .c-visual.c-hero.c-hero--content-below.c-visual--full {
+    height: fit-content;
+  }
+  @container visual (min-width: 640px) {
+    .c-visual.c-hero.c-hero--content-below.c-visual--full .c-visual__media .c-visual__image {
+      height: fit-content;
+    }
+    .c-visual.c-hero.c-hero--content-below.c-visual--full .c-visual__media .c-visual__image img {
+      object-fit: cover;
+      height: 100vh;
+    }
+  }
+}

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

@@ -0,0 +1,166 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/hero.schema.json",
+  "title": "Hero",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "title": "Headline",
+      "description": "Headline for the visual",
+      "type": "string"
+    },
+    "sub": {
+      "title": "Module Subheadline",
+      "description": "Subheadline below the module headline",
+      "type": "string"
+    },
+    "text": {
+      "title": "Module Text",
+      "description": "Info text for the module 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"
+    },
+    "height": {
+      "title": "Height",
+      "type": "string",
+      "enum": [
+        "small",
+        "default",
+        "fullImage",
+        "fullScreen"
+      ],
+      "default": "default"
+    },
+    "textbox": {
+      "type": "boolean",
+      "title": "Textbox",
+      "default": true,
+      "description": "Toggle wether you want your text to be displayed within in box"
+    },
+    "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
+      }
+    },
+    "overlay": {
+      "title": "Grid layer",
+      "description": "Enable grid layer",
+      "type": "boolean",
+      "default": false
+    },
+    "image": {
+      "title": "Background image",
+      "description": "Sources of background images for different screen sizes",
+      "type": "object",
+      "required": [
+        "srcMobile"
+      ],
+      "properties": {
+        "srcMobile": {
+          "title": "Mobile image source",
+          "description": "Background image source for small screens",
+          "type": "string",
+          "format": "image",
+          "examples": [
+            "https://picsum.photos/seed/kdsvisual/640/270"
+          ]
+        },
+        "srcTablet": {
+          "title": "Tablet image source",
+          "description": "Background image source for medium screens",
+          "type": "string",
+          "format": "image",
+          "examples": [
+            "https://picsum.photos/seed/kdsvisual/1280/540"
+          ]
+        },
+        "srcDesktop": {
+          "title": "Desktop image source",
+          "description": "Background image source for large screens",
+          "type": "string",
+          "format": "image",
+          "examples": [
+            "https://picsum.photos/seed/kdsvisual/1920/810"
+          ]
+        },
+        "src": {
+          "title": "Optional source",
+          "description": "Override for img tag of picture element, if needed",
+          "type": "string",
+          "format": "image",
+          "examples": [
+            "https://picsum.photos/seed/kdsvisual/640/270"
+          ]
+        },
+        "indent": {
+          "title": "Image indent",
+          "description": "Choose to indent the image horizontally on small screens",
+          "type": "string",
+          "enum": [
+            "none",
+            "left",
+            "right"
+          ],
+          "default": "none"
+        },
+        "alt": {
+          "title": "Alt text",
+          "description": "Alt text to display for picture",
+          "type": "string"
+        }
+      },
+      "additionalProperties": false
+    },
+    "textPosition": {
+      "title": "Module aligment",
+      "description": "Choose the alginment of the module content",
+      "enum": [
+        "center",
+        "below",
+        "left",
+        "right"
+      ],
+      "type": "string",
+      "default": "bottom"
+    },
+    "type": {
+      "const": "hero"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/hero/hero.schema.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/hero.schema.json",
+  "title": "Hero",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "title": "Headline",
+      "description": "Headline for the visual",
+      "type": "string"
+    },
+    "sub": {
+      "title": "Module Subheadline",
+      "description": "Subheadline below the module headline",
+      "type": "string"
+    },
+    "text": {
+      "title": "Module Text",
+      "description": "Info text for the module 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"
+    },
+    "height": {
+      "title": "Height",
+      "type": "string",
+      "enum": ["small", "default", "fullImage", "fullScreen"],
+      "default": "default"
+    },
+    "textbox": {
+      "type": "boolean",
+      "title": "Textbox",
+      "default": true,
+      "description": "Toggle wether you want your text to be displayed within in box"
+    },
+    "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"
+          }
+        }
+      }
+    },
+    "overlay": {
+      "$ref": "http://schema.kickstartds.com/content/visual.schema.json#/properties/overlay"
+    },
+    "image": {
+      "$ref": "http://schema.kickstartds.com/content/visual.schema.json#/properties/media/properties/image"
+    },
+    "textPosition": {
+      "title": "Module aligment",
+      "description": "Choose the alginment of the module content",
+      "enum": ["center", "below", "left", "right"],
+      "type": "string",
+      "default": "bottom"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { HeroProps } from "../../HeroProps-cf82a16d.js";
+declare const Hero: FC<HeroProps>;
+export { Hero };

package/dist/components/hero/index.js

@@ -0,0 +1,55 @@
+import "./hero.css";
+import { jsx } from 'react/jsx-runtime';
+import { VisualContextDefault } from '@kickstartds/content/lib/visual';
+import classnames from 'classnames';
+import { Container } from '@kickstartds/core/lib/container';
+import { ButtonContext } from '@kickstartds/base/lib/button';
+import { useButtonGroup } from '../button-group/index.js';
+import 'react';
+import '@kickstartds/base/lib/button-group';
+
+const Hero = ({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, image, overlay, textbox, buttons = [], }) => {
+    const ButtonGroup = useButtonGroup();
+    return (jsx(ButtonContext.Provider
+    // @ts-expect-error
+    , { 
+        // @ts-expect-error
+        value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { className: classnames(`c-hero c-hero--content-${textPosition}`, highlightText ? `c-hero--highlight-text` : "", colorNeutral ? `c-hero--color-neutral` : ""), height: height, overlay: overlay, box: {
+                    background: textbox === true ? "solid" : "transparent",
+                    enabled: true,
+                    vertical: textPosition === "below" ? "bottom" : "center",
+                    horizontal: textPosition === "left"
+                        ? "left"
+                        : textPosition === "right"
+                            ? "right"
+                            : "center",
+                    link: {
+                        // @ts-expect-error
+                        buttons,
+                        colorNeutral,
+                        enabled: buttons.length > 0,
+                        arrangement: textPosition === "below" || textPosition === "center"
+                            ? "center"
+                            : "left",
+                    },
+                    headline: {
+                        align: textPosition === "below" || textPosition === "center"
+                            ? "center"
+                            : "left",
+                        text: headline,
+                        sub: sub,
+                        level: "h3",
+                        style: highlightText ? "h1" : undefined,
+                    },
+                    text: text,
+                }, media: {
+                    mode: "image",
+                    image: {
+                        srcMobile: image.srcMobile,
+                        srcTablet: image.srcTablet,
+                        srcDesktop: image.srcDesktop,
+                    },
+                } }) }) }));
+};
+
+export { Hero };

package/dist/components/image/image.css

@@ -0,0 +1,12 @@
+.c-image--square {
+  aspect-ratio: 1/1;
+  object-fit: cover;
+}
+.c-image--wide {
+  aspect-ratio: 4/3;
+  object-fit: cover;
+}
+.c-image--landscape {
+  aspect-ratio: 16/9;
+  object-fit: cover;
+}