diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx index 841540b01..b851e66bf 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx @@ -4,10 +4,11 @@ import { zodResolver } from "@hookform/resolvers/zod" import { useCallback, useEffect, useState } from "react" import { FormProvider, useForm } from "react-hook-form" +import RadioCard from "@scandic-hotels/design-system/Form/RadioCard" + import { BED_TYPE_ICONS } from "@/constants/booking" import { useEnterDetailsStore } from "@/stores/enter-details" -import RadioCard from "@/components/TempDesignSystem/Form/RadioCard" import { useRoomContext } from "@/contexts/Details/Room" import { trackBedSelection } from "@/utils/tracking" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx index 72aab30bf..5022b1aa5 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx @@ -6,13 +6,13 @@ import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" import Body from "@scandic-hotels/design-system/Body" +import RadioCard from "@scandic-hotels/design-system/Form/RadioCard" import BreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/BreakfastBuffetIcon" import NoBreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/NoBreakfastBuffetIcon" import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast" import { useEnterDetailsStore } from "@/stores/enter-details" -import RadioCard from "@/components/TempDesignSystem/Form/RadioCard" import { useRoomContext } from "@/contexts/Details/Room" import { formatPrice } from "@/utils/numberFormatting" import { trackBreakfastSelection } from "@/utils/tracking" diff --git a/apps/scandic-web/components/TempDesignSystem/Form/RadioCard/index.tsx b/packages/design-system/lib/components/Form/RadioCard/index.tsx similarity index 84% rename from apps/scandic-web/components/TempDesignSystem/Form/RadioCard/index.tsx rename to packages/design-system/lib/components/Form/RadioCard/index.tsx index 39b03551a..027099c68 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/RadioCard/index.tsx +++ b/packages/design-system/lib/components/Form/RadioCard/index.tsx @@ -1,15 +1,15 @@ -"use client" +'use client' -import { cx } from "class-variance-authority" -import { useFormContext } from "react-hook-form" +import { cx } from 'class-variance-authority' +import { useFormContext } from 'react-hook-form' -import { Divider } from "@scandic-hotels/design-system/Divider" -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import { Typography } from "@scandic-hotels/design-system/Typography" +import { Divider } from '../../Divider' +import { MaterialIcon } from '../../Icons/MaterialIcon' +import { Typography } from '../../Typography' -import styles from "./radioCard.module.css" +import styles from './radioCard.module.css' -import type { RadioCardProps } from "./types" +import type { RadioCardProps } from './types' export default function RadioCard({ Icon, @@ -37,7 +37,7 @@ export default function RadioCard({ function onKeyDown(event: React.KeyboardEvent) { if (disabled) return - if (event.key === "Enter") { + if (event.key === 'Enter') { setValue(name, value) } } diff --git a/apps/scandic-web/components/TempDesignSystem/Form/RadioCard/radioCard.module.css b/packages/design-system/lib/components/Form/RadioCard/radioCard.module.css similarity index 97% rename from apps/scandic-web/components/TempDesignSystem/Form/RadioCard/radioCard.module.css rename to packages/design-system/lib/components/Form/RadioCard/radioCard.module.css index 5fee5ca2e..86e6d4fe5 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/RadioCard/radioCard.module.css +++ b/packages/design-system/lib/components/Form/RadioCard/radioCard.module.css @@ -5,8 +5,8 @@ grid-template-columns: 1fr auto; grid-auto-rows: min-content; grid-template-areas: - "icon subtitleSecondary" - "title subtitle"; + 'icon subtitleSecondary' + 'title subtitle'; border-radius: var(--Corner-radius-md); border: 1px solid var(--Border-Intense); background: var(--Surface-Primary-Default); diff --git a/apps/scandic-web/components/TempDesignSystem/Form/RadioCard/types.ts b/packages/design-system/lib/components/Form/RadioCard/types.ts similarity index 64% rename from apps/scandic-web/components/TempDesignSystem/Form/RadioCard/types.ts rename to packages/design-system/lib/components/Form/RadioCard/types.ts index e28fee7f0..c42164019 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/RadioCard/types.ts +++ b/packages/design-system/lib/components/Form/RadioCard/types.ts @@ -1,8 +1,8 @@ -import type { IconProps } from "@scandic-hotels/design-system/Icons" -import type { JSX } from "react" +import type { IconProps } from '../../Icons' +import type { JSX } from 'react' export interface RadioCardProps - extends Omit, "title"> { + extends Omit, 'title'> { Icon?: (props: IconProps) => JSX.Element iconHeight?: number name: string diff --git a/packages/design-system/package.json b/packages/design-system/package.json index a82b83a22..57572ea74 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -15,6 +15,7 @@ "./Divider": "./dist/components/Divider/index.js", "./Footnote": "./dist/components/Footnote/index.js", "./Form/Checkbox": "./dist/components/Form/Checkbox/index.js", + "./Form/RadioCard": "./dist/components/Form/RadioCard/index.js", "./Input": "./dist/components/Input/index.js", "./Label": "./dist/components/Label/index.js", "./OldDSButton": "./dist/components/OldDSButton/index.js",