allaw-ui 1.0.78 → 1.0.80

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 (11) hide show
  1. package/dist/components/atoms/buttons/TabNavigation.css +53 -49
  2. package/dist/components/atoms/buttons/TabNavigation.js +3 -3
  3. package/dist/components/atoms/buttons/TabNavigationRound.css +66 -0
  4. package/dist/components/atoms/buttons/TabNavigationRound.d.ts +14 -0
  5. package/dist/components/atoms/buttons/TabNavigationRound.js +10 -0
  6. package/dist/components/atoms/buttons/index.d.ts +2 -0
  7. package/dist/components/atoms/buttons/index.js +1 -0
  8. package/dist/components/molecules/caseLinkCard/CaseLinkCard.css +6 -0
  9. package/dist/index.d.ts +1 -0
  10. package/dist/index.js +1 -0
  11. package/package.json +1 -1
package/dist/components/atoms/buttons/TabNavigation.css CHANGED
@@ -1,106 +1,110 @@
1
- .allaw-tab-navigation {
1
+ .tab-navigation {
2
2
  display: inline-flex;
3
3
  align-items: flex-start;
4
- gap: 8px;
5
4
  }
6
5
 
7
- .allaw-tab-navigation.small .allaw-tab-label {
6
+ .tab-navigation.small .tab-label {
8
7
  font-size: 14px;
9
8
  }
10
9
 
11
- .allaw-tab-navigation.normal .allaw-tab-label {
10
+ .tab-navigation.normal .tab-label {
12
11
  font-size: 18px;
13
12
  }
14
13
 
15
- /* Round variant styles avec préfixe */
16
- .allaw-tab-navigation.tab-navigation--round .allaw-tab-item {
14
+ /* Style normal (par défaut) */
15
+ .tab-navigation.normal .tab-item {
17
16
  display: flex;
18
- height: 35px;
19
- padding: 12px 24px;
17
+ padding: 0px 16px 10px 16px;
20
18
  justify-content: center;
21
19
  align-items: center;
22
20
  gap: 8px;
23
21
  cursor: pointer;
24
22
  position: relative;
25
- border-radius: 18px;
26
23
  }
27
24
 
28
- /* États inactifs avec préfixe */
29
- .allaw-tab-navigation.tab-navigation--round .allaw-tab-item.inactive {
30
- background-color: var(--grey-light, #f6fcfe) !important;
31
- color: var(--noir, #171e25) !important;
32
- border: 1px solid var(--grey-venom, #e6edf5) !important;
25
+ .tab-navigation.normal .tab-item.active {
26
+ border-bottom: 3px solid #000;
27
+ padding-bottom: 10px;
28
+ color: var(--Primary-Mid-black, var(--primary-black, #171e25));
29
+ }
30
+
31
+ .tab-navigation.normal .tab-item.inactive {
32
+ border-bottom: 3px solid var(--grey-venom, #e6edf5);
33
+ color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
34
+ }
35
+
36
+ .tab-navigation.normal .tab-item.inactive:hover {
37
+ border-bottom: 3px solid var(--venom-grey-dark, #d1dce8);
38
+ color: var(--Tags-Mid-grey, var(--dark-grey, #456073));
33
39
  }
34
40
 
35
- /* États actifs avec préfixe */
36
- .allaw-tab-navigation.tab-navigation--round .allaw-tab-item.active {
37
- background-color: var(--dark-grey, #456073) !important;
38
- color: var(--pure-white, #fff) !important;
39
- border: 1px solid var(--dark-grey, #456073) !important;
41
+ /* Style round */
42
+ .tab-navigation.tab-navigation--round {
43
+ padding: 4px;
44
+ border-radius: 8px;
45
+ gap: 8px;
40
46
  }
41
47
 
42
- /* Normal variant styles */
43
- .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-item {
48
+ .tab-navigation.tab-navigation--round .tab-item {
44
49
  display: flex;
45
- padding: 0px 16px 10px 16px;
50
+ padding: 8px 16px;
46
51
  justify-content: center;
47
52
  align-items: center;
48
53
  gap: 8px;
49
54
  cursor: pointer;
50
55
  position: relative;
56
+ border-radius: 6px;
51
57
  }
52
58
 
53
- .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-item.active {
54
- border-bottom: 3px solid #000;
55
- padding-bottom: 10px;
56
- color: var(--Primary-Mid-black, var(--primary-black, #171e25));
59
+ .tab-navigation.tab-navigation--round .tab-item.active {
60
+ background: var(--dark-grey, #456073);
61
+ color: var(--pure-white, #fff);
62
+ height: 35px;
63
+ padding: 12px 24px;
64
+ border-radius: 18px;
65
+ border: 1px solid var(--dark-grey, #456073);
57
66
  }
58
67
 
59
- .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-item.inactive {
60
- border-bottom: 3px solid var(--grey-venom, #e6edf5);
61
- color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
68
+ .tab-navigation.tab-navigation--round .tab-item.active:hover {
69
+ background: #3c5364;
70
+ color: var(--pure-white, #fff);
62
71
  }
63
72
 
64
- /* Hover states - Augmentation de la spécificité */
65
- .allaw-tab-navigation.tab-navigation--round .allaw-tab-item.inactive:hover,
66
- .allaw-tab-navigation.small.tab-navigation--round
67
- .allaw-tab-item.inactive:hover,
68
- .allaw-tab-navigation.normal.tab-navigation--round
69
- .allaw-tab-item.inactive:hover {
70
- background-color: var(--grey-venom, #e6edf5) !important;
73
+ .tab-navigation.tab-navigation--round .tab-item.inactive {
74
+ background: #f6fcfe;
75
+ color: var(--noir, #171e25);
76
+ height: 35px;
77
+ padding: 12px 24px;
78
+ border-radius: 18px;
79
+ border: 1px solid var(--grey-venom, #e6edf5);
71
80
  }
72
81
 
73
- .allaw-tab-navigation.tab-navigation--round .allaw-tab-item.active:hover,
74
- .allaw-tab-navigation.small.tab-navigation--round .allaw-tab-item.active:hover,
75
- .allaw-tab-navigation.normal.tab-navigation--round
76
- .allaw-tab-item.active:hover {
77
- background-color: #3c5364 !important;
82
+ .tab-navigation.tab-navigation--round .tab-item.inactive:hover {
83
+ background: #e6edf5;
78
84
  }
79
85
 
80
- /* Label styles */
81
- .allaw-tab-label {
86
+ .tab-label {
82
87
  font-family: "Open Sans", sans-serif;
88
+ font-size: 14px;
83
89
  font-style: normal;
84
90
  font-weight: 500;
85
91
  line-height: 1;
86
92
  text-align: center;
87
93
  }
88
94
 
89
- /* Notification styles */
90
- .allaw-tab-notification-dot {
95
+ .tab-notification-dot {
91
96
  width: 5px;
92
97
  height: 5px;
93
98
  background-color: #ef1a1a;
94
99
  border-radius: 50%;
95
100
  position: absolute;
101
+ right: 10px;
96
102
  }
97
103
 
98
- .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-notification-dot {
104
+ .tab-navigation.normal .tab-notification-dot {
99
105
  top: 7px;
100
- right: 10px;
101
106
  }
102
107
 
103
- .allaw-tab-navigation.tab-navigation--round .allaw-tab-notification-dot {
108
+ .tab-navigation.tab-navigation--round .tab-notification-dot {
104
109
  top: 15px;
105
- right: 10px;
106
110
  }
package/dist/components/atoms/buttons/TabNavigation.js CHANGED
@@ -3,8 +3,8 @@ import "./TabNavigation.css";
3
3
  import "../../../styles/global.css";
4
4
  var TabNavigation = function (_a) {
5
5
  var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b, _c = _a.variant, variant = _c === void 0 ? "normal" : _c;
6
- return (React.createElement("div", { className: "allaw-tab-navigation ".concat(size, " ").concat(variant === "round" ? "tab-navigation--round" : "") }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "allaw-tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
7
- React.createElement("span", { className: "allaw-tab-label" }, tab.label),
8
- tab.hasNotification && (React.createElement("span", { className: "allaw-tab-notification-dot" })))); })));
6
+ return (React.createElement("div", { className: "tab-navigation ".concat(size, " ").concat(variant === "round" ? "tab-navigation--round" : "") }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
7
+ React.createElement("span", { className: "tab-label" }, tab.label),
8
+ tab.hasNotification && React.createElement("span", { className: "tab-notification-dot" }))); })));
9
9
  };
10
10
  export default TabNavigation;
package/dist/components/atoms/buttons/TabNavigationRound.css ADDED
@@ -0,0 +1,66 @@
1
+ .allaw-tab-navigation-round {
2
+ display: inline-flex;
3
+ align-items: flex-start;
4
+ gap: 8px;
5
+ }
6
+
7
+ .allaw-tab-navigation-round.small .allaw-tab-label {
8
+ font-size: 14px;
9
+ }
10
+
11
+ .allaw-tab-navigation-round.normal .allaw-tab-label {
12
+ font-size: 18px;
13
+ }
14
+
15
+ .allaw-tab-navigation-round .allaw-tab-item {
16
+ display: flex;
17
+ height: 35px;
18
+ padding: 12px 24px;
19
+ justify-content: center;
20
+ align-items: center;
21
+ gap: 8px;
22
+ cursor: pointer;
23
+ position: relative;
24
+ border-radius: 18px;
25
+ }
26
+
27
+ .allaw-tab-navigation-round .allaw-tab-item.inactive {
28
+ background-color: var(--grey-light, #f6fcfe);
29
+ color: var(--noir, #171e25);
30
+ border: 1px solid var(--grey-venom, #e6edf5);
31
+ }
32
+
33
+ .allaw-tab-navigation-round .allaw-tab-item.active {
34
+ background-color: var(--dark-grey, #456073);
35
+ color: var(--pure-white, #fff);
36
+ border: 1px solid var(--dark-grey, #456073);
37
+ }
38
+
39
+ /* Hover states */
40
+ .allaw-tab-navigation-round .allaw-tab-item.inactive:hover {
41
+ background-color: var(--grey-venom, #e6edf5);
42
+ }
43
+
44
+ .allaw-tab-navigation-round .allaw-tab-item.active:hover {
45
+ background-color: #3c5364;
46
+ }
47
+
48
+ /* Label styles */
49
+ .allaw-tab-label {
50
+ font-family: "Open Sans", sans-serif;
51
+ font-style: normal;
52
+ font-weight: 500;
53
+ line-height: 1;
54
+ text-align: center;
55
+ }
56
+
57
+ /* Notification styles */
58
+ .allaw-tab-notification-dot {
59
+ width: 5px;
60
+ height: 5px;
61
+ background-color: #ef1a1a;
62
+ border-radius: 50%;
63
+ position: absolute;
64
+ top: 15px;
65
+ right: 10px;
66
+ }
package/dist/components/atoms/buttons/TabNavigationRound.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import "./TabNavigationRound.css";
3
+ import "../../../styles/global.css";
4
+ export interface TabNavigationRoundProps {
5
+ tabs: {
6
+ label: string;
7
+ isActive: boolean;
8
+ hasNotification: boolean;
9
+ }[];
10
+ onTabClick: (index: number) => void;
11
+ size?: "small" | "normal";
12
+ }
13
+ declare const TabNavigationRound: React.FC<TabNavigationRoundProps>;
14
+ export default TabNavigationRound;
package/dist/components/atoms/buttons/TabNavigationRound.js ADDED
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ import "./TabNavigationRound.css";
3
+ import "../../../styles/global.css";
4
+ var TabNavigationRound = function (_a) {
5
+ var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b;
6
+ return (React.createElement("div", { className: "allaw-tab-navigation-round ".concat(size) }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "allaw-tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
7
+ React.createElement("span", { className: "allaw-tab-label" }, tab.label),
8
+ tab.hasNotification && (React.createElement("span", { className: "allaw-tab-notification-dot" })))); })));
9
+ };
10
+ export default TabNavigationRound;
package/dist/components/atoms/buttons/index.d.ts CHANGED
@@ -7,6 +7,7 @@ export { default as PendingDocuments } from "./PendingDocuments";
7
7
  export { default as PrimaryButton } from "./PrimaryButton";
8
8
  export { default as SecondaryButton } from "./SecondaryButton";
9
9
  export { default as TabNavigation } from "./TabNavigation";
10
+ export { default as TabNavigationRound } from "./TabNavigationRound";
10
11
  export { default as TertiaryButton } from "./TertiaryButton";
11
12
  export { default as OAuthProviderButton } from "./OAuthProviderButton";
12
13
  export type { FavoriteToggleProps } from "./FavoriteToggle";
@@ -17,6 +18,7 @@ export type { PendingDocumentsProps } from "./PendingDocuments";
17
18
  export type { PrimaryButtonProps } from "./PrimaryButton";
18
19
  export type { SecondaryButtonProps } from "./SecondaryButton";
19
20
  export type { TabNavigationProps } from "./TabNavigation";
21
+ export type { TabNavigationRoundProps } from "./TabNavigationRound";
20
22
  export type { TertiaryButtonProps } from "./TertiaryButton";
21
23
  export type { OAuthProviderButtonProps } from "./OAuthProviderButton";
22
24
  export type { FilterButtonPrimaryProps } from "./FilterButtonPrimary";
package/dist/components/atoms/buttons/index.js CHANGED
@@ -7,5 +7,6 @@ export { default as PendingDocuments } from "./PendingDocuments";
7
7
  export { default as PrimaryButton } from "./PrimaryButton";
8
8
  export { default as SecondaryButton } from "./SecondaryButton";
9
9
  export { default as TabNavigation } from "./TabNavigation";
10
+ export { default as TabNavigationRound } from "./TabNavigationRound";
10
11
  export { default as TertiaryButton } from "./TertiaryButton";
11
12
  export { default as OAuthProviderButton } from "./OAuthProviderButton";
package/dist/components/molecules/caseLinkCard/CaseLinkCard.css CHANGED
@@ -11,11 +11,16 @@
11
11
  padding: 16px;
12
12
  align-items: center;
13
13
  gap: 16px;
14
+
14
15
  transition:
15
16
  border-color 0.2s ease,
16
17
  border-width 0.2s ease;
17
18
  }
18
19
 
20
+ .case-card-link:hover {
21
+ background-color: var(--active-grey, #e9eef5);
22
+ }
23
+
19
24
  .case-card-link-right {
20
25
  display: flex;
21
26
  width: 100%;
@@ -23,6 +28,7 @@
23
28
  justify-content: flex-end;
24
29
  align-items: flex-start;
25
30
  flex: 1 0 0;
31
+ cursor: pointer;
26
32
  }
27
33
 
28
34
  .case-card-no-folder-wrapper {
package/dist/index.d.ts CHANGED
@@ -7,6 +7,7 @@ export { default as PendingDocuments } from "./components/atoms/buttons/PendingD
7
7
  export { default as PrimaryButton } from "./components/atoms/buttons/PrimaryButton";
8
8
  export { default as SecondaryButton } from "./components/atoms/buttons/SecondaryButton";
9
9
  export { default as TabNavigation } from "./components/atoms/buttons/TabNavigation";
10
+ export { default as TabNavigationRound } from "./components/atoms/buttons/TabNavigationRound";
10
11
  export { default as TertiaryButton } from "./components/atoms/buttons/TertiaryButton";
11
12
  export { default as OAuthProviderButton } from "./components/atoms/buttons/OAuthProviderButton";
12
13
  export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";
package/dist/index.js CHANGED
@@ -9,6 +9,7 @@ export { default as PendingDocuments } from "./components/atoms/buttons/PendingD
9
9
  export { default as PrimaryButton } from "./components/atoms/buttons/PrimaryButton";
10
10
  export { default as SecondaryButton } from "./components/atoms/buttons/SecondaryButton";
11
11
  export { default as TabNavigation } from "./components/atoms/buttons/TabNavigation";
12
+ export { default as TabNavigationRound } from "./components/atoms/buttons/TabNavigationRound";
12
13
  export { default as TertiaryButton } from "./components/atoms/buttons/TertiaryButton";
13
14
  export { default as OAuthProviderButton } from "./components/atoms/buttons/OAuthProviderButton";
14
15
  // Checkboxes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "1.0.78",
3
+ "version": "1.0.80",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",