Skip to content

Commit ad5dd21

Browse files
hossein-nashossein-nas
committed
fix(discount-car): fix mr issues
1 parent 8203ce7 commit ad5dd21

File tree

7 files changed

+351
-252
lines changed

7 files changed

+351
-252
lines changed

‎package.json

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -305,10 +305,5 @@
305305
"vite-tsconfig-paths": "^5.1.4",
306306
"vitepress": "^1.6.3",
307307
"wireit": "^0.14.12"
308-
},
309-
"volta": {
310-
"node": "20.19.0",
311-
"npm": "11.3.0",
312-
"pnpm": "10.9.0"
313308
}
314309
}

‎packages/web-components/src/constants/discount-card.constants.ts

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎packages/web-components/src/discount-card/constants.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,14 @@ export const Slots = {
33
THUMBNAIL: "thumbnail",
44
HEADER_ICON: "header-icon",
55
} as const;
6+
7+
export const ErrorMessages = {
8+
HEADER_TITLE_IS_REQUIRED_WHEN_VARIANT_IS_NOT_NONE:
9+
"`headerTitle` is required when `variant` is not `none`",
10+
HEADER_ICON_IS_REQUIRED_WHEN_VARIANT_IS_NOT_NONE:
11+
"`headerIcon` is required when `variant` is not `none`",
12+
HEADER_TITLE_IS_NOT_REQUIRED_WHEN_VARIANT_IS_NONE:
13+
"`headerTitle` should not be provided when `variant` is `none`",
14+
HEADER_ICON_IS_NOT_REQUIRED_WHEN_VARIANT_IS_NONE:
15+
"`headerIcon` should not be provided when `variant` is `none`",
16+
} as const;

‎packages/web-components/src/discount-card/discount-card.style.ts

Lines changed: 117 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,16 @@ import { css } from "lit";
22

33
export default css`
44
:host {
5-
--discount-card-outer-radius: var(--tapsi-radius-4, 16px);
6-
--discount-card-inner-radius: var(--tapsi-radius-3, 12px);
7-
--discount-card-outer-padding: 0 var(--tapsi-spacing-3, 4px)
8-
var(--tapsi-spacing-3, 4px);
9-
--discount-card-header-padding: var(--tapsi-spacing-4, 8px);
10-
--discount-card-header-title-padding: var(--tapsi-spacing-1, 8px) 0;
5+
--discount-card-outer-radius: var(--tapsi-radius-4);
6+
--discount-card-inner-radius: var(--tapsi-radius-3);
7+
--discount-card-outer-padding: 0 var(--tapsi-spacing-3)
8+
var(--tapsi-spacing-3);
9+
--discount-card-header-padding: var(--tapsi-spacing-4);
10+
--discount-card-header-title-padding: var(--tapsi-spacing-1)
11+
var(--tapsi-spacing-0);
1112
--discount-card-badge-bg-color: transparent;
1213
--discount-card-badge-color: transparent;
13-
--discount-card-wrapper-border: var(
14-
--tapsi-color-border-primary,
15-
transparent
16-
);
14+
--discount-card-wrapper-border-color: var(--tapsi-color-border-primary);
1715
1816
/* Variant color mappings */
1917
--discount-card-clay-bg: linear-gradient(
@@ -73,78 +71,71 @@ export default css`
7371
}
7472
7573
.root {
74+
--discount-card-root-color: transparent;
75+
--discount-card-root-bg-color: transparent;
76+
--discount-card-root-padding: var(--discount-card-outer-padding);
7677
border-radius: var(--discount-card-outer-radius);
77-
padding: var(--discount-card-outer-padding);
78+
color: var(--discount-card-root-color);
79+
background: var(--discount-card-root-bg-color);
80+
padding: var(--discount-card-root-padding);
81+
}
82+
.root header {
83+
color: var(--discount-card-root-color);
7884
}
7985
8086
.root.variant-none {
8187
--discount-card-badge-bg-color: var(--discount-card-none-badge-bg);
8288
--discount-card-badge-color: var(--tapsi-color-content-accent);
83-
background-color: var(--discount-card-none-bg);
84-
padding: var(--tapsi-spacing-0, 0px);
85-
86-
.header {
87-
display: none;
88-
}
89+
--discount-card-root-bg-color: var(--discount-card-none-bg);
90+
--discount-card-root-padding: var(--tapsi-spacing-0, 0px);
8991
}
9092
9193
.root.variant-clay {
9294
--discount-card-badge-bg-color: var(--discount-card-clay-badge-bg);
9395
--discount-card-badge-color: var(--discount-card-clay-badge-color);
94-
background: var(--discount-card-clay-bg);
95-
96-
.header {
97-
color: var(--discount-card-clay-color);
98-
}
96+
--discount-card-root-color: var(--discount-card-clay-color);
97+
--discount-card-root-bg-color: var(--discount-card-clay-bg);
9998
}
10099
101100
.root.variant-whisper {
102101
--discount-card-badge-bg-color: var(--discount-card-whisper-badge-bg);
103102
--discount-card-badge-color: var(--tapsi-palette-black);
104-
background: var(--discount-card-whisper-bg);
105-
106-
.header {
107-
color: var(--discount-card-whisper-color);
108-
}
103+
--discount-card-root-color: var(--discount-card-whisper-color);
104+
--discount-card-root-bg-color: var(--discount-card-whisper-bg);
109105
}
110106
111107
.root.variant-azure {
112108
--discount-card-badge-bg-color: var(--discount-card-azure-badge-bg);
113109
--discount-card-badge-color: var(--tapsi-palette-black);
114-
background: var(--discount-card-azure-bg);
115-
116-
.header {
117-
color: var(--discount-card-azure-color);
118-
}
110+
--discount-card-root-color: var(--discount-card-azure-color);
111+
--discount-card-root-bg-color: var(--discount-card-azure-bg);
119112
}
120113
121114
.root.variant-flame {
122115
--discount-card-badge-bg-color: var(--discount-card-flame-badge-bg);
123116
--discount-card-badge-color: var(--discount-card-flame-badge-color);
124-
background: var(--discount-card-flame-bg);
125-
126-
.header {
127-
color: var(--discount-card-flame-color);
128-
}
117+
--discount-card-root-color: var(--discount-card-flame-color);
118+
--discount-card-root-bg-color: var(--discount-card-flame-bg);
129119
}
130120
131121
.root.variant-grayscale {
132122
--discount-card-badge-bg-color: var(--discount-card-grayscale-badge-bg);
133123
--discount-card-badge-color: var(--discount-card-grayscale-badge-color);
134-
background-color: var(--discount-card-grayscale-bg);
135-
136-
.header {
137-
color: var(--discount-card-grayscale-color);
138-
}
124+
--discount-card-root-color: var(--discount-card-grayscale-color);
125+
--discount-card-root-bg-color: var(--discount-card-grayscale-bg);
139126
}
140127
141128
.header {
142129
padding: var(--discount-card-header-padding);
143130
display: flex;
144131
}
132+
145133
.header-title {
146134
padding: var(--discount-card-header-title-padding);
147135
flex: 1 0 auto;
136+
font-size: var(--tapsi-typography-label-sm-font);
137+
font-weight: var(--tapsi-typography-label-sm-weight);
138+
line-height: var(--tapsi-typography-label-sm-height);
148139
}
149140
150141
.header-icon {
@@ -154,14 +145,16 @@ export default css`
154145
}
155146
156147
.wrapper {
157-
border: none;
148+
--discount-card-wrapper-border: none;
158149
border-radius: var(--discount-card-inner-radius);
159150
background-color: var(--tapsi-palette-white);
160151
display: flex;
152+
border: var(--discount-card-wrapper-border);
161153
}
162154
163155
.wrapper.wrapper-border {
164-
border: 1px solid var(--discount-card-wrapper-border);
156+
--discount-card-wrapper-border: 1px solid
157+
var(--discount-card-wrapper-border-color);
165158
}
166159
167160
.side {
@@ -170,99 +163,101 @@ export default css`
170163
display: flex;
171164
flex-direction: column;
172165
flex: 0 0 82px;
166+
}
167+
.side .badge-wrapper {
168+
position: relative;
169+
margin: 0 calc(var(--tapsi-spacing-3) * -1) 0 0;
173170
174-
.badge-wrapper {
175-
position: relative;
176-
margin: 0 calc(var(--tapsi-spacing-3) * -1) 0 0;
171+
display: flex;
172+
}
177173
178-
display: flex;
179-
}
174+
.side .badge-box {
175+
margin-right: -1px;
176+
background-color: var(--discount-card-badge-bg-color);
177+
border-radius: var(--tapsi-spacing-3) 0 0 var(--tapsi-spacing-3);
178+
padding: var(--tapsi-spacing-2) var(--tapsi-spacing-4)
179+
var(--tapsi-spacing-2) var(--tapsi-spacing-5);
180+
color: var(--discount-card-badge-color);
181+
font-weight: var(--tapsi-typography-label-xxs-weight);
182+
font-size: var(--tapsi-typography-label-xxs-size);
183+
line-height: var(--tapsi-typography-label-xxs-height);
184+
}
180185
181-
.badge-box {
182-
background-color: var(--discount-card-badge-bg-color);
183-
border-radius: var(--tapsi-spacing-3) 0 0 var(--tapsi-spacing-3);
184-
padding: var(--tapsi-spacing-2) var(--tapsi-spacing-4)
185-
var(--tapsi-spacing-2) var(--tapsi-spacing-5);
186-
color: var(--discount-card-badge-color);
187-
font-weight: var(--tapsi-typography-label-xxs-weight);
188-
font-size: var(--tapsi-typography-label-xxs-size);
189-
line-height: var(--tapsi-typography-label-xxs-height);
190-
}
186+
.side .badge-shape {
187+
position: absolute;
188+
left: 100%;
189+
top: 0;
190+
color: var(--discount-card-badge-bg-color);
191+
}
191192
192-
.badge-shape {
193-
position: absolute;
194-
left: 100%;
195-
top: 0;
196-
color: var(--discount-card-badge-bg-color);
197-
}
193+
.side .thumbnail-box {
194+
margin: var(--tapsi-spacing-9) auto 0;
195+
color: var(--tapsi-color-content-primary);
196+
width: 60px;
197+
height: 60px;
198+
}
198199
199-
/* border-left: 2px dashed var(--tapsi-color-border-primary); */
200-
.thumbnail-box {
201-
margin: var(--tapsi-spacing-9) auto 0;
202-
width: 60px;
203-
height: 60px;
204-
}
200+
.side .dashed-line {
201+
position: absolute;
202+
top: 0;
203+
height: 100%;
204+
left: -1px;
205+
width: 2px;
206+
overflow: hidden;
207+
}
205208
206-
.dashed-line {
207-
position: absolute;
208-
top: 0;
209-
height: 100%;
210-
left: -1;
211-
width: 2px;
212-
overflow: hidden;
213-
&::after {
214-
content: "";
215-
--b: 1px; /* border thickness */
216-
--s: 16px; /* size of the dashes */
217-
--c1: var(--tapsi-color-border-primary);
218-
--c2: var(--tapsi-palette-white);
219-
top: 0;
220-
height: 100%;
221-
left: -1px;
222-
padding: var(--b);
223-
position: absolute;
224-
background: repeating-conic-gradient(var(--c1) 0 25%, var(--c2) 0 50%) 0
225-
0 / var(--s) var(--s) round;
226-
mask:
227-
linear-gradient(#000 0 0) content-box,
228-
linear-gradient(#000 0 0);
229-
mask-composite: exclude;
230-
}
231-
}
209+
.side .dashed-line::after {
210+
content: "";
211+
--b: 2px; /* border thickness */
212+
--s: 14px; /* size of the dashes */
213+
--c1: var(--tapsi-color-border-primary);
214+
--c2: transparent;
215+
top: 0;
216+
height: 100%;
217+
left: -3px;
218+
padding: var(--b);
219+
position: absolute;
220+
background: repeating-conic-gradient(var(--c1) 0 25%, var(--c2) 0 50%) 0 0 /
221+
var(--s) var(--s) round;
232222
}
233223
234224
.body {
235225
padding: var(--tapsi-spacing-6, 16px);
236226
flex: 1 0 auto;
227+
}
237228
238-
.title {
239-
font-weight: var(--tapsi-typography-label-sm-weight);
240-
font-size: var(--tapsi-typography-label-sm-size);
241-
line-height: var(--tapsi-typography-label-sm-height);
242-
color: var(--tapsi-palette-black);
243-
}
229+
.body .title {
230+
font-weight: var(--tapsi-typography-label-sm-weight);
231+
font-size: var(--tapsi-typography-label-sm-size);
232+
line-height: var(--tapsi-typography-label-sm-height);
233+
color: var(--tapsi-palette-black);
234+
}
244235
245-
.description {
246-
font-weight: var(--tapsi-typography-label-xs-weight);
247-
font-size: var(--tapsi-typography-label-xs-size);
248-
line-height: var(--tapsi-typography-label-xs-height);
249-
color: var(--tapsi-color-content-tertiary);
250-
margin-top: var(--tapsi-spacing-2);
251-
}
236+
.body .description {
237+
font-weight: var(--tapsi-typography-label-xs-weight);
238+
font-size: var(--tapsi-typography-label-xs-size);
239+
line-height: var(--tapsi-typography-label-xs-height);
240+
color: var(--tapsi-color-content-tertiary);
241+
margin-top: var(--tapsi-spacing-2);
242+
}
252243
253-
.expiry-date-label {
254-
font-weight: var(--tapsi-typography-label-xs-weight);
255-
font-size: var(--tapsi-typography-label-xs-size);
256-
line-height: var(--tapsi-typography-label-xs-height);
257-
color: var(--tapsi-color-content-tertiary); /* Default color */
258-
}
244+
.body .expiry-date-label {
245+
--discount-card-expiring-date-label-color: var(
246+
--tapsi-color-content-tertiary
247+
); /* Default color */
248+
font-weight: var(--tapsi-typography-label-xs-weight);
249+
font-size: var(--tapsi-typography-label-xs-size);
250+
line-height: var(--tapsi-typography-label-xs-height);
251+
color: var(--discount-card-expiring-date-label-color);
252+
}
259253
260-
.expiry-date-label.expiring {
261-
color: var(--tapsi-color-content-negative); /* Warn color */
262-
}
254+
.body .expiry-date-label.expiring {
255+
--discount-card-expiring-date-label-color: var(
256+
--tapsi-color-content-negative
257+
);
258+
}
263259
264-
.action {
265-
margin-top: var(--tapsi-spacing-4);
266-
}
260+
.body .action {
261+
margin-top: var(--tapsi-spacing-4);
267262
}
268263
`;

0 commit comments

Comments
 (0)