allaw-ui 1.0.71 → 1.0.73

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 (6) hide show
  1. package/dist/components/atoms/buttons/TabNavigation.css +24 -21
  2. package/dist/components/molecules/caseCardCompact/CaseCardCompact.d.ts +1 -0
  3. package/dist/components/molecules/caseCardCompact/CaseCardCompact.js +5 -5
  4. package/dist/components/molecules/caseCardCompact/{caseCardCompact.module.css → caseCardCompact.css} +14 -14
  5. package/dist/components/molecules/selectForm/SelectForm.js +1 -1
  6. package/package.json +1 -2
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/molecules/caseCardCompact/CaseCardCompact.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import { FolderStatus } from "../../atoms/tags/FolderStatusTag";
3
+ import "./caseCardCompact.css";
3
4
  import "../../../styles/icons.css";
4
5
  export type CaseCardCompactProps = {
5
6
  folderTitle: string;
package/dist/components/molecules/caseCardCompact/CaseCardCompact.js CHANGED
@@ -1,19 +1,19 @@
1
1
  import React from "react";
2
2
  import { Paragraph, SmallTitle } from "../../atoms/typography";
3
3
  import FolderStatusTag from "../../atoms/tags/FolderStatusTag";
4
- import styles from "./caseCardCompact.module.css";
4
+ import "./caseCardCompact.css";
5
5
  import "../../../styles/icons.css";
6
6
  import LoadingBox from "../loadingBox/LoadingBox";
7
7
  function CaseCardCompact(_a) {
8
8
  var folderTitle = _a.folderTitle, folderStatus = _a.folderStatus, isLoading = _a.isLoading, clientName = _a.clientName, category = _a.category, _b = _a.showArrowOnHover, showArrowOnHover = _b === void 0 ? false : _b, onClientCardClick = _a.onClientCardClick, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c;
9
- return !isLoading ? (React.createElement("div", { className: "".concat(styles.case_card_compact, " ").concat(showArrowOnHover ? styles.case_card_compact__arrow_on_hover : "", " ").concat(isSelected ? styles.case_card_compact__selected : ""), style: {
9
+ return !isLoading ? (React.createElement("div", { className: "case-card-compact ".concat(showArrowOnHover ? "case-card-compact--arrow-on-hover" : "", " ").concat(isSelected ? "case-card-compact--selected" : ""), style: {
10
10
  cursor: onClientCardClick || isSelected ? "pointer" : "default",
11
11
  }, onClick: onClientCardClick || (isSelected ? function () { } : undefined) },
12
- React.createElement("div", { className: styles.case_card_compact_left },
13
- React.createElement("span", { className: styles.title_tag },
12
+ React.createElement("div", { className: "case-card-compact-left" },
13
+ React.createElement("span", { className: "title-tag" },
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: "".concat(styles.case_card_compact_right, " ").concat(!category ? styles.case_card_compact_right__centered : "") }, category && (React.createElement("span", { className: styles.case_card_compact_office_tag }, category))))) : (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%" }));
18
18
  }
19
19
  export default CaseCardCompact;
package/dist/components/molecules/caseCardCompact/{caseCardCompact.module.css → caseCardCompact.css} RENAMED
@@ -1,6 +1,6 @@
1
1
  @import "../../../styles/colors.css";
2
2
 
3
- .case_card_compact {
3
+ .case-card-compact {
4
4
  width: 100%;
5
5
  display: flex;
6
6
  padding: 16px;
@@ -10,27 +10,27 @@
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
- .case_card_compact:hover {
17
+ .case-card-compact:hover {
18
18
  border-color: var(--bleu-allaw, #25beeb);
19
19
  }
20
20
 
21
- .case_card_compact__selected {
21
+ .case-card-compact--selected {
22
22
  border-width: 2px;
23
23
  border-color: var(--Primary-Bleu, #25beeb);
24
24
  }
25
25
 
26
- .case_card_compact_left {
26
+ .case-card-compact-left {
27
27
  display: flex;
28
28
  flex-direction: column;
29
29
  align-items: start;
30
30
  gap: 8px;
31
31
  }
32
32
 
33
- .case_card_compact_right {
33
+ .case-card-compact-right {
34
34
  position: relative;
35
35
  display: flex;
36
36
  flex-direction: column;
@@ -39,13 +39,13 @@
39
39
  min-height: 45px;
40
40
  }
41
41
 
42
- .case_card_compact_right__centered .case_card_compact_arrow {
42
+ .case-card-compact-right--centered .case-card-compact-arrow {
43
43
  position: absolute;
44
44
  top: 55%;
45
45
  transform: translateY(-50%);
46
46
  }
47
47
 
48
- .case_card_compact_office_tag {
48
+ .case-card-compact-office-tag {
49
49
  font-size: 13px;
50
50
  font-family: "Open Sans", sans-serif;
51
51
  font-weight: 600;
@@ -55,21 +55,21 @@
55
55
  color: var(--Primary-Mid-black, #171e25);
56
56
  }
57
57
 
58
- .case_card_compact__arrow_on_hover .case_card_compact_arrow {
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
- .case_card_compact__arrow_on_hover:hover .case_card_compact_arrow {
63
+ .case-card-compact--arrow-on-hover:hover .case-card-compact-arrow {
64
64
  opacity: 1;
65
65
  }
66
66
 
67
- .case_card_compact:active {
67
+ .case-card-compact:active {
68
68
  border-width: 2px;
69
69
  border-color: var(--Primary-Bleu, #25beeb);
70
70
  }
71
71
 
72
- .title_tag {
72
+ .title-tag {
73
73
  display: flex;
74
74
  flex-direction: row;
75
75
  align-items: center;
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.71",
3
+ "version": "1.0.73",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -61,7 +61,6 @@
61
61
  "@storybook/nextjs": "^8.2.8",
62
62
  "@storybook/react": "^8.2.8",
63
63
  "@storybook/test": "^8.2.8",
64
- "@types/css-modules": "^1.0.5",
65
64
  "@types/node": "^20",
66
65
  "@types/react": "^18",
67
66
  "@types/react-dom": "^18",