@kickstartds/ds-agency-premium 1.6.8 → 1.6.10
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/hero/hero.css +29 -0
- package/dist/components/hero/index.js +1 -1
- package/dist/components/image-story/image-story.schema.json +5 -1
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +0 -52
- package/dist/components/tile/tile.schema.json +8 -2
- 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/components/image/image.css +0 -18
- package/dist/components/image/image.schema.dereffed.json +0 -105
- package/dist/components/image/image.schema.json +0 -95
- package/dist/components/image/index.d.ts +0 -88
- package/dist/components/image/index.js +0 -11
- package/dist/components/picture/picture.schema.json +0 -88
|
@@ -1,4 +1,11 @@
|
|
|
1
|
+
.l-container--hero {
|
|
2
|
+
/* stylelint-disable-next-line property-no-unknown */
|
|
3
|
+
container-name: hero;
|
|
4
|
+
}
|
|
5
|
+
|
|
1
6
|
.dsa-hero {
|
|
7
|
+
--dsa-hero--min-height: 18rem;
|
|
8
|
+
--dsa-hero--min-height_small: 13.2rem;
|
|
2
9
|
--dsa-hero__headline--color: var(--dsa-headline--color);
|
|
3
10
|
--dsa-hero__subheadline--color: var(--dsa-headline__subheadline--color);
|
|
4
11
|
--dsa-hero_color-neutral__headline--color: var(--ks-text-color-default);
|
|
@@ -12,6 +19,24 @@
|
|
|
12
19
|
--dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
|
|
13
20
|
--dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
|
|
14
21
|
}
|
|
22
|
+
@container hero (min-width: 640px) {
|
|
23
|
+
.dsa-hero {
|
|
24
|
+
--dsa-hero--min-height: 21rem;
|
|
25
|
+
--dsa-hero--min-height_small: 13.35rem;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
@container hero (min-width: 960px) {
|
|
29
|
+
.dsa-hero {
|
|
30
|
+
--dsa-hero--min-height: 31.5rem;
|
|
31
|
+
--dsa-hero--min-height_small: 15.8rem;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
@container hero (min-width: 1024px) {
|
|
35
|
+
.dsa-hero {
|
|
36
|
+
--dsa-hero--min-height: 35rem;
|
|
37
|
+
--dsa-hero--min-height_small: 20rem;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
15
40
|
|
|
16
41
|
.l-container--visual {
|
|
17
42
|
/* stylelint-disable-next-line property-no-unknown */
|
|
@@ -21,6 +46,7 @@
|
|
|
21
46
|
.c-visual.dsa-hero {
|
|
22
47
|
--c-visual_overlay--background-size: 100%;
|
|
23
48
|
--c-visual_overlay--background: transparent;
|
|
49
|
+
min-height: var(--dsa-hero--min-height);
|
|
24
50
|
}
|
|
25
51
|
.c-visual.dsa-hero .c-visual__box {
|
|
26
52
|
--c-visual_box--background: var(--dsa-hero__textbox--background-color, var(--ks-color-bg-alpha-2));
|
|
@@ -37,6 +63,9 @@
|
|
|
37
63
|
--dsa-hero__headline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
|
|
38
64
|
--dsa-hero__subheadline--color: var(--dsa-hero_color-neutral__copy--color, var(--ks-text-color-default));
|
|
39
65
|
}
|
|
66
|
+
.c-visual.dsa-hero.c-visual--small {
|
|
67
|
+
min-height: var(--dsa-hero--min-height_small);
|
|
68
|
+
}
|
|
40
69
|
@container visual (min-width: 640px) {
|
|
41
70
|
.c-visual.dsa-hero {
|
|
42
71
|
--c-visual_overlay--background: radial-gradient(
|
|
@@ -14,7 +14,7 @@ const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightT
|
|
|
14
14
|
// @ts-expect-error
|
|
15
15
|
, {
|
|
16
16
|
// @ts-expect-error
|
|
17
|
-
value: ButtonGroup, children: jsx(Container, { name: "
|
|
17
|
+
value: ButtonGroup, children: jsx(Container, { name: "hero", children: jsx(VisualContextDefault, { ...rest, ref: ref, className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : "", className), height: height, overlay: overlay, box: {
|
|
18
18
|
background: textbox === true ? "solid" : "transparent",
|
|
19
19
|
enabled: true,
|
|
20
20
|
vertical: textPosition === "below" ? "bottom" : "center",
|
|
@@ -58,7 +58,11 @@
|
|
|
58
58
|
"format": "image"
|
|
59
59
|
},
|
|
60
60
|
"aspectRatio": {
|
|
61
|
-
"
|
|
61
|
+
"type": "string",
|
|
62
|
+
"title": "Aspect Ratio",
|
|
63
|
+
"description": "The aspect ratio of the image",
|
|
64
|
+
"enum": ["unset", "square", "wide", "landscape"],
|
|
65
|
+
"default": "unset"
|
|
62
66
|
},
|
|
63
67
|
"alt": {
|
|
64
68
|
"title": "Alt text",
|
|
@@ -2181,58 +2181,6 @@
|
|
|
2181
2181
|
},
|
|
2182
2182
|
"screenshot": "img/screenshots/components-image-text--above-layout.png"
|
|
2183
2183
|
},
|
|
2184
|
-
{
|
|
2185
|
-
"id": "components-image--responsive-image",
|
|
2186
|
-
"group": "Components/Image",
|
|
2187
|
-
"name": "ResponsiveImage",
|
|
2188
|
-
"code": "<Image\n alt=\"Agency\"\n aspectRatio=\"unset\"\n lazy\n sources={[\n {\n srcSet: 'img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png'\n },\n {\n srcSet: 'img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png'\n },\n {\n srcSet: 'img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png'\n }\n ]}\n src=\"img/close-up-young-business-team-working.png\"\n/>",
|
|
2189
|
-
"args": {
|
|
2190
|
-
"src": "img/close-up-young-business-team-working.png",
|
|
2191
|
-
"aspectRatio": "unset",
|
|
2192
|
-
"lazy": true,
|
|
2193
|
-
"alt": "Agency",
|
|
2194
|
-
"sources": [
|
|
2195
|
-
{
|
|
2196
|
-
"srcSet": "img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png"
|
|
2197
|
-
},
|
|
2198
|
-
{
|
|
2199
|
-
"srcSet": "img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png"
|
|
2200
|
-
},
|
|
2201
|
-
{
|
|
2202
|
-
"srcSet": "img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png"
|
|
2203
|
-
}
|
|
2204
|
-
]
|
|
2205
|
-
},
|
|
2206
|
-
"screenshot": "img/screenshots/components-image--responsive-image.png"
|
|
2207
|
-
},
|
|
2208
|
-
{
|
|
2209
|
-
"id": "components-image--preset-size",
|
|
2210
|
-
"group": "Components/Image",
|
|
2211
|
-
"name": "PresetSize",
|
|
2212
|
-
"code": "<Image\n alt=\"Agency\"\n aspectRatio=\"unset\"\n height=\"300px\"\n lazy\n src=\"img/close-up-young-business-team-working.png\"\n width=\"400px\"\n/>",
|
|
2213
|
-
"args": {
|
|
2214
|
-
"src": "img/close-up-young-business-team-working.png",
|
|
2215
|
-
"aspectRatio": "unset",
|
|
2216
|
-
"lazy": true,
|
|
2217
|
-
"alt": "Agency",
|
|
2218
|
-
"width": "400px",
|
|
2219
|
-
"height": "300px"
|
|
2220
|
-
},
|
|
2221
|
-
"screenshot": "img/screenshots/components-image--preset-size.png"
|
|
2222
|
-
},
|
|
2223
|
-
{
|
|
2224
|
-
"id": "components-image--custom-aspect-ratio",
|
|
2225
|
-
"group": "Components/Image",
|
|
2226
|
-
"name": "CustomAspectRatio",
|
|
2227
|
-
"code": "<Image\n alt=\"Agency\"\n aspectRatio=\"square\"\n lazy\n src=\"img/close-up-young-business-team-working.png\"\n/>",
|
|
2228
|
-
"args": {
|
|
2229
|
-
"src": "img/close-up-young-business-team-working.png",
|
|
2230
|
-
"aspectRatio": "square",
|
|
2231
|
-
"lazy": true,
|
|
2232
|
-
"alt": "Agency"
|
|
2233
|
-
},
|
|
2234
|
-
"screenshot": "img/screenshots/components-image--custom-aspect-ratio.png"
|
|
2235
|
-
},
|
|
2236
2184
|
{
|
|
2237
2185
|
"id": "components-logos--centered-with-button",
|
|
2238
2186
|
"group": "Components/Logos",
|
|
@@ -26,10 +26,16 @@
|
|
|
26
26
|
"type": "object",
|
|
27
27
|
"properties": {
|
|
28
28
|
"src": {
|
|
29
|
-
"
|
|
29
|
+
"title": "Source",
|
|
30
|
+
"description": "Picture source",
|
|
31
|
+
"type": "string",
|
|
32
|
+
"format": "image",
|
|
33
|
+
"examples": ["img/close-up-young-business-team-working.png"]
|
|
30
34
|
},
|
|
31
35
|
"alt": {
|
|
32
|
-
"
|
|
36
|
+
"title": "Alt text",
|
|
37
|
+
"description": "Alt text to display for picture",
|
|
38
|
+
"type": "string"
|
|
33
39
|
}
|
|
34
40
|
}
|
|
35
41
|
},
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Mon, 18 Nov 2024 19:05:58 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 Mon, 18 Nov 2024 19:06:02 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 Mon, 18 Nov 2024 19:06:00 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 Mon, 18 Nov 2024 19:06:03 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,18 +0,0 @@
|
|
|
1
|
-
.dsa-image {
|
|
2
|
-
--dsa-image--ratio-square: 1/1;
|
|
3
|
-
--dsa-image--ratio-wide: 4/3;
|
|
4
|
-
--dsa-image--ratio-landscape: 16/9;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.dsa-image {
|
|
8
|
-
object-fit: cover;
|
|
9
|
-
}
|
|
10
|
-
.dsa-image--square {
|
|
11
|
-
aspect-ratio: var(--c-image--ratio-square);
|
|
12
|
-
}
|
|
13
|
-
.dsa-image--wide {
|
|
14
|
-
aspect-ratio: var(--c-image--ratio-wide);
|
|
15
|
-
}
|
|
16
|
-
.dsa-image--landscape {
|
|
17
|
-
aspect-ratio: var(--c-image--ratio-landscape);
|
|
18
|
-
}
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
-
"$id": "http://schema.mydesignsystem.com/image.schema.json",
|
|
4
|
-
"title": "Image",
|
|
5
|
-
"description": "Base component to display a picture",
|
|
6
|
-
"type": "object",
|
|
7
|
-
"properties": {
|
|
8
|
-
"src": {
|
|
9
|
-
"title": "Source",
|
|
10
|
-
"description": "Picture source",
|
|
11
|
-
"type": "string",
|
|
12
|
-
"format": "image",
|
|
13
|
-
"examples": [
|
|
14
|
-
"img/close-up-young-business-team-working.png"
|
|
15
|
-
]
|
|
16
|
-
},
|
|
17
|
-
"srcSet": {
|
|
18
|
-
"title": "Picture sourceset",
|
|
19
|
-
"description": "Use a srcSet to display picture",
|
|
20
|
-
"type": "string",
|
|
21
|
-
"format": "image"
|
|
22
|
-
},
|
|
23
|
-
"alt": {
|
|
24
|
-
"title": "Alt text",
|
|
25
|
-
"description": "Alt text to display for picture",
|
|
26
|
-
"type": "string"
|
|
27
|
-
},
|
|
28
|
-
"width": {
|
|
29
|
-
"title": "Width",
|
|
30
|
-
"description": "Width of the picture",
|
|
31
|
-
"type": "integer",
|
|
32
|
-
"minimum": 0
|
|
33
|
-
},
|
|
34
|
-
"height": {
|
|
35
|
-
"title": "Height",
|
|
36
|
-
"description": "Height of the picture",
|
|
37
|
-
"type": "integer",
|
|
38
|
-
"minimum": 0
|
|
39
|
-
},
|
|
40
|
-
"aspectRatio": {
|
|
41
|
-
"type": "string",
|
|
42
|
-
"title": "Aspect Ratio",
|
|
43
|
-
"description": "The aspect ratio of the image",
|
|
44
|
-
"enum": [
|
|
45
|
-
"unset",
|
|
46
|
-
"square",
|
|
47
|
-
"wide",
|
|
48
|
-
"landscape"
|
|
49
|
-
],
|
|
50
|
-
"default": "unset"
|
|
51
|
-
},
|
|
52
|
-
"className": {
|
|
53
|
-
"title": "Additional Classes",
|
|
54
|
-
"description": "Add additional css classes that should be applied to the image",
|
|
55
|
-
"type": "string"
|
|
56
|
-
},
|
|
57
|
-
"style": {
|
|
58
|
-
"title": "`style` attribute",
|
|
59
|
-
"description": "Define a style attribute for the picture",
|
|
60
|
-
"type": "string"
|
|
61
|
-
},
|
|
62
|
-
"lazy": {
|
|
63
|
-
"title": "Lazy",
|
|
64
|
-
"description": "Load the picture lazily",
|
|
65
|
-
"type": "boolean",
|
|
66
|
-
"default": true
|
|
67
|
-
},
|
|
68
|
-
"sources": {
|
|
69
|
-
"title": "Sources",
|
|
70
|
-
"description": "Additional sources. This will result in a `picture`-Element",
|
|
71
|
-
"type": "array",
|
|
72
|
-
"items": {
|
|
73
|
-
"type": "object",
|
|
74
|
-
"properties": {
|
|
75
|
-
"srcSet": {
|
|
76
|
-
"title": "Picture sourceset",
|
|
77
|
-
"description": "Use a srcSet to display picture",
|
|
78
|
-
"type": "string",
|
|
79
|
-
"format": "image"
|
|
80
|
-
},
|
|
81
|
-
"media": {
|
|
82
|
-
"title": "Media for picture",
|
|
83
|
-
"description": "Media attribute for source",
|
|
84
|
-
"type": "string"
|
|
85
|
-
},
|
|
86
|
-
"type": {
|
|
87
|
-
"title": "Type for picture",
|
|
88
|
-
"description": "Type attribute for source",
|
|
89
|
-
"type": "string"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
"additionalProperties": false
|
|
93
|
-
}
|
|
94
|
-
},
|
|
95
|
-
"pictureClassName": {
|
|
96
|
-
"title": "`class` attribute",
|
|
97
|
-
"description": "Set additional class(es) to the picture",
|
|
98
|
-
"type": "string"
|
|
99
|
-
},
|
|
100
|
-
"type": {
|
|
101
|
-
"const": "image"
|
|
102
|
-
}
|
|
103
|
-
},
|
|
104
|
-
"additionalProperties": false
|
|
105
|
-
}
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
-
"$id": "http://schema.mydesignsystem.com/image.schema.json",
|
|
4
|
-
"title": "Image",
|
|
5
|
-
"description": "Base component to display a picture",
|
|
6
|
-
"type": "object",
|
|
7
|
-
"properties": {
|
|
8
|
-
"src": {
|
|
9
|
-
"title": "Source",
|
|
10
|
-
"description": "Picture source",
|
|
11
|
-
"type": "string",
|
|
12
|
-
"format": "image",
|
|
13
|
-
"examples": ["img/close-up-young-business-team-working.png"]
|
|
14
|
-
},
|
|
15
|
-
"srcSet": {
|
|
16
|
-
"title": "Picture sourceset",
|
|
17
|
-
"description": "Use a srcSet to display picture",
|
|
18
|
-
"type": "string",
|
|
19
|
-
"format": "image"
|
|
20
|
-
},
|
|
21
|
-
"alt": {
|
|
22
|
-
"title": "Alt text",
|
|
23
|
-
"description": "Alt text to display for picture",
|
|
24
|
-
"type": "string"
|
|
25
|
-
},
|
|
26
|
-
"width": {
|
|
27
|
-
"title": "Width",
|
|
28
|
-
"description": "Width of the picture",
|
|
29
|
-
"type": "integer",
|
|
30
|
-
"minimum": 0
|
|
31
|
-
},
|
|
32
|
-
"height": {
|
|
33
|
-
"title": "Height",
|
|
34
|
-
"description": "Height of the picture",
|
|
35
|
-
"type": "integer",
|
|
36
|
-
"minimum": 0
|
|
37
|
-
},
|
|
38
|
-
"aspectRatio": {
|
|
39
|
-
"type": "string",
|
|
40
|
-
"title": "Aspect Ratio",
|
|
41
|
-
"description": "The aspect ratio of the image",
|
|
42
|
-
"enum": ["unset", "square", "wide", "landscape"],
|
|
43
|
-
"default": "unset"
|
|
44
|
-
},
|
|
45
|
-
"className": {
|
|
46
|
-
"title": "Additional Classes",
|
|
47
|
-
"description": "Add additional css classes that should be applied to the image",
|
|
48
|
-
"type": "string"
|
|
49
|
-
},
|
|
50
|
-
"style": {
|
|
51
|
-
"title": "`style` attribute",
|
|
52
|
-
"description": "Define a style attribute for the picture",
|
|
53
|
-
"type": "string"
|
|
54
|
-
},
|
|
55
|
-
"lazy": {
|
|
56
|
-
"title": "Lazy",
|
|
57
|
-
"description": "Load the picture lazily",
|
|
58
|
-
"type": "boolean",
|
|
59
|
-
"default": true
|
|
60
|
-
},
|
|
61
|
-
"sources": {
|
|
62
|
-
"title": "Sources",
|
|
63
|
-
"description": "Additional sources. This will result in a `picture`-Element",
|
|
64
|
-
"type": "array",
|
|
65
|
-
"items": {
|
|
66
|
-
"type": "object",
|
|
67
|
-
"properties": {
|
|
68
|
-
"srcSet": {
|
|
69
|
-
"title": "Picture sourceset",
|
|
70
|
-
"description": "Use a srcSet to display picture",
|
|
71
|
-
"type": "string",
|
|
72
|
-
"format": "image"
|
|
73
|
-
},
|
|
74
|
-
"media": {
|
|
75
|
-
"title": "Media for picture",
|
|
76
|
-
"description": "Media attribute for source",
|
|
77
|
-
"type": "string"
|
|
78
|
-
},
|
|
79
|
-
"type": {
|
|
80
|
-
"title": "Type for picture",
|
|
81
|
-
"description": "Type attribute for source",
|
|
82
|
-
"type": "string"
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
"additionalProperties": false
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
|
-
"pictureClassName": {
|
|
89
|
-
"title": "`class` attribute",
|
|
90
|
-
"description": "Set additional class(es) to the picture",
|
|
91
|
-
"type": "string"
|
|
92
|
-
}
|
|
93
|
-
},
|
|
94
|
-
"additionalProperties": false
|
|
95
|
-
}
|
|
@@ -1,88 +0,0 @@
|
|
|
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
|
-
* Picture source
|
|
11
|
-
*/
|
|
12
|
-
type Source = string;
|
|
13
|
-
/**
|
|
14
|
-
* Use a srcSet to display picture
|
|
15
|
-
*/
|
|
16
|
-
type PictureSourceset = string;
|
|
17
|
-
/**
|
|
18
|
-
* Alt text to display for picture
|
|
19
|
-
*/
|
|
20
|
-
type AltText = string;
|
|
21
|
-
/**
|
|
22
|
-
* Width of the picture
|
|
23
|
-
*/
|
|
24
|
-
type Width = number;
|
|
25
|
-
/**
|
|
26
|
-
* Height of the picture
|
|
27
|
-
*/
|
|
28
|
-
type Height = number;
|
|
29
|
-
/**
|
|
30
|
-
* The aspect ratio of the image
|
|
31
|
-
*/
|
|
32
|
-
type AspectRatio = "unset" | "square" | "wide" | "landscape";
|
|
33
|
-
/**
|
|
34
|
-
* Add additional css classes that should be applied to the image
|
|
35
|
-
*/
|
|
36
|
-
type AdditionalClasses = string;
|
|
37
|
-
/**
|
|
38
|
-
* Define a style attribute for the picture
|
|
39
|
-
*/
|
|
40
|
-
type StyleAttribute = string;
|
|
41
|
-
/**
|
|
42
|
-
* Load the picture lazily
|
|
43
|
-
*/
|
|
44
|
-
type Lazy = boolean;
|
|
45
|
-
/**
|
|
46
|
-
* Use a srcSet to display picture
|
|
47
|
-
*/
|
|
48
|
-
type PictureSourceset1 = string;
|
|
49
|
-
/**
|
|
50
|
-
* Media attribute for source
|
|
51
|
-
*/
|
|
52
|
-
type MediaForPicture = string;
|
|
53
|
-
/**
|
|
54
|
-
* Type attribute for source
|
|
55
|
-
*/
|
|
56
|
-
type TypeForPicture = string;
|
|
57
|
-
/**
|
|
58
|
-
* Additional sources. This will result in a `picture`-Element
|
|
59
|
-
*/
|
|
60
|
-
type Sources = {
|
|
61
|
-
srcSet?: PictureSourceset1;
|
|
62
|
-
media?: MediaForPicture;
|
|
63
|
-
type?: TypeForPicture;
|
|
64
|
-
}[];
|
|
65
|
-
/**
|
|
66
|
-
* Set additional class(es) to the picture
|
|
67
|
-
*/
|
|
68
|
-
type ClassAttribute = string;
|
|
69
|
-
/**
|
|
70
|
-
* Base component to display a picture
|
|
71
|
-
*/
|
|
72
|
-
interface ImageProps {
|
|
73
|
-
src?: Source;
|
|
74
|
-
srcSet?: PictureSourceset;
|
|
75
|
-
alt?: AltText;
|
|
76
|
-
width?: Width;
|
|
77
|
-
height?: Height;
|
|
78
|
-
aspectRatio?: AspectRatio;
|
|
79
|
-
className?: AdditionalClasses;
|
|
80
|
-
style?: StyleAttribute;
|
|
81
|
-
lazy?: Lazy;
|
|
82
|
-
sources?: Sources;
|
|
83
|
-
pictureClassName?: ClassAttribute;
|
|
84
|
-
}
|
|
85
|
-
declare const Image: import("react").ForwardRefExoticComponent<ImageProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLImageElement>>;
|
|
86
|
-
declare const ImageProvider: FC<PropsWithChildren>;
|
|
87
|
-
export type { ImageProps };
|
|
88
|
-
export { Image, ImageProvider };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import "./image.css";
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import classnames from 'classnames';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
5
|
-
import { PictureContextDefault, PictureContext } from '@kickstartds/base/lib/picture';
|
|
6
|
-
|
|
7
|
-
const Image = forwardRef(({ src, srcSet, alt, width, height, aspectRatio, className, id, itemProp, style, lazy, sources, pictureClassName, ...props }, ref) => (jsx(PictureContextDefault, { ...props, src: src, srcSet: srcSet, alt: alt, width: width, height: height, id: id, itemProp: itemProp, style: style, lazy: lazy, sources: sources, pictureClassName: pictureClassName, ref: ref, className: classnames("dsa-image", aspectRatio !== "unset" && `dsa-image--${aspectRatio}`, className) })));
|
|
8
|
-
Image.displayName = "Image";
|
|
9
|
-
const ImageProvider = (props) => (jsx(PictureContext.Provider, { ...props, value: Image }));
|
|
10
|
-
|
|
11
|
-
export { Image, ImageProvider };
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
-
"$id": "http://schema.mydesignsystem.com/image.schema.json",
|
|
4
|
-
"title": "Image",
|
|
5
|
-
"description": "Base component to display a picture",
|
|
6
|
-
"type": "object",
|
|
7
|
-
"properties": {
|
|
8
|
-
"src": {
|
|
9
|
-
"title": "Source",
|
|
10
|
-
"description": "Picture source",
|
|
11
|
-
"type": "string",
|
|
12
|
-
"format": "image",
|
|
13
|
-
"examples": ["https://picsum.photos/seed/kdspicture/300/300"]
|
|
14
|
-
},
|
|
15
|
-
"srcSet": {
|
|
16
|
-
"title": "Picture sourceset",
|
|
17
|
-
"description": "Use a srcSet to display picture",
|
|
18
|
-
"type": "string",
|
|
19
|
-
"format": "image"
|
|
20
|
-
},
|
|
21
|
-
"alt": {
|
|
22
|
-
"title": "Alt text",
|
|
23
|
-
"description": "Alt text to display for picture",
|
|
24
|
-
"type": "string"
|
|
25
|
-
},
|
|
26
|
-
"width": {
|
|
27
|
-
"title": "Width",
|
|
28
|
-
"description": "Width of the picture",
|
|
29
|
-
"type": "integer",
|
|
30
|
-
"minimum": 0
|
|
31
|
-
},
|
|
32
|
-
"height": {
|
|
33
|
-
"title": "Height",
|
|
34
|
-
"description": "Height of the picture",
|
|
35
|
-
"type": "integer",
|
|
36
|
-
"minimum": 0
|
|
37
|
-
},
|
|
38
|
-
"className": {
|
|
39
|
-
"title": "Additional Classes",
|
|
40
|
-
"description": "Add additional css classes that should be applied to the picture",
|
|
41
|
-
"type": "string"
|
|
42
|
-
},
|
|
43
|
-
"style": {
|
|
44
|
-
"title": "`style` attribute",
|
|
45
|
-
"description": "Define a style attribute for the picture",
|
|
46
|
-
"type": "string"
|
|
47
|
-
},
|
|
48
|
-
"lazy": {
|
|
49
|
-
"title": "Lazy",
|
|
50
|
-
"description": "Load the picture lazily",
|
|
51
|
-
"type": "boolean",
|
|
52
|
-
"default": true
|
|
53
|
-
},
|
|
54
|
-
"sources": {
|
|
55
|
-
"title": "Sources",
|
|
56
|
-
"description": "Additional sources. This will result in a `picture`-Element",
|
|
57
|
-
"type": "array",
|
|
58
|
-
"items": {
|
|
59
|
-
"type": "object",
|
|
60
|
-
"properties": {
|
|
61
|
-
"srcSet": {
|
|
62
|
-
"title": "Picture sourceset",
|
|
63
|
-
"description": "Use a srcSet to display picture",
|
|
64
|
-
"type": "string",
|
|
65
|
-
"format": "image"
|
|
66
|
-
},
|
|
67
|
-
"media": {
|
|
68
|
-
"title": "TODO MEDIA TITLE",
|
|
69
|
-
"description": "TODO MEDIA DESCRIPTION",
|
|
70
|
-
"type": "string"
|
|
71
|
-
},
|
|
72
|
-
"type": {
|
|
73
|
-
"title": "TODO TYPE TITLE",
|
|
74
|
-
"description": "TODO TYPE DESCRIPTION",
|
|
75
|
-
"type": "string"
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
"additionalProperties": false
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
"pictureClassName": {
|
|
82
|
-
"title": "`class` attribute",
|
|
83
|
-
"description": "Set additional class(es) to the picture",
|
|
84
|
-
"type": "string"
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
"additionalProperties": false
|
|
88
|
-
}
|