@kickstartds/ds-agency-premium 1.6.71--canary.45.1774.0 → 1.6.71--canary.45.1780.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/components/blog-post/index.d.ts +1 -1
- package/dist/components/event-filter/event-filter.css +27 -0
- package/dist/components/event-filter/event-filter.schema.dereffed.json +118 -0
- package/dist/components/event-filter/event-filter.schema.json +107 -0
- package/dist/components/event-filter/index.d.ts +7 -0
- package/dist/components/event-filter/index.js +34 -0
- package/dist/components/event-list/event-list.schema.dereffed.json +130 -0
- package/dist/components/event-list/event-list.schema.json +12 -0
- package/dist/components/event-list/index.d.ts +17 -0
- package/dist/components/event-list/index.js +22 -0
- package/dist/components/index/index.d.ts +1 -1
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +80 -0
- package/dist/global.css +5 -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/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-c760fd2a.d.ts} +0 -0
|
@@ -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 };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BlogPostProps } from "../../BlogPostProps-
|
|
1
|
+
import { BlogPostProps } from "../../BlogPostProps-c760fd2a.js";
|
|
2
2
|
import { FC, PropsWithChildren } from "react";
|
|
3
3
|
declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
|
|
4
4
|
export type { BlogPostProps };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
.dsa-event-filter {
|
|
2
|
+
border-radius: var(--ks-border-radius-card);
|
|
3
|
+
border: var(--ks-border-width-default) solid var(--ks-border-color-card);
|
|
4
|
+
padding: var(--ks-spacing-inset-m);
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
gap: var(--ks-spacing-stack-m);
|
|
8
|
+
}
|
|
9
|
+
.dsa-event-filter__item {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: var(--ks-spacing-stack-xs);
|
|
13
|
+
}
|
|
14
|
+
.dsa-event-filter__topic {
|
|
15
|
+
font: var(--dsa-topic--font);
|
|
16
|
+
font-weight: var(--dsa-topic--font-weight);
|
|
17
|
+
}
|
|
18
|
+
.dsa-event-filter__categories {
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
gap: var(--ks-spacing-stack-xs);
|
|
22
|
+
}
|
|
23
|
+
.dsa-event-filter__buttons {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
gap: var(--ks-spacing-stack-s);
|
|
27
|
+
}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/event-filter.schema.json",
|
|
4
|
+
"title": "Event Filter",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"datePicker": {
|
|
8
|
+
"type": "object",
|
|
9
|
+
"properties": {
|
|
10
|
+
"title": {
|
|
11
|
+
"type": "string",
|
|
12
|
+
"description": "Title for the date picker",
|
|
13
|
+
"default": "Find Appointment"
|
|
14
|
+
},
|
|
15
|
+
"dateFromInput": {
|
|
16
|
+
"type": "object",
|
|
17
|
+
"properties": {
|
|
18
|
+
"label": {
|
|
19
|
+
"type": "string",
|
|
20
|
+
"description": "Label for the date-from input",
|
|
21
|
+
"default": "From"
|
|
22
|
+
},
|
|
23
|
+
"placeholder": {
|
|
24
|
+
"type": "string",
|
|
25
|
+
"description": "Placeholder text for the date-from input",
|
|
26
|
+
"default": "Select a date"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"additionalProperties": false
|
|
30
|
+
},
|
|
31
|
+
"dateToInput": {
|
|
32
|
+
"type": "object",
|
|
33
|
+
"properties": {
|
|
34
|
+
"label": {
|
|
35
|
+
"type": "string",
|
|
36
|
+
"description": "Label for the date-to input",
|
|
37
|
+
"default": "To"
|
|
38
|
+
},
|
|
39
|
+
"placeholder": {
|
|
40
|
+
"type": "string",
|
|
41
|
+
"description": "Placeholder text for the date-to input",
|
|
42
|
+
"default": "Select a date"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"additionalProperties": false
|
|
46
|
+
},
|
|
47
|
+
"toggle": {
|
|
48
|
+
"type": "boolean",
|
|
49
|
+
"description": "Toggle to enable or disable the date picker",
|
|
50
|
+
"default": true
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"additionalProperties": false
|
|
54
|
+
},
|
|
55
|
+
"categories": {
|
|
56
|
+
"type": "object",
|
|
57
|
+
"properties": {
|
|
58
|
+
"title": {
|
|
59
|
+
"type": "string",
|
|
60
|
+
"description": "Title for the categories filter",
|
|
61
|
+
"default": "Categories"
|
|
62
|
+
},
|
|
63
|
+
"categoryCheckboxes": {
|
|
64
|
+
"type": "array",
|
|
65
|
+
"title": "Label",
|
|
66
|
+
"description": "List of categories to filter appointments",
|
|
67
|
+
"items": {
|
|
68
|
+
"type": "string",
|
|
69
|
+
"description": "Category name",
|
|
70
|
+
"examples": [
|
|
71
|
+
"Category Filter"
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
"toggle": {
|
|
76
|
+
"type": "boolean",
|
|
77
|
+
"description": "Toggle to enable or disable the category filter",
|
|
78
|
+
"default": true
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
"additionalProperties": false
|
|
82
|
+
},
|
|
83
|
+
"applyButton": {
|
|
84
|
+
"type": "object",
|
|
85
|
+
"properties": {
|
|
86
|
+
"label": {
|
|
87
|
+
"type": "string",
|
|
88
|
+
"description": "Label for the button",
|
|
89
|
+
"default": "Filter Appointments"
|
|
90
|
+
},
|
|
91
|
+
"onClick": {
|
|
92
|
+
"type": "string",
|
|
93
|
+
"description": "Function to call on button click"
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
"additionalProperties": false
|
|
97
|
+
},
|
|
98
|
+
"resetButton": {
|
|
99
|
+
"type": "object",
|
|
100
|
+
"properties": {
|
|
101
|
+
"label": {
|
|
102
|
+
"type": "string",
|
|
103
|
+
"description": "Label for the button",
|
|
104
|
+
"default": "Reset Filters"
|
|
105
|
+
},
|
|
106
|
+
"onClick": {
|
|
107
|
+
"type": "string",
|
|
108
|
+
"description": "Function to call on button click"
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
"additionalProperties": false
|
|
112
|
+
},
|
|
113
|
+
"type": {
|
|
114
|
+
"const": "event-filter"
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
"additionalProperties": false
|
|
118
|
+
}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/event-filter.schema.json",
|
|
4
|
+
"title": "Event Filter",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"datePicker": {
|
|
8
|
+
"type": "object",
|
|
9
|
+
"properties": {
|
|
10
|
+
"title": {
|
|
11
|
+
"type": "string",
|
|
12
|
+
"description": "Title for the date picker",
|
|
13
|
+
"default": "Find Appointment"
|
|
14
|
+
},
|
|
15
|
+
"dateFromInput": {
|
|
16
|
+
"type": "object",
|
|
17
|
+
"properties": {
|
|
18
|
+
"label": {
|
|
19
|
+
"type": "string",
|
|
20
|
+
"description": "Label for the date-from input",
|
|
21
|
+
"default": "From"
|
|
22
|
+
},
|
|
23
|
+
"placeholder": {
|
|
24
|
+
"type": "string",
|
|
25
|
+
"description": "Placeholder text for the date-from input",
|
|
26
|
+
"default": "Select a date"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
"dateToInput": {
|
|
31
|
+
"type": "object",
|
|
32
|
+
"properties": {
|
|
33
|
+
"label": {
|
|
34
|
+
"type": "string",
|
|
35
|
+
"description": "Label for the date-to input",
|
|
36
|
+
"default": "To"
|
|
37
|
+
},
|
|
38
|
+
"placeholder": {
|
|
39
|
+
"type": "string",
|
|
40
|
+
"description": "Placeholder text for the date-to input",
|
|
41
|
+
"default": "Select a date"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"toggle": {
|
|
46
|
+
"type": "boolean",
|
|
47
|
+
"description": "Toggle to enable or disable the date picker",
|
|
48
|
+
"default": true
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"categories": {
|
|
53
|
+
"type": "object",
|
|
54
|
+
"properties": {
|
|
55
|
+
"title": {
|
|
56
|
+
"type": "string",
|
|
57
|
+
"description": "Title for the categories filter",
|
|
58
|
+
"default": "Categories"
|
|
59
|
+
},
|
|
60
|
+
"categoryCheckboxes": {
|
|
61
|
+
"type": "array",
|
|
62
|
+
"title": "Label",
|
|
63
|
+
"description": "List of categories to filter appointments",
|
|
64
|
+
"items": {
|
|
65
|
+
"type": "string",
|
|
66
|
+
"description": "Category name",
|
|
67
|
+
"examples": ["Category Filter"]
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
"toggle": {
|
|
71
|
+
"type": "boolean",
|
|
72
|
+
"description": "Toggle to enable or disable the category filter",
|
|
73
|
+
"default": true
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
"applyButton": {
|
|
78
|
+
"type": "object",
|
|
79
|
+
"properties": {
|
|
80
|
+
"label": {
|
|
81
|
+
"type": "string",
|
|
82
|
+
"description": "Label for the button",
|
|
83
|
+
"default": "Filter Appointments"
|
|
84
|
+
},
|
|
85
|
+
"onClick": {
|
|
86
|
+
"type": "string",
|
|
87
|
+
"description": "Function to call on button click"
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"resetButton": {
|
|
92
|
+
"type": "object",
|
|
93
|
+
"properties": {
|
|
94
|
+
"label": {
|
|
95
|
+
"type": "string",
|
|
96
|
+
"description": "Label for the button",
|
|
97
|
+
"default": "Reset Filters"
|
|
98
|
+
},
|
|
99
|
+
"onClick": {
|
|
100
|
+
"type": "string",
|
|
101
|
+
"description": "Function to call on button click"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
"additionalProperties": false
|
|
107
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { EventFilterProps } from "../../EventFilterProps-b190eb86.js";
|
|
3
|
+
declare const EventFilterContextDefault: import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const EventFilterContext: import("react").Context<import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>>;
|
|
5
|
+
declare const EventFilter: import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export type { EventFilterProps };
|
|
7
|
+
export { EventFilterContextDefault, EventFilterContext, EventFilter };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import "./event-filter.css";
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, createContext, useContext } from 'react';
|
|
4
|
+
import { TextField } from '@kickstartds/form/lib/text-field';
|
|
5
|
+
import { Checkbox } from '@kickstartds/form/lib/checkbox';
|
|
6
|
+
import { Button } from '../button/index.js';
|
|
7
|
+
import 'classnames';
|
|
8
|
+
import '@kickstartds/base/lib/button';
|
|
9
|
+
|
|
10
|
+
const EventFilterContextDefault = forwardRef(({ categories = {
|
|
11
|
+
title: "Categories",
|
|
12
|
+
toggle: true,
|
|
13
|
+
}, datePicker = {
|
|
14
|
+
title: "Find Appointment",
|
|
15
|
+
toggle: true,
|
|
16
|
+
}, applyButton = {
|
|
17
|
+
label: "Filter Appointments",
|
|
18
|
+
}, resetButton = {
|
|
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 && 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
|
+
categories.categoryCheckboxes.length > 0 &&
|
|
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
|
+
// Handle button click
|
|
24
|
+
} }), jsx(Button, { size: "small", label: resetButton?.label || "Reset Filters", onClick: () => {
|
|
25
|
+
// Handle button click
|
|
26
|
+
} })] })] })));
|
|
27
|
+
const EventFilterContext = createContext(EventFilterContextDefault);
|
|
28
|
+
const EventFilter = forwardRef((props, ref) => {
|
|
29
|
+
const Component = useContext(EventFilterContext);
|
|
30
|
+
return jsx(Component, { ...props, ref: ref });
|
|
31
|
+
});
|
|
32
|
+
EventFilter.displayName = "EventFilter";
|
|
33
|
+
|
|
34
|
+
export { EventFilter, EventFilterContext, EventFilterContextDefault };
|
|
@@ -0,0 +1,130 @@
|
|
|
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
|
+
"type": {
|
|
126
|
+
"const": "event-list"
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
"additionalProperties": false
|
|
130
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
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
|
+
},
|
|
11
|
+
"additionalProperties": false
|
|
12
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
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
|
+
interface EventListProps {
|
|
10
|
+
/**
|
|
11
|
+
* Referenced component EventFilterProps
|
|
12
|
+
*/
|
|
13
|
+
filter?: EventFilterProps;
|
|
14
|
+
}
|
|
15
|
+
declare const EventList: FC<PropsWithChildren<EventListProps>>;
|
|
16
|
+
export type { EventListProps };
|
|
17
|
+
export { EventList };
|
|
@@ -0,0 +1,22 @@
|
|
|
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 'react';
|
|
6
|
+
import 'classnames';
|
|
7
|
+
import '@kickstartds/core/lib/react';
|
|
8
|
+
import '@kickstartds/base/lib/section';
|
|
9
|
+
import '../section/js/Section.client.js';
|
|
10
|
+
import '@kickstartds/core/lib/component';
|
|
11
|
+
import '@kickstartds/form/lib/text-field';
|
|
12
|
+
import '@kickstartds/form/lib/checkbox';
|
|
13
|
+
import '../button/index.js';
|
|
14
|
+
import '@kickstartds/base/lib/button';
|
|
15
|
+
|
|
16
|
+
const EventList = ({ filter, }) => (jsx(Fragment, { children: jsx(Section, { width: "wide", children: jsx(SplitWeighted, { order: {
|
|
17
|
+
desktop: "asideFirst",
|
|
18
|
+
mobile: "asideFirst",
|
|
19
|
+
}, aside: jsx(EventFilter, { ...filter }) }) }) }));
|
|
20
|
+
EventList.displayName = "EventList";
|
|
21
|
+
|
|
22
|
+
export { EventList };
|
|
@@ -29,7 +29,7 @@ interface SettingsProps {
|
|
|
29
29
|
seo: SeoProps;
|
|
30
30
|
iconSprite?: IconSprite;
|
|
31
31
|
}
|
|
32
|
-
export * from "../../BlogPostProps-
|
|
32
|
+
export * from "../../BlogPostProps-c760fd2a.js";
|
|
33
33
|
export * from "../../BlogOverviewProps-9f207f1c.js";
|
|
34
34
|
export * from "../../PageProps-aa29c554.js";
|
|
35
35
|
export { IconSprite, SettingsProps };
|
|
@@ -935,6 +935,47 @@
|
|
|
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 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
|
+
},
|
|
977
|
+
"screenshot": "img/screenshots/page-archetypes-event-list--event-list.png"
|
|
978
|
+
},
|
|
938
979
|
{
|
|
939
980
|
"id": "components-contact--wide-image",
|
|
940
981
|
"group": "Components/Contact",
|
|
@@ -1576,6 +1617,45 @@
|
|
|
1576
1617
|
},
|
|
1577
1618
|
"screenshot": "img/screenshots/event-event-appointment--default.png"
|
|
1578
1619
|
},
|
|
1620
|
+
{
|
|
1621
|
+
"id": "event-event-filter--default",
|
|
1622
|
+
"group": "Event/ Event Filter",
|
|
1623
|
+
"name": "Default",
|
|
1624
|
+
"code": "<EventFilter\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/>",
|
|
1625
|
+
"args": {
|
|
1626
|
+
"datePicker": {
|
|
1627
|
+
"title": "Find Appointment",
|
|
1628
|
+
"dateFromInput": {
|
|
1629
|
+
"label": "From",
|
|
1630
|
+
"placeholder": "Select a date"
|
|
1631
|
+
},
|
|
1632
|
+
"dateToInput": {
|
|
1633
|
+
"label": "To",
|
|
1634
|
+
"placeholder": "Select a date"
|
|
1635
|
+
},
|
|
1636
|
+
"toggle": true
|
|
1637
|
+
},
|
|
1638
|
+
"categories": {
|
|
1639
|
+
"title": "Categories",
|
|
1640
|
+
"categoryCheckboxes": [
|
|
1641
|
+
"All",
|
|
1642
|
+
"Buyers",
|
|
1643
|
+
"Sellers",
|
|
1644
|
+
"Renters",
|
|
1645
|
+
"Landlords",
|
|
1646
|
+
"Tenants"
|
|
1647
|
+
],
|
|
1648
|
+
"toggle": true
|
|
1649
|
+
},
|
|
1650
|
+
"applyButton": {
|
|
1651
|
+
"label": "Filter Appointments"
|
|
1652
|
+
},
|
|
1653
|
+
"resetButton": {
|
|
1654
|
+
"label": "Reset Filters"
|
|
1655
|
+
}
|
|
1656
|
+
},
|
|
1657
|
+
"screenshot": "img/screenshots/event-event-filter--default.png"
|
|
1658
|
+
},
|
|
1579
1659
|
{
|
|
1580
1660
|
"id": "event-event-header--default",
|
|
1581
1661
|
"group": "Event/ Event Header",
|
package/dist/global.css
CHANGED
|
@@ -587,7 +587,7 @@ h3 {
|
|
|
587
587
|
--dsa-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
|
|
588
588
|
--dsa-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
|
|
589
589
|
--dsa-check--border-color_checked: var(--ks-border-color-interface-interactive-selected);
|
|
590
|
-
--dsa-check--size: 1.
|
|
590
|
+
--dsa-check--size: 1.5em;
|
|
591
591
|
--dsa-check--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
|
|
592
592
|
--dsa-check_box--border-radius: min(var(--ks-border-radius-control), calc(var(--dsa-check--size) / 4));
|
|
593
593
|
--dsa-check_radio--border-radius: var(--ks-border-radius-circle);
|
|
@@ -596,6 +596,7 @@ h3 {
|
|
|
596
596
|
--dsa-check__label--font: var(--ks-font-interface-s);
|
|
597
597
|
--dsa-check__label--font-weight: var(--ks-font-weight-regular);
|
|
598
598
|
--dsa-check__label--color: var(--ks-text-color-interface);
|
|
599
|
+
--dsa-check__label--margin-left: 0.5em;
|
|
599
600
|
}
|
|
600
601
|
|
|
601
602
|
.c-form-field {
|
|
@@ -645,6 +646,9 @@ h3 {
|
|
|
645
646
|
font-weight: var(--dsa-check__label--font-weight, var(--ks-font-weight-regular));
|
|
646
647
|
color: var(--dsa-check__label--color, var(--ks-text-color-interface-interactive));
|
|
647
648
|
}
|
|
649
|
+
:root .c-form-check__label, [ks-inverted] .c-form-check__label, [ks-theme] .c-form-check__label {
|
|
650
|
+
margin-left: var(--dsa-check__label--margin-left, 0.5em);
|
|
651
|
+
}
|
|
648
652
|
:root .c-form-check--checkbox, [ks-inverted] .c-form-check--checkbox, [ks-theme] .c-form-check--checkbox {
|
|
649
653
|
--c-form-check_box--border-radius: var(
|
|
650
654
|
--dsa-check_box--border-radius,
|
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 11:19:17 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root [ks-theme=business] {
|
|
6
6
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -2727,7 +2727,7 @@
|
|
|
2727
2727
|
}
|
|
2728
2728
|
/**
|
|
2729
2729
|
* Do not edit directly
|
|
2730
|
-
* Generated on Thu, 03 Jul 2025
|
|
2730
|
+
* Generated on Thu, 03 Jul 2025 11:19:21 GMT
|
|
2731
2731
|
*/
|
|
2732
2732
|
:root [ks-theme=google] {
|
|
2733
2733
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -5458,7 +5458,7 @@
|
|
|
5458
5458
|
}
|
|
5459
5459
|
/**
|
|
5460
5460
|
* Do not edit directly
|
|
5461
|
-
* Generated on Thu, 03 Jul 2025
|
|
5461
|
+
* Generated on Thu, 03 Jul 2025 11:19:19 GMT
|
|
5462
5462
|
*/
|
|
5463
5463
|
:root [ks-theme=ngo] {
|
|
5464
5464
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -8459,7 +8459,7 @@
|
|
|
8459
8459
|
}
|
|
8460
8460
|
/**
|
|
8461
8461
|
* Do not edit directly
|
|
8462
|
-
* Generated on Thu, 03 Jul 2025
|
|
8462
|
+
* Generated on Thu, 03 Jul 2025 11:19:23 GMT
|
|
8463
8463
|
*/
|
|
8464
8464
|
:root [ks-theme=telekom] {
|
|
8465
8465
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
package/dist/tokens/tokens.css
CHANGED
package/dist/tokens/tokens.js
CHANGED
package/package.json
CHANGED
|
File without changes
|