mautourco-components 0.2.72 → 0.2.74

package/dist/components/atoms/Icon/icons/ViewQuotationIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ViewQuotationIconProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    color?: string;
+}
+declare const ViewQuotationIcon: React.FC<ViewQuotationIconProps>;
+export default ViewQuotationIcon;

package/dist/components/atoms/Icon/icons/ViewQuotationIcon.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ViewQuotationIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, color = _a.color;
+    var getSizeClasses = function () {
+        switch (size) {
+            case 'xs':
+                return 'w-3 h-3';
+            case 'sm':
+                return 'w-4 h-4';
+            case 'md':
+                return 'w-5 h-5';
+            case 'lg':
+                return 'w-6 h-6';
+            case 'xl':
+                return 'w-8 h-8';
+            default:
+                return 'w-5 h-5';
+        }
+    };
+    var sizeClasses = getSizeClasses();
+    var colorClass = color ? "text-".concat(color) : 'text-current';
+    var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className);
+    return (_jsxs("svg", { className: classes, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "4", y: "4", width: "12", height: "12", stroke: "currentColor", strokeWidth: "1.5", fill: "none", strokeLinecap: "round" }), _jsx("path", { d: "M4 4L4 1M4 4L1 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M16 4L16 1M16 4L19 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4 16L4 19M4 16L1 16", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M16 16L16 19M16 16L19 16", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("ellipse", { cx: "10", cy: "10", rx: "3.5", ry: "2.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })] }));
+};
+export default ViewQuotationIcon;

package/dist/components/atoms/Icon/icons/registry.d.ts

@@ -77,5 +77,6 @@ export declare const ICONS: {
     readonly 'close-circle': IconComponent;
     readonly clock: IconComponent;
     readonly 'info-2': IconComponent;
+    readonly 'view-quotation': IconComponent;
 };
 export type IconName = keyof typeof ICONS;

package/dist/components/atoms/Icon/icons/registry.js

@@ -70,6 +70,7 @@ import TwitterIcon from './TwitterIcon';
 import User from './User';
 import UserIcon from './UserIcon';
 import UtensilsIcon from './Utensils';
+import ViewQuotationIcon from './ViewQuotationIcon';
 import WalletIcon from './WalletIcon';
 import YouTubeIcon from './Youtube';
 var ChevronDown = function (props) { return _jsx(Chevron, __assign({ direction: "down" }, props)); };
@@ -148,4 +149,5 @@ export var ICONS = {
     'close-circle': CloseCircleIcon,
     clock: ClockIcon,
     'info-2': Info2Icon,
+    'view-quotation': ViewQuotationIcon,
 };

package/dist/components/molecules/DateDisplay/DateDisplay.js

@@ -33,8 +33,8 @@ export function DateDisplay(props) {
     var textColor = colorMode === 'green' ? 'accent' : 'default';
     // Single date display (matching Figma design)
     if (formattedDates.length === 1) {
-        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] })] }));
+        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] })] }));
     }
     // Multiple dates display (backward compatibility)
-    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))); }) }));
+    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))); }) }));
 }

package/dist/components/organisms/Docket/Docket.js

@@ -43,7 +43,7 @@ export var DocketHeader = function (_a) {
 export var DocketFooter = function (_a) {
     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;
     var isSingleMode = mode === 'single';
-    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" }))] })] }));
+    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" })), !isSingleMode && onViewClick && (_jsx("div", { className: "docket__footer-view", children: _jsxs("button", { type: "button", onClick: onViewClick, className: "docket__footer-view-link", children: [_jsx(Icon, { name: "view-quotation", size: "sm", className: "docket__footer-view-icon" }), _jsx("span", { className: "docket__footer-view-text", children: "View quotation" })] }) })), _jsxs("div", { className: "docket__footer-actions", children: [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" }))] })] }));
 };
 /**
  * Docket is a container component for displaying quotation/docket information.

package/dist/styles/components/organism/docket.css

@@ -221,6 +221,52 @@
   min-width: 162px;
 }
 
+.docket__footer-view {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.docket__footer-view-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--component-button-spacing-ghost-sm-gap, 6px);
+  background: none;
+  border: none;
+  padding: var(--component-button-spacing-ghost-sm-padding-y, 0px) var(--component-button-spacing-ghost-sm-padding-x, 0px);
+  cursor: pointer;
+  font-family: var(--font-font-family-body, 'Satoshi', sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  font-weight: var(--font-weight-font-medium, 500);
+  line-height: var(--font-leading-leading-sm, 20px);
+  color: var(--color-button-ghost-foreground-default, #78716c);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.docket__footer-view-link:hover {
+  color: var(--color-button-ghost-foreground-hover, #44403c);
+}
+
+.docket__footer-view-link:active {
+  color: var(--color-button-ghost-foreground-pressed, #1c1917);
+}
+
+.docket__footer-view-link:focus {
+  outline: none;
+  color: var(--color-button-ghost-foreground-focused, #1c1917);
+}
+
+.docket__footer-view-text {
+  display: inline-block;
+}
+
+.docket__footer-view-icon {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+}
+
 .docket__footer-actions {
   display: flex;
   gap: var(--spacing-gap-md, 8px);

package/dist/styles/components/organism/topnavigation.css

@@ -4,9 +4,9 @@
 
 .header {
   display: flex;
-  height: 4.5rem;
+  height: 78px;
   width: 100%;
-  gap: 1.375rem;
+  gap: 56px;
   padding-left: 1rem;
   padding-right: 1rem;
   --tw-shadow: 0 3px 8px #00000040;
@@ -54,14 +54,19 @@
   display: flex;
   height: 100%;
   align-items: stretch;
+  gap: 0px;
+  padding-right: 2rem;
 }
 
 .header__item {
   display: flex;
   height: 100%;
-  min-width: 8.1875rem;
   align-items: center;
   justify-content: center;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
     font-weight: var(--typography-font-weight-regular);
     font-style: Regular;
     font-size: var(--typography-font-size-base);
@@ -75,6 +80,18 @@
   }
 }
 
+.header__item-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+    min-height: 24px;
+}
+
 .header__item--active {
   border-left-width: 4px;
   border-color: var(--color-sandy-brown-500);
@@ -117,10 +134,10 @@
 
 .header__item__link {
   display: block;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.72",
+  "version": "0.2.74",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/atoms/Icon/icons/ViewQuotationIcon.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+interface ViewQuotationIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const ViewQuotationIcon: React.FC<ViewQuotationIconProps> = ({
+  size = 'md',
+  className = '',
+  color,
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs':
+        return 'w-3 h-3';
+      case 'sm':
+        return 'w-4 h-4';
+      case 'md':
+        return 'w-5 h-5';
+      case 'lg':
+        return 'w-6 h-6';
+      case 'xl':
+        return 'w-8 h-8';
+      default:
+        return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      {/* Square frame */}
+      <rect
+        x="4"
+        y="4"
+        width="12"
+        height="12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        fill="none"
+        strokeLinecap="round"
+      />
+      {/* Corner brackets extending outward - top-left */}
+      <path
+        d="M4 4L4 1M4 4L1 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Corner brackets - top-right */}
+      <path
+        d="M16 4L16 1M16 4L19 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Corner brackets - bottom-left */}
+      <path
+        d="M4 16L4 19M4 16L1 16"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Corner brackets - bottom-right */}
+      <path
+        d="M16 16L16 19M16 16L19 16"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Eye shape */}
+      <ellipse
+        cx="10"
+        cy="10"
+        rx="3.5"
+        ry="2.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        fill="none"
+      />
+      {/* Eye pupil */}
+      <circle
+        cx="10"
+        cy="10"
+        r="1.5"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ViewQuotationIcon;

package/src/components/atoms/Icon/icons/registry.tsx

@@ -60,6 +60,7 @@ import TwitterIcon from './TwitterIcon';
 import User from './User';
 import UserIcon from './UserIcon';
 import UtensilsIcon from './Utensils';
+import ViewQuotationIcon from './ViewQuotationIcon';
 import WalletIcon from './WalletIcon';
 import YouTubeIcon from './Youtube';
 
@@ -152,6 +153,7 @@ export const ICONS = {
   'close-circle': CloseCircleIcon as unknown as IconComponent,
   clock: ClockIcon as unknown as IconComponent,
   'info-2': Info2Icon as unknown as IconComponent,
+  'view-quotation': ViewQuotationIcon as unknown as IconComponent,
 } as const satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof ICONS;

package/src/components/molecules/DateDisplay/DateDisplay.tsx

@@ -66,7 +66,7 @@ export function DateDisplay(props: DateDisplayProps) {
   if (formattedDates.length === 1) {
     return (
       <div className={`date-display date-display--${colorMode} ${className}`}>
-        <Icon name="calendar" size={calendarSize} color={iconColor} />
+        <Icon name="calendar2" size={calendarSize} color={iconColor} />
         <Text variant="medium" size={textSize} color={textColor}>
           {formattedDates[0]}
         </Text>
@@ -81,7 +81,7 @@ export function DateDisplay(props: DateDisplayProps) {
       {formattedDates.map((formattedDate, index) => (
         <Fragment key={`dd-${index}`}>
           <span className="date-display__item">
-            <Icon name="calendar" size={calendarSize} color={iconColor} />
+            <Icon name="calendar2" size={calendarSize} color={iconColor} />
             <Text variant="medium" size={textSize} color={textColor}>
               {formattedDate}
             </Text>

package/src/components/organisms/Docket/Docket.tsx

@@ -275,23 +275,25 @@ export const DocketFooter: React.FC<DocketFooterProps> = ({
           Add new quote
         </Button>
       )}
-      <div className="docket__footer-actions">
-        {!isSingleMode && onViewClick && (
-          <Button
-            variant="outline-secondary"
-            size="sm"
+      {!isSingleMode && onViewClick && (
+        <div className="docket__footer-view">
+          <button
+            type="button"
             onClick={onViewClick}
-            className="docket__footer-button">
-            View
-          </Button>
-        )}
+            className="docket__footer-view-link">
+            <Icon name="view-quotation" size="sm" className="docket__footer-view-icon" />
+            <span className="docket__footer-view-text">View quotation</span>
+          </button>
+        </div>
+      )}
+      <div className="docket__footer-actions">
         {onSaveClick && (
           <Button
             variant="outline-secondary"
             size="sm"
             onClick={onSaveClick}
             className="docket__footer-button">
-            Save
+            Save quotation
           </Button>
         )}
         {onBookNowClick && (

package/src/styles/components/organism/docket.css

@@ -207,6 +207,52 @@
   min-width: 162px;
 }
 
+.docket__footer-view {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.docket__footer-view-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--component-button-spacing-ghost-sm-gap, 6px);
+  background: none;
+  border: none;
+  padding: var(--component-button-spacing-ghost-sm-padding-y, 0px) var(--component-button-spacing-ghost-sm-padding-x, 0px);
+  cursor: pointer;
+  font-family: var(--font-font-family-body, 'Satoshi', sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  font-weight: var(--font-weight-font-medium, 500);
+  line-height: var(--font-leading-leading-sm, 20px);
+  color: var(--color-button-ghost-foreground-default, #78716c);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.docket__footer-view-link:hover {
+  color: var(--color-button-ghost-foreground-hover, #44403c);
+}
+
+.docket__footer-view-link:active {
+  color: var(--color-button-ghost-foreground-pressed, #1c1917);
+}
+
+.docket__footer-view-link:focus {
+  outline: none;
+  color: var(--color-button-ghost-foreground-focused, #1c1917);
+}
+
+.docket__footer-view-text {
+  display: inline-block;
+}
+
+.docket__footer-view-icon {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+}
+
 .docket__footer-actions {
   display: flex;
   gap: var(--spacing-gap-md, 8px);

package/src/styles/components/organism/topnavigation.css

@@ -1,5 +1,5 @@
 .header {
-    @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];
+    @apply flex md:justify-between w-full h-[78px] px-4 lg:px-24 shadow-[0_3px_8px_#00000040] sm:justify-start gap-[56px];
 }
 
 .header-logo {
@@ -11,11 +11,11 @@
 }
 
 .header-nav__items {
-    @apply flex items-stretch h-full;
+    @apply flex items-stretch h-full gap-0 pr-8;
 }
 
 .header__item {
-    @apply min-w-[8.1875rem] flex justify-center h-full items-center;
+    @apply flex justify-center h-full items-center px-2 py-2;
     font-weight: var(--typography-font-weight-regular);
     font-style: Regular;
     font-size: var(--typography-font-size-base);
@@ -30,6 +30,11 @@
 
 }
 
+.header__item-content {
+    @apply flex items-center gap-2 px-3 py-2 h-full;
+    min-height: 24px;
+}
+
 .header__item--active {
     @apply lg:border-b-4 lg:border-l-0 border-l-4 border-[var(--color-sandy-brown-500)] text-[var(--color-text-brand)];
     font-weight: var(--typography-body-lg-6-font-weight-bold);
@@ -48,7 +53,7 @@
 }
 
 .header__item__link {
-    @apply block px-1 py-1 transition-colors;
+    @apply block px-3 py-2 transition-colors;
 }
 
 .header-nav__user-section {