@kickstartds/ds-agency-premium 1.6.71--canary.45.1774.0 → 1.6.71--canary.45.1776.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.
@@ -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,115 @@
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
+ }
71
+ },
72
+ "toggle": {
73
+ "type": "boolean",
74
+ "description": "Toggle to enable or disable the category filter",
75
+ "default": true
76
+ }
77
+ },
78
+ "additionalProperties": false
79
+ },
80
+ "applyButton": {
81
+ "type": "object",
82
+ "properties": {
83
+ "label": {
84
+ "type": "string",
85
+ "description": "Label for the button",
86
+ "default": "Filter Appointments"
87
+ },
88
+ "onClick": {
89
+ "type": "string",
90
+ "description": "Function to call on button click"
91
+ }
92
+ },
93
+ "additionalProperties": false
94
+ },
95
+ "resetButton": {
96
+ "type": "object",
97
+ "properties": {
98
+ "label": {
99
+ "type": "string",
100
+ "description": "Label for the button",
101
+ "default": "Reset Filters"
102
+ },
103
+ "onClick": {
104
+ "type": "string",
105
+ "description": "Function to call on button click"
106
+ }
107
+ },
108
+ "additionalProperties": false
109
+ },
110
+ "type": {
111
+ "const": "event-filter"
112
+ }
113
+ },
114
+ "additionalProperties": false
115
+ }
@@ -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
+
55
+ "properties": {
56
+ "title": {
57
+ "type": "string",
58
+ "description": "Title for the categories filter",
59
+ "default": "Categories"
60
+ },
61
+ "categoryCheckboxes": {
62
+ "type": "array",
63
+ "title": "Label",
64
+ "description": "List of categories to filter appointments",
65
+ "items": {
66
+ "type": "string",
67
+ "description": "Category name"
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,79 @@
1
+ /// <reference types="react" />
2
+ /* eslint-disable */
3
+ /**
4
+ * This file was automatically generated by json-schema-to-typescript.
5
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
6
+ * and run json-schema-to-typescript to regenerate this file.
7
+ */
8
+ /**
9
+ * 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
+ }
75
+ declare const EventFilterContextDefault: import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>;
76
+ declare const EventFilterContext: import("react").Context<import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>>;
77
+ declare const EventFilter: import("react").ForwardRefExoticComponent<EventFilterProps & import("react").RefAttributes<HTMLDivElement>>;
78
+ export type { EventFilterProps };
79
+ 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?.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 };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 03 Jul 2025 10:12:27 GMT
3
+ * Generated on Thu, 03 Jul 2025 11:03:33 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);
@@ -1576,6 +1576,45 @@
1576
1576
  },
1577
1577
  "screenshot": "img/screenshots/event-event-appointment--default.png"
1578
1578
  },
1579
+ {
1580
+ "id": "event-event-filter--default",
1581
+ "group": "Event/ Event Filter",
1582
+ "name": "Default",
1583
+ "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/>",
1584
+ "args": {
1585
+ "datePicker": {
1586
+ "title": "Find Appointment",
1587
+ "dateFromInput": {
1588
+ "label": "From",
1589
+ "placeholder": "Select a date"
1590
+ },
1591
+ "dateToInput": {
1592
+ "label": "To",
1593
+ "placeholder": "Select a date"
1594
+ },
1595
+ "toggle": true
1596
+ },
1597
+ "categories": {
1598
+ "title": "Categories",
1599
+ "toggle": true,
1600
+ "categoryCheckboxes": [
1601
+ "All",
1602
+ "Buyers",
1603
+ "Sellers",
1604
+ "Renters",
1605
+ "Landlords",
1606
+ "Tenants"
1607
+ ]
1608
+ },
1609
+ "applyButton": {
1610
+ "label": "Filter Appointments"
1611
+ },
1612
+ "resetButton": {
1613
+ "label": "Reset Filters"
1614
+ }
1615
+ },
1616
+ "screenshot": "img/screenshots/event-event-filter--default.png"
1617
+ },
1579
1618
  {
1580
1619
  "id": "event-event-header--default",
1581
1620
  "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.125em;
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,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 03 Jul 2025 10:12:29 GMT
3
+ * Generated on Thu, 03 Jul 2025 11:03:36 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 10:12:34 GMT
2730
+ * Generated on Thu, 03 Jul 2025 11:03:39 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 10:12:32 GMT
5461
+ * Generated on Thu, 03 Jul 2025 11:03:37 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 10:12:35 GMT
8462
+ * Generated on Thu, 03 Jul 2025 11:03:41 GMT
8463
8463
  */
8464
8464
  :root [ks-theme=telekom] {
8465
8465
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 03 Jul 2025 10:12:27 GMT
3
+ * Generated on Thu, 03 Jul 2025 11:03:33 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 03 Jul 2025 10:12:27 GMT
3
+ * Generated on Thu, 03 Jul 2025 11:03:34 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#f3f3f4";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.6.71--canary.45.1774.0",
3
+ "version": "1.6.71--canary.45.1776.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {