mautourco-components 0.2.8 → 0.2.10

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ButtonProps } from '../../atoms/Button/Button';
+import { FeatureRowProps } from '../../molecules/FeatureRow/FeatureRow';
+import './CarBookingCard.css';
+export type CarBookingCardSize = 'small' | 'large';
+export type CarBookingCardState = 'default' | 'selected' | 'hover';
+export type CarBookingCardType = 'default' | 'no-of-pax' | 'no-of-vehicle';
+export type CarBookingCardPriceRow = {
+    label: string;
+    value: string;
+};
+export interface CarBookingCardProps {
+    /** Vehicle image url */
+    imageSrc: string;
+    /** Card title */
+    title: string;
+    /** Size variant */
+    size?: CarBookingCardSize;
+    /** Visual state (for Storybook parity with Figma variants) */
+    state?: CarBookingCardState;
+    /** Variant used in Figma: affects which breakdown row is shown (optional) */
+    type?: CarBookingCardType;
+    /** Feature rows displayed under the title */
+    features: FeatureRowProps[];
+    /** Optional info note below features */
+    infoText?: string;
+    /** Price breakdown section */
+    priceTitle?: string;
+    priceRows?: CarBookingCardPriceRow[];
+    /** 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.") */
+    supplementMessage?: string;
+    supplementLabel?: string;
+    supplementPlaceholder?: string;
+    supplementValue?: string;
+    supplementState?: 'default' | 'loading' | 'selected' | 'error' | 'disabled';
+    supplementOptions?: string[];
+    onSupplementSelect?: (option: string) => void;
+    /** Footer price */
+    totalPrice: string;
+    totalPriceLabel?: string;
+    /** Footer CTA */
+    ctaLabel: string;
+    ctaButtonProps?: Omit<ButtonProps, 'children'>;
+    onCtaClick?: ButtonProps['onClick'];
+    className?: string;
+}
+declare const CarBookingCard: React.FC<CarBookingCardProps>;
+export default CarBookingCard;

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

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from '../../atoms/Button/Button';
+import Divider from '../../atoms/Divider/Divider';
+import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import { Heading, Text } from '../../atoms/Typography/Typography';
+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.className, className = _o === void 0 ? '' : _o;
+    var resolvedShowSupplement = showSupplement !== null && showSupplement !== void 0 ? showSupplement : Boolean(supplementLabel || supplementPlaceholder || supplementOptions.length > 0);
+    var resolvedSupplementState = supplementMessage ? 'disabled' : supplementState;
+    var baseClass = 'car-booking-card';
+    var classes = [
+        baseClass,
+        "".concat(baseClass, "--").concat(size),
+        "".concat(baseClass, "--").concat(state),
+        "".concat(baseClass, "--").concat(type),
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("article", __assign({ className: classes }, { children: [_jsx("div", __assign({ 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", __assign({ className: "car-booking-card__body" }, { children: [priceRows.length > 0 && (_jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--price" }, { children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", __assign({ className: "car-booking-card__price-content" }, { children: [_jsx(Text, __assign({ as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title" }, { children: priceTitle })), _jsx("div", __assign({ className: "car-booking-card__price-rows" }, { children: priceRows.map(function (row, idx) { return (_jsxs("div", __assign({ className: "car-booking-card__price-row" }, { children: [_jsx(Text, __assign({ size: "sm", leading: "5", variant: "regular", color: "subtle", className: "car-booking-card__price-label" }, { children: row.label })), _jsx(Text, __assign({ 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" })] }))), _jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--content" }, { children: [_jsxs("div", __assign({ className: "car-booking-card__title" }, { children: [_jsx("span", { className: "car-booking-card__title-marker", "aria-hidden": "true" }), _jsx(Heading, __assign({ level: 4, variant: "bold", color: "accent", className: "car-booking-card__title-text" }, { children: title }))] })), _jsx("div", __assign({ 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 && (_jsxs("div", __assign({ className: "car-booking-card__info" }, { children: [_jsx("span", __assign({ className: "car-booking-card__info-icon", "aria-hidden": "true" }, { children: "i" })), _jsx(Text, __assign({ size: "sm", leading: "5", variant: "regular", color: "default", className: "car-booking-card__info-text" }, { children: infoText }))] })))] })), resolvedShowSupplement && (_jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--supplement" }, { children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", __assign({ className: "car-booking-card__supplement-header" }, { children: [_jsx(Text, __assign({ as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title" }, { children: supplementLabel })), supplementMessage && (_jsx(Text, __assign({ as: "p", size: "sm", leading: "5", variant: "regular", className: "car-booking-card__supplement-message" }, { children: supplementMessage })))] })), _jsx(DropdownInput, { placeholder: supplementPlaceholder, value: supplementValue, state: resolvedSupplementState, options: supplementOptions, onSelect: onSupplementSelect })] }))), _jsxs("footer", __assign({ className: "car-booking-card__footer" }, { children: [_jsxs("div", __assign({ className: "car-booking-card__total" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "bold", color: "accent", className: "car-booking-card__total-price" }, { children: totalPrice })), _jsx(Text, __assign({ size: "sm", variant: "regular", color: "subtle", className: "car-booking-card__total-label" }, { children: totalPriceLabel }))] })), _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 }))] }))] }))] })));
+};
+export default CarBookingCard;

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

@@ -0,0 +1,2 @@
+export { default } from './CarBookingCard';
+export type { CarBookingCardProps, CarBookingCardPriceRow, CarBookingCardSize, CarBookingCardState, CarBookingCardType, } from './CarBookingCard';

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

@@ -0,0 +1 @@
+export { default } from './CarBookingCard';