allaw-ui 0.0.294 → 0.0.296
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 +0 -1
- 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 +0 -1
- 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 +0 -1
- package/dist/components/molecules/stepper/Stepper.css +1 -9
- package/dist/components/molecules/stepper/Stepper.js +2 -2
- package/package.json +1 -1
- package/dist/components/molecules/appointmentSlot/TestClic.css +0 -19
- package/dist/components/molecules/appointmentSlot/TestClic.d.ts +0 -4
- package/dist/components/molecules/appointmentSlot/TestClic.js +0 -28
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
gap: 0.5rem;
|
|
6
|
+
width: auto;
|
|
6
7
|
height: 42px;
|
|
7
8
|
padding: 1rem 1.3rem;
|
|
8
9
|
border-radius: 24px;
|
|
9
10
|
transition:
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
background-color 0.2s,
|
|
12
|
+
opacity 0.2s;
|
|
12
13
|
border: 0px;
|
|
13
|
-
cursor: pointer;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.primary-button-enabled {
|
|
@@ -10,7 +10,6 @@ export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme
|
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
onClick?: () => void;
|
|
12
12
|
fullWidth?: boolean;
|
|
13
|
-
className?: string;
|
|
14
13
|
}
|
|
15
14
|
declare const PrimaryButton: React.FC<PrimaryButtonProps>;
|
|
16
15
|
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" : ""
|
|
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 },
|
|
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;
|
|
8
9
|
height: 42px;
|
|
9
10
|
padding: 1rem 1.3rem;
|
|
10
11
|
border-radius: 24px;
|
|
11
12
|
border: 2px solid var(--noir);
|
|
12
13
|
transition:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
cursor: pointer;
|
|
14
|
+
background-color 0.2s,
|
|
15
|
+
opacity 0.2s,
|
|
16
|
+
color 0.2s;
|
|
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" : ""
|
|
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 },
|
|
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: 24px;
|
|
6
|
+
height: 24px;
|
|
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: 24px;
|
|
28
|
+
height: 24px;
|
|
29
|
+
font-size: 15px;
|
|
30
|
+
padding-left: 1px;
|
|
31
|
+
padding-bottom: 2px;
|
|
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: 48px;
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
justify-content: center;
|
|
7
7
|
align-items: center;
|
|
@@ -13,14 +13,6 @@
|
|
|
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
|
-
|
|
24
16
|
.stepper-content {
|
|
25
17
|
margin: 20px 0;
|
|
26
18
|
width: 100%;
|
|
@@ -58,9 +58,9 @@ var Stepper = function (_a) {
|
|
|
58
58
|
React.createElement("div", { className: "stepper-content" }, children[step - 1]),
|
|
59
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" : "") },
|
|
60
60
|
(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container" },
|
|
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); }
|
|
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); } }))),
|
|
62
62
|
(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container" },
|
|
63
|
-
React.createElement(PrimaryButton, { label: currentPrimaryButton.label, onClick: handleNext
|
|
63
|
+
React.createElement(PrimaryButton, { label: currentPrimaryButton.label, onClick: handleNext })))))));
|
|
64
64
|
return portalContainer
|
|
65
65
|
? ReactDOM.createPortal(stepperContent, portalContainer)
|
|
66
66
|
: null;
|
package/package.json
CHANGED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
@import "../../../styles/colors.css";
|
|
2
|
-
|
|
3
|
-
.test-clic {
|
|
4
|
-
display: flex;
|
|
5
|
-
justify-content: center;
|
|
6
|
-
align-items: center;
|
|
7
|
-
width: 300px;
|
|
8
|
-
height: 300px;
|
|
9
|
-
border: 1px solid var(--venom-grey, #e6edf5);
|
|
10
|
-
background-color: var(--venom-grey, #bad1ec);
|
|
11
|
-
border-radius: 8px;
|
|
12
|
-
cursor: pointer;
|
|
13
|
-
transition: background-color 0.05s ease;
|
|
14
|
-
user-select: none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.test-clic.active {
|
|
18
|
-
background-color: var(--dark-venom-grey, #9ab8d9);
|
|
19
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React, { useState, useCallback } from "react";
|
|
2
|
-
import "./TestClic.css";
|
|
3
|
-
import ActionCircleButton from "../../atoms/buttons/ActionCircleButton";
|
|
4
|
-
var TestClic = function () {
|
|
5
|
-
var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
|
|
6
|
-
var handleApprove = useCallback(function () {
|
|
7
|
-
console.log("Approved");
|
|
8
|
-
}, []);
|
|
9
|
-
var handleReject = useCallback(function () {
|
|
10
|
-
console.log("Rejected");
|
|
11
|
-
}, []);
|
|
12
|
-
var handleMouseDown = function (e) {
|
|
13
|
-
if (!e.target.closest(".dual-button")) {
|
|
14
|
-
setIsActive(true);
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
var handleMouseUp = function () {
|
|
18
|
-
setIsActive(false);
|
|
19
|
-
};
|
|
20
|
-
var handleClick = function (e) {
|
|
21
|
-
if (!e.target.closest(".dual-button")) {
|
|
22
|
-
console.log("card clicked");
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
return (React.createElement("div", { className: "test-clic ".concat(isActive ? "active" : ""), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onClick: handleClick },
|
|
26
|
-
React.createElement(ActionCircleButton, { status: "dual", onApprove: handleApprove, onReject: handleReject })));
|
|
27
|
-
};
|
|
28
|
-
export default TestClic;
|