kupos-ui-components-lib 1.1.2 → 1.1.3

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 (4) hide show
  1. package/dist/components/ServiceItem/ServiceItemMobile.js +13 -8
  2. package/dist/styles.css +7 -8
  3. package/package.json +1 -1
  4. package/src/components/ServiceItem/ServiceItemMobile.tsx +15 -6
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -15,7 +15,7 @@ const exceptions = [
15
15
  "asiento_mascota",
16
16
  ];
17
17
  function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, isCiva, currencySign, isPeru, }) {
18
- var _a, _b;
18
+ var _a, _b, _c;
19
19
  const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
20
20
  let isSoldOut = serviceItem.available_seats <= 0;
21
21
  const labelId = typeof serviceItem.boarding_stages === "string"
@@ -116,7 +116,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
116
116
  .slice(0, 2)
117
117
  .map((am, i) => {
118
118
  var _a;
119
- return (React.createElement("img", { key: i, className: "amenity", height: 15, src: getAmenitiesImage((_a = amenitiesData === null || amenitiesData === void 0 ? void 0 : amenitiesData[am]) === null || _a === void 0 ? void 0 : _a.toLowerCase()), alt: "icon" }));
119
+ return (React.createElement("img", { key: i, className: "amenity", height: 12, src: getAmenitiesImage((_a = amenitiesData === null || amenitiesData === void 0 ? void 0 : amenitiesData[am]) === null || _a === void 0 ? void 0 : _a.toLowerCase()), alt: "icon" }));
120
120
  });
121
121
  return nodes;
122
122
  };
@@ -153,9 +153,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
153
153
  React.createElement("div", { className: "flex items-center w-[50%] justify-between" },
154
154
  React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
155
155
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
156
- isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[11px] text-[11px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[11px] bold-text" },
157
- React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[10px] h-[10px] mr-[4px] object-contain mt-[2px] ${isSoldOut ? "grayscale" : ""}` }),
158
- getServiceStars(serviceItem)))),
156
+ isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[11px] text-[11px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[11px] bold-text items-center" },
157
+ React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
158
+ React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))))),
159
159
  React.createElement("div", { className: "flex justify-end -mt-[5px] -mb-[5px] items-center pt-[5px] pb-[5px] text-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
160
160
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("span", { className: "text-[12px] text-[red] mt-1 flex\n justify-end\n \n \n pt-[5px] pb-[5px] pl-[15px] pr-[15px]\n rounded-[8px] bg-[#DE051414]" }, "\u00A1 \u00DAltimos Asientos!")))),
161
161
  React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
@@ -189,7 +189,12 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
189
189
  React.createElement("div", { className: "content-center", style: {
190
190
  width: isPeru ? "30%" : "40%",
191
191
  } },
192
- React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: { gap: isSoldOut ? "0px" : "5px" } },
192
+ React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
193
+ gap: isSoldOut ? "0px" : "5px",
194
+ justifyContent: ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.length) > 2
195
+ ? "space-between"
196
+ : "center",
197
+ } },
193
198
  seatTypes(),
194
199
  isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
195
200
  React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] text-[#ccc]" }, "Agotado"))) : null))),
@@ -201,7 +206,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
201
206
  React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[11px] bold-text" }, serviceItem.operator_details[2])))),
202
207
  React.createElement("div", { className: "flex relative ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
203
208
  React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "12px")),
204
- React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[11px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
209
+ React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[11px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
205
210
  serviceItem.duration,
206
211
  "hrs")),
207
212
  React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenities()),
@@ -235,7 +240,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
235
240
  opacity: isSoldOut ? 0.5 : 1,
236
241
  } },
237
242
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
238
- React.createElement("span", { className: "ml-[10px] text-[#fff] min-[420]:text-[13px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
243
+ React.createElement("span", { className: "ml-[10px] text-[#fff] min-[380px]:text-[11px] text-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
239
244
  React.createElement("div", { className: "absolute -top-[14px] left-0 w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " },
240
245
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 `, style: {
241
246
  backgroundColor: isSoldOut ? "#ccc" : colors.ratingBottomColor,
package/dist/styles.css CHANGED
@@ -102,9 +102,6 @@
102
102
  .-mt-\[5px\] {
103
103
  margin-top: calc(5px * -1);
104
104
  }
105
- .mt-\[2px\] {
106
- margin-top: 2px;
107
- }
108
105
  .mt-\[5px\] {
109
106
  margin-top: 5px;
110
107
  }
@@ -207,8 +204,8 @@
207
204
  .h-\[7px\] {
208
205
  height: 7px;
209
206
  }
210
- .h-\[10px\] {
211
- height: 10px;
207
+ .h-\[12px\] {
208
+ height: 12px;
212
209
  }
213
210
  .h-\[16px\] {
214
211
  height: 16px;
@@ -231,9 +228,6 @@
231
228
  .w-\[7px\] {
232
229
  width: 7px;
233
230
  }
234
- .w-\[10px\] {
235
- width: 10px;
236
- }
237
231
  .w-\[12px\] {
238
232
  width: 12px;
239
233
  }
@@ -657,6 +651,11 @@
657
651
  font-size: 14px;
658
652
  }
659
653
  }
654
+ .min-\[380px\]\:text-\[11px\] {
655
+ @media (width >= 380px) {
656
+ font-size: 11px;
657
+ }
658
+ }
660
659
  .min-\[640px\]\:gap-x-\[6rem\] {
661
660
  @media (width >= 640px) {
662
661
  -moz-column-gap: 6rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -161,7 +161,7 @@ function ServiceItemMobile({
161
161
  <img
162
162
  key={i}
163
163
  className="amenity"
164
- height={15}
164
+ height={12}
165
165
  src={getAmenitiesImage(amenitiesData?.[am]?.toLowerCase())}
166
166
  alt="icon"
167
167
  />
@@ -240,15 +240,17 @@ function ServiceItemMobile({
240
240
  {serviceItem?.operator_details[2]}
241
241
  </div>
242
242
  ) : (
243
- <div className="flex min-[420]:text-[13px] text-[11px] bold-text">
243
+ <div className="flex min-[420]:text-[13px] text-[11px] bold-text items-center">
244
244
  <img
245
245
  src={serviceItem.icons.rating}
246
246
  alt="origin"
247
- className={`w-[10px] h-[10px] mr-[4px] object-contain mt-[2px] ${
247
+ className={`w-[12px] h-[12px] mr-[4px] object-contain ${
248
248
  isSoldOut ? "grayscale" : ""
249
249
  }`}
250
250
  />
251
- {getServiceStars(serviceItem)}
251
+ <span style={{ lineHeight: "normal" }}>
252
+ {getServiceStars(serviceItem)}
253
+ </span>
252
254
  </div>
253
255
  )}
254
256
  </div>
@@ -372,7 +374,13 @@ function ServiceItemMobile({
372
374
  >
373
375
  <div
374
376
  className="flex flex-col justify-between h-[2.5rem] "
375
- style={{ gap: isSoldOut ? "0px" : "5px" }}
377
+ style={{
378
+ gap: isSoldOut ? "0px" : "5px",
379
+ justifyContent:
380
+ serviceItem.seat_types?.length > 2
381
+ ? "space-between"
382
+ : "center",
383
+ }}
376
384
  >
377
385
  {seatTypes()}
378
386
 
@@ -423,6 +431,7 @@ function ServiceItemMobile({
423
431
  className={`cursor-default group min-[420]:text-[13px] text-[11px] ${
424
432
  isSoldOut ? "text-[#c0c0c0]" : ""
425
433
  }`}
434
+ style={{ lineHeight: "normal" }}
426
435
  >
427
436
  {serviceItem.duration}hrs
428
437
  </div>
@@ -519,7 +528,7 @@ function ServiceItemMobile({
519
528
  width="18px"
520
529
  height="18px"
521
530
  />
522
- <span className="ml-[10px] text-[#fff] min-[420]:text-[13px] text-[12px]">
531
+ <span className="ml-[10px] text-[#fff] min-[380px]:text-[11px] text-[10px]">
523
532
  {serviceItem?.offer_text}
524
533
  </span>
525
534
  </div>