Merged in feat/new-rate-cards (pull request #1600)

feat(SW-1435): Added RateCard component to design system

* feat(SW-1435): Added new component: RateCard to design system

* feat: added reward night points rate card

* fix: set svg icon color to "currentColor" to make them more reusable

* fix: added click handler for info icon

* fix: added selectedRate


Approved-by: Arvid Norlin

packages/design-system/lib/components/Radio/Radio.tsx

@@ -0,0 +1,31 @@
+import { PropsWithChildren } from 'react'
+import { Radio as AriaRadio } from 'react-aria-components'
+import styles from './radio.module.css'
+import { variants } from './variants'
+
+interface RadioProps extends PropsWithChildren {
+  value: string
+  id?: string
+  isDisabled?: boolean
+  color?: 'Burgundy'
+}
+
+export function Radio({ id, value, children, color, isDisabled }: RadioProps) {
+  const inputId = id || `radio-${value}`
+
+  const classNames = variants({
+    color,
+  })
+
+  return (
+    <AriaRadio
+      id={inputId}
+      value={value}
+      isDisabled={isDisabled}
+      className={`${styles.container} ${isDisabled ? styles.disabled : ''}`}
+    >
+      <div className={`${styles.radio} ${classNames}`} />
+      <div>{children}</div>
+    </AriaRadio>
+  )
+}

packages/design-system/lib/components/Radio/index.tsx

@@ -0,0 +1 @@
+export { Radio } from './Radio'

packages/design-system/lib/components/Radio/radio.module.css

@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x15);
+  padding: var(--Space-x1) 0;
+  cursor: pointer;
+}
+
+.radio {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  background-color: var(--Surface-UI-Fill-Default);
+  border: 2px solid var(--Scandic-Beige-50);
+  border-radius: 50%;
+  transition: all 0.2s ease-in-out;
+  box-sizing: border-box;
+}
+
+.container[data-selected] .radio {
+  border-color: var(--Surface-UI-Fill-Active);
+  border-width: 8px;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.container[data-selected] .color-burgundy {
+  border-color: var(--Surface-UI-Fill-Active);
+}

packages/design-system/lib/components/Radio/variants.ts

@@ -0,0 +1,16 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './radio.module.css'
+
+export const config = {
+  variants: {
+    color: {
+      Burgundy: styles['color-burgundy'],
+    },
+  },
+  defaultVariants: {
+    color: 'Burgundy',
+  },
+} as const
+
+export const variants = cva(styles.radio, config)