feat(SW-1988): Replaced current bed component with new design

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/TempDesignSystem/Form/RadioCard/index.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+import { useFormContext } from "react-hook-form"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./radioCard.module.css"
+
+import type { RadioCardProps } from "./types"
+
+export default function RadioCard({
+  Icon,
+  iconHeight = 32,
+  id,
+  name,
+  subtitle,
+  title,
+  value,
+  disabled = false,
+}: RadioCardProps) {
+  const { register, setValue } = useFormContext()
+
+  function onLabelClick(event: React.MouseEvent) {
+    // Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
+    event.preventDefault()
+    if (!disabled) {
+      setValue(name, value)
+    }
+  }
+
+  return (
+    <label
+      className={cx(styles.label, { [styles.disabled]: disabled })}
+      onClick={onLabelClick}
+      tabIndex={0}
+    >
+      <MaterialIcon
+        icon="check"
+        className={styles.selectedIcon}
+        size={22}
+        color="Icon/Inverted"
+      />
+      {Icon ? (
+        <Icon
+          className={styles.icon}
+          color="CurrentColor"
+          height={iconHeight}
+        />
+      ) : null}
+      <Typography variant="Body/Paragraph/mdBold" className={styles.title}>
+        <p>{title}</p>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdBold" className={styles.subtitle}>
+        <p>{subtitle}</p>
+      </Typography>
+      <input
+        {...register(name)}
+        aria-hidden
+        id={id || name}
+        hidden
+        type="radio"
+        disabled={disabled}
+        value={value}
+      />
+    </label>
+  )
+}