@kickstartds/ds-agency-premium 1.6.68--canary.45.1707.0 → 1.6.68--canary.45.1711.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/{BlogOverviewProps-7caa223c.d.ts → BlogOverviewProps-9f207f1c.d.ts} +2 -2
- package/dist/{BlogPostProps-d9decb7c.d.ts → BlogPostProps-c04a5ed8.d.ts} +1 -1
- package/dist/EventTeaserProps-e00ea659.d.ts +58 -0
- package/dist/{PageProps-7caa223c.d.ts → PageProps-aa29c554.d.ts} +1 -1
- package/dist/{SectionProps-03ff6d21.d.ts → SectionProps-7caa223c.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/blog-teaser/index.d.ts +1 -1
- package/dist/components/event-latest/event-latest.schema.dereffed.json +53 -33
- package/dist/components/event-latest/index.d.ts +1 -1
- package/dist/components/event-teaser/event-teaser.css +82 -0
- package/dist/components/event-teaser/event-teaser.schema.dereffed.json +53 -33
- package/dist/components/event-teaser/event-teaser.schema.json +43 -28
- package/dist/components/event-teaser/index.d.ts +4 -4
- package/dist/components/event-teaser/index.js +5 -3
- package/dist/components/image-story/index.d.ts +1 -1
- package/dist/components/index/index.d.ts +3 -3
- package/dist/components/page/index.d.ts +1 -1
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +29 -6
- package/dist/components/section/index.d.ts +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
- package/dist/EventTeaserProps-5f865346.d.ts +0 -43
- /package/dist/{BlogTeaserProps-f5855e93.d.ts → BlogTeaserProps-d62a0a9a.d.ts} +0 -0
- /package/dist/{ImageStoryProps-03ff6d21.d.ts → ImageStoryProps-e853e1e7.d.ts} +0 -0
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
4
4
|
* and run json-schema-to-typescript to regenerate this file.
|
|
5
5
|
*/
|
|
6
|
-
import { SectionProps } from "./SectionProps-
|
|
7
|
-
import { BlogTeaserProps } from "./BlogTeaserProps-
|
|
6
|
+
import { SectionProps } from "./SectionProps-7caa223c.js";
|
|
7
|
+
import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
|
|
8
8
|
import { CtaProps } from "./CtaProps-8a0dba0d.js";
|
|
9
9
|
import { SeoProps } from "./SeoProps-f2d6dcaa.js";
|
|
10
10
|
/**
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
|
|
7
7
|
import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
|
|
8
|
-
import { SectionProps } from "./SectionProps-
|
|
8
|
+
import { SectionProps } from "./SectionProps-7caa223c.js";
|
|
9
9
|
import { CtaProps } from "./CtaProps-8a0dba0d.js";
|
|
10
10
|
import { SeoProps } from "./SeoProps-f2d6dcaa.js";
|
|
11
11
|
/**
|
|
@@ -0,0 +1,58 @@
|
|
|
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
|
+
* The date of the event
|
|
8
|
+
*/
|
|
9
|
+
type Date = string;
|
|
10
|
+
/**
|
|
11
|
+
* The month of the event
|
|
12
|
+
*/
|
|
13
|
+
type Month = string;
|
|
14
|
+
/**
|
|
15
|
+
* The day of the event
|
|
16
|
+
*/
|
|
17
|
+
type Day = string;
|
|
18
|
+
/**
|
|
19
|
+
* Title of the event
|
|
20
|
+
*/
|
|
21
|
+
type Headline = string;
|
|
22
|
+
/**
|
|
23
|
+
* Location of the event
|
|
24
|
+
*/
|
|
25
|
+
type Location = string;
|
|
26
|
+
/**
|
|
27
|
+
* The event entry URL to link
|
|
28
|
+
*/
|
|
29
|
+
type URL = string;
|
|
30
|
+
/**
|
|
31
|
+
* Text for the call to action
|
|
32
|
+
*/
|
|
33
|
+
type CallToAction = string;
|
|
34
|
+
/**
|
|
35
|
+
* ARIA label for accessibility
|
|
36
|
+
*/
|
|
37
|
+
type ARIALabel = string;
|
|
38
|
+
/**
|
|
39
|
+
* Display an event teaser with date, title and location
|
|
40
|
+
*/
|
|
41
|
+
interface EventTeaserProps {
|
|
42
|
+
date: Date;
|
|
43
|
+
calendar?: Calendar;
|
|
44
|
+
title: Headline;
|
|
45
|
+
location: Location;
|
|
46
|
+
url?: URL;
|
|
47
|
+
cta?: CallToAction;
|
|
48
|
+
ariaLabel?: ARIALabel;
|
|
49
|
+
className?: string;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Calendar icon to display the date
|
|
53
|
+
*/
|
|
54
|
+
interface Calendar {
|
|
55
|
+
month?: Month;
|
|
56
|
+
day?: Day;
|
|
57
|
+
}
|
|
58
|
+
export { Date, Month, Day, Headline, Location, URL, CallToAction, ARIALabel, EventTeaserProps, Calendar };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
4
4
|
* and run json-schema-to-typescript to regenerate this file.
|
|
5
5
|
*/
|
|
6
|
-
import { SectionProps } from "./SectionProps-
|
|
6
|
+
import { SectionProps } from "./SectionProps-7caa223c.js";
|
|
7
7
|
import { SeoProps } from "./SeoProps-f2d6dcaa.js";
|
|
8
8
|
/**
|
|
9
9
|
* Collection of sections (with their contents) to render on the page
|
|
@@ -10,7 +10,7 @@ import { FeaturesProps } from "./FeaturesProps-7ef528ec.js";
|
|
|
10
10
|
import { GalleryProps } from "./GalleryProps-76e7de44.js";
|
|
11
11
|
import { HeroProps } from "./HeroProps-aa4e6431.js";
|
|
12
12
|
import { HtmlProps } from "./HtmlProps-9d091769.js";
|
|
13
|
-
import { ImageStoryProps } from "./ImageStoryProps-
|
|
13
|
+
import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
|
|
14
14
|
import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
|
|
15
15
|
import { LogosProps } from "./LogosProps-f9474fe2.js";
|
|
16
16
|
import { MosaicProps } from "./MosaicProps-d52c7151.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BlogOverviewProps } from "../../BlogOverviewProps-
|
|
1
|
+
import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
|
|
2
2
|
import { FC, PropsWithChildren } from "react";
|
|
3
3
|
declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
|
|
4
4
|
export type { BlogOverviewProps };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BlogPostProps } from "../../BlogPostProps-
|
|
1
|
+
import { BlogPostProps } from "../../BlogPostProps-c04a5ed8.js";
|
|
2
2
|
import { FC, PropsWithChildren } from "react";
|
|
3
3
|
declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
|
|
4
4
|
export type { BlogPostProps };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
|
-
import { BlogTeaserProps } from "../../BlogTeaserProps-
|
|
3
|
+
import { BlogTeaserProps } from "../../BlogTeaserProps-d62a0a9a.js";
|
|
4
4
|
declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
6
6
|
declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
32
32
|
"$id": "http://schema.mydesignsystem.com/event-teaser.schema.json",
|
|
33
33
|
"title": "Event Teaser",
|
|
34
|
-
"description": "Display an event teaser with date,
|
|
34
|
+
"description": "Display an event teaser with date, title and location",
|
|
35
35
|
"type": "object",
|
|
36
36
|
"properties": {
|
|
37
37
|
"date": {
|
|
@@ -40,16 +40,40 @@
|
|
|
40
40
|
"type": "string",
|
|
41
41
|
"format": "date",
|
|
42
42
|
"examples": [
|
|
43
|
-
"12
|
|
43
|
+
"12.30.2022"
|
|
44
44
|
]
|
|
45
45
|
},
|
|
46
|
-
"
|
|
46
|
+
"calendar": {
|
|
47
|
+
"type": "object",
|
|
48
|
+
"title": "Calendar",
|
|
49
|
+
"description": "Calendar icon to display the date",
|
|
50
|
+
"properties": {
|
|
51
|
+
"month": {
|
|
52
|
+
"title": "Month",
|
|
53
|
+
"description": "The month of the event",
|
|
54
|
+
"type": "string",
|
|
55
|
+
"examples": [
|
|
56
|
+
"Dec"
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
"day": {
|
|
60
|
+
"title": "Day",
|
|
61
|
+
"description": "The day of the event",
|
|
62
|
+
"type": "string",
|
|
63
|
+
"examples": [
|
|
64
|
+
"30"
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
"additionalProperties": false
|
|
69
|
+
},
|
|
70
|
+
"title": {
|
|
47
71
|
"title": "Headline",
|
|
48
72
|
"description": "Title of the event",
|
|
49
73
|
"type": "string",
|
|
50
74
|
"format": "markdown",
|
|
51
75
|
"examples": [
|
|
52
|
-
"This is a
|
|
76
|
+
"This is a event teaser title"
|
|
53
77
|
]
|
|
54
78
|
},
|
|
55
79
|
"location": {
|
|
@@ -58,36 +82,32 @@
|
|
|
58
82
|
"type": "string",
|
|
59
83
|
"format": "markdown",
|
|
60
84
|
"examples": [
|
|
61
|
-
"This is a
|
|
85
|
+
"This is a location"
|
|
62
86
|
]
|
|
63
87
|
},
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
"
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
},
|
|
88
|
-
"additionalProperties": false,
|
|
89
|
-
"required": [
|
|
90
|
-
"url"
|
|
88
|
+
"url": {
|
|
89
|
+
"title": "URL",
|
|
90
|
+
"description": "The event entry URL to link",
|
|
91
|
+
"type": "string",
|
|
92
|
+
"format": "uri",
|
|
93
|
+
"examples": [
|
|
94
|
+
"https://example.com"
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
"cta": {
|
|
98
|
+
"title": "Call to Action",
|
|
99
|
+
"description": "Text for the call to action",
|
|
100
|
+
"type": "string",
|
|
101
|
+
"examples": [
|
|
102
|
+
"Show event"
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
"ariaLabel": {
|
|
106
|
+
"title": "ARIA Label",
|
|
107
|
+
"description": "ARIA label for accessibility",
|
|
108
|
+
"type": "string",
|
|
109
|
+
"examples": [
|
|
110
|
+
"Event teaser for "
|
|
91
111
|
]
|
|
92
112
|
},
|
|
93
113
|
"className": {
|
|
@@ -99,7 +119,7 @@
|
|
|
99
119
|
},
|
|
100
120
|
"additionalProperties": false,
|
|
101
121
|
"required": [
|
|
102
|
-
"
|
|
122
|
+
"title",
|
|
103
123
|
"date",
|
|
104
124
|
"location"
|
|
105
125
|
]
|
|
@@ -6,7 +6,7 @@ import { HTMLAttributes } from "react";
|
|
|
6
6
|
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
7
7
|
* and run json-schema-to-typescript to regenerate this file.
|
|
8
8
|
*/
|
|
9
|
-
import { EventTeaserProps } from "../../EventTeaserProps-
|
|
9
|
+
import { EventTeaserProps } from "../../EventTeaserProps-e00ea659.js";
|
|
10
10
|
/**
|
|
11
11
|
* Headline for the listing
|
|
12
12
|
*/
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
.dsa-event-teaser {
|
|
2
|
+
--g-link--border-radius: var(--ks-border-radius-surface);
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: var(--ks-spacing-inline-m);
|
|
6
|
+
padding: var(--ks-spacing-inset-s);
|
|
7
|
+
border: var(--ks-border-width-default) solid var(--ks-border-color-card-interactive);
|
|
8
|
+
}
|
|
9
|
+
.dsa-event-teaser:hover {
|
|
10
|
+
border-color: var(--ks-border-color-card-interactive-hover);
|
|
11
|
+
}
|
|
12
|
+
.dsa-event-teaser__calendar {
|
|
13
|
+
align-self: start;
|
|
14
|
+
position: relative;
|
|
15
|
+
container-type: inline-size;
|
|
16
|
+
background-color: var(--ks-background-color-primary);
|
|
17
|
+
color: var(--ks-color-fg-inverted);
|
|
18
|
+
border-radius: var(--ks-border-radius-control);
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
padding: var(--ks-spacing-inset-stretch-xs);
|
|
24
|
+
flex-shrink: 0;
|
|
25
|
+
width: calc(var(--ks-spacing-l) * 3);
|
|
26
|
+
height: calc(var(--ks-spacing-l) * 3);
|
|
27
|
+
}
|
|
28
|
+
.dsa-event-teaser__content {
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
gap: var(--ks-spacing-stack-xs);
|
|
32
|
+
flex-grow: 1;
|
|
33
|
+
}
|
|
34
|
+
.dsa-event-teaser__title {
|
|
35
|
+
font: var(--ks-font-display-m);
|
|
36
|
+
font-weight: var(--ks-font-weight-semi-bold);
|
|
37
|
+
color: var(--ks-text-color-display);
|
|
38
|
+
}
|
|
39
|
+
.dsa-event-teaser__month, .dsa-event-teaser__day {
|
|
40
|
+
font-weight: var(--ks-font-weight-semi-bold);
|
|
41
|
+
font-family: var(--ks-font-family-display);
|
|
42
|
+
}
|
|
43
|
+
.dsa-event-teaser__day {
|
|
44
|
+
font-size: 50cqw;
|
|
45
|
+
}
|
|
46
|
+
.dsa-event-teaser__month {
|
|
47
|
+
font-size: 25cqw;
|
|
48
|
+
}
|
|
49
|
+
.dsa-event-teaser__infos {
|
|
50
|
+
display: flex;
|
|
51
|
+
flex-wrap: wrap;
|
|
52
|
+
gap: var(--ks-spacing-xxs) var(--ks-spacing-inline-s);
|
|
53
|
+
}
|
|
54
|
+
.dsa-event-teaser__info {
|
|
55
|
+
display: flex;
|
|
56
|
+
gap: var(--ks-spacing-xxs);
|
|
57
|
+
font: var(--ks-font-interface-s);
|
|
58
|
+
align-items: center;
|
|
59
|
+
color: var(--ks-text-color-interface);
|
|
60
|
+
}
|
|
61
|
+
.dsa-event-teaser__info .icon {
|
|
62
|
+
width: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
|
|
63
|
+
height: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
|
|
64
|
+
color: var(--ks-text-color-primary);
|
|
65
|
+
flex-shrink: 0;
|
|
66
|
+
flex-grow: 1;
|
|
67
|
+
}
|
|
68
|
+
.dsa-event-teaser__cta {
|
|
69
|
+
font: var(--ks-font-interface-s);
|
|
70
|
+
font-weight: var(--ks-font-weight-semi-bold);
|
|
71
|
+
color: var(--ks-text-color-primary);
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
text-wrap: nowrap;
|
|
75
|
+
}
|
|
76
|
+
.dsa-event-teaser__cta .icon {
|
|
77
|
+
width: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
|
|
78
|
+
height: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
|
|
79
|
+
color: var(--ks-text-color-primary);
|
|
80
|
+
flex-shrink: 0;
|
|
81
|
+
flex-grow: 1;
|
|
82
|
+
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
3
|
"$id": "http://schema.mydesignsystem.com/event-teaser.schema.json",
|
|
4
4
|
"title": "Event Teaser",
|
|
5
|
-
"description": "Display an event teaser with date,
|
|
5
|
+
"description": "Display an event teaser with date, title and location",
|
|
6
6
|
"type": "object",
|
|
7
7
|
"properties": {
|
|
8
8
|
"date": {
|
|
@@ -11,16 +11,40 @@
|
|
|
11
11
|
"type": "string",
|
|
12
12
|
"format": "date",
|
|
13
13
|
"examples": [
|
|
14
|
-
"12
|
|
14
|
+
"12.30.2022"
|
|
15
15
|
]
|
|
16
16
|
},
|
|
17
|
-
"
|
|
17
|
+
"calendar": {
|
|
18
|
+
"type": "object",
|
|
19
|
+
"title": "Calendar",
|
|
20
|
+
"description": "Calendar icon to display the date",
|
|
21
|
+
"properties": {
|
|
22
|
+
"month": {
|
|
23
|
+
"title": "Month",
|
|
24
|
+
"description": "The month of the event",
|
|
25
|
+
"type": "string",
|
|
26
|
+
"examples": [
|
|
27
|
+
"Dec"
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
"day": {
|
|
31
|
+
"title": "Day",
|
|
32
|
+
"description": "The day of the event",
|
|
33
|
+
"type": "string",
|
|
34
|
+
"examples": [
|
|
35
|
+
"30"
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"additionalProperties": false
|
|
40
|
+
},
|
|
41
|
+
"title": {
|
|
18
42
|
"title": "Headline",
|
|
19
43
|
"description": "Title of the event",
|
|
20
44
|
"type": "string",
|
|
21
45
|
"format": "markdown",
|
|
22
46
|
"examples": [
|
|
23
|
-
"This is a
|
|
47
|
+
"This is a event teaser title"
|
|
24
48
|
]
|
|
25
49
|
},
|
|
26
50
|
"location": {
|
|
@@ -29,36 +53,32 @@
|
|
|
29
53
|
"type": "string",
|
|
30
54
|
"format": "markdown",
|
|
31
55
|
"examples": [
|
|
32
|
-
"This is a
|
|
56
|
+
"This is a location"
|
|
33
57
|
]
|
|
34
58
|
},
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
},
|
|
59
|
-
"additionalProperties": false,
|
|
60
|
-
"required": [
|
|
61
|
-
"url"
|
|
59
|
+
"url": {
|
|
60
|
+
"title": "URL",
|
|
61
|
+
"description": "The event entry URL to link",
|
|
62
|
+
"type": "string",
|
|
63
|
+
"format": "uri",
|
|
64
|
+
"examples": [
|
|
65
|
+
"https://example.com"
|
|
66
|
+
]
|
|
67
|
+
},
|
|
68
|
+
"cta": {
|
|
69
|
+
"title": "Call to Action",
|
|
70
|
+
"description": "Text for the call to action",
|
|
71
|
+
"type": "string",
|
|
72
|
+
"examples": [
|
|
73
|
+
"Show event"
|
|
74
|
+
]
|
|
75
|
+
},
|
|
76
|
+
"ariaLabel": {
|
|
77
|
+
"title": "ARIA Label",
|
|
78
|
+
"description": "ARIA label for accessibility",
|
|
79
|
+
"type": "string",
|
|
80
|
+
"examples": [
|
|
81
|
+
"Event teaser for "
|
|
62
82
|
]
|
|
63
83
|
},
|
|
64
84
|
"className": {
|
|
@@ -70,7 +90,7 @@
|
|
|
70
90
|
},
|
|
71
91
|
"additionalProperties": false,
|
|
72
92
|
"required": [
|
|
73
|
-
"
|
|
93
|
+
"title",
|
|
74
94
|
"date",
|
|
75
95
|
"location"
|
|
76
96
|
]
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
3
|
"$id": "http://schema.mydesignsystem.com/event-teaser.schema.json",
|
|
4
4
|
"title": "Event Teaser",
|
|
5
|
-
"description": "Display an event teaser with date,
|
|
5
|
+
"description": "Display an event teaser with date, title and location",
|
|
6
6
|
"type": "object",
|
|
7
7
|
"properties": {
|
|
8
8
|
"date": {
|
|
@@ -10,49 +10,64 @@
|
|
|
10
10
|
"description": "The date of the event",
|
|
11
11
|
"type": "string",
|
|
12
12
|
"format": "date",
|
|
13
|
-
"examples": ["12
|
|
13
|
+
"examples": ["12.30.2022"]
|
|
14
14
|
},
|
|
15
|
-
"
|
|
15
|
+
"calendar": {
|
|
16
|
+
"type": "object",
|
|
17
|
+
"title": "Calendar",
|
|
18
|
+
"description": "Calendar icon to display the date",
|
|
19
|
+
"properties": {
|
|
20
|
+
"month": {
|
|
21
|
+
"title": "Month",
|
|
22
|
+
"description": "The month of the event",
|
|
23
|
+
"type": "string",
|
|
24
|
+
"examples": ["Dec"]
|
|
25
|
+
},
|
|
26
|
+
"day": {
|
|
27
|
+
"title": "Day",
|
|
28
|
+
"description": "The day of the event",
|
|
29
|
+
"type": "string",
|
|
30
|
+
"examples": ["30"]
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"title": {
|
|
16
35
|
"title": "Headline",
|
|
17
36
|
"description": "Title of the event",
|
|
18
37
|
"type": "string",
|
|
19
38
|
"format": "markdown",
|
|
20
|
-
"examples": ["This is a
|
|
39
|
+
"examples": ["This is a event teaser title"]
|
|
21
40
|
},
|
|
22
41
|
"location": {
|
|
23
42
|
"title": "Location",
|
|
24
43
|
"description": "Location of the event",
|
|
25
44
|
"type": "string",
|
|
26
45
|
"format": "markdown",
|
|
27
|
-
"examples": ["This is a
|
|
46
|
+
"examples": ["This is a location"]
|
|
28
47
|
},
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
"additionalProperties": false,
|
|
50
|
-
"required": ["url"]
|
|
48
|
+
"url": {
|
|
49
|
+
"title": "URL",
|
|
50
|
+
"description": "The event entry URL to link",
|
|
51
|
+
"type": "string",
|
|
52
|
+
"format": "uri",
|
|
53
|
+
"examples": ["https://example.com"]
|
|
54
|
+
},
|
|
55
|
+
"cta": {
|
|
56
|
+
"title": "Call to Action",
|
|
57
|
+
"description": "Text for the call to action",
|
|
58
|
+
"type": "string",
|
|
59
|
+
"examples": ["Show event"]
|
|
60
|
+
},
|
|
61
|
+
"ariaLabel": {
|
|
62
|
+
"title": "ARIA Label",
|
|
63
|
+
"description": "ARIA label for accessibility",
|
|
64
|
+
"type": "string",
|
|
65
|
+
"examples": ["Event teaser for "]
|
|
51
66
|
},
|
|
52
67
|
"className": {
|
|
53
68
|
"type": "string"
|
|
54
69
|
}
|
|
55
70
|
},
|
|
56
71
|
"additionalProperties": false,
|
|
57
|
-
"required": ["
|
|
72
|
+
"required": ["title", "date", "location"]
|
|
58
73
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
|
-
import { EventTeaserProps } from "../../EventTeaserProps-
|
|
4
|
-
declare const EventTeaserContextDefault: import("react").ForwardRefExoticComponent<EventTeaserProps & HTMLAttributes<
|
|
5
|
-
declare const EventTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<EventTeaserProps & HTMLAttributes<
|
|
6
|
-
declare const EventTeaser: import("react").ForwardRefExoticComponent<EventTeaserProps & HTMLAttributes<
|
|
3
|
+
import { EventTeaserProps } from "../../EventTeaserProps-e00ea659.js";
|
|
4
|
+
declare const EventTeaserContextDefault: import("react").ForwardRefExoticComponent<EventTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
5
|
+
declare const EventTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<EventTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>>;
|
|
6
|
+
declare const EventTeaser: import("react").ForwardRefExoticComponent<EventTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
7
7
|
export type { EventTeaserProps };
|
|
8
8
|
export { EventTeaserContextDefault, EventTeaserContext, EventTeaser };
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "./event-teaser.css";
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
3
|
import classnames from 'classnames';
|
|
3
4
|
import { forwardRef, createContext, useContext } from 'react';
|
|
5
|
+
import { Icon } from '@kickstartds/base/lib/icon';
|
|
4
6
|
|
|
5
|
-
const EventTeaserContextDefault = forwardRef(({ date,
|
|
6
|
-
return (
|
|
7
|
+
const EventTeaserContextDefault = forwardRef(({ date, title, cta, calendar, url, location, ariaLabel, className, ...rest }, ref) => {
|
|
8
|
+
return (jsxs("a", { className: classnames(className, "dsa-event-teaser"), ...rest, href: url, ref: ref, "aria-label": ariaLabel, children: [jsxs("span", { className: "dsa-event-teaser__calendar", children: [jsx("span", { className: "dsa-event-teaser__day", children: calendar.day }), jsx("span", { className: "dsa-event-teaser__month", children: calendar.month })] }), jsxs("span", { className: "dsa-event-teaser__content", children: [jsx("span", { className: "dsa-event-teaser__title", children: title }), jsxs("span", { className: "dsa-event-teaser__infos", children: [jsxs("span", { className: "dsa-event-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), location] })] })] }), jsxs("span", { className: "dsa-event-teaser__cta", children: [jsx("span", { children: cta }), jsx(Icon, { "aria-hidden": true, icon: "chevron-right" })] })] }));
|
|
7
9
|
});
|
|
8
10
|
const EventTeaserContext = createContext(EventTeaserContextDefault);
|
|
9
11
|
const EventTeaser = forwardRef((props, ref) => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
|
-
import { ImageStoryProps } from "../../ImageStoryProps-
|
|
3
|
+
import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
|
|
4
4
|
declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
6
6
|
declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -29,8 +29,8 @@ interface SettingsProps {
|
|
|
29
29
|
seo: SeoProps;
|
|
30
30
|
iconSprite?: IconSprite;
|
|
31
31
|
}
|
|
32
|
-
export * from "../../BlogPostProps-
|
|
33
|
-
export * from "../../BlogOverviewProps-
|
|
34
|
-
export * from "../../PageProps-
|
|
32
|
+
export * from "../../BlogPostProps-c04a5ed8.js";
|
|
33
|
+
export * from "../../BlogOverviewProps-9f207f1c.js";
|
|
34
|
+
export * from "../../PageProps-aa29c554.js";
|
|
35
35
|
export { IconSprite, SettingsProps };
|
|
36
36
|
export * from "../../EventDetailProps-19b81db8.js";
|
|
@@ -1541,15 +1541,23 @@
|
|
|
1541
1541
|
"id": "event-event-latest--default",
|
|
1542
1542
|
"group": "Event/ Event Latest",
|
|
1543
1543
|
"name": "Default",
|
|
1544
|
-
"code": "<EventLatest\n events={[\n {\n date: '12/30/2022',\n headline: 'Event 1',\n link: {\n text: 'Show event 1',\n url: 'https://example.com/event1'\n },\n location: 'Location 1'\n },\n {\n date: '01/15/2023',\n headline: 'Event 2',\n link: {\n text: 'Show event 2',\n url: 'https://example.com/event2'\n },\n location: 'Location 2'\n }\n ]}\n headline=\"Latest events\"\n link={{\n text: 'Show event',\n url: '#'\n }}\n text=\"Check out our upcoming events and mark your calendar!\"\n/>",
|
|
1544
|
+
"code": "<EventLatest\n events={[\n {\n ariaLabel: 'Event teaser for ',\n calendar: {\n day: '30',\n month: 'Dec'\n },\n cta: 'Show event',\n date: '12/30/2022',\n headline: 'Event 1',\n link: {\n text: 'Show event 1',\n url: 'https://example.com/event1'\n },\n location: 'Location 1',\n title: 'This is a event teaser title',\n url: 'https://example.com'\n },\n {\n ariaLabel: 'Event teaser for ',\n calendar: {\n day: '30',\n month: 'Dec'\n },\n cta: 'Show event',\n date: '01/15/2023',\n headline: 'Event 2',\n link: {\n text: 'Show event 2',\n url: 'https://example.com/event2'\n },\n location: 'Location 2',\n title: 'This is a event teaser title',\n url: 'https://example.com'\n }\n ]}\n headline=\"Latest events\"\n link={{\n text: 'Show event',\n url: '#'\n }}\n text=\"Check out our upcoming events and mark your calendar!\"\n/>",
|
|
1545
1545
|
"args": {
|
|
1546
1546
|
"headline": "Latest events",
|
|
1547
1547
|
"text": "Check out our upcoming events and mark your calendar!",
|
|
1548
1548
|
"events": [
|
|
1549
1549
|
{
|
|
1550
1550
|
"date": "12/30/2022",
|
|
1551
|
-
"
|
|
1551
|
+
"calendar": {
|
|
1552
|
+
"month": "Dec",
|
|
1553
|
+
"day": "30"
|
|
1554
|
+
},
|
|
1555
|
+
"title": "This is a event teaser title",
|
|
1552
1556
|
"location": "Location 1",
|
|
1557
|
+
"url": "https://example.com",
|
|
1558
|
+
"cta": "Show event",
|
|
1559
|
+
"ariaLabel": "Event teaser for ",
|
|
1560
|
+
"headline": "Event 1",
|
|
1553
1561
|
"link": {
|
|
1554
1562
|
"url": "https://example.com/event1",
|
|
1555
1563
|
"text": "Show event 1"
|
|
@@ -1557,8 +1565,16 @@
|
|
|
1557
1565
|
},
|
|
1558
1566
|
{
|
|
1559
1567
|
"date": "01/15/2023",
|
|
1560
|
-
"
|
|
1568
|
+
"calendar": {
|
|
1569
|
+
"month": "Dec",
|
|
1570
|
+
"day": "30"
|
|
1571
|
+
},
|
|
1572
|
+
"title": "This is a event teaser title",
|
|
1561
1573
|
"location": "Location 2",
|
|
1574
|
+
"url": "https://example.com",
|
|
1575
|
+
"cta": "Show event",
|
|
1576
|
+
"ariaLabel": "Event teaser for ",
|
|
1577
|
+
"headline": "Event 2",
|
|
1562
1578
|
"link": {
|
|
1563
1579
|
"url": "https://example.com/event2",
|
|
1564
1580
|
"text": "Show event 2"
|
|
@@ -1632,11 +1648,18 @@
|
|
|
1632
1648
|
"id": "event-event-teaser--default",
|
|
1633
1649
|
"group": "Event/ Event Teaser",
|
|
1634
1650
|
"name": "Default",
|
|
1635
|
-
"code": "<EventTeaser\n
|
|
1651
|
+
"code": "<EventTeaser\n ariaLabel=\"Event teaser for \"\n calendar={{\n day: '30',\n month: 'Dec'\n }}\n cta=\"Show event\"\n date=\"12/30/2025\"\n link={{\n text: 'Show event',\n url: '#'\n }}\n location=\"Berlin, Germany\"\n title=\"The Future of AI\"\n url=\"https://example.com\"\n/>",
|
|
1636
1652
|
"args": {
|
|
1637
|
-
"date": "12/30/
|
|
1638
|
-
"
|
|
1653
|
+
"date": "12/30/2025",
|
|
1654
|
+
"calendar": {
|
|
1655
|
+
"month": "Dec",
|
|
1656
|
+
"day": "30"
|
|
1657
|
+
},
|
|
1658
|
+
"title": "The Future of AI",
|
|
1639
1659
|
"location": "Berlin, Germany",
|
|
1660
|
+
"url": "https://example.com",
|
|
1661
|
+
"cta": "Show event",
|
|
1662
|
+
"ariaLabel": "Event teaser for ",
|
|
1640
1663
|
"link": {
|
|
1641
1664
|
"url": "#",
|
|
1642
1665
|
"text": "Show event"
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes, FC, PropsWithChildren } from "react";
|
|
3
|
-
import { SectionProps } from "../../SectionProps-
|
|
3
|
+
import { SectionProps } from "../../SectionProps-7caa223c.js";
|
|
4
4
|
declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
6
6
|
declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
|
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, 25 Jun 2025 10:03:33 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, 25 Jun 2025 10:03:37 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, 25 Jun 2025 10:03:35 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, 25 Jun 2025 10:03:39 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,43 +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
|
-
* The date of the event
|
|
8
|
-
*/
|
|
9
|
-
type Date = string;
|
|
10
|
-
/**
|
|
11
|
-
* Title of the event
|
|
12
|
-
*/
|
|
13
|
-
type Headline = string;
|
|
14
|
-
/**
|
|
15
|
-
* Location of the event
|
|
16
|
-
*/
|
|
17
|
-
type Location = string;
|
|
18
|
-
/**
|
|
19
|
-
* The event entry URL to link
|
|
20
|
-
*/
|
|
21
|
-
type URL = string;
|
|
22
|
-
/**
|
|
23
|
-
* The text for the link
|
|
24
|
-
*/
|
|
25
|
-
type Text = string;
|
|
26
|
-
/**
|
|
27
|
-
* Display an event teaser with date, headline and location
|
|
28
|
-
*/
|
|
29
|
-
interface EventTeaserProps {
|
|
30
|
-
date: Date;
|
|
31
|
-
headline: Headline;
|
|
32
|
-
location: Location;
|
|
33
|
-
link?: Link;
|
|
34
|
-
className?: string;
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* URL and label for the event linked
|
|
38
|
-
*/
|
|
39
|
-
interface Link {
|
|
40
|
-
url: URL;
|
|
41
|
-
text?: Text;
|
|
42
|
-
}
|
|
43
|
-
export { Date, Headline, Location, URL, Text, EventTeaserProps, Link };
|
|
File without changes
|
|
File without changes
|