@kickstartds/ds-agency-premium 1.4.0--canary.12.465.0 → 1.4.0--canary.14.677.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 };

package/dist/components/{nav-main → nav-toggle}/nav-toggle.css

@@ -1,4 +1,4 @@
-.nav-toggle {
+.dsa-nav-toggle {
   --nav-toggle--color: var(--ks-text-color-default);
   --nav-toggle--color_open: var(--ks-text-color-default);
   --nav-toggle_floating--color: var(--ks-text-color-interface-interactive);
@@ -9,7 +9,7 @@ html.overlay-open {
   overflow: hidden;
 }
 
-button.nav-toggle {
+button.dsa-nav-toggle {
   display: block;
   position: relative;
   right: 0;
@@ -20,17 +20,17 @@ button.nav-toggle {
   transform: translateX(var(--dsa-header--spacing-horizontal));
   --nav-toggle__icon-bar--offset: 14px;
 }
-@media (min-width: 42em) {
-  button.nav-toggle {
+@media (min-width: 48em) {
+  button.dsa-nav-toggle {
     --nav-toggle__icon-bar--offset: 18px;
   }
 }
 @media (min-width: 62em) {
-  button.nav-toggle {
+  button.dsa-nav-toggle {
     display: none;
   }
 }
-button.nav-toggle .nav-toggle__label {
+button.dsa-nav-toggle .dsa-nav-toggle__label {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(100%);
@@ -41,7 +41,7 @@ button.nav-toggle .nav-toggle__label {
   white-space: nowrap;
   width: 1px;
 }
-button.nav-toggle .nav-toggle__icon {
+button.dsa-nav-toggle .dsa-nav-toggle__icon {
   position: relative;
   display: block;
   cursor: pointer;
@@ -51,53 +51,53 @@ button.nav-toggle .nav-toggle__icon {
   transition: inherit;
   color: var(--nav-toggle--color);
 }
-.dsa-header--floating button.nav-toggle .nav-toggle__icon {
+.dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle_floating--color);
 }
-@media (min-width: 40rem) {
-  button.nav-toggle .nav-toggle__icon {
+@media (min-width: 40em) {
+  button.dsa-nav-toggle .dsa-nav-toggle__icon {
     transform: scale(0.8) translate(2.5%, 2.5%);
   }
 }
-.overlay-open button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling button.nav-toggle .nav-toggle__icon {
+.overlay-open button.dsa-nav-toggle .dsa-nav-toggle__icon, .overlay-open .header-is-scrolling button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle--color_open);
 }
-.overlay-open .dsa-header--floating button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling .dsa-header--floating button.nav-toggle .nav-toggle__icon {
+.overlay-open .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon, .overlay-open .header-is-scrolling .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle_floating--color_open);
 }
-.header-is-scrolling-up button.nav-toggle .nav-toggle__icon {
+.header-is-scrolling-up button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle--color_open);
 }
-button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   content: "";
 }
-button.nav-toggle .nav-toggle__icon .nav-toggle__icon__middle, button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle, button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   position: absolute;
   width: 100%;
   height: 3px;
   background-color: currentColor;
 }
-button.nav-toggle .nav-toggle__icon .nav-toggle__icon__middle {
+button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle {
   top: 50%;
   margin-top: -1.5px;
 }
-button.nav-toggle .nav-toggle__icon::before {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::before {
   top: 2px;
   transition: top 150ms ease 150ms, transform ease 150ms;
 }
-button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   bottom: 2px;
   transition: bottom 150ms ease 150ms, transform ease 150ms;
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon__middle {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon__middle {
   display: none;
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon::before {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon::before {
   top: var(--nav-toggle__icon-bar--offset);
   transition: top ease 150ms, transform 150ms ease 150ms;
   transform: rotate(-45deg);
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon::after {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon::after {
   bottom: var(--nav-toggle__icon-bar--offset);
   transition: bottom ease 150ms, transform 150ms ease 150ms;
   transform: rotate(45deg);

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const NavTopbar: ({ items, dropdownInverted }: {
+    items: any;
+    dropdownInverted: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export { NavTopbar };

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

@@ -0,0 +1,12 @@
+import "./nav-topbar.css";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Link } from '@kickstartds/base/lib/link';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { NavDropdown } from '../nav-dropdown/index.js';
+
+const NavTopbar = ({ items, dropdownInverted }) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: jsx("ul", { className: "dsa-nav-topbar__list", children: items.map(({ label, href, id, active, items: subItems }) => {
+            return (jsxs("li", { className: classnames("dsa-nav-topbar__item", active && "dsa-nav-topbar__item--active", subItems?.length && "dsa-nav-topbar__item--dropdown"), children: [subItems?.length ? (jsxs("span", { tabIndex: 0, className: "dsa-nav-topbar__label", children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__label__icon", icon: "chevron-down" })) : ("")] })) : (jsx(Link, { href: href, className: `dsa-nav-topbar__label dsa-nav-topbar__link`, children: label })), subItems?.length ? (jsx(NavDropdown, { items: subItems, inverted: dropdownInverted })) : null] }, id));
+        }) }) })) : null;
+
+export { NavTopbar };