@kickstartds/ds-agency-premium 1.6.71--canary.45.1803.0 → 1.6.71--canary.45.1809.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/event-list/index.js +3 -2
- package/dist/components/event-list-teaser/event-list-teaser.css +15 -15
- package/dist/components/event-registration/event-registration.css +79 -0
- package/dist/components/event-registration/event-registration.schema.dereffed.json +174 -0
- package/dist/components/event-registration/event-registration.schema.json +138 -0
- package/dist/components/event-registration/index.d.ts +106 -0
- package/dist/components/event-registration/index.js +23 -0
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +38 -2
- package/dist/global.css +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
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { Section } from '../section/index.js';
|
|
3
3
|
import { SplitWeighted } from '../split-weighted/index.js';
|
|
4
4
|
import { EventFilter } from '../event-filter/index.js';
|
|
5
5
|
import { EventListTeaser } from '../event-list-teaser/index.js';
|
|
6
|
+
import { RichText } from '@kickstartds/base/lib/rich-text';
|
|
6
7
|
import 'react';
|
|
7
8
|
import 'classnames';
|
|
8
9
|
import '@kickstartds/core/lib/react';
|
|
@@ -24,7 +25,7 @@ const EventList = ({ filter, events, }) => (jsx(Fragment, { children: jsx(Sectio
|
|
|
24
25
|
}, order: {
|
|
25
26
|
desktop: "asideFirst",
|
|
26
27
|
mobile: "asideFirst",
|
|
27
|
-
}, aside: jsx(EventFilter, { ...filter }), main:
|
|
28
|
+
}, aside: jsx(EventFilter, { ...filter }), main: jsxs(Fragment, { children: [jsx(RichText, { text: "425 Veranstaltungen" }), events.map((event, index) => (jsx(EventListTeaser, { ...event }, index)))] }) }) }) }));
|
|
28
29
|
EventList.displayName = "EventList";
|
|
29
30
|
|
|
30
31
|
export { EventList };
|
|
@@ -52,6 +52,12 @@
|
|
|
52
52
|
font-weight: var(--ks-font-weight-semi-bold);
|
|
53
53
|
color: var(--ks-text-color-display);
|
|
54
54
|
}
|
|
55
|
+
.dsa-event-list-teaser__categories {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-wrap: wrap;
|
|
58
|
+
gap: var(--ks-spacing-xxs) var(--ks-spacing-xxs);
|
|
59
|
+
max-width: var(--dsa-tile--width_small);
|
|
60
|
+
}
|
|
55
61
|
.dsa-event-list-teaser__details {
|
|
56
62
|
display: flex;
|
|
57
63
|
flex-wrap: wrap;
|
|
@@ -65,21 +71,6 @@
|
|
|
65
71
|
.dsa-event-list-teaser__date > .dsa-event-list-teaser__info:first-child {
|
|
66
72
|
font-weight: var(--ks-font-weight-semi-bold);
|
|
67
73
|
}
|
|
68
|
-
.dsa-event-list-teaser__categories {
|
|
69
|
-
display: flex;
|
|
70
|
-
flex-wrap: wrap;
|
|
71
|
-
gap: var(--ks-spacing-xxs) var(--ks-spacing-xxs);
|
|
72
|
-
max-width: var(--dsa-tile--width_small);
|
|
73
|
-
}
|
|
74
|
-
.dsa-event-list-teaser__infos {
|
|
75
|
-
display: flex;
|
|
76
|
-
flex-direction: column;
|
|
77
|
-
gap: var(--ks-spacing-stack-s);
|
|
78
|
-
border-top: 1px solid var(--ks-border-color-interface-interactive);
|
|
79
|
-
border-bottom: 1px solid var(--ks-border-color-interface-interactive);
|
|
80
|
-
padding-top: var(--ks-spacing-inset-s);
|
|
81
|
-
padding-bottom: var(--ks-spacing-inset-s);
|
|
82
|
-
}
|
|
83
74
|
.dsa-event-list-teaser__location {
|
|
84
75
|
flex-basis: var(--dsa-tile--width_small);
|
|
85
76
|
flex-grow: 1;
|
|
@@ -92,6 +83,15 @@
|
|
|
92
83
|
.dsa-event-list-teaser__location-address {
|
|
93
84
|
margin: 0;
|
|
94
85
|
}
|
|
86
|
+
.dsa-event-list-teaser__infos {
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
gap: var(--ks-spacing-stack-s);
|
|
90
|
+
border-top: 1px solid var(--ks-border-color-interface-interactive);
|
|
91
|
+
border-bottom: 1px solid var(--ks-border-color-interface-interactive);
|
|
92
|
+
padding-top: var(--ks-spacing-inset-s);
|
|
93
|
+
padding-bottom: var(--ks-spacing-inset-s);
|
|
94
|
+
}
|
|
95
95
|
.dsa-event-list-teaser__info {
|
|
96
96
|
display: flex;
|
|
97
97
|
gap: calc(var(--ks-spacing-xxs) * 0.75);
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
.dsa-event-registration {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: var(--ks-spacing-stack-s);
|
|
5
|
+
}
|
|
6
|
+
.dsa-event-registration__label {
|
|
7
|
+
font: var(--dsa-headline_h2__subheadline--font);
|
|
8
|
+
}
|
|
9
|
+
.dsa-event-registration__link {
|
|
10
|
+
width: fit-content;
|
|
11
|
+
font: var(--ks-font-interface-s);
|
|
12
|
+
}
|
|
13
|
+
.dsa-event-registration__details {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-wrap: wrap;
|
|
16
|
+
gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
|
|
17
|
+
}
|
|
18
|
+
.dsa-event-registration__date {
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
gap: var(--ks-spacing-xxs);
|
|
22
|
+
}
|
|
23
|
+
.dsa-event-registration__date > .dsa-event-registration__info:first-child {
|
|
24
|
+
font-weight: var(--ks-font-weight-semi-bold);
|
|
25
|
+
}
|
|
26
|
+
.dsa-event-registration__location {
|
|
27
|
+
flex-basis: var(--dsa-tile--width_small);
|
|
28
|
+
flex-grow: 1;
|
|
29
|
+
}
|
|
30
|
+
.dsa-event-registration__location-name {
|
|
31
|
+
font-weight: var(--ks-font-weight-semi-bold);
|
|
32
|
+
color: var(--dsa-topic--color);
|
|
33
|
+
display: block;
|
|
34
|
+
}
|
|
35
|
+
.dsa-event-registration__location-address {
|
|
36
|
+
margin: 0;
|
|
37
|
+
}
|
|
38
|
+
.dsa-event-registration__infos {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
gap: var(--ks-spacing-stack-s);
|
|
42
|
+
background: var(--ks-background-color-accent);
|
|
43
|
+
border-radius: var(--ks-border-radius-card);
|
|
44
|
+
padding: var(--ks-spacing-inset-stretch-m);
|
|
45
|
+
}
|
|
46
|
+
.dsa-event-registration__info {
|
|
47
|
+
display: flex;
|
|
48
|
+
gap: calc(var(--ks-spacing-xxs) * 0.75);
|
|
49
|
+
font: var(--ks-font-interface-s);
|
|
50
|
+
justify-content: flex-start;
|
|
51
|
+
color: var(--ks-text-color-interface);
|
|
52
|
+
}
|
|
53
|
+
.dsa-event-registration__info address {
|
|
54
|
+
font-style: normal;
|
|
55
|
+
}
|
|
56
|
+
.dsa-event-registration__info--location {
|
|
57
|
+
flex-basis: 100%;
|
|
58
|
+
}
|
|
59
|
+
.dsa-event-registration__info .icon {
|
|
60
|
+
align-self: flex-start;
|
|
61
|
+
width: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
|
|
62
|
+
height: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
|
|
63
|
+
color: var(--ks-text-color-primary);
|
|
64
|
+
flex-shrink: 0;
|
|
65
|
+
}
|
|
66
|
+
.dsa-event-registration__form {
|
|
67
|
+
display: flex;
|
|
68
|
+
flex-direction: column;
|
|
69
|
+
gap: var(--ks-spacing-stack-xs);
|
|
70
|
+
}
|
|
71
|
+
.dsa-event-registration__form .c-button {
|
|
72
|
+
align-self: flex-end;
|
|
73
|
+
}
|
|
74
|
+
.dsa-event-registration__mandatory-text {
|
|
75
|
+
font: var(--ks-font-interface-xs);
|
|
76
|
+
color: var(--ks-color-fg-alpha-4);
|
|
77
|
+
margin-top: var(--ks-spacing-xxs);
|
|
78
|
+
font-style: italic;
|
|
79
|
+
}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/event-registration.schema.json",
|
|
4
|
+
"title": "Event Registration",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"label": {
|
|
8
|
+
"title": "Label",
|
|
9
|
+
"description": "Label of the event registration",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"examples": [
|
|
12
|
+
"Registration Request"
|
|
13
|
+
]
|
|
14
|
+
},
|
|
15
|
+
"title": {
|
|
16
|
+
"title": "Title",
|
|
17
|
+
"description": "Title of the event",
|
|
18
|
+
"type": "string",
|
|
19
|
+
"examples": [
|
|
20
|
+
"The Future of AI"
|
|
21
|
+
]
|
|
22
|
+
},
|
|
23
|
+
"link": {
|
|
24
|
+
"type": "object",
|
|
25
|
+
"title": "Link",
|
|
26
|
+
"description": "Link to the event details",
|
|
27
|
+
"properties": {
|
|
28
|
+
"url": {
|
|
29
|
+
"type": "string",
|
|
30
|
+
"title": "URL",
|
|
31
|
+
"description": "URL to the event details",
|
|
32
|
+
"examples": [
|
|
33
|
+
"#"
|
|
34
|
+
],
|
|
35
|
+
"format": "uri"
|
|
36
|
+
},
|
|
37
|
+
"text": {
|
|
38
|
+
"title": "Link Text",
|
|
39
|
+
"description": "Text for the link to the event details",
|
|
40
|
+
"type": "string",
|
|
41
|
+
"examples": [
|
|
42
|
+
"More Information on the Event"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"additionalProperties": false
|
|
47
|
+
},
|
|
48
|
+
"date": {
|
|
49
|
+
"title": "Date",
|
|
50
|
+
"description": "Date of the registration",
|
|
51
|
+
"type": "string",
|
|
52
|
+
"format": "date",
|
|
53
|
+
"examples": [
|
|
54
|
+
"18.09.2025"
|
|
55
|
+
]
|
|
56
|
+
},
|
|
57
|
+
"time": {
|
|
58
|
+
"title": "Time",
|
|
59
|
+
"description": "Time of the registration",
|
|
60
|
+
"type": "string",
|
|
61
|
+
"examples": [
|
|
62
|
+
"09:00 – 17:00"
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
"location": {
|
|
66
|
+
"type": "object",
|
|
67
|
+
"title": "Location",
|
|
68
|
+
"description": "Location of the event",
|
|
69
|
+
"properties": {
|
|
70
|
+
"name": {
|
|
71
|
+
"type": "string",
|
|
72
|
+
"examples": [
|
|
73
|
+
"Berlin Congress Center"
|
|
74
|
+
]
|
|
75
|
+
},
|
|
76
|
+
"address": {
|
|
77
|
+
"type": "string",
|
|
78
|
+
"examples": [
|
|
79
|
+
"Alexanderplatz 1, 10178 Berlin"
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
"additionalProperties": false
|
|
84
|
+
},
|
|
85
|
+
"nameInput": {
|
|
86
|
+
"title": "Name Input",
|
|
87
|
+
"description": "Input field for the name",
|
|
88
|
+
"type": "object",
|
|
89
|
+
"properties": {
|
|
90
|
+
"label": {
|
|
91
|
+
"type": "string",
|
|
92
|
+
"examples": [
|
|
93
|
+
"Name*"
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
"placeholder": {
|
|
97
|
+
"type": "string",
|
|
98
|
+
"examples": [
|
|
99
|
+
"Enter your name"
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
"additionalProperties": false
|
|
104
|
+
},
|
|
105
|
+
"emailInput": {
|
|
106
|
+
"title": "Email Input",
|
|
107
|
+
"description": "Input field for the email",
|
|
108
|
+
"type": "object",
|
|
109
|
+
"properties": {
|
|
110
|
+
"label": {
|
|
111
|
+
"title": "Label",
|
|
112
|
+
"description": "Label for the email input",
|
|
113
|
+
"type": "string",
|
|
114
|
+
"examples": [
|
|
115
|
+
"Email*"
|
|
116
|
+
]
|
|
117
|
+
},
|
|
118
|
+
"placeholder": {
|
|
119
|
+
"title": "Placeholder",
|
|
120
|
+
"description": "Placeholder text for the email input",
|
|
121
|
+
"type": "string",
|
|
122
|
+
"examples": [
|
|
123
|
+
"Enter your email"
|
|
124
|
+
]
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
"additionalProperties": false
|
|
128
|
+
},
|
|
129
|
+
"confirmationCheckboxLabel": {
|
|
130
|
+
"title": "Label",
|
|
131
|
+
"description": "Label for the confirmation checkbox",
|
|
132
|
+
"type": "string",
|
|
133
|
+
"examples": [
|
|
134
|
+
"I read and agree to the terms and conditions*"
|
|
135
|
+
]
|
|
136
|
+
},
|
|
137
|
+
"mandatoryText": {
|
|
138
|
+
"title": "Mandatory Text",
|
|
139
|
+
"description": "Text indicating that the checkbox is mandatory",
|
|
140
|
+
"type": "string",
|
|
141
|
+
"default": "_* Mandatory_"
|
|
142
|
+
},
|
|
143
|
+
"cta": {
|
|
144
|
+
"title": "Call to Action",
|
|
145
|
+
"type": "object",
|
|
146
|
+
"properties": {
|
|
147
|
+
"label": {
|
|
148
|
+
"title": "Button Label",
|
|
149
|
+
"description": "Label for the call to action button",
|
|
150
|
+
"type": "string",
|
|
151
|
+
"examples": [
|
|
152
|
+
"Send Request"
|
|
153
|
+
]
|
|
154
|
+
},
|
|
155
|
+
"url": {
|
|
156
|
+
"type": "string",
|
|
157
|
+
"format": "uri",
|
|
158
|
+
"default": "#"
|
|
159
|
+
},
|
|
160
|
+
"ariaLabel": {
|
|
161
|
+
"title": "Aria Label",
|
|
162
|
+
"description": "Aria label for the cta button",
|
|
163
|
+
"type": "string",
|
|
164
|
+
"default": "Event Registration"
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
"additionalProperties": false
|
|
168
|
+
},
|
|
169
|
+
"type": {
|
|
170
|
+
"const": "event-registration"
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
"additionalProperties": false
|
|
174
|
+
}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/event-registration.schema.json",
|
|
4
|
+
"title": "Event Registration",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"label": {
|
|
8
|
+
"title": "Label",
|
|
9
|
+
"description": "Label of the event registration",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"examples": ["Registration Request"]
|
|
12
|
+
},
|
|
13
|
+
"title": {
|
|
14
|
+
"title": "Title",
|
|
15
|
+
"description": "Title of the event",
|
|
16
|
+
"type": "string",
|
|
17
|
+
"examples": ["The Future of AI"]
|
|
18
|
+
},
|
|
19
|
+
"link": {
|
|
20
|
+
"type": "object",
|
|
21
|
+
"title": "Link",
|
|
22
|
+
"description": "Link to the event details",
|
|
23
|
+
"properties": {
|
|
24
|
+
"url": {
|
|
25
|
+
"type": "string",
|
|
26
|
+
"title": "URL",
|
|
27
|
+
"description": "URL to the event details",
|
|
28
|
+
"examples": ["#"],
|
|
29
|
+
"format": "uri"
|
|
30
|
+
},
|
|
31
|
+
"text": {
|
|
32
|
+
"title": "Link Text",
|
|
33
|
+
"description": "Text for the link to the event details",
|
|
34
|
+
"type": "string",
|
|
35
|
+
"examples": ["More Information on the Event"]
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"date": {
|
|
40
|
+
"title": "Date",
|
|
41
|
+
"description": "Date of the registration",
|
|
42
|
+
"type": "string",
|
|
43
|
+
"format": "date",
|
|
44
|
+
"examples": ["18.09.2025"]
|
|
45
|
+
},
|
|
46
|
+
"time": {
|
|
47
|
+
"title": "Time",
|
|
48
|
+
"description": "Time of the registration",
|
|
49
|
+
"type": "string",
|
|
50
|
+
"examples": ["09:00 – 17:00"]
|
|
51
|
+
},
|
|
52
|
+
"location": {
|
|
53
|
+
"type": "object",
|
|
54
|
+
"title": "Location",
|
|
55
|
+
"description": "Location of the event",
|
|
56
|
+
"properties": {
|
|
57
|
+
"name": {
|
|
58
|
+
"type": "string",
|
|
59
|
+
"examples": ["Berlin Congress Center"]
|
|
60
|
+
},
|
|
61
|
+
"address": {
|
|
62
|
+
"type": "string",
|
|
63
|
+
"examples": ["Alexanderplatz 1, 10178 Berlin"]
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"nameInput": {
|
|
68
|
+
"title": "Name Input",
|
|
69
|
+
"description": "Input field for the name",
|
|
70
|
+
"type": "object",
|
|
71
|
+
"properties": {
|
|
72
|
+
"label": {
|
|
73
|
+
"type": "string",
|
|
74
|
+
"examples": ["Name*"]
|
|
75
|
+
},
|
|
76
|
+
"placeholder": {
|
|
77
|
+
"type": "string",
|
|
78
|
+
"examples": ["Enter your name"]
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
"emailInput": {
|
|
83
|
+
"title": "Email Input",
|
|
84
|
+
"description": "Input field for the email",
|
|
85
|
+
"type": "object",
|
|
86
|
+
"properties": {
|
|
87
|
+
"label": {
|
|
88
|
+
"title": "Label",
|
|
89
|
+
"description": "Label for the email input",
|
|
90
|
+
"type": "string",
|
|
91
|
+
"examples": ["Email*"]
|
|
92
|
+
},
|
|
93
|
+
"placeholder": {
|
|
94
|
+
"title": "Placeholder",
|
|
95
|
+
"description": "Placeholder text for the email input",
|
|
96
|
+
"type": "string",
|
|
97
|
+
"examples": ["Enter your email"]
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
"confirmationCheckboxLabel": {
|
|
102
|
+
"title": "Label",
|
|
103
|
+
"description": "Label for the confirmation checkbox",
|
|
104
|
+
"type": "string",
|
|
105
|
+
"examples": ["I read and agree to the terms and conditions*"]
|
|
106
|
+
},
|
|
107
|
+
"mandatoryText": {
|
|
108
|
+
"title": "Mandatory Text",
|
|
109
|
+
"description": "Text indicating that the checkbox is mandatory",
|
|
110
|
+
"type": "string",
|
|
111
|
+
"default": "_* Mandatory_"
|
|
112
|
+
},
|
|
113
|
+
"cta": {
|
|
114
|
+
"title": "Call to Action",
|
|
115
|
+
"type": "object",
|
|
116
|
+
"properties": {
|
|
117
|
+
"label": {
|
|
118
|
+
"title": "Button Label",
|
|
119
|
+
"description": "Label for the call to action button",
|
|
120
|
+
"type": "string",
|
|
121
|
+
"examples": ["Send Request"]
|
|
122
|
+
},
|
|
123
|
+
"url": {
|
|
124
|
+
"type": "string",
|
|
125
|
+
"format": "uri",
|
|
126
|
+
"default": "#"
|
|
127
|
+
},
|
|
128
|
+
"ariaLabel": {
|
|
129
|
+
"title": "Aria Label",
|
|
130
|
+
"description": "Aria label for the cta button",
|
|
131
|
+
"type": "string",
|
|
132
|
+
"default": "Event Registration"
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
"additionalProperties": false
|
|
138
|
+
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/* eslint-disable */
|
|
3
|
+
/**
|
|
4
|
+
* This file was automatically generated by json-schema-to-typescript.
|
|
5
|
+
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
6
|
+
* and run json-schema-to-typescript to regenerate this file.
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Label of the event registration
|
|
10
|
+
*/
|
|
11
|
+
type Label = string;
|
|
12
|
+
/**
|
|
13
|
+
* Title of the event
|
|
14
|
+
*/
|
|
15
|
+
type Title = string;
|
|
16
|
+
/**
|
|
17
|
+
* URL to the event details
|
|
18
|
+
*/
|
|
19
|
+
type URL = string;
|
|
20
|
+
/**
|
|
21
|
+
* Text for the link to the event details
|
|
22
|
+
*/
|
|
23
|
+
type LinkText = string;
|
|
24
|
+
/**
|
|
25
|
+
* Date of the registration
|
|
26
|
+
*/
|
|
27
|
+
type Date = string;
|
|
28
|
+
/**
|
|
29
|
+
* Time of the registration
|
|
30
|
+
*/
|
|
31
|
+
type Time = string;
|
|
32
|
+
/**
|
|
33
|
+
* Label for the email input
|
|
34
|
+
*/
|
|
35
|
+
type Label1 = string;
|
|
36
|
+
/**
|
|
37
|
+
* Placeholder text for the email input
|
|
38
|
+
*/
|
|
39
|
+
type Placeholder = string;
|
|
40
|
+
/**
|
|
41
|
+
* Label for the confirmation checkbox
|
|
42
|
+
*/
|
|
43
|
+
type Label2 = string;
|
|
44
|
+
/**
|
|
45
|
+
* Text indicating that the checkbox is mandatory
|
|
46
|
+
*/
|
|
47
|
+
type MandatoryText = string;
|
|
48
|
+
/**
|
|
49
|
+
* Label for the call to action button
|
|
50
|
+
*/
|
|
51
|
+
type ButtonLabel = string;
|
|
52
|
+
/**
|
|
53
|
+
* Aria label for the cta button
|
|
54
|
+
*/
|
|
55
|
+
type AriaLabel = string;
|
|
56
|
+
interface EventRegistrationProps {
|
|
57
|
+
label?: Label;
|
|
58
|
+
title?: Title;
|
|
59
|
+
link?: Link;
|
|
60
|
+
date?: Date;
|
|
61
|
+
time?: Time;
|
|
62
|
+
location?: Location;
|
|
63
|
+
nameInput?: NameInput;
|
|
64
|
+
emailInput?: EmailInput;
|
|
65
|
+
confirmationCheckboxLabel?: Label2;
|
|
66
|
+
mandatoryText?: MandatoryText;
|
|
67
|
+
cta?: CallToAction;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Link to the event details
|
|
71
|
+
*/
|
|
72
|
+
interface Link {
|
|
73
|
+
url?: URL;
|
|
74
|
+
text?: LinkText;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Location of the event
|
|
78
|
+
*/
|
|
79
|
+
interface Location {
|
|
80
|
+
name?: string;
|
|
81
|
+
address?: string;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Input field for the name
|
|
85
|
+
*/
|
|
86
|
+
interface NameInput {
|
|
87
|
+
label?: string;
|
|
88
|
+
placeholder?: string;
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Input field for the email
|
|
92
|
+
*/
|
|
93
|
+
interface EmailInput {
|
|
94
|
+
label?: Label1;
|
|
95
|
+
placeholder?: Placeholder;
|
|
96
|
+
}
|
|
97
|
+
interface CallToAction {
|
|
98
|
+
label?: ButtonLabel;
|
|
99
|
+
url?: string;
|
|
100
|
+
ariaLabel?: AriaLabel;
|
|
101
|
+
}
|
|
102
|
+
declare const EventRegistrationContextDefault: import("react").ForwardRefExoticComponent<EventRegistrationProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
103
|
+
declare const EventRegistrationContext: import("react").Context<import("react").ForwardRefExoticComponent<EventRegistrationProps & import("react").RefAttributes<HTMLDivElement>>>;
|
|
104
|
+
declare const EventRegistration: import("react").ForwardRefExoticComponent<EventRegistrationProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
105
|
+
export type { EventRegistrationProps };
|
|
106
|
+
export { EventRegistrationContextDefault, EventRegistrationContext, EventRegistration };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import "./event-registration.css";
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, createContext, useContext } from 'react';
|
|
4
|
+
import { Icon } from '@kickstartds/base/lib/icon';
|
|
5
|
+
import { Headline } from '../headline/index.js';
|
|
6
|
+
import { Link } from '@kickstartds/base/lib/link';
|
|
7
|
+
import Markdown from 'markdown-to-jsx';
|
|
8
|
+
import { TextField } from '@kickstartds/form/lib/text-field';
|
|
9
|
+
import { Checkbox } from '@kickstartds/form/lib/checkbox';
|
|
10
|
+
import { Button } from '../button/index.js';
|
|
11
|
+
import 'classnames';
|
|
12
|
+
import '@kickstartds/base/lib/headline';
|
|
13
|
+
import '@kickstartds/base/lib/button';
|
|
14
|
+
|
|
15
|
+
const EventRegistrationContextDefault = forwardRef(({ date, time, title, link, label, location, nameInput, emailInput, mandatoryText, cta, confirmationCheckboxLabel, }, ref) => (jsxs("div", { ref: ref, className: "dsa-event-registration", children: [jsx(Headline, { spaceAfter: "minimum", text: title, level: "h2", sub: label, switchOrder: true }), jsxs("div", { className: "dsa-event-registration__infos", children: [jsxs("div", { className: "dsa-event-registration__details", children: [jsxs("div", { className: "dsa-event-registration__date", children: [jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "time" }), time] })] }), jsxs("div", { className: "dsa-event-registration__location dsa-event-registration__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), jsxs("address", { children: [location?.name && (jsx("span", { className: "dsa-event-registration__location-name", children: location.name })), jsx(Markdown, { className: "dsa-event-registration__location-address", children: location?.address })] })] })] }), jsx(Link, { className: "dsa-event-registration__link", href: link?.url, children: link?.text })] }), jsxs("form", { className: "dsa-event-registration__form", children: [jsx(TextField, { label: nameInput.label, placeholder: nameInput?.placeholder }), jsx(TextField, { label: emailInput.label, placeholder: emailInput?.placeholder }), jsx(Checkbox, { label: confirmationCheckboxLabel, name: "confirmation-checkbox", id: "confirmation-checkbox" }), jsx(Markdown, { className: "dsa-event-registration__mandatory-text", children: mandatoryText }), jsx(Button, { label: cta.label, url: cta.url, "aria-label": cta?.ariaLabel, variant: "primary", size: "small" })] })] })));
|
|
16
|
+
const EventRegistrationContext = createContext(EventRegistrationContextDefault);
|
|
17
|
+
const EventRegistration = forwardRef((props, ref) => {
|
|
18
|
+
const Component = useContext(EventRegistrationContext);
|
|
19
|
+
return jsx(Component, { ...props, ref: ref });
|
|
20
|
+
});
|
|
21
|
+
EventRegistration.displayName = "EventRegistration";
|
|
22
|
+
|
|
23
|
+
export { EventRegistration, EventRegistrationContext, EventRegistrationContextDefault };
|
|
@@ -1826,7 +1826,7 @@
|
|
|
1826
1826
|
"id": "event-event-list-teaser--default",
|
|
1827
1827
|
"group": "Event/ Event List Teaser",
|
|
1828
1828
|
"name": "Default",
|
|
1829
|
-
"code": "<EventListTeaser\n categories={[\n 'AI'\n ]}\n cta=\"Show event\"\n ctaText=\"Show event\"\n date=\"30.12.2025\"\n image={{\n alt: 'A futuristic AI concept image',\n src: 'img/close-up-young-business-team-working.png'\n }}\n location={{\n address: '
|
|
1829
|
+
"code": "<EventListTeaser\n categories={[\n 'AI'\n ]}\n cta=\"Show event\"\n ctaText=\"Show event\"\n date=\"30.12.2025\"\n image={{\n alt: 'A futuristic AI concept image',\n src: 'img/close-up-young-business-team-working.png'\n }}\n location={{\n address: 'Alexanderplatz 1<br />\\n10178 Berlin',\n name: 'Tech Conference Center'\n }}\n text=\"The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.\"\n time=\"10:00\"\n title=\"The Future of AI\"\n url=\"#\"\n/>",
|
|
1830
1830
|
"args": {
|
|
1831
1831
|
"title": "The Future of AI",
|
|
1832
1832
|
"text": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.",
|
|
@@ -1834,7 +1834,7 @@
|
|
|
1834
1834
|
"time": "10:00",
|
|
1835
1835
|
"location": {
|
|
1836
1836
|
"name": "Tech Conference Center",
|
|
1837
|
-
"address": "
|
|
1837
|
+
"address": "Alexanderplatz 1<br />\n10178 Berlin"
|
|
1838
1838
|
},
|
|
1839
1839
|
"categories": [
|
|
1840
1840
|
"AI"
|
|
@@ -1891,6 +1891,42 @@
|
|
|
1891
1891
|
},
|
|
1892
1892
|
"screenshot": "img/screenshots/event-event-location--default.png"
|
|
1893
1893
|
},
|
|
1894
|
+
{
|
|
1895
|
+
"id": "event-event-registration--default",
|
|
1896
|
+
"group": "Event/ Event Registration",
|
|
1897
|
+
"name": "Default",
|
|
1898
|
+
"code": "<EventRegistration\n confirmationCheckboxLabel=\"I read and agree to the terms and conditions*\"\n cta={{\n ariaLabel: 'Register for the event on 18th September 2025 from 09:00 to 17:00',\n label: 'Send Request',\n url: '#'\n }}\n date=\"18.09.2025\"\n emailInput={{\n label: 'Email*',\n placeholder: 'Enter your email'\n }}\n label=\"Registration Request\"\n link={{\n text: 'More Information on the Event',\n url: '#'\n }}\n location={{\n address: 'Alexanderplatz 1<br/>10178 Berlin',\n name: 'Tech Conference Center'\n }}\n mandatoryText=\"_* Mandatory_\"\n nameInput={{\n label: 'Name*',\n placeholder: 'Enter your name'\n }}\n time=\"09:00 – 17:00\"\n title=\"The Future of AI\"\n/>",
|
|
1899
|
+
"args": {
|
|
1900
|
+
"label": "Registration Request",
|
|
1901
|
+
"title": "The Future of AI",
|
|
1902
|
+
"link": {
|
|
1903
|
+
"url": "#",
|
|
1904
|
+
"text": "More Information on the Event"
|
|
1905
|
+
},
|
|
1906
|
+
"date": "18.09.2025",
|
|
1907
|
+
"time": "09:00 – 17:00",
|
|
1908
|
+
"location": {
|
|
1909
|
+
"name": "Tech Conference Center",
|
|
1910
|
+
"address": "Alexanderplatz 1<br/>10178 Berlin"
|
|
1911
|
+
},
|
|
1912
|
+
"nameInput": {
|
|
1913
|
+
"label": "Name*",
|
|
1914
|
+
"placeholder": "Enter your name"
|
|
1915
|
+
},
|
|
1916
|
+
"emailInput": {
|
|
1917
|
+
"label": "Email*",
|
|
1918
|
+
"placeholder": "Enter your email"
|
|
1919
|
+
},
|
|
1920
|
+
"confirmationCheckboxLabel": "I read and agree to the terms and conditions*",
|
|
1921
|
+
"mandatoryText": "_* Mandatory_",
|
|
1922
|
+
"cta": {
|
|
1923
|
+
"label": "Send Request",
|
|
1924
|
+
"url": "#",
|
|
1925
|
+
"ariaLabel": "Register for the event on 18th September 2025 from 09:00 to 17:00"
|
|
1926
|
+
}
|
|
1927
|
+
},
|
|
1928
|
+
"screenshot": "img/screenshots/event-event-registration--default.png"
|
|
1929
|
+
},
|
|
1894
1930
|
{
|
|
1895
1931
|
"id": "components-faq--dropdown-list",
|
|
1896
1932
|
"group": "Components/Faq",
|
package/dist/global.css
CHANGED
|
@@ -608,7 +608,7 @@ h3 {
|
|
|
608
608
|
--dsa-input--border-color_active: var(--ks-border-color-interface-interactive-active);
|
|
609
609
|
--dsa-input__label--color: var(--ks-text-color-interface);
|
|
610
610
|
--dsa-input__label--font: var(--ks-font-interface-s);
|
|
611
|
-
--dsa-input__label--font-weight: var(--ks-font-weight-
|
|
611
|
+
--dsa-input__label--font-weight: var(--ks-font-weight-semi-bold);
|
|
612
612
|
--dsa-input--font: var(--ks-font-interface-s);
|
|
613
613
|
--dsa-input--background: transparent;
|
|
614
614
|
--dsa-input--background_focus: transparent;
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 08 Jul 2025 07:49:17 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 Tue, 08 Jul 2025 07:49:21 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 Tue, 08 Jul 2025 07:49:19 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 Tue, 08 Jul 2025 07:49:23 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