mautourco-components 0.2.74 → 0.2.76

package/dist/components/molecules/FeatureRow/FeatureRow.css

@@ -53,4 +53,8 @@
   color: var(--color-text-default, #262626);
   letter-spacing: var(--font-tracking-tracking-normal, 0px);
   white-space: nowrap;
+}
+
+.feature-row__value-text--not-applicable {
+  color: var(--color-messaging-danger-foreground, #a01414);
 }

package/dist/components/molecules/FeatureRow/FeatureRow.d.ts

@@ -10,6 +10,8 @@ export interface FeatureRowProps {
     icon?: IconName;
     /** Size of the icon */
     iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** State variant: 'not-applicable' applies error/danger styling to the value */
+    state?: 'default' | 'not-applicable';
     /** Additional CSS classes */
     className?: string;
 }

package/dist/components/molecules/FeatureRow/FeatureRow.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '../../atoms/Icon/Icon';
 import Divider from '../../atoms/Divider/Divider';
+import Icon from '../../atoms/Icon/Icon';
 import './FeatureRow.css';
 var FeatureRow = function (_a) {
-    var label = _a.label, value = _a.value, icon = _a.icon, _b = _a.iconSize, iconSize = _b === void 0 ? 'sm' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    var label = _a.label, value = _a.value, icon = _a.icon, _b = _a.iconSize, iconSize = _b === void 0 ? 'sm' : _b, _c = _a.state, state = _c === void 0 ? 'default' : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
     var baseClass = 'feature-row';
-    var classes = [baseClass, className].filter(Boolean).join(' ');
-    return (_jsxs("div", { className: classes, children: [_jsx("div", { className: "feature-row__label", children: _jsx("span", { className: "feature-row__label-text", children: label }) }), _jsx(Divider, { orientation: "vertical", className: "feature-row__divider" }), _jsxs("div", { className: "feature-row__value", children: [icon && (_jsx(Icon, { name: icon, size: iconSize, className: "feature-row__value-icon" })), _jsx("span", { className: "feature-row__value-text", children: value })] })] }));
+    var classes = [
+        baseClass,
+        state === 'not-applicable' ? "".concat(baseClass, "--not-applicable") : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: classes, children: [_jsx("div", { className: "feature-row__label", children: _jsx("span", { className: "feature-row__label-text", children: label }) }), _jsx(Divider, { orientation: "vertical", className: "feature-row__divider" }), _jsxs("div", { className: "feature-row__value", children: [icon && (_jsx(Icon, { name: icon, size: iconSize, className: "feature-row__value-icon" })), _jsx("span", { className: "feature-row__value-text ".concat(state === 'not-applicable' ? 'feature-row__value-text--not-applicable' : '').trim(), children: value })] })] }));
 };
 export default FeatureRow;

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

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import Divider from '../../atoms/Divider/Divider';
 import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
@@ -19,13 +20,48 @@ 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 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"
+    var handleCtaClick = function (e) {
+        setIsSelected(!isSelected);
+        onCtaClick === null || onCtaClick === void 0 ? void 0 : onCtaClick(e);
+    };
+    // Determine button state based on selection and hover
+    var shouldShowRemove = isSelected && isHovered;
+    var shouldShowSelected = isSelected && !isHovered;
+    var resolvedCtaLabel = shouldShowRemove
+        ? 'Remove'
+        : shouldShowSelected
+            ? 'Selected'
+            : ctaLabel;
+    var resolvedCtaButtonProps = shouldShowRemove
+        ? {
+            variant: 'destructive',
+            size: 'sm',
+            leadingIcon: 'close',
+            iconSize: 'sm',
+        }
+        : shouldShowSelected
+            ? {
+                variant: 'secondary',
+                size: 'sm',
+                leadingIcon: 'check-circle',
+                iconSize: 'sm',
+            }
+            : {
+                variant: 'primary',
+                size: 'sm',
+            };
+    // Update card state class based on selection
+    var resolvedState = isSelected ? 'selected' : state;
     var baseClass = 'car-booking-card';
     var classes = [
         baseClass,
         "".concat(baseClass, "--").concat(size),
-        "".concat(baseClass, "--").concat(state),
+        "".concat(baseClass, "--").concat(resolvedState),
         "".concat(baseClass, "--").concat(type),
         readonly ? "".concat(baseClass, "--readonly") : '',
         className,
@@ -35,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(Button, __assign({ variant: "primary", size: "sm" }, ctaButtonProps, { onClick: onCtaClick, className: "car-booking-card__cta ".concat((_b = ctaButtonProps === null || ctaButtonProps === void 0 ? void 0 : ctaButtonProps.className) !== null && _b !== void 0 ? _b : '').trim(), children: ctaLabel })))] })] })] }));
+                                }) }), 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 })) }))] })] })] }));
 };
 export default CarBookingCard;

package/package.json

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

package/src/components/molecules/FeatureRow/FeatureRow.css

@@ -51,3 +51,7 @@
   white-space: nowrap;
 }
 
+.feature-row__value-text--not-applicable {
+  color: var(--color-messaging-danger-foreground, #a01414);
+}
+

package/src/components/molecules/FeatureRow/FeatureRow.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Icon, { IconName } from '../../atoms/Icon/Icon';
 import Divider from '../../atoms/Divider/Divider';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
 import './FeatureRow.css';
 
 export interface FeatureRowProps {
@@ -12,6 +12,8 @@ export interface FeatureRowProps {
   icon?: IconName;
   /** Size of the icon */
   iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** State variant: 'not-applicable' applies error/danger styling to the value */
+  state?: 'default' | 'not-applicable';
   /** Additional CSS classes */
   className?: string;
 }
@@ -21,10 +23,17 @@ const FeatureRow: React.FC<FeatureRowProps> = ({
   value,
   icon,
   iconSize = 'sm',
+  state = 'default',
   className = '',
 }) => {
   const baseClass = 'feature-row';
-  const classes = [baseClass, className].filter(Boolean).join(' ');
+  const classes = [
+    baseClass,
+    state === 'not-applicable' ? `${baseClass}--not-applicable` : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
     <div className={classes}>
@@ -36,7 +45,9 @@ const FeatureRow: React.FC<FeatureRowProps> = ({
         {icon && (
           <Icon name={icon} size={iconSize} className="feature-row__value-icon" />
         )}
-        <span className="feature-row__value-text">{value}</span>
+        <span className={`feature-row__value-text ${state === 'not-applicable' ? 'feature-row__value-text--not-applicable' : ''}`.trim()}>
+          {value}
+        </span>
       </div>
     </div>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Button, { ButtonProps } from '../../atoms/Button/Button';
 import Divider from '../../atoms/Divider/Divider';
 import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
@@ -90,16 +90,56 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
   readonly = false,
   className = '',
 }) => {
+  const [isSelected, setIsSelected] = useState(state === 'selected');
+  const [isHovered, setIsHovered] = useState(false);
+  
   const resolvedShowSupplement =
     showSupplement ?? Boolean(supplementLabel || supplementPlaceholder || supplementOptions.length > 0);
   const resolvedSupplementState =
     supplementMessage ? 'disabled' : supplementState;
 
+  // Handle CTA click: toggle between "Add to quote" and "Selected"
+  const handleCtaClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setIsSelected(!isSelected);
+    onCtaClick?.(e);
+  };
+
+  // Determine button state based on selection and hover
+  const shouldShowRemove = isSelected && isHovered;
+  const shouldShowSelected = isSelected && !isHovered;
+  
+  const resolvedCtaLabel = shouldShowRemove 
+    ? 'Remove' 
+    : shouldShowSelected 
+    ? 'Selected' 
+    : ctaLabel;
+  
+  const resolvedCtaButtonProps: Omit<ButtonProps, 'children'> = shouldShowRemove
+    ? {
+        variant: 'destructive',
+        size: 'sm',
+        leadingIcon: 'close',
+        iconSize: 'sm',
+      }
+    : shouldShowSelected
+    ? {
+        variant: 'secondary',
+        size: 'sm',
+        leadingIcon: 'check-circle',
+        iconSize: 'sm',
+      }
+    : {
+        variant: 'primary',
+        size: 'sm',
+      };
+
+  // Update card state class based on selection
+  const resolvedState = isSelected ? 'selected' : state;
   const baseClass = 'car-booking-card';
   const classes = [
     baseClass,
     `${baseClass}--${size}`,
-    `${baseClass}--${state}`,
+    `${baseClass}--${resolvedState}`,
     `${baseClass}--${type}`,
     readonly ? `${baseClass}--readonly` : '',
     className,
@@ -236,15 +276,19 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
           </div>
 
           {!readonly && (
-            <Button
-              variant="primary"
-              size="sm"
-              {...ctaButtonProps}
-              onClick={onCtaClick}
-              className={`car-booking-card__cta ${ctaButtonProps?.className ?? ''}`.trim()}
+            <div
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+              className="car-booking-card__cta-wrapper"
             >
-              {ctaLabel}
-            </Button>
+              <Button
+                {...resolvedCtaButtonProps}
+                onClick={handleCtaClick}
+                className={`car-booking-card__cta ${resolvedCtaButtonProps?.className ?? ''}`.trim()}
+              >
+                {resolvedCtaLabel}
+              </Button>
+            </div>
           )}
         </footer>}
       </div>