allaw-ui 2.3.3 → 2.3.4
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/atoms/buttons/TertiaryButton.css +45 -20
- package/dist/components/atoms/buttons/TertiaryButton.d.ts +2 -0
- package/dist/components/atoms/buttons/TertiaryButton.js +11 -4
- package/dist/components/atoms/buttons/TertiaryButton.stories.d.ts +19 -0
- package/dist/components/atoms/buttons/TertiaryButton.stories.js +48 -0
- package/package.json +1 -1
|
@@ -8,34 +8,63 @@
|
|
|
8
8
|
border: none;
|
|
9
9
|
background: none;
|
|
10
10
|
cursor: pointer;
|
|
11
|
-
/* transition:
|
|
12
|
-
color 0.15s,
|
|
13
|
-
border-bottom 0.15s; */
|
|
14
11
|
}
|
|
15
12
|
|
|
13
|
+
/* Styles de base */
|
|
16
14
|
.tertiary-button-default {
|
|
17
|
-
border-bottom: 1px solid
|
|
18
|
-
color: var(--primary-black, #171e25);
|
|
15
|
+
border-bottom: 1px solid currentColor;
|
|
19
16
|
}
|
|
20
17
|
|
|
21
|
-
.tertiary-button-default:hover {
|
|
22
|
-
color: var(--primary-black, #171e25);
|
|
18
|
+
.tertiary-button-default:not(.tertiary-button-disabled):hover {
|
|
23
19
|
border-bottom: none;
|
|
24
20
|
}
|
|
25
21
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
/* Couleurs */
|
|
23
|
+
.tertiary-button-bleu-allaw {
|
|
24
|
+
color: var(--bleu-allaw);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.tertiary-button-mid-grey {
|
|
28
|
+
color: var(--mid-grey);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.tertiary-button-dark-grey {
|
|
32
|
+
color: var(--dark-grey);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.tertiary-button-noir {
|
|
36
|
+
color: var(--noir);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.tertiary-button-pure-white {
|
|
40
|
+
color: var(--pure-white);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.tertiary-button-actions-error {
|
|
44
|
+
color: var(--actions-error);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.tertiary-button-actions-valid {
|
|
48
|
+
color: var(--actions-valid);
|
|
30
49
|
}
|
|
31
50
|
|
|
32
|
-
|
|
33
|
-
|
|
51
|
+
/* État désactivé */
|
|
52
|
+
.tertiary-button-disabled {
|
|
53
|
+
cursor: not-allowed;
|
|
54
|
+
opacity: 0.5;
|
|
55
|
+
color: var(--mid-grey) !important;
|
|
56
|
+
border-bottom-color: var(--mid-grey) !important;
|
|
57
|
+
pointer-events: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Variant styles */
|
|
61
|
+
.tertiary-button-variant:not(.tertiary-button-disabled) {
|
|
62
|
+
display: flex;
|
|
63
|
+
justify-content: center;
|
|
34
64
|
}
|
|
35
65
|
|
|
36
|
-
.tertiary-button-variant:
|
|
37
|
-
|
|
38
|
-
color: var(--Primary-Dark-grey, var(--noir, #171e25));
|
|
66
|
+
.tertiary-button-variant:not(.tertiary-button-disabled):hover {
|
|
67
|
+
opacity: 0.8;
|
|
39
68
|
}
|
|
40
69
|
|
|
41
70
|
.tertiary-button-icon {
|
|
@@ -46,7 +75,6 @@
|
|
|
46
75
|
height: 16px;
|
|
47
76
|
padding: 3.333px;
|
|
48
77
|
color: inherit;
|
|
49
|
-
/* transition: color 0.15s; */
|
|
50
78
|
}
|
|
51
79
|
|
|
52
80
|
.tertiary-button-label {
|
|
@@ -56,17 +84,14 @@
|
|
|
56
84
|
line-height: normal;
|
|
57
85
|
letter-spacing: 0em;
|
|
58
86
|
color: inherit;
|
|
59
|
-
/* transition: color 0.15s; */
|
|
60
87
|
}
|
|
61
88
|
|
|
62
89
|
/* Styles spécifiques pour variant=false */
|
|
63
90
|
.tertiary-button-default .tertiary-button-label {
|
|
64
91
|
font-weight: 700;
|
|
65
|
-
color: var(--Primary-Mid-black, var(--primary-black, #171e25));
|
|
66
92
|
}
|
|
67
93
|
|
|
68
94
|
/* Styles spécifiques pour variant=true */
|
|
69
95
|
.tertiary-button-variant .tertiary-button-label {
|
|
70
96
|
font-weight: 400;
|
|
71
|
-
color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
|
|
72
97
|
}
|
|
@@ -7,6 +7,8 @@ export interface TertiaryButtonProps {
|
|
|
7
7
|
variant?: boolean;
|
|
8
8
|
href?: string;
|
|
9
9
|
onClick?: () => void;
|
|
10
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error" | "actions-valid";
|
|
11
|
+
isDisabled?: boolean;
|
|
10
12
|
}
|
|
11
13
|
declare const TertiaryButton: React.FC<TertiaryButtonProps>;
|
|
12
14
|
export default TertiaryButton;
|
|
@@ -3,11 +3,18 @@ import Link from "next/link";
|
|
|
3
3
|
import "./TertiaryButton.css";
|
|
4
4
|
import "../../../styles/global.css";
|
|
5
5
|
var TertiaryButton = function (_a) {
|
|
6
|
-
var startIcon = _a.startIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b, href = _a.href, onClick = _a.onClick;
|
|
7
|
-
var buttonClass = "tertiary-button ".concat(variant ? "tertiary-button-variant" : "tertiary-button-default");
|
|
8
|
-
|
|
6
|
+
var startIcon = _a.startIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b, href = _a.href, onClick = _a.onClick, _c = _a.color, color = _c === void 0 ? "noir" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d;
|
|
7
|
+
var buttonClass = "tertiary-button tertiary-button-".concat(color, " ").concat(variant ? "tertiary-button-variant" : "tertiary-button-default", " ").concat(isDisabled ? "tertiary-button-disabled" : "");
|
|
8
|
+
var handleClick = function (e) {
|
|
9
|
+
if (isDisabled) {
|
|
10
|
+
e.preventDefault();
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
14
|
+
};
|
|
15
|
+
return href ? (React.createElement(Link, { href: href, className: buttonClass, onClick: handleClick },
|
|
9
16
|
startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
|
|
10
|
-
React.createElement("span", { className: "tertiary-button-label" }, label))) : (React.createElement("button", { type: "button", className: buttonClass, onClick:
|
|
17
|
+
React.createElement("span", { className: "tertiary-button-label" }, label))) : (React.createElement("button", { type: "button", className: buttonClass, onClick: handleClick, disabled: isDisabled },
|
|
11
18
|
startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
|
|
12
19
|
React.createElement("span", { className: "tertiary-button-label" }, label)));
|
|
13
20
|
};
|
|
@@ -20,6 +20,21 @@ declare namespace _default {
|
|
|
20
20
|
}
|
|
21
21
|
export { control_1 as control };
|
|
22
22
|
}
|
|
23
|
+
export namespace color {
|
|
24
|
+
export namespace control_2 {
|
|
25
|
+
let type_2: string;
|
|
26
|
+
export { type_2 as type };
|
|
27
|
+
}
|
|
28
|
+
export { control_2 as control };
|
|
29
|
+
export let options: string[];
|
|
30
|
+
}
|
|
31
|
+
export namespace isDisabled {
|
|
32
|
+
export namespace control_3 {
|
|
33
|
+
let type_3: string;
|
|
34
|
+
export { type_3 as type };
|
|
35
|
+
}
|
|
36
|
+
export { control_3 as control };
|
|
37
|
+
}
|
|
23
38
|
export namespace onClick_1 {
|
|
24
39
|
let action: string;
|
|
25
40
|
}
|
|
@@ -38,5 +53,9 @@ declare namespace _default {
|
|
|
38
53
|
}
|
|
39
54
|
export default _default;
|
|
40
55
|
export const Default: any;
|
|
56
|
+
export const BlueButton: any;
|
|
57
|
+
export const ErrorButton: any;
|
|
41
58
|
export const Variant: any;
|
|
59
|
+
export const Disabled: any;
|
|
60
|
+
export const ColoredButton: any;
|
|
42
61
|
import TertiaryButton from "./TertiaryButton";
|
|
@@ -32,6 +32,25 @@ export default {
|
|
|
32
32
|
type: "boolean",
|
|
33
33
|
},
|
|
34
34
|
},
|
|
35
|
+
color: {
|
|
36
|
+
control: {
|
|
37
|
+
type: "select",
|
|
38
|
+
},
|
|
39
|
+
options: [
|
|
40
|
+
"bleu-allaw",
|
|
41
|
+
"mid-grey",
|
|
42
|
+
"dark-grey",
|
|
43
|
+
"noir",
|
|
44
|
+
"pure-white",
|
|
45
|
+
"actions-error",
|
|
46
|
+
"actions-valid",
|
|
47
|
+
],
|
|
48
|
+
},
|
|
49
|
+
isDisabled: {
|
|
50
|
+
control: {
|
|
51
|
+
type: "boolean",
|
|
52
|
+
},
|
|
53
|
+
},
|
|
35
54
|
onClick: { action: "clicked" },
|
|
36
55
|
},
|
|
37
56
|
parameters: {
|
|
@@ -51,10 +70,39 @@ Default.args = {
|
|
|
51
70
|
label: "Annuler le RDV",
|
|
52
71
|
startIcon: "allaw-icon-close",
|
|
53
72
|
variant: false,
|
|
73
|
+
color: "noir",
|
|
74
|
+
isDisabled: false,
|
|
75
|
+
};
|
|
76
|
+
export var BlueButton = Template.bind({});
|
|
77
|
+
BlueButton.args = {
|
|
78
|
+
label: "Bouton bleu",
|
|
79
|
+
color: "bleu-allaw",
|
|
80
|
+
variant: false,
|
|
81
|
+
};
|
|
82
|
+
export var ErrorButton = Template.bind({});
|
|
83
|
+
ErrorButton.args = {
|
|
84
|
+
label: "Supprimer",
|
|
85
|
+
color: "actions-error",
|
|
86
|
+
startIcon: "allaw-icon-trash",
|
|
87
|
+
variant: false,
|
|
54
88
|
};
|
|
55
89
|
export var Variant = Template.bind({});
|
|
56
90
|
Variant.args = {
|
|
57
91
|
label: "Voir plus d'horaire",
|
|
58
92
|
startIcon: "allaw-icon-chevron-down",
|
|
59
93
|
variant: true,
|
|
94
|
+
color: "dark-grey",
|
|
95
|
+
isDisabled: false,
|
|
96
|
+
};
|
|
97
|
+
export var Disabled = Template.bind({});
|
|
98
|
+
Disabled.args = {
|
|
99
|
+
label: "Bouton désactivé",
|
|
100
|
+
variant: false,
|
|
101
|
+
isDisabled: true,
|
|
102
|
+
};
|
|
103
|
+
export var ColoredButton = Template.bind({});
|
|
104
|
+
ColoredButton.args = {
|
|
105
|
+
label: "Bouton coloré",
|
|
106
|
+
color: "bleu-allaw",
|
|
107
|
+
variant: false,
|
|
60
108
|
};
|