@kickstartds/ds-agency-premium 1.5.21 → 1.5.22--canary.964.4ed30f5.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/blog-aside/blog-aside.css +2 -6
- package/dist/components/contact/contact.css +0 -2
- package/dist/components/divider/divider.css +9 -0
- package/dist/components/divider/divider.schema.dereffed.json +33 -0
- package/dist/components/divider/divider.schema.json +27 -0
- package/dist/components/divider/index.d.ts +33 -0
- package/dist/components/divider/index.js +16 -0
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +20 -0
- package/dist/global.css +1 -1
- package/dist/tokens/themes.css +4 -4
- package/dist/tokens/tokens.css +1 -1
- package/dist/tokens/tokens.js +1 -1
- package/package.json +1 -1
|
@@ -10,8 +10,6 @@
|
|
|
10
10
|
--dsa-blog-aside__author__image--flex-basis: 120px;
|
|
11
11
|
--dsa-blog-aside__author__body--flex-basis: 240px;
|
|
12
12
|
--dsa-blog-aside__author__link--font: var(--ks-font-interface-s);
|
|
13
|
-
--dsa-blog-aside__author--gap-horizontal: var(--ks-spacing-inline-xs);
|
|
14
|
-
--dsa-blog-aside__author--gap-vertical: var(--ks-spacing-stack-xs);
|
|
15
13
|
--dsa-blog-aside__meta__item--font: var(--ks-font-interface-s);
|
|
16
14
|
--dsa-blog-aside__meta__item--color: var(--ks-text-color-interface);
|
|
17
15
|
--dsa-blog-aside__meta__item__icon--size: 1.2em;
|
|
@@ -25,8 +23,6 @@
|
|
|
25
23
|
--dsa-blog-aside__author__title--font: var(--ks-font-copy-l);
|
|
26
24
|
--dsa-blog-aside__author__subtitle--font: var(--ks-font-copy-m);
|
|
27
25
|
--dsa-blog-aside__author__link--font: var(--ks-font-interface-m);
|
|
28
|
-
--dsa-blog-aside__author--gap-horizontal: var(--ks-spacing-stack-s);
|
|
29
|
-
--dsa-blog-aside__author--gap-vertical: var(--ks-spacing-inline-l);
|
|
30
26
|
--dsa-blog-aside__meta__item--font: var(--ks-font-interface-m);
|
|
31
27
|
--dsa-blog-aside__share-bar__icon--size: 2em;
|
|
32
28
|
}
|
|
@@ -43,8 +39,8 @@
|
|
|
43
39
|
gap: var(--dsa-blog-aside--gap);
|
|
44
40
|
}
|
|
45
41
|
.dsa-blog-aside .dsa-contact {
|
|
46
|
-
--dsa-contact--gap-vertical: var(--dsa-blog-
|
|
47
|
-
--dsa-contact--gap-horizontal: var(--dsa-blog-
|
|
42
|
+
--dsa-contact--gap-vertical: var(--dsa-blog-asde__author--gap-vertical, var(--ks-spacing-stack-xs));
|
|
43
|
+
--dsa-contact--gap-horizontal: var(--dsa-blog-asde__author--gap-horizontal, var(--ks-spacing-inline-xs));
|
|
48
44
|
--dsa-contact__image--flex-basis: var(--dsa-blog-aside__author__image--flex-basis, 200px);
|
|
49
45
|
--dsa-contact__body--flex-basis: var(--dsa-blog-aside__author__body--flex-basis, 300px);
|
|
50
46
|
--dsa-contact__title--font: var(--dsa-blog-aside__author__title--font, var(--ks-font-copy-m));
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
.dsa-divider {
|
|
2
|
+
--dsa-divider--background: var(--ks-border-color-accent);
|
|
3
|
+
--dsa-divider--height: var(--ks-border-widht-default);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
hr.c-divider {
|
|
7
|
+
--c-divider--background: var(--dsa-divider--background, var(--ks-border-color-accent));
|
|
8
|
+
--c-divider--height: var(--dsa-divider--height, var(--ks-border-width-default));
|
|
9
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/divider.schema.json",
|
|
4
|
+
"title": "Divider",
|
|
5
|
+
"description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.",
|
|
6
|
+
"type": "object",
|
|
7
|
+
"properties": {
|
|
8
|
+
"variant": {
|
|
9
|
+
"title": "Style of the divider",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"description": "Choose a variant for the divider",
|
|
12
|
+
"enum": [
|
|
13
|
+
"default",
|
|
14
|
+
"accent"
|
|
15
|
+
],
|
|
16
|
+
"default": "default"
|
|
17
|
+
},
|
|
18
|
+
"className": {
|
|
19
|
+
"type": "string",
|
|
20
|
+
"title": "Additional Classes",
|
|
21
|
+
"description": "Add additional css classes that should be applied to the divider"
|
|
22
|
+
},
|
|
23
|
+
"component": {
|
|
24
|
+
"title": "`ks-component` attribute",
|
|
25
|
+
"description": "Optional custom component identifier",
|
|
26
|
+
"type": "string"
|
|
27
|
+
},
|
|
28
|
+
"type": {
|
|
29
|
+
"const": "divider"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"additionalProperties": false
|
|
33
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/divider.schema.json",
|
|
4
|
+
"title": "Divider",
|
|
5
|
+
"description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity.",
|
|
6
|
+
"type": "object",
|
|
7
|
+
"properties": {
|
|
8
|
+
"variant": {
|
|
9
|
+
"title": "Style of the divider",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"description": "Choose a variant for the divider",
|
|
12
|
+
"enum": ["default", "accent"],
|
|
13
|
+
"default": "default"
|
|
14
|
+
},
|
|
15
|
+
"className": {
|
|
16
|
+
"type": "string",
|
|
17
|
+
"title": "Additional Classes",
|
|
18
|
+
"description": "Add additional css classes that should be applied to the divider"
|
|
19
|
+
},
|
|
20
|
+
"component": {
|
|
21
|
+
"title": "`ks-component` attribute",
|
|
22
|
+
"description": "Optional custom component identifier",
|
|
23
|
+
"type": "string"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"additionalProperties": false
|
|
27
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HTMLAttributes, FC, PropsWithChildren } 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
|
+
/**
|
|
10
|
+
* Choose a variant for the divider
|
|
11
|
+
*/
|
|
12
|
+
type StyleOfTheDivider = "default" | "accent";
|
|
13
|
+
/**
|
|
14
|
+
* Add additional css classes that should be applied to the divider
|
|
15
|
+
*/
|
|
16
|
+
type AdditionalClasses = string;
|
|
17
|
+
/**
|
|
18
|
+
* Optional custom component identifier
|
|
19
|
+
*/
|
|
20
|
+
type KsComponentAttribute = string;
|
|
21
|
+
/**
|
|
22
|
+
* Dividers bring clarity to a layout by grouping and dividing content in close proximity.
|
|
23
|
+
*/
|
|
24
|
+
interface DividerProps {
|
|
25
|
+
variant?: StyleOfTheDivider;
|
|
26
|
+
className?: AdditionalClasses;
|
|
27
|
+
component?: KsComponentAttribute;
|
|
28
|
+
}
|
|
29
|
+
declare const DividerContextDefault: import("react").ForwardRefExoticComponent<DividerProps & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;
|
|
30
|
+
declare const DividerContext: import("react").Context<import("react").ForwardRefExoticComponent<DividerProps & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>>;
|
|
31
|
+
declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;
|
|
32
|
+
declare const DividerProvider: FC<PropsWithChildren>;
|
|
33
|
+
export { DividerContextDefault, DividerContext, Divider, DividerProvider };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import "./divider.css";
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, createContext, useContext } from 'react';
|
|
4
|
+
import classnames from 'classnames';
|
|
5
|
+
import { DividerContextDefault as DividerContextDefault$1, DividerContext as DividerContext$1 } from '@kickstartds/base/lib/divider';
|
|
6
|
+
|
|
7
|
+
const DividerContextDefault = forwardRef(({ variant, className, ...props }, ref) => (jsx(DividerContextDefault$1, { ...props, className: classnames("dsa-divider", className), variant: variant, ref: ref })));
|
|
8
|
+
const DividerContext = createContext(DividerContextDefault);
|
|
9
|
+
const Divider = forwardRef((props, ref) => {
|
|
10
|
+
const Component = useContext(DividerContext);
|
|
11
|
+
return jsx(Component, { ...props, ref: ref });
|
|
12
|
+
});
|
|
13
|
+
Divider.displayName = "Divider";
|
|
14
|
+
const DividerProvider = (props) => (jsx(DividerContext$1.Provider, { ...props, value: DividerContextDefault }));
|
|
15
|
+
|
|
16
|
+
export { Divider, DividerContext, DividerContextDefault, DividerProvider };
|
|
@@ -1185,6 +1185,26 @@
|
|
|
1185
1185
|
},
|
|
1186
1186
|
"screenshot": "img/screenshots/components-cta--align-bottom.png"
|
|
1187
1187
|
},
|
|
1188
|
+
{
|
|
1189
|
+
"id": "components-divider--accent",
|
|
1190
|
+
"group": "Components/Divider",
|
|
1191
|
+
"name": "Accent",
|
|
1192
|
+
"code": "<No Display Name variant=\"accent\" />",
|
|
1193
|
+
"args": {
|
|
1194
|
+
"variant": "accent"
|
|
1195
|
+
},
|
|
1196
|
+
"screenshot": "img/screenshots/components-divider--accent.png"
|
|
1197
|
+
},
|
|
1198
|
+
{
|
|
1199
|
+
"id": "components-divider--default",
|
|
1200
|
+
"group": "Components/Divider",
|
|
1201
|
+
"name": "Default",
|
|
1202
|
+
"code": "<No Display Name variant=\"default\" />",
|
|
1203
|
+
"args": {
|
|
1204
|
+
"variant": "default"
|
|
1205
|
+
},
|
|
1206
|
+
"screenshot": "img/screenshots/components-divider--default.png"
|
|
1207
|
+
},
|
|
1188
1208
|
{
|
|
1189
1209
|
"id": "components-faq--dropdown-list",
|
|
1190
1210
|
"group": "Components/Faq",
|
package/dist/global.css
CHANGED
|
@@ -507,7 +507,7 @@ h3 {
|
|
|
507
507
|
color: var(--dsa-form-field__placeholder--color, var(--ks-color-fg-alpha-5));
|
|
508
508
|
}
|
|
509
509
|
|
|
510
|
-
.
|
|
510
|
+
.dsa-divider {
|
|
511
511
|
--dsa-divider--background: var(--ks-border-color-accent);
|
|
512
512
|
--dsa-divider--height: var(--ks-border-widht-default);
|
|
513
513
|
}
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Tue, 10 Sep 2024 09:
|
|
3
|
+
* Generated on Tue, 10 Sep 2024 09:49:00 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 Tue, 10 Sep 2024 09:
|
|
2730
|
+
* Generated on Tue, 10 Sep 2024 09:49:03 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 Tue, 10 Sep 2024 09:
|
|
5461
|
+
* Generated on Tue, 10 Sep 2024 09:49:02 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 Tue, 10 Sep 2024 09:
|
|
8462
|
+
* Generated on Tue, 10 Sep 2024 09:49:05 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
package/dist/tokens/tokens.js
CHANGED