@kickstartds/ds-agency-premium 1.0.1

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

@@ -0,0 +1,122 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/mosaic.schema.json",
+  "title": "Mosaic",
+  "type": "object",
+  "properties": {
+    "layout": {
+      "title": "Layout",
+      "description": "Layout of the mosaic component",
+      "type": "string",
+      "enum": [
+        "alternate",
+        "textLeft",
+        "textRight"
+      ],
+      "default": "alternate"
+    },
+    "largeHeadlines": {
+      "type": "boolean",
+      "title": "Large Headlines",
+      "description": "Make the headlines larger",
+      "default": false
+    },
+    "tiles": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "headline": {
+            "title": "Headline",
+            "description": "Headline for the tile",
+            "type": "string"
+          },
+          "sub": {
+            "title": "Module Subheadline",
+            "description": "Subheadline below the tile headline",
+            "type": "string"
+          },
+          "text": {
+            "title": "Module Text",
+            "description": "Text for tile",
+            "type": "string"
+          },
+          "image": {
+            "type": "object",
+            "properties": {
+              "src": {
+                "title": "Source",
+                "description": "Picture source",
+                "type": "string",
+                "format": "image",
+                "examples": [
+                  "img/close-up-young-business-team-working.png"
+                ]
+              },
+              "alt": {
+                "title": "Alt text",
+                "description": "Alt text to display for picture",
+                "type": "string"
+              }
+            },
+            "additionalProperties": false
+          },
+          "button": {
+            "type": "object",
+            "properties": {
+              "toggle": {
+                "title": "Button Toggle",
+                "description": "Toggle wether the Button is displayed or not",
+                "type": "boolean",
+                "default": true
+              },
+              "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"
+              },
+              "icon": {
+                "type": "string",
+                "title": "Icon",
+                "description": "Choose an icon"
+              }
+            },
+            "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"
+          },
+          "textColor": {
+            "title": "Text color",
+            "description": "Overwrite the color to use for the text content",
+            "type": "string",
+            "format": "color"
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "type": {
+      "const": "mosaic"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/mosaic/mosaic.schema.json

@@ -0,0 +1,86 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/mosaic.schema.json",
+  "title": "Mosaic",
+  "type": "object",
+  "properties": {
+    "layout": {
+      "title": "Layout",
+      "description": "Layout of the mosaic component",
+      "type": "string",
+      "enum": ["alternate", "textLeft", "textRight"],
+      "default": "alternate"
+    },
+    "largeHeadlines": {
+      "type": "boolean",
+      "title": "Large Headlines",
+      "description": "Make the headlines larger",
+      "default": false
+    },
+    "tiles": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "headline": {
+            "title": "Headline",
+            "description": "Headline for the tile",
+            "type": "string"
+          },
+          "sub": {
+            "title": "Module Subheadline",
+            "description": "Subheadline below the tile headline",
+            "type": "string"
+          },
+          "text": {
+            "title": "Module Text",
+            "description": "Text for tile",
+            "type": "string"
+          },
+          "image": {
+            "type": "object",
+            "properties": {
+              "src": {
+                "$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/src"
+              },
+              "alt": {
+                "$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/alt"
+              }
+            }
+          },
+          "button": {
+            "type": "object",
+            "properties": {
+              "toggle": {
+                "title": "Button Toggle",
+                "description": "Toggle wether the Button is displayed or not",
+                "type": "boolean",
+                "default": true
+              },
+              "label": {
+                "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/label"
+              },
+              "target": {
+                "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
+              },
+              "icon": {
+                "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/icon"
+              }
+            },
+            "additionalProperties": false
+          },
+          "backgroundColor": {
+            "$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/backgroundColor"
+          },
+          "backgroundImage": {
+            "$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/backgroundImage"
+          },
+          "textColor": {
+            "$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/box/properties/textColor"
+          }
+        }
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/nav-main/index.d.ts

@@ -0,0 +1,26 @@
+import { 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.
+ */
+import { PictureProps } from "@kickstartds/base/lib/picture/typing";
+interface NavMainProps {
+    /**
+     * Referenced component PictureProps
+     */
+    logo: PictureProps;
+    logoHref?: string;
+    items?: {
+        href: string;
+        label: string;
+    }[];
+}
+declare const NavToggleComponent: FC;
+declare const NavMainItem: FC<{
+    label: string;
+    href: string;
+}>;
+declare const NavMain: FC<NavMainProps>;
+export { NavToggleComponent, NavMainItem, NavMain };

package/dist/components/nav-main/index.js

@@ -0,0 +1,17 @@
+import "./nav-main.css";
+import "./nav-toggle.css";
+import { createElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Link } from '@kickstartds/base/lib/link';
+import { Picture } from '@kickstartds/base/lib/picture';
+import './js/NavToggle.client.js';
+import './js/navMainEvents.client.js';
+import '@kickstartds/core/lib/component';
+import './js/body.client.js';
+import '@kickstartds/core/lib/core';
+
+const NavToggleComponent = () => (jsxs("button", { type: "button", className: "nav-toggle", id: "toggle-sidebar", "aria-controls": "nav-main", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "nav-toggle__label", children: "toggle navigation" }), jsx("span", { className: "nav-toggle__icon", children: jsx("span", { className: "nav-toggle__icon__middle" }) })] }));
+const NavMainItem = ({ label, href, }) => (jsx("li", { className: "c-nav-main__item", children: jsx(Link, { className: "c-nav-main__link", href: href, children: label }) }));
+const NavMain = ({ logo, logoHref = "/", items }) => items && items.length > 0 ? (jsxs("div", { className: "c-nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { className: "c-nav-main", id: "nav-main", "aria-label": "Hauptnavigation", children: [jsx(Link, { className: "c-nav-main__logo", href: logoHref, children: jsx(Picture, { ...logo }) }), jsx("ul", { className: "c-nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, key: item.href + item.label }))) })] })] })) : null;
+
+export { NavMain, NavMainItem, NavToggleComponent };

package/dist/components/nav-main/js/NavToggle.client.d.ts

@@ -0,0 +1,16 @@
+declare class NavToggle {
+    static identifier: string;
+    static actions: {
+        open: string;
+        close: string;
+    };
+    constructor(element: any);
+    isOpen: boolean;
+    nav: HTMLElement;
+    navMainDropdowns: Element[];
+    open(): void;
+    close(): void;
+    onclick(): void;
+    onkeydown(event: any): void;
+}
+export { NavToggle as default };

package/dist/components/nav-main/js/NavToggle.client.js

@@ -0,0 +1,57 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+import { navMainEvents } from './navMainEvents.client.js';
+import body from './body.client.js';
+import '@kickstartds/core/lib/core';
+
+class NavToggle extends Component {
+    constructor(element) {
+        super(element);
+        this.isOpen = this.element.getAttribute("aria-expanded") === "true";
+        this.nav = document.getElementById(this.element.getAttribute("aria-controls"));
+        this.navMainDropdowns = [...document.querySelectorAll("#nav-main details")];
+        this.element.addEventListener("click", this);
+        window._ks.radio.on(navMainEvents.change, (_, desktop) => {
+            if (desktop) {
+                this.close();
+            }
+        });
+        window._ks.radio.on("location.change", () => this.close());
+    }
+    open() {
+        this.isOpen = true;
+        body.lock();
+        this.element.setAttribute("aria-expanded", this.isOpen);
+        this.nav.focus();
+        window.addEventListener("keydown", this);
+    }
+    close() {
+        this.isOpen = false;
+        body.reset();
+        this.element.setAttribute("aria-expanded", this.isOpen);
+        this.element.focus();
+        window.removeEventListener("keydown", this);
+    }
+    onclick() {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    onkeydown(event) {
+        if (event.key === "Escape") {
+            if (this.navMainDropdowns.every((dropdown) => !dropdown.hasAttribute("open"))) {
+                this.close();
+            }
+        }
+    }
+}
+NavToggle.identifier = "base.nav-toggle";
+NavToggle.actions = {
+    open: `${NavToggle.identifier}.open`,
+    close: `${NavToggle.identifier}.close`,
+};
+define(NavToggle.identifier, NavToggle);
+
+export { NavToggle as default };

package/dist/components/nav-main/js/body.client.d.ts

@@ -0,0 +1,5 @@
+declare namespace _default {
+    function lock(): void;
+    function reset(): void;
+}
+export { _default as default };

package/dist/components/nav-main/js/body.client.js

@@ -0,0 +1,41 @@
+const cache = new Map();
+const elements = [
+    {
+        selector: "body",
+        property: "paddingRight",
+    },
+    {
+        selector: ".nav-toggle",
+        property: "marginRight",
+    },
+    {
+        selector: ".kds-header__wrap > .l-container--section",
+        property: "paddingRight",
+    },
+];
+function setStyle(value) {
+    elements.forEach(({ selector, property, negative }) => {
+        if (!cache.has(selector)) {
+            const element = document.querySelector(selector);
+            if (!element) {
+                return;
+            }
+            cache.set(selector, element);
+        }
+        cache.get(selector).style[property] = `${value && negative ? "-" : ""}${value}`;
+    });
+}
+var body = {
+    lock() {
+        setStyle(`${window.innerWidth - document.body.offsetWidth}px`);
+        document.documentElement.classList.add("overlay-open");
+    },
+    reset() {
+        setStyle("");
+        requestAnimationFrame(() => {
+            document.documentElement.classList.remove("overlay-open");
+        });
+    },
+};
+
+export { body as default };

package/dist/components/nav-main/js/navMainEvents.client.d.ts

@@ -0,0 +1,5 @@
+declare namespace navMainEvents {
+    let change: string;
+}
+declare function isDesktop(): any;
+export { navMainEvents, isDesktop };

package/dist/components/nav-main/js/navMainEvents.client.js

@@ -0,0 +1,13 @@
+import { inBrowser } from '@kickstartds/core/lib/core';
+
+const navMainEvents = {
+    change: "nav-main.change",
+};
+let mm;
+if (inBrowser) {
+    mm = window.matchMedia("(min-width: 62em)");
+    mm.addEventListener("change", (event) => window._ks.radio.emit(navMainEvents.change, event.matches));
+}
+const isDesktop = () => mm.matches;
+
+export { isDesktop, navMainEvents };

package/dist/components/nav-main/nav-main.css

@@ -0,0 +1,170 @@
+.c-nav-main {
+  --c-nav-main--background: linear-gradient(
+    125deg,
+    var(--ks-background-color-default),
+    var(--ks-color-primary-to-bg-6)
+  );
+  --c-nav-main--color: var(--ks-color-fg);
+  --c-nav-main--color-hover: var(--ks-color-fg-alpha-4);
+  --c-nav-main--color-active: var(--ks-color-fg);
+  --c-nav-main--font: var(--ks-font-interface-l);
+  --c-nav-main--font-weight: var(--ks-font-weight-semi-bold);
+  --c-nav-main--font-weight-active: var(--ks-font-weight-bold);
+  --c-nav-main--padding: 0.5rem 0;
+  --c-nav-main-link--padding: 0.35em 0;
+  --c-nav-main--shadow: 50px 0px 50px 50px rgba(0, 0, 0, 0.539);
+}
+@media (min-width: 62rem) {
+  .c-nav-main {
+    --c-nav-main-link--padding: 0 0.75em;
+    --c-nav-main--font: var(--ks-font-interface-m);
+    --c-nav-main--padding: 1px;
+  }
+}
+
+.c-nav-main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.c-nav-main ul {
+  /* critical:start */
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  /* critical:end */
+}
+.c-nav-main ul li {
+  display: block;
+  margin: 0;
+}
+.c-nav-main__item {
+  position: relative;
+}
+.c-nav-main__item--active .nav-main__link {
+  color: var(--c-nav-main--color-active);
+  font-weight: var(--c-nav-main--font-weight-active);
+}
+.c-nav-main__list:hover .c-nav-main__link {
+  color: var(--c-nav-main--color-hover);
+}
+.c-nav-main a.c-nav-main__link {
+  /* critical:start */
+  font: var(--c-nav-main--font);
+  font-weight: var(--c-nav-main--font-weight);
+  color: var(--c-nav-main--color);
+  position: relative;
+  display: block;
+  padding: var(--c-nav-main-link--padding);
+  /* critical:end */
+}
+.c-nav-main a.c-nav-main__link:hover {
+  color: var(--c-nav-main--color);
+}
+.c-nav-main a.c-nav-main__link:active {
+  color: var(--c-nav-main--color-active);
+}
+.c-nav-main__logo {
+  padding: var(--g-header--spacing-v) 0;
+}
+.c-nav-main__logo img {
+  height: var(--g-logo--height);
+  width: auto;
+}
+.c-nav-main__wrap {
+  flex-grow: 0;
+  flex-shrink: 1;
+}
+@media (max-width: 62rem) {
+  .c-nav-main {
+    /* critical:start */
+    left: -100%;
+    /* critical:end */
+    height: 100vh;
+    overflow: hidden;
+    position: fixed;
+    width: 77vw;
+    max-width: 23rem;
+    transition: all var(--ks-duration-slow);
+    padding: 0 var(--l-section--content-padding);
+    right: 0;
+    bottom: 0;
+    top: 0;
+    overflow-y: auto;
+    background: var(--c-nav-main--background);
+    backface-visibility: hidden;
+    -webkit-overflow-scrolling: touch;
+    box-shadow: 20px 0px 30px rgba(0, 0, 0, 0);
+  }
+  .c-nav-main__item--icon {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(100%);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+  .overlay-open .c-nav-main {
+    left: 0;
+    box-shadow: var(--c-nav-main--shadow);
+  }
+  .c-nav-main > .c-nav-main__logo {
+    margin: var(--g-header-spacing);
+  }
+  .c-nav-main ul.nav-main__list {
+    padding-top: calc(var(--g-header-spacing-v) - var(--ks-spacing-s));
+  }
+  .c-nav-main ul.nav-main__list .nav-main--button {
+    margin-left: var(--g-header-spacing-h);
+    margin-top: var(--g-header-spacing-v);
+  }
+  .c-nav-main ul.nav-main__list .nav-main--button .c-button {
+    --c-button--font: var(--ks-font-interface-s);
+  }
+  .c-nav-main ul.nav-main__list .nav-main--button .c-button .c-button__content {
+    --c-button--padding: 0.4rem 1rem;
+  }
+}
+@media (min-width: 62rem) {
+  .c-nav-main {
+    /* critical:start */
+    /* critical:end */
+  }
+  .c-nav-main > .c-nav-main__logo {
+    display: none;
+  }
+  .c-nav-main .c-button--wrapper {
+    margin-left: var(--ks-spacing-inline-xs);
+  }
+  .c-nav-main__wrap {
+    display: flex;
+    align-items: center;
+  }
+  .c-nav-main__list {
+    /* critical:start */
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    /* critical:end */
+  }
+  .c-nav-main__list .nav-main--button .c-button {
+    --c-button--font: var(--ks-font-interface-s);
+  }
+  .c-nav-main__list .nav-main--button .c-button span {
+    font-size: 98%;
+  }
+  .c-nav-main__item {
+    /* critical:start */
+    flex-shrink: 0;
+    /* critical:end */
+    outline: 0;
+  }
+}
+
+.nav-main-toggle[aria-expanded=true] + .nav-main {
+  display: block;
+}