@kickstartds/ds-agency-premium 1.2.10--canary.181.46699f2.0 → 1.2.10--canary.183.909265f.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/logo/index.js +1 -1
- package/dist/components/logos/index.js +1 -1
- package/dist/components/logos/logos.css +64 -52
- package/dist/components/mosaic/index.js +1 -1
- package/dist/components/mosaic/mosaic.css +22 -32
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/static/tokens-business.css +1 -1
- package/dist/static/tokens-google.css +1 -1
- package/dist/static/tokens-ngo.css +1 -1
- package/dist/static/tokens-telekom.css +1 -1
- package/dist/static/tokens.css +1 -1
- package/dist/tokens/tokens.css +1 -1
- package/dist/tokens/tokens.js +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef, createContext, useContext } from 'react';
|
|
3
3
|
import { Picture } from '@kickstartds/base/lib/picture';
|
|
4
4
|
|
|
5
|
-
const LogoContextDefault = forwardRef(({ src, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: "
|
|
5
|
+
const LogoContextDefault = forwardRef(({ src, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: "dsa-logos__logo", children: jsx(Picture, { src: src }) })));
|
|
6
6
|
const LogoContext = createContext(LogoContextDefault);
|
|
7
7
|
const Logo = forwardRef((props, ref) => {
|
|
8
8
|
const Component = useContext(LogoContext);
|
|
@@ -6,7 +6,7 @@ import { Button } from '@kickstartds/base/lib/button';
|
|
|
6
6
|
import { Link } from '@kickstartds/base/lib/link';
|
|
7
7
|
|
|
8
8
|
const Logos = ({ items = [], tagline, align, cta, logosPerRow = "6", }) => {
|
|
9
|
-
return (jsx(Fragment, { children: jsxs("div", { className: classnames(`
|
|
9
|
+
return (jsx(Fragment, { children: jsxs("div", { className: classnames(`dsa-logos dsa-logos--align-${align}`), children: [jsx("div", { className: "dsa-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`dsa-logo-tiles dsa-logo-tiles--cols-${logosPerRow}`), logos: items }), cta?.toggle ? (jsxs("div", { className: "dsa-logos__cta", children: [jsxs("div", { className: "dsa-logos__cta__text", children: [cta?.text, cta?.style === "text" ? (jsxs(Fragment, { children: [" ", jsx(Link, { className: "dsa-logos__cta__link", href: cta.link, children: cta.label })] })) : ("")] }), cta?.style === "button" ? (jsx(Button, { href: cta.link, label: cta.label })) : ("")] })) : ("")] }) }));
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
export { Logos };
|
|
@@ -1,91 +1,103 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
.l-container--logos {
|
|
2
|
+
/* stylelint-disable-next-line property-no-unknown */
|
|
3
|
+
container-name: logos;
|
|
4
4
|
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
.c-logos .c-logo-tiles--cols-2 {
|
|
16
|
-
--c-logo-tiles--cols: 2;
|
|
17
|
-
}
|
|
18
|
-
.c-logos .c-logo-tiles--cols-3 {
|
|
19
|
-
--c-logo-tiles--cols: 3;
|
|
20
|
-
}
|
|
21
|
-
.c-logos .c-logo-tiles--cols-4 {
|
|
22
|
-
--c-logo-tiles--cols: 4;
|
|
23
|
-
}
|
|
24
|
-
.c-logos .c-logo-tiles--cols-5 {
|
|
25
|
-
--c-logo-tiles--cols: 5;
|
|
26
|
-
}
|
|
27
|
-
.c-logos .c-logo-tiles--cols-6 {
|
|
28
|
-
--c-logo-tiles--cols: 6;
|
|
29
|
-
}
|
|
30
|
-
.c-logos .c-logo-tiles--cols-7 {
|
|
31
|
-
--c-logo-tiles--cols: 7;
|
|
32
|
-
}
|
|
33
|
-
.c-logos .c-logo-tiles--cols-8 {
|
|
34
|
-
--c-logo-tiles--cols: 8;
|
|
35
|
-
}
|
|
5
|
+
|
|
6
|
+
.dsa-logos {
|
|
7
|
+
--dsa-logos-gap: var(--ks-spacing-stack-m);
|
|
8
|
+
--dsa-logos-tagline--font: var(--dsa-headline_h3--font);
|
|
9
|
+
--dsa-logos-tagline--font-weight: var(--dsa-headline--font-weight);
|
|
10
|
+
--dsa-logos-tagline--color: var(--dsa-headline--color);
|
|
11
|
+
--dsa-logos__grid--gap-horizontal: var(--ks-spacing-inline-l);
|
|
12
|
+
--dsa-logos__grid--gap-vertical: var(--ks-spacing-stack-s);
|
|
13
|
+
--dsa-logos__grid_mobile--cols: 2;
|
|
14
|
+
--dsa-logos__grid_tablet--cols: 3;
|
|
36
15
|
}
|
|
37
16
|
|
|
38
|
-
.
|
|
17
|
+
.dsa-logos {
|
|
39
18
|
display: flex;
|
|
40
19
|
flex-direction: column;
|
|
41
|
-
gap: var(--ks-spacing-stack-m);
|
|
20
|
+
gap: var(--dsa-logos-gap, var(--ks-spacing-stack-m));
|
|
42
21
|
}
|
|
43
|
-
.
|
|
44
|
-
font: var(--ks-font-display-m);
|
|
22
|
+
.dsa-logos__tagline {
|
|
23
|
+
font: var(--dsa-logos-tagline--font, var(--ks-font-display-m));
|
|
24
|
+
font-weight: var(--dsa-logos-tagline--font-weight, var(--dsa-headline--font-weight));
|
|
45
25
|
max-width: var(--l-section--content-width-narrow);
|
|
46
|
-
color: var(--ks-color-
|
|
26
|
+
color: var(--dsa-logos-tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
|
|
47
27
|
width: 100%;
|
|
48
28
|
}
|
|
49
|
-
.
|
|
29
|
+
.dsa-logos__cta {
|
|
50
30
|
display: flex;
|
|
51
31
|
flex-direction: column;
|
|
52
32
|
gap: var(--ks-spacing-stack-m);
|
|
53
33
|
}
|
|
54
|
-
.
|
|
34
|
+
.dsa-logos__cta .c-button {
|
|
55
35
|
width: fit-content;
|
|
56
36
|
}
|
|
57
|
-
.
|
|
37
|
+
.dsa-logos__cta__text {
|
|
58
38
|
color: var(--ks-text-color-default);
|
|
59
39
|
max-width: var(--l-section--content-width-narrow);
|
|
60
40
|
}
|
|
61
|
-
.
|
|
41
|
+
.dsa-logos__cta__text, .dsa-logos__cta__link {
|
|
62
42
|
font: var(--ks-font-copy-m);
|
|
63
43
|
}
|
|
64
|
-
.
|
|
44
|
+
.dsa-logos--align-left .dsa-logo-tiles {
|
|
65
45
|
justify-content: start;
|
|
66
46
|
}
|
|
67
|
-
.
|
|
47
|
+
.dsa-logos--align-center .dsa-logos__cta {
|
|
68
48
|
align-items: center;
|
|
69
49
|
}
|
|
70
|
-
.
|
|
71
|
-
.
|
|
50
|
+
.dsa-logos--align-center .dsa-logos__cta__text,
|
|
51
|
+
.dsa-logos--align-center .dsa-logos__tagline {
|
|
72
52
|
text-align: center;
|
|
73
53
|
margin: auto;
|
|
74
54
|
}
|
|
75
|
-
.
|
|
76
|
-
|
|
55
|
+
.dsa-logos .dsa-logo-tiles {
|
|
56
|
+
--dsa-logo-tiles--cols: var(--dsa-logos__grid_mobile--cols, 2);
|
|
57
|
+
gap: var(--dsa-logos__grid--gap-horizontal) var(--dsa-logos__grid--gap-horizontal);
|
|
77
58
|
margin: 0;
|
|
78
59
|
}
|
|
79
|
-
|
|
60
|
+
@container logo-tiles (min-width: 420px) {
|
|
61
|
+
.dsa-logos .dsa-logo-tiles {
|
|
62
|
+
--dsa-logo-tiles--cols: var(--dsa-logos__grid_tablet--cols, 3);
|
|
63
|
+
}
|
|
64
|
+
.dsa-logos .dsa-logo-tiles--cols-2 {
|
|
65
|
+
--dsa-logo-tiles--cols: 2;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
@container logo-tiles (min-width: 640px) {
|
|
69
|
+
.dsa-logos .dsa-logo-tiles--cols-2 {
|
|
70
|
+
--dsa-logo-tiles--cols: 2;
|
|
71
|
+
}
|
|
72
|
+
.dsa-logos .dsa-logo-tiles--cols-3 {
|
|
73
|
+
--dsa-logo-tiles--cols: 3;
|
|
74
|
+
}
|
|
75
|
+
.dsa-logos .dsa-logo-tiles--cols-4 {
|
|
76
|
+
--dsa-logo-tiles--cols: 4;
|
|
77
|
+
}
|
|
78
|
+
.dsa-logos .dsa-logo-tiles--cols-5 {
|
|
79
|
+
--dsa-logo-tiles--cols: 5;
|
|
80
|
+
}
|
|
81
|
+
.dsa-logos .dsa-logo-tiles--cols-6 {
|
|
82
|
+
--dsa-logo-tiles--cols: 6;
|
|
83
|
+
}
|
|
84
|
+
.dsa-logos .dsa-logo-tiles--cols-7 {
|
|
85
|
+
--dsa-logo-tiles--cols: 7;
|
|
86
|
+
}
|
|
87
|
+
.dsa-logos .dsa-logo-tiles--cols-8 {
|
|
88
|
+
--dsa-logo-tiles--cols: 8;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
.dsa-logos .dsa-logo-tiles .c-logo-tiles__col {
|
|
80
92
|
margin: 0;
|
|
81
93
|
aspect-ratio: 16/9;
|
|
82
94
|
display: flex;
|
|
83
95
|
justify-content: center;
|
|
84
96
|
align-items: center;
|
|
85
97
|
}
|
|
86
|
-
.
|
|
98
|
+
.dsa-logos .dsa-logo-tiles .c-logo-tiles__col::after {
|
|
87
99
|
content: none;
|
|
88
100
|
}
|
|
89
|
-
.
|
|
101
|
+
.dsa-logos .dsa-logo-tiles img {
|
|
90
102
|
position: relative;
|
|
91
103
|
}
|
|
@@ -2,7 +2,7 @@ import "./mosaic.css";
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { Storytelling } from '@kickstartds/content/lib/storytelling';
|
|
4
4
|
|
|
5
|
-
const Mosaic = ({ layout, largeHeadlines, tiles }) => (jsx("div", { className: "
|
|
5
|
+
const Mosaic = ({ layout, largeHeadlines, tiles }) => (jsx("div", { className: "dsa-mosaic", children: tiles.map((tile, index) => (jsx(Storytelling, { full: true, backgroundColor: tile.backgroundColor, backgroundImage: tile.backgroundImage, box: {
|
|
6
6
|
headline: {
|
|
7
7
|
text: tile?.headline,
|
|
8
8
|
sub: tile?.sub,
|
|
@@ -1,35 +1,25 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
.dsa-mosaic {
|
|
2
|
+
--dsa-mosaic--vertical-padding: var(--l-section--space-default);
|
|
3
|
+
--dsa-mosaic--horizontal-padding: var(--l-section--content-padding);
|
|
4
|
+
--dsa-mosaic__copy--font: var(--dsa-rich-text--font);
|
|
5
|
+
--dsa-mosaic__copy--color: var(--ks-text-color-default);
|
|
6
|
+
--dsa-mosaic__headline--color: var(--dsa-headline--color);
|
|
7
|
+
--dsa-mosaic__headline--font: var(--dsa-headline_h2--font);
|
|
8
|
+
--dsa-mosaic__subheadline--color: var(--dsa-headline__subheadline--color);
|
|
9
|
+
--dsa-mosaic__subheadline--font: var(--dsa-headline-font-copy-xs);
|
|
7
10
|
}
|
|
8
11
|
|
|
9
|
-
.
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
--
|
|
18
|
-
}
|
|
19
|
-
.
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
.c-visual .c-visual__box {
|
|
23
|
-
max-width: 100%;
|
|
24
|
-
}
|
|
25
|
-
@container visual (min-width: 640px) {
|
|
26
|
-
.c-visual.c-visual--full {
|
|
27
|
-
height: 100vh;
|
|
28
|
-
}
|
|
29
|
-
.c-visual .c-visual__box {
|
|
30
|
-
max-width: var(--c-visual_box--max-width);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
.c-visual .c-visual__content--indent {
|
|
34
|
-
max-width: var(--l-section--content-width-wide);
|
|
12
|
+
.dsa-mosaic .dsa-headline__headline {
|
|
13
|
+
font: var(--dsa-mosaic__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
|
|
14
|
+
color: var(--dsa-mosaic__headline--color, var(--ks-text-color-display));
|
|
15
|
+
font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
|
|
16
|
+
}
|
|
17
|
+
.dsa-mosaic .dsa-headline__subheadline {
|
|
18
|
+
font: var(--dsa-mosaic__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
|
|
19
|
+
color: var(--dsa-mosaic__subheadline--color, var(--ks-text-color-primary));
|
|
20
|
+
font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
|
|
21
|
+
}
|
|
22
|
+
.dsa-mosaic .c-rich-text {
|
|
23
|
+
font: var(--dsa-mosaic__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
|
|
24
|
+
color: var(--dsa-mosaic__copy--color, var(--das-rich-text--color, var(--ks-text-color-copy)));
|
|
35
25
|
}
|
package/dist/static/tokens.css
CHANGED
package/dist/tokens/tokens.css
CHANGED
package/dist/tokens/tokens.js
CHANGED
package/package.json
CHANGED