allaw-ui 2.6.4 → 2.6.6

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.
Files changed (8) hide show
  1. package/dist/components/atoms/buttons/ActionButton.d.ts +0 -2
  2. package/dist/components/atoms/buttons/ActionButton.js +5 -6
  3. package/dist/components/atoms/buttons/ActionButton.modules.css +56 -65
  4. package/dist/components/atoms/buttons/index.d.ts +2 -0
  5. package/dist/components/atoms/buttons/index.js +1 -0
  6. package/dist/index.d.ts +2 -0
  7. package/dist/index.js +1 -0
  8. package/package.json +1 -1
package/dist/components/atoms/buttons/ActionButton.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import React, { ButtonHTMLAttributes } from "react";
2
- import "./ActionButton.modules.css";
3
- import "../../../styles/global.css";
4
2
  export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
5
3
  startIcon?: React.ReactNode;
6
4
  endIcon?: React.ReactNode;
package/dist/components/atoms/buttons/ActionButton.js CHANGED
@@ -58,8 +58,7 @@ var __rest = (this && this.__rest) || function (s, e) {
58
58
  return t;
59
59
  };
60
60
  import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "react";
61
- import "./ActionButton.modules.css";
62
- import "../../../styles/global.css";
61
+ import styles from "./ActionButton.modules.css";
63
62
  var ActionButton = forwardRef(function (_a, ref) {
64
63
  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, _d = _a.type, type = _d === void 0 ? "button" : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, variant = _a.variant, _f = _a.size, size = _f === void 0 ? "medium" : _f, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "onClick", "fullWidth", "type", "isLoading", "variant", "size"]);
65
64
  var buttonRef = React.useRef(null);
@@ -108,10 +107,10 @@ var ActionButton = forwardRef(function (_a, ref) {
108
107
  }
109
108
  });
110
109
  }); };
111
- return (React.createElement("button", __assign({ ref: buttonRef, className: "action-button ".concat(disabled ? "action-button-disabled" : "action-button-enabled", " ").concat(fullWidth ? "action-button-full-width" : "", " ").concat(isButtonLoading ? "action-button-loading" : "").concat(variant === "warning" ? "action-button-warning" : "", " ").concat(size === "large" ? "action-button-large" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
112
- startIcon && (React.createElement("span", { className: "action-button-icon ".concat(startIconName) })),
113
- React.createElement("span", { className: "action-button-label" }, label),
114
- isButtonLoading ? (React.createElement("span", { className: "action-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "action-button-icon ".concat(endIconName) }))));
110
+ return (React.createElement("button", __assign({ ref: buttonRef, className: "".concat(styles.actionButton, " ").concat(disabled ? styles.actionButtonDisabled : styles.actionButtonEnabled, " ").concat(fullWidth ? styles.actionButtonFullWidth : "", " ").concat(isButtonLoading ? styles.actionButtonLoading : "", " ").concat(variant === "warning" ? styles.actionButtonWarning : "", " ").concat(size === "large" ? styles.actionButtonLarge : ""), disabled: disabled, onClick: handleClick, type: type }, props),
111
+ startIcon && (React.createElement("span", { className: "".concat(styles.actionButtonIcon, " ").concat(startIconName) })),
112
+ React.createElement("span", { className: styles.actionButtonLabel }, label),
113
+ isButtonLoading ? (React.createElement("span", { className: styles.actionButtonLoadingDots }, loadingDots)) : (endIcon && (React.createElement("span", { className: "".concat(styles.actionButtonIcon, " ").concat(endIconName) })))));
115
114
  });
116
115
  ActionButton.displayName = "ActionButton";
117
116
  export default ActionButton;
package/dist/components/atoms/buttons/ActionButton.modules.css CHANGED
@@ -1,112 +1,103 @@
1
- .action-button {
2
- display: flex;
3
- align-items: center;
1
+ .actionButton {
2
+ display: inline-flex;
3
+ padding: 20px 16px;
4
4
  justify-content: center;
5
- gap: 0.5rem;
6
- width: auto;
7
- height: 42px;
8
- padding: 1rem 1.3rem;
9
- border-radius: 24px;
10
- transition: background-color 0.2s, opacity 0.2s;
11
- border: 0px;
5
+ align-items: center;
6
+ gap: 10px;
7
+ border-radius: 8px;
8
+ font-family: "Open Sans", sans-serif;
9
+ font-size: 14px;
10
+ font-style: normal;
11
+ font-weight: 600;
12
+ line-height: normal;
13
+ text-align: center;
14
+ border: none;
12
15
  cursor: pointer;
13
- text-wrap: nowrap;
16
+ transition: background-color 0.2s, opacity 0.2s;
17
+ height: 26px;
14
18
  }
15
19
 
16
- .action-button-large {
17
- height: 46px;
18
- padding: 1.1rem 1.4rem;
19
- border-radius: 26px;
20
- gap: 0.6rem;
20
+ .actionButtonLarge {
21
+ height: 35px;
22
+ padding: 8px 12px;
23
+ font-size: 15px;
21
24
  }
22
25
 
23
- .action-button-enabled {
24
- background-color: #171e25;
25
- color: white;
26
+ .actionButtonEnabled {
27
+ background: #127aa0;
28
+ color: var(--pure-white, #fff);
26
29
  }
27
30
 
28
- .action-button-enabled:hover {
29
- background-color: #1985e8;
31
+ .actionButtonEnabled:hover {
32
+ background: #1590bb;
30
33
  }
31
34
 
32
- .action-button-enabled:active {
33
- background-color: #1985e8;
34
- opacity: 0.7;
35
+ .actionButtonEnabled:active {
36
+ background: #107194;
37
+ /* opacity: 0.7; */
35
38
  }
36
39
 
37
- .action-button-disabled {
38
- background-color: #b9b9b9;
40
+ .actionButtonDisabled {
41
+ background: var(--tag-white, #eef5fc);
42
+ color: var(--Primary-Dark-grey, #456073);
39
43
  opacity: 0.5;
40
- color: #9b9b9b;
41
44
  cursor: not-allowed;
42
45
  }
43
46
 
44
- .action-button-icon {
47
+ .actionButtonIcon {
45
48
  display: flex;
46
- align-items: center;
49
+ width: 16px;
50
+ height: 16px;
51
+ padding: 3.333px;
47
52
  justify-content: center;
48
- width: 20px;
49
- height: 20px;
50
- color: white;
51
- }
52
-
53
- .action-button-large .action-button-icon {
54
- width: 22px;
55
- height: 22px;
53
+ align-items: center;
54
+ font-size: 11px;
56
55
  }
57
56
 
58
- .action-button-label {
59
- font-family: "Open Sans", sans-serif;
60
- font-weight: 500;
61
- font-size: 14px;
62
- line-height: 22px;
63
- letter-spacing: 0em;
57
+ .actionButtonLarge .actionButtonIcon {
58
+ width: 18px;
59
+ height: 18px;
64
60
  }
65
61
 
66
- .action-button-large .action-button-label {
67
- font-size: 15px;
68
- line-height: 23px;
62
+ .actionButtonLabel {
63
+ white-space: nowrap;
64
+ overflow: hidden;
65
+ text-overflow: ellipsis;
69
66
  }
70
67
 
71
- .action-button-full-width {
68
+ .actionButtonFullWidth {
72
69
  width: 100%;
73
70
  }
74
71
 
75
- .action-button-loading {
76
- animation: pulse-background 1.5s infinite alternate;
72
+ .actionButtonLoading {
73
+ animation: pulseBackground 1.5s infinite alternate;
77
74
  pointer-events: none;
78
75
  }
79
76
 
80
- .action-button-loading-dots {
77
+ .actionButtonLoadingDots {
81
78
  width: 1.25rem;
82
79
  display: inline-block;
83
80
  text-align: left;
84
81
  font-size: 0.9rem;
85
82
  }
86
83
 
87
- .action-button-large .action-button-loading-dots {
88
- width: 1.35rem;
89
- font-size: 1rem;
90
- }
91
-
92
- .action-button-warning {
93
- background: var(--red-tag-dark, #e15151);
94
- color: var(--pure-white, #fff);
95
- border: none;
84
+ .actionButtonWarning {
85
+ border: 1px solid var(--red-tag-dark, #e15151);
86
+ color: var(--red-tag-dark, #e15151);
96
87
  }
97
88
 
98
- .action-button-warning:hover {
99
- background: #c14040;
89
+ .actionButtonWarning:hover {
90
+ background: rgba(225, 81, 81, 0.1);
100
91
  }
101
92
 
102
- @keyframes pulse-background {
93
+ @keyframes pulseBackground {
103
94
  0% {
104
- background-color: #171e25;
95
+ background-color: var(--Primary-Mid-black, #171e25);
105
96
  }
106
97
  50% {
107
- background-color: #171e25;
98
+ background-color: var(--Primary-Mid-black, #171e25);
108
99
  }
109
100
  100% {
110
- background-color: #1985e8;
101
+ background-color: var(--tag-blue, #1985e8);
111
102
  }
112
103
  }
package/dist/components/atoms/buttons/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export { default as SecondaryButton } from "./SecondaryButton";
9
9
  export { default as TabNavigation } from "./TabNavigation";
10
10
  export { default as TertiaryButton } from "./TertiaryButton";
11
11
  export { default as OAuthProviderButton } from "./OAuthProviderButton";
12
+ export { default as ActionButton } from "./ActionButton";
12
13
  export type { FavoriteToggleProps } from "./FavoriteToggle";
13
14
  export type { FilterButtonProps } from "./FilterButton";
14
15
  export type { GhostButtonProps } from "./GhostButton";
@@ -20,3 +21,4 @@ export type { TabNavigationProps } from "./TabNavigation";
20
21
  export type { TertiaryButtonProps } from "./TertiaryButton";
21
22
  export type { OAuthProviderButtonProps } from "./OAuthProviderButton";
22
23
  export type { FilterButtonPrimaryProps } from "./FilterButtonPrimary";
24
+ export type { ActionButtonProps } from "./ActionButton";
package/dist/components/atoms/buttons/index.js CHANGED
@@ -9,3 +9,4 @@ export { default as SecondaryButton } from "./SecondaryButton";
9
9
  export { default as TabNavigation } from "./TabNavigation";
10
10
  export { default as TertiaryButton } from "./TertiaryButton";
11
11
  export { default as OAuthProviderButton } from "./OAuthProviderButton";
12
+ export { default as ActionButton } from "./ActionButton";
package/dist/index.d.ts CHANGED
@@ -9,6 +9,8 @@ export { default as SecondaryButton } from "./components/atoms/buttons/Secondary
9
9
  export { default as TabNavigation } from "./components/atoms/buttons/TabNavigation";
10
10
  export { default as TertiaryButton } from "./components/atoms/buttons/TertiaryButton";
11
11
  export { default as OAuthProviderButton } from "./components/atoms/buttons/OAuthProviderButton";
12
+ export { default as ActionButton } from "./components/atoms/buttons/ActionButton";
13
+ export type { ActionButtonProps } from "./components/atoms/buttons/ActionButton";
12
14
  export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";
13
15
  export { default as Fitler } from "./components/atoms/filter/Filter";
14
16
  export { default as Input } from "./components/atoms/inputs/Input";
package/dist/index.js CHANGED
@@ -11,6 +11,7 @@ export { default as SecondaryButton } from "./components/atoms/buttons/Secondary
11
11
  export { default as TabNavigation } from "./components/atoms/buttons/TabNavigation";
12
12
  export { default as TertiaryButton } from "./components/atoms/buttons/TertiaryButton";
13
13
  export { default as OAuthProviderButton } from "./components/atoms/buttons/OAuthProviderButton";
14
+ export { default as ActionButton } from "./components/atoms/buttons/ActionButton";
14
15
  // Checkboxes
15
16
  export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";
16
17
  // Checkboxes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "2.6.4",
3
+ "version": "2.6.6",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",