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

@@ -9,16 +9,10 @@ const meta: Meta<typeof TripAdvisorChip> = {
     rating: {
       control: { type: "number", min: 0, max: 5, step: 0.1 },
     },
-    size: {
-      control: { type: "select" },
-      options: ["default", "small"],
-    },
-    color: {
-      control: { type: "select" },
-      options: ["default", "subtle"],
-    },
+
     wrapper: {
-      control: { type: "boolean" },
+      control: { type: "select" },
+      options: ["x05", "x15", "x2"],
     },
   },
 }
@@ -29,35 +23,40 @@ type Story = StoryObj<typeof TripAdvisorChip>
 export const Default: Story = {
   args: {
     rating: 4.5,
-    size: "default",
-    color: "default",
-    wrapper: false,
   },
 }
 
-export const WithWrapper: Story = {
+export const WithSmallWrapper: Story = {
   args: {
     rating: 4.5,
-    size: "default",
-    color: "default",
-    wrapper: true,
+    wrapper: "x05",
+  },
+}
+
+export const WithMediumWrapper: Story = {
+  args: {
+    rating: 4.5,
+    wrapper: "x15",
+  },
+}
+
+export const WithLargeWrapper: Story = {
+  args: {
+    rating: 4.5,
+    wrapper: "x2",
   },
 }
 
 export const Small: Story = {
   args: {
     rating: 4.5,
-    size: "small",
-    color: "default",
-    wrapper: true,
+    size: "sm",
   },
 }
 
 export const Subtle: Story = {
   args: {
     rating: 4.5,
-    size: "default",
-    color: "subtle",
-    wrapper: false,
+    color: "Subtle",
   },
 }

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
   )

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

@@ -2,31 +2,16 @@
   position: absolute;
   left: 0;
   top: 0;
-  padding: var(--Space-x2);
 }
 
-.containerSmall {
-  position: absolute;
-  left: 0;
-  top: 0;
+.padding-x05 {
   padding: var(--Space-x05);
 }
 
-.tripAdvisor {
-  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);
+.padding-x15 {
+  padding: var(--Space-x15);
 }
 
-.tripAdvisorSmall {
-  padding: 0 var(--Space-x05) 0 3px;
-  border-radius: 2px;
-}
-
-.tripAdvisorSubtle {
-  background-color: var(--Surface-Secondary-Subtle, #e3d9d1);
+.padding-x2 {
+  padding: var(--Space-x2);
 }