kupos-ui-components-lib 10.4.76 → 10.4.77

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.
Files changed (5) hide show
  1. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +6 -6
  2. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +6 -6
  3. package/package.json +1 -1
  4. package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +6 -6
  5. package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +6 -6
package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js CHANGED
@@ -141,9 +141,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
141
141
  const isSelected = node.dataset.cardKey === key;
142
142
  node.style.border = isSelected ? CARD_SELECTED_BORDER : CARD_BORDER;
143
143
  node.style.boxShadow = isSelected ? CARD_SELECTED_SHADOW : "none";
144
- const check = node.querySelector("[data-card-check]");
145
- if (check)
146
- check.style.display = isSelected ? "flex" : "none";
144
+ // Crown stays on the lowest fare card — selection only moves the border
147
145
  });
148
146
  const card = serviceCards.find((c) => c.key === key);
149
147
  const price = getPriceInfo((card === null || card === void 0 ? void 0 : card.service) || sortedServices[0]);
@@ -278,8 +276,10 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
278
276
  // room for the crown badge that sits above the selected card
279
277
  paddingTop: "12px",
280
278
  scrollbarWidth: "none",
281
- } }, serviceCards.map((op) => {
279
+ } }, serviceCards.map((op, idx) => {
282
280
  const isSelected = op.key === (selectedCard === null || selectedCard === void 0 ? void 0 : selectedCard.key);
281
+ // Cards are sorted cheapest first, so index 0 is the lowest fare
282
+ const isLowestFare = idx === 0;
283
283
  return (React.createElement("div", { key: op.key, "data-card-key": op.key, role: "button", tabIndex: 0, "aria-pressed": isSelected, onClick: () => handleCardSelect(op.key), onKeyDown: (e) => {
284
284
  if (e.key === "Enter" || e.key === " ") {
285
285
  e.preventDefault();
@@ -295,8 +295,8 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
295
295
  borderRadius: "10px",
296
296
  transition: "border-color 150ms ease, box-shadow 150ms ease",
297
297
  } },
298
- React.createElement("span", { "data-card-check": "true", className: "absolute items-center justify-center", style: {
299
- display: isSelected ? "flex" : "none",
298
+ React.createElement("span", { className: "absolute items-center justify-center", style: {
299
+ display: isLowestFare ? "flex" : "none",
300
300
  top: "-12px",
301
301
  right: "-1px",
302
302
  width: "30px",
package/dist/ui/FeatureServiceUI/FeatureServiceUi.js CHANGED
@@ -142,9 +142,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
142
142
  const isSelected = node.dataset.cardKey === key;
143
143
  node.style.border = isSelected ? CARD_SELECTED_BORDER : CARD_BORDER;
144
144
  node.style.boxShadow = isSelected ? CARD_SELECTED_SHADOW : "none";
145
- const check = node.querySelector("[data-card-check]");
146
- if (check)
147
- check.style.display = isSelected ? "flex" : "none";
145
+ // Crown stays on the lowest fare card — selection only moves the border
148
146
  });
149
147
  const card = serviceCards.find((c) => c.key === key);
150
148
  const price = getPriceInfo((card === null || card === void 0 ? void 0 : card.service) || sortedServices[0]);
@@ -290,8 +288,10 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
290
288
  paddingTop: "12px",
291
289
  paddingBottom: 0,
292
290
  scrollbarWidth: "none",
293
- } }, serviceCards.map((op) => {
291
+ } }, serviceCards.map((op, idx) => {
294
292
  const isSelected = op.key === (selectedCard === null || selectedCard === void 0 ? void 0 : selectedCard.key);
293
+ // Cards are sorted cheapest first, so index 0 is the lowest fare
294
+ const isLowestFare = idx === 0;
295
295
  return (React.createElement("div", { key: op.key, "data-card-key": op.key, role: "button", tabIndex: 0, "aria-pressed": isSelected, onClick: () => handleCardSelect(op.key), onKeyDown: (e) => {
296
296
  if (e.key === "Enter" || e.key === " ") {
297
297
  e.preventDefault();
@@ -308,8 +308,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
308
308
  borderRadius: "12px",
309
309
  transition: "border-color 150ms ease, box-shadow 150ms ease",
310
310
  } },
311
- React.createElement("span", { "data-card-check": "true", className: "absolute items-center justify-center", style: {
312
- display: isSelected ? "flex" : "none",
311
+ React.createElement("span", { className: "absolute items-center justify-center", style: {
312
+ display: isLowestFare ? "flex" : "none",
313
313
  top: "-9px",
314
314
  right: "7px",
315
315
  width: "32px",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.76",
3
+ "version": "10.4.77",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx CHANGED
@@ -214,8 +214,7 @@ const FeatureServiceUiMobile = ({
214
214
  const isSelected = node.dataset.cardKey === key;
215
215
  node.style.border = isSelected ? CARD_SELECTED_BORDER : CARD_BORDER;
216
216
  node.style.boxShadow = isSelected ? CARD_SELECTED_SHADOW : "none";
217
- const check = node.querySelector<HTMLElement>("[data-card-check]");
218
- if (check) check.style.display = isSelected ? "flex" : "none";
217
+ // Crown stays on the lowest fare card — selection only moves the border
219
218
  });
220
219
 
221
220
  const card = serviceCards.find((c) => c.key === key);
@@ -550,8 +549,10 @@ const FeatureServiceUiMobile = ({
550
549
  scrollbarWidth: "none",
551
550
  }}
552
551
  >
553
- {serviceCards.map((op) => {
552
+ {serviceCards.map((op, idx) => {
554
553
  const isSelected = op.key === selectedCard?.key;
554
+ // Cards are sorted cheapest first, so index 0 is the lowest fare
555
+ const isLowestFare = idx === 0;
555
556
  return (
556
557
  <div
557
558
  key={op.key}
@@ -579,12 +580,11 @@ const FeatureServiceUiMobile = ({
579
580
  "border-color 150ms ease, box-shadow 150ms ease",
580
581
  }}
581
582
  >
582
- {/* Crown badge on the selected card */}
583
+ {/* Crown badge — always on the lowest fare card */}
583
584
  <span
584
- data-card-check="true"
585
585
  className="absolute items-center justify-center"
586
586
  style={{
587
- display: isSelected ? "flex" : "none",
587
+ display: isLowestFare ? "flex" : "none",
588
588
  top: "-12px",
589
589
  right: "-1px",
590
590
  width: "30px",
package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx CHANGED
@@ -212,8 +212,7 @@ const FeatureServiceUi = ({
212
212
  const isSelected = node.dataset.cardKey === key;
213
213
  node.style.border = isSelected ? CARD_SELECTED_BORDER : CARD_BORDER;
214
214
  node.style.boxShadow = isSelected ? CARD_SELECTED_SHADOW : "none";
215
- const check = node.querySelector<HTMLElement>("[data-card-check]");
216
- if (check) check.style.display = isSelected ? "flex" : "none";
215
+ // Crown stays on the lowest fare card — selection only moves the border
217
216
  });
218
217
 
219
218
  const card = serviceCards.find((c) => c.key === key);
@@ -578,8 +577,10 @@ const FeatureServiceUi = ({
578
577
  scrollbarWidth: "none",
579
578
  }}
580
579
  >
581
- {serviceCards.map((op) => {
580
+ {serviceCards.map((op, idx) => {
582
581
  const isSelected = op.key === selectedCard?.key;
582
+ // Cards are sorted cheapest first, so index 0 is the lowest fare
583
+ const isLowestFare = idx === 0;
583
584
  return (
584
585
  <div
585
586
  key={op.key}
@@ -608,12 +609,11 @@ const FeatureServiceUi = ({
608
609
  "border-color 150ms ease, box-shadow 150ms ease",
609
610
  }}
610
611
  >
611
- {/* Crown badge on the selected card */}
612
+ {/* Crown badge — always on the lowest fare card */}
612
613
  <span
613
- data-card-check="true"
614
614
  className="absolute items-center justify-center"
615
615
  style={{
616
- display: isSelected ? "flex" : "none",
616
+ display: isLowestFare ? "flex" : "none",
617
617
  top: "-9px",
618
618
  right: "7px",
619
619
  width: "32px",