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

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

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

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

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