mautourco-components 0.2.47 → 0.2.48

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 (14) hide show
  1. package/dist/components/molecules/Pagination/Pagination.css +27 -17
  2. package/dist/components/molecules/Pagination/Pagination.js +4 -4
  3. package/dist/components/organisms/Table/Table.css +64 -53
  4. package/dist/components/organisms/Table/Table.d.ts +1 -0
  5. package/dist/components/organisms/Table/Table.js +2 -1
  6. package/dist/components/organisms/Table/columns/booking-columns.d.ts +1 -1
  7. package/dist/components/organisms/Table/columns/booking-columns.js +17 -2
  8. package/dist/components/organisms/Table/columns/index.d.ts +1 -1
  9. package/package.json +1 -1
  10. package/src/components/molecules/Pagination/Pagination.css +27 -18
  11. package/src/components/molecules/Pagination/Pagination.tsx +9 -13
  12. package/src/components/organisms/Table/Table.css +64 -53
  13. package/src/components/organisms/Table/Table.tsx +22 -1
  14. package/src/components/organisms/Table/columns/booking-columns.tsx +40 -13
package/dist/components/molecules/Pagination/Pagination.css CHANGED
@@ -2,14 +2,15 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- .pagination {
5
+ .mtc-pagination {
6
6
  display: flex;
7
7
  align-items: center;
8
8
  gap: var(--spacing-gap-gap-3, 12px);
9
- padding: var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-1-5, 6px);
9
+ padding: var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-3, 12px)
10
+ var(--spacing-gap-gap-1-5, 6px);
10
11
  }
11
12
 
12
- .pagination__button {
13
+ .mtc-pagination__button {
13
14
  display: flex;
14
15
  align-items: center;
15
16
  justify-content: center;
@@ -18,35 +19,38 @@
18
19
  border-radius: var(--border-radius-rounded-lg, 8px);
19
20
  padding: var(--spacing-padding-py-2, 8px) var(--spacing-padding-px-2, 8px);
20
21
  cursor: pointer;
21
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
22
+ transition:
23
+ background-color 0.2s ease-in-out,
24
+ border-color 0.2s ease-in-out,
25
+ opacity 0.2s ease-in-out;
22
26
  }
23
27
 
24
- .pagination__button:hover:not(:disabled) {
28
+ .mtc-pagination__button:hover:not(:disabled) {
25
29
  background-color: var(--color-elevation-state-hover-subtle, #ededed);
26
30
  border-color: var(--color-border-medium, #a3a3a3);
27
31
  }
28
32
 
29
- .pagination__button:active:not(:disabled) {
33
+ .mtc-pagination__button:active:not(:disabled) {
30
34
  background-color: var(--color-elevation-state-pressed-subtle, #d9d9d9);
31
35
  }
32
36
 
33
- .pagination__button:disabled {
37
+ .mtc-pagination__button:disabled {
34
38
  opacity: 0.5;
35
39
  cursor: not-allowed;
36
40
  }
37
41
 
38
- .pagination__button:focus-visible {
42
+ .mtc-pagination__button:focus-visible {
39
43
  outline: 2px solid var(--color-atoll-green-800, #0f7173);
40
44
  outline-offset: 2px;
41
45
  }
42
46
 
43
- .pagination__numbers {
47
+ .mtc-pagination__numbers {
44
48
  display: flex;
45
49
  align-items: center;
46
50
  gap: var(--spacing-gap-gap-1, 4px);
47
51
  }
48
52
 
49
- .pagination__number {
53
+ .mtc-pagination__number {
50
54
  display: flex;
51
55
  align-items: center;
52
56
  justify-content: center;
@@ -55,36 +59,42 @@
55
59
  background-color: var(--color-elevation-level-1, #ffffff);
56
60
  border: none;
57
61
  border-radius: var(--border-radius-rounded-lg, 8px);
58
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
62
+ font-family:
63
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
64
+ sans-serif;
59
65
  font-size: var(--font-size-text-sm, 14px);
60
66
  font-weight: var(--font-weight-font-medium, 500);
61
67
  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
62
68
  color: var(--color-text-default, #262626);
63
69
  cursor: pointer;
64
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
70
+ transition:
71
+ background-color 0.2s ease-in-out,
72
+ color 0.2s ease-in-out;
65
73
  }
66
74
 
67
- .pagination__number:hover:not(.pagination__number--selected) {
75
+ .mtc-pagination__number:hover:not(.mtc-pagination__number--selected) {
68
76
  background-color: var(--color-elevation-level-2, #f5f5f5);
69
77
  }
70
78
 
71
- .pagination__number--selected {
79
+ .mtc-pagination__number--selected {
72
80
  background-color: var(--color-atoll-green-800, #0f7173);
73
81
  color: var(--color-text-inverted, #ffffff);
74
82
  }
75
83
 
76
- .pagination__number:focus-visible {
84
+ .mtc-pagination__number:focus-visible {
77
85
  outline: 2px solid var(--color-atoll-green-800, #0f7173);
78
86
  outline-offset: 2px;
79
87
  }
80
88
 
81
- .pagination__ellipsis {
89
+ .mtc-pagination__ellipsis {
82
90
  display: flex;
83
91
  align-items: center;
84
92
  justify-content: center;
85
93
  width: var(--dimension-width-w-10, 40px);
86
94
  height: var(--dimension-height-h-10, 40px);
87
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
95
+ font-family:
96
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
97
+ sans-serif;
88
98
  font-size: var(--font-size-text-sm, 14px);
89
99
  font-weight: var(--font-weight-font-medium, 500);
90
100
  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
package/dist/components/molecules/Pagination/Pagination.js CHANGED
@@ -68,12 +68,12 @@ var Pagination = function (_a) {
68
68
  var pageNumbers = getPageNumbers();
69
69
  var isPreviousDisabled = currentPage <= 1;
70
70
  var isNextDisabled = currentPage >= totalPages;
71
- return (_jsxs("div", { className: "pagination ".concat(className), children: [_jsx("button", { type: "button", className: "pagination__button pagination__button--prev", onClick: handlePrevious, disabled: isPreviousDisabled, "aria-label": "Previous page", children: _jsx(Icon, { name: "chevron-left", size: "sm" }) }), _jsx("div", { className: "pagination__numbers", children: pageNumbers.map(function (page, index) {
71
+ return (_jsxs("div", { className: "mtc-pagination ".concat(className), children: [_jsx("button", { type: "button", className: "mtc-pagination__button mtc-pagination__button--prev", onClick: handlePrevious, disabled: isPreviousDisabled, "aria-label": "Previous page", children: _jsx(Icon, { name: "chevron-left", size: "sm" }) }), _jsx("div", { className: "mtc-pagination__numbers", children: pageNumbers.map(function (page, index) {
72
72
  if (page === 'ellipsis') {
73
- return (_jsx("span", { className: "pagination__ellipsis", children: "..." }, "ellipsis-".concat(index)));
73
+ return (_jsx("span", { className: "mtc-pagination__ellipsis", children: "..." }, "ellipsis-".concat(index)));
74
74
  }
75
75
  var isSelected = page === currentPage;
76
- return (_jsx("button", { type: "button", className: "pagination__number ".concat(isSelected ? 'pagination__number--selected' : ''), onClick: function () { return handlePageClick(page); }, "aria-label": "Page ".concat(page), "aria-current": isSelected ? 'page' : undefined, children: page }, page));
77
- }) }), _jsx("button", { type: "button", className: "pagination__button pagination__button--next", onClick: handleNext, disabled: isNextDisabled, "aria-label": "Next page", children: _jsx(Icon, { name: "chevron-right", size: "sm" }) })] }));
76
+ return (_jsx("button", { type: "button", className: "mtc-pagination__number ".concat(isSelected ? 'mtc-pagination__number--selected' : ''), onClick: function () { return handlePageClick(page); }, "aria-label": "Page ".concat(page), "aria-current": isSelected ? 'page' : undefined, children: page }, page));
77
+ }) }), _jsx("button", { type: "button", className: "mtc-pagination__button mtc-pagination__button--next", onClick: handleNext, disabled: isNextDisabled, "aria-label": "Next page", children: _jsx(Icon, { name: "chevron-right", size: "sm" }) })] }));
78
78
  };
79
79
  export default Pagination;
package/dist/components/organisms/Table/Table.css CHANGED
@@ -20,10 +20,14 @@
20
20
  width: 100%;
21
21
  border-collapse: collapse;
22
22
  border-spacing: 0;
23
+ table-layout: fixed;
23
24
  th,
24
25
  td {
25
26
  padding-inline: var(--spacing-padding-px-4);
26
27
  }
28
+ .table__cell-highlighted {
29
+ padding: 0;
30
+ }
27
31
  }
28
32
  .table__header {
29
33
  th {
@@ -50,61 +54,13 @@
50
54
  &:hover:not(.table__no-hover) {
51
55
  background-color: var(--color-elevation-state-hover-subtle);
52
56
  }
53
- &:first-child {
54
- border-top: none;
55
- }
56
- &.table__row-yellow {
57
- background-color: var(--color-yellow-50);
58
- border: 1px solid transparent;
59
- position: relative;
60
- &::after {
61
- content: '';
62
- position: absolute;
63
- inset: -1px;
64
- pointer-events: none;
65
- background-image:
66
- repeating-linear-gradient(
67
- to right,
68
- var(--color-yellow-600) 0,
69
- var(--color-yellow-600) 8px,
70
- transparent 8px,
71
- transparent 16px
72
- ),
73
- repeating-linear-gradient(
74
- to right,
75
- var(--color-yellow-600) 0,
76
- var(--color-yellow-600) 8px,
77
- transparent 8px,
78
- transparent 16px
79
- ),
80
- repeating-linear-gradient(
81
- to bottom,
82
- var(--color-yellow-600) 0,
83
- var(--color-yellow-600) 8px,
84
- transparent 8px,
85
- transparent 16px
86
- ),
87
- repeating-linear-gradient(
88
- to bottom,
89
- var(--color-yellow-600) 0,
90
- var(--color-yellow-600) 8px,
91
- transparent 8px,
92
- transparent 16px
93
- );
94
- background-size:
95
- 100% 1px,
96
- 100% 1px,
97
- 1px 100%,
98
- 1px 100%;
99
- background-position: top, bottom, left, right;
100
- background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
101
- }
102
- &:hover {
57
+ &.table__row-highlighted:hover {
58
+ tr {
103
59
  background-color: var(--color-yellow-100);
104
60
  }
105
- & + tr {
106
- border-top: none;
107
- }
61
+ }
62
+ &:first-child {
63
+ border-top: none;
108
64
  }
109
65
  &.table__row-border-0 {
110
66
  border-top: none;
@@ -281,4 +237,59 @@
281
237
  border-bottom: solid 1px var(--color-surface-300);
282
238
  }
283
239
  }
240
+ }
241
+
242
+ .table__row-div-highlighted {
243
+ background-color: var(--color-yellow-50);
244
+ border: 1px solid transparent;
245
+ position: relative;
246
+
247
+ &::after {
248
+ content: '';
249
+ position: absolute;
250
+ inset: -1px;
251
+ pointer-events: none;
252
+ background-image:
253
+ repeating-linear-gradient(
254
+ to right,
255
+ var(--color-yellow-600) 0,
256
+ var(--color-yellow-600) 8px,
257
+ transparent 8px,
258
+ transparent 16px
259
+ ),
260
+ repeating-linear-gradient(
261
+ to right,
262
+ var(--color-yellow-600) 0,
263
+ var(--color-yellow-600) 8px,
264
+ transparent 8px,
265
+ transparent 16px
266
+ ),
267
+ repeating-linear-gradient(
268
+ to bottom,
269
+ var(--color-yellow-600) 0,
270
+ var(--color-yellow-600) 8px,
271
+ transparent 8px,
272
+ transparent 16px
273
+ ),
274
+ repeating-linear-gradient(
275
+ to bottom,
276
+ var(--color-yellow-600) 0,
277
+ var(--color-yellow-600) 8px,
278
+ transparent 8px,
279
+ transparent 16px
280
+ );
281
+ background-size:
282
+ 100% 1px,
283
+ 100% 1px,
284
+ 1px 100%,
285
+ 1px 100%;
286
+ background-position: top, bottom, left, right;
287
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
288
+ }
289
+ &:hover {
290
+ background-color: var(--color-yellow-100);
291
+ }
292
+ & + tr {
293
+ border-top: none;
294
+ }
284
295
  }
package/dist/components/organisms/Table/Table.d.ts CHANGED
@@ -14,6 +14,7 @@ export type TableRowData<T = any> = {
14
14
  * - table__row-border-0: For no border
15
15
  */
16
16
  className?: string;
17
+ isHighlighted?: boolean;
17
18
  /** Children rows for the row */
18
19
  children?: T[];
19
20
  };
package/dist/components/organisms/Table/Table.js CHANGED
@@ -83,7 +83,8 @@ export function Table(props) {
83
83
  var defaultTable = (_jsx("tr", { className: cn(row.className, {
84
84
  'table__row-nested': (_b = row.children) === null || _b === void 0 ? void 0 : _b.length,
85
85
  'table__row-clickable': onClickRow,
86
- }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) }));
86
+ 'table__row-highlighted': row.isHighlighted,
87
+ }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: row.isHighlighted ? (_jsx("td", { colSpan: columns.length, className: "table__cell-highlighted", children: _jsx("div", { className: "table__row-div-highlighted", children: _jsx("table", { className: "table", children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) }) }) }) }) })) : (_jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex })) }));
87
88
  return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", { className: "table__row-grouped", children: _jsx("td", { colSpan: columns.length, children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow }) }) })) : (defaultTable)) : !row.children ? (defaultTable) : (_jsx("tr", { className: "table__row-with-children", onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); }, children: _jsx("td", { colSpan: columns.length, className: cn({
88
89
  'table__children--visible': hasVisibleChildren,
89
90
  }), children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {
package/dist/components/organisms/Table/columns/booking-columns.d.ts CHANGED
@@ -2,6 +2,6 @@ import { ActionDropdownType } from '@/src/types/table';
2
2
  import { BookingListItem } from '@/src/types/table/booking.types';
3
3
  import { ColumnType } from '../TableCell';
4
4
  export declare const bookingColumns: (params: {
5
- onAction?: (action: ActionDropdownType) => void;
5
+ onAction?: (data: BookingListItem) => (action: ActionDropdownType) => void;
6
6
  keywords?: string;
7
7
  }) => ColumnType<BookingListItem>[];
package/dist/components/organisms/Table/columns/booking-columns.js CHANGED
@@ -1,10 +1,22 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import Button from '../../../atoms/Button/Button';
3
+ import Chip from '../../../atoms/Chip/Chip';
3
4
  import { Text } from '../../../atoms/Typography/Typography';
4
5
  import { ActionDropdown } from '../../../molecules/ActionDropdown/ActionDropdown';
5
6
  import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
6
7
  import { PaxChips } from '../../../molecules/PaxChips/PaxChips';
7
8
  import { actionDropdownData } from '../constant';
9
+ var CHIP_WIDTH = 'w-[184px]';
10
+ var BUTTON_WIDTH = 'w-[89px]';
11
+ var renderStatusContent = function (status) {
12
+ if (status === 'PENDING') {
13
+ return (_jsx(Chip, { size: "sm", color: "yellow", className: CHIP_WIDTH, children: "On Request" }));
14
+ }
15
+ if (status === 'Cancelled') {
16
+ return (_jsx(Chip, { size: "sm", color: "red", className: CHIP_WIDTH, children: "Cancelled" }));
17
+ }
18
+ return (_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(Button, { variant: "secondary", size: "sm", className: BUTTON_WIDTH, children: "Proforma" }), _jsx(Button, { variant: "outline-secondary", size: "sm", className: BUTTON_WIDTH, children: "Voucher" })] }));
19
+ };
8
20
  export var bookingColumns = function (_a) {
9
21
  var onAction = _a.onAction, _b = _a.keywords, keywords = _b === void 0 ? '' : _b;
10
22
  return [
@@ -74,7 +86,10 @@ export var bookingColumns = function (_a) {
74
86
  key: 'actions',
75
87
  width: 232,
76
88
  cell: function (_value, raw) {
77
- return (_jsx("div", { children: _jsxs("div", { className: "flex items-center gap-x-8", children: [_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(Button, { variant: "secondary", size: "sm", className: "w-[89px]", children: "Proforma" }), _jsx(Button, { variant: "outline-secondary", size: "sm", className: "w-[89px]", children: "Voucher" })] }), _jsx(ActionDropdown, { data: actionDropdownData(onAction !== null && onAction !== void 0 ? onAction : (function () { })) })] }) }));
89
+ var _a;
90
+ var handleAction = (_a = onAction === null || onAction === void 0 ? void 0 : onAction(raw)) !== null && _a !== void 0 ? _a : (function () { });
91
+ var actionData = actionDropdownData(handleAction);
92
+ return (_jsxs("div", { className: "flex items-center justify-between", children: [renderStatusContent(raw.status), _jsx(ActionDropdown, { data: actionData })] }));
78
93
  },
79
94
  },
80
95
  ];
package/dist/components/organisms/Table/columns/index.d.ts CHANGED
@@ -11,7 +11,7 @@ declare const columns: {
11
11
  onRemove?: (value: import("../../../..").DetailResumeItem, index?: number) => void;
12
12
  }) => import("../TableCell").ColumnType<import("../../../..").DetailResumeItem>[];
13
13
  booking: (params: {
14
- onAction?: (action: import("../../../..").ActionDropdownType) => void;
14
+ onAction?: (data: import("../../../../types/table/booking.types").BookingListItem) => (action: import("../../../..").ActionDropdownType) => void;
15
15
  keywords?: string;
16
16
  }) => import("../TableCell").ColumnType<import("../../../../types/table/booking.types").BookingListItem>[];
17
17
  bookingCancelService: (params?: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.47",
3
+ "version": "0.2.48",
4
4
  "private": false,
5
5
  "description": "Bibliothèque de composants Motorco pour le redesign",
6
6
  "main": "dist/index.js",
package/src/components/molecules/Pagination/Pagination.css CHANGED
@@ -1,11 +1,12 @@
1
- .pagination {
1
+ .mtc-pagination {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  gap: var(--spacing-gap-gap-3, 12px);
5
- padding: var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-1-5, 6px);
5
+ padding: var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-3, 12px)
6
+ var(--spacing-gap-gap-1-5, 6px);
6
7
  }
7
8
 
8
- .pagination__button {
9
+ .mtc-pagination__button {
9
10
  display: flex;
10
11
  align-items: center;
11
12
  justify-content: center;
@@ -14,35 +15,38 @@
14
15
  border-radius: var(--border-radius-rounded-lg, 8px);
15
16
  padding: var(--spacing-padding-py-2, 8px) var(--spacing-padding-px-2, 8px);
16
17
  cursor: pointer;
17
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
18
+ transition:
19
+ background-color 0.2s ease-in-out,
20
+ border-color 0.2s ease-in-out,
21
+ opacity 0.2s ease-in-out;
18
22
  }
19
23
 
20
- .pagination__button:hover:not(:disabled) {
24
+ .mtc-pagination__button:hover:not(:disabled) {
21
25
  background-color: var(--color-elevation-state-hover-subtle, #ededed);
22
26
  border-color: var(--color-border-medium, #a3a3a3);
23
27
  }
24
28
 
25
- .pagination__button:active:not(:disabled) {
29
+ .mtc-pagination__button:active:not(:disabled) {
26
30
  background-color: var(--color-elevation-state-pressed-subtle, #d9d9d9);
27
31
  }
28
32
 
29
- .pagination__button:disabled {
33
+ .mtc-pagination__button:disabled {
30
34
  opacity: 0.5;
31
35
  cursor: not-allowed;
32
36
  }
33
37
 
34
- .pagination__button:focus-visible {
38
+ .mtc-pagination__button:focus-visible {
35
39
  outline: 2px solid var(--color-atoll-green-800, #0f7173);
36
40
  outline-offset: 2px;
37
41
  }
38
42
 
39
- .pagination__numbers {
43
+ .mtc-pagination__numbers {
40
44
  display: flex;
41
45
  align-items: center;
42
46
  gap: var(--spacing-gap-gap-1, 4px);
43
47
  }
44
48
 
45
- .pagination__number {
49
+ .mtc-pagination__number {
46
50
  display: flex;
47
51
  align-items: center;
48
52
  justify-content: center;
@@ -51,40 +55,45 @@
51
55
  background-color: var(--color-elevation-level-1, #ffffff);
52
56
  border: none;
53
57
  border-radius: var(--border-radius-rounded-lg, 8px);
54
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
58
+ font-family:
59
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
60
+ sans-serif;
55
61
  font-size: var(--font-size-text-sm, 14px);
56
62
  font-weight: var(--font-weight-font-medium, 500);
57
63
  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
58
64
  color: var(--color-text-default, #262626);
59
65
  cursor: pointer;
60
- transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
66
+ transition:
67
+ background-color 0.2s ease-in-out,
68
+ color 0.2s ease-in-out;
61
69
  }
62
70
 
63
- .pagination__number:hover:not(.pagination__number--selected) {
71
+ .mtc-pagination__number:hover:not(.mtc-pagination__number--selected) {
64
72
  background-color: var(--color-elevation-level-2, #f5f5f5);
65
73
  }
66
74
 
67
- .pagination__number--selected {
75
+ .mtc-pagination__number--selected {
68
76
  background-color: var(--color-atoll-green-800, #0f7173);
69
77
  color: var(--color-text-inverted, #ffffff);
70
78
  }
71
79
 
72
- .pagination__number:focus-visible {
80
+ .mtc-pagination__number:focus-visible {
73
81
  outline: 2px solid var(--color-atoll-green-800, #0f7173);
74
82
  outline-offset: 2px;
75
83
  }
76
84
 
77
- .pagination__ellipsis {
85
+ .mtc-pagination__ellipsis {
78
86
  display: flex;
79
87
  align-items: center;
80
88
  justify-content: center;
81
89
  width: var(--dimension-width-w-10, 40px);
82
90
  height: var(--dimension-height-h-10, 40px);
83
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
91
+ font-family:
92
+ var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
93
+ sans-serif;
84
94
  font-size: var(--font-size-text-sm, 14px);
85
95
  font-weight: var(--font-weight-font-medium, 500);
86
96
  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
87
97
  color: var(--color-text-default, #262626);
88
98
  user-select: none;
89
99
  }
90
-
package/src/components/molecules/Pagination/Pagination.tsx CHANGED
@@ -94,22 +94,21 @@ const Pagination: React.FC<PaginationProps> = ({
94
94
  const isNextDisabled = currentPage >= totalPages;
95
95
 
96
96
  return (
97
- <div className={`pagination ${className}`}>
97
+ <div className={`mtc-pagination ${className}`}>
98
98
  <button
99
99
  type="button"
100
- className="pagination__button pagination__button--prev"
100
+ className="mtc-pagination__button mtc-pagination__button--prev"
101
101
  onClick={handlePrevious}
102
102
  disabled={isPreviousDisabled}
103
- aria-label="Previous page"
104
- >
103
+ aria-label="Previous page">
105
104
  <Icon name="chevron-left" size="sm" />
106
105
  </button>
107
106
 
108
- <div className="pagination__numbers">
107
+ <div className="mtc-pagination__numbers">
109
108
  {pageNumbers.map((page, index) => {
110
109
  if (page === 'ellipsis') {
111
110
  return (
112
- <span key={`ellipsis-${index}`} className="pagination__ellipsis">
111
+ <span key={`ellipsis-${index}`} className="mtc-pagination__ellipsis">
113
112
  ...
114
113
  </span>
115
114
  );
@@ -121,11 +120,10 @@ const Pagination: React.FC<PaginationProps> = ({
121
120
  <button
122
121
  key={page}
123
122
  type="button"
124
- className={`pagination__number ${isSelected ? 'pagination__number--selected' : ''}`}
123
+ className={`mtc-pagination__number ${isSelected ? 'mtc-pagination__number--selected' : ''}`}
125
124
  onClick={() => handlePageClick(page)}
126
125
  aria-label={`Page ${page}`}
127
- aria-current={isSelected ? 'page' : undefined}
128
- >
126
+ aria-current={isSelected ? 'page' : undefined}>
129
127
  {page}
130
128
  </button>
131
129
  );
@@ -134,11 +132,10 @@ const Pagination: React.FC<PaginationProps> = ({
134
132
 
135
133
  <button
136
134
  type="button"
137
- className="pagination__button pagination__button--next"
135
+ className="mtc-pagination__button mtc-pagination__button--next"
138
136
  onClick={handleNext}
139
137
  disabled={isNextDisabled}
140
- aria-label="Next page"
141
- >
138
+ aria-label="Next page">
142
139
  <Icon name="chevron-right" size="sm" />
143
140
  </button>
144
141
  </div>
@@ -146,4 +143,3 @@ const Pagination: React.FC<PaginationProps> = ({
146
143
  };
147
144
 
148
145
  export default Pagination;
149
-
package/src/components/organisms/Table/Table.css CHANGED
@@ -16,10 +16,14 @@
16
16
  width: 100%;
17
17
  border-collapse: collapse;
18
18
  border-spacing: 0;
19
+ table-layout: fixed;
19
20
  th,
20
21
  td {
21
22
  padding-inline: var(--spacing-padding-px-4);
22
23
  }
24
+ .table__cell-highlighted {
25
+ padding: 0;
26
+ }
23
27
  }
24
28
  .table__header {
25
29
  th {
@@ -34,61 +38,13 @@
34
38
  &:hover:not(.table__no-hover) {
35
39
  background-color: var(--color-elevation-state-hover-subtle);
36
40
  }
37
- &:first-child {
38
- border-top: none;
39
- }
40
- &.table__row-yellow {
41
- background-color: var(--color-yellow-50);
42
- border: 1px solid transparent;
43
- position: relative;
44
- &::after {
45
- content: '';
46
- position: absolute;
47
- inset: -1px;
48
- pointer-events: none;
49
- background-image:
50
- repeating-linear-gradient(
51
- to right,
52
- var(--color-yellow-600) 0,
53
- var(--color-yellow-600) 8px,
54
- transparent 8px,
55
- transparent 16px
56
- ),
57
- repeating-linear-gradient(
58
- to right,
59
- var(--color-yellow-600) 0,
60
- var(--color-yellow-600) 8px,
61
- transparent 8px,
62
- transparent 16px
63
- ),
64
- repeating-linear-gradient(
65
- to bottom,
66
- var(--color-yellow-600) 0,
67
- var(--color-yellow-600) 8px,
68
- transparent 8px,
69
- transparent 16px
70
- ),
71
- repeating-linear-gradient(
72
- to bottom,
73
- var(--color-yellow-600) 0,
74
- var(--color-yellow-600) 8px,
75
- transparent 8px,
76
- transparent 16px
77
- );
78
- background-size:
79
- 100% 1px,
80
- 100% 1px,
81
- 1px 100%,
82
- 1px 100%;
83
- background-position: top, bottom, left, right;
84
- background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
85
- }
86
- &:hover {
41
+ &.table__row-highlighted:hover {
42
+ tr {
87
43
  background-color: var(--color-yellow-100);
88
44
  }
89
- & + tr {
90
- border-top: none;
91
- }
45
+ }
46
+ &:first-child {
47
+ border-top: none;
92
48
  }
93
49
  &.table__row-border-0 {
94
50
  border-top: none;
@@ -258,3 +214,58 @@
258
214
  }
259
215
  }
260
216
  }
217
+
218
+ .table__row-div-highlighted {
219
+ background-color: var(--color-yellow-50);
220
+ border: 1px solid transparent;
221
+ position: relative;
222
+
223
+ &::after {
224
+ content: '';
225
+ position: absolute;
226
+ inset: -1px;
227
+ pointer-events: none;
228
+ background-image:
229
+ repeating-linear-gradient(
230
+ to right,
231
+ var(--color-yellow-600) 0,
232
+ var(--color-yellow-600) 8px,
233
+ transparent 8px,
234
+ transparent 16px
235
+ ),
236
+ repeating-linear-gradient(
237
+ to right,
238
+ var(--color-yellow-600) 0,
239
+ var(--color-yellow-600) 8px,
240
+ transparent 8px,
241
+ transparent 16px
242
+ ),
243
+ repeating-linear-gradient(
244
+ to bottom,
245
+ var(--color-yellow-600) 0,
246
+ var(--color-yellow-600) 8px,
247
+ transparent 8px,
248
+ transparent 16px
249
+ ),
250
+ repeating-linear-gradient(
251
+ to bottom,
252
+ var(--color-yellow-600) 0,
253
+ var(--color-yellow-600) 8px,
254
+ transparent 8px,
255
+ transparent 16px
256
+ );
257
+ background-size:
258
+ 100% 1px,
259
+ 100% 1px,
260
+ 1px 100%,
261
+ 1px 100%;
262
+ background-position: top, bottom, left, right;
263
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
264
+ }
265
+ &:hover {
266
+ background-color: var(--color-yellow-100);
267
+ }
268
+ & + tr {
269
+ border-top: none;
270
+ }
271
+ }
package/src/components/organisms/Table/Table.tsx CHANGED
@@ -22,6 +22,8 @@ export type TableRowData<T = any> = {
22
22
  */
23
23
  className?: string;
24
24
 
25
+ isHighlighted?: boolean;
26
+
25
27
  /** Children rows for the row */
26
28
  children?: T[];
27
29
  };
@@ -194,9 +196,28 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
194
196
  className={cn(row.className, {
195
197
  'table__row-nested': row.children?.length,
196
198
  'table__row-clickable': onClickRow,
199
+ 'table__row-highlighted': row.isHighlighted,
197
200
  })}
198
201
  onClick={(e) => onClickRow?.(e, row)}>
199
- <TableCell<T> columns={columns} row={row} rowIndex={rowIndex} />
202
+ {row.isHighlighted ? (
203
+ <td colSpan={columns.length} className="table__cell-highlighted">
204
+ <div className="table__row-div-highlighted">
205
+ <table className="table">
206
+ <tbody>
207
+ <tr>
208
+ <TableCell<T>
209
+ columns={columns}
210
+ row={row}
211
+ rowIndex={rowIndex}
212
+ />
213
+ </tr>
214
+ </tbody>
215
+ </table>
216
+ </div>
217
+ </td>
218
+ ) : (
219
+ <TableCell<T> columns={columns} row={row} rowIndex={rowIndex} />
220
+ )}
200
221
  </tr>
201
222
  );
202
223
 
package/src/components/organisms/Table/columns/booking-columns.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import Button from '@/src/components/atoms/Button/Button';
2
+ import Chip from '@/src/components/atoms/Chip/Chip';
2
3
  import { Text } from '@/src/components/atoms/Typography/Typography';
3
4
  import { ActionDropdown } from '@/src/components/molecules/ActionDropdown/ActionDropdown';
4
5
  import { DateDisplay } from '@/src/components/molecules/DateDisplay/DateDisplay';
@@ -8,8 +9,40 @@ import { BookingListItem } from '@/src/types/table/booking.types';
8
9
  import { ColumnType } from '../TableCell';
9
10
  import { actionDropdownData } from '../constant';
10
11
 
12
+ const CHIP_WIDTH = 'w-[184px]';
13
+ const BUTTON_WIDTH = 'w-[89px]';
14
+
15
+ const renderStatusContent = (status: BookingListItem['status']) => {
16
+ if (status === 'PENDING') {
17
+ return (
18
+ <Chip size="sm" color="yellow" className={CHIP_WIDTH}>
19
+ On Request
20
+ </Chip>
21
+ );
22
+ }
23
+
24
+ if (status === 'Cancelled') {
25
+ return (
26
+ <Chip size="sm" color="red" className={CHIP_WIDTH}>
27
+ Cancelled
28
+ </Chip>
29
+ );
30
+ }
31
+
32
+ return (
33
+ <div className="flex items-center gap-x-3">
34
+ <Button variant="secondary" size="sm" className={BUTTON_WIDTH}>
35
+ Proforma
36
+ </Button>
37
+ <Button variant="outline-secondary" size="sm" className={BUTTON_WIDTH}>
38
+ Voucher
39
+ </Button>
40
+ </div>
41
+ );
42
+ };
43
+
11
44
  export const bookingColumns: (params: {
12
- onAction?: (action: ActionDropdownType) => void;
45
+ onAction?: (data: BookingListItem) => (action: ActionDropdownType) => void;
13
46
  keywords?: string;
14
47
  }) => ColumnType<BookingListItem>[] = ({ onAction, keywords = '' }) => [
15
48
  {
@@ -101,19 +134,13 @@ export const bookingColumns: (params: {
101
134
  key: 'actions',
102
135
  width: 232,
103
136
  cell: (_value, raw) => {
137
+ const handleAction = onAction?.(raw) ?? (() => {});
138
+ const actionData = actionDropdownData(handleAction);
139
+
104
140
  return (
105
- <div>
106
- <div className="flex items-center gap-x-8">
107
- <div className="flex items-center gap-x-3">
108
- <Button variant="secondary" size="sm" className="w-[89px]">
109
- Proforma
110
- </Button>
111
- <Button variant="outline-secondary" size="sm" className="w-[89px]">
112
- Voucher
113
- </Button>
114
- </div>
115
- <ActionDropdown data={actionDropdownData(onAction ?? (() => {}))} />
116
- </div>
141
+ <div className="flex items-center justify-between">
142
+ {renderStatusContent(raw.status)}
143
+ <ActionDropdown data={actionData} />
117
144
  </div>
118
145
  );
119
146
  },