Merged in fix/BOOK-210-update-hotel-card-local-charges (pull request #2835)

fix(BOOK-210): add local charges for Finland and update design for hotel card

* fix(BOOK-210): add local charges for Finland and update design for hotel card

* feat(BOOK-210): change variant to conditional classname

* fix(BOOK-210): update link with icon

* fix(BOOK-210): update buttonlink tripadvisor

* fix(BOOK-210): switch wrapper logic

* fix(BOOK-210): update variants tripadvisor


Approved-by: Erik Tiekstra

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

@@ -5,42 +5,57 @@ import { Typography } from '../Typography'
 
 const container = cva(styles.container, {
   variants: {
-    variant: {
+    size: {
       default: null,
       small: styles.containerSmall,
     },
   },
   defaultVariants: {
-    variant: 'default',
+    size: 'default',
   },
 })
 
 const chip = cva(styles.tripAdvisor, {
   variants: {
-    variant: {
+    size: {
       default: null,
       small: styles.tripAdvisorSmall,
     },
+    color: {
+      default: null,
+      subtle: styles.tripAdvisorSubtle,
+    },
   },
   defaultVariants: {
-    variant: 'default',
+    size: 'default',
+    color: 'default',
   },
 })
 
 type TripAdvisorProps = {
   rating: number
-} & VariantProps<typeof container>
+  wrapper?: boolean
+} & VariantProps<typeof chip>
 
-export function TripAdvisorChip({ rating, variant }: TripAdvisorProps) {
-  return (
-    // Wrapping the chip in a transparent container with some padding to increase the touch target
-    <div className={container({ variant })}>
-      <div className={chip({ variant })}>
-        <TripadvisorIcon size={16} color="Icon/Interactive/Default" />
-        <Typography variant="Tag/sm">
-          <p>{rating}</p>
-        </Typography>
-      </div>
+export function TripAdvisorChip({
+  rating,
+  wrapper = true,
+  size,
+  color,
+}: TripAdvisorProps) {
+  const content = (
+    <div className={chip({ size, color })}>
+      <TripadvisorIcon size={16} color="CurrentColor" />
+      <Typography variant="Tag/sm">
+        <p>{rating}</p>
+      </Typography>
     </div>
   )
+
+  return wrapper ? (
+    // Wrapping the chip in a transparent container with some padding to increase the touch target
+    <div className={container({ size })}>{content}</div>
+  ) : (
+    content
+  )
 }