kupos-ui-components-lib 9.5.6 → 9.5.7

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/ServiceBadges/ServiceBadges.js +17 -9
  2. package/dist/ui/mobileweb/ServiceBadgesMobile.js +17 -9
  3. package/package.json +1 -1
  4. package/src/ui/ServiceBadges/ServiceBadges.tsx +17 -15
  5. package/src/ui/mobileweb/ServiceBadgesMobile.tsx +17 -9
package/dist/ui/ServiceBadges/ServiceBadges.js CHANGED
@@ -3,29 +3,37 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
3
3
  return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
4
4
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
5
5
  backgroundColor: "#fff",
6
- border: `1px solid ${colors.topLabelColor}`,
7
- color: colors.topLabelColor,
6
+ border: isSoldOut
7
+ ? "1px solid #ccc"
8
+ : `1px solid ${colors.topLabelColor}`,
9
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
8
10
  } },
9
11
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
10
- React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
12
+ React.createElement("div", null, showTopLabel))),
11
13
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
12
14
  backgroundColor: "#fff",
13
- border: `1px solid ${colors.topLabelColor}`,
14
- color: colors.topLabelColor,
15
+ border: isSoldOut
16
+ ? "1px solid #ccc"
17
+ : `1px solid ${colors.topLabelColor}`,
18
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
15
19
  } },
16
20
  renderIcon("connectingServiceIcon", "12px"),
17
21
  React.createElement("div", null, "Conexión"))),
18
22
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
19
23
  backgroundColor: "#fff",
20
- border: `1px solid ${colors.topLabelColor}`,
21
- color: colors.topLabelColor,
24
+ border: isSoldOut
25
+ ? "1px solid #ccc"
26
+ : `1px solid ${colors.topLabelColor}`,
27
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
22
28
  } },
23
29
  renderIcon("directo", "12px"),
24
30
  React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
25
31
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
26
32
  backgroundColor: "#fff",
27
- border: `1px solid ${colors.topLabelColor}`,
28
- color: colors.topLabelColor,
33
+ border: isSoldOut
34
+ ? "1px solid #ccc"
35
+ : `1px solid ${colors.topLabelColor}`,
36
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
29
37
  } },
30
38
  renderIcon("directo", "12px"),
31
39
  React.createElement("div", null, "Tren Express")))));
package/dist/ui/mobileweb/ServiceBadgesMobile.js CHANGED
@@ -3,31 +3,39 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
3
3
  return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
4
4
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
5
5
  backgroundColor: "#fff",
6
- border: `1px solid ${colors.topLabelColor}`,
7
- color: colors.topLabelColor,
6
+ border: isSoldOut
7
+ ? "1px solid #ccc"
8
+ : `1px solid ${colors.topLabelColor}`,
9
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
8
10
  } },
9
11
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
10
12
  React.createElement("div", { style: {
11
- color: colors.topLabelColor,
13
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
12
14
  } }, showTopLabel))),
13
15
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
14
16
  backgroundColor: "#fff",
15
- border: `1px solid ${colors.topLabelColor}`,
16
- color: colors.topLabelColor,
17
+ border: isSoldOut
18
+ ? "1px solid #ccc"
19
+ : `1px solid ${colors.topLabelColor}`,
20
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
17
21
  } },
18
22
  renderIcon("directo", "12px"),
19
23
  React.createElement("div", { className: "ml-[5px]" }, "Directo"))),
20
24
  isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20`, style: {
21
25
  backgroundColor: "#fff",
22
- border: `1px solid ${colors.topLabelColor}`,
23
- color: colors.topLabelColor,
26
+ border: isSoldOut
27
+ ? "1px solid #ccc"
28
+ : `1px solid ${colors.topLabelColor}`,
29
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
24
30
  } },
25
31
  renderIcon("airportIcon", "14px"),
26
32
  React.createElement("div", null, "Conexi\u00F3n"))),
27
33
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
28
34
  backgroundColor: "#fff",
29
- border: `1px solid ${colors.topLabelColor}`,
30
- color: colors.topLabelColor,
35
+ border: isSoldOut
36
+ ? "1px solid #ccc"
37
+ : `1px solid ${colors.topLabelColor}`,
38
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
31
39
  } },
32
40
  renderIcon("directo", "12px"),
33
41
  React.createElement("div", null, "Tren Express")))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.5.6",
3
+ "version": "9.5.7",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/ui/ServiceBadges/ServiceBadges.tsx CHANGED
@@ -30,20 +30,16 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
30
30
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}
31
31
  style={{
32
32
  backgroundColor: "#fff",
33
- border: `1px solid ${colors.topLabelColor}`,
34
- color: colors.topLabelColor,
33
+ border: isSoldOut
34
+ ? "1px solid #ccc"
35
+ : `1px solid ${colors.topLabelColor}`,
36
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
35
37
  }}
36
38
  >
37
39
  <div className={isSoldOut ? "grayscale" : ""}>
38
40
  {renderIcon("specialDeparture", "12px")}
39
41
  </div>
40
- <div
41
- className={
42
- isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
43
- }
44
- >
45
- {showTopLabel}
46
- </div>
42
+ <div>{showTopLabel}</div>
47
43
  </div>
48
44
  )}
49
45
  {serviceItem?.is_transpordo && (
@@ -51,8 +47,10 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
51
47
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
52
48
  style={{
53
49
  backgroundColor: "#fff",
54
- border: `1px solid ${colors.topLabelColor}`,
55
- color: colors.topLabelColor,
50
+ border: isSoldOut
51
+ ? "1px solid #ccc"
52
+ : `1px solid ${colors.topLabelColor}`,
53
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
56
54
  }}
57
55
  >
58
56
  {renderIcon("connectingServiceIcon", "12px")}
@@ -64,8 +62,10 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
64
62
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
65
63
  style={{
66
64
  backgroundColor: "#fff",
67
- border: `1px solid ${colors.topLabelColor}`,
68
- color: colors.topLabelColor,
65
+ border: isSoldOut
66
+ ? "1px solid #ccc"
67
+ : `1px solid ${colors.topLabelColor}`,
68
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
69
69
  }}
70
70
  >
71
71
  {renderIcon("directo", "12px")}
@@ -77,8 +77,10 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
77
77
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
78
78
  style={{
79
79
  backgroundColor: "#fff",
80
- border: `1px solid ${colors.topLabelColor}`,
81
- color: colors.topLabelColor,
80
+ border: isSoldOut
81
+ ? "1px solid #ccc"
82
+ : `1px solid ${colors.topLabelColor}`,
83
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
82
84
  }}
83
85
  >
84
86
  {renderIcon("directo", "12px")}
package/src/ui/mobileweb/ServiceBadgesMobile.tsx CHANGED
@@ -30,8 +30,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
30
30
  className={`flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
31
31
  style={{
32
32
  backgroundColor: "#fff",
33
- border: `1px solid ${colors.topLabelColor}`,
34
- color: colors.topLabelColor,
33
+ border: isSoldOut
34
+ ? "1px solid #ccc"
35
+ : `1px solid ${colors.topLabelColor}`,
36
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
35
37
  }}
36
38
  >
37
39
  <div className={isSoldOut ? "grayscale" : ""}>
@@ -39,7 +41,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
39
41
  </div>
40
42
  <div
41
43
  style={{
42
- color: colors.topLabelColor,
44
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
43
45
  }}
44
46
  >
45
47
  {showTopLabel}
@@ -51,8 +53,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
51
53
  className={`flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
52
54
  style={{
53
55
  backgroundColor: "#fff",
54
- border: `1px solid ${colors.topLabelColor}`,
55
- color: colors.topLabelColor,
56
+ border: isSoldOut
57
+ ? "1px solid #ccc"
58
+ : `1px solid ${colors.topLabelColor}`,
59
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
56
60
  }}
57
61
  >
58
62
  {renderIcon("directo", "12px")}
@@ -64,8 +68,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
64
68
  className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20`}
65
69
  style={{
66
70
  backgroundColor: "#fff",
67
- border: `1px solid ${colors.topLabelColor}`,
68
- color: colors.topLabelColor,
71
+ border: isSoldOut
72
+ ? "1px solid #ccc"
73
+ : `1px solid ${colors.topLabelColor}`,
74
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
69
75
  }}
70
76
  >
71
77
  {renderIcon("airportIcon", "14px")}
@@ -77,8 +83,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
77
83
  className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
78
84
  style={{
79
85
  backgroundColor: "#fff",
80
- border: `1px solid ${colors.topLabelColor}`,
81
- color: colors.topLabelColor,
86
+ border: isSoldOut
87
+ ? "1px solid #ccc"
88
+ : `1px solid ${colors.topLabelColor}`,
89
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
82
90
  }}
83
91
  >
84
92
  {renderIcon("directo", "12px")}