@kickstartds/ds-agency-premium 1.6.70--canary.45.1743.0 → 1.6.70--canary.45.1748.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/breadcrumb/breadcrumb.css +32 -0
- package/dist/components/breadcrumb/breadcrumb.schema.dereffed.json +34 -0
- package/dist/components/breadcrumb/breadcrumb.schema.json +27 -0
- package/dist/components/breadcrumb/index.d.ts +28 -0
- package/dist/components/breadcrumb/index.js +17 -0
- package/dist/components/page-wrapper/tokens.css +3 -3
- package/dist/components/pagination/index.d.ts +4 -4
- package/dist/components/pagination/pagination.schema.dereffed.json +0 -6
- package/dist/components/pagination/pagination.schema.json +1 -7
- package/dist/components/presets.json +23 -0
- package/dist/global.css +3 -3
- package/dist/tokens/themes.css +4 -4
- package/dist/tokens/tokens.css +3 -3
- package/dist/tokens/tokens.js +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.dsa-breadcrumb {
|
|
2
|
+
--dsa-breadcrumb--gap: var(--ks-spacing-xxs);
|
|
3
|
+
--dsa-breadcrumb--font: var(--ks-font-interface-xs);
|
|
4
|
+
--dsa-breadcrumb--color: var(--ks-text-color-interface-interactive);
|
|
5
|
+
--dsa-breadcrumb--color_hover: var(--ks-text-color-interface-interactive-hover);
|
|
6
|
+
--dsa-breadcrumb__icon--size: 1.5em;
|
|
7
|
+
--dsa-breadcrumb__icon--color: var(--ks-color-fg-alpha-5);
|
|
8
|
+
--dsa-breadcrumb--color_active: var(--ks-text-color-interface-interactive-active);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.dsa-breadcrumb {
|
|
12
|
+
display: flex;
|
|
13
|
+
gap: var(--dsa-breadcrumb--gap, var(--ks-spacing-xxs));
|
|
14
|
+
flex-wrap: wrap;
|
|
15
|
+
align-items: flex-start;
|
|
16
|
+
font: var(--dsa-breadcrumb--font, var(--ks-font-interface-xs));
|
|
17
|
+
}
|
|
18
|
+
.dsa-breadcrumb__icon {
|
|
19
|
+
color: var(--dsa-breadcrumb__icon--color, var(--ks-color-fg-alpha-5));
|
|
20
|
+
width: var(--dsa-breadcrumb__icon--size, 1.5em);
|
|
21
|
+
height: var(--dsa-breadcrumb__icon--size, 1.5em);
|
|
22
|
+
}
|
|
23
|
+
.dsa-breadcrumb__link {
|
|
24
|
+
--g-link--color: var(--dsa-breadcrumb--color, var(--ks-text-color-interface-interactive));
|
|
25
|
+
--g-link--color-hover: var(--dsa-breadcrumb--color_hover, var(--ks-text-color-interface-interactive-hover));
|
|
26
|
+
font: inherit;
|
|
27
|
+
}
|
|
28
|
+
.dsa-breadcrumb__label {
|
|
29
|
+
color: var(--dsa-breadcrumb--color_active, var(--ks-text-color-interface-interactive-active));
|
|
30
|
+
font: inherit;
|
|
31
|
+
font-weight: var(--dsa-link--font-weight);
|
|
32
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/breadcrumb.schema.json",
|
|
4
|
+
"title": "Breadcrumb",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"pages": {
|
|
8
|
+
"type": "array",
|
|
9
|
+
"description": "An array of breadcrumb pages. Each page should have a URL and a label.",
|
|
10
|
+
"items": {
|
|
11
|
+
"type": "object",
|
|
12
|
+
"properties": {
|
|
13
|
+
"url": {
|
|
14
|
+
"type": "string",
|
|
15
|
+
"description": "The URL to the page"
|
|
16
|
+
},
|
|
17
|
+
"label": {
|
|
18
|
+
"type": "string",
|
|
19
|
+
"description": "The label for the title of the page"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"required": [
|
|
23
|
+
"url",
|
|
24
|
+
"label"
|
|
25
|
+
],
|
|
26
|
+
"additionalProperties": false
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"type": {
|
|
30
|
+
"const": "breadcrumb"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"additionalProperties": false
|
|
34
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/breadcrumb.schema.json",
|
|
4
|
+
"title": "Breadcrumb",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"pages": {
|
|
8
|
+
"type": "array",
|
|
9
|
+
"description": "An array of breadcrumb pages. Each page should have a URL and a label.",
|
|
10
|
+
"items": {
|
|
11
|
+
"type": "object",
|
|
12
|
+
"properties": {
|
|
13
|
+
"url": {
|
|
14
|
+
"type": "string",
|
|
15
|
+
"description": "The URL to the page"
|
|
16
|
+
},
|
|
17
|
+
"label": {
|
|
18
|
+
"type": "string",
|
|
19
|
+
"description": "The label for the title of the page"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"required": ["url", "label"]
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"additionalProperties": false
|
|
27
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HTMLAttributes } from "react";
|
|
3
|
+
/* eslint-disable */
|
|
4
|
+
/**
|
|
5
|
+
* This file was automatically generated by json-schema-to-typescript.
|
|
6
|
+
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
7
|
+
* and run json-schema-to-typescript to regenerate this file.
|
|
8
|
+
*/
|
|
9
|
+
interface BreadcrumbProps {
|
|
10
|
+
/**
|
|
11
|
+
* An array of breadcrumb pages. Each page should have a URL and a label.
|
|
12
|
+
*/
|
|
13
|
+
pages?: {
|
|
14
|
+
/**
|
|
15
|
+
* The URL to the page
|
|
16
|
+
*/
|
|
17
|
+
url: string;
|
|
18
|
+
/**
|
|
19
|
+
* The label for the title of the page
|
|
20
|
+
*/
|
|
21
|
+
label: string;
|
|
22
|
+
}[];
|
|
23
|
+
}
|
|
24
|
+
declare const BreadcrumbContextDefault: import("react").ForwardRefExoticComponent<BreadcrumbProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
25
|
+
declare const BreadcrumbContext: import("react").Context<import("react").ForwardRefExoticComponent<BreadcrumbProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
26
|
+
declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
27
|
+
export type { BreadcrumbProps };
|
|
28
|
+
export { BreadcrumbContextDefault, BreadcrumbContext, Breadcrumb };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import "./breadcrumb.css";
|
|
2
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, createContext, useContext } from 'react';
|
|
4
|
+
import { Icon } from '@kickstartds/base/lib/icon';
|
|
5
|
+
import { Link } from '@kickstartds/base/lib/link';
|
|
6
|
+
|
|
7
|
+
const BreadcrumbContextDefault = forwardRef(({ pages }, ref) => {
|
|
8
|
+
return (jsx("div", { className: "dsa-breadcrumb", ref: ref, children: pages.map((page, index) => index !== pages.length - 1 ? (jsxs(Fragment, { children: [jsx(Link, { href: page.url, className: "dsa-breadcrumb__link", children: page.label }), jsx(Icon, { className: "dsa-breadcrumb__icon", icon: "chevron-right" })] })) : (jsx("span", { className: "dsa-breadcrumb__label", children: page.label }))) }));
|
|
9
|
+
});
|
|
10
|
+
const BreadcrumbContext = createContext(BreadcrumbContextDefault);
|
|
11
|
+
const Breadcrumb = forwardRef((props, ref) => {
|
|
12
|
+
const Component = useContext(BreadcrumbContext);
|
|
13
|
+
return jsx(Component, { ...props, ref: ref });
|
|
14
|
+
});
|
|
15
|
+
Breadcrumb.displayName = "Breadcrumb";
|
|
16
|
+
|
|
17
|
+
export { Breadcrumb, BreadcrumbContext, BreadcrumbContextDefault };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Fri, 27 Jun 2025
|
|
3
|
+
* Generated on Fri, 27 Jun 2025 09:42:30 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root, [ks-theme] {
|
|
6
6
|
--ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);
|
|
@@ -762,8 +762,8 @@
|
|
|
762
762
|
--ks-text-color-display-inverted-interactive-hover-base: var(--ks-color-link-inverted-to-fg-2-base);
|
|
763
763
|
--ks-text-color-display-inverted-interactive-active-base: var(--ks-color-link-inverted-to-fg-2-base);
|
|
764
764
|
--ks-text-color-display-inverted-interactive-selected-base: var(--ks-color-link-inverted-to-fg-2-base);
|
|
765
|
-
--ks-text-color-interface-base: var(--ks-color-fg-alpha-
|
|
766
|
-
--ks-text-color-interface-interactive-base: var(--ks-color-fg-alpha-
|
|
765
|
+
--ks-text-color-interface-base: var(--ks-color-fg-alpha-2-base);
|
|
766
|
+
--ks-text-color-interface-interactive-base: var(--ks-color-fg-alpha-4-base);
|
|
767
767
|
--ks-text-color-interface-interactive-hover-base: var(--ks-color-fg-base);
|
|
768
768
|
--ks-text-color-interface-interactive-active-base: var(--ks-color-fg-base);
|
|
769
769
|
--ks-text-color-interface-interactive-selected-base: var(--ks-color-fg-base);
|
|
@@ -11,19 +11,19 @@ interface PaginationProps {
|
|
|
11
11
|
/**
|
|
12
12
|
* Aria label for the previous page link
|
|
13
13
|
*/
|
|
14
|
-
previousPage
|
|
14
|
+
previousPage?: string;
|
|
15
15
|
/**
|
|
16
16
|
* Aria label for the next page link
|
|
17
17
|
*/
|
|
18
|
-
nextPage
|
|
18
|
+
nextPage?: string;
|
|
19
19
|
/**
|
|
20
20
|
* Aria label for the link to skip to the first page
|
|
21
21
|
*/
|
|
22
|
-
skipToFirstPage
|
|
22
|
+
skipToFirstPage?: string;
|
|
23
23
|
/**
|
|
24
24
|
* Aria label for the link to skip to the last page
|
|
25
25
|
*/
|
|
26
|
-
skipToLastPage
|
|
26
|
+
skipToLastPage?: string;
|
|
27
27
|
/**
|
|
28
28
|
* Aria label for the link to go to a specific page (will be placed before the page number)
|
|
29
29
|
*/
|
|
@@ -32,13 +32,7 @@
|
|
|
32
32
|
"description": "Aria label for the link to go to a specific page (will be placed before the page number)",
|
|
33
33
|
"default": "Go to page"
|
|
34
34
|
}
|
|
35
|
-
}
|
|
36
|
-
"required": [
|
|
37
|
-
"previousPage",
|
|
38
|
-
"nextPage",
|
|
39
|
-
"skipToFirstPage",
|
|
40
|
-
"skipToLastPage"
|
|
41
|
-
]
|
|
35
|
+
}
|
|
42
36
|
},
|
|
43
37
|
"pages": {
|
|
44
38
|
"type": "array",
|
|
@@ -136,6 +136,29 @@
|
|
|
136
136
|
},
|
|
137
137
|
"screenshot": "img/screenshots/blog-blog-teaser--default.png"
|
|
138
138
|
},
|
|
139
|
+
{
|
|
140
|
+
"id": "industry-breadcrumb--default",
|
|
141
|
+
"group": "Industry/Breadcrumb",
|
|
142
|
+
"name": "Default",
|
|
143
|
+
"code": "<Breadcrumb\n pages={[\n {\n label: 'Page 1',\n url: 'https://example.com/page1'\n },\n {\n label: 'Page 2',\n url: 'https://example.com/page2'\n },\n {\n label: 'Page 3',\n url: 'https://example.com/page3'\n }\n ]}\n />",
|
|
144
|
+
"args": {
|
|
145
|
+
"pages": [
|
|
146
|
+
{
|
|
147
|
+
"url": "https://example.com/page1",
|
|
148
|
+
"label": "Page 1"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"url": "https://example.com/page2",
|
|
152
|
+
"label": "Page 2"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"url": "https://example.com/page3",
|
|
156
|
+
"label": "Page 3"
|
|
157
|
+
}
|
|
158
|
+
]
|
|
159
|
+
},
|
|
160
|
+
"screenshot": "img/screenshots/industry-breadcrumb--default.png"
|
|
161
|
+
},
|
|
139
162
|
{
|
|
140
163
|
"id": "components-button--primary-button",
|
|
141
164
|
"group": "Components/Button",
|
package/dist/global.css
CHANGED
|
@@ -582,7 +582,7 @@ h3 {
|
|
|
582
582
|
--dsa-check--background: transparent;
|
|
583
583
|
--dsa-check--background_checked: var(--ks-color-primary);
|
|
584
584
|
--dsa-check--background_active: transparent;
|
|
585
|
-
--dsa-check--border: var(--ks-border-width-) solid;
|
|
585
|
+
--dsa-check--border: var(--ks-border-width-default) solid;
|
|
586
586
|
--dsa-check--border-color: var(--ks-border-color-interface-interactive);
|
|
587
587
|
--dsa-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
|
|
588
588
|
--dsa-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
|
|
@@ -640,10 +640,10 @@ h3 {
|
|
|
640
640
|
--c-form-check_checkmark--color: var(--dsa-check__checkmark--color, var(--dsa-text-color-on-primary));
|
|
641
641
|
--c-form-check_box--border-radius: var(--dsa-check--border-radius, 2px);
|
|
642
642
|
--c-form-check_box-focus--shadow: var(--dsa-check--shadow_focus, 0 0 4px 0);
|
|
643
|
-
--c-form-check_checkmark--size: var(--dsa-check_radio__checkmark--size, calc(var(--
|
|
643
|
+
--c-form-check_checkmark--size: var(--dsa-check_radio__checkmark--size, calc(var(--dsa-check--size) * 0.5));
|
|
644
644
|
font: var(--dsa-check__label--font, var(--ks-font-interface-s));
|
|
645
645
|
font-weight: var(--dsa-check__label--font-weight, var(--ks-font-weight-regular));
|
|
646
|
-
color: var(--dsa-check__label--color, var(--ks-text-color-interface-interactive
|
|
646
|
+
color: var(--dsa-check__label--color, var(--ks-text-color-interface-interactive));
|
|
647
647
|
}
|
|
648
648
|
:root .c-form-check--checkbox, [ks-inverted] .c-form-check--checkbox, [ks-theme] .c-form-check--checkbox {
|
|
649
649
|
--c-form-check_box--border-radius: var(
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Fri, 27 Jun 2025
|
|
3
|
+
* Generated on Fri, 27 Jun 2025 09:42:32 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root [ks-theme=business] {
|
|
6
6
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -2727,7 +2727,7 @@
|
|
|
2727
2727
|
}
|
|
2728
2728
|
/**
|
|
2729
2729
|
* Do not edit directly
|
|
2730
|
-
* Generated on Fri, 27 Jun 2025
|
|
2730
|
+
* Generated on Fri, 27 Jun 2025 09:42:37 GMT
|
|
2731
2731
|
*/
|
|
2732
2732
|
:root [ks-theme=google] {
|
|
2733
2733
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -5458,7 +5458,7 @@
|
|
|
5458
5458
|
}
|
|
5459
5459
|
/**
|
|
5460
5460
|
* Do not edit directly
|
|
5461
|
-
* Generated on Fri, 27 Jun 2025
|
|
5461
|
+
* Generated on Fri, 27 Jun 2025 09:42:35 GMT
|
|
5462
5462
|
*/
|
|
5463
5463
|
:root [ks-theme=ngo] {
|
|
5464
5464
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -8459,7 +8459,7 @@
|
|
|
8459
8459
|
}
|
|
8460
8460
|
/**
|
|
8461
8461
|
* Do not edit directly
|
|
8462
|
-
* Generated on Fri, 27 Jun 2025
|
|
8462
|
+
* Generated on Fri, 27 Jun 2025 09:42:40 GMT
|
|
8463
8463
|
*/
|
|
8464
8464
|
:root [ks-theme=telekom] {
|
|
8465
8465
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
package/dist/tokens/tokens.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Fri, 27 Jun 2025
|
|
3
|
+
* Generated on Fri, 27 Jun 2025 09:42:30 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root, [ks-theme] {
|
|
@@ -763,8 +763,8 @@
|
|
|
763
763
|
--ks-text-color-display-inverted-interactive-hover-base: var(--ks-color-link-inverted-to-fg-2-base);
|
|
764
764
|
--ks-text-color-display-inverted-interactive-active-base: var(--ks-color-link-inverted-to-fg-2-base);
|
|
765
765
|
--ks-text-color-display-inverted-interactive-selected-base: var(--ks-color-link-inverted-to-fg-2-base);
|
|
766
|
-
--ks-text-color-interface-base: var(--ks-color-fg-alpha-
|
|
767
|
-
--ks-text-color-interface-interactive-base: var(--ks-color-fg-alpha-
|
|
766
|
+
--ks-text-color-interface-base: var(--ks-color-fg-alpha-2-base);
|
|
767
|
+
--ks-text-color-interface-interactive-base: var(--ks-color-fg-alpha-4-base);
|
|
768
768
|
--ks-text-color-interface-interactive-hover-base: var(--ks-color-fg-base);
|
|
769
769
|
--ks-text-color-interface-interactive-active-base: var(--ks-color-fg-base);
|
|
770
770
|
--ks-text-color-interface-interactive-selected-base: var(--ks-color-fg-base);
|
package/dist/tokens/tokens.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Fri, 27 Jun 2025
|
|
3
|
+
* Generated on Fri, 27 Jun 2025 09:42:30 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const KsBackgroundColorAccentBase = "#f3f3f4";
|
|
@@ -767,8 +767,8 @@ export const KsTextColorDisplayInvertedInteractiveBase = "#98b2e0";
|
|
|
767
767
|
export const KsTextColorDisplayInvertedInteractiveHoverBase = "#a5bce4";
|
|
768
768
|
export const KsTextColorDisplayInvertedInteractiveActiveBase = "#a5bce4";
|
|
769
769
|
export const KsTextColorDisplayInvertedInteractiveSelectedBase = "#a5bce4";
|
|
770
|
-
export const KsTextColorInterfaceBase = "rgba(6, 8, 31, 0.
|
|
771
|
-
export const KsTextColorInterfaceInteractiveBase = "rgba(6, 8, 31, 0.
|
|
770
|
+
export const KsTextColorInterfaceBase = "rgba(6, 8, 31, 0.87)";
|
|
771
|
+
export const KsTextColorInterfaceInteractiveBase = "rgba(6, 8, 31, 0.63)";
|
|
772
772
|
export const KsTextColorInterfaceInteractiveHoverBase = "#06081f";
|
|
773
773
|
export const KsTextColorInterfaceInteractiveActiveBase = "#06081f";
|
|
774
774
|
export const KsTextColorInterfaceInteractiveSelectedBase = "#06081f";
|