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.
@@ -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
- background-color 0.2s,
12
- opacity 0.2s;
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
- background-color 0.2s,
15
- opacity 0.2s,
16
- color 0.2s;
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 {
@@ -9,6 +9,7 @@ export interface SecondaryButtonProps {
9
9
  mode?: "dark" | "light";
10
10
  onClick?: () => void;
11
11
  fullWidth?: boolean;
12
+ className?: string;
12
13
  }
13
14
  declare const SecondaryButton: React.FC<SecondaryButtonProps>;
14
15
  export default SecondaryButton;
@@ -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: 24px;
6
- height: 24px;
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: 24px;
28
- height: 24px;
29
- font-size: 15px;
30
- padding-left: 1px;
31
- padding-bottom: 2px;
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 {
@@ -5,6 +5,7 @@
5
5
  width: 100%;
6
6
  justify-content: space-between;
7
7
  align-items: center;
8
+ gap: 1rem;
8
9
  height: 32px;
9
10
  }
10
11
 
@@ -1,7 +1,7 @@
1
1
  .stepper-container {
2
2
  display: flex;
3
3
  width: 559px;
4
- padding: 48px;
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("Stepper: Step ".concat(step, " validation result - ").concat(isValid ? "valid" : "invalid"));
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "0.0.293",
3
+ "version": "0.0.294",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",