mautourco-components 0.2.71 → 0.2.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 (7) hide show
  1. package/dist/components/molecules/DateDisplay/DateDisplay.js +2 -2
  2. package/dist/components/organisms/Docket/Docket.js +1 -1
  3. package/dist/styles/components/organism/topnavigation.css +24 -7
  4. package/package.json +1 -1
  5. package/src/components/molecules/DateDisplay/DateDisplay.tsx +2 -2
  6. package/src/components/organisms/Docket/Docket.tsx +1 -1
  7. package/src/styles/components/organism/topnavigation.css +9 -4
package/dist/components/molecules/DateDisplay/DateDisplay.js CHANGED
@@ -33,8 +33,8 @@ export function DateDisplay(props) {
33
33
  var textColor = colorMode === 'green' ? 'accent' : 'default';
34
34
  // Single date display (matching Figma design)
35
35
  if (formattedDates.length === 1) {
36
- return (_jsxs("div", { className: "date-display date-display--".concat(colorMode, " ").concat(className), children: [_jsx(Icon, { name: "calendar", size: calendarSize, color: iconColor }), _jsx(Text, { variant: "medium", size: textSize, color: textColor, children: formattedDates[0] })] }));
36
+ return (_jsxs("div", { className: "date-display date-display--".concat(colorMode, " ").concat(className), children: [_jsx(Icon, { name: "calendar2", size: calendarSize, color: iconColor }), _jsx(Text, { variant: "medium", size: textSize, color: textColor, children: formattedDates[0] })] }));
37
37
  }
38
38
  // Multiple dates display (backward compatibility)
39
- return (_jsx("div", { className: "date-display date-display--range date-display--".concat(colorMode, " ").concat(className), children: formattedDates.map(function (formattedDate, index) { return (_jsxs(Fragment, { children: [_jsxs("span", { className: "date-display__item", children: [_jsx(Icon, { name: "calendar", size: calendarSize, color: iconColor }), _jsx(Text, { variant: "medium", size: textSize, color: textColor, children: formattedDate })] }), formattedDates.length > 1 && index === 0 && (_jsx(Icon, { name: "arrow-right-outline", size: arrowSize }))] }, "dd-".concat(index))); }) }));
39
+ return (_jsx("div", { className: "date-display date-display--range date-display--".concat(colorMode, " ").concat(className), children: formattedDates.map(function (formattedDate, index) { return (_jsxs(Fragment, { children: [_jsxs("span", { className: "date-display__item", children: [_jsx(Icon, { name: "calendar2", size: calendarSize, color: iconColor }), _jsx(Text, { variant: "medium", size: textSize, color: textColor, children: formattedDate })] }), formattedDates.length > 1 && index === 0 && (_jsx(Icon, { name: "arrow-right-outline", size: arrowSize }))] }, "dd-".concat(index))); }) }));
40
40
  }
package/dist/components/organisms/Docket/Docket.js CHANGED
@@ -43,7 +43,7 @@ export var DocketHeader = function (_a) {
43
43
  export var DocketFooter = function (_a) {
44
44
  var _b = _a.mode, mode = _b === void 0 ? 'multiple' : _b, onAddNewQuoteClick = _a.onAddNewQuoteClick, onViewClick = _a.onViewClick, onSaveClick = _a.onSaveClick, onBookNowClick = _a.onBookNowClick, _c = _a.className, className = _c === void 0 ? '' : _c;
45
45
  var isSingleMode = mode === 'single';
46
- return (_jsxs("div", { className: "docket__footer ".concat(className), children: [!isSingleMode && onAddNewQuoteClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: onAddNewQuoteClick, className: "docket__footer-button docket__footer-button--full", children: "Add new quote" })), _jsxs("div", { className: "docket__footer-actions", children: [!isSingleMode && onViewClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onViewClick, className: "docket__footer-button", children: "View" })), onSaveClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onSaveClick, className: "docket__footer-button", children: "Save" })), onBookNowClick && (_jsx(Button, { variant: "secondary", size: "sm", onClick: onBookNowClick, className: "docket__footer-button docket__footer-button--primary", children: "Book now" }))] })] }));
46
+ return (_jsxs("div", { className: "docket__footer ".concat(className), children: [!isSingleMode && onAddNewQuoteClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: onAddNewQuoteClick, className: "docket__footer-button docket__footer-button--full", children: "Add new quote" })), _jsxs("div", { className: "docket__footer-actions", children: [!isSingleMode && onViewClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onViewClick, className: "docket__footer-button", children: "View" })), onSaveClick && (_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onSaveClick, className: "docket__footer-button", children: "Save quotation" })), onBookNowClick && (_jsx(Button, { variant: "secondary", size: "sm", onClick: onBookNowClick, className: "docket__footer-button docket__footer-button--primary", children: "Book now" }))] })] }));
47
47
  };
48
48
  /**
49
49
  * Docket is a container component for displaying quotation/docket information.
package/dist/styles/components/organism/topnavigation.css CHANGED
@@ -4,9 +4,9 @@
4
4
 
5
5
  .header {
6
6
  display: flex;
7
- height: 4.5rem;
7
+ height: 78px;
8
8
  width: 100%;
9
- gap: 1.375rem;
9
+ gap: 56px;
10
10
  padding-left: 1rem;
11
11
  padding-right: 1rem;
12
12
  --tw-shadow: 0 3px 8px #00000040;
@@ -54,14 +54,19 @@
54
54
  display: flex;
55
55
  height: 100%;
56
56
  align-items: stretch;
57
+ gap: 0px;
58
+ padding-right: 2rem;
57
59
  }
58
60
 
59
61
  .header__item {
60
62
  display: flex;
61
63
  height: 100%;
62
- min-width: 8.1875rem;
63
64
  align-items: center;
64
65
  justify-content: center;
66
+ padding-left: 0.5rem;
67
+ padding-right: 0.5rem;
68
+ padding-top: 0.5rem;
69
+ padding-bottom: 0.5rem;
65
70
  font-weight: var(--typography-font-weight-regular);
66
71
  font-style: Regular;
67
72
  font-size: var(--typography-font-size-base);
@@ -75,6 +80,18 @@
75
80
  }
76
81
  }
77
82
 
83
+ .header__item-content {
84
+ display: flex;
85
+ height: 100%;
86
+ align-items: center;
87
+ gap: 0.5rem;
88
+ padding-left: 0.75rem;
89
+ padding-right: 0.75rem;
90
+ padding-top: 0.5rem;
91
+ padding-bottom: 0.5rem;
92
+ min-height: 24px;
93
+ }
94
+
78
95
  .header__item--active {
79
96
  border-left-width: 4px;
80
97
  border-color: var(--color-sandy-brown-500);
@@ -117,10 +134,10 @@
117
134
 
118
135
  .header__item__link {
119
136
  display: block;
120
- padding-left: 0.25rem;
121
- padding-right: 0.25rem;
122
- padding-top: 0.25rem;
123
- padding-bottom: 0.25rem;
137
+ padding-left: 0.75rem;
138
+ padding-right: 0.75rem;
139
+ padding-top: 0.5rem;
140
+ padding-bottom: 0.5rem;
124
141
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
125
142
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
126
143
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.71",
3
+ "version": "0.2.73",
4
4
  "private": false,
5
5
  "description": "Bibliothèque de composants Mautourco pour le redesign",
6
6
  "main": "dist/index.js",
package/src/components/molecules/DateDisplay/DateDisplay.tsx CHANGED
@@ -66,7 +66,7 @@ export function DateDisplay(props: DateDisplayProps) {
66
66
  if (formattedDates.length === 1) {
67
67
  return (
68
68
  <div className={`date-display date-display--${colorMode} ${className}`}>
69
- <Icon name="calendar" size={calendarSize} color={iconColor} />
69
+ <Icon name="calendar2" size={calendarSize} color={iconColor} />
70
70
  <Text variant="medium" size={textSize} color={textColor}>
71
71
  {formattedDates[0]}
72
72
  </Text>
@@ -81,7 +81,7 @@ export function DateDisplay(props: DateDisplayProps) {
81
81
  {formattedDates.map((formattedDate, index) => (
82
82
  <Fragment key={`dd-${index}`}>
83
83
  <span className="date-display__item">
84
- <Icon name="calendar" size={calendarSize} color={iconColor} />
84
+ <Icon name="calendar2" size={calendarSize} color={iconColor} />
85
85
  <Text variant="medium" size={textSize} color={textColor}>
86
86
  {formattedDate}
87
87
  </Text>
package/src/components/organisms/Docket/Docket.tsx CHANGED
@@ -291,7 +291,7 @@ export const DocketFooter: React.FC<DocketFooterProps> = ({
291
291
  size="sm"
292
292
  onClick={onSaveClick}
293
293
  className="docket__footer-button">
294
- Save
294
+ Save quotation
295
295
  </Button>
296
296
  )}
297
297
  {onBookNowClick && (
package/src/styles/components/organism/topnavigation.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .header {
2
- @apply flex md:justify-between w-full h-[4.5rem] px-4 lg:px-24 shadow-[0_3px_8px_#00000040] sm:justify-start gap-[1.375rem];
2
+ @apply flex md:justify-between w-full h-[78px] px-4 lg:px-24 shadow-[0_3px_8px_#00000040] sm:justify-start gap-[56px];
3
3
  }
4
4
 
5
5
  .header-logo {
@@ -11,11 +11,11 @@
11
11
  }
12
12
 
13
13
  .header-nav__items {
14
- @apply flex items-stretch h-full;
14
+ @apply flex items-stretch h-full gap-0 pr-8;
15
15
  }
16
16
 
17
17
  .header__item {
18
- @apply min-w-[8.1875rem] flex justify-center h-full items-center;
18
+ @apply flex justify-center h-full items-center px-2 py-2;
19
19
  font-weight: var(--typography-font-weight-regular);
20
20
  font-style: Regular;
21
21
  font-size: var(--typography-font-size-base);
@@ -30,6 +30,11 @@
30
30
 
31
31
  }
32
32
 
33
+ .header__item-content {
34
+ @apply flex items-center gap-2 px-3 py-2 h-full;
35
+ min-height: 24px;
36
+ }
37
+
33
38
  .header__item--active {
34
39
  @apply lg:border-b-4 lg:border-l-0 border-l-4 border-[var(--color-sandy-brown-500)] text-[var(--color-text-brand)];
35
40
  font-weight: var(--typography-body-lg-6-font-weight-bold);
@@ -48,7 +53,7 @@
48
53
  }
49
54
 
50
55
  .header__item__link {
51
- @apply block px-1 py-1 transition-colors;
56
+ @apply block px-3 py-2 transition-colors;
52
57
  }
53
58
 
54
59
  .header-nav__user-section {