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

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

* Move Footnote to design-system


Approved-by: Joakim Jäderberg

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

@@ -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"

apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx

@@ -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"

apps/scandic-web/components/DestinationFilterAndSort/index.tsx

@@ -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"

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

@@ -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"
 

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

@@ -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"

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

@@ -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"
 

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"

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

@@ -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"
 

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

@@ -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"

apps/scandic-web/components/HotelReservation/SignupPromo/Desktop.tsx

@@ -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"

apps/scandic-web/components/HotelReservation/SignupPromo/Mobile.tsx

@@ -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"
 

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

@@ -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"

apps/scandic-web/components/TempDesignSystem/Chip/index.tsx

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

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

@@ -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
-}

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

@@ -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} />
-}

packages/design-system/lib/components/Footnote/index.tsx

@@ -0,0 +1,43 @@
+import { Slot } from '@radix-ui/react-slot'
+
+import { footnoteFontOnlyVariants, footnoteVariants } from './variants'
+
+import type { VariantProps } from 'class-variance-authority'
+
+interface FootnoteProps
+  extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'color'>,
+    VariantProps<typeof footnoteVariants> {
+  asChild?: boolean
+  fontOnly?: boolean
+}
+
+/**
+ * @deprecated Use `@scandic-hotels/design-system/Typography` instead.
+ */
+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} />
+}

packages/design-system/lib/components/Footnote/variants.ts

@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./footnote.module.css"
+import styles from './footnote.module.css'
 
 const config = {
   variants: {
@@ -29,7 +29,7 @@ const config = {
     },
   },
   defaultVariants: {
-    type: "regular",
+    type: 'regular',
   },
 } as const
 
@@ -51,7 +51,7 @@ const fontOnlyConfig = {
     },
   },
   defaultVariants: {
-    type: "regular",
+    type: 'regular',
   },
 } as const
 

packages/design-system/package.json

@@ -12,6 +12,7 @@
     "./ChipLink": "./dist/components/ChipLink/index.js",
     "./Chips": "./dist/components/Chips/index.js",
     "./Divider": "./dist/components/Divider/index.js",
+    "./Footnote": "./dist/components/Footnote/index.js",
     "./Input": "./dist/components/Input/index.js",
     "./Label": "./dist/components/Label/index.js",
     "./Select": "./dist/components/Select/index.js",