@kickstartds/ds-agency-premium 1.6.68--canary.45.1668.0 → 1.6.68--canary.45.1671.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/EventProps-feae5a7c.d.ts +88 -0
- package/dist/components/event/event.schema.dereffed.json +25 -34
- package/dist/components/event/event.schema.json +25 -30
- package/dist/components/event/index.d.ts +1 -92
- package/dist/components/event/index.js +6 -5
- package/dist/components/event-list-appointment/event.css +88 -0
- package/dist/components/event-list-appointment/index.d.ts +10 -0
- package/dist/components/event-list-appointment/index.js +12 -0
- package/dist/components/event-list-entry/index.d.ts +13 -0
- package/dist/components/event-list-entry/index.js +12 -0
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +24 -27
- 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/components/event/event.css +0 -47
|
@@ -0,0 +1,88 @@
|
|
|
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 EventTitle = string;
|
|
10
|
+
/**
|
|
11
|
+
* Label of the category
|
|
12
|
+
*/
|
|
13
|
+
type Label = string;
|
|
14
|
+
/**
|
|
15
|
+
* Categories to which the event belongs
|
|
16
|
+
*/
|
|
17
|
+
type Categories = {
|
|
18
|
+
label?: Label;
|
|
19
|
+
}[];
|
|
20
|
+
/**
|
|
21
|
+
* Short intro text for the event
|
|
22
|
+
*/
|
|
23
|
+
type Intro = string;
|
|
24
|
+
/**
|
|
25
|
+
* Date of the appointment
|
|
26
|
+
*/
|
|
27
|
+
type Date = string;
|
|
28
|
+
/**
|
|
29
|
+
* Time of the appointment
|
|
30
|
+
*/
|
|
31
|
+
type Time = string;
|
|
32
|
+
/**
|
|
33
|
+
* Label for the call to action button
|
|
34
|
+
*/
|
|
35
|
+
type CTALabel = string;
|
|
36
|
+
/**
|
|
37
|
+
* List of dates of the event
|
|
38
|
+
*/
|
|
39
|
+
type Dates = {
|
|
40
|
+
date?: Date;
|
|
41
|
+
time?: Time;
|
|
42
|
+
label?: CTALabel;
|
|
43
|
+
[k: string]: unknown;
|
|
44
|
+
}[];
|
|
45
|
+
/**
|
|
46
|
+
* Address of the appointment
|
|
47
|
+
*/
|
|
48
|
+
type Address = string;
|
|
49
|
+
/**
|
|
50
|
+
* Link to the location on a map
|
|
51
|
+
*/
|
|
52
|
+
type MapsLink = string;
|
|
53
|
+
/**
|
|
54
|
+
* List of attendable appointments
|
|
55
|
+
*/
|
|
56
|
+
type Appointments = {
|
|
57
|
+
dates?: Dates;
|
|
58
|
+
address: Address;
|
|
59
|
+
mapsLink?: MapsLink;
|
|
60
|
+
}[];
|
|
61
|
+
/**
|
|
62
|
+
* Description of the event
|
|
63
|
+
*/
|
|
64
|
+
type Description = string;
|
|
65
|
+
/**
|
|
66
|
+
* Image source to use
|
|
67
|
+
*/
|
|
68
|
+
type ImageSource = string;
|
|
69
|
+
/**
|
|
70
|
+
* Image description
|
|
71
|
+
*/
|
|
72
|
+
type AltText = string;
|
|
73
|
+
/**
|
|
74
|
+
* Images displayed below the text content
|
|
75
|
+
*/
|
|
76
|
+
type Images = {
|
|
77
|
+
src?: ImageSource;
|
|
78
|
+
alt?: AltText;
|
|
79
|
+
}[];
|
|
80
|
+
interface EventProps {
|
|
81
|
+
title?: EventTitle;
|
|
82
|
+
categories?: Categories;
|
|
83
|
+
intro?: Intro;
|
|
84
|
+
appointments?: Appointments;
|
|
85
|
+
description?: Description;
|
|
86
|
+
images?: Images;
|
|
87
|
+
}
|
|
88
|
+
export { EventTitle, Label, Categories, Intro, Date, Time, CTALabel, Dates, Address, MapsLink, Appointments, Description, ImageSource, AltText, Images, EventProps };
|
|
@@ -32,50 +32,41 @@
|
|
|
32
32
|
},
|
|
33
33
|
"appointments": {
|
|
34
34
|
"title": "Appointments",
|
|
35
|
-
"description": "List of appointments
|
|
35
|
+
"description": "List of attendable appointments",
|
|
36
36
|
"type": "array",
|
|
37
37
|
"items": {
|
|
38
38
|
"type": "object",
|
|
39
39
|
"properties": {
|
|
40
|
-
"
|
|
41
|
-
"title": "
|
|
42
|
-
"description": "
|
|
43
|
-
"type": "
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
40
|
+
"dates": {
|
|
41
|
+
"title": "Dates",
|
|
42
|
+
"description": "List of dates of the event",
|
|
43
|
+
"type": "array",
|
|
44
|
+
"items": {
|
|
45
|
+
"properties": {
|
|
46
|
+
"date": {
|
|
47
|
+
"title": "Date",
|
|
48
|
+
"description": "Date of the appointment",
|
|
49
|
+
"type": "string",
|
|
50
|
+
"format": "date"
|
|
51
|
+
},
|
|
52
|
+
"time": {
|
|
53
|
+
"title": "Time",
|
|
54
|
+
"description": "Time of the appointment",
|
|
55
|
+
"type": "string"
|
|
56
|
+
},
|
|
57
|
+
"label": {
|
|
58
|
+
"title": "CTA Label",
|
|
59
|
+
"description": "Label for the call to action button",
|
|
60
|
+
"type": "string"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
50
64
|
},
|
|
51
65
|
"address": {
|
|
52
66
|
"title": "Address",
|
|
53
67
|
"description": "Address of the appointment",
|
|
54
68
|
"type": "string"
|
|
55
69
|
},
|
|
56
|
-
"cta": {
|
|
57
|
-
"type": "object",
|
|
58
|
-
"title": "Call to Action",
|
|
59
|
-
"description": "Call to action for the appointment",
|
|
60
|
-
"properties": {
|
|
61
|
-
"label": {
|
|
62
|
-
"title": "CTA Label",
|
|
63
|
-
"description": "Label for the call to action button",
|
|
64
|
-
"type": "string"
|
|
65
|
-
},
|
|
66
|
-
"target": {
|
|
67
|
-
"title": "CTA Target",
|
|
68
|
-
"description": "URL or action for the call to action button",
|
|
69
|
-
"type": "string",
|
|
70
|
-
"format": "uri"
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
"required": [
|
|
74
|
-
"label",
|
|
75
|
-
"target"
|
|
76
|
-
],
|
|
77
|
-
"additionalProperties": false
|
|
78
|
-
},
|
|
79
70
|
"mapsLink": {
|
|
80
71
|
"title": "Maps Link",
|
|
81
72
|
"description": "Link to the location on a map",
|
|
@@ -31,46 +31,41 @@
|
|
|
31
31
|
},
|
|
32
32
|
"appointments": {
|
|
33
33
|
"title": "Appointments",
|
|
34
|
-
"description": "List of appointments
|
|
34
|
+
"description": "List of attendable appointments",
|
|
35
35
|
"type": "array",
|
|
36
36
|
"items": {
|
|
37
37
|
"type": "object",
|
|
38
38
|
"properties": {
|
|
39
|
-
"
|
|
40
|
-
"title": "
|
|
41
|
-
"description": "
|
|
42
|
-
"type": "
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
39
|
+
"dates": {
|
|
40
|
+
"title": "Dates",
|
|
41
|
+
"description": "List of dates of the event",
|
|
42
|
+
"type": "array",
|
|
43
|
+
"items": {
|
|
44
|
+
"properties": {
|
|
45
|
+
"date": {
|
|
46
|
+
"title": "Date",
|
|
47
|
+
"description": "Date of the appointment",
|
|
48
|
+
"type": "string",
|
|
49
|
+
"format": "date"
|
|
50
|
+
},
|
|
51
|
+
"time": {
|
|
52
|
+
"title": "Time",
|
|
53
|
+
"description": "Time of the appointment",
|
|
54
|
+
"type": "string"
|
|
55
|
+
},
|
|
56
|
+
"label": {
|
|
57
|
+
"title": "CTA Label",
|
|
58
|
+
"description": "Label for the call to action button",
|
|
59
|
+
"type": "string"
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
49
63
|
},
|
|
50
64
|
"address": {
|
|
51
65
|
"title": "Address",
|
|
52
66
|
"description": "Address of the appointment",
|
|
53
67
|
"type": "string"
|
|
54
68
|
},
|
|
55
|
-
"cta": {
|
|
56
|
-
"type": "object",
|
|
57
|
-
"title": "Call to Action",
|
|
58
|
-
"description": "Call to action for the appointment",
|
|
59
|
-
"properties": {
|
|
60
|
-
"label": {
|
|
61
|
-
"title": "CTA Label",
|
|
62
|
-
"description": "Label for the call to action button",
|
|
63
|
-
"type": "string"
|
|
64
|
-
},
|
|
65
|
-
"target": {
|
|
66
|
-
"title": "CTA Target",
|
|
67
|
-
"description": "URL or action for the call to action button",
|
|
68
|
-
"type": "string",
|
|
69
|
-
"format": "uri"
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
"required": ["label", "target"]
|
|
73
|
-
},
|
|
74
69
|
"mapsLink": {
|
|
75
70
|
"title": "Maps Link",
|
|
76
71
|
"description": "Link to the location on a map",
|
|
@@ -1,97 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* This file was automatically generated by json-schema-to-typescript.
|
|
6
|
-
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
7
|
-
* and run json-schema-to-typescript to regenerate this file.
|
|
8
|
-
*/
|
|
9
|
-
/**
|
|
10
|
-
* Title of the event
|
|
11
|
-
*/
|
|
12
|
-
type EventTitle = string;
|
|
13
|
-
/**
|
|
14
|
-
* Label of the category
|
|
15
|
-
*/
|
|
16
|
-
type Label = string;
|
|
17
|
-
/**
|
|
18
|
-
* Categories to which the event belongs
|
|
19
|
-
*/
|
|
20
|
-
type Categories = {
|
|
21
|
-
label?: Label;
|
|
22
|
-
}[];
|
|
23
|
-
/**
|
|
24
|
-
* Short intro text for the event
|
|
25
|
-
*/
|
|
26
|
-
type Intro = string;
|
|
27
|
-
/**
|
|
28
|
-
* Date of the appointment
|
|
29
|
-
*/
|
|
30
|
-
type Date = string;
|
|
31
|
-
/**
|
|
32
|
-
* Time of the appointment
|
|
33
|
-
*/
|
|
34
|
-
type Time = string;
|
|
35
|
-
/**
|
|
36
|
-
* Address of the appointment
|
|
37
|
-
*/
|
|
38
|
-
type Address = string;
|
|
39
|
-
/**
|
|
40
|
-
* Label for the call to action button
|
|
41
|
-
*/
|
|
42
|
-
type CTALabel = string;
|
|
43
|
-
/**
|
|
44
|
-
* URL or action for the call to action button
|
|
45
|
-
*/
|
|
46
|
-
type CTATarget = string;
|
|
47
|
-
/**
|
|
48
|
-
* Link to the location on a map
|
|
49
|
-
*/
|
|
50
|
-
type MapsLink = string;
|
|
51
|
-
/**
|
|
52
|
-
* List of appointments for the event
|
|
53
|
-
*/
|
|
54
|
-
type Appointments = {
|
|
55
|
-
date: Date;
|
|
56
|
-
time: Time;
|
|
57
|
-
address: Address;
|
|
58
|
-
cta?: CallToAction;
|
|
59
|
-
mapsLink?: MapsLink;
|
|
60
|
-
}[];
|
|
61
|
-
/**
|
|
62
|
-
* Description of the event
|
|
63
|
-
*/
|
|
64
|
-
type Description = string;
|
|
65
|
-
/**
|
|
66
|
-
* Image source to use
|
|
67
|
-
*/
|
|
68
|
-
type ImageSource = string;
|
|
69
|
-
/**
|
|
70
|
-
* Image description
|
|
71
|
-
*/
|
|
72
|
-
type AltText = string;
|
|
73
|
-
/**
|
|
74
|
-
* Images displayed below the text content
|
|
75
|
-
*/
|
|
76
|
-
type Images = {
|
|
77
|
-
src?: ImageSource;
|
|
78
|
-
alt?: AltText;
|
|
79
|
-
}[];
|
|
80
|
-
interface EventProps {
|
|
81
|
-
title?: EventTitle;
|
|
82
|
-
categories?: Categories;
|
|
83
|
-
intro?: Intro;
|
|
84
|
-
appointments?: Appointments;
|
|
85
|
-
description?: Description;
|
|
86
|
-
images?: Images;
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* Call to action for the appointment
|
|
90
|
-
*/
|
|
91
|
-
interface CallToAction {
|
|
92
|
-
label: CTALabel;
|
|
93
|
-
target: CTATarget;
|
|
94
|
-
}
|
|
3
|
+
import { EventProps } from "../../EventProps-feae5a7c.js";
|
|
95
4
|
declare const EventContextDefault: import("react").ForwardRefExoticComponent<EventProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
96
5
|
declare const EventContext: import("react").Context<import("react").ForwardRefExoticComponent<EventProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
97
6
|
declare const Event: import("react").ForwardRefExoticComponent<EventProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,19 +1,20 @@
|
|
|
1
|
-
import "./event.css";
|
|
2
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
2
|
import { forwardRef, createContext, useContext } from 'react';
|
|
3
|
+
import '../event-list-appointment/index.js';
|
|
4
4
|
import { Headline } from '../headline/index.js';
|
|
5
5
|
import { Text } from '../text/index.js';
|
|
6
6
|
import { RichText } from '@kickstartds/base/lib/rich-text';
|
|
7
7
|
import { TagLabel } from '@kickstartds/base/lib/tag-label';
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
8
|
+
import { EventListEntry } from '../event-list-entry/index.js';
|
|
9
|
+
import '@kickstartds/base/lib/icon';
|
|
10
|
+
import '../button/index.js';
|
|
10
11
|
import 'classnames';
|
|
12
|
+
import '@kickstartds/base/lib/button';
|
|
11
13
|
import 'markdown-to-jsx';
|
|
12
14
|
import '@kickstartds/base/lib/headline';
|
|
13
|
-
import '@kickstartds/base/lib/button';
|
|
14
15
|
|
|
15
16
|
const EventContextDefault = forwardRef(({ title, categories, intro, appointments, description }, ref) => {
|
|
16
|
-
return (jsxs("div", { className: "dsa-event", ref: ref, children: [jsxs("div", { className: "dsa-event__header", children: [categories && categories.length > 0 && (jsx("div", { className: "dsa-event__categories", children: categories.map((category, index) => (jsx(TagLabel, { className: "dsa-event__category", label: category?.label }, index))) })), jsx(Headline, { text: title, level: "h1" }), jsx(Text, { highlightText: true, text: intro })] }), appointments && appointments.length > 0 && (jsx("div", { className: "dsa-
|
|
17
|
+
return (jsxs("div", { className: "dsa-event", ref: ref, children: [jsxs("div", { className: "dsa-event__header", children: [categories && categories.length > 0 && (jsx("div", { className: "dsa-event__categories", children: categories.map((category, index) => (jsx(TagLabel, { className: "dsa-event__category", label: category?.label }, index))) })), jsx(Headline, { text: title, level: "h1" }), jsx(Text, { highlightText: true, text: intro })] }), appointments && appointments.length > 0 && (jsx("div", { className: "dsa-event__list", children: appointments.map((appointment, index) => (jsx(EventListEntry, { ...appointment }, index))) })), description && (jsx(RichText, { className: "dsa-event__description", text: description }))] }));
|
|
17
18
|
});
|
|
18
19
|
const EventContext = createContext(EventContextDefault);
|
|
19
20
|
const Event = forwardRef((props, ref) => {
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
.dsa-event {
|
|
2
|
+
max-width: var(--dsa-content--width_narrow);
|
|
3
|
+
margin: auto;
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
gap: var(--ks-spacing-stack-m);
|
|
7
|
+
}
|
|
8
|
+
.dsa-event__categories {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-wrap: wrap;
|
|
11
|
+
gap: 0.5em;
|
|
12
|
+
margin-bottom: var(--ks-spacing-stack-xs);
|
|
13
|
+
}
|
|
14
|
+
.dsa-event__list {
|
|
15
|
+
display: flex;
|
|
16
|
+
gap: var(--ks-spacing-stack-m);
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
padding: var(--ks-spacing-inset-m) 0;
|
|
19
|
+
}
|
|
20
|
+
.dsa-event .dsa-event-list-entry {
|
|
21
|
+
--dsa-event-list-entry__icon--size: calc(var(--ks-font-size-copy-m) * var(--ks-line-height-copy-m));
|
|
22
|
+
flex-wrap: wrap;
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: row;
|
|
25
|
+
justify-content: space-between;
|
|
26
|
+
gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
|
|
27
|
+
background-color: var(--ks-background-color-accent);
|
|
28
|
+
padding: var(--ks-spacing-inset-m);
|
|
29
|
+
border-radius: var(--ks-border-radius-surface);
|
|
30
|
+
}
|
|
31
|
+
.dsa-event .dsa-event-list-entry .l-container {
|
|
32
|
+
container-type: unset;
|
|
33
|
+
}
|
|
34
|
+
.dsa-event .dsa-event-list-entry__row {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: row;
|
|
37
|
+
gap: var(--ks-spacing-inline-m);
|
|
38
|
+
flex-wrap: wrap;
|
|
39
|
+
flex-shrink: 0;
|
|
40
|
+
flex-grow: 1;
|
|
41
|
+
flex-basis: 200px;
|
|
42
|
+
}
|
|
43
|
+
.dsa-event .dsa-event-list-entry__icon {
|
|
44
|
+
color: var(--ks-text-color-primary);
|
|
45
|
+
width: var(--dsa-event-list-entry__icon--size);
|
|
46
|
+
height: var(--dsa-event-list-entry__icon--size);
|
|
47
|
+
}
|
|
48
|
+
.dsa-event .dsa-event-list-entry__item {
|
|
49
|
+
display: flex;
|
|
50
|
+
gap: var(--ks-spacing-stack-xs);
|
|
51
|
+
}
|
|
52
|
+
.dsa-event .dsa-event-list-entry__appointments {
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
gap: var(--ks-spacing-stack-s);
|
|
56
|
+
flex-grow: 1;
|
|
57
|
+
}
|
|
58
|
+
.dsa-event .dsa-event-list-entry .dsa-event-list-appointment {
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: row;
|
|
61
|
+
flex-wrap: wrap;
|
|
62
|
+
justify-content: space-between;
|
|
63
|
+
gap: var(--ks-spacing-inline-m);
|
|
64
|
+
padding: var(--ks-spacing-inset-s);
|
|
65
|
+
border: var(--ks-border-width-default) solid var(--ks-border-color-default);
|
|
66
|
+
background-color: var(--ks-background-color-default);
|
|
67
|
+
border-radius: var(--ks-border-radius-control);
|
|
68
|
+
flex-grow: 0;
|
|
69
|
+
}
|
|
70
|
+
.dsa-event .dsa-event-list-entry .dsa-event-list-appointment__item {
|
|
71
|
+
display: flex;
|
|
72
|
+
gap: var(--ks-spacing-stack-xs);
|
|
73
|
+
}
|
|
74
|
+
.dsa-event .dsa-event-list-entry .dsa-event-list-appointment__dates {
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
display: flex;
|
|
77
|
+
gap: var(--ks-spacing-stack-xs);
|
|
78
|
+
}
|
|
79
|
+
.dsa-event .dsa-event-list-entry .dsa-event-list-appointment__icon {
|
|
80
|
+
color: var(--ks-text-color-primary);
|
|
81
|
+
width: var(--dsa-event-list-entry__icon--size);
|
|
82
|
+
height: var(--dsa-event-list-entry__icon--size);
|
|
83
|
+
}
|
|
84
|
+
.dsa-event .dsa-event-list-entry .dsa-event-list-appointment__cta.c-button {
|
|
85
|
+
background-color: transparent;
|
|
86
|
+
padding: 0;
|
|
87
|
+
color: var(--ks-text-color-primary);
|
|
88
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { EventProps } from "../../EventProps-feae5a7c.js";
|
|
3
|
+
interface EventListAppointmentProps {
|
|
4
|
+
date?: string;
|
|
5
|
+
time?: string;
|
|
6
|
+
label?: string;
|
|
7
|
+
}
|
|
8
|
+
declare const EventListAppointment: FC<EventListAppointmentProps>;
|
|
9
|
+
export type { EventProps };
|
|
10
|
+
export { EventListAppointmentProps, EventListAppointment };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import "./event.css";
|
|
2
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { RichText } from '@kickstartds/base/lib/rich-text';
|
|
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
|
+
|
|
10
|
+
const EventListAppointment = ({ date, time, label, }) => (jsxs(Fragment, { children: [jsxs("div", { className: "dsa-event-list-appointment__dates", children: [date && (jsxs("div", { className: "dsa-event-list-appointment__item dsa-event-list-appointment__date", children: [jsx(Icon, { className: "dsa-event-list-appointment__icon", icon: "date" }), jsx(RichText, { text: date })] })), time && (jsxs("div", { className: "dsa-event-list-appointment__item dsa-event-list-appointment__time", children: [jsx(Icon, { className: "dsa-event-list-appointment__icon", icon: "time" }), jsx(RichText, { text: time })] }))] }), jsx(Button, { className: "dsa-event-list-appointment__cta", label: label, icon: "chevron-right", variant: "primary", size: "small" })] }));
|
|
11
|
+
|
|
12
|
+
export { EventListAppointment };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { EventProps } from "../../EventProps-feae5a7c.js";
|
|
3
|
+
interface EventListEntryProps {
|
|
4
|
+
dates?: Array<{
|
|
5
|
+
date?: string;
|
|
6
|
+
time?: string;
|
|
7
|
+
label?: string;
|
|
8
|
+
}>;
|
|
9
|
+
address?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const EventListEntry: FC<EventListEntryProps>;
|
|
12
|
+
export type { EventProps };
|
|
13
|
+
export { EventListEntryProps, EventListEntry };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { EventListAppointment } from '../event-list-appointment/index.js';
|
|
3
|
+
import { RichText } from '@kickstartds/base/lib/rich-text';
|
|
4
|
+
import { Icon } from '@kickstartds/base/lib/icon';
|
|
5
|
+
import '../button/index.js';
|
|
6
|
+
import 'react';
|
|
7
|
+
import 'classnames';
|
|
8
|
+
import '@kickstartds/base/lib/button';
|
|
9
|
+
|
|
10
|
+
const EventListEntry = ({ address, dates }) => (jsx(Fragment, { children: jsxs("div", { className: "dsa-event-list-entry", children: [address && (jsx("div", { className: "dsa-event-list-entry__row", children: jsxs("address", { className: "dsa-event-list-entry__item dsa-event-list-entry__address", children: [jsx(Icon, { className: "dsa-event-list-entry__icon", icon: "map-pin" }), jsx(RichText, { text: address })] }) })), dates && dates.length > 0 && (jsx("div", { className: "dsa-event-list-entry__appointments", children: dates.map((item, index) => (jsx("button", { className: "dsa-event-list-appointment", children: jsx(EventListAppointment, { ...item }) }, index))) }))] }) }));
|
|
11
|
+
|
|
12
|
+
export { EventListEntry };
|
|
@@ -1391,7 +1391,7 @@
|
|
|
1391
1391
|
"id": "industry-event--default",
|
|
1392
1392
|
"group": "Industry/Event",
|
|
1393
1393
|
"name": "Default",
|
|
1394
|
-
"code": "<Event\n appointments={[\n {\n address: 'Berlin Congress Center<br />\\
|
|
1394
|
+
"code": "<Event\n appointments={[\n {\n address: 'Berlin Congress Center<br />\\n Alexanderplatz 1<br />\\n 10178 Berlin',\n dates: [\n {\n date: '2025-09-18',\n label: 'Register',\n time: '09:00 – 17:00'\n },\n {\n date: '2025-09-18',\n label: 'Register',\n time: '09:00 – 17:00'\n }\n ],\n mapsLink: 'https://maps.google.com/?q=Berlin+Congress+Center'\n },\n {\n address: 'Köln Messe<br />\\n Messeplatz 1<br />\\n 50679 Köln',\n dates: [\n {\n date: '2025-09-18',\n label: 'Register',\n time: '09:00 – 17:00'\n }\n ],\n mapsLink: 'https://maps.google.com/?q=Köln+Messe'\n }\n ]}\n categories={[\n {\n label: 'Conference'\n },\n {\n label: 'Design Systems'\n }\n ]}\n description=\"\nJoin us for a day of inspiring talks, hands-on workshops, and networking with design system experts from around the world.\n\n**Highlights:**\n- Keynotes from industry leaders\n- Practical sessions on design tokens, accessibility, and scaling systems\n- Evening networking event with food & drinks\n \"\n images={[\n {\n alt: 'Attendees at the Systemics Design Conference',\n src: '/img/events/design-conference.jpg'\n },\n {\n alt: 'Keynote speaker on stage',\n src: '/img/events/speaker.jpg'\n }\n ]}\n intro=\"A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.\"\n title=\"Systemics Design Conference 2025\"\n/>",
|
|
1395
1395
|
"args": {
|
|
1396
1396
|
"title": "Systemics Design Conference 2025",
|
|
1397
1397
|
"categories": [
|
|
@@ -1405,34 +1405,31 @@
|
|
|
1405
1405
|
"intro": "A full-day event for design system professionals and enthusiasts. Join us to learn, share, and connect with like-minded individuals.",
|
|
1406
1406
|
"appointments": [
|
|
1407
1407
|
{
|
|
1408
|
-
"
|
|
1409
|
-
"
|
|
1410
|
-
"
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
"label": "Register now",
|
|
1423
|
-
"target": "https://systemics.events/register"
|
|
1424
|
-
},
|
|
1425
|
-
"mapsLink": "https://maps.google.com/?q=Berlin+Congress+Center"
|
|
1408
|
+
"address": "Berlin Congress Center<br />\n Alexanderplatz 1<br />\n 10178 Berlin",
|
|
1409
|
+
"mapsLink": "https://maps.google.com/?q=Berlin+Congress+Center",
|
|
1410
|
+
"dates": [
|
|
1411
|
+
{
|
|
1412
|
+
"date": "2025-09-18",
|
|
1413
|
+
"time": "09:00 – 17:00",
|
|
1414
|
+
"label": "Register"
|
|
1415
|
+
},
|
|
1416
|
+
{
|
|
1417
|
+
"date": "2025-09-18",
|
|
1418
|
+
"time": "09:00 – 17:00",
|
|
1419
|
+
"label": "Register"
|
|
1420
|
+
}
|
|
1421
|
+
]
|
|
1426
1422
|
},
|
|
1427
1423
|
{
|
|
1428
|
-
"
|
|
1429
|
-
"
|
|
1430
|
-
"
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1424
|
+
"address": "Köln Messe<br />\n Messeplatz 1<br />\n 50679 Köln",
|
|
1425
|
+
"mapsLink": "https://maps.google.com/?q=Köln+Messe",
|
|
1426
|
+
"dates": [
|
|
1427
|
+
{
|
|
1428
|
+
"date": "2025-09-18",
|
|
1429
|
+
"time": "09:00 – 17:00",
|
|
1430
|
+
"label": "Register"
|
|
1431
|
+
}
|
|
1432
|
+
]
|
|
1436
1433
|
}
|
|
1437
1434
|
],
|
|
1438
1435
|
"description": "\nJoin us for a day of inspiring talks, hands-on workshops, and networking with design system experts from around the world.\n\n**Highlights:**\n- Keynotes from industry leaders\n- Practical sessions on design tokens, accessibility, and scaling systems\n- Evening networking event with food & drinks\n ",
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Mon, 23 Jun 2025 09:
|
|
3
|
+
* Generated on Mon, 23 Jun 2025 09:40:51 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 Mon, 23 Jun 2025 09:
|
|
2730
|
+
* Generated on Mon, 23 Jun 2025 09:40:56 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 Mon, 23 Jun 2025 09:
|
|
5461
|
+
* Generated on Mon, 23 Jun 2025 09:40:53 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 Mon, 23 Jun 2025 09:
|
|
8462
|
+
* Generated on Mon, 23 Jun 2025 09:40:58 GMT
|
|
8463
8463
|
*/
|
|
8464
8464
|
:root [ks-theme=telekom] {
|
|
8465
8465
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
package/dist/tokens/tokens.css
CHANGED
package/dist/tokens/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
.dsa-event {
|
|
2
|
-
max-width: var(--dsa-content--width_default);
|
|
3
|
-
margin: auto;
|
|
4
|
-
display: flex;
|
|
5
|
-
flex-direction: column;
|
|
6
|
-
gap: var(--ks-spacing-stack-m);
|
|
7
|
-
}
|
|
8
|
-
.dsa-event__categories {
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-wrap: wrap;
|
|
11
|
-
gap: 0.5em;
|
|
12
|
-
margin-bottom: var(--ks-spacing-stack-xs);
|
|
13
|
-
}
|
|
14
|
-
.dsa-event__appointments {
|
|
15
|
-
background-color: var(--ks-background-color-accent);
|
|
16
|
-
padding: var(--ks-spacing-inset-m);
|
|
17
|
-
border-radius: var(--ks-border-radius-surface);
|
|
18
|
-
display: flex;
|
|
19
|
-
gap: var(--ks-spacing-stack-m);
|
|
20
|
-
flex-direction: column;
|
|
21
|
-
}
|
|
22
|
-
.dsa-event .dsa-event-appointment {
|
|
23
|
-
--dsa-event-appointment__icon--size: calc(var(--ks-font-size-copy-m) * var(--ks-line-height-copy-m));
|
|
24
|
-
display: flex;
|
|
25
|
-
flex-wrap: wrap;
|
|
26
|
-
gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
|
|
27
|
-
}
|
|
28
|
-
.dsa-event .dsa-event-appointment .l-container {
|
|
29
|
-
container-type: unset;
|
|
30
|
-
}
|
|
31
|
-
.dsa-event .dsa-event-appointment__row {
|
|
32
|
-
display: flex;
|
|
33
|
-
flex-direction: column;
|
|
34
|
-
gap: var(--ks-spacing-stack-xs);
|
|
35
|
-
}
|
|
36
|
-
.dsa-event .dsa-event-appointment__item {
|
|
37
|
-
display: flex;
|
|
38
|
-
gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-xs);
|
|
39
|
-
}
|
|
40
|
-
.dsa-event .dsa-event-appointment__icon {
|
|
41
|
-
color: var(--ks-text-color-primary);
|
|
42
|
-
width: var(--dsa-event-appointment__icon--size);
|
|
43
|
-
height: var(--dsa-event-appointment__icon--size);
|
|
44
|
-
}
|
|
45
|
-
.dsa-event .dsa-event-appointment__cta {
|
|
46
|
-
align-self: flex-start;
|
|
47
|
-
}
|