mautourco-components 0.2.76 → 0.2.77

package/dist/components/organisms/CarBookingCard/CarBookingCard.css

@@ -137,12 +137,15 @@
 
 .car-booking-card__supplement-message {
   margin: 0;
-  color: var(--color-messaging-danger-foreground, #a01414);
   white-space: normal;
   text-align: right;
   flex: 1 1 auto;
 }
 
+.car-booking-card__supplement-header .car-booking-card__supplement-message--error {
+  color: var(--color-messaging-danger-foreground, #a01414);
+}
+
 .car-booking-card__section--supplement {
   /* Control spacing precisely: divider -> header != header -> select */
   gap: 0;

package/dist/components/organisms/CarBookingCard/CarBookingCard.d.ts

@@ -30,8 +30,10 @@ export interface CarBookingCardProps {
     /** Supplement dropdown section */
     /** Whether to render the supplement section (matches Figma variants Supplement=Yes/No/-) */
     showSupplement?: boolean;
-    /** Optional message shown in red next to the "Supplement" label (Figma: "Supplement is not available for this vehicle.") */
+    /** Optional message shown next to the "Supplement" label (Figma: "Supplement is not available for this vehicle.") */
     supplementMessage?: string;
+    /** State variant for the supplement message: 'error' applies danger/red styling, 'default' uses normal text color */
+    supplementMessageState?: 'default' | 'error';
     supplementLabel?: string;
     supplementPlaceholder?: string;
     supplementValue?: string;

package/dist/components/organisms/CarBookingCard/CarBookingCard.js

@@ -19,9 +19,9 @@ import FeatureRow from '../../molecules/FeatureRow/FeatureRow';
 import './CarBookingCard.css';
 var CarBookingCard = function (_a) {
     var _b;
-    var imageSrc = _a.imageSrc, title = _a.title, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.state, state = _d === void 0 ? 'default' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e, features = _a.features, infoText = _a.infoText, _f = _a.priceTitle, priceTitle = _f === void 0 ? 'Price breakdown' : _f, _g = _a.priceRows, priceRows = _g === void 0 ? [] : _g, showSupplement = _a.showSupplement, supplementMessage = _a.supplementMessage, _h = _a.supplementLabel, supplementLabel = _h === void 0 ? 'Supplement' : _h, _j = _a.supplementPlaceholder, supplementPlaceholder = _j === void 0 ? 'Select a supplement' : _j, supplementValue = _a.supplementValue, _k = _a.supplementState, supplementState = _k === void 0 ? 'default' : _k, _l = _a.supplementOptions, supplementOptions = _l === void 0 ? [] : _l, onSupplementSelect = _a.onSupplementSelect, totalPrice = _a.totalPrice, _m = _a.totalPriceLabel, totalPriceLabel = _m === void 0 ? 'Total price' : _m, ctaLabel = _a.ctaLabel, ctaButtonProps = _a.ctaButtonProps, onCtaClick = _a.onCtaClick, _o = _a.readonly, readonly = _o === void 0 ? false : _o, _p = _a.className, className = _p === void 0 ? '' : _p;
-    var _q = useState(state === 'selected'), isSelected = _q[0], setIsSelected = _q[1];
-    var _r = useState(false), isHovered = _r[0], setIsHovered = _r[1];
+    var imageSrc = _a.imageSrc, title = _a.title, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.state, state = _d === void 0 ? 'default' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e, features = _a.features, infoText = _a.infoText, _f = _a.priceTitle, priceTitle = _f === void 0 ? 'Price breakdown' : _f, _g = _a.priceRows, priceRows = _g === void 0 ? [] : _g, showSupplement = _a.showSupplement, supplementMessage = _a.supplementMessage, _h = _a.supplementMessageState, supplementMessageState = _h === void 0 ? 'error' : _h, _j = _a.supplementLabel, supplementLabel = _j === void 0 ? 'Supplement' : _j, _k = _a.supplementPlaceholder, supplementPlaceholder = _k === void 0 ? 'Select a supplement' : _k, supplementValue = _a.supplementValue, _l = _a.supplementState, supplementState = _l === void 0 ? 'default' : _l, _m = _a.supplementOptions, supplementOptions = _m === void 0 ? [] : _m, onSupplementSelect = _a.onSupplementSelect, totalPrice = _a.totalPrice, _o = _a.totalPriceLabel, totalPriceLabel = _o === void 0 ? 'Total price' : _o, ctaLabel = _a.ctaLabel, ctaButtonProps = _a.ctaButtonProps, onCtaClick = _a.onCtaClick, _p = _a.readonly, readonly = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? '' : _q;
+    var _r = useState(state === 'selected'), isSelected = _r[0], setIsSelected = _r[1];
+    var _s = useState(false), isHovered = _s[0], setIsHovered = _s[1];
     var resolvedShowSupplement = showSupplement !== null && showSupplement !== void 0 ? showSupplement : Boolean(supplementLabel || supplementPlaceholder || supplementOptions.length > 0);
     var resolvedSupplementState = supplementMessage ? 'disabled' : supplementState;
     // Handle CTA click: toggle between "Add to quote" and "Selected"
@@ -71,6 +71,6 @@ var CarBookingCard = function (_a) {
     return (_jsxs("article", { className: classes, children: [_jsx("div", { className: "car-booking-card__image-wrap", children: _jsx("img", { className: "car-booking-card__image", src: imageSrc, alt: "" }) }), _jsx("div", { className: "car-booking-card__active-divider" }), _jsxs("div", { className: "car-booking-card__body", children: [_jsxs("section", { className: "car-booking-card__section car-booking-card__section--content", children: [_jsxs("div", { className: "car-booking-card__title", children: [_jsx("span", { className: "car-booking-card__title-marker", "aria-hidden": "true" }), _jsx(Heading, { level: 4, variant: "bold", color: "accent", className: "car-booking-card__title-text", children: title })] }), _jsx("div", { className: "car-booking-card__features", children: features.map(function (feature, idx) {
                                     var _a;
                                     return (_jsx(FeatureRow, __assign({}, feature, { className: "car-booking-card__feature-row ".concat((_a = feature.className) !== null && _a !== void 0 ? _a : '').trim() }), "".concat(feature.label, "-").concat(idx)));
-                                }) }), infoText && !readonly && (_jsxs("div", { className: "car-booking-card__info", children: [_jsx("span", { className: "car-booking-card__info-icon", "aria-hidden": "true", children: "i" }), _jsx(Text, { size: "sm", leading: "5", variant: "regular", color: "default", className: "car-booking-card__info-text", children: infoText })] }))] }), resolvedShowSupplement && !readonly && (_jsxs("section", { className: "car-booking-card__section car-booking-card__section--supplement", children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", { className: "car-booking-card__supplement-header", children: [_jsx(Text, { as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title", children: supplementLabel }), supplementMessage && (_jsx(Text, { as: "p", size: "sm", leading: "5", variant: "regular", className: "car-booking-card__supplement-message", children: supplementMessage }))] }), readonly ? (_jsx(Text, { size: "sm", leading: "5", variant: "regular", color: supplementValue ? "default" : "subtle", className: "car-booking-card__supplement-value", children: supplementValue || supplementPlaceholder })) : (_jsx(DropdownInput, { placeholder: supplementPlaceholder, value: supplementValue, state: resolvedSupplementState, options: supplementOptions, onSelect: onSupplementSelect }))] })), priceRows.length > 0 && !readonly && (_jsxs("section", { className: "car-booking-card__section car-booking-card__section--price", children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", { className: "car-booking-card__price-content", children: [_jsx(Text, { as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title", children: priceTitle }), _jsx("div", { className: "car-booking-card__price-rows", children: priceRows.map(function (row, idx) { return (_jsxs("div", { className: "car-booking-card__price-row", children: [_jsx(Text, { size: "sm", leading: "5", variant: "regular", color: "subtle", className: "car-booking-card__price-label", children: row.label }), _jsx(Text, { size: "sm", leading: "5", variant: "bold", color: "subtle", className: "car-booking-card__price-value", children: row.value })] }, "".concat(row.label, "-").concat(idx))); }) })] }), _jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" })] })), !readonly && _jsxs("footer", { className: "car-booking-card__footer", children: [_jsxs("div", { className: "car-booking-card__total", children: [_jsx(Text, { size: "base", variant: "bold", color: "accent", className: "car-booking-card__total-price", children: totalPrice }), _jsx(Text, { size: "sm", variant: "regular", color: "subtle", className: "car-booking-card__total-label", children: totalPriceLabel })] }), !readonly && (_jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "car-booking-card__cta-wrapper", children: _jsx(Button, __assign({}, resolvedCtaButtonProps, { onClick: handleCtaClick, className: "car-booking-card__cta ".concat((_b = resolvedCtaButtonProps === null || resolvedCtaButtonProps === void 0 ? void 0 : resolvedCtaButtonProps.className) !== null && _b !== void 0 ? _b : '').trim(), children: resolvedCtaLabel })) }))] })] })] }));
+                                }) }), infoText && !readonly && (_jsxs("div", { className: "car-booking-card__info", children: [_jsx("span", { className: "car-booking-card__info-icon", "aria-hidden": "true", children: "i" }), _jsx(Text, { size: "sm", leading: "5", variant: "regular", color: "default", className: "car-booking-card__info-text", children: infoText })] }))] }), resolvedShowSupplement && !readonly && (_jsxs("section", { className: "car-booking-card__section car-booking-card__section--supplement", children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", { className: "car-booking-card__supplement-header", children: [_jsx(Text, { as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title", children: supplementLabel }), supplementMessage && (_jsx(Text, { as: "p", size: "sm", leading: "5", variant: "regular", className: "car-booking-card__supplement-message ".concat(supplementMessageState === 'error' ? 'car-booking-card__supplement-message--error' : '').trim(), children: supplementMessage }))] }), readonly ? (_jsx(Text, { size: "sm", leading: "5", variant: "regular", color: supplementValue ? "default" : "subtle", className: "car-booking-card__supplement-value", children: supplementValue || supplementPlaceholder })) : (_jsx(DropdownInput, { placeholder: supplementPlaceholder, value: supplementValue, state: resolvedSupplementState, options: supplementOptions, onSelect: onSupplementSelect }))] })), priceRows.length > 0 && !readonly && (_jsxs("section", { className: "car-booking-card__section car-booking-card__section--price", children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", { className: "car-booking-card__price-content", children: [_jsx(Text, { as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title", children: priceTitle }), _jsx("div", { className: "car-booking-card__price-rows", children: priceRows.map(function (row, idx) { return (_jsxs("div", { className: "car-booking-card__price-row", children: [_jsx(Text, { size: "sm", leading: "5", variant: "regular", color: "subtle", className: "car-booking-card__price-label", children: row.label }), _jsx(Text, { size: "sm", leading: "5", variant: "bold", color: "subtle", className: "car-booking-card__price-value", children: row.value })] }, "".concat(row.label, "-").concat(idx))); }) })] }), _jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" })] })), !readonly && _jsxs("footer", { className: "car-booking-card__footer", children: [_jsxs("div", { className: "car-booking-card__total", children: [_jsx(Text, { size: "base", variant: "bold", color: "accent", className: "car-booking-card__total-price", children: totalPrice }), _jsx(Text, { size: "sm", variant: "regular", color: "subtle", className: "car-booking-card__total-label", children: totalPriceLabel })] }), !readonly && (_jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "car-booking-card__cta-wrapper", children: _jsx(Button, __assign({}, resolvedCtaButtonProps, { onClick: handleCtaClick, className: "car-booking-card__cta ".concat((_b = resolvedCtaButtonProps === null || resolvedCtaButtonProps === void 0 ? void 0 : resolvedCtaButtonProps.className) !== null && _b !== void 0 ? _b : '').trim(), children: resolvedCtaLabel })) }))] })] })] }));
 };
 export default CarBookingCard;

package/package.json

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

package/src/components/organisms/CarBookingCard/CarBookingCard.css

@@ -133,12 +133,15 @@
 
 .car-booking-card__supplement-message {
   margin: 0;
-  color: var(--color-messaging-danger-foreground, #a01414);
   white-space: normal;
   text-align: right;
   flex: 1 1 auto;
 }
 
+.car-booking-card__supplement-header .car-booking-card__supplement-message--error {
+  color: var(--color-messaging-danger-foreground, #a01414);
+}
+
 .car-booking-card__section--supplement {
   /* Control spacing precisely: divider -> header != header -> select */
   gap: 0;

package/src/components/organisms/CarBookingCard/CarBookingCard.tsx

@@ -40,8 +40,10 @@ export interface CarBookingCardProps {
   /** Supplement dropdown section */
   /** Whether to render the supplement section (matches Figma variants Supplement=Yes/No/-) */
   showSupplement?: boolean;
-  /** Optional message shown in red next to the "Supplement" label (Figma: "Supplement is not available for this vehicle.") */
+  /** Optional message shown next to the "Supplement" label (Figma: "Supplement is not available for this vehicle.") */
   supplementMessage?: string;
+  /** State variant for the supplement message: 'error' applies danger/red styling, 'default' uses normal text color */
+  supplementMessageState?: 'default' | 'error';
   supplementLabel?: string;
   supplementPlaceholder?: string;
   supplementValue?: string;
@@ -76,6 +78,7 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
   priceRows = [],
   showSupplement,
   supplementMessage,
+  supplementMessageState = 'error',
   supplementLabel = 'Supplement',
   supplementPlaceholder = 'Select a supplement',
   supplementValue,
@@ -206,7 +209,7 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
                   size="sm"
                   leading="5"
                   variant="regular"
-                  className="car-booking-card__supplement-message"
+                  className={`car-booking-card__supplement-message ${supplementMessageState === 'error' ? 'car-booking-card__supplement-message--error' : ''}`.trim()}
                 >
                   {supplementMessage}
                 </Text>