mautourco-components 0.2.67 → 0.2.69
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.
- package/dist/components/organisms/CarBookingCard/CarBookingCard.css +1 -1
- package/dist/components/organisms/CarBookingCard/CarBookingCard.js +2 -2
- package/dist/components/organisms/Table/Table.js +3 -1
- package/package.json +1 -1
- package/src/components/organisms/CarBookingCard/CarBookingCard.css +1 -1
- package/src/components/organisms/CarBookingCard/CarBookingCard.tsx +32 -32
- package/src/components/organisms/Table/Table.tsx +4 -1
|
@@ -32,9 +32,9 @@ var CarBookingCard = function (_a) {
|
|
|
32
32
|
]
|
|
33
33
|
.filter(Boolean)
|
|
34
34
|
.join(' ');
|
|
35
|
-
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: [
|
|
35
|
+
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) {
|
|
36
36
|
var _a;
|
|
37
37
|
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)));
|
|
38
|
-
}) }), 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 }))] })), !readonly && _jsxs("footer", { className: "car-booking-card__footer", children: [_jsxs("div", { className: "car-booking-card__total", children: [_jsx(Text, { size: "
|
|
38
|
+
}) }), 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 })))] })] })] }));
|
|
39
39
|
};
|
|
40
40
|
export default CarBookingCard;
|
|
@@ -86,7 +86,9 @@ export function Table(props) {
|
|
|
86
86
|
'table__row-clickable': onClickRow,
|
|
87
87
|
'table__row-highlighted': row.isHighlighted,
|
|
88
88
|
}), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row, { parentIndex: rowIndex }); }, children: row.isHighlighted ? (_jsx("td", { colSpan: columns.length, className: "table__cell-highlighted", children: _jsx("div", { className: "table__row-div-highlighted", children: _jsx("table", { className: "table", children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) }) }) }) }) })) : (_jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex })) }));
|
|
89
|
-
return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", { className:
|
|
89
|
+
return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", { className: cn('table__row-grouped', row.className, {
|
|
90
|
+
'table__row-div-highlighted': row.isHighlighted,
|
|
91
|
+
}), children: _jsx("td", { colSpan: columns.length, children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow, parentIndex: rowIndex }) }) })) : (defaultTable)) : !row.children ? (defaultTable) : (_jsx("tr", { className: "table__row-with-children", children: _jsx("td", { colSpan: columns.length, className: cn({
|
|
90
92
|
'table__children--visible': hasVisibleChildren,
|
|
91
93
|
}), children: _jsx("div", { className: "table__children-wrapper", children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {
|
|
92
94
|
'table__row-nested': row.children && row.children.length > 0,
|
package/package.json
CHANGED
|
@@ -116,37 +116,6 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
|
|
|
116
116
|
<div className="car-booking-card__active-divider" />
|
|
117
117
|
|
|
118
118
|
<div className="car-booking-card__body">
|
|
119
|
-
{priceRows.length > 0 && !readonly && (
|
|
120
|
-
<section className="car-booking-card__section car-booking-card__section--price">
|
|
121
|
-
<Divider variant="dashed" className="car-booking-card__dashed-divider" />
|
|
122
|
-
<div className="car-booking-card__price-content">
|
|
123
|
-
<Text
|
|
124
|
-
as="h3"
|
|
125
|
-
size="md"
|
|
126
|
-
variant="bold"
|
|
127
|
-
leading="none"
|
|
128
|
-
color="default"
|
|
129
|
-
className="car-booking-card__section-title"
|
|
130
|
-
>
|
|
131
|
-
{priceTitle}
|
|
132
|
-
</Text>
|
|
133
|
-
<div className="car-booking-card__price-rows">
|
|
134
|
-
{priceRows.map((row, idx) => (
|
|
135
|
-
<div key={`${row.label}-${idx}`} className="car-booking-card__price-row">
|
|
136
|
-
<Text size="sm" leading="5" variant="regular" color="subtle" className="car-booking-card__price-label">
|
|
137
|
-
{row.label}
|
|
138
|
-
</Text>
|
|
139
|
-
<Text size="sm" leading="5" variant="bold" color="subtle" className="car-booking-card__price-value">
|
|
140
|
-
{row.value}
|
|
141
|
-
</Text>
|
|
142
|
-
</div>
|
|
143
|
-
))}
|
|
144
|
-
</div>
|
|
145
|
-
</div>
|
|
146
|
-
<Divider variant="dashed" className="car-booking-card__dashed-divider" />
|
|
147
|
-
</section>
|
|
148
|
-
)}
|
|
149
|
-
|
|
150
119
|
<section className="car-booking-card__section car-booking-card__section--content">
|
|
151
120
|
<div className="car-booking-card__title">
|
|
152
121
|
<span className="car-booking-card__title-marker" aria-hidden="true" />
|
|
@@ -225,9 +194,40 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
|
|
|
225
194
|
</section>
|
|
226
195
|
)}
|
|
227
196
|
|
|
197
|
+
{priceRows.length > 0 && !readonly && (
|
|
198
|
+
<section className="car-booking-card__section car-booking-card__section--price">
|
|
199
|
+
<Divider variant="dashed" className="car-booking-card__dashed-divider" />
|
|
200
|
+
<div className="car-booking-card__price-content">
|
|
201
|
+
<Text
|
|
202
|
+
as="h3"
|
|
203
|
+
size="md"
|
|
204
|
+
variant="bold"
|
|
205
|
+
leading="none"
|
|
206
|
+
color="default"
|
|
207
|
+
className="car-booking-card__section-title"
|
|
208
|
+
>
|
|
209
|
+
{priceTitle}
|
|
210
|
+
</Text>
|
|
211
|
+
<div className="car-booking-card__price-rows">
|
|
212
|
+
{priceRows.map((row, idx) => (
|
|
213
|
+
<div key={`${row.label}-${idx}`} className="car-booking-card__price-row">
|
|
214
|
+
<Text size="sm" leading="5" variant="regular" color="subtle" className="car-booking-card__price-label">
|
|
215
|
+
{row.label}
|
|
216
|
+
</Text>
|
|
217
|
+
<Text size="sm" leading="5" variant="bold" color="subtle" className="car-booking-card__price-value">
|
|
218
|
+
{row.value}
|
|
219
|
+
</Text>
|
|
220
|
+
</div>
|
|
221
|
+
))}
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
<Divider variant="dashed" className="car-booking-card__dashed-divider" />
|
|
225
|
+
</section>
|
|
226
|
+
)}
|
|
227
|
+
|
|
228
228
|
{!readonly && <footer className="car-booking-card__footer">
|
|
229
229
|
<div className="car-booking-card__total">
|
|
230
|
-
<Text size="
|
|
230
|
+
<Text size="base" variant="bold" color="accent" className="car-booking-card__total-price">
|
|
231
231
|
{totalPrice}
|
|
232
232
|
</Text>
|
|
233
233
|
<Text size="sm" variant="regular" color="subtle" className="car-booking-card__total-label">
|
|
@@ -239,7 +239,10 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
|
|
|
239
239
|
<Fragment key={`rw-${rowIndex}`}>
|
|
240
240
|
{isGrouped ? (
|
|
241
241
|
row.children && row.children.length > 0 ? (
|
|
242
|
-
<tr
|
|
242
|
+
<tr
|
|
243
|
+
className={cn('table__row-grouped', row.className, {
|
|
244
|
+
'table__row-div-highlighted': row.isHighlighted,
|
|
245
|
+
})}>
|
|
243
246
|
<td colSpan={columns.length}>
|
|
244
247
|
<NestedContent<T>
|
|
245
248
|
isGrouped={isGrouped}
|