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/TripdAdvisorChip.stories.tsx

@@ -14,6 +14,12 @@ const meta: Meta<typeof TripAdvisorChip> = {
         step: 0.1,
       },
     },
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'small'],
+    },
   },
 }
 
@@ -24,5 +30,13 @@ type Story = StoryObj<typeof TripAdvisorChip>
 export const PrimaryDefault: Story = {
   args: {
     rating: 4.5,
+    variant: 'default',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    rating: 4.5,
+    variant: 'small',
   },
 }

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

packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css

@@ -2,14 +2,23 @@
   position: absolute;
   left: 0;
   top: 0;
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
+}
+
+.containerSmall {
+  padding: var(--Space-x05);
 }
 
 .tripAdvisor {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x-quarter) var(--Spacing-x1);
+  padding: var(--Space-x05) var(--Space-x1);
   border-radius: var(--Corner-radius-sm);
 }
+
+.tripAdvisorSmall {
+  padding: 0 var(--Space-x05) 0 3px;
+  border-radius: 2px;
+}