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.
@@ -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
- background-color 0.2s,
11
- opacity 0.2s;
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, 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 },
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
- background-color 0.2s,
14
- opacity 0.2s,
15
- color 0.2s;
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 {
@@ -9,7 +9,6 @@ export interface SecondaryButtonProps {
9
9
  mode?: "dark" | "light";
10
10
  onClick?: () => void;
11
11
  fullWidth?: boolean;
12
- className?: string;
13
12
  }
14
13
  declare const SecondaryButton: React.FC<SecondaryButtonProps>;
15
14
  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, 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 },
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: 20px;
6
- height: 20px;
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: 20px;
28
- height: 20px;
29
- font-size: 12px;
30
- padding-left: 0.5px;
31
- padding-bottom: 1px;
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 {
@@ -5,7 +5,6 @@
5
5
  width: 100%;
6
6
  justify-content: space-between;
7
7
  align-items: center;
8
- gap: 1rem;
9
8
  height: 32px;
10
9
  }
11
10
 
@@ -1,7 +1,7 @@
1
1
  .stepper-container {
2
2
  display: flex;
3
3
  width: 559px;
4
- padding: 2rem;
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); }, className: "stepper-secondary-action-button" }))),
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, className: "stepper-confirm-button" })))))));
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,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "0.0.294",
3
+ "version": "0.0.296",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -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,4 +0,0 @@
1
- import React from "react";
2
- import "./TestClic.css";
3
- declare const TestClic: React.FC;
4
- export default TestClic;
@@ -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;