From 0ffb40e94b3b7ddf6461c496f6264bf2db070926 Mon Sep 17 00:00:00 2001 From: Anton Gunnarsson Date: Thu, 3 Jul 2025 08:14:18 +0000 Subject: [PATCH] Merged in chore/sw-3145-move-footnote (pull request #2506) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit chore(SW-3145): Move Footnote to design-system * Move Footnote to design-system Approved-by: Joakim Jäderberg --- .../(protected)/sas-x-scandic/login/page.tsx | 2 +- .../DeprecatedJsonToHtml/renderOptions.tsx | 2 +- .../DestinationFilterAndSort/index.tsx | 2 +- .../Search/SearchList/List/Label.tsx | 2 +- .../FormContent/Search/SearchList/index.tsx | 2 +- .../Header/MainMenu/Avatar/index.tsx | 2 +- .../JoinScandicFriendsCard/index.tsx | 2 +- .../EnterDetails/Details/Multiroom/index.tsx | 3 +- .../RoomOne/JoinScandicFriendsCard/index.tsx | 2 +- .../EnterDetails/Details/RoomOne/index.tsx | 3 +- .../EnterDetails/SelectedRoom/index.tsx | 2 +- .../StandaloneHotelCardDialog/index.tsx | 2 +- .../Filters/FilterAndSortModal/index.tsx | 2 +- .../RoomsContainer/RateSummary/index.tsx | 2 +- .../HotelReservation/SignupPromo/Desktop.tsx | 2 +- .../HotelReservation/SignupPromo/Mobile.tsx | 2 +- .../JoinLoyalty/Contact/ContactRow/index.tsx | 2 +- .../TempDesignSystem/Chip/index.tsx | 2 +- .../Text/Footnote/footnote.ts | 10 ----- .../TempDesignSystem/Text/Footnote/index.tsx | 33 -------------- .../components}/Footnote/footnote.module.css | 0 .../lib/components/Footnote/index.tsx | 43 +++++++++++++++++++ .../lib/components}/Footnote/variants.ts | 8 ++-- packages/design-system/package.json | 1 + 24 files changed, 68 insertions(+), 65 deletions(-) delete mode 100644 apps/scandic-web/components/TempDesignSystem/Text/Footnote/footnote.ts delete mode 100644 apps/scandic-web/components/TempDesignSystem/Text/Footnote/index.tsx rename {apps/scandic-web/components/TempDesignSystem/Text => packages/design-system/lib/components}/Footnote/footnote.module.css (100%) create mode 100644 packages/design-system/lib/components/Footnote/index.tsx rename {apps/scandic-web/components/TempDesignSystem/Text => packages/design-system/lib/components}/Footnote/variants.ts (89%) diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx index d149687af..340d26989 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx +++ b/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" diff --git a/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx b/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx index 030711521..8f43da2f0 100644 --- a/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx +++ b/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" diff --git a/apps/scandic-web/components/DestinationFilterAndSort/index.tsx b/apps/scandic-web/components/DestinationFilterAndSort/index.tsx index cd2d78385..d3a3eef11 100644 --- a/apps/scandic-web/components/DestinationFilterAndSort/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/Label.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/Label.tsx index e671052b1..53d8d6d0f 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/Label.tsx +++ b/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" diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx index 45b0c8f7c..db1e617b0 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/Header/MainMenu/Avatar/index.tsx b/apps/scandic-web/components/Header/MainMenu/Avatar/index.tsx index 82e5e8d41..ecc1ab703 100644 --- a/apps/scandic-web/components/Header/MainMenu/Avatar/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx index 9d75c41f2..6fbc9e9e9 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx index fb4be39a3..136f2b54c 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx index 17a3d67cd..0128533ae 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx index 8017f440c..4225ee2f9 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx index c2b3748e0..30c217650 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx index 3994af76f..cf5c80e1e 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx index 5b3fadf85..2ab068436 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx index 6ec453a5e..5f58d2941 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/SignupPromo/Desktop.tsx b/apps/scandic-web/components/HotelReservation/SignupPromo/Desktop.tsx index f73342bea..42671831f 100644 --- a/apps/scandic-web/components/HotelReservation/SignupPromo/Desktop.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/SignupPromo/Mobile.tsx b/apps/scandic-web/components/HotelReservation/SignupPromo/Mobile.tsx index b92b5e029..87b2e7ef5 100644 --- a/apps/scandic-web/components/HotelReservation/SignupPromo/Mobile.tsx +++ b/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" diff --git a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx index 2184300b0..bb7eb4034 100644 --- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/TempDesignSystem/Chip/index.tsx b/apps/scandic-web/components/TempDesignSystem/Chip/index.tsx index f66582955..330d27803 100644 --- a/apps/scandic-web/components/TempDesignSystem/Chip/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Footnote/footnote.ts b/apps/scandic-web/components/TempDesignSystem/Text/Footnote/footnote.ts deleted file mode 100644 index 4eb35721d..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Text/Footnote/footnote.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { VariantProps } from "class-variance-authority" - -import type { footnoteVariants } from "./variants" - -export interface FootnoteProps - extends Omit, "color">, - VariantProps { - asChild?: boolean - fontOnly?: boolean -} diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Footnote/index.tsx b/apps/scandic-web/components/TempDesignSystem/Text/Footnote/index.tsx deleted file mode 100644 index bc34d2471..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Text/Footnote/index.tsx +++ /dev/null @@ -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 -} diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Footnote/footnote.module.css b/packages/design-system/lib/components/Footnote/footnote.module.css similarity index 100% rename from apps/scandic-web/components/TempDesignSystem/Text/Footnote/footnote.module.css rename to packages/design-system/lib/components/Footnote/footnote.module.css diff --git a/packages/design-system/lib/components/Footnote/index.tsx b/packages/design-system/lib/components/Footnote/index.tsx new file mode 100644 index 000000000..560e04ef3 --- /dev/null +++ b/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, 'color'>, + VariantProps { + 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 +} diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Footnote/variants.ts b/packages/design-system/lib/components/Footnote/variants.ts similarity index 89% rename from apps/scandic-web/components/TempDesignSystem/Text/Footnote/variants.ts rename to packages/design-system/lib/components/Footnote/variants.ts index a7595df73..d5516def2 100644 --- a/apps/scandic-web/components/TempDesignSystem/Text/Footnote/variants.ts +++ b/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 diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 186cbda4a..4132a22d6 100644 --- a/packages/design-system/package.json +++ b/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",