feat(SW-2043): Added new room packages filter

* feat(SW-2043): Added new room packages filter

* fix(SW-2043): Fixed issue with not updating price when selecting pet room

Approved-by: Tobias Johansson
Approved-by: Matilda Landström

packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx

@@ -1,14 +1,22 @@
+import 'react-material-symbols/rounded'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { fn } from '@storybook/test'
 
-import { ChipButton } from './ChipButton.tsx'
 import { MaterialSymbol } from 'react-material-symbols'
+import { ChipButton } from './ChipButton.tsx'
+import { config as chipButtonConfig } from './variants'
 
 const meta: Meta<typeof ChipButton> = {
-  title: 'Components/Chip/ChipButton 🚧',
+  title: 'Components/Chip/ChipButton',
   component: ChipButton,
   argTypes: {
+    variant: {
+      control: 'select',
+      type: 'string',
+      options: Object.keys(chipButtonConfig.variants.variant),
+    },
     onPress: {
       table: {
         disable: true,
@@ -32,3 +40,16 @@ export const Default: Story = {
     ),
   },
 }
+
+export const Outlined: Story = {
+  args: {
+    variant: 'Outlined',
+    onPress: fn(),
+    children: (
+      <>
+        Button Chip
+        <MaterialSymbol icon="keyboard_arrow_down" size={20} />
+      </>
+    ),
+  },
+}

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

@@ -1,19 +1,22 @@
 import { Button as ButtonRAC } from 'react-aria-components'
 
 import { Typography } from '../Typography'
-
-import styles from './chip-button.module.css'
-
-import type { ComponentPropsWithRef } from 'react'
+import { ChipButtonProps } from './types'
+import { variants } from './variants'
 
 export function ChipButton({
   children,
+  variant,
   className,
   ...props
-}: ComponentPropsWithRef<typeof ButtonRAC>) {
+}: ChipButtonProps) {
+  const classNames = variants({
+    variant,
+  })
+
   return (
     <Typography variant="Body/Supporting text (caption)/smBold">
-      <ButtonRAC {...props} className={[styles.chip, className].join(' ')}>
+      <ButtonRAC {...props} className={[className, classNames].join(' ')}>
         {children}
       </ButtonRAC>
     </Typography>

packages/design-system/lib/components/ChipButton/chip-button.module.css

@@ -1,19 +1,31 @@
 .chip {
   background-color: var(--Component-Button-Inverted-Fill-Default);
-  border-color: var(--Component-Button-Inverted-Border-Default);
-  border-style: solid;
-  border-width: 1px;
   border-radius: var(--Corner-radius-sm);
   padding: var(--Space-x1) var(--Space-x15);
   color: var(--Text-Interactive-Default);
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   cursor: pointer;
 }
 
-.chip:hover {
-  /* TODO: change to proper Component-variable once it is available */
-  background-color: var(--Scandic-Peach-10);
-  /* TODO: change to proper Component-variable once it is available */
-  color: var(--Scandic-Red-100);
+.Default {
+  border: 1px solid var(--Component-Button-Inverted-Border-Default);
+}
+
+.Default:hover {
+  background-color: var(--Surface-Primary-Hover-Accent);
+}
+
+.Outlined {
+  border: 1px solid var(--Border-Intense);
+}
+
+.Outlined:hover {
+  background-color: var(--Surface-Primary-Hover);
+}
+
+.Outlined:focus,
+.Outlined:active {
+  border-color: var(--Border-Interactive-Selected);
 }

packages/design-system/lib/components/ChipButton/types.ts

@@ -0,0 +1,10 @@
+import { Button } from 'react-aria-components'
+
+import type { VariantProps } from 'class-variance-authority'
+import type { ComponentProps } from 'react'
+
+import type { variants } from './variants'
+
+export interface ChipButtonProps
+  extends ComponentProps<typeof Button>,
+    VariantProps<typeof variants> {}

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

@@ -0,0 +1,29 @@
+import { cva } from 'class-variance-authority'
+
+import { deepmerge } from 'deepmerge-ts'
+import styles from './chip-button.module.css'
+
+export const config = {
+  variants: {
+    variant: {
+      Default: styles.Default,
+      Outlined: styles.Outlined,
+    },
+  },
+  defaultVariants: {
+    variant: 'Default',
+  },
+} as const
+
+export const variants = cva(styles.chip, config)
+
+const chipConfig = {
+  variants: {
+    typography: config.variants.variant,
+  },
+  defaultVariants: config.defaultVariants,
+} as const
+
+export function withChipButton<T>(config: T) {
+  return deepmerge(chipConfig, config)
+}