Merged in chore/SW-3145-move-radio-card (pull request #2533)

chore: SW-3145 Moved RadioCard to design system

* chore: SW-3145 Moved RadioCard to design system

* chore: SW-3145 Optimized code

* chore: SW-3145 Optimized code


Approved-by: Anton Gunnarsson

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"
 

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"

packages/design-system/lib/components/Form/RadioCard/index.tsx

@@ -1,15 +1,15 @@
-"use client"
+'use client'
 
-import { cx } from "class-variance-authority"
+import { cx } from 'class-variance-authority'
-import { useFormContext } from "react-hook-form"
+import { useFormContext } from 'react-hook-form'
 
-import { Divider } from "@scandic-hotels/design-system/Divider"
+import { Divider } from '../../Divider'
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Typography } from "@scandic-hotels/design-system/Typography"
+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)
     }
   }

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"
+    'icon subtitleSecondary'
-    "title subtitle";
+    'title subtitle';
   border-radius: var(--Corner-radius-md);
   border: 1px solid var(--Border-Intense);
   background: var(--Surface-Primary-Default);

packages/design-system/lib/components/Form/RadioCard/types.ts

@@ -1,8 +1,8 @@
-import type { IconProps } from "@scandic-hotels/design-system/Icons"
+import type { IconProps } from '../../Icons'
-import type { JSX } from "react"
+import type { JSX } from 'react'
 
 export interface RadioCardProps
-  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "title"> {
+  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'title'> {
   Icon?: (props: IconProps) => JSX.Element
   iconHeight?: number
   name: string

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