allaw-ui 0.0.293 → 0.0.294
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/PrimaryButton.css +3 -3
- package/dist/components/atoms/buttons/PrimaryButton.d.ts +1 -0
- package/dist/components/atoms/buttons/PrimaryButton.js +2 -2
- package/dist/components/atoms/buttons/SecondaryButton.css +4 -4
- package/dist/components/atoms/buttons/SecondaryButton.d.ts +1 -0
- package/dist/components/atoms/buttons/SecondaryButton.js +2 -2
- package/dist/components/atoms/checkboxes/Checkbox.css +7 -7
- package/dist/components/atoms/progressBars/ProgressBar.css +1 -0
- package/dist/components/molecules/stepper/Stepper.css +9 -1
- package/dist/components/molecules/stepper/Stepper.js +6 -4
- package/package.json +1 -1
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
gap: 0.5rem;
|
|
6
|
-
width: auto;
|
|
7
6
|
height: 42px;
|
|
8
7
|
padding: 1rem 1.3rem;
|
|
9
8
|
border-radius: 24px;
|
|
10
9
|
transition:
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
background-color 0.2s,
|
|
11
|
+
opacity 0.2s;
|
|
13
12
|
border: 0px;
|
|
13
|
+
cursor: pointer;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.primary-button-enabled {
|
|
@@ -10,6 +10,7 @@ export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme
|
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
onClick?: () => void;
|
|
12
12
|
fullWidth?: boolean;
|
|
13
|
+
className?: string;
|
|
13
14
|
}
|
|
14
15
|
declare const PrimaryButton: React.FC<PrimaryButtonProps>;
|
|
15
16
|
export default PrimaryButton;
|
|
@@ -2,8 +2,8 @@ import React from "react";
|
|
|
2
2
|
import "./PrimaryButton.css";
|
|
3
3
|
import "../../../styles/global.css";
|
|
4
4
|
var PrimaryButton = function (_a) {
|
|
5
|
-
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c;
|
|
6
|
-
return (React.createElement("button", { className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : ""), disabled: disabled, onClick: onClick },
|
|
5
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, className = _a.className;
|
|
6
|
+
return (React.createElement("button", { className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : "", " ").concat(className ? className : ""), disabled: disabled, onClick: onClick },
|
|
7
7
|
startIcon && React.createElement("span", { className: "primary-button-icon ".concat(startIconName) }),
|
|
8
8
|
React.createElement("span", { className: "primary-button-label" }, label),
|
|
9
9
|
endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) })));
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
align-items: center;
|
|
6
6
|
justify-content: center;
|
|
7
7
|
gap: 0.5rem;
|
|
8
|
-
width: auto;
|
|
9
8
|
height: 42px;
|
|
10
9
|
padding: 1rem 1.3rem;
|
|
11
10
|
border-radius: 24px;
|
|
12
11
|
border: 2px solid var(--noir);
|
|
13
12
|
transition:
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
background-color 0.2s,
|
|
14
|
+
opacity 0.2s,
|
|
15
|
+
color 0.2s;
|
|
16
|
+
cursor: pointer;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.secondary-button-enabled {
|
|
@@ -2,8 +2,8 @@ import React from "react";
|
|
|
2
2
|
import "./SecondaryButton.css";
|
|
3
3
|
import "../../../styles/global.css";
|
|
4
4
|
var SecondaryButton = function (_a) {
|
|
5
|
-
var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d;
|
|
6
|
-
return (React.createElement("button", { className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : ""), disabled: disabled, onClick: onClick },
|
|
5
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, className = _a.className;
|
|
6
|
+
return (React.createElement("button", { className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : "", " ").concat(className ? className : ""), disabled: disabled, onClick: onClick },
|
|
7
7
|
startIcon && React.createElement("span", { className: "secondary-button-icon ".concat(startIcon) }),
|
|
8
8
|
React.createElement("span", { className: "secondary-button-label" }, label),
|
|
9
9
|
endIcon && React.createElement("span", { className: "secondary-button-icon ".concat(endIcon) })));
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
justify-content: center;
|
|
4
4
|
align-items: center;
|
|
5
|
-
width:
|
|
6
|
-
height:
|
|
5
|
+
width: 20px;
|
|
6
|
+
height: 20px;
|
|
7
7
|
flex-shrink: 0;
|
|
8
8
|
background: none;
|
|
9
9
|
border: none;
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
display: flex;
|
|
25
25
|
justify-content: center;
|
|
26
26
|
align-items: center;
|
|
27
|
-
width:
|
|
28
|
-
height:
|
|
29
|
-
font-size:
|
|
30
|
-
padding-left:
|
|
31
|
-
padding-bottom:
|
|
27
|
+
width: 20px;
|
|
28
|
+
height: 20px;
|
|
29
|
+
font-size: 12px;
|
|
30
|
+
padding-left: 0.5px;
|
|
31
|
+
padding-bottom: 1px;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.checkbox-black {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.stepper-container {
|
|
2
2
|
display: flex;
|
|
3
3
|
width: 559px;
|
|
4
|
-
padding:
|
|
4
|
+
padding: 2rem;
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
justify-content: center;
|
|
7
7
|
align-items: center;
|
|
@@ -13,6 +13,14 @@
|
|
|
13
13
|
z-index: 1001;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
.stepper-confirm-button {
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.stepper-secondary-action-button{
|
|
21
|
+
width: 100%;
|
|
22
|
+
}
|
|
23
|
+
|
|
16
24
|
.stepper-content {
|
|
17
25
|
margin: 20px 0;
|
|
18
26
|
width: 100%;
|
|
@@ -22,14 +22,16 @@ var Stepper = function (_a) {
|
|
|
22
22
|
setStep(currentStep);
|
|
23
23
|
}, [currentStep]);
|
|
24
24
|
var handleNext = useCallback(function () {
|
|
25
|
-
console.log("Stepper: Validating current step");
|
|
25
|
+
// console.log("Stepper: Validating current step");
|
|
26
26
|
var currentPrimaryButton = primaryButton[step - 1];
|
|
27
27
|
if (currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.onPrimaryButtonClick) {
|
|
28
28
|
currentPrimaryButton.onPrimaryButtonClick(step);
|
|
29
29
|
}
|
|
30
30
|
if (validateStep) {
|
|
31
31
|
var isValid = validateStep(step);
|
|
32
|
-
console.log(
|
|
32
|
+
// console.log(
|
|
33
|
+
// `Stepper: Step ${step} validation result - ${isValid ? "valid" : "invalid"}`
|
|
34
|
+
// );
|
|
33
35
|
if (!isValid) {
|
|
34
36
|
return;
|
|
35
37
|
}
|
|
@@ -56,9 +58,9 @@ var Stepper = function (_a) {
|
|
|
56
58
|
React.createElement("div", { className: "stepper-content" }, children[step - 1]),
|
|
57
59
|
React.createElement("div", { className: "stepper-buttons ".concat(!(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && !(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) ? "no-buttons" : "") },
|
|
58
60
|
(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container" },
|
|
59
|
-
React.createElement(SecondaryButton, { label: currentSecondaryButton.label, startIcon: currentSecondaryButton.icon, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton, step); } }))),
|
|
61
|
+
React.createElement(SecondaryButton, { label: currentSecondaryButton.label, startIcon: currentSecondaryButton.icon, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton, step); }, className: "stepper-secondary-action-button" }))),
|
|
60
62
|
(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container" },
|
|
61
|
-
React.createElement(PrimaryButton, { label: currentPrimaryButton.label, onClick: handleNext })))))));
|
|
63
|
+
React.createElement(PrimaryButton, { label: currentPrimaryButton.label, onClick: handleNext, className: "stepper-confirm-button" })))))));
|
|
62
64
|
return portalContainer
|
|
63
65
|
? ReactDOM.createPortal(stepperContent, portalContainer)
|
|
64
66
|
: null;
|