kupos-ui-components-lib 10.1.4 → 10.1.5

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.
@@ -394,7 +394,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
394
394
  return (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
395
395
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
396
396
  showTopLabel
397
- ? "mt-[30px]"
397
+ ? "mt-[20px]"
398
398
  : "mt-[20px]"} ` },
399
399
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors })),
400
400
  React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
@@ -296,14 +296,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
296
296
  : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
297
297
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
298
298
  showTopLabel
299
- ? "mt-[30px]"
299
+ ? "mt-[20px]"
300
300
  : "mt-[20px]"} ` },
301
301
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors, isLinatal: isLinatal })),
302
302
  React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
303
303
  ? "z-[3] rounded-[18px]"
304
304
  : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
305
305
  React.createElement("div", { className: " pt-[20px]", style: {
306
- padding: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)
306
+ padding: hasDpEnabled || (isNewUiEnabled && !isSoldOut)
307
307
  ? "20px 15px 10px 15px"
308
308
  : coachKey
309
309
  ? "20px 15px 20px 15px"
package/dist/styles.css CHANGED
@@ -90,8 +90,8 @@
90
90
  .-bottom-\[36px\] {
91
91
  bottom: calc(36px * -1);
92
92
  }
93
- .-bottom-\[44px\] {
94
- bottom: calc(44px * -1);
93
+ .-bottom-\[40px\] {
94
+ bottom: calc(40px * -1);
95
95
  }
96
96
  .bottom-\[11px\] {
97
97
  bottom: 11px;
@@ -243,9 +243,6 @@
243
243
  .mt-\[24px\] {
244
244
  margin-top: 24px;
245
245
  }
246
- .mt-\[30px\] {
247
- margin-top: 30px;
248
- }
249
246
  .mt-\[50px\] {
250
247
  margin-top: 50px;
251
248
  }
@@ -396,6 +393,9 @@
396
393
  .h-\[30px\] {
397
394
  height: 30px;
398
395
  }
396
+ .h-\[44px\] {
397
+ height: 44px;
398
+ }
399
399
  .h-\[90px\] {
400
400
  height: 90px;
401
401
  }
@@ -626,6 +626,9 @@
626
626
  .justify-end {
627
627
  justify-content: flex-end;
628
628
  }
629
+ .justify-start {
630
+ justify-content: flex-start;
631
+ }
629
632
  .gap-\[1px\] {
630
633
  gap: 1px;
631
634
  }
@@ -72,13 +72,13 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
72
72
  }
73
73
  return null;
74
74
  };
75
- return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]", style: {
75
+ return (React.createElement("div", { className: "text-white w-full absolute -bottom-[40px] pt-[20px] rounded-b-[14px] text-[14px] mt-[10px]", style: {
76
76
  background,
77
77
  opacity: isSoldOut ? 0.5 : 1,
78
- zIndex: isLinatal ? "-1" : "",
78
+ zIndex: isLinatal ? "-1" : "-1",
79
79
  } },
80
- React.createElement("div", { className: "flex justify-between items-center w-full" },
81
- React.createElement("div", { className: "flex items-center" }, renderLeftContent()),
80
+ React.createElement("div", { className: "flex justify-start items-center h-[44px] w-full gap-[20px] px-[15px]" },
81
+ React.createElement("div", { className: "flex items-center justify-start" }, renderLeftContent()),
82
82
  showViewers && (React.createElement(ViewersCount, { serviceItem: serviceItem, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })))));
83
83
  };
84
84
  export default OfferBanner;
@@ -4,7 +4,7 @@ import CommonService from "../../utils/CommonService";
4
4
  const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
5
5
  return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
6
6
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
7
- backgroundColor: colors.topLabelBgColor || "rgb(255, 242, 235)",
7
+ backgroundColor: colors.topLabelBgColor || "#fff",
8
8
  border: isSoldOut
9
9
  ? "1px solid #ccc"
10
10
  : `1px solid ${colors.topLabelColor}`,
@@ -3,7 +3,7 @@ import CommonService from "../../utils/CommonService";
3
3
  const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, isAllinBus = false, boardingName, }) => {
4
4
  return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
5
5
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
6
- backgroundColor: "#fff",
6
+ backgroundColor: colors.topLabelBgColor || "#fff",
7
7
  border: isSoldOut
8
8
  ? "1px solid #ccc"
9
9
  : `1px solid ${colors.topLabelColor}`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.1.4",
3
+ "version": "10.1.5",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -609,7 +609,7 @@ function PeruServiceItemDesktop({
609
609
  serviceItem?.is_direct_trip ||
610
610
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
611
611
  showTopLabel
612
- ? "mt-[30px]"
612
+ ? "mt-[20px]"
613
613
  : "mt-[20px]"
614
614
  } `}
615
615
  >
@@ -539,7 +539,7 @@ function ServiceItemPB({
539
539
  serviceItem?.is_direct_trip ||
540
540
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
541
541
  showTopLabel
542
- ? "mt-[30px]"
542
+ ? "mt-[20px]"
543
543
  : "mt-[20px]"
544
544
  } `}
545
545
  >
@@ -572,7 +572,7 @@ function ServiceItemPB({
572
572
  className=" pt-[20px]"
573
573
  style={{
574
574
  padding:
575
- hasDpEnabled || serviceItem?.offer_text
575
+ hasDpEnabled || (isNewUiEnabled && !isSoldOut)
576
576
  ? "20px 15px 10px 15px"
577
577
  : coachKey
578
578
  ? "20px 15px 20px 15px"
@@ -251,15 +251,17 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
251
251
 
252
252
  return (
253
253
  <div
254
- className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]"
254
+ className="text-white w-full absolute -bottom-[40px] pt-[20px] rounded-b-[14px] text-[14px] mt-[10px]"
255
255
  style={{
256
256
  background,
257
257
  opacity: isSoldOut ? 0.5 : 1,
258
- zIndex: isLinatal ? "-1" : "",
258
+ zIndex: isLinatal ? "-1" : "-1",
259
259
  }}
260
260
  >
261
- <div className="flex justify-between items-center w-full">
262
- <div className="flex items-center">{renderLeftContent()}</div>
261
+ <div className="flex justify-start items-center h-[44px] w-full gap-[20px] px-[15px]">
262
+ <div className="flex items-center justify-start">
263
+ {renderLeftContent()}
264
+ </div>
263
265
  {showViewers && (
264
266
  <ViewersCount
265
267
  serviceItem={serviceItem}
@@ -37,7 +37,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
37
37
  <div
38
38
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}
39
39
  style={{
40
- backgroundColor: colors.topLabelBgColor || "rgb(255, 242, 235)",
40
+ backgroundColor: colors.topLabelBgColor || "#fff",
41
41
  border: isSoldOut
42
42
  ? "1px solid #ccc"
43
43
  : `1px solid ${colors.topLabelColor}`,
@@ -35,7 +35,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
35
35
  <div
36
36
  className={`flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`}
37
37
  style={{
38
- backgroundColor: "#fff",
38
+ backgroundColor: colors.topLabelBgColor || "#fff",
39
39
  border: isSoldOut
40
40
  ? "1px solid #ccc"
41
41
  : `1px solid ${colors.topLabelColor}`,