allaw-ui 4.9.5 → 4.9.7
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/components/molecules/documentCard/DocumentCard.js +1 -1
- package/dist/components/molecules/section/Section.css +248 -0
- package/dist/components/molecules/section/Section.d.ts +19 -0
- package/dist/components/molecules/section/Section.js +23 -0
- package/dist/components/molecules/section/Section.stories.d.ts +42 -0
- package/dist/components/molecules/section/Section.stories.js +162 -0
- package/dist/components/molecules/section/index.d.ts +2 -0
- package/dist/components/molecules/section/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
@import "../../../styles/colors.css";
|
|
2
|
+
|
|
3
|
+
.section {
|
|
4
|
+
background: var(--primary-blanc, #FFF);
|
|
5
|
+
border-radius: 16px;
|
|
6
|
+
border: 1px solid var(--primary-gris-de-fond, #E6EDF5);
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
9
|
+
font-family: var(--font-open-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.section-header {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: space-between;
|
|
16
|
+
padding: 24px;
|
|
17
|
+
border-bottom: 1px solid var(--primary-gris-de-fond, #E6EDF5);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.section-header-left {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
gap: 12px;
|
|
24
|
+
flex: 1;
|
|
25
|
+
min-width: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.section-icon {
|
|
29
|
+
width: 40px;
|
|
30
|
+
height: 40px;
|
|
31
|
+
background: linear-gradient(135deg, rgba(37, 190, 235, 0.1) 0%, rgba(25, 133, 168, 0.15) 100%);
|
|
32
|
+
border-radius: 10px;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
border: 1px solid rgba(37, 190, 235, 0.2);
|
|
37
|
+
flex-shrink: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.section-icon i {
|
|
41
|
+
font-size: 18px;
|
|
42
|
+
color: var(--primary-blue, #25BEEB);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.section-icon svg,
|
|
46
|
+
.section-icon img {
|
|
47
|
+
width: 18px;
|
|
48
|
+
height: 18px;
|
|
49
|
+
color: var(--primary-blue, #25BEEB);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.section-title-container {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: baseline;
|
|
55
|
+
gap: 8px;
|
|
56
|
+
min-width: 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.section-title {
|
|
60
|
+
font-family: var(--font-poppins, "Poppins", "Helvetica Neue", Arial, sans-serif);
|
|
61
|
+
font-size: 20px;
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
color: var(--primary-mid-black, #171E25);
|
|
64
|
+
margin: 0;
|
|
65
|
+
line-height: 1.3;
|
|
66
|
+
white-space: nowrap;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
text-overflow: ellipsis;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.section-number-badge {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
flex-shrink: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.section-number {
|
|
79
|
+
font-family: var(--font-open-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
|
|
80
|
+
font-size: 14px;
|
|
81
|
+
font-weight: 500;
|
|
82
|
+
color: var(--primary-mid-grey, #728ea7);
|
|
83
|
+
background: rgba(37, 190, 235, 0.1);
|
|
84
|
+
padding: 2px 8px;
|
|
85
|
+
border-radius: 12px;
|
|
86
|
+
border: 1px solid rgba(37, 190, 235, 0.2);
|
|
87
|
+
line-height: 1;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.section-actions {
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
gap: 12px;
|
|
94
|
+
flex-shrink: 0;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.section-action-button {
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
gap: 8px;
|
|
102
|
+
padding: 8px 12px;
|
|
103
|
+
background: var(--primary-blanc, #FFF);
|
|
104
|
+
border: 1px solid var(--primary-blue, #25BEEB);
|
|
105
|
+
border-radius: 8px;
|
|
106
|
+
color: var(--primary-blue, #25BEEB);
|
|
107
|
+
font-family: var(--font-open-sans, "Open Sans", "Helvetica Neue", Arial, sans-serif);
|
|
108
|
+
font-size: 13px;
|
|
109
|
+
font-weight: 600;
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
transition: all 0.2s ease;
|
|
112
|
+
box-shadow: 0 2px 4px rgba(37, 190, 235, 0.1);
|
|
113
|
+
white-space: nowrap;
|
|
114
|
+
min-width: 120px;
|
|
115
|
+
flex: 1;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.section-action-button:hover:not(.section-action-disabled) {
|
|
119
|
+
background: #f6fcfe;
|
|
120
|
+
border-color: var(--primary-blue, #25BEEB);
|
|
121
|
+
box-shadow: 0 2px 6px rgba(37, 190, 235, 0.15);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.section-action-button:active:not(.section-action-disabled) {
|
|
125
|
+
background: #e0f2f7;
|
|
126
|
+
transform: translateY(1px);
|
|
127
|
+
box-shadow: 0 1px 3px rgba(37, 190, 235, 0.1);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.section-action-primary {
|
|
131
|
+
background: var(--primary-blue, #25BEEB);
|
|
132
|
+
color: white;
|
|
133
|
+
border: 1px solid var(--primary-blue, #25BEEB);
|
|
134
|
+
box-shadow: 0 2px 4px rgba(37, 190, 235, 0.2);
|
|
135
|
+
min-width: 120px;
|
|
136
|
+
flex: 1;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.section-action-secondary {
|
|
140
|
+
border: 1px solid var(--primary-blue, #25BEEB);
|
|
141
|
+
min-width: 120px;
|
|
142
|
+
height: 34px;
|
|
143
|
+
flex: 1;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.section-action-primary:hover:not(.section-action-disabled) {
|
|
147
|
+
background: #1ca6d4;
|
|
148
|
+
border-color: #1ca6d4;
|
|
149
|
+
box-shadow: 0 2px 6px rgba(37, 190, 235, 0.3);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.section-action-primary:active:not(.section-action-disabled) {
|
|
153
|
+
background: #1a9bc0;
|
|
154
|
+
transform: translateY(1px);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.section-action-disabled {
|
|
158
|
+
opacity: 0.5;
|
|
159
|
+
cursor: not-allowed;
|
|
160
|
+
pointer-events: none;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.section-action-icon {
|
|
164
|
+
display: flex;
|
|
165
|
+
align-items: center;
|
|
166
|
+
justify-content: center;
|
|
167
|
+
width: 16px;
|
|
168
|
+
height: 16px;
|
|
169
|
+
font-size: 16px;
|
|
170
|
+
line-height: 1;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.section-action-label {
|
|
174
|
+
font-size: 13px;
|
|
175
|
+
font-weight: 600;
|
|
176
|
+
line-height: 1;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.section-divider {
|
|
180
|
+
display: none; /* Divider is now handled by border-bottom on header */
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.section-content {
|
|
184
|
+
padding: 24px;
|
|
185
|
+
min-height: 60px;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* Responsive design */
|
|
189
|
+
@media (max-width: 768px) {
|
|
190
|
+
.section-header {
|
|
191
|
+
flex-direction: column;
|
|
192
|
+
align-items: flex-start;
|
|
193
|
+
gap: 16px;
|
|
194
|
+
padding: 20px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.section-header-left {
|
|
198
|
+
width: 100%;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.section-actions {
|
|
202
|
+
width: 100%;
|
|
203
|
+
justify-content: flex-end;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.section-action-button {
|
|
207
|
+
flex: 1;
|
|
208
|
+
min-width: 0;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.section-content {
|
|
212
|
+
padding: 20px;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
@media (max-width: 480px) {
|
|
217
|
+
.section-header {
|
|
218
|
+
padding: 16px;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.section-content {
|
|
222
|
+
padding: 16px;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.section-actions {
|
|
226
|
+
flex-direction: column;
|
|
227
|
+
gap: 8px;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.section-action-button {
|
|
231
|
+
width: 100%;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.section-title {
|
|
235
|
+
font-size: 18px;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.section-icon {
|
|
239
|
+
width: 36px;
|
|
240
|
+
height: 36px;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.section-icon svg,
|
|
244
|
+
.section-icon img {
|
|
245
|
+
width: 16px;
|
|
246
|
+
height: 16px;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./Section.css";
|
|
3
|
+
export interface SectionAction {
|
|
4
|
+
label: string;
|
|
5
|
+
onClick: () => void;
|
|
6
|
+
variant?: "primary" | "secondary";
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface SectionProps {
|
|
11
|
+
icon?: string;
|
|
12
|
+
title: string;
|
|
13
|
+
number?: number;
|
|
14
|
+
actions?: SectionAction[];
|
|
15
|
+
children?: React.ReactNode;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
declare const Section: React.FC<SectionProps>;
|
|
19
|
+
export default Section;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import "./Section.css";
|
|
4
|
+
var Section = function (_a) {
|
|
5
|
+
var icon = _a.icon, title = _a.title, number = _a.number, _b = _a.actions, actions = _b === void 0 ? [] : _b, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c;
|
|
6
|
+
return (React.createElement("div", { className: "section ".concat(className) },
|
|
7
|
+
React.createElement("div", { className: "section-header" },
|
|
8
|
+
React.createElement("div", { className: "section-header-left" },
|
|
9
|
+
icon && React.createElement("div", { className: "section-icon" },
|
|
10
|
+
React.createElement("i", { className: icon })),
|
|
11
|
+
React.createElement("div", { className: "section-title-container" },
|
|
12
|
+
React.createElement("h3", { className: "section-title" }, title),
|
|
13
|
+
number !== undefined && (React.createElement("div", { className: "section-number-badge" },
|
|
14
|
+
React.createElement("span", { className: "section-number" },
|
|
15
|
+
"(",
|
|
16
|
+
number,
|
|
17
|
+
")"))))),
|
|
18
|
+
actions.length > 0 && (React.createElement("div", { className: "section-actions" }, actions.map(function (action, index) { return (React.createElement("button", { key: index, className: "section-action-button ".concat(action.variant === "primary" ? "section-action-primary" : "section-action-secondary", " ").concat(action.disabled ? "section-action-disabled" : ""), onClick: action.onClick, disabled: action.disabled },
|
|
19
|
+
action.icon && React.createElement("span", { className: "section-action-icon" }, action.icon),
|
|
20
|
+
React.createElement("span", { className: "section-action-label" }, action.label))); })))),
|
|
21
|
+
React.createElement("div", { className: "section-content" }, children)));
|
|
22
|
+
};
|
|
23
|
+
export default Section;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
export let title: string;
|
|
3
|
+
export { Section as component };
|
|
4
|
+
export namespace parameters {
|
|
5
|
+
let layout: string;
|
|
6
|
+
}
|
|
7
|
+
export namespace argTypes {
|
|
8
|
+
export namespace title_1 {
|
|
9
|
+
let control: string;
|
|
10
|
+
let description: string;
|
|
11
|
+
}
|
|
12
|
+
export { title_1 as title };
|
|
13
|
+
export namespace number {
|
|
14
|
+
let control_1: string;
|
|
15
|
+
export { control_1 as control };
|
|
16
|
+
let description_1: string;
|
|
17
|
+
export { description_1 as description };
|
|
18
|
+
}
|
|
19
|
+
export namespace actions {
|
|
20
|
+
let control_2: boolean;
|
|
21
|
+
export { control_2 as control };
|
|
22
|
+
let description_2: string;
|
|
23
|
+
export { description_2 as description };
|
|
24
|
+
}
|
|
25
|
+
export namespace children {
|
|
26
|
+
let control_3: boolean;
|
|
27
|
+
export { control_3 as control };
|
|
28
|
+
let description_3: string;
|
|
29
|
+
export { description_3 as description };
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
export default _default;
|
|
34
|
+
export const Default: any;
|
|
35
|
+
export const WithoutIcon: any;
|
|
36
|
+
export const WithoutNumber: any;
|
|
37
|
+
export const WithoutActions: any;
|
|
38
|
+
export const Minimal: any;
|
|
39
|
+
export const LongTitle: any;
|
|
40
|
+
export const MultipleActions: any;
|
|
41
|
+
export const DisabledActions: any;
|
|
42
|
+
import Section from "./Section";
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import React from "react";
|
|
13
|
+
import Section from "./Section";
|
|
14
|
+
var PlusIcon = function () { return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
15
|
+
React.createElement("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))); };
|
|
16
|
+
export default {
|
|
17
|
+
title: "Molecules/Section",
|
|
18
|
+
component: Section,
|
|
19
|
+
parameters: {
|
|
20
|
+
layout: "padded",
|
|
21
|
+
},
|
|
22
|
+
argTypes: {
|
|
23
|
+
title: {
|
|
24
|
+
control: "text",
|
|
25
|
+
description: "The title of the section",
|
|
26
|
+
},
|
|
27
|
+
number: {
|
|
28
|
+
control: "number",
|
|
29
|
+
description: "The number to display in the badge",
|
|
30
|
+
},
|
|
31
|
+
actions: {
|
|
32
|
+
control: false,
|
|
33
|
+
description: "Array of action buttons",
|
|
34
|
+
},
|
|
35
|
+
children: {
|
|
36
|
+
control: false,
|
|
37
|
+
description: "Content to display in the section",
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
};
|
|
41
|
+
var Template = function (args) { return React.createElement(Section, __assign({}, args)); };
|
|
42
|
+
export var Default = Template.bind({});
|
|
43
|
+
Default.args = {
|
|
44
|
+
icon: "allaw-icon-document",
|
|
45
|
+
title: "Documents partagés",
|
|
46
|
+
number: 5,
|
|
47
|
+
actions: [
|
|
48
|
+
{
|
|
49
|
+
label: "Transférer",
|
|
50
|
+
onClick: function () { return console.log("Transfer clicked"); },
|
|
51
|
+
variant: "secondary",
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: "Demander",
|
|
55
|
+
onClick: function () { return console.log("Request clicked"); },
|
|
56
|
+
variant: "primary",
|
|
57
|
+
icon: React.createElement(PlusIcon, null),
|
|
58
|
+
},
|
|
59
|
+
],
|
|
60
|
+
children: (React.createElement("div", { style: { padding: "20px", textAlign: "center", color: "#728ea7" } }, "Content area - Add your content here")),
|
|
61
|
+
};
|
|
62
|
+
export var WithoutIcon = Template.bind({});
|
|
63
|
+
WithoutIcon.args = {
|
|
64
|
+
title: "Section without icon",
|
|
65
|
+
number: 3,
|
|
66
|
+
actions: [
|
|
67
|
+
{
|
|
68
|
+
label: "Action",
|
|
69
|
+
onClick: function () { return console.log("Action clicked"); },
|
|
70
|
+
variant: "primary",
|
|
71
|
+
},
|
|
72
|
+
],
|
|
73
|
+
children: (React.createElement("div", { style: { padding: "20px", textAlign: "center", color: "#728ea7" } }, "This section has no icon")),
|
|
74
|
+
};
|
|
75
|
+
export var WithoutNumber = Template.bind({});
|
|
76
|
+
WithoutNumber.args = {
|
|
77
|
+
icon: "allaw-icon-document",
|
|
78
|
+
title: "Section without number",
|
|
79
|
+
actions: [
|
|
80
|
+
{
|
|
81
|
+
label: "Primary Action",
|
|
82
|
+
onClick: function () { return console.log("Primary clicked"); },
|
|
83
|
+
variant: "primary",
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
label: "Secondary Action",
|
|
87
|
+
onClick: function () { return console.log("Secondary clicked"); },
|
|
88
|
+
variant: "secondary",
|
|
89
|
+
},
|
|
90
|
+
],
|
|
91
|
+
children: (React.createElement("div", { style: { padding: "20px", textAlign: "center", color: "#728ea7" } }, "This section has no number badge")),
|
|
92
|
+
};
|
|
93
|
+
export var WithoutActions = Template.bind({});
|
|
94
|
+
WithoutActions.args = {
|
|
95
|
+
icon: "allaw-icon-document",
|
|
96
|
+
title: "Section without actions",
|
|
97
|
+
number: 10,
|
|
98
|
+
children: (React.createElement("div", { style: { padding: "20px", textAlign: "center", color: "#728ea7" } }, "This section has no action buttons")),
|
|
99
|
+
};
|
|
100
|
+
export var Minimal = Template.bind({});
|
|
101
|
+
Minimal.args = {
|
|
102
|
+
title: "Minimal section",
|
|
103
|
+
children: (React.createElement("div", { style: { padding: "20px", textAlign: "center", color: "#728ea7" } }, "Just title and content")),
|
|
104
|
+
};
|
|
105
|
+
export var LongTitle = Template.bind({});
|
|
106
|
+
LongTitle.args = {
|
|
107
|
+
icon: "allaw-icon-document",
|
|
108
|
+
title: "This is a very long title that should be truncated properly",
|
|
109
|
+
number: 99,
|
|
110
|
+
actions: [
|
|
111
|
+
{
|
|
112
|
+
label: "Action",
|
|
113
|
+
onClick: function () { return console.log("Action clicked"); },
|
|
114
|
+
variant: "primary",
|
|
115
|
+
},
|
|
116
|
+
],
|
|
117
|
+
children: (React.createElement("div", { style: { padding: "20px", textAlign: "center", color: "#728ea7" } }, "Long title example")),
|
|
118
|
+
};
|
|
119
|
+
export var MultipleActions = Template.bind({});
|
|
120
|
+
MultipleActions.args = {
|
|
121
|
+
icon: "allaw-icon-document",
|
|
122
|
+
title: "Multiple Actions",
|
|
123
|
+
number: 7,
|
|
124
|
+
actions: [
|
|
125
|
+
{
|
|
126
|
+
label: "Edit",
|
|
127
|
+
onClick: function () { return console.log("Edit clicked"); },
|
|
128
|
+
variant: "secondary",
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
label: "Delete",
|
|
132
|
+
onClick: function () { return console.log("Delete clicked"); },
|
|
133
|
+
variant: "secondary",
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
label: "Save",
|
|
137
|
+
onClick: function () { return console.log("Save clicked"); },
|
|
138
|
+
variant: "primary",
|
|
139
|
+
},
|
|
140
|
+
],
|
|
141
|
+
children: (React.createElement("div", { style: { padding: "20px", textAlign: "center", color: "#728ea7" } }, "Section with multiple action buttons")),
|
|
142
|
+
};
|
|
143
|
+
export var DisabledActions = Template.bind({});
|
|
144
|
+
DisabledActions.args = {
|
|
145
|
+
icon: "allaw-icon-document",
|
|
146
|
+
title: "Disabled Actions",
|
|
147
|
+
number: 2,
|
|
148
|
+
actions: [
|
|
149
|
+
{
|
|
150
|
+
label: "Disabled Action",
|
|
151
|
+
onClick: function () { return console.log("This won't be called"); },
|
|
152
|
+
variant: "secondary",
|
|
153
|
+
disabled: true,
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
label: "Enabled Action",
|
|
157
|
+
onClick: function () { return console.log("This will work"); },
|
|
158
|
+
variant: "primary",
|
|
159
|
+
},
|
|
160
|
+
],
|
|
161
|
+
children: (React.createElement("div", { style: { padding: "20px", textAlign: "center", color: "#728ea7" } }, "One action is disabled")),
|
|
162
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Section";
|