allaw-ui 0.0.339 → 0.0.343
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/checkboxes/Checkbox.css +72 -6
- package/dist/components/atoms/checkboxes/Checkbox.d.ts +3 -1
- package/dist/components/atoms/checkboxes/Checkbox.js +7 -4
- package/dist/components/atoms/typography/Paragraph.css +13 -4
- package/dist/components/atoms/typography/Paragraph.d.ts +3 -2
- package/dist/components/atoms/typography/Paragraph.js +6 -4
- package/dist/components/molecules/checkboxForm/CheckboxForm.css +44 -8
- package/dist/components/molecules/checkboxForm/CheckboxForm.d.ts +6 -2
- package/dist/components/molecules/checkboxForm/CheckboxForm.js +10 -9
- package/package.json +1 -1
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
justify-content: center;
|
|
4
4
|
align-items: center;
|
|
5
|
-
width: 24px;
|
|
6
|
-
height: 24px;
|
|
7
5
|
flex-shrink: 0;
|
|
8
6
|
background: none;
|
|
9
7
|
border: none;
|
|
@@ -11,13 +9,31 @@
|
|
|
11
9
|
}
|
|
12
10
|
|
|
13
11
|
.checkbox-default {
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
width: 24px;
|
|
13
|
+
height: 24px;
|
|
14
|
+
border: 2px solid;
|
|
15
|
+
border-radius: 4px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.checkbox-pressed {
|
|
19
|
-
border: 2px solid
|
|
20
|
-
border-radius:
|
|
19
|
+
border: 2px solid;
|
|
20
|
+
border-radius: 4px;
|
|
21
|
+
width: 24px;
|
|
22
|
+
height: 24px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.checkbox-small {
|
|
26
|
+
width: 20px;
|
|
27
|
+
height: 20px;
|
|
28
|
+
border: 2px solid;
|
|
29
|
+
border-radius: 4px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.checkbox-small-pressed {
|
|
33
|
+
width: 20px;
|
|
34
|
+
height: 20px;
|
|
35
|
+
border: 2px solid;
|
|
36
|
+
border-radius: 4px;
|
|
21
37
|
}
|
|
22
38
|
|
|
23
39
|
.checkbox-pressed .checkbox-icon {
|
|
@@ -31,6 +47,14 @@
|
|
|
31
47
|
padding-bottom: 2px;
|
|
32
48
|
}
|
|
33
49
|
|
|
50
|
+
.checkbox-small.checkbox-pressed .checkbox-icon {
|
|
51
|
+
width: 20px;
|
|
52
|
+
height: 20px;
|
|
53
|
+
font-size: 11px;
|
|
54
|
+
padding-left: 0.5px;
|
|
55
|
+
padding-bottom: 0.5px;
|
|
56
|
+
}
|
|
57
|
+
|
|
34
58
|
.checkbox-black {
|
|
35
59
|
border-color: var(--noir);
|
|
36
60
|
color: var(--noir);
|
|
@@ -48,3 +72,45 @@
|
|
|
48
72
|
.checkbox-icon-white {
|
|
49
73
|
color: var(--pure-white);
|
|
50
74
|
}
|
|
75
|
+
|
|
76
|
+
.checkbox-bleu-allaw,
|
|
77
|
+
.checkbox-icon-bleu-allaw {
|
|
78
|
+
border-color: var(--bleu-allaw);
|
|
79
|
+
color: var(--bleu-allaw);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.checkbox-mid-grey,
|
|
83
|
+
.checkbox-icon-mid-grey {
|
|
84
|
+
border-color: var(--mid-grey);
|
|
85
|
+
color: var(--mid-grey);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.checkbox-dark-grey,
|
|
89
|
+
.checkbox-icon-dark-grey {
|
|
90
|
+
border-color: var(--dark-grey);
|
|
91
|
+
color: var(--dark-grey);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.checkbox-noir,
|
|
95
|
+
.checkbox-icon-noir {
|
|
96
|
+
border-color: var(--noir);
|
|
97
|
+
color: var(--noir);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.checkbox-pure-white,
|
|
101
|
+
.checkbox-icon-pure-white {
|
|
102
|
+
border-color: var(--pure-white);
|
|
103
|
+
color: var(--pure-white);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.checkbox-grey-venom,
|
|
107
|
+
.checkbox-icon-grey-venom {
|
|
108
|
+
border-color: var(--grey-venom);
|
|
109
|
+
color: var(--grey-venom);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.checkbox-venom-grey-dark,
|
|
113
|
+
.checkbox-icon-venom-grey-dark {
|
|
114
|
+
border-color: var(--venom-grey-dark);
|
|
115
|
+
color: var(--venom-grey-dark);
|
|
116
|
+
}
|
|
@@ -2,9 +2,11 @@ import React from "react";
|
|
|
2
2
|
import "./Checkbox.css";
|
|
3
3
|
import "../../../styles/global.css";
|
|
4
4
|
export interface CheckboxProps {
|
|
5
|
+
id?: string;
|
|
5
6
|
checked?: boolean;
|
|
6
7
|
onChange?: (checked: boolean) => void;
|
|
7
|
-
|
|
8
|
+
color?: string;
|
|
9
|
+
size?: "default" | "small";
|
|
8
10
|
}
|
|
9
11
|
declare const Checkbox: React.FC<CheckboxProps>;
|
|
10
12
|
export default Checkbox;
|
|
@@ -1,15 +1,18 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import "./Checkbox.css";
|
|
3
3
|
import "../../../styles/global.css";
|
|
4
4
|
var Checkbox = function (_a) {
|
|
5
|
-
var _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.
|
|
5
|
+
var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.color, color = _c === void 0 ? "noir" : _c, _d = _a.size, size = _d === void 0 ? "default" : _d;
|
|
6
|
+
var _e = useState(checked), isChecked = _e[0], setIsChecked = _e[1];
|
|
6
7
|
var handleClick = function (e) {
|
|
7
8
|
e.preventDefault();
|
|
8
9
|
e.stopPropagation();
|
|
10
|
+
var newChecked = !isChecked;
|
|
11
|
+
setIsChecked(newChecked);
|
|
9
12
|
if (onChange) {
|
|
10
|
-
onChange(
|
|
13
|
+
onChange(newChecked);
|
|
11
14
|
}
|
|
12
15
|
};
|
|
13
|
-
return (React.createElement("button", { className: "checkbox ".concat(
|
|
16
|
+
return (React.createElement("button", { id: id, className: "checkbox ".concat(isChecked ? "checkbox-pressed" : "checkbox-default", " ").concat("checkbox-".concat(color), " ").concat(size === "small" ? "checkbox-small" : ""), onClick: handleClick }, isChecked && (React.createElement("span", { className: "checkbox-icon allaw-icon-close ".concat("checkbox-icon-".concat(color)) }))));
|
|
14
17
|
};
|
|
15
18
|
export default Checkbox;
|
|
@@ -3,23 +3,24 @@
|
|
|
3
3
|
.paragraph {
|
|
4
4
|
font-family: "Open Sans", sans-serif;
|
|
5
5
|
font-style: normal;
|
|
6
|
-
font-size:
|
|
6
|
+
font-size: 1rem;
|
|
7
7
|
line-height: normal;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
.paragraph-small {
|
|
11
|
+
font-size: 0.875rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
10
14
|
.paragraph.bold {
|
|
11
15
|
font-weight: 700;
|
|
12
|
-
color: #f3f3f3;
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
.paragraph.semiBold {
|
|
16
19
|
font-weight: 600;
|
|
17
|
-
color: #f3f3f3;
|
|
18
20
|
}
|
|
19
21
|
|
|
20
22
|
.paragraph.medium {
|
|
21
23
|
font-weight: 400;
|
|
22
|
-
color: var(--Primary-Blanc, #fff);
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.paragraph.color-bleu-allaw {
|
|
@@ -41,3 +42,11 @@
|
|
|
41
42
|
.paragraph.color-pure-white {
|
|
42
43
|
color: var(--pure-white);
|
|
43
44
|
}
|
|
45
|
+
|
|
46
|
+
.paragraph.color-grey-venom {
|
|
47
|
+
color: var(--grey-venom);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.paragraph.color-venom-grey-dark {
|
|
51
|
+
color: var(--venom-grey-dark);
|
|
52
|
+
}
|
|
@@ -2,10 +2,11 @@ import React from "react";
|
|
|
2
2
|
import "./Paragraph.css";
|
|
3
3
|
export interface ParagraphProps {
|
|
4
4
|
variant: "bold" | "semiBold" | "medium";
|
|
5
|
-
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
|
|
6
|
-
text:
|
|
5
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
|
|
6
|
+
text: React.ReactNode;
|
|
7
7
|
maxLines?: number;
|
|
8
8
|
maxChars?: number;
|
|
9
|
+
size?: "default" | "small";
|
|
9
10
|
}
|
|
10
11
|
declare const Paragraph: React.FC<ParagraphProps>;
|
|
11
12
|
export default Paragraph;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import "./Paragraph.css";
|
|
3
3
|
var Paragraph = function (_a) {
|
|
4
|
-
var variant = _a.variant, color = _a.color, text = _a.text, maxLines = _a.maxLines, maxChars = _a.maxChars;
|
|
4
|
+
var variant = _a.variant, color = _a.color, text = _a.text, maxLines = _a.maxLines, maxChars = _a.maxChars, _b = _a.size, size = _b === void 0 ? "default" : _b;
|
|
5
5
|
// Fonction pour tronquer le texte en fonction du nombre maximum de caractères
|
|
6
6
|
var truncateText = function (text, maxChars) {
|
|
7
7
|
if (text.length <= maxChars)
|
|
@@ -9,14 +9,16 @@ var Paragraph = function (_a) {
|
|
|
9
9
|
return text.slice(0, maxChars) + "...";
|
|
10
10
|
};
|
|
11
11
|
// Tronquer le texte si maxChars est défini
|
|
12
|
-
var truncatedText = maxChars
|
|
13
|
-
|
|
12
|
+
var truncatedText = maxChars
|
|
13
|
+
? truncateText(text, maxChars)
|
|
14
|
+
: text;
|
|
15
|
+
return (React.createElement("p", { className: "paragraph ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(size === "small" ? "paragraph-small" : ""), style: maxLines
|
|
14
16
|
? {
|
|
15
17
|
WebkitLineClamp: maxLines,
|
|
16
18
|
display: "-webkit-box",
|
|
17
19
|
WebkitBoxOrient: "vertical",
|
|
18
20
|
overflow: "hidden",
|
|
19
21
|
}
|
|
20
|
-
: {},
|
|
22
|
+
: {} }, truncatedText));
|
|
21
23
|
};
|
|
22
24
|
export default Paragraph;
|
|
@@ -1,24 +1,60 @@
|
|
|
1
1
|
.checkbox-form {
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
|
-
gap:
|
|
4
|
+
gap: 0.75rem;
|
|
5
5
|
cursor: pointer;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.checkbox-form-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.checkbox-form-white {
|
|
13
|
-
color: var(--pure-white);
|
|
8
|
+
.checkbox-form-small {
|
|
9
|
+
gap: 0.5rem;
|
|
14
10
|
}
|
|
15
11
|
|
|
16
12
|
.checkbox-form-label-container {
|
|
17
13
|
display: flex;
|
|
18
14
|
align-items: center;
|
|
19
|
-
cursor: pointer;
|
|
20
15
|
}
|
|
21
16
|
|
|
22
17
|
.checkbox-form-required {
|
|
23
18
|
color: var(--dark-grey, #456073);
|
|
24
19
|
}
|
|
20
|
+
|
|
21
|
+
.checkbox-form-link {
|
|
22
|
+
color: var(--allaw-blue, #25beeb);
|
|
23
|
+
text-decoration: underline;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
margin-left: 0.25rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.checkbox-form-bleu-allaw .checkbox {
|
|
29
|
+
border-color: var(--bleu-allaw);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.checkbox-form-mid-grey .checkbox {
|
|
33
|
+
border-color: var(--mid-grey);
|
|
34
|
+
color: var(--mid-grey);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.checkbox-form-dark-grey .checkbox {
|
|
38
|
+
border-color: var(--dark-grey);
|
|
39
|
+
color: var(--dark-grey);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.checkbox-form-noir .checkbox {
|
|
43
|
+
border-color: var(--noir);
|
|
44
|
+
color: var(--noir);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.checkbox-form-pure-white .checkbox {
|
|
48
|
+
border-color: var(--pure-white);
|
|
49
|
+
color: var(--pure-white);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.checkbox-form-grey-venom .checkbox {
|
|
53
|
+
border-color: var(--grey-venom);
|
|
54
|
+
color: var(--grey-venom);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.checkbox-form-venom-grey-dark .checkbox {
|
|
58
|
+
border-color: var(--venom-grey-dark);
|
|
59
|
+
color: var(--venom-grey-dark);
|
|
60
|
+
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { ParagraphProps } from "../../atoms/typography/Paragraph";
|
|
2
3
|
import "./CheckboxForm.css";
|
|
3
4
|
export interface CheckboxFormProps {
|
|
4
5
|
checked?: boolean;
|
|
5
6
|
onChange?: (checked: boolean) => void;
|
|
6
|
-
|
|
7
|
-
label?:
|
|
7
|
+
color?: ParagraphProps["color"] | "grey-venom" | "venom-grey-dark";
|
|
8
|
+
label?: React.ReactNode;
|
|
8
9
|
isRequired?: boolean;
|
|
10
|
+
linkText?: string;
|
|
11
|
+
linkUrl?: string;
|
|
12
|
+
size?: "default" | "small";
|
|
9
13
|
}
|
|
10
14
|
declare const CheckboxForm: React.FC<CheckboxFormProps>;
|
|
11
15
|
export default CheckboxForm;
|
|
@@ -3,18 +3,19 @@ import Checkbox from "../../atoms/checkboxes/Checkbox";
|
|
|
3
3
|
import Paragraph from "../../atoms/typography/Paragraph";
|
|
4
4
|
import "./CheckboxForm.css";
|
|
5
5
|
var CheckboxForm = function (_a) {
|
|
6
|
-
var _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
e.stopPropagation();
|
|
6
|
+
var _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.color, color = _c === void 0 ? "noir" : _c, label = _a.label, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, linkText = _a.linkText, linkUrl = _a.linkUrl, _e = _a.size, size = _e === void 0 ? "default" : _e;
|
|
7
|
+
var checkboxId = "checkbox-".concat(Math.random().toString(36).substr(2, 9));
|
|
8
|
+
var handleCheckboxChange = function (checked) {
|
|
10
9
|
if (onChange) {
|
|
11
|
-
onChange(
|
|
10
|
+
onChange(checked);
|
|
12
11
|
}
|
|
13
12
|
};
|
|
14
|
-
return (React.createElement("div", { className: "checkbox-form ".concat(
|
|
15
|
-
React.createElement(Checkbox, { checked: checked, onChange:
|
|
16
|
-
label && (React.createElement("
|
|
17
|
-
React.createElement(Paragraph, { variant: "semiBold", color:
|
|
13
|
+
return (React.createElement("div", { className: "checkbox-form checkbox-form-".concat(color, " ").concat(size === "small" ? "checkbox-form-small" : "") },
|
|
14
|
+
React.createElement(Checkbox, { id: checkboxId, checked: checked, onChange: handleCheckboxChange, color: color, size: size }),
|
|
15
|
+
label && (React.createElement("label", { htmlFor: checkboxId, className: "checkbox-form-label-container" },
|
|
16
|
+
React.createElement(Paragraph, { variant: "semiBold", color: color, text: React.createElement(React.Fragment, null,
|
|
17
|
+
React.createElement("span", null, label),
|
|
18
|
+
linkText && linkUrl && (React.createElement("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", className: "checkbox-form-link", onClick: function (e) { return e.stopPropagation(); } }, linkText))), size: size }),
|
|
18
19
|
isRequired && (React.createElement("span", { className: "checkbox-form-required" },
|
|
19
20
|
"\u00A0",
|
|
20
21
|
"*"))))));
|