allaw-ui 1.0.78 → 1.0.79

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.
@@ -12,35 +12,7 @@
12
12
  font-size: 18px;
13
13
  }
14
14
 
15
- /* Round variant styles avec préfixe */
16
- .allaw-tab-navigation.tab-navigation--round .allaw-tab-item {
17
- display: flex;
18
- height: 35px;
19
- padding: 12px 24px;
20
- justify-content: center;
21
- align-items: center;
22
- gap: 8px;
23
- cursor: pointer;
24
- position: relative;
25
- border-radius: 18px;
26
- }
27
-
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;
33
- }
34
-
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;
40
- }
41
-
42
- /* Normal variant styles */
43
- .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-item {
15
+ .allaw-tab-navigation .allaw-tab-item {
44
16
  display: flex;
45
17
  padding: 0px 16px 10px 16px;
46
18
  justify-content: center;
@@ -50,33 +22,17 @@
50
22
  position: relative;
51
23
  }
52
24
 
53
- .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-item.active {
25
+ .allaw-tab-navigation .allaw-tab-item.active {
54
26
  border-bottom: 3px solid #000;
55
27
  padding-bottom: 10px;
56
28
  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
57
29
  }
58
30
 
59
- .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-item.inactive {
31
+ .allaw-tab-navigation .allaw-tab-item.inactive {
60
32
  border-bottom: 3px solid var(--grey-venom, #e6edf5);
61
33
  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
62
34
  }
63
35
 
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;
71
- }
72
-
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;
78
- }
79
-
80
36
  /* Label styles */
81
37
  .allaw-tab-label {
82
38
  font-family: "Open Sans", sans-serif;
@@ -93,14 +49,6 @@
93
49
  background-color: #ef1a1a;
94
50
  border-radius: 50%;
95
51
  position: absolute;
96
- }
97
-
98
- .allaw-tab-navigation:not(.tab-navigation--round) .allaw-tab-notification-dot {
99
52
  top: 7px;
100
53
  right: 10px;
101
54
  }
102
-
103
- .allaw-tab-navigation.tab-navigation--round .allaw-tab-notification-dot {
104
- top: 15px;
105
- right: 10px;
106
- }
@@ -9,7 +9,6 @@ export interface TabNavigationProps {
9
9
  }[];
10
10
  onTabClick: (index: number) => void;
11
11
  size?: "small" | "normal";
12
- variant?: "normal" | "round";
13
12
  }
14
13
  declare const TabNavigation: React.FC<TabNavigationProps>;
15
14
  export default TabNavigation;
@@ -2,8 +2,8 @@ import React from "react";
2
2
  import "./TabNavigation.css";
3
3
  import "../../../styles/global.css";
4
4
  var TabNavigation = function (_a) {
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); } },
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 ".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
7
  React.createElement("span", { className: "allaw-tab-label" }, tab.label),
8
8
  tab.hasNotification && (React.createElement("span", { className: "allaw-tab-notification-dot" })))); })));
9
9
  };
@@ -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
+ }
@@ -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;
@@ -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;
@@ -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";
@@ -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";
@@ -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.79",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",