kupos-ui-components-lib 9.4.3 → 9.4.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.
Files changed (7) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +8 -4
  2. package/dist/styles.css +13 -0
  3. package/dist/ui/AmenitiesBlock.js +3 -3
  4. package/package.json +1 -1
  5. package/src/components/ServiceItem/ServiceItemDesktop.tsx +8 -4
  6. package/src/ui/AmenitiesBlock.tsx +3 -3
  7. package/tailwind.config.js +3 -0
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -115,7 +115,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
115
115
  borderWidth: "3px 3px 0 3px",
116
116
  borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
117
117
  background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
118
- zIndex: 2,
118
+ // zIndex: 1,
119
119
  }
120
120
  : {};
121
121
  const renderIcon = (iconKey, size = "14px") => {
@@ -241,8 +241,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
241
241
  : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
242
242
  React.createElement("div", { className: " pt-[20px]", style: {
243
243
  padding: coachKey
244
- ? "15px 15px 10px 15px"
245
- : "20px 15px 11px 15px",
244
+ ? hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
245
+ ? "15px 15px 10px 15px"
246
+ : "15px 15px 20px 15px"
247
+ : hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
248
+ ? "15px 15px 20px 15px"
249
+ : "20px 15px 10px 15px",
246
250
  marginTop: hasDiscount || hasOfferText ? "14px" : "0",
247
251
  } },
248
252
  React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
@@ -288,7 +292,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
288
292
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] rounded-b-[14px] text-[14px]", style: {
289
293
  background: offerGradient,
290
294
  opacity: isSoldOut ? 0.5 : 1,
291
- zIndex: isPeru ? undefined : -2,
295
+ zIndex: isPeru ? -1 : -2,
292
296
  // zIndex: hasOfferText ? 2 : isPeru ? 1 : -2,
293
297
  } },
294
298
  React.createElement("div", { className: "flex justify-between items-center w-full" },
package/dist/styles.css CHANGED
@@ -135,6 +135,12 @@
135
135
  .z-\[1\] {
136
136
  z-index: 1;
137
137
  }
138
+ .z-\[100\] {
139
+ z-index: 100;
140
+ }
141
+ .z-\[200\] {
142
+ z-index: 200;
143
+ }
138
144
  .col-span-2 {
139
145
  grid-column: span 2 / span 2;
140
146
  }
@@ -1027,6 +1033,13 @@
1027
1033
  }
1028
1034
  }
1029
1035
  }
1036
+ .hover\:z-\[500\] {
1037
+ &:hover {
1038
+ @media (hover: hover) {
1039
+ z-index: 500;
1040
+ }
1041
+ }
1042
+ }
1030
1043
  .hover\:bg-\[\#FFE5E5\] {
1031
1044
  &:hover {
1032
1045
  @media (hover: hover) {
package/dist/ui/AmenitiesBlock.js CHANGED
@@ -72,10 +72,10 @@ const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getA
72
72
  React.createElement(TooltipArrow, { color: colors.tooltipColor }),
73
73
  React.createElement("div", { className: "text-xs whitespace-nowrap" }, getAmenityName(baseName.split("_").join(" "))))));
74
74
  }),
75
- shouldShowPlus && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
76
- React.createElement("div", { className: "group" },
75
+ shouldShowPlus && (React.createElement("div", { className: "relative ml-1 cursor-pointer z-[200] hover:z-[500]" },
76
+ React.createElement("div", { className: "relative group cursor-pointer" },
77
77
  React.createElement("img", { src: ((_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.plus) ||
78
- "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus", style: { opacity: isSoldOut ? 0.5 : 1 } }),
78
+ "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px] z-[100]", alt: "plus", style: { opacity: isSoldOut ? 0.5 : 1 } }),
79
79
  React.createElement("div", { style: { zIndex: 100 }, className: TOOLTIP_CLASS },
80
80
  React.createElement(TooltipArrow, { color: colors.tooltipColor }),
81
81
  React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md", style: { backgroundColor: colors.tooltipColor } }, plusAmenities.map((val, key) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.4.3",
3
+ "version": "9.4.5",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -195,7 +195,7 @@ function ServiceItemPB({
195
195
  borderWidth: "3px 3px 0 3px",
196
196
  borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
197
197
  background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
198
- zIndex: 2,
198
+ // zIndex: 1,
199
199
  }
200
200
  : {};
201
201
 
@@ -422,8 +422,12 @@ function ServiceItemPB({
422
422
  className=" pt-[20px]"
423
423
  style={{
424
424
  padding: coachKey
425
- ? "15px 15px 10px 15px"
426
- : "20px 15px 11px 15px",
425
+ ? hasOfferText || serviceItem?.is_dp_enabled
426
+ ? "15px 15px 10px 15px"
427
+ : "15px 15px 20px 15px"
428
+ : hasOfferText || serviceItem?.is_dp_enabled
429
+ ? "15px 15px 20px 15px"
430
+ : "20px 15px 10px 15px",
427
431
  marginTop: hasDiscount || hasOfferText ? "14px" : "0",
428
432
  }}
429
433
  >
@@ -612,7 +616,7 @@ function ServiceItemPB({
612
616
  style={{
613
617
  background: offerGradient,
614
618
  opacity: isSoldOut ? 0.5 : 1,
615
- zIndex: isPeru ? undefined : -2,
619
+ zIndex: isPeru ? -1 : -2,
616
620
  // zIndex: hasOfferText ? 2 : isPeru ? 1 : -2,
617
621
  }}
618
622
  >
package/src/ui/AmenitiesBlock.tsx CHANGED
@@ -130,14 +130,14 @@ const AmenitiesBlock = ({
130
130
 
131
131
  {/* PLUS ICON */}
132
132
  {shouldShowPlus && (
133
- <div className="relative ml-1 cursor-pointer">
134
- <div className="group">
133
+ <div className="relative ml-1 cursor-pointer z-[200] hover:z-[500]">
134
+ <div className="relative group cursor-pointer">
135
135
  <img
136
136
  src={
137
137
  serviceItem.icons?.plus ||
138
138
  "/images/icons/amenities/icon_plus.svg"
139
139
  }
140
- className="w-[16px] h-[16px]"
140
+ className="w-[16px] h-[16px] z-[100]"
141
141
  alt="plus"
142
142
  style={{ opacity: isSoldOut ? 0.5 : 1 }}
143
143
  />
package/tailwind.config.js CHANGED
@@ -35,5 +35,8 @@ module.exports = {
35
35
  "flex",
36
36
  "justify-between",
37
37
  "items-center",
38
+ "hidden",
39
+ "group-hover:block",
40
+ "hover:z-[500]",
38
41
  ],
39
42
  };