@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.
@@ -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: "visual", 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: {
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
- "$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/aspectRatio"
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",
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 14 Nov 2024 09:37:45 GMT
3
+ * Generated on Mon, 18 Nov 2024 19:05:55 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -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
- "$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/src"
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
- "$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/alt"
36
+ "title": "Alt text",
37
+ "description": "Alt text to display for picture",
38
+ "type": "string"
33
39
  }
34
40
  }
35
41
  },
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 14 Nov 2024 09:37:48 GMT
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 Thu, 14 Nov 2024 09:37:52 GMT
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 Thu, 14 Nov 2024 09:37:50 GMT
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 Thu, 14 Nov 2024 09:37:54 GMT
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);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 14 Nov 2024 09:37:45 GMT
3
+ * Generated on Mon, 18 Nov 2024 19:05:55 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 14 Nov 2024 09:37:45 GMT
3
+ * Generated on Mon, 18 Nov 2024 19:05:56 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#230a2b";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.6.8",
3
+ "version": "1.6.10",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {
@@ -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
- }