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

Merged in chore/BOOK-773-replace-old-typography-variables (pull request #3515)

Browse Source 
Chore/BOOK-773 replace old typography variables

* chore(BOOK-773): Replaced body typography

* chore(BOOK-773): Replaced caption typography

* chore(BOOK-773): Replaced footnote typography

* chore(BOOK-773): Replaced subtitle typography


Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2026-02-03 15:07:18 +00:00
committed by Bianca Widstam
parent dd65467573
commit b3c4761ae5
57 changed files with 261 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
View File

@@ -4,10 +4,9 @@ import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Footnote from "@scandic-hotels/design-system/Footnote"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trackEvent } from "@scandic-hotels/tracking/base"
import { trackLoginClick } from "@scandic-hotels/tracking/navigation"
@@ -101,8 +100,8 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
})}
</LoginButton>
<div className={styles.terms}>
<Footnote color="uiTextPlaceholder">
<Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.terms}>
{intl.formatMessage(
{
id: "enterDetails.joinScandicFriendsCard.terms",
@@ -111,19 +110,18 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
},
{
termsAndConditionsLink: (str) => (
<Link
textDecoration="underline"
size="tiny"
<TextLink
typography="Link/sm"
target="_blank"
href={routes.membershipTermsAndConditions[lang]}
>
{str}
</Link>
</TextLink>
),
}
)}
</Footnote>
</div>
</p>
</Typography>
</div>
)
}

1
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
View File

@@ -34,6 +34,7 @@
.terms {
grid-area: terms;
color: var(--Text-Secondary);
}
@media screen and (min-width: 768px) {

18
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/index.tsx
View File

@@ -4,9 +4,8 @@ import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Footnote from "@scandic-hotels/design-system/Footnote"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
@@ -94,8 +93,8 @@ export function PartnerSASJoinScandicFriendsCard({
/>
</div>
<div className={styles.terms}>
<Footnote color="uiTextPlaceholder">
<Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.terms}>
{intl.formatMessage(
{
id: "enterDetails.joinScandicFriendsCard.terms",
@@ -104,19 +103,18 @@ export function PartnerSASJoinScandicFriendsCard({
},
{
termsAndConditionsLink: (str) => (
<Link
textDecoration="underline"
size="tiny"
<TextLink
typography="Link/sm"
target="_blank"
href={routes.membershipTermsAndConditions[lang]}
>
{str}
</Link>
</TextLink>
),
}
)}
</Footnote>
</div>
</p>
</Typography>
</div>
)
}

1
packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
View File

@@ -31,6 +31,7 @@
.terms {
grid-area: terms;
color: var(--Text-Secondary);
}
@media screen and (min-width: 768px) {