Merged in refactor-tripadvisor-chip (pull request #3404)

Refactor TripadvisorChip

* feat: create new StaticChip componeny

* refactor tripadvisor chip to use ChipStatic

* refactor: use TripadvisorChip everywhere

* fix: use withChipStatic


Approved-by: Erik Tiekstra

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

@@ -1,60 +1,44 @@
 import { cva, type VariantProps } from "class-variance-authority"
 import TripadvisorIcon from "../Icons/Customised/Socials/Tripadvisor"
 import styles from "./tripAdvisorChip.module.css"
-import { Typography } from "../Typography"
+import { ChipStatic, withChipStatic } from "../ChipStatic"
 
 const container = cva(styles.container, {
   variants: {
-    size: {
-      default: null,
-      small: styles.containerSmall,
+    wrapper: {
+      x05: styles["padding-x05"],
+      x15: styles["padding-x15"],
+      x2: styles["padding-x2"],
     },
   },
   defaultVariants: {
-    size: "default",
+    wrapper: undefined,
   },
 })
 
-const chip = cva(styles.tripAdvisor, {
-  variants: {
-    size: {
-      default: null,
-      small: styles.tripAdvisorSmall,
-    },
-    color: {
-      default: null,
-      subtle: styles.tripAdvisorSubtle,
-    },
-  },
-  defaultVariants: {
-    size: "default",
-    color: "default",
-  },
-})
+const _chipVariant = cva("", withChipStatic({}))
 
-type TripAdvisorProps = {
+interface TripAdvisorProps
+  extends VariantProps<typeof container>, VariantProps<typeof _chipVariant> {
   rating: number
-  wrapper?: boolean
-} & VariantProps<typeof chip>
+}
 
 export function TripAdvisorChip({
   rating,
-  wrapper = true,
-  size,
-  color,
+  wrapper,
+  size = "sm",
+  color = "Subtle",
 }: TripAdvisorProps) {
   const content = (
-    <div className={chip({ size, color })}>
+    <ChipStatic size={size} color={color}>
       <TripadvisorIcon size={16} color="CurrentColor" />
-      <Typography variant="Tag/sm">
-        <p>{rating}</p>
-      </Typography>
-    </div>
+      {rating}
+    </ChipStatic>
   )
 
   return wrapper ? (
     // Wrapping the chip in a transparent container with some padding to increase the touch target
-    <div className={container({ size })}>{content}</div>
+    <div className={container({ wrapper })}>{content}</div>
   ) : (
     content
   )