Merged in fix/SW-1655-tripadvisor-icon-map (pull request #2695)

fix(SW-1655): update design tripadvisor on hotel map card

* fix(SW-1655): update design tripadvisor on hotel map card

* fix(SW-1655): update radius

* fix(SW-1655): use tripadvisor chip, create different variants

* fix(SW-1655): update variants, storybook, and global css


Approved-by: Joakim Jäderberg

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

@@ -1,19 +1,45 @@
-import Caption from '@scandic-hotels/design-system/Caption'
+import { cva, type VariantProps } from 'class-variance-authority'
 import TripadvisorIcon from '@scandic-hotels/design-system/Icons/TripadvisorIcon'
-
 import styles from './tripAdvisorChip.module.css'
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+const container = cva(styles.container, {
+  variants: {
+    variant: {
+      default: null,
+      small: styles.containerSmall,
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+const chip = cva(styles.tripAdvisor, {
+  variants: {
+    variant: {
+      default: null,
+      small: styles.tripAdvisorSmall,
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
 
 type TripAdvisorProps = {
   rating: number
-}
+} & VariantProps<typeof container>
 
-export function TripAdvisorChip({ rating }: TripAdvisorProps) {
+export function TripAdvisorChip({ rating, variant }: TripAdvisorProps) {
   return (
     // Wrapping the chip in a transparent container with some padding to increase the touch target
-    <div className={styles.container}>
-      <div className={styles.tripAdvisor}>
-        <TripadvisorIcon color="Icon/Interactive/Default" />
-        <Caption color="burgundy">{rating}</Caption>
+    <div className={container({ variant })}>
+      <div className={chip({ variant })}>
+        <TripadvisorIcon size={16} color="Icon/Interactive/Default" />
+        <Typography variant="Tag/sm">
+          <p>{rating}</p>
+        </Typography>
       </div>
     </div>
   )