allaw-ui 1.0.72 → 1.0.74

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 (7) hide show
  1. package/dist/components/atoms/buttons/TabNavigation.css +24 -21
  2. package/dist/components/atoms/inputs/Input.d.ts +1 -0
  3. package/dist/components/atoms/inputs/Input.js +6 -6
  4. package/dist/components/molecules/caseCardCompact/CaseCardCompact.js +1 -3
  5. package/dist/components/molecules/caseCardCompact/caseCardCompact.css +3 -3
  6. package/dist/components/molecules/selectForm/SelectForm.js +1 -1
  7. package/package.json +1 -1
package/dist/components/atoms/buttons/TabNavigation.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .tab-navigation-d {
2
2
  display: inline-flex;
3
3
  align-items: flex-start;
4
+ gap: 8px;
4
5
  }
5
6
 
6
7
  .tab-navigation-d.small .tab-label-d {
@@ -39,13 +40,8 @@
39
40
  }
40
41
 
41
42
  /* Style round */
42
- .tab-navigation-d.tab-navigation--round {
43
- padding: 4px;
44
- border-radius: 8px;
45
- gap: 8px;
46
- }
47
-
48
- .tab-navigation-d.tab-navigation--round .tab-item-d {
43
+ .tab-navigation-d.tab-navigation--round.small .tab-item-d,
44
+ .tab-navigation-d.tab-navigation--round.normal .tab-item-d {
49
45
  display: flex;
50
46
  padding: 8px 16px;
51
47
  justify-content: center;
@@ -56,31 +52,38 @@
56
52
  border-radius: 6px;
57
53
  }
58
54
 
59
- .tab-navigation-d.tab-navigation--round .tab-item-d.active {
60
- background: var(--dark-grey, #456073);
61
- color: var(--pure-white, #fff);
55
+ /* Style explicite pour les tabs inactifs en mode round */
56
+ .tab-navigation-d.tab-navigation--round.small .tab-item-d.inactive,
57
+ .tab-navigation-d.tab-navigation--round.normal .tab-item-d.inactive {
58
+ background-color: var(--grey-light, #f6fcfe) !important;
59
+ color: var(--noir, #171e25);
62
60
  height: 35px;
63
61
  padding: 12px 24px;
64
62
  border-radius: 18px;
65
- border: 1px solid var(--dark-grey, #456073);
63
+ border: 1px solid var(--grey-venom, #e6edf5);
66
64
  }
67
65
 
68
- .tab-navigation-d.tab-navigation--round .tab-item-d.active:hover {
69
- background: #3c5364;
66
+ /* Style explicite pour les tabs actifs en mode round */
67
+ .tab-navigation-d.tab-navigation--round.small .tab-item-d.active,
68
+ .tab-navigation-d.tab-navigation--round.normal .tab-item-d.active {
69
+ background-color: var(--dark-grey, #456073) !important;
70
70
  color: var(--pure-white, #fff);
71
- }
72
-
73
- .tab-navigation-d.tab-navigation--round .tab-item-d.inactive {
74
- background: var(--grey-light, #f6fcfe);
75
- color: var(--noir, #171e25);
76
71
  height: 35px;
77
72
  padding: 12px 24px;
78
73
  border-radius: 18px;
79
- border: 1px solid var(--grey-venom, #e6edf5);
74
+ border: 1px solid var(--dark-grey, #456073);
75
+ }
76
+
77
+ /* Hover states */
78
+ .tab-navigation-d.tab-navigation--round.small .tab-item-d.inactive:hover,
79
+ .tab-navigation-d.tab-navigation--round.normal .tab-item-d.inactive:hover {
80
+ background-color: var(--grey-venom, #e6edf5) !important;
80
81
  }
81
82
 
82
- .tab-navigation-d.tab-navigation--round .tab-item-d.inactive:hover {
83
- background: var(--grey-venom, #e6edf5);
83
+ .tab-navigation-d.tab-navigation--round.small .tab-item-d.active:hover,
84
+ .tab-navigation-d.tab-navigation--round.normal .tab-item-d.active:hover {
85
+ background-color: #3c5364 !important;
86
+ color: var(--pure-white, #fff);
84
87
  }
85
88
 
86
89
  .tab-label-d {
package/dist/components/atoms/inputs/Input.d.ts CHANGED
@@ -14,6 +14,7 @@ export interface InputProps {
14
14
  onChange?: (value: string) => void;
15
15
  value?: string;
16
16
  error?: string;
17
+ type?: string;
17
18
  color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
18
19
  variant?: "bold" | "semiBold" | "medium";
19
20
  }
package/dist/components/atoms/inputs/Input.js CHANGED
@@ -6,11 +6,11 @@ import { commonRegex } from "../../../utils/regex";
6
6
  import TinyInfo from "../typography/TinyInfo";
7
7
  import Paragraph from "../typography/Paragraph";
8
8
  var Input = forwardRef(function (_a, ref) {
9
- var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.color, color = _d === void 0 ? "noir" : _d, _e = _a.variant, variant = _e === void 0 ? "medium" : _e;
10
- var _f = useState(false), isPasswordVisible = _f[0], setIsPasswordVisible = _f[1];
11
- var _g = useState(propValue || ""), value = _g[0], setValue = _g[1];
12
- var _h = useState(propError || ""), error = _h[0], setError = _h[1];
13
- var _j = useState(false), isTouched = _j[0], setIsTouched = _j[1];
9
+ var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, _d = _a.type, type = _d === void 0 ? "text" : _d, propError = _a.error, _e = _a.color, color = _e === void 0 ? "noir" : _e, _f = _a.variant, variant = _f === void 0 ? "medium" : _f;
10
+ var _g = useState(false), isPasswordVisible = _g[0], setIsPasswordVisible = _g[1];
11
+ var _h = useState(propValue || ""), value = _h[0], setValue = _h[1];
12
+ var _j = useState(propError || ""), error = _j[0], setError = _j[1];
13
+ var _k = useState(false), isTouched = _k[0], setIsTouched = _k[1];
14
14
  var inputRef = useRef(null);
15
15
  useEffect(function () {
16
16
  setValue(propValue || "");
@@ -77,7 +77,7 @@ var Input = forwardRef(function (_a, ref) {
77
77
  "*"))),
78
78
  React.createElement("div", { className: "Input-container" },
79
79
  React.createElement("div", { className: "Input-input ".concat(style === "password" ? "Input-password-input" : "") },
80
- React.createElement("input", { ref: inputRef, type: style === "password" && !isPasswordVisible ? "password" : "text", placeholder: placeholder, className: "Input-placeholder", value: value, onChange: handleChange, onBlur: handleBlur })),
80
+ React.createElement("input", { ref: inputRef, type: style === "password" && !isPasswordVisible ? "password" : type, placeholder: placeholder, className: "Input-placeholder", value: value, onChange: handleChange, onBlur: handleBlur })),
81
81
  renderEndIcon(),
82
82
  error && isTouched && (React.createElement("div", { className: "error-message" },
83
83
  React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
package/dist/components/molecules/caseCardCompact/CaseCardCompact.js CHANGED
@@ -14,8 +14,6 @@ function CaseCardCompact(_a) {
14
14
  React.createElement(Paragraph, { variant: "semiBold", text: folderTitle, size: "default", maxLines: 1, color: "noir" }),
15
15
  React.createElement(FolderStatusTag, { status: folderStatus })),
16
16
  React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: clientName || "" })),
17
- React.createElement("div", { className: "case-card-compact-right ".concat(!category ? "case-card-compact-right--centered" : "") },
18
- category && (React.createElement("span", { className: "case-card-compact-office-tag" }, category)),
19
- React.createElement("i", { className: "allaw-icon-arrow-right case-card-compact-arrow" })))) : (React.createElement(LoadingBox, { boxHeight: "91px", boxRadius: "16px", boxWidth: "100%" }));
17
+ React.createElement("div", { className: "case-card-compact-right ".concat(!category ? "case-card-compact-right--centered" : "") }, category && (React.createElement("span", { className: "case-card-compact-office-tag" }, category))))) : (React.createElement(LoadingBox, { boxHeight: "91px", boxRadius: "16px", boxWidth: "100%" }));
20
18
  }
21
19
  export default CaseCardCompact;
package/dist/components/molecules/caseCardCompact/caseCardCompact.css CHANGED
@@ -10,8 +10,8 @@
10
10
  border: 1px solid var(--Primary-Gris-de-fond, #e6edf5);
11
11
  background: var(--Primary-Blanc, #fff);
12
12
  transition:
13
- border-color 0.2s ease,
14
- border-width 0.2s ease;
13
+ border-color 0.1s ease,
14
+ border-width 0.1s ease;
15
15
  }
16
16
 
17
17
  .case-card-compact:hover {
@@ -57,7 +57,7 @@
57
57
 
58
58
  .case-card-compact--arrow-on-hover .case-card-compact-arrow {
59
59
  opacity: 0;
60
- transition: opacity 0.2s ease;
60
+ transition: opacity 0.1s ease;
61
61
  }
62
62
 
63
63
  .case-card-compact--arrow-on-hover:hover .case-card-compact-arrow {
package/dist/components/molecules/selectForm/SelectForm.js CHANGED
@@ -4,7 +4,7 @@ import "../../../styles/global.css";
4
4
  import Paragraph from "../../atoms/typography/Paragraph";
5
5
  import Select from "../../atoms/selects/Select";
6
6
  var SelectForm = function (_a) {
7
- var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.placeHolder, placeHolder = _b === void 0 ? "Selectionner une valeure" : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, selectedItem = _a.selectedItem, onChange = _a.onChange, _d = _a.variant, variant = _d === void 0 ? "medium" : _d, _e = _a.color, color = _e === void 0 ? "noir" : _e;
7
+ var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.placeHolder, placeHolder = _b === void 0 ? "Sélectionner une valeur" : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, selectedItem = _a.selectedItem, onChange = _a.onChange, _d = _a.variant, variant = _d === void 0 ? "medium" : _d, _e = _a.color, color = _e === void 0 ? "noir" : _e;
8
8
  return (React.createElement("div", { className: "select-form" },
9
9
  React.createElement(Paragraph, { variant: variant, color: color, text: React.createElement(React.Fragment, null,
10
10
  label,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "1.0.72",
3
+ "version": "1.0.74",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",