allaw-ui 1.0.79 → 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 (4) hide show
  1. package/dist/components/atoms/buttons/TabNavigation.css +68 -12
  2. package/dist/components/atoms/buttons/TabNavigation.d.ts +1 -0
  3. package/dist/components/atoms/buttons/TabNavigation.js +4 -4
  4. package/package.json +1 -1
package/dist/components/atoms/buttons/TabNavigation.css CHANGED
@@ -1,18 +1,18 @@
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
- .allaw-tab-navigation .allaw-tab-item {
14
+ /* Style normal (par défaut) */
15
+ .tab-navigation.normal .tab-item {
16
16
  display: flex;
17
17
  padding: 0px 16px 10px 16px;
18
18
  justify-content: center;
@@ -22,33 +22,89 @@
22
22
  position: relative;
23
23
  }
24
24
 
25
- .allaw-tab-navigation .allaw-tab-item.active {
25
+ .tab-navigation.normal .tab-item.active {
26
26
  border-bottom: 3px solid #000;
27
27
  padding-bottom: 10px;
28
28
  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
29
29
  }
30
30
 
31
- .allaw-tab-navigation .allaw-tab-item.inactive {
31
+ .tab-navigation.normal .tab-item.inactive {
32
32
  border-bottom: 3px solid var(--grey-venom, #e6edf5);
33
33
  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
34
34
  }
35
35
 
36
- /* Label styles */
37
- .allaw-tab-label {
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));
39
+ }
40
+
41
+ /* Style round */
42
+ .tab-navigation.tab-navigation--round {
43
+ padding: 4px;
44
+ border-radius: 8px;
45
+ gap: 8px;
46
+ }
47
+
48
+ .tab-navigation.tab-navigation--round .tab-item {
49
+ display: flex;
50
+ padding: 8px 16px;
51
+ justify-content: center;
52
+ align-items: center;
53
+ gap: 8px;
54
+ cursor: pointer;
55
+ position: relative;
56
+ border-radius: 6px;
57
+ }
58
+
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);
66
+ }
67
+
68
+ .tab-navigation.tab-navigation--round .tab-item.active:hover {
69
+ background: #3c5364;
70
+ color: var(--pure-white, #fff);
71
+ }
72
+
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);
80
+ }
81
+
82
+ .tab-navigation.tab-navigation--round .tab-item.inactive:hover {
83
+ background: #e6edf5;
84
+ }
85
+
86
+ .tab-label {
38
87
  font-family: "Open Sans", sans-serif;
88
+ font-size: 14px;
39
89
  font-style: normal;
40
90
  font-weight: 500;
41
91
  line-height: 1;
42
92
  text-align: center;
43
93
  }
44
94
 
45
- /* Notification styles */
46
- .allaw-tab-notification-dot {
95
+ .tab-notification-dot {
47
96
  width: 5px;
48
97
  height: 5px;
49
98
  background-color: #ef1a1a;
50
99
  border-radius: 50%;
51
100
  position: absolute;
52
- top: 7px;
53
101
  right: 10px;
54
102
  }
103
+
104
+ .tab-navigation.normal .tab-notification-dot {
105
+ top: 7px;
106
+ }
107
+
108
+ .tab-navigation.tab-navigation--round .tab-notification-dot {
109
+ top: 15px;
110
+ }
package/dist/components/atoms/buttons/TabNavigation.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface TabNavigationProps {
9
9
  }[];
10
10
  onTabClick: (index: number) => void;
11
11
  size?: "small" | "normal";
12
+ variant?: "normal" | "round";
12
13
  }
13
14
  declare const TabNavigation: React.FC<TabNavigationProps>;
14
15
  export default TabNavigation;
package/dist/components/atoms/buttons/TabNavigation.js CHANGED
@@ -2,9 +2,9 @@ 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;
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
- React.createElement("span", { className: "allaw-tab-label" }, tab.label),
8
- tab.hasNotification && (React.createElement("span", { className: "allaw-tab-notification-dot" })))); })));
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: "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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "1.0.79",
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",