@kickstartds/ds-agency-premium 1.4.0--canary.12.465.0 → 1.4.0--canary.14.680.0

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

@@ -0,0 +1,124 @@
+.dsa-nav-flyout {
+  --dsa-nav-flyout--padding: 0 var(--ks-spacing-inset-xl);
+  --dsa-nav-flyout--max-width: 30rem;
+  --dsa-nav-flyout--background: linear-gradient(
+    125deg,
+    var(--ks-background-color-default),
+    var(--ks-color-primary-to-bg-6)
+  );
+  --dsa-nav-flyout--shadow: 20px 0px 30px var(--ks-color-fg-inverted-base);
+  --dsa-nav-flyout__label--color: var(--ks-color-fg);
+  --dsa-nav-flyout__label--color_hover: var(--ks-text-color-interface-interactive-hover);
+  --dsa-nav-flyout__label--color_active: var(--ks-text-color-interface-interactive-active);
+  --dsa-nav-flyout__label--font: var(--ks-font-interface-l);
+  --dsa-nav-flyout__label--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-nav-flyout__label--font-weight_active: var(--ks-font-weight-bold);
+  --dsa-nav-flyout__label--padding: 0.25em 0;
+  --dsa-nav-flyout__label_dimmed--opacity: 0.6;
+  --dsa-nav-flyout__label__icon--size: 1.5em;
+  --dsa-nav-flyout__sublist--padding: 0.25em 0 0.5em 0.75em;
+  --dsa-nav-flyout__sublist__label--color: var(--ks-color-fg);
+  --dsa-nav-flyout__sublist__label--color_hover: var(--ks-text-color-interface-interactive-hover);
+  --dsa-nav-flyout__sublist__label--color_active: var(--ks-text-color-interface-interactive-active);
+  --dsa-nav-flyout__sublist__label--font: var(--ks-font-interface-m);
+  --dsa-nav-flyout__sublist__label--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-nav-flyout__sublist__label--padding: 0.25em 0;
+}
+
+.dsa-nav-flyout {
+  display: none;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-m);
+  left: -100%;
+  height: 100vh;
+  overflow: hidden;
+  position: fixed;
+  width: 100vw;
+  transition: all var(--ks-duration-slow);
+  padding: var(--dsa-nav-flyout--padding);
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow-y: auto;
+  background: var(--dsa-nav-flyout--background);
+  backface-visibility: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+@media (max-width: 62rem) {
+  .dsa-nav-flyout {
+    display: flex;
+  }
+}
+@media (min-width: 36em) {
+  .dsa-nav-flyout {
+    max-width: var(--dsa-nav-flyout--max-width);
+  }
+}
+.dsa-nav-flyout ul {
+  padding: 0;
+  margin: 0;
+}
+.overlay-open .dsa-nav-flyout {
+  left: 0;
+  box-shadow: var(--dsa-nav-flyout--shadow);
+}
+.dsa-nav-flyout .dsa-nav-flyout__logo {
+  margin-top: var(--dsa-header--spacing-vertical);
+  margin-bottom: var(--dsa-header--spacing-vertical);
+}
+.dsa-nav-flyout .dsa-nav-flyout__list {
+  padding-top: calc(var(--dsa-header--spacing-vertical) - var(--ks-spacing-s));
+}
+.dsa-nav-flyout .dsa-nav-flyout__list:hover .dsa-nav-flyout__item:not(:hover, .dsa-nav-flyout__item--active) .dsa-nav-flyout__label {
+  opacity: var(--dsa-nav-flyout__label_dimmed--opacity);
+}
+.dsa-nav-flyout .dsa-nav-flyout__item {
+  flex-shrink: 0;
+  position: relative;
+  outline: 0;
+}
+.dsa-nav-flyout .dsa-nav-flyout__item--active.dsa-nav-flyout__item .dsa-nav-flyout__label {
+  font-weight: var(--dsa-nav-flyout__label--font-weight_active);
+}
+.dsa-nav-flyout .dsa-nav-flyout__item:hover > .dsa-nav-sublist {
+  display: flex;
+}
+.dsa-nav-flyout .dsa-nav-flyout__label {
+  display: flex;
+  font: var(--dsa-nav-flyout__label--font);
+  font-weight: var(--dsa-nav-flyout__label--font-weight);
+  color: var(--dsa-nav-flyout__label--color);
+  height: 100%;
+  align-items: center;
+  padding: var(--dsa-nav-flyout__label--padding);
+}
+.dsa-nav-flyout .dsa-nav-flyout__label:hover, .dsa-nav-flyout .dsa-nav-flyout__label:focus {
+  color: var(--dsa-nav-flyout__label--color_hover);
+  opacity: 1;
+}
+.dsa-nav-flyout .dsa-nav-flyout__label__icon {
+  width: var(--dsa-nav-flyout__label__icon--size);
+  height: var(--dsa-nav-flyout__label__icon--size);
+}
+.dsa-nav-flyout .dsa-nav-flyout__sublist {
+  padding: var(--dsa-nav-flyout__sublist--padding);
+  font: var(--dsa-nav-flyout__sublist__label--font);
+}
+.dsa-nav-flyout .dsa-nav-flyout__sublist .dsa-nav-flyout__label {
+  font: inherit;
+  color: var(--dsa-nav-flyout__sublist__label--color);
+  padding: var(--dsa-nav-flyout__sublist__label--padding);
+}
+.dsa-nav-flyout .dsa-nav-flyout__label:not(.dsa-nav-flyout__link) {
+  cursor: default;
+}
+.dsa-nav-flyout ul {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.dsa-nav-flyout ul li {
+  display: block;
+  margin: 0;
+}

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

@@ -5,24 +5,55 @@ import { FC } from "react";
  * 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";
+import { LogoProps } from "../../LogoProps-01796f0a.js";
+/**
+ * Toggle the inversion of the flyout navigation
+ */
+type FlyoutInverted = boolean;
+/**
+ * Toggle the inversion of the dropdown navigation
+ */
+type DropdownInverted = boolean;
+/**
+ * Toggle the CTA
+ */
+type ToggleCTA = boolean;
+/**
+ * Text content to display inside the button
+ */
+type Label = string;
+/**
+ * Target that should be linked, makes the button behave like a link semantically
+ */
+type Target = string;
 interface NavMainProps {
     /**
-     * Referenced component PictureProps
+     * Referenced component LogoProps
      */
-    logo: PictureProps;
-    logoHref?: string;
+    logo: LogoProps;
+    flyoutInverted?: FlyoutInverted;
+    dropdownInverted?: DropdownInverted;
     items?: {
         href: string;
         label: string;
         active?: boolean;
+        id?: string;
+        items?: {
+            href?: string;
+            label?: string;
+            active?: boolean;
+            id?: string;
+        }[];
     }[];
+    cta?: CTA;
+}
+/**
+ * Add a CTA to the Navigation
+ */
+interface CTA {
+    toggle?: ToggleCTA;
+    label?: Label;
+    target?: Target;
 }
-declare const NavToggleComponent: FC;
-declare const NavMainItem: FC<{
-    label: string;
-    href: string;
-    active: boolean;
-}>;
 declare const NavMain: FC<NavMainProps>;
-export { NavToggleComponent, NavMainItem, NavMain };
+export { NavMain };

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

@@ -1,18 +1,19 @@
-import "./nav-main.css";
-import "./nav-toggle.css";
-import { createElement } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import classnames from 'classnames';
-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 '../nav/js/NavToggle.client.js';
+import '../nav/js/navMainEvents.client.js';
+import { NavToggleComponent } from '../nav-toggle/index.js';
+import { NavTopbar } from '../nav-topbar/index.js';
+import { NavFlyout } from '../nav-flyout/index.js';
 import '@kickstartds/core/lib/component';
-import './js/body.client.js';
+import '../nav/js/body.client.js';
 import '@kickstartds/core/lib/core';
+import 'classnames';
+import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/icon';
+import '../nav-dropdown/index.js';
+import '../logo/index.js';
+import '@kickstartds/base/lib/picture';
 
-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, active }) => (jsx("li", { className: classnames("nav-main__item", active === true ? "nav-main__item--active" : ""), children: jsx(Link, { className: "nav-main__link", href: href, children: label }) }));
-const NavMain = ({ logo, logoHref = "/", items }) => items && items.length > 0 ? (jsxs("div", { className: "nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { className: classnames("nav-main", items.some((item) => item.active) ? "nav-main--active" : ""), id: "nav-main", "aria-label": "Hauptnavigation", children: [jsx(Link, { className: "nav-main__logo", href: logoHref, children: jsx(Picture, { ...logo }) }), jsx("ul", { className: "nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] })] })) : null;
+const NavMain = ({ logo, items, flyoutInverted, dropdownInverted, }) => items && items.length > 0 ? (jsxs("div", { className: "dsa-nav-main", children: [jsx(NavToggleComponent, {}), jsx(NavTopbar, { items: items, dropdownInverted: dropdownInverted }), jsx(NavFlyout, { items: items, inverted: flyoutInverted, logo: logo })] })) : null;
 
-export { NavMain, NavMainItem, NavToggleComponent };
+export { NavMain };

package/dist/components/nav-main/nav-main.schema.dereffed.json

@@ -6,23 +6,19 @@
   "properties": {
     "logo": {
       "$schema": "http://json-schema.org/draft-07/schema#",
-      "$id": "http://schema.kickstartds.com/base/picture.schema.json",
-      "title": "Picture",
-      "description": "Base component to display a picture",
+      "$id": "http://schema.mydesignsystem.com/logo.schema.json",
+      "title": "Logo",
       "type": "object",
       "properties": {
         "src": {
           "title": "Source",
           "description": "Picture source",
           "type": "string",
-          "format": "image",
-          "examples": [
-            "https://picsum.photos/seed/kdspicture/300/300"
-          ]
+          "format": "image"
         },
-        "srcSet": {
-          "title": "Picture sourceset",
-          "description": "Use a srcSet to display picture",
+        "srcInverted": {
+          "title": "Source",
+          "description": "Picture source",
           "type": "string",
           "format": "image"
         },
@@ -31,6 +27,16 @@
           "description": "Alt text to display for picture",
           "type": "string"
         },
+        "homepageHref": {
+          "type": "string",
+          "format": "uri",
+          "default": "/"
+        },
+        "inverted": {
+          "type": "boolean",
+          "title": "Inverted",
+          "description": "Toggle wether the inverted or default version of the logo is being displayed"
+        },
         "width": {
           "title": "Width",
           "description": "Width of the picture",
@@ -51,83 +57,26 @@
         },
         "className": {
           "title": "Additional Classes",
-          "description": "Add additional css classes that should be applied to the button",
-          "type": "string"
-        },
-        "component": {
-          "title": "`ks-component` attribute",
-          "description": "Optional custom component identifier",
-          "type": "string"
-        },
-        "id": {
-          "title": "Id",
-          "description": "Add id attribute to the image",
-          "type": "string"
-        },
-        "itemProp": {
-          "title": "`itemprop` attribute",
-          "description": "Define an itemprop attribute for the picture",
-          "type": "string"
-        },
-        "style": {
-          "title": "`style` attribute",
-          "description": "Define a style attribute for the picture",
-          "type": "string"
-        },
-        "noscript": {
-          "title": "Noscript",
-          "description": "Render noscript fallback",
-          "type": "boolean",
-          "default": true
-        },
-        "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",
+          "description": "Add additional css classes that should be applied to the logo",
           "type": "string"
         },
         "type": {
-          "const": "picture"
+          "const": "logo"
         }
       },
       "additionalProperties": false
     },
-    "logoHref": {
-      "type": "string",
-      "format": "uri",
-      "default": "/"
+    "flyoutInverted": {
+      "type": "boolean",
+      "title": "Flyout Inverted",
+      "description": "Toggle the inversion of the flyout navigation",
+      "default": false
+    },
+    "dropdownInverted": {
+      "type": "boolean",
+      "title": "Dropdown Inverted",
+      "description": "Toggle the inversion of the dropdown navigation",
+      "default": false
     },
     "items": {
       "type": "array",
@@ -143,6 +92,31 @@
           },
           "active": {
             "type": "boolean"
+          },
+          "id": {
+            "type": "string"
+          },
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "href": {
+                  "type": "string",
+                  "format": "uri"
+                },
+                "label": {
+                  "type": "string"
+                },
+                "active": {
+                  "type": "boolean"
+                },
+                "id": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            }
           }
         },
         "additionalProperties": false,
@@ -153,19 +127,42 @@
       },
       "examples": [
         [
-          {
-            "label": "Nav Item",
-            "href": "#"
-          },
           {
             "label": "Active Item",
             "href": "#",
             "active": true
           },
           {
-            "label": "Another Item",
+            "label": "Navigation Item",
             "href": "#"
           },
+          {
+            "label": "Dropdown",
+            "href": "#",
+            "items": [
+              {
+                "label": "Level 2 Item",
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "Active Item",
+                "active": true,
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "An Item with a longer Label",
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "And One last one",
+                "href": "#",
+                "id": ""
+              }
+            ]
+          },
           {
             "label": "One more Item",
             "href": "#"
@@ -177,6 +174,34 @@
         ]
       ]
     },
+    "cta": {
+      "type": "object",
+      "title": "CTA",
+      "description": "Add a CTA to the Navigation",
+      "properties": {
+        "toggle": {
+          "title": "Toggle CTA",
+          "description": "Toggle the CTA",
+          "type": "boolean",
+          "default": false
+        },
+        "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"
+        }
+      },
+      "additionalProperties": false
+    },
     "type": {
       "const": "nav-main"
     }

package/dist/components/nav-main/nav-main.schema.json

@@ -5,12 +5,19 @@
   "type": "object",
   "properties": {
     "logo": {
-      "$ref": "http://schema.kickstartds.com/base/picture.schema.json"
+      "$ref": "http://schema.mydesignsystem.com/logo.schema.json"
     },
-    "logoHref": {
-      "type": "string",
-      "format": "uri",
-      "default": "/"
+    "flyoutInverted": {
+      "type": "boolean",
+      "title": "Flyout Inverted",
+      "description": "Toggle the inversion of the flyout navigation",
+      "default": false
+    },
+    "dropdownInverted": {
+      "type": "boolean",
+      "title": "Dropdown Inverted",
+      "description": "Toggle the inversion of the dropdown navigation",
+      "default": false
     },
     "items": {
       "type": "array",
@@ -19,26 +26,62 @@
         "properties": {
           "href": { "type": "string", "format": "uri" },
           "label": { "type": "string" },
-          "active": { "type": "boolean" }
+          "active": { "type": "boolean" },
+          "id": { "type": "string" },
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "href": { "type": "string", "format": "uri" },
+                "label": { "type": "string" },
+                "active": { "type": "boolean" },
+                "id": { "type": "string" }
+              }
+            }
+          }
         },
         "additionalProperties": false,
         "required": ["href", "label"]
       },
       "examples": [
         [
-          {
-            "label": "Nav Item",
-            "href": "#"
-          },
           {
             "label": "Active Item",
             "href": "#",
             "active": true
           },
           {
-            "label": "Another Item",
+            "label": "Navigation Item",
             "href": "#"
           },
+          {
+            "label": "Dropdown",
+            "href": "#",
+            "items": [
+              {
+                "label": "Level 2 Item",
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "Active Item",
+                "active": true,
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "An Item with a longer Label",
+                "href": "#",
+                "id": ""
+              },
+              {
+                "label": "And One last one",
+                "href": "#",
+                "id": ""
+              }
+            ]
+          },
           {
             "label": "One more Item",
             "href": "#"
@@ -49,6 +92,25 @@
           }
         ]
       ]
+    },
+    "cta": {
+      "type": "object",
+      "title": "CTA",
+      "description": "Add a CTA to the Navigation",
+      "properties": {
+        "toggle": {
+          "title": "Toggle CTA",
+          "description": "Toggle the CTA",
+          "type": "boolean",
+          "default": false
+        },
+        "label": {
+          "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/label"
+        },
+        "target": {
+          "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
+        }
+      }
     }
   },
   "additionalProperties": false,

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

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const NavToggleComponent: FC;
+export { NavToggleComponent };

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

@@ -0,0 +1,6 @@
+import "./nav-toggle.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const NavToggleComponent = () => (jsxs("button", { type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "dsa-nav-main", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "dsa-nav-toggle__label", children: "toggle navigation" }), jsx("span", { className: "dsa-nav-toggle__icon", children: jsx("span", { className: "dsa-nav-toggle__icon__middle" }) })] }));
+
+export { NavToggleComponent };