@kickstartds/ds-agency-premium 1.7.0--canary.46.1927.0 → 1.7.0--canary.43.2352.0

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

@@ -59,9 +59,6 @@
           "title": "Additional Classes",
           "description": "Add additional css classes that should be applied to the logo",
           "type": "string"
-        },
-        "type": {
-          "const": "logo"
         }
       },
       "additionalProperties": false
@@ -83,7 +80,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "href": {
+          "url": {
             "type": "string",
             "format": "uri"
           },
@@ -98,7 +95,7 @@
             "items": {
               "type": "object",
               "properties": {
-                "href": {
+                "url": {
                   "type": "string",
                   "format": "uri"
                 },
@@ -115,7 +112,7 @@
         },
         "additionalProperties": false,
         "required": [
-          "href",
+          "url",
           "label"
         ]
       },
@@ -123,43 +120,43 @@
         [
           {
             "label": "Active Item",
-            "href": "#",
+            "url": "#",
             "active": true
           },
           {
             "label": "Navigation Item",
-            "href": "#"
+            "url": "#"
           },
           {
             "label": "Dropdown",
-            "href": "#",
+            "url": "#",
             "items": [
               {
                 "label": "Level 2 Item",
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "Active Item",
                 "active": true,
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "An Item with a longer Label",
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "And One last one",
-                "href": "#"
+                "url": "#"
               }
             ]
           },
           {
             "label": "One more Item",
-            "href": "#"
+            "url": "#"
           },
           {
             "label": "Last Item",
-            "href": "#"
+            "url": "#"
           }
         ]
       ]
@@ -183,17 +180,14 @@
             "Book a meeting"
           ]
         },
-        "target": {
+        "url": {
           "type": "string",
-          "title": "Target",
-          "description": "Target that should be linked, makes the button behave like a link semantically",
+          "title": "URL",
+          "description": "The URL to link to when the button is clicked",
           "format": "uri"
         }
       },
       "additionalProperties": false
-    },
-    "type": {
-      "const": "nav-main"
     }
   },
   "additionalProperties": false,

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

@@ -24,7 +24,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "href": { "type": "string", "format": "uri" },
+          "url": { "type": "string", "format": "uri" },
           "label": { "type": "string" },
           "active": { "type": "boolean" },
           "items": {
@@ -32,7 +32,7 @@
             "items": {
               "type": "object",
               "properties": {
-                "href": { "type": "string", "format": "uri" },
+                "url": { "type": "string", "format": "uri" },
                 "label": { "type": "string" },
                 "active": { "type": "boolean" }
               }
@@ -40,49 +40,49 @@
           }
         },
         "additionalProperties": false,
-        "required": ["href", "label"]
+        "required": ["url", "label"]
       },
       "examples": [
         [
           {
             "label": "Active Item",
-            "href": "#",
+            "url": "#",
             "active": true
           },
           {
             "label": "Navigation Item",
-            "href": "#"
+            "url": "#"
           },
           {
             "label": "Dropdown",
-            "href": "#",
+            "url": "#",
             "items": [
               {
                 "label": "Level 2 Item",
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "Active Item",
                 "active": true,
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "An Item with a longer Label",
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "And One last one",
-                "href": "#"
+                "url": "#"
               }
             ]
           },
           {
             "label": "One more Item",
-            "href": "#"
+            "url": "#"
           },
           {
             "label": "Last Item",
-            "href": "#"
+            "url": "#"
           }
         ]
       ]
@@ -101,8 +101,8 @@
         "label": {
           "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/label"
         },
-        "target": {
-          "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
+        "url": {
+          "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/url"
         }
       }
     }

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

@@ -2,7 +2,7 @@ import "./nav-toggle.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 
-const NavToggleContextDefault = forwardRef((_, ref) => (jsxs("button", { ref: ref, 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" }) })] })));
+const NavToggleContextDefault = forwardRef((_, ref) => (jsxs("button", { ref: ref, type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "dsa-nav-flyout", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "dsa-nav-toggle__label", children: "Open main navigation" }), jsx("span", { className: "dsa-nav-toggle__icon", children: jsx("span", { className: "dsa-nav-toggle__icon__middle" }) })] })));
 const NavToggleContext = createContext(NavToggleContextDefault);
 const NavToggle = forwardRef((props, ref) => {
     const Component = useContext(NavToggleContext);

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

@@ -12,11 +12,11 @@ import { HTMLAttributes } from "react";
 type DropdownInverted = boolean;
 interface NavTopbarProps {
     items?: {
-        href: string;
+        url: string;
         label: string;
         active?: boolean;
         items?: {
-            href?: string;
+            url?: string;
             label?: string;
             active?: boolean;
         }[];

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

@@ -12,8 +12,8 @@ const defaults = {
     "inverted": false
 };
 
-const NavTopbarContextDefault = forwardRef(({ items, inverted }, ref) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-main", "aria-label": "Hauptnavigation", ref: ref, children: jsx("ul", { className: "dsa-nav-topbar__list", children: items.map(({ label, href, 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: inverted })) : null] }, href));
+const NavTopbarContextDefault = forwardRef(({ items, inverted }, ref) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-topbar", "aria-label": "Main Navigation", ref: ref, children: jsx("ul", { className: "dsa-nav-topbar__list", children: items.map(({ label, url, 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", { className: "dsa-nav-topbar__label", children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__label__icon", icon: "chevron-down", role: "presentation", "aria-hidden": true, focusable: false })) : ("")] })) : (jsx(Link, { href: url, className: `dsa-nav-topbar__label dsa-nav-topbar__link`, children: label })), subItems?.length ? (jsx(NavDropdown, { items: subItems, inverted: inverted })) : null] }, url));
         }) }) })) : null);
 const NavTopbarContext = createContext(NavTopbarContextDefault);
 const NavTopbar = forwardRef((props, ref) => {

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

@@ -2,13 +2,19 @@
   --dsa-nav-topbar__label--color: var(--ks-color-fg);
   --dsa-nav-topbar__label--color_hover: var(--ks-text-color-interface-interactive-hover);
   --dsa-nav-topbar__label--color_active: var(--ks-text-color-interface-interactive-active);
-  --dsa-nav-topbar__label--font: var(--ks-font-interface-m);
+  --dsa-nav-topbar__label--background-color: transparent;
+  --dsa-nav-topbar__label--background-color_hover: var(--ks-color-fg-alpha-8);
+  --dsa-nav-topbar__label--background-color_active: transparent;
+  --dsa-nav-topbar__label--font-size: var(--ks-font-size-interface-s);
+  --dsa-nav-topbar__label--font-family: var(--ks-font-family-display);
   --dsa-nav-topbar__label--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-nav-topbar__label--font-weight_active: var(--ks-font-weight-bold);
-  --dsa-nav-topbar__label--padding: 0.75em 0.75em;
+  --dsa-nav-topbar__label--padding: 0.45em 0.75em;
   --dsa-nav-topbar__label--text-decoration: none;
   --dsa-nav-topbar__label--text-decoration_hover: none;
-  --dsa-nav-topbar__label_dimmed--opacity: 0.6;
+  --dsa-nav-topbar__label_dimmed--opacity: 1;
+  --dsa-nav-topbar__label--transition: var(--ks-transition-hover);
+  --dsa-nav-topbar__label--transition-property: background-color, color, opacity;
   --dsa-nav-topbar__label__icon--size: 1.5em;
   --dsa-nav-topbar_floating__label_dimmed--opacity: 0.85;
   --dsa-nav-topbar_floating__label--color: var(--ks-color-fg);
@@ -55,6 +61,7 @@
 }
 .dsa-nav-topbar .dsa-nav-topbar__item--active .dsa-nav-topbar__label {
   color: var(--dsa-nav-topbar__label--color_active);
+  background-color: var(--dsa-nav-topbar__label--background-color_active);
   font-weight: var(--dsa-nav-topbar__label--font-weight_active);
 }
 .dsa-nav-topbar .dsa-nav-topbar__item:hover > .dsa-nav-dropdown, .dsa-nav-topbar .dsa-nav-topbar__item:focus-within > .dsa-nav-dropdown {
@@ -65,16 +72,22 @@
 }
 .dsa-nav-topbar .dsa-nav-topbar__label {
   display: flex;
-  font: var(--dsa-nav-topbar__label--font);
+  font-family: var(--dsa-nav-topbar__label--font-family);
+  font-size: var(--dsa-nav-topbar__label--font-size);
   font-weight: var(--dsa-nav-topbar__label--font-weight);
   color: var(--dsa-nav-topbar__label--color);
+  background-color: var(--dsa-nav-topbar__label--background-color);
+  border-radius: var(--ks-border-radius-control);
   height: 100%;
   align-items: center;
   padding: var(--dsa-nav-topbar__label--padding);
   text-decoration: var(--dsa-nav-topbar__label--text-decoration);
+  transition: var(--dsa-nav-topbar__label--transition);
+  transition-property: var(--dsa-nav-topbar__label--transition-property);
 }
 .dsa-nav-topbar .dsa-nav-topbar__label:hover, .dsa-nav-topbar .dsa-nav-topbar__label:focus, .dsa-nav-topbar .dsa-nav-topbar__label:active {
   color: var(--dsa-nav-topbar__label--color_hover);
+  background-color: var(--dsa-nav-topbar__label--background-color_hover);
   text-decoration: var(--dsa-nav-topbar__label--text-decoration_hover);
 }
 .dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__label {

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

@@ -9,7 +9,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "href": {
+          "url": {
             "type": "string",
             "format": "uri"
           },
@@ -24,7 +24,7 @@
             "items": {
               "type": "object",
               "properties": {
-                "href": {
+                "url": {
                   "type": "string",
                   "format": "uri"
                 },
@@ -41,7 +41,7 @@
         },
         "additionalProperties": false,
         "required": [
-          "href",
+          "url",
           "label"
         ]
       },
@@ -49,43 +49,43 @@
         [
           {
             "label": "Active Item",
-            "href": "#",
+            "url": "#",
             "active": true
           },
           {
             "label": "Navigation Item",
-            "href": "#"
+            "url": "#"
           },
           {
             "label": "Dropdown",
-            "href": "#",
+            "url": "#",
             "items": [
               {
                 "label": "Level 2 Item",
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "Active Item",
                 "active": true,
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "An Item with a longer Label",
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "And One last one",
-                "href": "#"
+                "url": "#"
               }
             ]
           },
           {
             "label": "One more Item",
-            "href": "#"
+            "url": "#"
           },
           {
             "label": "Last Item",
-            "href": "#"
+            "url": "#"
           }
         ]
       ]
@@ -95,9 +95,6 @@
       "title": "Dropdown Inverted",
       "description": "Toggle the inversion of the dropdown navigation",
       "default": false
-    },
-    "type": {
-      "const": "nav-topbar"
     }
   },
   "additionalProperties": false,