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

Merged in chore/sw-3145-move-footnote (pull request #2506)

Browse Source 
chore(SW-3145): Move Footnote to design-system

* Move Footnote to design-system


Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
2025-07-03 08:14:18 +00:00
parent 75a377b59e
commit 0ffb40e94b
24 changed files with 68 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@ import { redirect } from "next/navigation"
import React from "react"
import { z } from "zod"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { env } from "@/env/server"
@@ -9,7 +10,6 @@ import { env } from "@/env/server"
import Image from "@/components/Image"
import { Redirect } from "@/components/Redirect"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { getIntl } from "@/i18n"
import { SASModal } from "../components/SASModal"

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

@@ -2,6 +2,7 @@ import { removeMultipleSlashes } from "@scandic-hotels/common/utils/url"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Footnote from "@scandic-hotels/design-system/Footnote"
import {
AvailableParagraphFormatEnum,
RTEItemTypeEnum,
@@ -15,7 +16,6 @@ import Link from "@/components/TempDesignSystem/Link"
import ImageContainer from "../ImageContainer"
import Table from "../TempDesignSystem/Table"
import BiroScript from "../TempDesignSystem/Text/BiroScript"
import Footnote from "../TempDesignSystem/Text/Footnote"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
import Title from "../TempDesignSystem/Text/Title"
import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"

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

@@ -11,13 +11,13 @@ import {
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
import { useDestinationDataStore } from "@/stores/destination-data"
import Button from "@/components/TempDesignSystem/Button"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Alert from "../TempDesignSystem/Alert"

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/Label.tsx
View File

@@ -1,4 +1,4 @@
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Footnote from "@scandic-hotels/design-system/Footnote"
import styles from "./list.module.css"

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
View File

@@ -7,10 +7,10 @@ import { useDebounceValue } from "usehooks-ts"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { trpc } from "@scandic-hotels/trpc/client"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import useLang from "@/hooks/useLang"
import ClearSearchButton from "./ClearSearchButton"

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

@@ -1,7 +1,7 @@
import Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@/components/Image"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import styles from "./avatar.module.css"

2
apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx
View File

@@ -3,13 +3,13 @@
import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { membershipTermsAndConditions } from "@/constants/webHrefs"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { useRoomContext } from "@/contexts/Details/Room"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"

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

@@ -4,13 +4,14 @@ import { useCallback, useEffect, useMemo } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { useEnterDetailsStore } from "@/stores/enter-details"
import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { useFormTracking } from "@/components/TrackingSDK/hooks"
import { useRoomContext } from "@/contexts/Details/Room"
import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"

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

@@ -2,6 +2,7 @@
import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { membershipTermsAndConditions } from "@/constants/webHrefs"
@@ -10,7 +11,6 @@ import LoginButton from "@/components/LoginButton"
import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { useRoomContext } from "@/contexts/Details/Room"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"

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

@@ -4,13 +4,14 @@ import { useCallback, useEffect } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { useEnterDetailsStore } from "@/stores/enter-details"
import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { useFormTracking } from "@/components/TrackingSDK/hooks"
import { useRoomContext } from "@/contexts/Details/Room"
import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"

2
apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
View File

@@ -6,11 +6,11 @@ import { useIntl } from "react-intl"
import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
import { Button } from "@scandic-hotels/design-system/Button"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { useEnterDetailsStore } from "@/stores/enter-details"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useRoomContext } from "@/contexts/Details/Room"
import useLang from "@/hooks/useLang"

2
apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
View File

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -13,7 +14,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { isValidClientSession } from "@/utils/clientSession"

2
apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx
View File

@@ -14,13 +14,13 @@ import {
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { useHotelFilterStore } from "@/stores/hotel-filters"
import Button from "@/components/TempDesignSystem/Button"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"

2
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
View File

@@ -7,6 +7,7 @@ import { useIntl } from "react-intl"
import { dt } from "@scandic-hotels/common/dt"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"
@@ -14,7 +15,6 @@ import { useRatesStore } from "@/stores/select-rate"
import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
import Button from "@/components/TempDesignSystem/Button"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { isValidClientSession } from "@/utils/clientSession"
import { formatPrice } from "@/utils/numberFormatting"

2
apps/scandic-web/components/HotelReservation/SignupPromo/Desktop.tsx
View File

@@ -3,8 +3,8 @@
import { useIntl } from "react-intl"
import Caption from "@scandic-hotels/design-system/Caption"
import Footnote from "@scandic-hotels/design-system/Footnote"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./signupPromo.module.css"

2
apps/scandic-web/components/HotelReservation/SignupPromo/Mobile.tsx
View File

@@ -2,7 +2,7 @@
import { useIntl } from "react-intl"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Footnote from "@scandic-hotels/design-system/Footnote"
import styles from "./signupPromo.module.css"

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

@@ -1,4 +1,5 @@
import Body from "@scandic-hotels/design-system/Body"
import Footnote from "@scandic-hotels/design-system/Footnote"
import {
MaterialIcon,
type MaterialIconSetIconProps,
@@ -8,7 +9,6 @@ import { getValueFromContactConfig } from "@scandic-hotels/trpc/utils/contactCon
import { serverClient } from "@/lib/trpc/server"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
// import { getValueFromContactConfig } from "@/utils/contactConfig"
import styles from "./contactRow.module.css"

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

@@ -1,4 +1,4 @@
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { chipVariants } from "./variants"

82
apps/scandic-web/components/TempDesignSystem/Text/Footnote/footnote.module.css
View File

@@ -1,82 +0,0 @@
.footnote {
margin: 0;
padding: 0;
}
.footnoteFontOnly {
font-style: normal;
}
.bold {
font-family: var(--typography-Footnote-Bold-fontFamily);
font-size: var(--typography-Footnote-Bold-fontSize);
font-weight: var(--typography-Footnote-Bold-fontWeight);
letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
line-height: var(--typography-Footnote-Bold-lineHeight);
text-decoration: var(--typography-Footnote-Bold-textDecoration);
}
.regular {
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: var(--typography-Footnote-Regular-fontWeight);
letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
line-height: var(--typography-Footnote-Regular-lineHeight);
text-decoration: var(--typography-Footnote-Regular-textDecoration);
}
.labels {
font-family: var(--typography-Footnote-Labels-fontFamily);
font-size: var(--typography-Footnote-Labels-fontSize);
font-weight: var(--typography-Footnote-Labels-fontWeight);
letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
line-height: var(--typography-Footnote-Labels-lineHeight);
text-decoration: var(--typography-Footnote-Labels-textDecoration);
}
.uppercase {
text-transform: uppercase;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.black {
color: var(--Main-Grey-100);
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.peach50 {
color: var(--Scandic-Peach-50);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}
.uiTextPlaceholder {
color: var(--UI-Text-Placeholder);
}
.white {
color: var(--Main-Grey-White);
}
.baseTextDisabled {
color: var(--Base-Text-Disabled);
}

10
apps/scandic-web/components/TempDesignSystem/Text/Footnote/footnote.ts
View File

@@ -1,10 +0,0 @@
import type { VariantProps } from "class-variance-authority"
import type { footnoteVariants } from "./variants"
export interface FootnoteProps
extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
VariantProps<typeof footnoteVariants> {
asChild?: boolean
fontOnly?: boolean
}

33
apps/scandic-web/components/TempDesignSystem/Text/Footnote/index.tsx
View File

@@ -1,33 +0,0 @@
import { Slot } from "@radix-ui/react-slot"
import { footnoteFontOnlyVariants, footnoteVariants } from "./variants"
import type { FootnoteProps } from "./footnote"
export default function Footnote({
asChild = false,
className = "",
color,
fontOnly = false,
textAlign,
textTransform,
type,
...props
}: FootnoteProps) {
const Comp = asChild ? Slot : "p"
const classNames = fontOnly
? footnoteFontOnlyVariants({
className,
textAlign,
textTransform,
type,
})
: footnoteVariants({
className,
color,
textAlign,
textTransform,
type,
})
return <Comp className={classNames} {...props} />
}

61
apps/scandic-web/components/TempDesignSystem/Text/Footnote/variants.ts
View File

@@ -1,61 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./footnote.module.css"
const config = {
variants: {
type: {
regular: styles.regular,
bold: styles.bold,
label: styles.labels,
},
color: {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
peach50: styles.peach50,
uiTextMediumContrast: styles.uiTextMediumContrast,
uiTextHighContrast: styles.uiTextHighContrast,
uiTextPlaceholder: styles.uiTextPlaceholder,
white: styles.white,
baseTextDisabled: styles.baseTextDisabled,
},
textAlign: {
center: styles.center,
left: styles.left,
},
textTransform: {
uppercase: styles.uppercase,
},
},
defaultVariants: {
type: "regular",
},
} as const
export const footnoteVariants = cva(styles.footnote, config)
const fontOnlyConfig = {
variants: {
type: {
regular: styles.regular,
bold: styles.bold,
label: styles.labels,
},
textAlign: {
center: styles.center,
left: styles.left,
},
textTransform: {
uppercase: styles.uppercase,
},
},
defaultVariants: {
type: "regular",
},
} as const
export const footnoteFontOnlyVariants = cva(
styles.footnoteFontOnly,
fontOnlyConfig
)