@kickstartds/ds-agency-premium 1.6.68--canary.45.1671.0 → 1.6.68--canary.45.1678.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-9f207f1c.d.ts → BlogOverviewProps-7caa223c.d.ts} +1 -1
- package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-d9decb7c.d.ts} +1 -1
- package/dist/EventDetailProps-63f63768.d.ts +387 -0
- package/dist/EventListAppointmentProps-da54c3b9.d.ts +38 -0
- package/dist/{PageProps-aa29c554.d.ts → PageProps-7caa223c.d.ts} +1 -1
- package/dist/{SectionProps-7caa223c.d.ts → SectionProps-03ff6d21.d.ts} +1 -1
- package/dist/components/blog-overview/blog-overview.schema.dereffed.json +4 -2
- package/dist/components/blog-overview/index.d.ts +1 -1
- package/dist/components/blog-post/blog-post.schema.dereffed.json +4 -2
- package/dist/components/blog-post/index.d.ts +1 -1
- package/dist/components/event-detail/event-detail.schema.dereffed.json +203 -0
- package/dist/components/event-detail/event-detail.schema.json +73 -0
- package/dist/components/event-detail/index.d.ts +5 -0
- package/dist/components/event-detail/index.js +32 -0
- package/dist/components/event-header/event-header.css +6 -0
- package/dist/components/event-header/event-header.schema.dereffed.json +38 -0
- package/dist/components/event-header/event-header.schema.json +34 -0
- package/dist/components/event-header/index.d.ts +35 -0
- package/dist/components/event-header/index.js +20 -0
- package/dist/components/event-list-appointment/event-list-appointment.css +52 -0
- package/dist/components/event-list-appointment/event-list-appointment.schema.dereffed.json +47 -0
- package/dist/components/event-list-appointment/event-list-appointment.schema.json +44 -0
- package/dist/components/event-list-appointment/index.d.ts +7 -10
- package/dist/components/event-list-appointment/index.js +11 -9
- package/dist/components/event-list-entry/event-list-entry.css +42 -0
- package/dist/components/event-list-entry/event-list-entry.schema.dereffed.json +75 -0
- package/dist/components/event-list-entry/event-list-entry.schema.json +28 -0
- package/dist/components/event-list-entry/index.d.ts +28 -11
- package/dist/components/event-list-entry/index.js +12 -8
- package/dist/components/gallery/gallery.schema.dereffed.json +2 -1
- package/dist/components/gallery/gallery.schema.json +2 -1
- package/dist/components/gallery/index.js +1 -1
- package/dist/components/image-story/index.d.ts +1 -1
- package/dist/components/index/index.d.ts +4 -3
- package/dist/components/page/index.d.ts +1 -1
- package/dist/components/page/page.schema.dereffed.json +4 -2
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +180 -53
- package/dist/components/section/index.d.ts +1 -1
- package/dist/components/section/section.schema.dereffed.json +4 -2
- package/dist/components/slider/slider.schema.dereffed.json +2 -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/EventProps-feae5a7c.d.ts +0 -88
- package/dist/components/event/event.schema.dereffed.json +0 -119
- package/dist/components/event/event.schema.json +0 -109
- package/dist/components/event/index.d.ts +0 -8
- package/dist/components/event/index.js +0 -26
- package/dist/components/event-list-appointment/event.css +0 -88
- /package/dist/{ImageStoryProps-e853e1e7.d.ts → ImageStoryProps-03ff6d21.d.ts} +0 -0
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/cms/event-detail.schema.json",
|
|
4
|
+
"title": "Event Detail",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"title": {
|
|
8
|
+
"title": "Event Title",
|
|
9
|
+
"description": "Title of the event",
|
|
10
|
+
"type": "string"
|
|
11
|
+
},
|
|
12
|
+
"categories": {
|
|
13
|
+
"title": "Categories",
|
|
14
|
+
"description": "Categories to which the event belongs",
|
|
15
|
+
"type": "array",
|
|
16
|
+
"items": {
|
|
17
|
+
"type": "object",
|
|
18
|
+
"properties": {
|
|
19
|
+
"label": {
|
|
20
|
+
"type": "string",
|
|
21
|
+
"title": "Label",
|
|
22
|
+
"description": "Label of the category"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"additionalProperties": false
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"intro": {
|
|
29
|
+
"title": "Intro",
|
|
30
|
+
"description": "Short intro text for the event",
|
|
31
|
+
"type": "string"
|
|
32
|
+
},
|
|
33
|
+
"appointments": {
|
|
34
|
+
"title": "Appointments",
|
|
35
|
+
"description": "List of attendable appointments",
|
|
36
|
+
"type": "array",
|
|
37
|
+
"items": {
|
|
38
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
39
|
+
"$id": "http://schema.mydesignsystem.com/event-list-appointment.schema.json",
|
|
40
|
+
"title": "Event List Appointment",
|
|
41
|
+
"type": "object",
|
|
42
|
+
"properties": {
|
|
43
|
+
"date": {
|
|
44
|
+
"title": "Date",
|
|
45
|
+
"description": "Date of the appointment",
|
|
46
|
+
"type": "string",
|
|
47
|
+
"format": "date"
|
|
48
|
+
},
|
|
49
|
+
"time": {
|
|
50
|
+
"title": "Time",
|
|
51
|
+
"description": "Time of the appointment",
|
|
52
|
+
"type": "string"
|
|
53
|
+
},
|
|
54
|
+
"label": {
|
|
55
|
+
"title": "CTA Label",
|
|
56
|
+
"description": "Label for the call to action button",
|
|
57
|
+
"type": "string"
|
|
58
|
+
},
|
|
59
|
+
"href": {
|
|
60
|
+
"title": "Href",
|
|
61
|
+
"description": "URL for the call to action button",
|
|
62
|
+
"type": "string",
|
|
63
|
+
"format": "uri",
|
|
64
|
+
"default": "#"
|
|
65
|
+
},
|
|
66
|
+
"newTab": {
|
|
67
|
+
"title": "Open in New Tab",
|
|
68
|
+
"description": "Whether the link should open in a new tab",
|
|
69
|
+
"type": "boolean",
|
|
70
|
+
"default": true
|
|
71
|
+
},
|
|
72
|
+
"ariaLabel": {
|
|
73
|
+
"title": "Aria Label",
|
|
74
|
+
"description": "Aria label for the link",
|
|
75
|
+
"type": "string",
|
|
76
|
+
"default": "Event Appointment"
|
|
77
|
+
},
|
|
78
|
+
"type": {
|
|
79
|
+
"const": "event-list-appointment"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
"additionalProperties": false
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
"downloads": {
|
|
86
|
+
"type": "array",
|
|
87
|
+
"items": {
|
|
88
|
+
"type": "object",
|
|
89
|
+
"properties": {
|
|
90
|
+
"name": {
|
|
91
|
+
"type": "string",
|
|
92
|
+
"description": "The name of the file"
|
|
93
|
+
},
|
|
94
|
+
"description": {
|
|
95
|
+
"type": "string",
|
|
96
|
+
"description": "A brief description of the file"
|
|
97
|
+
},
|
|
98
|
+
"previewImage": {
|
|
99
|
+
"type": "string",
|
|
100
|
+
"format": "uri",
|
|
101
|
+
"description": "A URL to an image that previews the file."
|
|
102
|
+
},
|
|
103
|
+
"url": {
|
|
104
|
+
"type": "string",
|
|
105
|
+
"format": "uri",
|
|
106
|
+
"description": "The URL to download the file from."
|
|
107
|
+
},
|
|
108
|
+
"size": {
|
|
109
|
+
"type": [
|
|
110
|
+
"string"
|
|
111
|
+
],
|
|
112
|
+
"description": "The size of the download file"
|
|
113
|
+
},
|
|
114
|
+
"format": {
|
|
115
|
+
"type": [
|
|
116
|
+
"string"
|
|
117
|
+
],
|
|
118
|
+
"description": "The format of the download file"
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
"required": [
|
|
122
|
+
"name",
|
|
123
|
+
"url"
|
|
124
|
+
],
|
|
125
|
+
"additionalProperties": false
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
"description": {
|
|
129
|
+
"title": "Description",
|
|
130
|
+
"description": "Description of the event",
|
|
131
|
+
"type": "string",
|
|
132
|
+
"format": "markdown"
|
|
133
|
+
},
|
|
134
|
+
"images": {
|
|
135
|
+
"type": "array",
|
|
136
|
+
"title": "Images",
|
|
137
|
+
"description": "The images to display in the gallery",
|
|
138
|
+
"items": {
|
|
139
|
+
"type": "object",
|
|
140
|
+
"properties": {
|
|
141
|
+
"src": {
|
|
142
|
+
"type": "string",
|
|
143
|
+
"title": "src",
|
|
144
|
+
"format": "image",
|
|
145
|
+
"description": "The source of the image",
|
|
146
|
+
"examples": [
|
|
147
|
+
"https://example.com/image1.jpg"
|
|
148
|
+
]
|
|
149
|
+
},
|
|
150
|
+
"alt": {
|
|
151
|
+
"type": "string",
|
|
152
|
+
"title": "Alt text",
|
|
153
|
+
"description": "Alt text of the image",
|
|
154
|
+
"examples": [
|
|
155
|
+
"https://example.com/image1.jpg"
|
|
156
|
+
]
|
|
157
|
+
},
|
|
158
|
+
"caption": {
|
|
159
|
+
"type": "string",
|
|
160
|
+
"format": "markdown",
|
|
161
|
+
"title": "Caption",
|
|
162
|
+
"description": "The caption of the image",
|
|
163
|
+
"examples": [
|
|
164
|
+
"Caption Image"
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
"additionalProperties": false,
|
|
169
|
+
"required": [
|
|
170
|
+
"src"
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
"minItems": 1,
|
|
174
|
+
"maxItems": 10
|
|
175
|
+
},
|
|
176
|
+
"button": {
|
|
177
|
+
"title": "Button",
|
|
178
|
+
"description": "Button at the bottom of the event detail",
|
|
179
|
+
"type": "object",
|
|
180
|
+
"properties": {
|
|
181
|
+
"label": {
|
|
182
|
+
"type": "string",
|
|
183
|
+
"title": "Label",
|
|
184
|
+
"description": "Label of the button",
|
|
185
|
+
"examples": [
|
|
186
|
+
"See all Events"
|
|
187
|
+
]
|
|
188
|
+
},
|
|
189
|
+
"target": {
|
|
190
|
+
"type": "string",
|
|
191
|
+
"title": "Target",
|
|
192
|
+
"description": "URL the button links to",
|
|
193
|
+
"format": "uri"
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
"additionalProperties": false
|
|
197
|
+
},
|
|
198
|
+
"type": {
|
|
199
|
+
"const": "event-detail"
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
"additionalProperties": false
|
|
203
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/cms/event-detail.schema.json",
|
|
4
|
+
"title": "Event Detail",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"title": {
|
|
8
|
+
"title": "Event Title",
|
|
9
|
+
"description": "Title of the event",
|
|
10
|
+
"type": "string"
|
|
11
|
+
},
|
|
12
|
+
"categories": {
|
|
13
|
+
"title": "Categories",
|
|
14
|
+
"description": "Categories to which the event belongs",
|
|
15
|
+
"type": "array",
|
|
16
|
+
"items": {
|
|
17
|
+
"type": "object",
|
|
18
|
+
"properties": {
|
|
19
|
+
"label": {
|
|
20
|
+
"type": "string",
|
|
21
|
+
"title": "Label",
|
|
22
|
+
"description": "Label of the category"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"intro": {
|
|
28
|
+
"title": "Intro",
|
|
29
|
+
"description": "Short intro text for the event",
|
|
30
|
+
"type": "string"
|
|
31
|
+
},
|
|
32
|
+
"appointments": {
|
|
33
|
+
"title": "Appointments",
|
|
34
|
+
"description": "List of attendable appointments",
|
|
35
|
+
"type": "array",
|
|
36
|
+
"items": {
|
|
37
|
+
"$ref": "http://schema.mydesignsystem.com/event-list-appointment.schema.json"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"downloads": {
|
|
41
|
+
"$ref": "http://schema.mydesignsystem.com/downloads.schema.json#/properties/downloads"
|
|
42
|
+
},
|
|
43
|
+
"description": {
|
|
44
|
+
"title": "Description",
|
|
45
|
+
"description": "Description of the event",
|
|
46
|
+
"type": "string",
|
|
47
|
+
"format": "markdown"
|
|
48
|
+
},
|
|
49
|
+
"images": {
|
|
50
|
+
"$ref": "http://schema.mydesignsystem.com/gallery.schema.json#/properties/images"
|
|
51
|
+
},
|
|
52
|
+
"button": {
|
|
53
|
+
"title": "Button",
|
|
54
|
+
"description": "Button at the bottom of the event detail",
|
|
55
|
+
"type": "object",
|
|
56
|
+
"properties": {
|
|
57
|
+
"label": {
|
|
58
|
+
"type": "string",
|
|
59
|
+
"title": "Label",
|
|
60
|
+
"description": "Label of the button",
|
|
61
|
+
"examples": ["See all Events"]
|
|
62
|
+
},
|
|
63
|
+
"target": {
|
|
64
|
+
"type": "string",
|
|
65
|
+
"title": "Target",
|
|
66
|
+
"description": "URL the button links to",
|
|
67
|
+
"format": "uri"
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
"additionalProperties": false
|
|
73
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { RichText } from '@kickstartds/base/lib/rich-text';
|
|
3
|
+
import { EventListEntry } from '../event-list-entry/index.js';
|
|
4
|
+
import { Section } from '../section/index.js';
|
|
5
|
+
import { EventHeader } from '../event-header/index.js';
|
|
6
|
+
import { Gallery } from '../gallery/index.js';
|
|
7
|
+
import { Downloads } from '../downloads/index.js';
|
|
8
|
+
import 'react';
|
|
9
|
+
import '@kickstartds/base/lib/icon';
|
|
10
|
+
import '../event-list-appointment/index.js';
|
|
11
|
+
import 'classnames';
|
|
12
|
+
import '@kickstartds/core/lib/react';
|
|
13
|
+
import '@kickstartds/base/lib/section';
|
|
14
|
+
import '../section/js/Section.client.js';
|
|
15
|
+
import '@kickstartds/core/lib/component';
|
|
16
|
+
import '../headline/index.js';
|
|
17
|
+
import 'markdown-to-jsx';
|
|
18
|
+
import '@kickstartds/base/lib/headline';
|
|
19
|
+
import '../text/index.js';
|
|
20
|
+
import '@kickstartds/base/lib/tag-label';
|
|
21
|
+
import '@kickstartds/base/lib/text-media';
|
|
22
|
+
import '@kickstartds/base/lib/picture';
|
|
23
|
+
|
|
24
|
+
const EventDetail = ({ title, categories, appointments, description, intro, images, downloads, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "narrow", spaceAfter: "none", children: jsx(EventHeader, { title: title, categories: categories, intro: intro }) }), appointments && appointments.length > 0 && (jsx(Section, { width: "narrow", content: { mode: "list" }, children: appointments.map((appointment, index) => (jsx(EventListEntry, { ...appointment }, index))) })), description && (jsx(Section, { width: "narrow", spaceBefore: "none", children: jsx(RichText, { className: "dsa-event__description", text: description }) })), jsx(Section, { spaceBefore: "none", children: jsx(Gallery, { images: images, aspectRatio: "wide", layout: "smallTiles", lightbox: true }) }), downloads && downloads.length > 0 && (jsx(Section, { width: "narrow", spaceBefore: "none", spaceAfter: "none", children: jsx(Downloads, { downloads: downloads }) })), jsx(Section, { width: "narrow", buttons: [
|
|
25
|
+
{
|
|
26
|
+
label: "See all Events",
|
|
27
|
+
target: "/#",
|
|
28
|
+
},
|
|
29
|
+
] })] }));
|
|
30
|
+
EventDetail.displayName = "EventDetail";
|
|
31
|
+
|
|
32
|
+
export { EventDetail };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/event-header.schema.json",
|
|
4
|
+
"title": "Event Header",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"title": {
|
|
8
|
+
"title": "Title",
|
|
9
|
+
"description": "Title of the event",
|
|
10
|
+
"type": "string"
|
|
11
|
+
},
|
|
12
|
+
"categories": {
|
|
13
|
+
"title": "Categories",
|
|
14
|
+
"description": "Categories associated with the event",
|
|
15
|
+
"type": "array",
|
|
16
|
+
"items": {
|
|
17
|
+
"type": "object",
|
|
18
|
+
"properties": {
|
|
19
|
+
"label": {
|
|
20
|
+
"title": "Label",
|
|
21
|
+
"description": "Label of the category",
|
|
22
|
+
"type": "string"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"additionalProperties": false
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"intro": {
|
|
29
|
+
"title": "Intro",
|
|
30
|
+
"description": "Introductory text for the event",
|
|
31
|
+
"type": "string"
|
|
32
|
+
},
|
|
33
|
+
"type": {
|
|
34
|
+
"const": "event-header"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"additionalProperties": false
|
|
38
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/event-header.schema.json",
|
|
4
|
+
"title": "Event Header",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"title": {
|
|
8
|
+
"title": "Title",
|
|
9
|
+
"description": "Title of the event",
|
|
10
|
+
"type": "string"
|
|
11
|
+
},
|
|
12
|
+
"categories": {
|
|
13
|
+
"title": "Categories",
|
|
14
|
+
"description": "Categories associated with the event",
|
|
15
|
+
"type": "array",
|
|
16
|
+
"items": {
|
|
17
|
+
"type": "object",
|
|
18
|
+
"properties": {
|
|
19
|
+
"label": {
|
|
20
|
+
"title": "Label",
|
|
21
|
+
"description": "Label of the category",
|
|
22
|
+
"type": "string"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"intro": {
|
|
28
|
+
"title": "Intro",
|
|
29
|
+
"description": "Introductory text for the event",
|
|
30
|
+
"type": "string"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"additionalProperties": false
|
|
34
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
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
|
+
* Title of the event
|
|
10
|
+
*/
|
|
11
|
+
type Title = string;
|
|
12
|
+
/**
|
|
13
|
+
* Label of the category
|
|
14
|
+
*/
|
|
15
|
+
type Label = string;
|
|
16
|
+
/**
|
|
17
|
+
* Categories associated with the event
|
|
18
|
+
*/
|
|
19
|
+
type Categories = {
|
|
20
|
+
label?: Label;
|
|
21
|
+
}[];
|
|
22
|
+
/**
|
|
23
|
+
* Introductory text for the event
|
|
24
|
+
*/
|
|
25
|
+
type Intro = string;
|
|
26
|
+
interface EventHeaderProps {
|
|
27
|
+
title?: Title;
|
|
28
|
+
categories?: Categories;
|
|
29
|
+
intro?: Intro;
|
|
30
|
+
}
|
|
31
|
+
declare const EventHeaderContextDefault: import("react").ForwardRefExoticComponent<EventHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
32
|
+
declare const EventHeaderContext: import("react").Context<import("react").ForwardRefExoticComponent<EventHeaderProps & import("react").RefAttributes<HTMLDivElement>>>;
|
|
33
|
+
declare const EventHeader: import("react").ForwardRefExoticComponent<EventHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
34
|
+
export type { EventHeaderProps };
|
|
35
|
+
export { EventHeaderContextDefault, EventHeaderContext, EventHeader };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import "./event-header.css";
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, createContext, useContext } from 'react';
|
|
4
|
+
import { Headline } from '../headline/index.js';
|
|
5
|
+
import { Text } from '../text/index.js';
|
|
6
|
+
import { TagLabel } from '@kickstartds/base/lib/tag-label';
|
|
7
|
+
import 'classnames';
|
|
8
|
+
import 'markdown-to-jsx';
|
|
9
|
+
import '@kickstartds/base/lib/headline';
|
|
10
|
+
import '@kickstartds/base/lib/rich-text';
|
|
11
|
+
|
|
12
|
+
const EventHeaderContextDefault = forwardRef(({ title, categories, intro }, ref) => (jsxs("div", { className: "dsa-event-header", ref: ref, children: [categories && categories.length > 0 && (jsx("div", { className: "dsa-event-header__categories", children: categories.map((category, index) => (jsx(TagLabel, { className: "dsa-event__category", label: category?.label }, index))) })), jsx(Headline, { text: title, level: "h1" }), intro && jsx(Text, { highlightText: true, text: intro })] })));
|
|
13
|
+
const EventHeaderContext = createContext(EventHeaderContextDefault);
|
|
14
|
+
const EventHeader = forwardRef((props, ref) => {
|
|
15
|
+
const Component = useContext(EventHeaderContext);
|
|
16
|
+
return jsx(Component, { ...props, ref: ref });
|
|
17
|
+
});
|
|
18
|
+
EventHeader.displayName = "EventHeader";
|
|
19
|
+
|
|
20
|
+
export { EventHeader, EventHeaderContext, EventHeaderContextDefault };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
.dsa-event-list-appointment {
|
|
2
|
+
--g-link--text-decoration: none;
|
|
3
|
+
--g-link--text-decoration-hover: none;
|
|
4
|
+
--g-link--color: var(--ks-text-color-interface-interactive);
|
|
5
|
+
--g-link--color-hover: var(--ks-text-color-interface-interactive);
|
|
6
|
+
--g-link--border-radius: var(--ks-border-radius-control);
|
|
7
|
+
--g-link--background: var(--ks-background-color-default);
|
|
8
|
+
--g-link--background-hover: var(--ks-background-color-default);
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: row;
|
|
11
|
+
flex-wrap: wrap;
|
|
12
|
+
justify-content: space-between;
|
|
13
|
+
gap: var(--ks-spacing-inline-s);
|
|
14
|
+
padding: var(--ks-spacing-inset-s);
|
|
15
|
+
border: var(--ks-border-width-default) solid var(--ks-border-color-interface-interactive);
|
|
16
|
+
flex-grow: 0;
|
|
17
|
+
}
|
|
18
|
+
.dsa-event-list-appointment:hover {
|
|
19
|
+
border-color: var(--ks-border-color-interface-interactive-hover);
|
|
20
|
+
}
|
|
21
|
+
.dsa-event-list-appointment__info {
|
|
22
|
+
display: flex;
|
|
23
|
+
gap: var(--ks-spacing-xxs);
|
|
24
|
+
font: var(--ks-font-interface-s);
|
|
25
|
+
text-decoration: none;
|
|
26
|
+
align-items: center;
|
|
27
|
+
}
|
|
28
|
+
.dsa-event-list-appointment__infos {
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
display: flex;
|
|
31
|
+
gap: var(--ks-spacing-stack-xs);
|
|
32
|
+
}
|
|
33
|
+
.dsa-event-list-appointment__label {
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
color: var(--ks-text-color-primary);
|
|
37
|
+
font: var(--ks-font-interface-s);
|
|
38
|
+
align-self: flex-end;
|
|
39
|
+
font-weight: var(--ks-font-weight-semi-bold);
|
|
40
|
+
}
|
|
41
|
+
.dsa-event-list-appointment__label .icon {
|
|
42
|
+
width: 1.75em;
|
|
43
|
+
height: 1.75em;
|
|
44
|
+
}
|
|
45
|
+
.dsa-event-list-appointment__icon {
|
|
46
|
+
color: var(--ks-text-color-primary);
|
|
47
|
+
width: 1.75em;
|
|
48
|
+
height: 1.75em;
|
|
49
|
+
}
|
|
50
|
+
.dsa-event-list-appointment .l-container--rich-text {
|
|
51
|
+
container-type: normal;
|
|
52
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/event-list-appointment.schema.json",
|
|
4
|
+
"title": "Event List Appointment",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"date": {
|
|
8
|
+
"title": "Date",
|
|
9
|
+
"description": "Date of the appointment",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"format": "date"
|
|
12
|
+
},
|
|
13
|
+
"time": {
|
|
14
|
+
"title": "Time",
|
|
15
|
+
"description": "Time of the appointment",
|
|
16
|
+
"type": "string"
|
|
17
|
+
},
|
|
18
|
+
"label": {
|
|
19
|
+
"title": "CTA Label",
|
|
20
|
+
"description": "Label for the call to action button",
|
|
21
|
+
"type": "string"
|
|
22
|
+
},
|
|
23
|
+
"href": {
|
|
24
|
+
"title": "Href",
|
|
25
|
+
"description": "URL for the call to action button",
|
|
26
|
+
"type": "string",
|
|
27
|
+
"format": "uri",
|
|
28
|
+
"default": "#"
|
|
29
|
+
},
|
|
30
|
+
"newTab": {
|
|
31
|
+
"title": "Open in New Tab",
|
|
32
|
+
"description": "Whether the link should open in a new tab",
|
|
33
|
+
"type": "boolean",
|
|
34
|
+
"default": true
|
|
35
|
+
},
|
|
36
|
+
"ariaLabel": {
|
|
37
|
+
"title": "Aria Label",
|
|
38
|
+
"description": "Aria label for the link",
|
|
39
|
+
"type": "string",
|
|
40
|
+
"default": "Event Appointment"
|
|
41
|
+
},
|
|
42
|
+
"type": {
|
|
43
|
+
"const": "event-list-appointment"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"additionalProperties": false
|
|
47
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/event-list-appointment.schema.json",
|
|
4
|
+
"title": "Event List Appointment",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"date": {
|
|
8
|
+
"title": "Date",
|
|
9
|
+
"description": "Date of the appointment",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"format": "date"
|
|
12
|
+
},
|
|
13
|
+
"time": {
|
|
14
|
+
"title": "Time",
|
|
15
|
+
"description": "Time of the appointment",
|
|
16
|
+
"type": "string"
|
|
17
|
+
},
|
|
18
|
+
"label": {
|
|
19
|
+
"title": "CTA Label",
|
|
20
|
+
"description": "Label for the call to action button",
|
|
21
|
+
"type": "string"
|
|
22
|
+
},
|
|
23
|
+
"href": {
|
|
24
|
+
"title": "Href",
|
|
25
|
+
"description": "URL for the call to action button",
|
|
26
|
+
"type": "string",
|
|
27
|
+
"format": "uri",
|
|
28
|
+
"default": "#"
|
|
29
|
+
},
|
|
30
|
+
"newTab": {
|
|
31
|
+
"title": "Open in New Tab",
|
|
32
|
+
"description": "Whether the link should open in a new tab",
|
|
33
|
+
"type": "boolean",
|
|
34
|
+
"default": true
|
|
35
|
+
},
|
|
36
|
+
"ariaLabel": {
|
|
37
|
+
"title": "Aria Label",
|
|
38
|
+
"description": "Aria label for the link",
|
|
39
|
+
"type": "string",
|
|
40
|
+
"default": "Event Appointment"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"additionalProperties": false
|
|
44
|
+
}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
declare const EventListAppointment: FC<EventListAppointmentProps>;
|
|
9
|
-
export type { EventProps };
|
|
10
|
-
export { EventListAppointmentProps, EventListAppointment };
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { EventListAppointmentProps } from "../../EventListAppointmentProps-da54c3b9.js";
|
|
3
|
+
declare const EventListAppointmentContextDefault: import("react").ForwardRefExoticComponent<EventListAppointmentProps & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
4
|
+
declare const EventListAppointmentContext: import("react").Context<import("react").ForwardRefExoticComponent<EventListAppointmentProps & import("react").RefAttributes<HTMLAnchorElement>>>;
|
|
5
|
+
declare const EventListAppointment: import("react").ForwardRefExoticComponent<EventListAppointmentProps & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
6
|
+
export type { EventListAppointmentProps };
|
|
7
|
+
export { EventListAppointmentContextDefault, EventListAppointmentContext, EventListAppointment };
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
import "./event.css";
|
|
2
|
-
import { jsxs,
|
|
3
|
-
import {
|
|
1
|
+
import "./event-list-appointment.css";
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, createContext, useContext } from 'react';
|
|
4
4
|
import { Icon } from '@kickstartds/base/lib/icon';
|
|
5
|
-
import { Button } from '../button/index.js';
|
|
6
|
-
import 'react';
|
|
7
|
-
import 'classnames';
|
|
8
|
-
import '@kickstartds/base/lib/button';
|
|
9
5
|
|
|
10
|
-
const
|
|
6
|
+
const EventListAppointmentContextDefault = forwardRef(({ date, time, label, href, newTab, ariaLabel }, ref) => (jsxs("a", { className: "dsa-event-list-appointment", target: newTab ? "_blank" : "_self", "aria-label": ariaLabel, href: href, ref: ref, children: [jsxs("span", { className: "dsa-event-list-appointment__infos", children: [date && (jsxs("span", { className: "dsa-event-list-appointment__info", children: [jsx(Icon, { className: "dsa-event-list-appointment__icon", "aria-label": "Date", icon: "date" }), date] })), time && (jsxs("span", { className: "dsa-event-list-appointment__info", children: [jsx(Icon, { className: "dsa-event-list-appointment__icon", "aria-label": "Time", icon: "time" }), time] }))] }), jsxs("span", { className: "dsa-event-list-appointment__label", children: [label, jsx(Icon, { icon: "chevron-right" })] })] })));
|
|
7
|
+
const EventListAppointmentContext = createContext(EventListAppointmentContextDefault);
|
|
8
|
+
const EventListAppointment = forwardRef((props, ref) => {
|
|
9
|
+
const Component = useContext(EventListAppointmentContext);
|
|
10
|
+
return jsx(Component, { ...props, ref: ref });
|
|
11
|
+
});
|
|
12
|
+
EventListAppointment.displayName = "EventListAppointment";
|
|
11
13
|
|
|
12
|
-
export { EventListAppointment };
|
|
14
|
+
export { EventListAppointment, EventListAppointmentContext, EventListAppointmentContextDefault };
|