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

feat: update links default color to match design documents

Browse Source
This commit is contained in:
Christian Andolf
2025-05-27 16:54:09 +02:00
parent 7694a188da
commit b3b3704c86
74 changed files with 623 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx
View File

@@ -97,8 +97,8 @@ export function LinkAccountForm({
<Link
href={profileEdit[params.lang]}
className={styles.dateOfBirthLink}
color="peach80"
variant="underscored"
color="Text/Interactive/Secondary"
textDecoration="underline"
>
{intl.formatMessage({
defaultMessage: "Edit your personal details",
@@ -140,7 +140,6 @@ export function LinkAccountForm({
<Link
href={sasPartnershipTermsAndConditions[params.lang]}
weight="bold"
variant="default"
textDecoration="underline"
>
{str}

1
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx
View File

@@ -97,7 +97,6 @@ export default async function SASxScandicLoginPage(props: PageArgs<LangParams> &
<Link
href={loginLink}
color="red"
variant="default"
size="tiny"
textDecoration="underline"
>

1
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx
View File

@@ -115,7 +115,6 @@ export default function OneTimePasswordForm({
href="#"
onClick={handleRequestNewOtp}
color="red"
variant="default"
size="small"
className={disableResend ? styles["disabled-link"] : ""}
>

2
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
View File

@@ -40,7 +40,7 @@ export default function JobylonCard({ job }: JobylonCardProps) {
</Subtitle>
<div className={styles.contentWrapper}>
<div className={styles.content}>
<div>
<Caption>{job.categories.map((cat) => cat.text).join(", ")}</Caption>
<Caption>
{job.locations

2
apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx
View File

@@ -89,7 +89,7 @@ export default function Row({ transaction }: RowProps) {
transaction.type === Transactions.rewardType.rewardNight)
) {
return (
<Link variant="underscored" href={transaction.bookingUrl}>
<Link textDecoration="underline" href={transaction.bookingUrl}>
{transaction.confirmationNumber}
</Link>
)

6
apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/index.tsx
View File

@@ -39,7 +39,11 @@ export default async function EmptyUpcomingStaysBlock() {
</span>
</Title>
</div>
<Link href={href} className={styles.link} color="peach80">
<Link
href={href}
className={styles.link}
color="Text/Interactive/Secondary"
>
{intl.formatMessage({
defaultMessage: "Get inspired",
})}

7
apps/scandic-web/components/Blocks/UspGrid/renderOptions.tsx
View File

@@ -20,12 +20,7 @@ export const renderOptions: RenderOptions = {
: node.attrs.href
return (
<Link
href={href}
key={node.uid}
variant="underscored"
color="burgundy"
>
<Link href={href} key={node.uid} textDecoration="underline">
{next(node.children, embeds, fullRenderOptions)}
</Link>
)

2
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css
View File

@@ -58,7 +58,7 @@
cursor: pointer;
&:hover {
color: var(--Text-Interactive-Hover-Secondary);
color: var(--Text-Interactive-Secondary-Hover);
}
}

4
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/index.tsx
View File

@@ -33,7 +33,7 @@ export default async function Destination({
<li key={city.id}>
<Link
href={city.url}
color="baseTextMediumContrast"
color="Text/Interactive/Secondary"
textDecoration="underline"
>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
@@ -44,7 +44,7 @@ export default async function Destination({
)}
</ul>
{countryUrl && (
<Link href={countryUrl} variant="icon" color="burgundy" weight="bold">
<Link href={countryUrl} weight="bold">
{intl.formatMessage(
{
defaultMessage: "View all hotels in {country}",

2
apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/hotelListingItem.module.css
View File

@@ -50,7 +50,7 @@
color: var(--Text-Interactive-Secondary);
&:hover {
color: var(--Text-Interactive-Hover-Secondary);
color: var(--Text-Interactive-Secondary-Hover);
}
}

3
apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx
View File

@@ -46,9 +46,8 @@ export default async function TripAdvisorLink({
return (
<Link
variant="icon"
textDecoration="underline"
color="peach80"
color="Text/Interactive/Secondary"
href={tripAdvisorHref}
>
<TripadvisorIcon color="CurrentColor" />

6
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx
View File

@@ -55,7 +55,7 @@ export default async function ContactInformation({
<Link
href={directionsUrl}
target="_blank"
color="peach80"
color="Text/Interactive/Secondary"
textDecoration="underline"
>
{intl.formatMessage({
@@ -72,7 +72,7 @@ export default async function ContactInformation({
<Body>
<Link
href={`tel:+${contact.phoneNumber}`}
color="peach80"
color="Text/Interactive/Secondary"
textDecoration="underline"
>
{contact.phoneNumber}
@@ -113,7 +113,7 @@ export default async function ContactInformation({
</Body>
<Link
href={`mailto:${contact.email}`}
color="peach80"
color="Text/Interactive/Secondary"
textDecoration="underline"
>
{contact.email}

2
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx
View File

@@ -25,7 +25,7 @@ export default async function ActivitiesSidePeek({
<Preamble>{preamble}</Preamble>
<div className={styles.buttonContainer}>
<Button theme="base" intent="secondary" asChild>
<Link href={href} color="burgundy" weight="bold">
<Link href={href} weight="bold">
{sidepeekCTA}
</Link>
</Button>

3
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx
View File

@@ -77,8 +77,7 @@ export default async function RestaurantBarItem({
href={url}
target="_blank"
textDecoration="underline"
variant="icon"
color="baseTextMediumContrast"
color="Text/Interactive/Secondary"
>
{name}
<MaterialIcon

2
apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/index.tsx
View File

@@ -101,7 +101,7 @@ function renderNode(domNode: Node, idx: number) {
return (
<Link
key={domNode.name + idx}
color="peach80"
color="Text/Interactive/Secondary"
textDecoration="underline"
weight="bold"
target="_blank" //Always open in new tab

3
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx
View File

@@ -70,9 +70,8 @@ export default async function RestaurantSidebar({
<li key={name}>
<Link
href={url}
color="baseTextMediumContrast"
color="Text/Interactive/Secondary"
textDecoration="underline"
variant="icon"
>
{name}
<MaterialIcon

7
apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx
View File

@@ -76,9 +76,8 @@ function PrimaryLinks({ handleOnClick }: { handleOnClick: () => void }) {
<Link
href={link.href}
partialMatch
size={"regular"}
size="regular"
variant="myPageMobileDropdown"
color="burgundy"
onClick={handleOnClick}
>
{link.text}
@@ -108,9 +107,8 @@ function SecondaryLinks({ handleOnClick }: { handleOnClick: () => void }) {
<Link
href={link.href}
partialMatch
size={"small"}
size="small"
variant="myPageMobileDropdown"
color="burgundy"
onClick={handleOnClick}
>
{link.text}
@@ -122,7 +120,6 @@ function SecondaryLinks({ handleOnClick }: { handleOnClick: () => void }) {
href={logout[lang]}
prefetch={false}
size="small"
color="burgundy"
variant="myPageMobileDropdown"
>
{intl.formatMessage({

2
apps/scandic-web/components/Current/Header/TopMenu/index.tsx
View File

@@ -73,7 +73,6 @@ export default async function TopMenu({
position="hamburger menu"
trackingId="loginStartTopMenu"
className={`${styles.sessionLink} ${styles.loginLink}`}
variant="default"
size="small"
>
{intl.formatMessage({
@@ -105,7 +104,6 @@ export async function TopMenuSkeleton() {
position="hamburger menu"
trackingId="loginStartTopMenu"
className={`${styles.sessionLink} ${styles.loginLink}`}
variant="default"
size="small"
>
{intl.formatMessage({

6
apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx
View File

@@ -73,8 +73,7 @@ export const renderOptions: RenderOptions = {
href={node.attrs.url}
key={node.uid}
target={node.attrs.target ?? "_blank"}
variant="underscored"
color="burgundy"
textDecoration="underline"
>
{next(node.children, embeds, fullRenderOptions)}
</Link>
@@ -359,8 +358,7 @@ export const renderOptions: RenderOptions = {
{...props}
href={href}
key={node.uid}
variant="underscored"
color="burgundy"
textDecoration="underline"
>
{next(node.children, embeds, fullRenderOptions)}
</Link>

1
apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx
View File

@@ -22,7 +22,6 @@ export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
<li key={link.title} className={styles.mainNavigationItem}>
<Typography variant="Title/Subtitle/md">
<Link
color="burgundy"
href={link.url}
className={styles.mainNavigationLink}
target={link.openInNewTab ? "_blank" : undefined}

1
apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx
View File

@@ -67,7 +67,6 @@ export default function FooterSecondaryNav({
<Link
href={link.url}
target={link.openInNewTab ? "_blank" : undefined}
color="burgundy"
onClick={() => trackFooterClick(group.title, link.title)}
>
{link.title}

8
apps/scandic-web/components/Forms/Signup/index.tsx
View File

@@ -210,8 +210,8 @@ export default function SignupForm({ title }: SignUpFormProps) {
{
termsAndConditionsLink: (str) => (
<Link
variant="underscored"
color="peach80"
textDecoration="underline"
color="Text/Interactive/Secondary"
target="_blank"
href={membershipTermsAndConditions[lang]}
>
@@ -220,8 +220,8 @@ export default function SignupForm({ title }: SignUpFormProps) {
),
privacyPolicy: (str) => (
<Link
variant="underscored"
color="peach80"
textDecoration="underline"
color="Text/Interactive/Secondary"
target="_blank"
href={privacyPolicy[lang]}
>

2
apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
View File

@@ -101,7 +101,7 @@ function PrimaryLinks({
href={link.href}
onClick={toggleOpenStateFn}
variant="menu"
weight={"bold"}
weight="bold"
className={styles.link}
>
{link.text}

2
apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
View File

@@ -60,8 +60,6 @@ export default function MegaMenu({
{seeAllLink?.link ? (
<Link
href={seeAllLink.link.url}
color="burgundy"
variant="icon"
weight="bold"
onClick={handleNavigate}
>

4
apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
View File

@@ -46,7 +46,7 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
<>
<MainMenuButton
onClick={() => toggleMegaMenu(megaMenuTitle)}
className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
>
{title}
{isMobile ? (
@@ -81,7 +81,7 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
</>
) : (
<Link
className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
variant="navigation"
weight="bold"
onClick={handleNavigate}

4
apps/scandic-web/components/HotelReservation/BookingConfirmation/HotelDetails/index.tsx
View File

@@ -49,14 +49,14 @@ export default function HotelDetails({
<div className={styles.contact}>
<Link
className={styles.link}
color="baseTextMediumContrast"
color="Text/Interactive/Secondary"
href={`mailto:${hotel.contactInformation.email}`}
>
{hotel.contactInformation.email}
</Link>
<Link
className={styles.link}
color="baseTextMediumContrast"
color="Text/Interactive/Secondary"
href={hotel.contactInformation.websiteUrl}
>
{hotel.contactInformation.websiteUrl}

3
apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
View File

@@ -96,11 +96,10 @@ export default function ReceiptRoom({
trigger={
<Button intent="text" className={styles.termsLink}>
<Link
color="peach80"
color="Text/Interactive/Secondary"
href=""
size="small"
textDecoration="underline"
variant="icon"
>
{intl.formatMessage({
defaultMessage: "Reservation policy",

3
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
View File

@@ -97,7 +97,6 @@ export default function JoinScandicFriendsCard({
defaultMessage: "Already a friend?",
})} `}
<LoginButton
color="burgundy"
position="enter details"
trackingId="join-scandic-friends-enter-details"
variant="breadcrumb"
@@ -134,11 +133,9 @@ export default function JoinScandicFriendsCard({
{
termsAndConditionsLink: (str) => (
<Link
variant="default"
textDecoration="underline"
size="tiny"
target="_blank"
color="uiTextPlaceholder"
href={membershipTermsAndConditions[lang]}
>
{str}

2
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
View File

@@ -34,7 +34,7 @@ export default function TimeoutSpinner() {
link: (text) => (
<Link
href={customerService[lang]}
variant="underscored"
textDecoration="underline"
target="_blank"
>
{text}

8
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx
View File

@@ -30,7 +30,7 @@ export default function TermsAndConditions({
termsAndConditionsLink: (str) => (
<Link
className={styles.link}
variant="underscored"
textDecoration="underline"
href={bookingTermsAndConditions[lang]}
target="_blank"
weight="bold"
@@ -42,7 +42,7 @@ export default function TermsAndConditions({
privacyPolicyLink: (str) => (
<Link
className={styles.link}
variant="underscored"
textDecoration="underline"
href={privacyPolicy[lang]}
target="_blank"
weight="bold"
@@ -62,7 +62,7 @@ export default function TermsAndConditions({
termsAndConditionsLink: (str) => (
<Link
className={styles.link}
variant="underscored"
textDecoration="underline"
href={bookingTermsAndConditions[lang]}
target="_blank"
weight="bold"
@@ -74,7 +74,7 @@ export default function TermsAndConditions({
privacyPolicyLink: (str) => (
<Link
className={styles.link}
variant="underscored"
textDecoration="underline"
href={privacyPolicy[lang]}
target="_blank"
weight="bold"

1
apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
View File

@@ -128,7 +128,6 @@ export default function FindMyBooking() {
<Link
href={customerService[lang]}
size="small"
color="uiTextPlaceholder"
textDecoration="underline"
target="_blank"
>

3
apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
View File

@@ -117,8 +117,7 @@ function HotelCard({
) : (
<Link
size="small"
color="burgundy"
variant="underscored"
textDecoration="underline"
onClick={handleAddressClick}
href={selectHotelMap(lang)}
keepSearchParams

9
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx
View File

@@ -169,8 +169,8 @@ export default function ConfirmationStep({
{
termsAndConditionsLink: (str) => (
<Link
variant="underscored"
color="peach80"
textDecoration="underline"
color="Text/Interactive/Secondary"
target="_blank"
href={bookingTermsAndConditions[lang]}
>
@@ -179,8 +179,8 @@ export default function ConfirmationStep({
),
privacyPolicyLink: (str) => (
<Link
variant="underscored"
color="peach80"
textDecoration="underline"
color="Text/Interactive/Secondary"
target="_blank"
href={privacyPolicy[lang]}
>
@@ -192,7 +192,6 @@ export default function ConfirmationStep({
</p>
</Typography>
<Checkbox
className={styles.checkbox}
name="termsAndConditions"
registerOptions={{ required: true }}
>

1
apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx
View File

@@ -61,7 +61,6 @@ export default function SummaryCard({
<Link
href={link.href}
target="_blank"
color="burgundy"
className={styles.link}
onClick={link.onClick}
>

8
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
View File

@@ -107,8 +107,8 @@ export default function Form() {
{
termsAndConditionsLink: (str) => (
<Link
variant="underscored"
color="peach80"
textDecoration="underline"
color="Text/Interactive/Secondary"
target="_blank"
href={bookingTermsAndConditions[lang]}
onClick={(e) => e.stopPropagation()}
@@ -118,8 +118,8 @@ export default function Form() {
),
privacyPolicyLink: (str) => (
<Link
variant="underscored"
color="peach80"
textDecoration="underline"
color="Text/Interactive/Secondary"
target="_blank"
href={privacyPolicy[lang]}
onClick={(e) => e.stopPropagation()}

1
apps/scandic-web/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx
View File

@@ -42,7 +42,6 @@ export default function MobileMapButtonContainer({
href={
isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
}
color="baseButtonTextOnFillNormal"
keepSearchParams
weight="bold"
>

7
apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx
View File

@@ -90,12 +90,7 @@ export default async function SelectHotel({
{showBookingCodeFilter ? <BookingCodeFilter /> : null}
<div className={styles.sideBar}>
{hotels.length ? (
<Link
className={styles.link}
color="burgundy"
href={mapHref}
keepSearchParams
>
<Link className={styles.link} href={mapHref} keepSearchParams>
<div className={styles.mapContainer}>
<StaticMap
city={city.name}

2
apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css
View File

@@ -42,7 +42,7 @@
cursor: pointer;
&:hover {
color: var(--Text-Interactive-Hover-Secondary);
color: var(--Text-Interactive-Secondary-Hover);
}
}

8
apps/scandic-web/components/JsonToHtml/renderOptions.tsx
View File

@@ -94,8 +94,7 @@ export const renderOptions: RenderOptions = {
href={node.attrs.url}
key={node.uid}
target={node.attrs.target ?? "_blank"}
variant="underscored"
color="burgundy"
textDecoration="underline"
>
{next(
// Sometimes editors happen to nest a reference inside a link and vice versa.
@@ -396,9 +395,7 @@ export const renderOptions: RenderOptions = {
<Link
href={node.attrs.href}
key={node.uid}
variant="icon"
textDecoration="underline"
color="burgundy"
target="_blank"
>
{next(
@@ -450,8 +447,7 @@ export const renderOptions: RenderOptions = {
{...props}
href={entry.node.url}
key={node.uid}
variant="underscored"
color="burgundy"
textDecoration="underline"
>
{next(
// Sometimes editors happen to nest a reference inside a link and vice versa.

38
apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
View File

@@ -4,6 +4,7 @@ import { usePathname } from "next/navigation"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { type Lang, languages } from "@/constants/languages"
import { env } from "@/env/client"
@@ -44,21 +45,30 @@ export default function LanguageSwitcherContent({
if (url) {
return (
<li key={key}>
<Link
className={`${styles.link} ${isActive ? styles.active : ""}`}
href={replaceUrlPart(pathname, url)}
rel={env.isLangLive(key) ? undefined : "nofollow"}
onClick={onLanguageSwitch}
keepSearchParams
<Typography
variant={
isActive
? "Body/Paragraph/mdBold"
: "Body/Paragraph/mdRegular"
}
>
{languages[key]}
{isActive ? (
<MaterialIcon
icon="check"
color="Icon/Interactive/Default"
/>
) : null}
</Link>
<Link
className={styles.link}
href={replaceUrlPart(pathname, url)}
rel={env.isLangLive(key) ? undefined : "nofollow"}
onClick={onLanguageSwitch}
variant="languageSwitcher"
keepSearchParams
>
{languages[key]}
{isActive ? (
<MaterialIcon
icon="check"
color="Icon/Interactive/Default"
/>
) : null}
</Link>
</Typography>
</li>
)
}

15
apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
View File

@@ -16,11 +16,6 @@
}
.link {
color: var(--Scandic-Brand-Burgundy);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
line-height: var(--typography-Body-Regular-lineHeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
padding: var(--Spacing-x1);
border-radius: var(--Corner-radius-md);
display: flex;
@@ -31,12 +26,6 @@
border-radius: var(--Corner-radius-md);
}
.link.active,
.link:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
}
@media screen and (min-width: 768px) {
.backWrapper,
.backButton {
@@ -50,8 +39,4 @@
.subtitle {
display: none;
}
.link.active:not(:hover) {
background-color: transparent;
}
}

4
apps/scandic-web/components/LanguageSwitcher/languageSwitcher.module.css
View File

@@ -1,6 +1,6 @@
.button {
--language-switcher-color: var(--Base-Text-Medium-contrast);
--language-switcher-hover-color: var(--Base-Text-High-contrast);
--language-switcher-color: var(--Text-Interactive-Secondary);
--language-switcher-hover-color: var(--Text-Interactive-Secondary-Hover);
background-color: transparent;
border-width: 0;

2
apps/scandic-web/components/MyPages/Profile/MembershipCards/index.tsx
View File

@@ -78,7 +78,7 @@ export default async function MembershipCardSlot() {
</span>
</div>
))}
<Link href="#" variant="icon">
<Link href="#">
<MaterialIcon icon="add_circle" color="CurrentColor" />
<Body color="burgundy" textTransform="underlined">
{intl.formatMessage({

9
apps/scandic-web/components/MyPages/Sidebar/index.tsx
View File

@@ -50,11 +50,10 @@ async function PrimaryLinks() {
{nav?.primaryLinks.map((link) => (
<li key={link.href}>
<Link
color="burgundy"
href={link.href}
partialMatch
prefetch={true}
size={"regular"}
size="regular"
variant="sidebar"
>
{link.text}
@@ -80,11 +79,10 @@ async function SecondaryLinks() {
{nav?.secondaryLinks.map((link) => (
<li key={link.href}>
<Link
color="burgundy"
href={link.href}
partialMatch
prefetch={true}
size={"small"}
size="small"
variant="sidebar"
>
{link.text}
@@ -93,11 +91,10 @@ async function SecondaryLinks() {
))}
<li>
<Link
color="burgundy"
href={logout[lang]}
partialMatch
prefetch={false}
size={"small"}
size="small"
variant="sidebar"
>
{intl.formatMessage({

2
apps/scandic-web/components/MyPages/Surprises/Client.tsx
View File

@@ -82,7 +82,7 @@ export default function SurprisesNotification({
{ amount: surprises.length }
)}
<br />
<Link href={benefitPageUrl} variant="underscored" color="burgundy">
<Link href={benefitPageUrl} textDecoration="underline">
{intl.formatMessage({
defaultMessage: "Go to My Benefits",
})}

2
apps/scandic-web/components/SasTierComparison/index.tsx
View File

@@ -155,7 +155,7 @@ function ReadMoreLink({
children: ReactNode
}) {
return (
<Link href={href} className={styles.link} weight="bold" color="burgundy">
<Link href={href} className={styles.link} weight="bold">
{children}
<MaterialIcon icon="arrow_forward" color="CurrentColor" />
</Link>

7
apps/scandic-web/components/Section/Link/index.tsx
View File

@@ -16,12 +16,7 @@ export default function SectionLink({ link, variant }: SectionLinkProps) {
variant,
})
return (
<Link
className={classNames}
color="burgundy"
href={link.href}
variant="underscored"
>
<Link className={classNames} href={link.href} textDecoration="underline">
{link.text}
<MaterialIcon
icon="arrow_forward"

3
apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
View File

@@ -52,8 +52,7 @@ export default async function ContactRow({ contact }: ContactRowProps) {
<Link
className={styles.link}
href={openableLink}
variant="underscored"
color="burgundy"
textDecoration="underline"
size="small"
>
{Icon ? <Icon size={20} color="Icon/Interactive/Default" /> : null}

8
apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/index.tsx
View File

@@ -40,15 +40,9 @@ export default async function ReadMore() {
key={link.text}
size="small"
className={styles.link}
color="burgundy"
href={link.href}
>
<MaterialIcon
icon="arrow_forward"
color="CurrentColor"
className={styles.icon}
size={20}
/>
<MaterialIcon icon="arrow_forward" color="CurrentColor" size={20} />
{link.text}
</Link>
))}

1
apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx
View File

@@ -61,7 +61,6 @@ export default async function JoinLoyaltyContact({
className={styles.link}
trackingId="loginJoinLoyalty"
position="join scandic friends sidebar"
color="burgundy"
>
<MaterialIcon
icon="arrow_forward"

2
apps/scandic-web/components/TempDesignSystem/Alert/index.tsx
View File

@@ -61,7 +61,6 @@ export default function Alert({
<>
<span> {phoneContact.displayText} </span>
<Link
color="burgundy"
href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
>
{phoneContact.phoneNumber}
@@ -80,7 +79,6 @@ export default function Alert({
{link ? (
<Link
color="burgundy"
textDecoration="underline"
href={link.url}
keepSearchParams={link.keepSearchParams}

2
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css
View File

@@ -70,7 +70,7 @@
.link:hover,
.button:hover {
color: var(--Text-Interactive-Hover-Secondary);
color: var(--Text-Interactive-Secondary-Hover);
}
.dialog {

1
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/index.tsx
View File

@@ -109,7 +109,6 @@ export default function Breadcrumbs({
<Typography
key={breadcrumb.uid}
variant="Label/xsRegular"
className={styles.dialogItem}
>
<Link
href={breadcrumb.href!}

340
apps/scandic-web/components/TempDesignSystem/Link/link.module.css
View File

@@ -1,188 +1,16 @@
.link {
}
.noDecoration {
text-decoration: none;
align-items: center;
display: flex;
gap: var(--Space-x05);
}
.underline {
text-decoration: underline;
}
.default {
font-family: var(--typography-Body-Regular-fontFamily);
}
.breadcrumb {
font-family: var(--typography-Footnote-Bold-fontFamily);
font-size: var(--typography-Footnote-Bold-fontSize);
font-weight: 500;
/* var(--typography-Footnote-Bold-fontWeight); */
letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
line-height: var(--typography-Footnote-Bold-lineHeight);
}
.link.breadcrumb {
font-family: var(--typography-Footnote-Bold-fontFamily);
font-size: var(--typography-Footnote-Bold-fontSize);
font-weight: 500;
/* var(--typography-Footnote-Bold-fontWeight); */
letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
line-height: var(--typography-Footnote-Bold-lineHeight);
}
.icon {
align-items: center;
display: flex;
gap: var(--Spacing-x-half);
}
.underscored {
font-family: var(--typography-Body-Underline-fontFamily);
font-size: var(--typography-Body-Underline-fontSize);
font-weight: var(--typography-Body-Underline-fontWeight);
letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underline-lineHeight);
text-decoration: underline;
}
.myPageMobileDropdown {
color: var(--Scandic-Brand-Burgundy);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
line-height: var(--typography-Body-Regular-lineHeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
padding: var(--Spacing-x1);
border-radius: var(--Corner-radius-md);
display: flex;
gap: var(--Spacing-x1);
justify-content: space-between;
align-items: center;
}
.myPageMobileDropdown:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
border-radius: var(--Corner-radius-md);
}
.shortcut {
align-items: center;
display: grid;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
gap: var(--Spacing-x2);
grid-template-columns: 1fr auto;
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
padding: var(--Spacing-x2) var(--Spacing-x3);
background-color: var(--Base-Surface-Primary-light-Normal);
transition: background-color 0.3s;
}
.shortcut:hover {
background-color: var(--UI-Input-Controls-Surface-Hover);
}
.shortcut:last-of-type {
border-bottom: none;
}
.sidebar {
align-items: center;
border-radius: var(--Corner-radius-md);
display: flex;
gap: var(--Spacing-x1);
padding: var(--Spacing-x1);
}
.activeSidebar {
background-color: var(--Scandic-Peach-20);
}
.tab {
font-family: var(--typography-Body-Regular-fontFamily);
padding: var(--Spacing-x2) var(--Spacing-x0);
color: var(--Base-Text-High-contrast);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-bottom 0.3s ease-in-out;
}
.tab:hover {
border-bottom: 2px solid var(--Scandic-Brand-Burgundy);
}
.tab.burgundy:hover {
color: var(--Base-Text-High-contrast);
}
.tab.active {
border-bottom: 2px solid var(--Scandic-Brand-Burgundy);
font-weight: 600;
}
.baseButtonTextOnFillNormal {
color: var(--Base-Button-Text-On-Fill-Normal);
}
.black {
color: #000;
}
.uiTextPlaceholder {
color: var(--Base-Text-Placeholder);
}
.uiTextPlaceholder:hover,
.uiTextPlaceholder:active {
color: var(--Base-Text-Medium-contrast);
}
.burgundy {
color: var(--Base-Text-High-contrast);
}
.burgundy:hover,
.burgundy:active {
color: var(--Base-Button-Text-On-Fill-Hover);
}
.burgundy:hover *,
.burgundy:active * {
fill: var(--Base-Button-Text-On-Fill-Hover);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.peach50 {
color: var(--Scandic-Peach-50);
}
.peach80,
.baseTextMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.peach80:hover,
.peach80:active,
.baseTextMediumContrast:hover,
.baseTextMediumContrast:active {
color: var(--Base-Text-High-contrast);
}
.peach80 *,
.baseTextMediumContrast * {
fill: var(--Base-Text-Medium-contrast);
}
.peach80:hover *,
.peach80:active *,
.baseTextMediumContrast:hover *,
.baseTextMediumContrast:active * {
fill: var(--Base-Text-High-contrast);
color: var(--Primary-Dark-On-Surface-Accent);
}
.red {
@@ -191,16 +19,122 @@
.white {
color: var(--Base-Button-Primary-On-Fill-Normal);
&:hover,
&:active {
color: var(--Base-Button-Primary-On-Fill-Hover);
}
&:hover *,
&:active * {
fill: var(--Base-Button-Primary-On-Fill-Hover);
}
}
.white:hover,
.white:active {
color: var(--Base-Button-Primary-On-Fill-Hover);
.Text-Interactive-Default {
color: var(--Text-Interactive-Default);
&:hover {
color: var(--Text-Interactive-Hover);
}
}
.white:hover *,
.white:active * {
fill: var(--Base-Button-Primary-On-Fill-Hover);
.Text-Interactive-Secondary {
color: var(--Text-Interactive-Secondary);
&:hover {
color: var(--Text-Interactive-Secondary-Hover);
}
}
.breadcrumb {
font-family: var(--typography-Footnote-Bold-fontFamily);
font-size: var(--typography-Footnote-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
line-height: var(--typography-Footnote-Bold-lineHeight);
}
.link.breadcrumb {
font-family: var(--typography-Footnote-Bold-fontFamily);
font-size: var(--typography-Footnote-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
line-height: var(--typography-Footnote-Bold-lineHeight);
}
.myPageMobileDropdown {
color: var(--Scandic-Brand-Burgundy);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
line-height: var(--typography-Body-Regular-lineHeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
padding: var(--Space-x1);
border-radius: var(--Corner-radius-md);
gap: var(--Space-x1);
justify-content: space-between;
&:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
border-radius: var(--Corner-radius-md);
}
}
.languageSwitcher {
color: var(--Text-Interactive-Default);
&:hover {
background-color: var(--Surface-Primary-Hover);
color: var(--Text-Interactive-Default);
}
}
.shortcut {
display: grid;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
gap: var(--Space-x2);
grid-template-columns: 1fr auto;
padding: var(--Space-x2) var(--Space-x3);
background-color: var(--Base-Surface-Primary-light-Normal);
transition: background-color 0.3s;
&:hover {
background-color: var(--UI-Input-Controls-Surface-Hover);
}
&:last-of-type {
border-bottom: none;
}
}
.sidebar {
border-radius: var(--Corner-radius-md);
gap: var(--Space-x1);
padding: var(--Space-x1);
&.active {
background-color: var(--Base-Surface-Primary-dark-Hover);
&.regular {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight);
}
&.small {
font-family: var(--typography-Caption-Bold-fontFamily);
font-size: var(--typography-Caption-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Caption-Bold-letterSpacing);
line-height: var(--typography-Caption-Bold-lineHeight);
}
}
}
.regular {
@@ -211,14 +145,6 @@
line-height: var(--typography-Body-Regular-lineHeight);
}
.activeRegular {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight);
}
.small {
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
@@ -235,14 +161,6 @@
line-height: var(--typography-Footnote-Regular-lineHeight);
}
.activeSmall {
font-family: var(--typography-Caption-Bold-fontFamily);
font-size: var(--typography-Caption-Bold-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Caption-Bold-letterSpacing);
line-height: var(--typography-Caption-Bold-lineHeight);
}
.bold {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
@@ -253,24 +171,24 @@
}
.menu {
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
width: 100%;
padding: var(--Spacing-x1);
gap: var(--Spacing-x-one-and-half);
color: var(--Base-Text-High-contrast);
padding: var(--Space-x1);
gap: var(--Space-x15);
border-radius: var(--Corner-radius-md);
}
color: var(--Text-Interactive-Default);
.menu:hover {
color: var(--Base-Text-High-contrast);
background-color: var(--Base-Surface-Primary-light-Hover-alt);
&:hover {
background-color: var(--Surface-Primary-Hover);
color: var(--Text-Interactive-Default);
}
}
.navigation {
color: var(--Base-Text-High-contrast);
text-decoration: none;
padding: var(--Spacing-x-half) var(--Spacing-x1);
padding: var(--Space-x05) var(--Space-x1);
color: var(--Text-Interactive-Default);
&:hover {
color: var(--Text-Interactive-Default);
}
}

21
apps/scandic-web/components/TempDesignSystem/Link/variants.ts
View File

@@ -8,17 +8,12 @@ export const linkVariants = cva(styles.link, {
true: styles.active,
},
color: {
baseButtonTextOnFillNormal: styles.baseButtonTextOnFillNormal,
baseTextMediumContrast: styles.baseTextMediumContrast,
black: styles.black,
burgundy: styles.burgundy,
none: "",
pale: styles.pale,
peach50: styles.peach50,
peach80: styles.peach80,
white: styles.white,
red: styles.red,
uiTextPlaceholder: styles.uiTextPlaceholder,
"Text/Interactive/Default": styles["Text-Interactive-Default"],
"Text/Interactive/Secondary": styles["Text-Interactive-Secondary"],
},
size: {
small: styles.small,
@@ -26,7 +21,6 @@ export const linkVariants = cva(styles.link, {
tiny: styles.tiny,
},
textDecoration: {
none: styles.noDecoration,
underline: styles.underline,
},
weight: {
@@ -34,32 +28,25 @@ export const linkVariants = cva(styles.link, {
},
variant: {
breadcrumb: styles.breadcrumb,
default: styles.default,
icon: styles.icon,
underscored: styles.underscored,
myPageMobileDropdown: styles.myPageMobileDropdown,
navigation: styles.navigation,
menu: styles.menu,
shortcut: styles.shortcut,
sidebar: styles.sidebar,
tab: styles.tab,
languageSwitcher: styles.languageSwitcher,
},
},
defaultVariants: {
color: "black",
variant: "default",
textDecoration: "none",
color: "Text/Interactive/Default",
size: "regular",
},
compoundVariants: [
{
class: `${styles.activeSidebar} ${styles.activeRegular}`,
active: true,
size: "regular",
variant: "sidebar",
},
{
class: `${styles.activeSidebar} ${styles.activeSmall}`,
active: true,
size: "small",
variant: "sidebar",

3
apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx
View File

@@ -44,10 +44,9 @@ export default function LoyaltyCard({
{link ? (
<Link
className={styles.link}
color="burgundy"
href={link.href}
target={link.openInNewTab ? "_blank" : undefined}
variant="underscored"
textDecoration="underline"
>
<MaterialIcon
icon="arrow_right"