allaw-ui 2.4.6 → 2.4.8
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/inputs/VerificationCodeInput.js +15 -6
- package/dist/components/atoms/typography/TinyInfo.css +8 -0
- package/dist/components/atoms/typography/TinyInfo.d.ts +1 -0
- package/dist/components/atoms/typography/TinyInfo.js +6 -3
- package/dist/components/atoms/typography/TinyInfo.stories.d.ts +6 -0
- package/dist/components/atoms/typography/TinyInfo.stories.js +20 -0
- package/dist/components/molecules/blogCard/BlogCard.module.css +1 -1
- package/package.json +1 -1
|
@@ -30,20 +30,23 @@ var VerificationCodeInput = function (_a) {
|
|
|
30
30
|
}
|
|
31
31
|
}, [testError, onError]);
|
|
32
32
|
var handleInputChange = function (index, value) {
|
|
33
|
+
// console.log(`[VerificationCodeInput] Input ${index} changed to:`, value);
|
|
33
34
|
var _a;
|
|
34
|
-
console.log("[VerificationCodeInput] Input ".concat(index, " changed to:"), value);
|
|
35
35
|
if (!validateInput(value, allowedChars)) {
|
|
36
|
-
console.log("[VerificationCodeInput] Invalid input value");
|
|
36
|
+
// console.log("[VerificationCodeInput] Invalid input value");
|
|
37
37
|
return;
|
|
38
38
|
}
|
|
39
39
|
var newValues = __spreadArray([], values, true);
|
|
40
40
|
newValues[index] = value;
|
|
41
41
|
setValues(newValues);
|
|
42
42
|
var fullValue = newValues.join("");
|
|
43
|
-
console.log("[VerificationCodeInput] New values:", fullValue);
|
|
43
|
+
// console.log("[VerificationCodeInput] New values:", fullValue);
|
|
44
44
|
onChange === null || onChange === void 0 ? void 0 : onChange(fullValue);
|
|
45
45
|
if (index === numInputs - 1 && value !== "") {
|
|
46
|
-
console.log(
|
|
46
|
+
// console.log(
|
|
47
|
+
// "[VerificationCodeInput] Last input filled, validating with:",
|
|
48
|
+
// fullValue
|
|
49
|
+
// );
|
|
47
50
|
if (fullValue.length === numInputs) {
|
|
48
51
|
setError("");
|
|
49
52
|
onError === null || onError === void 0 ? void 0 : onError(null);
|
|
@@ -70,7 +73,10 @@ var VerificationCodeInput = function (_a) {
|
|
|
70
73
|
if (!isStillFocused) {
|
|
71
74
|
if (values.every(function (value) { return value !== ""; })) {
|
|
72
75
|
var fullValue = values.join("");
|
|
73
|
-
console.log(
|
|
76
|
+
// console.log(
|
|
77
|
+
// "[VerificationCodeInput] All inputs filled, length:",
|
|
78
|
+
// fullValue.length
|
|
79
|
+
// );
|
|
74
80
|
setError("");
|
|
75
81
|
onError === null || onError === void 0 ? void 0 : onError(null);
|
|
76
82
|
onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);
|
|
@@ -97,7 +103,10 @@ var VerificationCodeInput = function (_a) {
|
|
|
97
103
|
onChange === null || onChange === void 0 ? void 0 : onChange(newValues_1.join(""));
|
|
98
104
|
if (validChars.length >= numInputs) {
|
|
99
105
|
var fullValue = newValues_1.join("");
|
|
100
|
-
console.log(
|
|
106
|
+
// console.log(
|
|
107
|
+
// "[VerificationCodeInput] All inputs filled, length:",
|
|
108
|
+
// fullValue.length
|
|
109
|
+
// );
|
|
101
110
|
setError("");
|
|
102
111
|
onError === null || onError === void 0 ? void 0 : onError(null);
|
|
103
112
|
onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);
|
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
font-family: "Open Sans", sans-serif;
|
|
5
5
|
font-style: normal;
|
|
6
6
|
line-height: normal;
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: 0.5rem;
|
|
7
10
|
}
|
|
8
11
|
|
|
9
12
|
.tiny-info.bold14 {
|
|
@@ -57,3 +60,8 @@
|
|
|
57
60
|
.tiny-info.color-actions-valid {
|
|
58
61
|
color: var(--actions-valid);
|
|
59
62
|
}
|
|
63
|
+
|
|
64
|
+
.tiny-info-icon {
|
|
65
|
+
font-size: inherit;
|
|
66
|
+
line-height: 1;
|
|
67
|
+
}
|
|
@@ -6,10 +6,13 @@ var toUpperCaseWithAccents = function (str) {
|
|
|
6
6
|
});
|
|
7
7
|
};
|
|
8
8
|
var TinyInfo = function (_a) {
|
|
9
|
-
var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text, href = _a.href,
|
|
9
|
+
var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text, href = _a.href, customClassName = _a.className, _c = _a.uppercase, uppercase = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? "center" : _d, startIcon = _a.startIcon;
|
|
10
10
|
var processedText = uppercase ? toUpperCaseWithAccents(text) : text;
|
|
11
|
-
var content = (React.createElement(
|
|
12
|
-
|
|
11
|
+
var content = (React.createElement(React.Fragment, null,
|
|
12
|
+
startIcon && React.createElement("i", { className: "".concat(startIcon, " tiny-info-icon") }),
|
|
13
|
+
processedText));
|
|
14
|
+
var finalClassName = "tiny-info ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(customClassName || "", " ").concat(align);
|
|
15
|
+
return href ? (React.createElement("a", { href: href, className: "tiny-info-link ".concat(finalClassName) }, content)) : (React.createElement("p", { className: finalClassName }, content));
|
|
13
16
|
};
|
|
14
17
|
export default TinyInfo;
|
|
15
18
|
TinyInfo.displayName = "TinyInfo";
|
|
@@ -30,6 +30,10 @@ declare namespace _default {
|
|
|
30
30
|
let control_4: string;
|
|
31
31
|
export { control_4 as control };
|
|
32
32
|
}
|
|
33
|
+
namespace startIcon {
|
|
34
|
+
let control_5: string;
|
|
35
|
+
export { control_5 as control };
|
|
36
|
+
}
|
|
33
37
|
}
|
|
34
38
|
export namespace parameters {
|
|
35
39
|
namespace backgrounds {
|
|
@@ -49,4 +53,6 @@ export const SemiBold12: any;
|
|
|
49
53
|
export const Medium12: any;
|
|
50
54
|
export const WithLink: any;
|
|
51
55
|
export const Uppercase: any;
|
|
56
|
+
export const WithStartIcon: any;
|
|
57
|
+
export const WithStartIconAndLink: any;
|
|
52
58
|
import TinyInfo from "./TinyInfo";
|
|
@@ -38,6 +38,9 @@ export default {
|
|
|
38
38
|
uppercase: {
|
|
39
39
|
control: "boolean",
|
|
40
40
|
},
|
|
41
|
+
startIcon: {
|
|
42
|
+
control: "text",
|
|
43
|
+
},
|
|
41
44
|
},
|
|
42
45
|
parameters: {
|
|
43
46
|
backgrounds: {
|
|
@@ -95,3 +98,20 @@ Uppercase.args = {
|
|
|
95
98
|
text: "Texte avec des accents: éàèùç",
|
|
96
99
|
uppercase: true,
|
|
97
100
|
};
|
|
101
|
+
export var WithStartIcon = Template.bind({});
|
|
102
|
+
WithStartIcon.args = {
|
|
103
|
+
variant: "medium14",
|
|
104
|
+
color: "noir",
|
|
105
|
+
text: "Texte avec une icône",
|
|
106
|
+
startIcon: "allaw-icon-info",
|
|
107
|
+
uppercase: false,
|
|
108
|
+
};
|
|
109
|
+
export var WithStartIconAndLink = Template.bind({});
|
|
110
|
+
WithStartIconAndLink.args = {
|
|
111
|
+
variant: "medium14",
|
|
112
|
+
color: "bleu-allaw",
|
|
113
|
+
text: "Lien avec une icône",
|
|
114
|
+
startIcon: "allaw-icon-external-link",
|
|
115
|
+
href: "https://example.com",
|
|
116
|
+
uppercase: false,
|
|
117
|
+
};
|