@kickstartds/ds-agency-premium 1.6.71--canary.45.1776.0 → 1.6.71--canary.45.1783.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/EventFilterProps-b190eb86.d.ts +73 -0
- package/dist/EventListTeaserProps-cf4c7b20.d.ts +68 -0
- package/dist/components/event-filter/event-filter.schema.dereffed.json +4 -1
- package/dist/components/event-filter/event-filter.schema.json +2 -2
- package/dist/components/event-filter/index.d.ts +1 -73
- package/dist/components/event-filter/index.js +1 -1
- package/dist/components/event-list/event-list.schema.dereffed.json +248 -0
- package/dist/components/event-list/event-list.schema.json +18 -0
- package/dist/components/event-list/index.d.ts +19 -0
- package/dist/components/event-list/index.js +26 -0
- package/dist/components/event-list-teaser/event-list-teaser.css +88 -0
- package/dist/components/event-list-teaser/event-list-teaser.schema.dereffed.json +115 -0
- package/dist/components/event-list-teaser/event-list-teaser.schema.json +87 -0
- package/dist/components/event-list-teaser/index.d.ts +8 -0
- package/dist/components/event-list-teaser/index.js +19 -0
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +112 -2
- package/dist/components/split-weighted/index.js +4 -2
- package/dist/components/split-weighted/split-weighted.css +25 -13
- 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
|
@@ -0,0 +1,73 @@
|
|
|
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
|
+
* List of categories to filter appointments
|
|
8
|
+
*/
|
|
9
|
+
type Label = string[];
|
|
10
|
+
interface EventFilterProps {
|
|
11
|
+
datePicker?: {
|
|
12
|
+
/**
|
|
13
|
+
* Title for the date picker
|
|
14
|
+
*/
|
|
15
|
+
title?: string;
|
|
16
|
+
dateFromInput?: {
|
|
17
|
+
/**
|
|
18
|
+
* Label for the date-from input
|
|
19
|
+
*/
|
|
20
|
+
label?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Placeholder text for the date-from input
|
|
23
|
+
*/
|
|
24
|
+
placeholder?: string;
|
|
25
|
+
};
|
|
26
|
+
dateToInput?: {
|
|
27
|
+
/**
|
|
28
|
+
* Label for the date-to input
|
|
29
|
+
*/
|
|
30
|
+
label?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Placeholder text for the date-to input
|
|
33
|
+
*/
|
|
34
|
+
placeholder?: string;
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* Toggle to enable or disable the date picker
|
|
38
|
+
*/
|
|
39
|
+
toggle?: boolean;
|
|
40
|
+
};
|
|
41
|
+
categories?: {
|
|
42
|
+
/**
|
|
43
|
+
* Title for the categories filter
|
|
44
|
+
*/
|
|
45
|
+
title?: string;
|
|
46
|
+
categoryCheckboxes?: Label;
|
|
47
|
+
/**
|
|
48
|
+
* Toggle to enable or disable the category filter
|
|
49
|
+
*/
|
|
50
|
+
toggle?: boolean;
|
|
51
|
+
};
|
|
52
|
+
applyButton?: {
|
|
53
|
+
/**
|
|
54
|
+
* Label for the button
|
|
55
|
+
*/
|
|
56
|
+
label?: string;
|
|
57
|
+
/**
|
|
58
|
+
* Function to call on button click
|
|
59
|
+
*/
|
|
60
|
+
onClick?: string;
|
|
61
|
+
};
|
|
62
|
+
resetButton?: {
|
|
63
|
+
/**
|
|
64
|
+
* Label for the button
|
|
65
|
+
*/
|
|
66
|
+
label?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Function to call on button click
|
|
69
|
+
*/
|
|
70
|
+
onClick?: string;
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
export { Label, EventFilterProps };
|
|
@@ -0,0 +1,68 @@
|
|
|
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
|
+
* Title of the event
|
|
8
|
+
*/
|
|
9
|
+
type Headline = string;
|
|
10
|
+
/**
|
|
11
|
+
* Short teaser text for the event
|
|
12
|
+
*/
|
|
13
|
+
type TeaserText = string;
|
|
14
|
+
/**
|
|
15
|
+
* The date of the event
|
|
16
|
+
*/
|
|
17
|
+
type Date = string;
|
|
18
|
+
/**
|
|
19
|
+
* The time of the event
|
|
20
|
+
*/
|
|
21
|
+
type Time = string;
|
|
22
|
+
/**
|
|
23
|
+
* Location of the event
|
|
24
|
+
*/
|
|
25
|
+
type Location = string;
|
|
26
|
+
/**
|
|
27
|
+
* URL of the image to display
|
|
28
|
+
*/
|
|
29
|
+
type ImageSource = string;
|
|
30
|
+
/**
|
|
31
|
+
* Alt text of the image
|
|
32
|
+
*/
|
|
33
|
+
type AltText = string;
|
|
34
|
+
/**
|
|
35
|
+
* The event entry URL to link
|
|
36
|
+
*/
|
|
37
|
+
type URL = string;
|
|
38
|
+
/**
|
|
39
|
+
* Text for the call to action
|
|
40
|
+
*/
|
|
41
|
+
type CallToAction = string;
|
|
42
|
+
/**
|
|
43
|
+
* ARIA label for accessibility
|
|
44
|
+
*/
|
|
45
|
+
type ARIALabel = string;
|
|
46
|
+
/**
|
|
47
|
+
* Display an event teaser with date, title and location
|
|
48
|
+
*/
|
|
49
|
+
interface EventListTeaserProps {
|
|
50
|
+
title: Headline;
|
|
51
|
+
teaserText?: TeaserText;
|
|
52
|
+
date: Date;
|
|
53
|
+
time?: Time;
|
|
54
|
+
location: Location;
|
|
55
|
+
image?: Image;
|
|
56
|
+
url?: URL;
|
|
57
|
+
cta?: CallToAction;
|
|
58
|
+
ariaLabel?: ARIALabel;
|
|
59
|
+
className?: string;
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Image to display in the teaser
|
|
63
|
+
*/
|
|
64
|
+
interface Image {
|
|
65
|
+
src?: ImageSource;
|
|
66
|
+
alt?: AltText;
|
|
67
|
+
}
|
|
68
|
+
export { Headline, TeaserText, Date, Time, Location, ImageSource, AltText, URL, CallToAction, ARIALabel, EventListTeaserProps, Image };
|
|
@@ -51,7 +51,6 @@
|
|
|
51
51
|
},
|
|
52
52
|
"categories": {
|
|
53
53
|
"type": "object",
|
|
54
|
-
|
|
55
54
|
"properties": {
|
|
56
55
|
"title": {
|
|
57
56
|
"type": "string",
|
|
@@ -64,7 +63,8 @@
|
|
|
64
63
|
"description": "List of categories to filter appointments",
|
|
65
64
|
"items": {
|
|
66
65
|
"type": "string",
|
|
67
|
-
"description": "Category name"
|
|
66
|
+
"description": "Category name",
|
|
67
|
+
"examples": ["Category Filter"]
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
70
|
"toggle": {
|
|
@@ -1,77 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
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
|
-
* List of categories to filter appointments
|
|
10
|
-
*/
|
|
11
|
-
type Label = string[];
|
|
12
|
-
interface EventFilterProps {
|
|
13
|
-
datePicker?: {
|
|
14
|
-
/**
|
|
15
|
-
* Title for the date picker
|
|
16
|
-
*/
|
|
17
|
-
title?: string;
|
|
18
|
-
dateFromInput?: {
|
|
19
|
-
/**
|
|
20
|
-
* Label for the date-from input
|
|
21
|
-
*/
|
|
22
|
-
label?: string;
|
|
23
|
-
/**
|
|
24
|
-
* Placeholder text for the date-from input
|
|
25
|
-
*/
|
|
26
|
-
placeholder?: string;
|
|
27
|
-
};
|
|
28
|
-
dateToInput?: {
|
|
29
|
-
/**
|
|
30
|
-
* Label for the date-to input
|
|
31
|
-
*/
|
|
32
|
-
label?: string;
|
|
33
|
-
/**
|
|
34
|
-
* Placeholder text for the date-to input
|
|
35
|
-
*/
|
|
36
|
-
placeholder?: string;
|
|
37
|
-
};
|
|
38
|
-
/**
|
|
39
|
-
* Toggle to enable or disable the date picker
|
|
40
|
-
*/
|
|
41
|
-
toggle?: boolean;
|
|
42
|
-
};
|
|
43
|
-
categories?: {
|
|
44
|
-
/**
|
|
45
|
-
* Title for the categories filter
|
|
46
|
-
*/
|
|
47
|
-
title?: string;
|
|
48
|
-
categoryCheckboxes?: Label;
|
|
49
|
-
/**
|
|
50
|
-
* Toggle to enable or disable the category filter
|
|
51
|
-
*/
|
|
52
|
-
toggle?: boolean;
|
|
53
|
-
};
|
|
54
|
-
applyButton?: {
|
|
55
|
-
/**
|
|
56
|
-
* Label for the button
|
|
57
|
-
*/
|
|
58
|
-
label?: string;
|
|
59
|
-
/**
|
|
60
|
-
* Function to call on button click
|
|
61
|
-
*/
|
|
62
|
-
onClick?: string;
|
|
63
|
-
};
|
|
64
|
-
resetButton?: {
|
|
65
|
-
/**
|
|
66
|
-
* Label for the button
|
|
67
|
-
*/
|
|
68
|
-
label?: string;
|
|
69
|
-
/**
|
|
70
|
-
* Function to call on button click
|
|
71
|
-
*/
|
|
72
|
-
onClick?: string;
|
|
73
|
-
};
|
|
74
|
-
}
|
|
2
|
+
import { EventFilterProps } from "../../EventFilterProps-b190eb86.js";
|
|
75
3
|
declare const EventFilterContextDefault: import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
76
4
|
declare const EventFilterContext: import("react").Context<import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>>;
|
|
77
5
|
declare const EventFilter: import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -17,7 +17,7 @@ const EventFilterContextDefault = forwardRef(({ categories = {
|
|
|
17
17
|
label: "Filter Appointments",
|
|
18
18
|
}, resetButton = {
|
|
19
19
|
label: "Reset Filters",
|
|
20
|
-
}, }, ref) => (jsxs("div", { className: "dsa-event-filter", ref: ref, children: [datePicker?.toggle && (jsxs("div", { className: "dsa-event-filter__item", children: [jsx("span", { className: "dsa-event-filter__topic", children: datePicker.title || "Find Appointment" }), jsxs("div", { className: "dsa-event-filter__date-picker", children: [jsx(TextField, { label: datePicker.dateFromInput.label || "From", placeholder: datePicker.dateFromInput.placeholder || "Select a date" }), jsx(TextField, { label: datePicker.dateToInput.label || "To", placeholder: datePicker.dateToInput.placeholder || "Select a date" })] })] })), categories?.toggle && (jsxs("div", { className: "dsa-event-filter__item", children: [jsx("span", { className: "dsa-event-filter__topic", children: categories?.title || "Categories" }), jsx("div", { className: "dsa-event-filter__categories", children: categories &&
|
|
20
|
+
}, }, ref) => (jsxs("div", { className: "dsa-event-filter", ref: ref, children: [datePicker?.toggle && (jsxs("div", { className: "dsa-event-filter__item", children: [jsx("span", { className: "dsa-event-filter__topic", children: datePicker.title || "Find Appointment" }), jsxs("div", { className: "dsa-event-filter__date-picker", children: [jsx(TextField, { label: datePicker.dateFromInput.label || "From", placeholder: datePicker.dateFromInput.placeholder || "Select a date" }), jsx(TextField, { label: datePicker.dateToInput.label || "To", placeholder: datePicker.dateToInput.placeholder || "Select a date" })] })] })), categories && categories?.toggle && (jsxs("div", { className: "dsa-event-filter__item", children: [jsx("span", { className: "dsa-event-filter__topic", children: categories?.title || "Categories" }), jsx("div", { className: "dsa-event-filter__categories", children: categories &&
|
|
21
21
|
categories.categoryCheckboxes.length > 0 &&
|
|
22
22
|
categories.categoryCheckboxes.map((category, index) => (jsx(Checkbox, { label: category }, index))) })] })), jsxs("div", { className: "dsa-event-filter__buttons", children: [jsx(Button, { size: "small", label: applyButton?.label || "Filter Appointments", variant: "primary", onClick: () => {
|
|
23
23
|
// Handle button click
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/cms/event-list.schema.json",
|
|
4
|
+
"title": "Event List",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"filter": {
|
|
8
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
9
|
+
"$id": "http://schema.mydesignsystem.com/event-filter.schema.json",
|
|
10
|
+
"title": "Event Filter",
|
|
11
|
+
"type": "object",
|
|
12
|
+
"properties": {
|
|
13
|
+
"datePicker": {
|
|
14
|
+
"type": "object",
|
|
15
|
+
"properties": {
|
|
16
|
+
"title": {
|
|
17
|
+
"type": "string",
|
|
18
|
+
"description": "Title for the date picker",
|
|
19
|
+
"default": "Find Appointment"
|
|
20
|
+
},
|
|
21
|
+
"dateFromInput": {
|
|
22
|
+
"type": "object",
|
|
23
|
+
"properties": {
|
|
24
|
+
"label": {
|
|
25
|
+
"type": "string",
|
|
26
|
+
"description": "Label for the date-from input",
|
|
27
|
+
"default": "From"
|
|
28
|
+
},
|
|
29
|
+
"placeholder": {
|
|
30
|
+
"type": "string",
|
|
31
|
+
"description": "Placeholder text for the date-from input",
|
|
32
|
+
"default": "Select a date"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"additionalProperties": false
|
|
36
|
+
},
|
|
37
|
+
"dateToInput": {
|
|
38
|
+
"type": "object",
|
|
39
|
+
"properties": {
|
|
40
|
+
"label": {
|
|
41
|
+
"type": "string",
|
|
42
|
+
"description": "Label for the date-to input",
|
|
43
|
+
"default": "To"
|
|
44
|
+
},
|
|
45
|
+
"placeholder": {
|
|
46
|
+
"type": "string",
|
|
47
|
+
"description": "Placeholder text for the date-to input",
|
|
48
|
+
"default": "Select a date"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
"additionalProperties": false
|
|
52
|
+
},
|
|
53
|
+
"toggle": {
|
|
54
|
+
"type": "boolean",
|
|
55
|
+
"description": "Toggle to enable or disable the date picker",
|
|
56
|
+
"default": true
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"additionalProperties": false
|
|
60
|
+
},
|
|
61
|
+
"categories": {
|
|
62
|
+
"type": "object",
|
|
63
|
+
"properties": {
|
|
64
|
+
"title": {
|
|
65
|
+
"type": "string",
|
|
66
|
+
"description": "Title for the categories filter",
|
|
67
|
+
"default": "Categories"
|
|
68
|
+
},
|
|
69
|
+
"categoryCheckboxes": {
|
|
70
|
+
"type": "array",
|
|
71
|
+
"title": "Label",
|
|
72
|
+
"description": "List of categories to filter appointments",
|
|
73
|
+
"items": {
|
|
74
|
+
"type": "string",
|
|
75
|
+
"description": "Category name",
|
|
76
|
+
"examples": [
|
|
77
|
+
"Category Filter"
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
"toggle": {
|
|
82
|
+
"type": "boolean",
|
|
83
|
+
"description": "Toggle to enable or disable the category filter",
|
|
84
|
+
"default": true
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
"additionalProperties": false
|
|
88
|
+
},
|
|
89
|
+
"applyButton": {
|
|
90
|
+
"type": "object",
|
|
91
|
+
"properties": {
|
|
92
|
+
"label": {
|
|
93
|
+
"type": "string",
|
|
94
|
+
"description": "Label for the button",
|
|
95
|
+
"default": "Filter Appointments"
|
|
96
|
+
},
|
|
97
|
+
"onClick": {
|
|
98
|
+
"type": "string",
|
|
99
|
+
"description": "Function to call on button click"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
"additionalProperties": false
|
|
103
|
+
},
|
|
104
|
+
"resetButton": {
|
|
105
|
+
"type": "object",
|
|
106
|
+
"properties": {
|
|
107
|
+
"label": {
|
|
108
|
+
"type": "string",
|
|
109
|
+
"description": "Label for the button",
|
|
110
|
+
"default": "Reset Filters"
|
|
111
|
+
},
|
|
112
|
+
"onClick": {
|
|
113
|
+
"type": "string",
|
|
114
|
+
"description": "Function to call on button click"
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
"additionalProperties": false
|
|
118
|
+
},
|
|
119
|
+
"type": {
|
|
120
|
+
"const": "event-filter"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
"additionalProperties": false
|
|
124
|
+
},
|
|
125
|
+
"events": {
|
|
126
|
+
"type": "array",
|
|
127
|
+
"items": {
|
|
128
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
129
|
+
"$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json",
|
|
130
|
+
"title": "Event List Teaser",
|
|
131
|
+
"description": "Display an event teaser with date, title and location",
|
|
132
|
+
"type": "object",
|
|
133
|
+
"properties": {
|
|
134
|
+
"title": {
|
|
135
|
+
"title": "Headline",
|
|
136
|
+
"description": "Title of the event",
|
|
137
|
+
"type": "string",
|
|
138
|
+
"format": "markdown",
|
|
139
|
+
"examples": [
|
|
140
|
+
"This is a event teaser title"
|
|
141
|
+
]
|
|
142
|
+
},
|
|
143
|
+
"teaserText": {
|
|
144
|
+
"title": "Teaser Text",
|
|
145
|
+
"description": "Short teaser text for the event",
|
|
146
|
+
"type": "string",
|
|
147
|
+
"format": "markdown",
|
|
148
|
+
"examples": [
|
|
149
|
+
"This is a short teaser text for the event"
|
|
150
|
+
]
|
|
151
|
+
},
|
|
152
|
+
"date": {
|
|
153
|
+
"title": "Date",
|
|
154
|
+
"description": "The date of the event",
|
|
155
|
+
"type": "string",
|
|
156
|
+
"format": "date",
|
|
157
|
+
"examples": [
|
|
158
|
+
"12.30.2022"
|
|
159
|
+
]
|
|
160
|
+
},
|
|
161
|
+
"time": {
|
|
162
|
+
"title": "Time",
|
|
163
|
+
"description": "The time of the event",
|
|
164
|
+
"type": "string",
|
|
165
|
+
"examples": [
|
|
166
|
+
"10:00"
|
|
167
|
+
]
|
|
168
|
+
},
|
|
169
|
+
"location": {
|
|
170
|
+
"title": "Location",
|
|
171
|
+
"description": "Location of the event",
|
|
172
|
+
"type": "string",
|
|
173
|
+
"format": "markdown",
|
|
174
|
+
"examples": [
|
|
175
|
+
"This is a location"
|
|
176
|
+
]
|
|
177
|
+
},
|
|
178
|
+
"image": {
|
|
179
|
+
"title": "Image",
|
|
180
|
+
"description": "Image to display in the teaser",
|
|
181
|
+
"type": "object",
|
|
182
|
+
"properties": {
|
|
183
|
+
"src": {
|
|
184
|
+
"type": "string",
|
|
185
|
+
"format": "image",
|
|
186
|
+
"title": "Image Source",
|
|
187
|
+
"description": "URL of the image to display",
|
|
188
|
+
"examples": [
|
|
189
|
+
"https://picsum.photos/seed/flower/800/600"
|
|
190
|
+
]
|
|
191
|
+
},
|
|
192
|
+
"alt": {
|
|
193
|
+
"type": "string",
|
|
194
|
+
"title": "Alt Text",
|
|
195
|
+
"description": "Alt text of the image",
|
|
196
|
+
"examples": [
|
|
197
|
+
"This is an image of a flower"
|
|
198
|
+
]
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
"additionalProperties": false
|
|
202
|
+
},
|
|
203
|
+
"url": {
|
|
204
|
+
"title": "URL",
|
|
205
|
+
"description": "The event entry URL to link",
|
|
206
|
+
"type": "string",
|
|
207
|
+
"format": "uri",
|
|
208
|
+
"examples": [
|
|
209
|
+
"https://example.com"
|
|
210
|
+
]
|
|
211
|
+
},
|
|
212
|
+
"cta": {
|
|
213
|
+
"title": "Call to Action",
|
|
214
|
+
"description": "Text for the call to action",
|
|
215
|
+
"type": "string",
|
|
216
|
+
"examples": [
|
|
217
|
+
"Show event"
|
|
218
|
+
]
|
|
219
|
+
},
|
|
220
|
+
"ariaLabel": {
|
|
221
|
+
"title": "ARIA Label",
|
|
222
|
+
"description": "ARIA label for accessibility",
|
|
223
|
+
"type": "string",
|
|
224
|
+
"examples": [
|
|
225
|
+
"Event teaser for "
|
|
226
|
+
]
|
|
227
|
+
},
|
|
228
|
+
"className": {
|
|
229
|
+
"type": "string"
|
|
230
|
+
},
|
|
231
|
+
"type": {
|
|
232
|
+
"const": "event-list-teaser"
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
"additionalProperties": false,
|
|
236
|
+
"required": [
|
|
237
|
+
"title",
|
|
238
|
+
"date",
|
|
239
|
+
"location"
|
|
240
|
+
]
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
"type": {
|
|
244
|
+
"const": "event-list"
|
|
245
|
+
}
|
|
246
|
+
},
|
|
247
|
+
"additionalProperties": false
|
|
248
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/cms/event-list.schema.json",
|
|
4
|
+
"title": "Event List",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"filter": {
|
|
8
|
+
"$ref": "http://schema.mydesignsystem.com/event-filter.schema.json"
|
|
9
|
+
},
|
|
10
|
+
"events": {
|
|
11
|
+
"type": "array",
|
|
12
|
+
"items": {
|
|
13
|
+
"$ref": "http://schema.mydesignsystem.com/event-list-teaser.schema.json"
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"additionalProperties": false
|
|
18
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { FC, PropsWithChildren } from "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
|
+
import { EventFilterProps } from "../../EventFilterProps-b190eb86.js";
|
|
9
|
+
import { EventListTeaserProps } from "../../EventListTeaserProps-cf4c7b20.js";
|
|
10
|
+
interface EventListProps {
|
|
11
|
+
/**
|
|
12
|
+
* Referenced component EventFilterProps
|
|
13
|
+
*/
|
|
14
|
+
filter?: EventFilterProps;
|
|
15
|
+
events?: EventListTeaserProps[];
|
|
16
|
+
}
|
|
17
|
+
declare const EventList: FC<PropsWithChildren<EventListProps>>;
|
|
18
|
+
export type { EventListProps };
|
|
19
|
+
export { EventList };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { Section } from '../section/index.js';
|
|
3
|
+
import { SplitWeighted } from '../split-weighted/index.js';
|
|
4
|
+
import { EventFilter } from '../event-filter/index.js';
|
|
5
|
+
import { EventListTeaser } from '../event-list-teaser/index.js';
|
|
6
|
+
import 'react';
|
|
7
|
+
import 'classnames';
|
|
8
|
+
import '@kickstartds/core/lib/react';
|
|
9
|
+
import '@kickstartds/base/lib/section';
|
|
10
|
+
import '../section/js/Section.client.js';
|
|
11
|
+
import '@kickstartds/core/lib/component';
|
|
12
|
+
import '@kickstartds/form/lib/text-field';
|
|
13
|
+
import '@kickstartds/form/lib/checkbox';
|
|
14
|
+
import '../button/index.js';
|
|
15
|
+
import '@kickstartds/base/lib/button';
|
|
16
|
+
import '@kickstartds/base/lib/icon';
|
|
17
|
+
import '@kickstartds/core/lib/container';
|
|
18
|
+
import '@kickstartds/base/lib/picture';
|
|
19
|
+
|
|
20
|
+
const EventList = ({ filter, events, }) => (jsx(Fragment, { children: jsx(Section, { width: "wide", children: jsx(SplitWeighted, { verticalAlign: "sticky", order: {
|
|
21
|
+
desktop: "asideFirst",
|
|
22
|
+
mobile: "asideFirst",
|
|
23
|
+
}, aside: jsx(EventFilter, { ...filter }), main: jsx(Fragment, { children: events.map((event, index) => (jsx(EventListTeaser, { ...event }, index))) }) }) }) }));
|
|
24
|
+
EventList.displayName = "EventList";
|
|
25
|
+
|
|
26
|
+
export { EventList };
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
.l-container--event-list-teaser {
|
|
2
|
+
/* stylelint-disable-next-line property-no-unknown */
|
|
3
|
+
container-name: event-list-teaser;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.dsa-event-list-teaser {
|
|
7
|
+
--g-link--border-radius: var(--ks-border-radius-card);
|
|
8
|
+
display: flex;
|
|
9
|
+
gap: var(--ks-spacing-inline-s);
|
|
10
|
+
padding: var(--ks-spacing-inset-s);
|
|
11
|
+
border: var(--ks-border-width-default) solid var(--ks-border-color-card-interactive);
|
|
12
|
+
}
|
|
13
|
+
.dsa-event-list-teaser:hover {
|
|
14
|
+
border-color: var(--ks-border-color-card-interactive-hover);
|
|
15
|
+
}
|
|
16
|
+
.dsa-event-list-teaser__content {
|
|
17
|
+
display: flex;
|
|
18
|
+
gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
|
|
19
|
+
flex-grow: 1;
|
|
20
|
+
flex-wrap: wrap;
|
|
21
|
+
min-width: 0;
|
|
22
|
+
}
|
|
23
|
+
.dsa-event-list-teaser__text {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
gap: var(--ks-spacing-stack-m);
|
|
28
|
+
flex-basis: var(--dsa-tile--width_large);
|
|
29
|
+
flex-grow: 1000;
|
|
30
|
+
}
|
|
31
|
+
.dsa-event-list-teaser__image {
|
|
32
|
+
flex-shrink: 1;
|
|
33
|
+
flex-grow: 0;
|
|
34
|
+
flex-basis: var(--dsa-tile--width_medium);
|
|
35
|
+
}
|
|
36
|
+
.dsa-event-list-teaser__image img {
|
|
37
|
+
object-fit: cover;
|
|
38
|
+
border-radius: var(--ks-border-radius-card);
|
|
39
|
+
width: 100%;
|
|
40
|
+
height: 100%;
|
|
41
|
+
}
|
|
42
|
+
.dsa-event-list-teaser__teaser-text {
|
|
43
|
+
font: var(--ks-font-copy-m);
|
|
44
|
+
color: var(--ks-text-color-interface);
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
.dsa-event-list-teaser__title {
|
|
48
|
+
font: var(--ks-font-display-m);
|
|
49
|
+
font-weight: var(--ks-font-weight-semi-bold);
|
|
50
|
+
color: var(--ks-text-color-display);
|
|
51
|
+
}
|
|
52
|
+
.dsa-event-list-teaser__infos {
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-wrap: wrap;
|
|
55
|
+
gap: var(--ks-spacing-xxs) var(--ks-spacing-inline-s);
|
|
56
|
+
align-items: flex-start;
|
|
57
|
+
}
|
|
58
|
+
.dsa-event-list-teaser__info {
|
|
59
|
+
display: flex;
|
|
60
|
+
gap: calc(var(--ks-spacing-xxs) * 0.75);
|
|
61
|
+
font: var(--ks-font-interface-s);
|
|
62
|
+
align-items: center;
|
|
63
|
+
color: var(--ks-text-color-interface);
|
|
64
|
+
}
|
|
65
|
+
.dsa-event-list-teaser__info .icon {
|
|
66
|
+
align-self: flex-start;
|
|
67
|
+
width: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
|
|
68
|
+
height: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
|
|
69
|
+
color: var(--ks-text-color-primary);
|
|
70
|
+
flex-shrink: 0;
|
|
71
|
+
flex-grow: 1;
|
|
72
|
+
}
|
|
73
|
+
.dsa-event-list-teaser__cta {
|
|
74
|
+
font: var(--ks-font-interface-s);
|
|
75
|
+
font-weight: var(--ks-font-weight-semi-bold);
|
|
76
|
+
color: var(--ks-text-color-primary);
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
text-wrap: nowrap;
|
|
80
|
+
width: fit-content;
|
|
81
|
+
}
|
|
82
|
+
.dsa-event-list-teaser__cta .icon {
|
|
83
|
+
width: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
|
|
84
|
+
height: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
|
|
85
|
+
color: var(--ks-text-color-primary);
|
|
86
|
+
flex-shrink: 0;
|
|
87
|
+
flex-grow: 1;
|
|
88
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json",
|
|
4
|
+
"title": "Event List Teaser",
|
|
5
|
+
"description": "Display an event teaser with date, title and location",
|
|
6
|
+
"type": "object",
|
|
7
|
+
"properties": {
|
|
8
|
+
"title": {
|
|
9
|
+
"title": "Headline",
|
|
10
|
+
"description": "Title of the event",
|
|
11
|
+
"type": "string",
|
|
12
|
+
"format": "markdown",
|
|
13
|
+
"examples": [
|
|
14
|
+
"This is a event teaser title"
|
|
15
|
+
]
|
|
16
|
+
},
|
|
17
|
+
"teaserText": {
|
|
18
|
+
"title": "Teaser Text",
|
|
19
|
+
"description": "Short teaser text for the event",
|
|
20
|
+
"type": "string",
|
|
21
|
+
"format": "markdown",
|
|
22
|
+
"examples": [
|
|
23
|
+
"This is a short teaser text for the event"
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
"date": {
|
|
27
|
+
"title": "Date",
|
|
28
|
+
"description": "The date of the event",
|
|
29
|
+
"type": "string",
|
|
30
|
+
"format": "date",
|
|
31
|
+
"examples": [
|
|
32
|
+
"12.30.2022"
|
|
33
|
+
]
|
|
34
|
+
},
|
|
35
|
+
"time": {
|
|
36
|
+
"title": "Time",
|
|
37
|
+
"description": "The time of the event",
|
|
38
|
+
"type": "string",
|
|
39
|
+
"examples": [
|
|
40
|
+
"10:00"
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
"location": {
|
|
44
|
+
"title": "Location",
|
|
45
|
+
"description": "Location of the event",
|
|
46
|
+
"type": "string",
|
|
47
|
+
"format": "markdown",
|
|
48
|
+
"examples": [
|
|
49
|
+
"This is a location"
|
|
50
|
+
]
|
|
51
|
+
},
|
|
52
|
+
"image": {
|
|
53
|
+
"title": "Image",
|
|
54
|
+
"description": "Image to display in the teaser",
|
|
55
|
+
"type": "object",
|
|
56
|
+
"properties": {
|
|
57
|
+
"src": {
|
|
58
|
+
"type": "string",
|
|
59
|
+
"format": "image",
|
|
60
|
+
"title": "Image Source",
|
|
61
|
+
"description": "URL of the image to display",
|
|
62
|
+
"examples": [
|
|
63
|
+
"https://picsum.photos/seed/flower/800/600"
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
"alt": {
|
|
67
|
+
"type": "string",
|
|
68
|
+
"title": "Alt Text",
|
|
69
|
+
"description": "Alt text of the image",
|
|
70
|
+
"examples": [
|
|
71
|
+
"This is an image of a flower"
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
"additionalProperties": false
|
|
76
|
+
},
|
|
77
|
+
"url": {
|
|
78
|
+
"title": "URL",
|
|
79
|
+
"description": "The event entry URL to link",
|
|
80
|
+
"type": "string",
|
|
81
|
+
"format": "uri",
|
|
82
|
+
"examples": [
|
|
83
|
+
"https://example.com"
|
|
84
|
+
]
|
|
85
|
+
},
|
|
86
|
+
"cta": {
|
|
87
|
+
"title": "Call to Action",
|
|
88
|
+
"description": "Text for the call to action",
|
|
89
|
+
"type": "string",
|
|
90
|
+
"examples": [
|
|
91
|
+
"Show event"
|
|
92
|
+
]
|
|
93
|
+
},
|
|
94
|
+
"ariaLabel": {
|
|
95
|
+
"title": "ARIA Label",
|
|
96
|
+
"description": "ARIA label for accessibility",
|
|
97
|
+
"type": "string",
|
|
98
|
+
"examples": [
|
|
99
|
+
"Event teaser for "
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
"className": {
|
|
103
|
+
"type": "string"
|
|
104
|
+
},
|
|
105
|
+
"type": {
|
|
106
|
+
"const": "event-list-teaser"
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
"additionalProperties": false,
|
|
110
|
+
"required": [
|
|
111
|
+
"title",
|
|
112
|
+
"date",
|
|
113
|
+
"location"
|
|
114
|
+
]
|
|
115
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/event-list-teaser.schema.json",
|
|
4
|
+
"title": "Event List Teaser",
|
|
5
|
+
"description": "Display an event teaser with date, title and location",
|
|
6
|
+
"type": "object",
|
|
7
|
+
"properties": {
|
|
8
|
+
"title": {
|
|
9
|
+
"title": "Headline",
|
|
10
|
+
"description": "Title of the event",
|
|
11
|
+
"type": "string",
|
|
12
|
+
"format": "markdown",
|
|
13
|
+
"examples": ["This is a event teaser title"]
|
|
14
|
+
},
|
|
15
|
+
"teaserText": {
|
|
16
|
+
"title": "Teaser Text",
|
|
17
|
+
"description": "Short teaser text for the event",
|
|
18
|
+
"type": "string",
|
|
19
|
+
"format": "markdown",
|
|
20
|
+
"examples": ["This is a short teaser text for the event"]
|
|
21
|
+
},
|
|
22
|
+
"date": {
|
|
23
|
+
"title": "Date",
|
|
24
|
+
"description": "The date of the event",
|
|
25
|
+
"type": "string",
|
|
26
|
+
"format": "date",
|
|
27
|
+
"examples": ["12.30.2022"]
|
|
28
|
+
},
|
|
29
|
+
"time": {
|
|
30
|
+
"title": "Time",
|
|
31
|
+
"description": "The time of the event",
|
|
32
|
+
"type": "string",
|
|
33
|
+
"examples": ["10:00"]
|
|
34
|
+
},
|
|
35
|
+
"location": {
|
|
36
|
+
"title": "Location",
|
|
37
|
+
"description": "Location of the event",
|
|
38
|
+
"type": "string",
|
|
39
|
+
"format": "markdown",
|
|
40
|
+
"examples": ["This is a location"]
|
|
41
|
+
},
|
|
42
|
+
"image": {
|
|
43
|
+
"title": "Image",
|
|
44
|
+
"description": "Image to display in the teaser",
|
|
45
|
+
"type": "object",
|
|
46
|
+
"properties": {
|
|
47
|
+
"src": {
|
|
48
|
+
"type": "string",
|
|
49
|
+
"format": "image",
|
|
50
|
+
"title": "Image Source",
|
|
51
|
+
"description": "URL of the image to display",
|
|
52
|
+
"examples": ["https://picsum.photos/seed/flower/800/600"]
|
|
53
|
+
},
|
|
54
|
+
"alt": {
|
|
55
|
+
"type": "string",
|
|
56
|
+
"title": "Alt Text",
|
|
57
|
+
"description": "Alt text of the image",
|
|
58
|
+
"examples": ["This is an image of a flower"]
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"url": {
|
|
63
|
+
"title": "URL",
|
|
64
|
+
"description": "The event entry URL to link",
|
|
65
|
+
"type": "string",
|
|
66
|
+
"format": "uri",
|
|
67
|
+
"examples": ["https://example.com"]
|
|
68
|
+
},
|
|
69
|
+
"cta": {
|
|
70
|
+
"title": "Call to Action",
|
|
71
|
+
"description": "Text for the call to action",
|
|
72
|
+
"type": "string",
|
|
73
|
+
"examples": ["Show event"]
|
|
74
|
+
},
|
|
75
|
+
"ariaLabel": {
|
|
76
|
+
"title": "ARIA Label",
|
|
77
|
+
"description": "ARIA label for accessibility",
|
|
78
|
+
"type": "string",
|
|
79
|
+
"examples": ["Event teaser for "]
|
|
80
|
+
},
|
|
81
|
+
"className": {
|
|
82
|
+
"type": "string"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
"additionalProperties": false,
|
|
86
|
+
"required": ["title", "date", "location"]
|
|
87
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HTMLAttributes } from "react";
|
|
3
|
+
import { EventListTeaserProps } from "../../EventListTeaserProps-cf4c7b20.js";
|
|
4
|
+
declare const EventListTeaserContextDefault: import("react").ForwardRefExoticComponent<EventListTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
5
|
+
declare const EventListTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<EventListTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>>;
|
|
6
|
+
declare const EventListTeaser: import("react").ForwardRefExoticComponent<EventListTeaserProps & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
7
|
+
export type { EventListTeaserProps };
|
|
8
|
+
export { EventListTeaserContextDefault, EventListTeaserContext, EventListTeaser };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import "./event-list-teaser.css";
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
import classnames from 'classnames';
|
|
4
|
+
import { forwardRef, createContext, useContext } from 'react';
|
|
5
|
+
import { Icon } from '@kickstartds/base/lib/icon';
|
|
6
|
+
import { Container } from '@kickstartds/core/lib/container';
|
|
7
|
+
import { Picture } from '@kickstartds/base/lib/picture';
|
|
8
|
+
|
|
9
|
+
const EventListTeaserContextDefault = forwardRef(({ title, teaserText, date, time, location, image, cta, url, ariaLabel, className, ...rest }, ref) => {
|
|
10
|
+
return (jsx(Container, { name: "event-list-teaser", children: jsx("a", { className: classnames(className, "dsa-event-list-teaser"), ...rest, href: url, ref: ref, "aria-label": ariaLabel, children: jsxs("span", { className: "dsa-event-list-teaser__content", children: [jsxs("span", { className: "dsa-event-list-teaser__text", children: [jsx("span", { className: "dsa-event-list-teaser__title", children: title }), jsx("p", { className: "dsa-event-list-teaser__teaser-text", children: teaserText }), jsxs("span", { className: "dsa-event-list-teaser__infos", children: [jsxs("span", { className: "dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "date" }), date] }), jsxs("span", { className: "dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "time" }), time] }), jsxs("span", { className: "dsa-event-list-teaser__info", children: [jsx(Icon, { "aria-hidden": true, icon: "map-pin" }), location] })] }), jsxs("span", { className: "dsa-event-list-teaser__cta", children: [jsx("span", { children: cta }), jsx(Icon, { "aria-hidden": true, icon: "chevron-right" })] })] }), image && image.src && (jsx("div", { className: "dsa-event-list-teaser__image", children: jsx(Picture, { src: image?.src, alt: image?.alt }) }))] }) }) }));
|
|
11
|
+
});
|
|
12
|
+
const EventListTeaserContext = createContext(EventListTeaserContextDefault);
|
|
13
|
+
const EventListTeaser = forwardRef((props, ref) => {
|
|
14
|
+
const Component = useContext(EventListTeaserContext);
|
|
15
|
+
return jsx(Component, { ...props, ref: ref });
|
|
16
|
+
});
|
|
17
|
+
EventListTeaser.displayName = "EventListTeaser";
|
|
18
|
+
|
|
19
|
+
export { EventListTeaser, EventListTeaserContext, EventListTeaserContextDefault };
|
|
@@ -935,6 +935,91 @@
|
|
|
935
935
|
},
|
|
936
936
|
"screenshot": "img/screenshots/page-archetypes-event-detail--event-detail.png"
|
|
937
937
|
},
|
|
938
|
+
{
|
|
939
|
+
"id": "page-archetypes-event-list--event-list",
|
|
940
|
+
"group": "Page Archetypes/Event List",
|
|
941
|
+
"name": "EventList",
|
|
942
|
+
"code": "<EventList\n events={[\n {\n ariaLabel: 'Event teaser for ',\n cta: 'Show event',\n date: '12.30.2022',\n image: {\n alt: 'This is an image of a flower',\n src: 'https://picsum.photos/seed/flower/800/600'\n },\n location: 'This is a location',\n teaserText: 'This is a short teaser text for the event',\n time: '10:00',\n title: 'This is a event teaser title',\n url: 'https://example.com'\n },\n {\n ariaLabel: 'Event teaser for ',\n cta: 'Show event',\n date: '12.30.2022',\n image: {\n alt: 'This is an image of a flower',\n src: 'https://picsum.photos/seed/flower/800/600'\n },\n location: 'This is a location',\n teaserText: 'This is a short teaser text for the event',\n time: '10:00',\n title: 'This is a event teaser title',\n url: 'https://example.com'\n },\n {\n ariaLabel: 'Event teaser for ',\n cta: 'Show event',\n date: '12.30.2022',\n image: {\n alt: 'This is an image of a flower',\n src: 'https://picsum.photos/seed/flower/800/600'\n },\n location: 'This is a location',\n teaserText: 'This is a short teaser text for the event',\n time: '10:00',\n title: 'This is a event teaser title',\n url: 'https://example.com'\n }\n ]}\n filter={{\n applyButton: {\n label: 'Filter Appointments'\n },\n categories: {\n categoryCheckboxes: [\n 'All',\n 'Buyers',\n 'Sellers',\n 'Renters',\n 'Landlords',\n 'Tenants'\n ],\n title: 'Categories',\n toggle: true\n },\n datePicker: {\n dateFromInput: {\n label: 'From',\n placeholder: 'Select a date'\n },\n dateToInput: {\n label: 'To',\n placeholder: 'Select a date'\n },\n title: 'Find Appointment',\n toggle: true\n },\n resetButton: {\n label: 'Reset Filters'\n }\n }}\n/>",
|
|
943
|
+
"args": {
|
|
944
|
+
"filter": {
|
|
945
|
+
"datePicker": {
|
|
946
|
+
"title": "Find Appointment",
|
|
947
|
+
"dateFromInput": {
|
|
948
|
+
"label": "From",
|
|
949
|
+
"placeholder": "Select a date"
|
|
950
|
+
},
|
|
951
|
+
"dateToInput": {
|
|
952
|
+
"label": "To",
|
|
953
|
+
"placeholder": "Select a date"
|
|
954
|
+
},
|
|
955
|
+
"toggle": true
|
|
956
|
+
},
|
|
957
|
+
"categories": {
|
|
958
|
+
"title": "Categories",
|
|
959
|
+
"categoryCheckboxes": [
|
|
960
|
+
"All",
|
|
961
|
+
"Buyers",
|
|
962
|
+
"Sellers",
|
|
963
|
+
"Renters",
|
|
964
|
+
"Landlords",
|
|
965
|
+
"Tenants"
|
|
966
|
+
],
|
|
967
|
+
"toggle": true
|
|
968
|
+
},
|
|
969
|
+
"applyButton": {
|
|
970
|
+
"label": "Filter Appointments"
|
|
971
|
+
},
|
|
972
|
+
"resetButton": {
|
|
973
|
+
"label": "Reset Filters"
|
|
974
|
+
}
|
|
975
|
+
},
|
|
976
|
+
"events": [
|
|
977
|
+
{
|
|
978
|
+
"title": "This is a event teaser title",
|
|
979
|
+
"teaserText": "This is a short teaser text for the event",
|
|
980
|
+
"date": "12.30.2022",
|
|
981
|
+
"time": "10:00",
|
|
982
|
+
"location": "This is a location",
|
|
983
|
+
"image": {
|
|
984
|
+
"src": "https://picsum.photos/seed/flower/800/600",
|
|
985
|
+
"alt": "This is an image of a flower"
|
|
986
|
+
},
|
|
987
|
+
"url": "https://example.com",
|
|
988
|
+
"cta": "Show event",
|
|
989
|
+
"ariaLabel": "Event teaser for "
|
|
990
|
+
},
|
|
991
|
+
{
|
|
992
|
+
"title": "This is a event teaser title",
|
|
993
|
+
"teaserText": "This is a short teaser text for the event",
|
|
994
|
+
"date": "12.30.2022",
|
|
995
|
+
"time": "10:00",
|
|
996
|
+
"location": "This is a location",
|
|
997
|
+
"image": {
|
|
998
|
+
"src": "https://picsum.photos/seed/flower/800/600",
|
|
999
|
+
"alt": "This is an image of a flower"
|
|
1000
|
+
},
|
|
1001
|
+
"url": "https://example.com",
|
|
1002
|
+
"cta": "Show event",
|
|
1003
|
+
"ariaLabel": "Event teaser for "
|
|
1004
|
+
},
|
|
1005
|
+
{
|
|
1006
|
+
"title": "This is a event teaser title",
|
|
1007
|
+
"teaserText": "This is a short teaser text for the event",
|
|
1008
|
+
"date": "12.30.2022",
|
|
1009
|
+
"time": "10:00",
|
|
1010
|
+
"location": "This is a location",
|
|
1011
|
+
"image": {
|
|
1012
|
+
"src": "https://picsum.photos/seed/flower/800/600",
|
|
1013
|
+
"alt": "This is an image of a flower"
|
|
1014
|
+
},
|
|
1015
|
+
"url": "https://example.com",
|
|
1016
|
+
"cta": "Show event",
|
|
1017
|
+
"ariaLabel": "Event teaser for "
|
|
1018
|
+
}
|
|
1019
|
+
]
|
|
1020
|
+
},
|
|
1021
|
+
"screenshot": "img/screenshots/page-archetypes-event-list--event-list.png"
|
|
1022
|
+
},
|
|
938
1023
|
{
|
|
939
1024
|
"id": "components-contact--wide-image",
|
|
940
1025
|
"group": "Components/Contact",
|
|
@@ -1596,7 +1681,6 @@
|
|
|
1596
1681
|
},
|
|
1597
1682
|
"categories": {
|
|
1598
1683
|
"title": "Categories",
|
|
1599
|
-
"toggle": true,
|
|
1600
1684
|
"categoryCheckboxes": [
|
|
1601
1685
|
"All",
|
|
1602
1686
|
"Buyers",
|
|
@@ -1604,7 +1688,8 @@
|
|
|
1604
1688
|
"Renters",
|
|
1605
1689
|
"Landlords",
|
|
1606
1690
|
"Tenants"
|
|
1607
|
-
]
|
|
1691
|
+
],
|
|
1692
|
+
"toggle": true
|
|
1608
1693
|
},
|
|
1609
1694
|
"applyButton": {
|
|
1610
1695
|
"label": "Filter Appointments"
|
|
@@ -1716,6 +1801,31 @@
|
|
|
1716
1801
|
},
|
|
1717
1802
|
"screenshot": "img/screenshots/event-event-latest--default.png"
|
|
1718
1803
|
},
|
|
1804
|
+
{
|
|
1805
|
+
"id": "event-event-list-teaser--default",
|
|
1806
|
+
"group": "Event/ Event List Teaser",
|
|
1807
|
+
"name": "Default",
|
|
1808
|
+
"code": "<EventListTeaser\n ariaLabel=\"Event teaser for \"\n cta=\"Show event\"\n date=\"12/30/2025\"\n image={{\n alt: 'A futuristic AI concept image',\n src: 'https://picsum.photos/seed/flower/800/600'\n }}\n link={{\n text: 'Show event',\n url: '#'\n }}\n location=\"Berlin, Germany\"\n teaserText=\"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=\"https://example.com\"\n/>",
|
|
1809
|
+
"args": {
|
|
1810
|
+
"title": "The Future of AI",
|
|
1811
|
+
"teaserText": "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.",
|
|
1812
|
+
"date": "12/30/2025",
|
|
1813
|
+
"time": "10:00",
|
|
1814
|
+
"location": "Berlin, Germany",
|
|
1815
|
+
"image": {
|
|
1816
|
+
"src": "https://picsum.photos/seed/flower/800/600",
|
|
1817
|
+
"alt": "A futuristic AI concept image"
|
|
1818
|
+
},
|
|
1819
|
+
"url": "https://example.com",
|
|
1820
|
+
"cta": "Show event",
|
|
1821
|
+
"ariaLabel": "Event teaser for ",
|
|
1822
|
+
"link": {
|
|
1823
|
+
"url": "#",
|
|
1824
|
+
"text": "Show event"
|
|
1825
|
+
}
|
|
1826
|
+
},
|
|
1827
|
+
"screenshot": "img/screenshots/event-event-list-teaser--default.png"
|
|
1828
|
+
},
|
|
1719
1829
|
{
|
|
1720
1830
|
"id": "event-event-location--default",
|
|
1721
1831
|
"group": "Event/ Event Location",
|
|
@@ -5,8 +5,10 @@ import classnames from 'classnames';
|
|
|
5
5
|
const SplitWeighted = ({ order, mainLayout, asideLayout, horizontalGutter = "default", verticalGutter = "default", main, aside, verticalAlign = "top", }) => (jsxs("div", { className: classnames("l-split-weighted", order?.desktop === "asideFirst" &&
|
|
6
6
|
"l-split-weighted--desktop-aside-first", order?.mobile === "asideFirst" && "l-split-weighted--mobile-aside-first", horizontalGutter && `l-split-weighted--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-weighted--v-gutter-${verticalGutter}`, verticalAlign && `l-split-weighted--align-${verticalAlign}`), children: [jsx("div", { className: classnames("l-split-weighted__main l-split-weighted__content", mainLayout?.gutter &&
|
|
7
7
|
`l-split-weighted__main--gutter-${mainLayout.gutter}`, mainLayout?.minWidth &&
|
|
8
|
-
`l-split-weighted__main--width-${mainLayout.minWidth}`), children:
|
|
8
|
+
`l-split-weighted__main--width-${mainLayout.minWidth}`), children: jsx("div", { className: classnames("l-split-weighted__content-container", mainLayout?.gutter &&
|
|
9
|
+
`l-split-weighted__content-container--gutter-${mainLayout.gutter}`), children: main }) }), jsx("div", { className: classnames("l-split-weighted__aside l-split-weighted__content", asideLayout?.gutter &&
|
|
9
10
|
`l-split-weighted__aside--gutter-${asideLayout.gutter || "large"}`, asideLayout?.minWidth &&
|
|
10
|
-
`l-split-weighted__aside--width-${asideLayout.minWidth}`), children:
|
|
11
|
+
`l-split-weighted__aside--width-${asideLayout.minWidth}`), children: jsx("div", { className: classnames("l-split-weighted__content-container", mainLayout?.gutter &&
|
|
12
|
+
`l-split-weighted__content-container--gutter-${mainLayout.gutter}`), children: aside }) })] }));
|
|
11
13
|
|
|
12
14
|
export { SplitWeighted };
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
.l-split-weighted--align-sticky {
|
|
40
40
|
position: relative;
|
|
41
41
|
}
|
|
42
|
-
.l-split-weighted--align-sticky .l-split-
|
|
42
|
+
.l-split-weighted--align-sticky .l-split-weighted__content-container {
|
|
43
43
|
position: sticky;
|
|
44
44
|
top: var(--dsa-split-weighted--sticky-margin, var(--ks-spacing-stack-xl));
|
|
45
45
|
height: fit-content;
|
|
@@ -50,6 +50,12 @@
|
|
|
50
50
|
.l-split-weighted--mobile-aside-first {
|
|
51
51
|
flex-wrap: wrap-reverse;
|
|
52
52
|
}
|
|
53
|
+
.l-split-weighted--mobile-aside-first.l-split-weighted--align-top {
|
|
54
|
+
align-items: flex-end;
|
|
55
|
+
}
|
|
56
|
+
.l-split-weighted--mobile-aside-first.l-split-weighted--align-bottom {
|
|
57
|
+
align-items: flex-start;
|
|
58
|
+
}
|
|
53
59
|
.l-split-weighted--v-gutter-small {
|
|
54
60
|
--dsa-split-weighted--v-gutter: var(--dsa-split-weighted--v-gutter_small, var(--ks-spacing-stack-l));
|
|
55
61
|
}
|
|
@@ -72,6 +78,13 @@
|
|
|
72
78
|
display: flex;
|
|
73
79
|
flex-direction: column;
|
|
74
80
|
}
|
|
81
|
+
.l-split-weighted__content .l-split-weighted__content-container {
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-direction: column;
|
|
84
|
+
}
|
|
85
|
+
.l-split-weighted__content .l-split-weighted__content-container--gutter-none {
|
|
86
|
+
gap: 0;
|
|
87
|
+
}
|
|
75
88
|
.l-split-weighted__content .c-button {
|
|
76
89
|
width: fit-content;
|
|
77
90
|
}
|
|
@@ -79,7 +92,6 @@
|
|
|
79
92
|
flex-basis: var(--dsa-split-weighted__main--flex-basis_default, calc(var(--dsa-content--width_default) * 1));
|
|
80
93
|
flex-grow: 1000;
|
|
81
94
|
flex-shrink: 1;
|
|
82
|
-
gap: var(--dsa-split-weighted__main--gutter_default, var(--dsa-content--width_narrow));
|
|
83
95
|
}
|
|
84
96
|
.l-split-weighted__main--width-narrow {
|
|
85
97
|
flex-basis: var(--dsa-split-weighted__main--flex-basis_narrow, var(--dsa-tile--width_large));
|
|
@@ -87,15 +99,15 @@
|
|
|
87
99
|
.l-split-weighted__main--width-wide {
|
|
88
100
|
flex-basis: var(--dsa-split-weighted__main--flex-basis_wide, var(--dsa-content--width_default));
|
|
89
101
|
}
|
|
90
|
-
.l-split-weighted__main
|
|
102
|
+
.l-split-weighted__main .l-split-weighted__content-container {
|
|
103
|
+
gap: var(--dsa-split-weighted__main--gutter_default, var(--dsa-content--width_narrow));
|
|
104
|
+
}
|
|
105
|
+
.l-split-weighted__main .l-split-weighted__content-container--gutter-small {
|
|
91
106
|
gap: var(--dsa-split-weighted__main--gutter_small, var(--ks-spacing-stack-s));
|
|
92
107
|
}
|
|
93
|
-
.l-split-weighted__main--gutter-large {
|
|
108
|
+
.l-split-weighted__main .l-split-weighted__content-container--gutter-large {
|
|
94
109
|
gap: var(--dsa-split-weighted__main--gutter_large, var(--ks-spacing-stack-l));
|
|
95
110
|
}
|
|
96
|
-
.l-split-weighted__main--gutter-none {
|
|
97
|
-
gap: 0;
|
|
98
|
-
}
|
|
99
111
|
.l-split-weighted__aside {
|
|
100
112
|
flex-basis: var(--dsa-split-weighted__aside--flex-basis_default, var(--dsa-tile--width_medium));
|
|
101
113
|
flex-grow: 1;
|
|
@@ -107,12 +119,12 @@
|
|
|
107
119
|
.l-split-weighted__aside--width-wide {
|
|
108
120
|
flex-basis: var(--dsa-split-weighted__aside--flex-basis_wide, var(--dsa-tile--width_large));
|
|
109
121
|
}
|
|
110
|
-
.l-split-weighted__aside
|
|
111
|
-
gap: var(--dsa-split-
|
|
122
|
+
.l-split-weighted__aside .l-split-weighted__content-container {
|
|
123
|
+
gap: var(--dsa-split-weighted__main--gutter_default, var(--dsa-content--width_narrow));
|
|
112
124
|
}
|
|
113
|
-
.l-split-weighted__aside--gutter-
|
|
114
|
-
gap: var(--dsa-split-
|
|
125
|
+
.l-split-weighted__aside .l-split-weighted__content-container--gutter-small {
|
|
126
|
+
gap: var(--dsa-split-weighted__main--gutter_small, var(--ks-spacing-stack-s));
|
|
115
127
|
}
|
|
116
|
-
.l-split-weighted__aside--gutter-
|
|
117
|
-
gap:
|
|
128
|
+
.l-split-weighted__aside .l-split-weighted__content-container--gutter-large {
|
|
129
|
+
gap: var(--dsa-split-weighted__main--gutter_large, var(--ks-spacing-stack-l));
|
|
118
130
|
}
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Thu, 03 Jul 2025
|
|
3
|
+
* Generated on Thu, 03 Jul 2025 12:16:12 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, 03 Jul 2025
|
|
2730
|
+
* Generated on Thu, 03 Jul 2025 12:16:18 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, 03 Jul 2025
|
|
5461
|
+
* Generated on Thu, 03 Jul 2025 12:16:15 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, 03 Jul 2025
|
|
8462
|
+
* Generated on Thu, 03 Jul 2025 12:16:20 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