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

@@ -7,36 +7,57 @@ const meta: Meta<typeof TripAdvisorChip> = {
   component: TripAdvisorChip,
   argTypes: {
     rating: {
-      control: {
-        type: 'number',
-        min: 0,
-        max: 5,
-        step: 0.1,
-      },
+      control: { type: 'number', min: 0, max: 5, step: 0.1 },
     },
-    variant: {
-      control: {
-        type: 'select',
-      },
+    size: {
+      control: { type: 'select' },
       options: ['default', 'small'],
     },
+    color: {
+      control: { type: 'select' },
+      options: ['default', 'subtle'],
+    },
+    wrapper: {
+      control: { type: 'boolean' },
+    },
   },
 }
 
 export default meta
-
 type Story = StoryObj<typeof TripAdvisorChip>
 
-export const PrimaryDefault: Story = {
+export const Default: Story = {
   args: {
     rating: 4.5,
-    variant: 'default',
+    size: 'default',
+    color: 'default',
+    wrapper: false,
+  },
+}
+
+export const WithWrapper: Story = {
+  args: {
+    rating: 4.5,
+    size: 'default',
+    color: 'default',
+    wrapper: true,
   },
 }
 
 export const Small: Story = {
   args: {
     rating: 4.5,
-    variant: 'small',
+    size: 'small',
+    color: 'default',
+    wrapper: true,
+  },
+}
+
+export const Subtle: Story = {
+  args: {
+    rating: 4.5,
+    size: 'default',
+    color: 'subtle',
+    wrapper: false,
   },
 }

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

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

@@ -6,14 +6,18 @@
 }
 
 .containerSmall {
+  position: absolute;
+  left: 0;
+  top: 0;
   padding: var(--Space-x05);
 }
 
 .tripAdvisor {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: var(--Space-x05);
   background-color: var(--Base-Surface-Primary-light-Normal);
+  color: var(--Text-Interactive-Default);
   padding: var(--Space-x05) var(--Space-x1);
   border-radius: var(--Corner-radius-sm);
 }
@@ -22,3 +26,7 @@
   padding: 0 var(--Space-x05) 0 3px;
   border-radius: 2px;
 }
+
+.tripAdvisorSubtle {
+  background-color: var(--Surface-Secondary-Subtle, #e3d9d1);
+}