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>
+  )
+}

apps/scandic-web/components/TempDesignSystem/Form/RadioCard/radioCard.module.css

@@ -0,0 +1,55 @@
+.label {
+  position: relative;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "icon icon" "title subtitle";
+  border-radius: var(--Corner-radius-md);
+  border: 1px solid var(--Border-Intense);
+  background: var(--Surface-Primary-Default);
+  padding: var(--Space-x2) var(--Space-x3);
+  gap: var(--Space-x1);
+}
+
+.label.disabled {
+  background: var(--Surface-Primary-Disabled);
+  filter: grayscale(1);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.label:has(:checked) {
+  border: 2px solid var(--Border-Interactive-Selected);
+}
+
+.label:not(:has(:checked)) .selectedIcon {
+  display: none;
+}
+
+.selectedIcon {
+  position: absolute;
+  top: calc(-1 * var(--Space-x15));
+  right: calc(-1 * var(--Space-x15));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--Base-Border-Inverted);
+  border-radius: var(--Corner-radius-Rounded);
+  background-color: var(--Surface-Feedback-Succes-Accent);
+}
+
+.icon {
+  grid-area: icon;
+}
+
+.subtitle {
+  grid-area: subtitle;
+  color: var(--Text-Default);
+}
+
+.title {
+  grid-area: title;
+  color: var(--Text-Default);
+}

apps/scandic-web/components/TempDesignSystem/Form/RadioCard/types.ts

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