kupos-ui-components-lib 7.0.3 → 7.0.4

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 (6) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +12 -2
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +13 -3
  3. package/dist/styles.css +5 -0
  4. package/package.json +1 -1
  5. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +11 -2
  6. package/src/components/ServiceItem/ServiceItemDesktop.tsx +12 -3
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -337,6 +337,16 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
337
337
  const getNumberOfSeats = () => {
338
338
  return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
339
339
  };
340
+ // Helper function to truncate seat labels with more than 2 words
341
+ const truncateSeatLabel = (label) => {
342
+ if (typeof label !== "string")
343
+ return String(label);
344
+ const words = label.trim().split(/\s+/);
345
+ if (words.length <= 2)
346
+ return label;
347
+ // Take first 2 words + first letter of 3rd word + "..."
348
+ return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
349
+ };
340
350
  // Seat type icon logic
341
351
  const getSeatTypeIcon = (seatLabel) => {
342
352
  var _a, _b, _c, _d;
@@ -362,7 +372,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
362
372
  marginBottom: "2px",
363
373
  } })),
364
374
  typeof val.label === "string" || typeof val.label === "number"
365
- ? val.label
375
+ ? truncateSeatLabel(val.label)
366
376
  : null)));
367
377
  }
368
378
  return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
@@ -374,7 +384,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
374
384
  marginBottom: "2px",
375
385
  } })),
376
386
  typeof val.label === "string" || typeof val.label === "number"
377
- ? val.label
387
+ ? truncateSeatLabel(val.label)
378
388
  : null)));
379
389
  };
380
390
  const getSeatPrice = () => {
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -343,16 +343,26 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
343
343
  const getNumberOfSeats = () => {
344
344
  return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
345
345
  };
346
+ // Helper function to truncate seat labels with more than 2 words
347
+ const truncateSeatLabel = (label) => {
348
+ if (typeof label !== "string")
349
+ return String(label);
350
+ const words = label.trim().split(/\s+/);
351
+ if (words.length <= 2)
352
+ return label;
353
+ // Take first 2 words + first letter of 3rd word + "..."
354
+ return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
355
+ };
346
356
  const getSeatNames = () => {
347
357
  const uniqueSeats = getUniqueSeats();
348
358
  const sortedSeatTypes = getSortedSeatTypes();
349
359
  if (removeDuplicateSeats) {
350
360
  return uniqueSeats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
351
- ? val.label
361
+ ? truncateSeatLabel(val.label)
352
362
  : null)));
353
363
  }
354
364
  return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
355
- ? val.label
365
+ ? truncateSeatLabel(val.label)
356
366
  : null)));
357
367
  };
358
368
  const getSeatPrice = () => {
@@ -573,7 +583,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
573
583
  color: isSoldOut ? "#c0c0c0" : colors.priceColor,
574
584
  top: 0,
575
585
  bottom: 0,
576
- left: "clamp(75%, 75% + (100vw - 1300px) * 0.1, 80%)",
586
+ left: "clamp(65%, 65% + (100vw - 1300px) * 0.1, 65%)",
577
587
  // left: "68%",
578
588
  right: 0,
579
589
  justifyContent: getNumberOfSeats() < 2 || removeDuplicateSeats
package/dist/styles.css CHANGED
@@ -506,6 +506,11 @@
506
506
  -moz-column-gap: 7rem;
507
507
  column-gap: 7rem;
508
508
  }
509
+ .truncate {
510
+ overflow: hidden;
511
+ text-overflow: ellipsis;
512
+ white-space: nowrap;
513
+ }
509
514
  .overflow-hidden {
510
515
  overflow: hidden;
511
516
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "7.0.3",
3
+ "version": "7.0.4",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -440,6 +440,15 @@ function PeruServiceItemDesktop({
440
440
  ).length;
441
441
  };
442
442
 
443
+ // Helper function to truncate seat labels with more than 2 words
444
+ const truncateSeatLabel = (label: string | number): string => {
445
+ if (typeof label !== "string") return String(label);
446
+ const words = label.trim().split(/\s+/);
447
+ if (words.length <= 2) return label;
448
+ // Take first 2 words + first letter of 3rd word + "..."
449
+ return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
450
+ };
451
+
443
452
  // Seat type icon logic
444
453
  const getSeatTypeIcon = (seatLabel: string) => {
445
454
  // Icon keys follow the seat{degrees}Icon format in serviceItem.icons
@@ -476,7 +485,7 @@ function PeruServiceItemDesktop({
476
485
  />
477
486
  </div>
478
487
  {typeof val.label === "string" || typeof val.label === "number"
479
- ? val.label
488
+ ? truncateSeatLabel(val.label)
480
489
  : null}
481
490
  </span>
482
491
  )
@@ -503,7 +512,7 @@ function PeruServiceItemDesktop({
503
512
  />
504
513
  </div>
505
514
  {typeof val.label === "string" || typeof val.label === "number"
506
- ? val.label
515
+ ? truncateSeatLabel(val.label)
507
516
  : null}
508
517
  </span>
509
518
  )
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -446,6 +446,15 @@ function ServiceItemPB({
446
446
  ).length;
447
447
  };
448
448
 
449
+ // Helper function to truncate seat labels with more than 2 words
450
+ const truncateSeatLabel = (label: string | number): string => {
451
+ if (typeof label !== "string") return String(label);
452
+ const words = label.trim().split(/\s+/);
453
+ if (words.length <= 2) return label;
454
+ // Take first 2 words + first letter of 3rd word + "..."
455
+ return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
456
+ };
457
+
449
458
  const getSeatNames = () => {
450
459
  const uniqueSeats = getUniqueSeats();
451
460
  const sortedSeatTypes = getSortedSeatTypes();
@@ -460,7 +469,7 @@ function ServiceItemPB({
460
469
  }`}
461
470
  >
462
471
  {typeof val.label === "string" || typeof val.label === "number"
463
- ? val.label
472
+ ? truncateSeatLabel(val.label)
464
473
  : null}
465
474
  </span>
466
475
  )
@@ -475,7 +484,7 @@ function ServiceItemPB({
475
484
  }`}
476
485
  >
477
486
  {typeof val.label === "string" || typeof val.label === "number"
478
- ? val.label
487
+ ? truncateSeatLabel(val.label)
479
488
  : null}
480
489
  </span>
481
490
  )
@@ -1003,7 +1012,7 @@ function ServiceItemPB({
1003
1012
  color: isSoldOut ? "#c0c0c0" : colors.priceColor,
1004
1013
  top: 0,
1005
1014
  bottom: 0,
1006
- left: "clamp(75%, 75% + (100vw - 1300px) * 0.1, 80%)",
1015
+ left: "clamp(65%, 65% + (100vw - 1300px) * 0.1, 65%)",
1007
1016
  // left: "68%",
1008
1017
  right: 0,
1009
1018
  justifyContent: