@kickstartds/ds-agency-premium 1.3.9 → 1.3.11
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/MosaicProps-d52c7151.d.ts +258 -0
- package/dist/SectionProps-93230a76.d.ts +1 -1
- package/dist/components/blog-overview/index.d.ts +1 -1
- package/dist/components/blog-post/index.d.ts +1 -1
- package/dist/components/index/index.d.ts +2 -2
- package/dist/components/mosaic/index.d.ts +1 -1
- package/dist/components/mosaic/index.js +1 -1
- package/dist/components/mosaic/mosaic.schema.dereffed.json +12 -2
- package/dist/components/mosaic/mosaic.schema.json +6 -65
- package/dist/components/page/page.schema.dereffed.json +12 -2
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +4 -4
- package/dist/components/section/section.css +1 -4
- package/dist/components/section/section.schema.dereffed.json +12 -2
- package/dist/components/tile/tile.schema.dereffed.json +99 -0
- package/dist/components/tile/tile.schema.json +68 -0
- 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
- package/dist/MosaicProps-aacb9422.d.ts +0 -84
- /package/dist/{BlogOverviewProps-525f7f9f.d.ts → BlogOverviewProps-f385fc47.d.ts} +0 -0
- /package/dist/{BlogPostProps-f9a49428.d.ts → BlogPostProps-0910f130.d.ts} +0 -0
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
/**
|
|
3
|
+
* This file was automatically generated by json-schema-to-typescript.
|
|
4
|
+
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
5
|
+
* and run json-schema-to-typescript to regenerate this file.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Headline for the tile
|
|
9
|
+
*/
|
|
10
|
+
type Headline = string;
|
|
11
|
+
/**
|
|
12
|
+
* Subheadline below the tile headline
|
|
13
|
+
*/
|
|
14
|
+
type ModuleSubheadline = string;
|
|
15
|
+
/**
|
|
16
|
+
* Text for tile
|
|
17
|
+
*/
|
|
18
|
+
type ModuleText = string;
|
|
19
|
+
/**
|
|
20
|
+
* Picture source
|
|
21
|
+
*/
|
|
22
|
+
type Source = string;
|
|
23
|
+
/**
|
|
24
|
+
* Alt text to display for picture
|
|
25
|
+
*/
|
|
26
|
+
type AltText = string;
|
|
27
|
+
/**
|
|
28
|
+
* Toggle wether the Button is displayed or not
|
|
29
|
+
*/
|
|
30
|
+
type ButtonToggle = boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Text content to display inside the button
|
|
33
|
+
*/
|
|
34
|
+
type Label = string;
|
|
35
|
+
/**
|
|
36
|
+
* Target that should be linked, makes the button behave like a link semantically
|
|
37
|
+
*/
|
|
38
|
+
type Target = string;
|
|
39
|
+
/**
|
|
40
|
+
* Choose an icon
|
|
41
|
+
*/
|
|
42
|
+
type Icon = string;
|
|
43
|
+
/**
|
|
44
|
+
* Background color for the whole element
|
|
45
|
+
*/
|
|
46
|
+
type BackgroundColor = string;
|
|
47
|
+
/**
|
|
48
|
+
* Background image for the whole element
|
|
49
|
+
*/
|
|
50
|
+
type BackgroundImage = string;
|
|
51
|
+
/**
|
|
52
|
+
* Overwrite the color to use for the text content
|
|
53
|
+
*/
|
|
54
|
+
type TextColor = string;
|
|
55
|
+
interface TileProps {
|
|
56
|
+
headline?: Headline;
|
|
57
|
+
sub?: ModuleSubheadline;
|
|
58
|
+
text?: ModuleText;
|
|
59
|
+
image?: {
|
|
60
|
+
src?: Source;
|
|
61
|
+
alt?: AltText;
|
|
62
|
+
};
|
|
63
|
+
button?: {
|
|
64
|
+
toggle?: ButtonToggle;
|
|
65
|
+
label?: Label;
|
|
66
|
+
target?: Target;
|
|
67
|
+
icon?: Icon;
|
|
68
|
+
};
|
|
69
|
+
backgroundColor?: BackgroundColor;
|
|
70
|
+
backgroundImage?: BackgroundImage;
|
|
71
|
+
textColor?: TextColor;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Layout of the mosaic component
|
|
75
|
+
*/
|
|
76
|
+
type Layout = "alternate" | "textLeft" | "textRight";
|
|
77
|
+
/**
|
|
78
|
+
* Make the headlines larger
|
|
79
|
+
*/
|
|
80
|
+
type LargeHeadlines = boolean;
|
|
81
|
+
/**
|
|
82
|
+
* The tiles to display
|
|
83
|
+
*
|
|
84
|
+
* @minItems 1
|
|
85
|
+
* @maxItems 20
|
|
86
|
+
*/
|
|
87
|
+
type Tiles = [TileProps] | [TileProps, TileProps] | [TileProps, TileProps, TileProps] | [TileProps, TileProps, TileProps, TileProps] | [TileProps, TileProps, TileProps, TileProps, TileProps] | [TileProps, TileProps, TileProps, TileProps, TileProps, TileProps] | [TileProps, TileProps, TileProps, TileProps, TileProps, TileProps, TileProps] | [TileProps, TileProps, TileProps, TileProps, TileProps, TileProps, TileProps, TileProps] | [TileProps, TileProps, TileProps, TileProps, TileProps, TileProps, TileProps, TileProps, TileProps] | [TileProps, TileProps, TileProps, TileProps, TileProps, TileProps, TileProps, TileProps, TileProps, TileProps] | [
|
|
88
|
+
TileProps,
|
|
89
|
+
TileProps,
|
|
90
|
+
TileProps,
|
|
91
|
+
TileProps,
|
|
92
|
+
TileProps,
|
|
93
|
+
TileProps,
|
|
94
|
+
TileProps,
|
|
95
|
+
TileProps,
|
|
96
|
+
TileProps,
|
|
97
|
+
TileProps,
|
|
98
|
+
TileProps
|
|
99
|
+
] | [
|
|
100
|
+
TileProps,
|
|
101
|
+
TileProps,
|
|
102
|
+
TileProps,
|
|
103
|
+
TileProps,
|
|
104
|
+
TileProps,
|
|
105
|
+
TileProps,
|
|
106
|
+
TileProps,
|
|
107
|
+
TileProps,
|
|
108
|
+
TileProps,
|
|
109
|
+
TileProps,
|
|
110
|
+
TileProps,
|
|
111
|
+
TileProps
|
|
112
|
+
] | [
|
|
113
|
+
TileProps,
|
|
114
|
+
TileProps,
|
|
115
|
+
TileProps,
|
|
116
|
+
TileProps,
|
|
117
|
+
TileProps,
|
|
118
|
+
TileProps,
|
|
119
|
+
TileProps,
|
|
120
|
+
TileProps,
|
|
121
|
+
TileProps,
|
|
122
|
+
TileProps,
|
|
123
|
+
TileProps,
|
|
124
|
+
TileProps,
|
|
125
|
+
TileProps
|
|
126
|
+
] | [
|
|
127
|
+
TileProps,
|
|
128
|
+
TileProps,
|
|
129
|
+
TileProps,
|
|
130
|
+
TileProps,
|
|
131
|
+
TileProps,
|
|
132
|
+
TileProps,
|
|
133
|
+
TileProps,
|
|
134
|
+
TileProps,
|
|
135
|
+
TileProps,
|
|
136
|
+
TileProps,
|
|
137
|
+
TileProps,
|
|
138
|
+
TileProps,
|
|
139
|
+
TileProps,
|
|
140
|
+
TileProps
|
|
141
|
+
] | [
|
|
142
|
+
TileProps,
|
|
143
|
+
TileProps,
|
|
144
|
+
TileProps,
|
|
145
|
+
TileProps,
|
|
146
|
+
TileProps,
|
|
147
|
+
TileProps,
|
|
148
|
+
TileProps,
|
|
149
|
+
TileProps,
|
|
150
|
+
TileProps,
|
|
151
|
+
TileProps,
|
|
152
|
+
TileProps,
|
|
153
|
+
TileProps,
|
|
154
|
+
TileProps,
|
|
155
|
+
TileProps,
|
|
156
|
+
TileProps
|
|
157
|
+
] | [
|
|
158
|
+
TileProps,
|
|
159
|
+
TileProps,
|
|
160
|
+
TileProps,
|
|
161
|
+
TileProps,
|
|
162
|
+
TileProps,
|
|
163
|
+
TileProps,
|
|
164
|
+
TileProps,
|
|
165
|
+
TileProps,
|
|
166
|
+
TileProps,
|
|
167
|
+
TileProps,
|
|
168
|
+
TileProps,
|
|
169
|
+
TileProps,
|
|
170
|
+
TileProps,
|
|
171
|
+
TileProps,
|
|
172
|
+
TileProps,
|
|
173
|
+
TileProps
|
|
174
|
+
] | [
|
|
175
|
+
TileProps,
|
|
176
|
+
TileProps,
|
|
177
|
+
TileProps,
|
|
178
|
+
TileProps,
|
|
179
|
+
TileProps,
|
|
180
|
+
TileProps,
|
|
181
|
+
TileProps,
|
|
182
|
+
TileProps,
|
|
183
|
+
TileProps,
|
|
184
|
+
TileProps,
|
|
185
|
+
TileProps,
|
|
186
|
+
TileProps,
|
|
187
|
+
TileProps,
|
|
188
|
+
TileProps,
|
|
189
|
+
TileProps,
|
|
190
|
+
TileProps,
|
|
191
|
+
TileProps
|
|
192
|
+
] | [
|
|
193
|
+
TileProps,
|
|
194
|
+
TileProps,
|
|
195
|
+
TileProps,
|
|
196
|
+
TileProps,
|
|
197
|
+
TileProps,
|
|
198
|
+
TileProps,
|
|
199
|
+
TileProps,
|
|
200
|
+
TileProps,
|
|
201
|
+
TileProps,
|
|
202
|
+
TileProps,
|
|
203
|
+
TileProps,
|
|
204
|
+
TileProps,
|
|
205
|
+
TileProps,
|
|
206
|
+
TileProps,
|
|
207
|
+
TileProps,
|
|
208
|
+
TileProps,
|
|
209
|
+
TileProps,
|
|
210
|
+
TileProps
|
|
211
|
+
] | [
|
|
212
|
+
TileProps,
|
|
213
|
+
TileProps,
|
|
214
|
+
TileProps,
|
|
215
|
+
TileProps,
|
|
216
|
+
TileProps,
|
|
217
|
+
TileProps,
|
|
218
|
+
TileProps,
|
|
219
|
+
TileProps,
|
|
220
|
+
TileProps,
|
|
221
|
+
TileProps,
|
|
222
|
+
TileProps,
|
|
223
|
+
TileProps,
|
|
224
|
+
TileProps,
|
|
225
|
+
TileProps,
|
|
226
|
+
TileProps,
|
|
227
|
+
TileProps,
|
|
228
|
+
TileProps,
|
|
229
|
+
TileProps,
|
|
230
|
+
TileProps
|
|
231
|
+
] | [
|
|
232
|
+
TileProps,
|
|
233
|
+
TileProps,
|
|
234
|
+
TileProps,
|
|
235
|
+
TileProps,
|
|
236
|
+
TileProps,
|
|
237
|
+
TileProps,
|
|
238
|
+
TileProps,
|
|
239
|
+
TileProps,
|
|
240
|
+
TileProps,
|
|
241
|
+
TileProps,
|
|
242
|
+
TileProps,
|
|
243
|
+
TileProps,
|
|
244
|
+
TileProps,
|
|
245
|
+
TileProps,
|
|
246
|
+
TileProps,
|
|
247
|
+
TileProps,
|
|
248
|
+
TileProps,
|
|
249
|
+
TileProps,
|
|
250
|
+
TileProps,
|
|
251
|
+
TileProps
|
|
252
|
+
];
|
|
253
|
+
interface MosaicProps {
|
|
254
|
+
layout?: Layout;
|
|
255
|
+
largeHeadlines?: LargeHeadlines;
|
|
256
|
+
tile?: Tiles;
|
|
257
|
+
}
|
|
258
|
+
export { Headline, ModuleSubheadline, ModuleText, Source, AltText, ButtonToggle, Label, Target, Icon, BackgroundColor, BackgroundImage, TextColor, TileProps, Layout, LargeHeadlines, Tiles, MosaicProps };
|
|
@@ -11,7 +11,7 @@ import { HeroProps } from "./HeroProps-cf82a16d.js";
|
|
|
11
11
|
import { ImageStoryProps } from "./ImageStoryProps-24e0335c.js";
|
|
12
12
|
import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
|
|
13
13
|
import { LogosProps } from "./LogosProps-58c84ccc.js";
|
|
14
|
-
import { MosaicProps } from "./MosaicProps-
|
|
14
|
+
import { MosaicProps } from "./MosaicProps-d52c7151.js";
|
|
15
15
|
import { SliderProps } from "./SliderProps-93230a76.js";
|
|
16
16
|
import { StatsProps } from "./StatsProps-bf5ef578.js";
|
|
17
17
|
import { TeaserCardProps } from "./TeaserCardProps-b9c28e78.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { BlogOverviewProps } from "../../BlogOverviewProps-
|
|
2
|
+
import { BlogOverviewProps } from "../../BlogOverviewProps-f385fc47.js";
|
|
3
3
|
declare const BlogOverview: {
|
|
4
4
|
({ latest, more }: BlogOverviewProps): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
displayName: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { BlogPostProps } from "../../BlogPostProps-
|
|
2
|
+
import { BlogPostProps } from "../../BlogPostProps-0910f130.js";
|
|
3
3
|
declare const BlogPost: {
|
|
4
4
|
({ head, content, aside, cta }: BlogPostProps): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
displayName: string;
|
|
@@ -72,6 +72,6 @@ interface SettingsProps {
|
|
|
72
72
|
*/
|
|
73
73
|
seo: SeoProps;
|
|
74
74
|
}
|
|
75
|
-
export * from "../../BlogPostProps-
|
|
76
|
-
export * from "../../BlogOverviewProps-
|
|
75
|
+
export * from "../../BlogPostProps-0910f130.js";
|
|
76
|
+
export * from "../../BlogOverviewProps-f385fc47.js";
|
|
77
77
|
export { Sections, Floating, Inverted, Inverted1, PageProps, Header, Footer, SettingsProps };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
|
-
import { MosaicProps } from "../../MosaicProps-
|
|
3
|
+
import { MosaicProps } from "../../MosaicProps-d52c7151.js";
|
|
4
4
|
declare const MosaicContextDefault: import("react").ForwardRefExoticComponent<MosaicProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const MosaicContext: import("react").Context<import("react").ForwardRefExoticComponent<MosaicProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
6
6
|
declare const Mosaic: import("react").ForwardRefExoticComponent<MosaicProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef, createContext, useContext } from 'react';
|
|
4
4
|
import { Storytelling } from '@kickstartds/content/lib/storytelling';
|
|
5
5
|
|
|
6
|
-
const MosaicContextDefault = forwardRef(({ layout, largeHeadlines,
|
|
6
|
+
const MosaicContextDefault = forwardRef(({ layout, largeHeadlines, tile, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: "dsa-mosaic", children: tile.map((tile, index) => (jsx(Storytelling, { full: true, backgroundColor: tile.backgroundColor, backgroundImage: tile.backgroundImage, box: {
|
|
7
7
|
headline: {
|
|
8
8
|
text: tile?.headline,
|
|
9
9
|
sub: tile?.sub,
|
|
@@ -21,9 +21,14 @@
|
|
|
21
21
|
"description": "Make the headlines larger",
|
|
22
22
|
"default": false
|
|
23
23
|
},
|
|
24
|
-
"
|
|
24
|
+
"tile": {
|
|
25
25
|
"type": "array",
|
|
26
|
+
"title": "Tiles",
|
|
27
|
+
"description": "The tiles to display",
|
|
26
28
|
"items": {
|
|
29
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
30
|
+
"$id": "http://schema.mydesignsystem.com/tile.schema.json",
|
|
31
|
+
"title": "Tile",
|
|
27
32
|
"type": "object",
|
|
28
33
|
"properties": {
|
|
29
34
|
"headline": {
|
|
@@ -112,10 +117,15 @@
|
|
|
112
117
|
"description": "Overwrite the color to use for the text content",
|
|
113
118
|
"type": "string",
|
|
114
119
|
"format": "color"
|
|
120
|
+
},
|
|
121
|
+
"type": {
|
|
122
|
+
"const": "tile"
|
|
115
123
|
}
|
|
116
124
|
},
|
|
117
125
|
"additionalProperties": false
|
|
118
|
-
}
|
|
126
|
+
},
|
|
127
|
+
"minItems": 1,
|
|
128
|
+
"maxItems": 20
|
|
119
129
|
},
|
|
120
130
|
"type": {
|
|
121
131
|
"const": "mosaic"
|
|
@@ -17,72 +17,13 @@
|
|
|
17
17
|
"description": "Make the headlines larger",
|
|
18
18
|
"default": false
|
|
19
19
|
},
|
|
20
|
-
"
|
|
20
|
+
"tile": {
|
|
21
21
|
"type": "array",
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"description": "Headline for the tile",
|
|
28
|
-
"type": "string",
|
|
29
|
-
"format": "markdown"
|
|
30
|
-
},
|
|
31
|
-
"sub": {
|
|
32
|
-
"title": "Module Subheadline",
|
|
33
|
-
"description": "Subheadline below the tile headline",
|
|
34
|
-
"type": "string",
|
|
35
|
-
"format": "markdown"
|
|
36
|
-
},
|
|
37
|
-
"text": {
|
|
38
|
-
"title": "Module Text",
|
|
39
|
-
"description": "Text for tile",
|
|
40
|
-
"type": "string",
|
|
41
|
-
"format": "markdown"
|
|
42
|
-
},
|
|
43
|
-
"image": {
|
|
44
|
-
"type": "object",
|
|
45
|
-
"properties": {
|
|
46
|
-
"src": {
|
|
47
|
-
"$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/src"
|
|
48
|
-
},
|
|
49
|
-
"alt": {
|
|
50
|
-
"$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/alt"
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
"button": {
|
|
55
|
-
"type": "object",
|
|
56
|
-
"properties": {
|
|
57
|
-
"toggle": {
|
|
58
|
-
"title": "Button Toggle",
|
|
59
|
-
"description": "Toggle wether the Button is displayed or not",
|
|
60
|
-
"type": "boolean",
|
|
61
|
-
"default": true
|
|
62
|
-
},
|
|
63
|
-
"label": {
|
|
64
|
-
"$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/label"
|
|
65
|
-
},
|
|
66
|
-
"target": {
|
|
67
|
-
"$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
|
|
68
|
-
},
|
|
69
|
-
"icon": {
|
|
70
|
-
"$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/icon"
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
"additionalProperties": false
|
|
74
|
-
},
|
|
75
|
-
"backgroundColor": {
|
|
76
|
-
"$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/backgroundColor"
|
|
77
|
-
},
|
|
78
|
-
"backgroundImage": {
|
|
79
|
-
"$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/backgroundImage"
|
|
80
|
-
},
|
|
81
|
-
"textColor": {
|
|
82
|
-
"$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/box/properties/textColor"
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
22
|
+
"title": "Tiles",
|
|
23
|
+
"description": "The tiles to display",
|
|
24
|
+
"items": { "$ref": "http://schema.mydesignsystem.com/tile.schema.json" },
|
|
25
|
+
"minItems": 1,
|
|
26
|
+
"maxItems": 20
|
|
86
27
|
}
|
|
87
28
|
},
|
|
88
29
|
"additionalProperties": false
|
|
@@ -1255,9 +1255,14 @@
|
|
|
1255
1255
|
"description": "Make the headlines larger",
|
|
1256
1256
|
"default": false
|
|
1257
1257
|
},
|
|
1258
|
-
"
|
|
1258
|
+
"tile": {
|
|
1259
1259
|
"type": "array",
|
|
1260
|
+
"title": "Tiles",
|
|
1261
|
+
"description": "The tiles to display",
|
|
1260
1262
|
"items": {
|
|
1263
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
1264
|
+
"$id": "http://schema.mydesignsystem.com/tile.schema.json",
|
|
1265
|
+
"title": "Tile",
|
|
1261
1266
|
"type": "object",
|
|
1262
1267
|
"properties": {
|
|
1263
1268
|
"headline": {
|
|
@@ -1346,10 +1351,15 @@
|
|
|
1346
1351
|
"description": "Overwrite the color to use for the text content",
|
|
1347
1352
|
"type": "string",
|
|
1348
1353
|
"format": "color"
|
|
1354
|
+
},
|
|
1355
|
+
"type": {
|
|
1356
|
+
"const": "tile"
|
|
1349
1357
|
}
|
|
1350
1358
|
},
|
|
1351
1359
|
"additionalProperties": false
|
|
1352
|
-
}
|
|
1360
|
+
},
|
|
1361
|
+
"minItems": 1,
|
|
1362
|
+
"maxItems": 20
|
|
1353
1363
|
},
|
|
1354
1364
|
"type": {
|
|
1355
1365
|
"const": "mosaic"
|
|
@@ -1933,11 +1933,11 @@
|
|
|
1933
1933
|
"id": "components-mosaic--colorful-tiles",
|
|
1934
1934
|
"group": "Components/Mosaic",
|
|
1935
1935
|
"name": "ColorfulTiles",
|
|
1936
|
-
"code": "<Mosaic\n layout=\"alternate\"\n
|
|
1936
|
+
"code": "<Mosaic\n layout=\"alternate\"\n tile={[\n {\n backgroundColor: '#81005a',\n button: {\n label: 'Book a meeting',\n toggle: true\n },\n headline: 'Collaborative Environment',\n image: {\n src: 'img/mosaic-1.png'\n },\n text: 'Our team thrives in a collaborative environment, fostering creativity and innovation.'\n },\n {\n backgroundColor: '#003380',\n button: {\n label: 'Book a meeting',\n toggle: true\n },\n headline: 'Modern Infrastructure',\n image: {\n src: 'img/mosaic-2.png'\n },\n text: 'Our state-of-the-art office facilities inspire productivity and efficiency.'\n },\n {\n backgroundColor: '#004241',\n button: {\n label: 'Book a meeting',\n toggle: true\n },\n headline: 'Teamwork',\n image: {\n src: 'img/mosaic-3.png'\n },\n text: 'We believe in the power of teamwork. Together, we can achieve great things.'\n }\n ]}\n/>",
|
|
1937
1937
|
"args": {
|
|
1938
1938
|
"layout": "alternate",
|
|
1939
1939
|
"largeHeadlines": false,
|
|
1940
|
-
"
|
|
1940
|
+
"tile": [
|
|
1941
1941
|
{
|
|
1942
1942
|
"image": {
|
|
1943
1943
|
"src": "img/mosaic-1.png"
|
|
@@ -1982,11 +1982,11 @@
|
|
|
1982
1982
|
"id": "components-mosaic--colorful-text-with-illustrations",
|
|
1983
1983
|
"group": "Components/Mosaic",
|
|
1984
1984
|
"name": "ColorfulTextWithIllustrations",
|
|
1985
|
-
"code": "<Mosaic\n layout=\"textLeft\"\n
|
|
1985
|
+
"code": "<Mosaic\n layout=\"textLeft\"\n tile={[\n {\n button: {\n label: 'Book a meeting',\n toggle: false\n },\n headline: 'Effective Communication',\n image: {\n src: 'img/mosaic-2_1.svg'\n },\n sub: 'We believe in clear and effective communication. Our team members are always ready to share ideas and solutions.',\n textColor: '#FCFF7D'\n },\n {\n button: {\n label: 'Book a meeting',\n toggle: false\n },\n headline: 'Data-Driven Decisions',\n image: {\n src: 'img/mosaic-2_2.svg'\n },\n sub: 'We make decisions based on data. Our strategies are always backed by solid facts and figures.',\n textColor: '#7DD0FF'\n },\n {\n button: {\n label: 'Book a meeting',\n toggle: false\n },\n headline: 'Innovative Design',\n image: {\n src: 'img/mosaic-2_3.svg'\n },\n sub: 'We are committed to creating innovative designs. Our team is always exploring new ways to improve user experience.',\n textColor: '#FF7DC3'\n }\n ]}\n/>",
|
|
1986
1986
|
"args": {
|
|
1987
1987
|
"layout": "textLeft",
|
|
1988
1988
|
"largeHeadlines": false,
|
|
1989
|
-
"
|
|
1989
|
+
"tile": [
|
|
1990
1990
|
{
|
|
1991
1991
|
"image": {
|
|
1992
1992
|
"src": "img/mosaic-2_1.svg"
|
|
@@ -89,10 +89,7 @@
|
|
|
89
89
|
--l-section--content-padding: var(--dsa-section__content--padding, var(--ks-spacing-m));
|
|
90
90
|
--l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
|
|
91
91
|
--l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
|
|
92
|
-
--l-section--background-bold: var(
|
|
93
|
-
--dsa-section--background-color_bold,
|
|
94
|
-
var(--ks-background-color-primary)
|
|
95
|
-
);
|
|
92
|
+
--l-section--background-bold: var(--dsa-section--background-color_bold, var(--ks-background-color-primary));
|
|
96
93
|
--l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
|
|
97
94
|
--l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
|
|
98
95
|
--l-section--gutter-small: var(--dsa-section--gutter_small, var(--ks-spacing-xs));
|
|
@@ -1241,9 +1241,14 @@
|
|
|
1241
1241
|
"description": "Make the headlines larger",
|
|
1242
1242
|
"default": false
|
|
1243
1243
|
},
|
|
1244
|
-
"
|
|
1244
|
+
"tile": {
|
|
1245
1245
|
"type": "array",
|
|
1246
|
+
"title": "Tiles",
|
|
1247
|
+
"description": "The tiles to display",
|
|
1246
1248
|
"items": {
|
|
1249
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
1250
|
+
"$id": "http://schema.mydesignsystem.com/tile.schema.json",
|
|
1251
|
+
"title": "Tile",
|
|
1247
1252
|
"type": "object",
|
|
1248
1253
|
"properties": {
|
|
1249
1254
|
"headline": {
|
|
@@ -1332,10 +1337,15 @@
|
|
|
1332
1337
|
"description": "Overwrite the color to use for the text content",
|
|
1333
1338
|
"type": "string",
|
|
1334
1339
|
"format": "color"
|
|
1340
|
+
},
|
|
1341
|
+
"type": {
|
|
1342
|
+
"const": "tile"
|
|
1335
1343
|
}
|
|
1336
1344
|
},
|
|
1337
1345
|
"additionalProperties": false
|
|
1338
|
-
}
|
|
1346
|
+
},
|
|
1347
|
+
"minItems": 1,
|
|
1348
|
+
"maxItems": 20
|
|
1339
1349
|
},
|
|
1340
1350
|
"type": {
|
|
1341
1351
|
"const": "mosaic"
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/tile.schema.json",
|
|
4
|
+
"title": "Tile",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"headline": {
|
|
8
|
+
"title": "Headline",
|
|
9
|
+
"description": "Headline for the tile",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"format": "markdown"
|
|
12
|
+
},
|
|
13
|
+
"sub": {
|
|
14
|
+
"title": "Module Subheadline",
|
|
15
|
+
"description": "Subheadline below the tile headline",
|
|
16
|
+
"type": "string",
|
|
17
|
+
"format": "markdown"
|
|
18
|
+
},
|
|
19
|
+
"text": {
|
|
20
|
+
"title": "Module Text",
|
|
21
|
+
"description": "Text for tile",
|
|
22
|
+
"type": "string",
|
|
23
|
+
"format": "markdown"
|
|
24
|
+
},
|
|
25
|
+
"image": {
|
|
26
|
+
"type": "object",
|
|
27
|
+
"properties": {
|
|
28
|
+
"src": {
|
|
29
|
+
"title": "Source",
|
|
30
|
+
"description": "Picture source",
|
|
31
|
+
"type": "string",
|
|
32
|
+
"format": "image",
|
|
33
|
+
"examples": [
|
|
34
|
+
"img/close-up-young-business-team-working.png"
|
|
35
|
+
]
|
|
36
|
+
},
|
|
37
|
+
"alt": {
|
|
38
|
+
"title": "Alt text",
|
|
39
|
+
"description": "Alt text to display for picture",
|
|
40
|
+
"type": "string"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"additionalProperties": false
|
|
44
|
+
},
|
|
45
|
+
"button": {
|
|
46
|
+
"type": "object",
|
|
47
|
+
"properties": {
|
|
48
|
+
"toggle": {
|
|
49
|
+
"title": "Button Toggle",
|
|
50
|
+
"description": "Toggle wether the Button is displayed or not",
|
|
51
|
+
"type": "boolean",
|
|
52
|
+
"default": true
|
|
53
|
+
},
|
|
54
|
+
"label": {
|
|
55
|
+
"type": "string",
|
|
56
|
+
"title": "Label",
|
|
57
|
+
"description": "Text content to display inside the button",
|
|
58
|
+
"examples": [
|
|
59
|
+
"Book a meeting"
|
|
60
|
+
]
|
|
61
|
+
},
|
|
62
|
+
"target": {
|
|
63
|
+
"type": "string",
|
|
64
|
+
"title": "Target",
|
|
65
|
+
"description": "Target that should be linked, makes the button behave like a link semantically",
|
|
66
|
+
"format": "uri"
|
|
67
|
+
},
|
|
68
|
+
"icon": {
|
|
69
|
+
"type": "string",
|
|
70
|
+
"title": "Icon",
|
|
71
|
+
"description": "Choose an icon"
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
"additionalProperties": false
|
|
75
|
+
},
|
|
76
|
+
"backgroundColor": {
|
|
77
|
+
"title": "Background color",
|
|
78
|
+
"description": "Background color for the whole element",
|
|
79
|
+
"type": "string",
|
|
80
|
+
"format": "color"
|
|
81
|
+
},
|
|
82
|
+
"backgroundImage": {
|
|
83
|
+
"title": "Background image",
|
|
84
|
+
"description": "Background image for the whole element",
|
|
85
|
+
"type": "string",
|
|
86
|
+
"format": "image"
|
|
87
|
+
},
|
|
88
|
+
"textColor": {
|
|
89
|
+
"title": "Text color",
|
|
90
|
+
"description": "Overwrite the color to use for the text content",
|
|
91
|
+
"type": "string",
|
|
92
|
+
"format": "color"
|
|
93
|
+
},
|
|
94
|
+
"type": {
|
|
95
|
+
"const": "tile"
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
"additionalProperties": false
|
|
99
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/tile.schema.json",
|
|
4
|
+
"title": "Tile",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"headline": {
|
|
8
|
+
"title": "Headline",
|
|
9
|
+
"description": "Headline for the tile",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"format": "markdown"
|
|
12
|
+
},
|
|
13
|
+
"sub": {
|
|
14
|
+
"title": "Module Subheadline",
|
|
15
|
+
"description": "Subheadline below the tile headline",
|
|
16
|
+
"type": "string",
|
|
17
|
+
"format": "markdown"
|
|
18
|
+
},
|
|
19
|
+
"text": {
|
|
20
|
+
"title": "Module Text",
|
|
21
|
+
"description": "Text for tile",
|
|
22
|
+
"type": "string",
|
|
23
|
+
"format": "markdown"
|
|
24
|
+
},
|
|
25
|
+
"image": {
|
|
26
|
+
"type": "object",
|
|
27
|
+
"properties": {
|
|
28
|
+
"src": {
|
|
29
|
+
"$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/src"
|
|
30
|
+
},
|
|
31
|
+
"alt": {
|
|
32
|
+
"$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/alt"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"button": {
|
|
37
|
+
"type": "object",
|
|
38
|
+
"properties": {
|
|
39
|
+
"toggle": {
|
|
40
|
+
"title": "Button Toggle",
|
|
41
|
+
"description": "Toggle wether the Button is displayed or not",
|
|
42
|
+
"type": "boolean",
|
|
43
|
+
"default": true
|
|
44
|
+
},
|
|
45
|
+
"label": {
|
|
46
|
+
"$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/label"
|
|
47
|
+
},
|
|
48
|
+
"target": {
|
|
49
|
+
"$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
|
|
50
|
+
},
|
|
51
|
+
"icon": {
|
|
52
|
+
"$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/icon"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
"additionalProperties": false
|
|
56
|
+
},
|
|
57
|
+
"backgroundColor": {
|
|
58
|
+
"$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/backgroundColor"
|
|
59
|
+
},
|
|
60
|
+
"backgroundImage": {
|
|
61
|
+
"$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/backgroundImage"
|
|
62
|
+
},
|
|
63
|
+
"textColor": {
|
|
64
|
+
"$ref": "http://schema.kickstartds.com/content/storytelling.schema.json#/properties/box/properties/textColor"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"additionalProperties": false
|
|
68
|
+
}
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 15 May 2024 10:07:50 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
|
|
2730
|
+
* Generated on Wed, 15 May 2024 10:07:55 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
|
|
5461
|
+
* Generated on Wed, 15 May 2024 10:07:53 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
|
|
8462
|
+
* Generated on Wed, 15 May 2024 10:07:57 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
package/package.json
CHANGED
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This file was automatically generated by json-schema-to-typescript.
|
|
3
|
-
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
4
|
-
* and run json-schema-to-typescript to regenerate this file.
|
|
5
|
-
*/
|
|
6
|
-
/**
|
|
7
|
-
* Layout of the mosaic component
|
|
8
|
-
*/
|
|
9
|
-
type Layout = "alternate" | "textLeft" | "textRight";
|
|
10
|
-
/**
|
|
11
|
-
* Make the headlines larger
|
|
12
|
-
*/
|
|
13
|
-
type LargeHeadlines = boolean;
|
|
14
|
-
/**
|
|
15
|
-
* Headline for the tile
|
|
16
|
-
*/
|
|
17
|
-
type Headline = string;
|
|
18
|
-
/**
|
|
19
|
-
* Subheadline below the tile headline
|
|
20
|
-
*/
|
|
21
|
-
type ModuleSubheadline = string;
|
|
22
|
-
/**
|
|
23
|
-
* Text for tile
|
|
24
|
-
*/
|
|
25
|
-
type ModuleText = string;
|
|
26
|
-
/**
|
|
27
|
-
* Picture source
|
|
28
|
-
*/
|
|
29
|
-
type Source = string;
|
|
30
|
-
/**
|
|
31
|
-
* Alt text to display for picture
|
|
32
|
-
*/
|
|
33
|
-
type AltText = string;
|
|
34
|
-
/**
|
|
35
|
-
* Toggle wether the Button is displayed or not
|
|
36
|
-
*/
|
|
37
|
-
type ButtonToggle = boolean;
|
|
38
|
-
/**
|
|
39
|
-
* Text content to display inside the button
|
|
40
|
-
*/
|
|
41
|
-
type Label = string;
|
|
42
|
-
/**
|
|
43
|
-
* Target that should be linked, makes the button behave like a link semantically
|
|
44
|
-
*/
|
|
45
|
-
type Target = string;
|
|
46
|
-
/**
|
|
47
|
-
* Choose an icon
|
|
48
|
-
*/
|
|
49
|
-
type Icon = string;
|
|
50
|
-
/**
|
|
51
|
-
* Background color for the whole element
|
|
52
|
-
*/
|
|
53
|
-
type BackgroundColor = string;
|
|
54
|
-
/**
|
|
55
|
-
* Background image for the whole element
|
|
56
|
-
*/
|
|
57
|
-
type BackgroundImage = string;
|
|
58
|
-
/**
|
|
59
|
-
* Overwrite the color to use for the text content
|
|
60
|
-
*/
|
|
61
|
-
type TextColor = string;
|
|
62
|
-
interface MosaicProps {
|
|
63
|
-
layout?: Layout;
|
|
64
|
-
largeHeadlines?: LargeHeadlines;
|
|
65
|
-
tiles?: {
|
|
66
|
-
headline?: Headline;
|
|
67
|
-
sub?: ModuleSubheadline;
|
|
68
|
-
text?: ModuleText;
|
|
69
|
-
image?: {
|
|
70
|
-
src?: Source;
|
|
71
|
-
alt?: AltText;
|
|
72
|
-
};
|
|
73
|
-
button?: {
|
|
74
|
-
toggle?: ButtonToggle;
|
|
75
|
-
label?: Label;
|
|
76
|
-
target?: Target;
|
|
77
|
-
icon?: Icon;
|
|
78
|
-
};
|
|
79
|
-
backgroundColor?: BackgroundColor;
|
|
80
|
-
backgroundImage?: BackgroundImage;
|
|
81
|
-
textColor?: TextColor;
|
|
82
|
-
}[];
|
|
83
|
-
}
|
|
84
|
-
export { Layout, LargeHeadlines, Headline, ModuleSubheadline, ModuleText, Source, AltText, ButtonToggle, Label, Target, Icon, BackgroundColor, BackgroundImage, TextColor, MosaicProps };
|
|
File without changes
|
|
File without changes
|