scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/ratecard-adjustments (pull request #1638)

Browse Source 
add transparent border to rateCard and make appoximateRate optional

* add transparent border to rateCard and make appoximateRate optional


Approved-by: Simon.Emanuelsson
This commit is contained in:
Arvid Norlin
2025-03-26 09:38:03 +00:00
parent 1c42639423
commit c065101b7c
5 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/design-system/lib/components/RateCard/Campaign/index.tsx
View File

@@ -18,7 +18,7 @@ interface CampaignRateCardProps {
referenceRate: Rate
comparisonRate?: Omit<Rate, 'label'>
isHighlightedRate?: boolean
approximateRate: Rate
approximateRate?: Rate
handleChange: () => void
handleTermsClick?: () => void
}
@@ -85,7 +85,7 @@ export default function CampaignRateCard({
</Typography>
<Typography variant="Title/Subtitle/md">
<p>
{rate.price}{' '}
{`${rate.price} `}
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{rate.unit}</span>
</Typography>
@@ -99,7 +99,7 @@ export default function CampaignRateCard({
</Typography>
<Typography variant="Title/Subtitle/md">
<p>
{memberRate.price}{' '}
{`${memberRate.price} `}
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{memberRate.unit}</span>
</Typography>
@@ -121,16 +121,18 @@ export default function CampaignRateCard({
</Typography>
</div>
) : null}
<div className={`${styles.rateRow} ${styles.approximateRate}`}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>{approximateRate.label}</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{approximateRate.price} {approximateRate.unit}
</p>
</Typography>
</div>
{approximateRate ? (
<div className={`${styles.rateRow} ${styles.approximateRate}`}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>{approximateRate.label}</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{approximateRate.price} {approximateRate.unit}
</p>
</Typography>
</div>
) : null}
</div>
{referenceRate ? (
<footer className={styles.footer}>

2
packages/design-system/lib/components/RateCard/Code/index.tsx
View File

@@ -81,7 +81,7 @@ export default function CodeRateCard({
</Typography>
<Typography variant="Title/Subtitle/md">
<p>
{rate.price}{' '}
{`${rate.price} `}
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{rate.unit}</span>
</Typography>

6
packages/design-system/lib/components/RateCard/Points/index.tsx
View File

@@ -71,10 +71,10 @@ export default function PointsRateCard({
<div className={styles.pointsRow}>
<Typography variant="Title/Subtitle/md">
<p>
{rate.points}{' '}
{`${rate.points} `}
<Typography variant="Body/Supporting text (caption)/smBold">
<span>
{rate.currency} {rate.additionalPrice && ' + '}
{`${rate.currency} ${rate.additionalPrice && ' + '}`}
</span>
</Typography>
</p>
@@ -82,7 +82,7 @@ export default function PointsRateCard({
{rate.additionalPrice && (
<Typography variant="Title/Subtitle/md">
<p>
{rate.additionalPrice.price}{' '}
{`${rate.additionalPrice.price} `}
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{rate.currency}</span>
</Typography>

28
packages/design-system/lib/components/RateCard/Regular/index.tsx
View File

@@ -15,7 +15,7 @@ interface RegularRateCardProps {
paymentTerm: string
rate?: Rate
memberRate?: Rate
approximateRate: Rate
approximateRate?: Rate
hidePublicRate?: boolean
handleChange: () => void
handleTermsClick?: () => void
@@ -76,7 +76,7 @@ export default function RegularRateCard({
</Typography>
<Typography variant="Title/Subtitle/md">
<p>
{rate.price}{' '}
{`${rate.price} `}
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{rate.unit}</span>
</Typography>
@@ -91,7 +91,7 @@ export default function RegularRateCard({
</Typography>
<Typography variant="Title/Subtitle/md">
<p>
{memberRate.price}{' '}
{`${memberRate.price} `}
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{memberRate.unit}</span>
</Typography>
@@ -99,16 +99,18 @@ export default function RegularRateCard({
</Typography>
</div>
) : null}
<div className={`${styles.rateRow} ${styles.approximateRate}`}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>{approximateRate.label}</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{approximateRate.price} {approximateRate.unit}
</p>
</Typography>
</div>
{approximateRate ? (
<div className={`${styles.rateRow} ${styles.approximateRate}`}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>{approximateRate.label}</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{approximateRate.price} {approximateRate.unit}
</p>
</Typography>
</div>
) : null}
</div>
</div>
</div>

1
packages/design-system/lib/components/RateCard/rate-card.module.css
View File

@@ -28,6 +28,7 @@
.rateCard {
position: relative;
background-color: var(--Scandic-Grey-00);
border: 1px solid transparent;
border-radius: var(--Corner-radius-md);
}