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
2026-01-23 12:19:37 +00:00
parent 5171d2d4d7
commit ae77fa3028
18 changed files with 129 additions and 194 deletions
--- a/packages/design-system/lib/components/ChipStatic/ChipStatic.stories.tsx
+++ b/packages/design-system/lib/components/ChipStatic/ChipStatic.stories.tsx
@@ -16,27 +16,27 @@ export const Neutral: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <ChipStatic color="Neutral" size="xs" lowerCase>
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
        lowerCase xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
      </ChipStatic>

      <ChipStatic color="Neutral" size="xs">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
        xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
      </ChipStatic>

      <ChipStatic color="Neutral" size="sm">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
        sm
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
      </ChipStatic>

      <ChipStatic color="Neutral" size="lg">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
        lg
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
      </ChipStatic>
    </div>
  ),
@@ -46,27 +46,27 @@ export const Subtle: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <ChipStatic color="Subtle" size="xs" lowerCase>
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
        lowerCase xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
      </ChipStatic>

      <ChipStatic color="Subtle" size="xs">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
        xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
      </ChipStatic>

      <ChipStatic color="Subtle" size="sm">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
        sm
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
      </ChipStatic>

      <ChipStatic color="Subtle" size="lg">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
        lg
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
      </ChipStatic>
    </div>
  ),
@@ -76,27 +76,27 @@ export const Disabled: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <ChipStatic color="Disabled" size="xs" lowerCase>
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
        lowerCase xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
      </ChipStatic>

      <ChipStatic color="Disabled" size="xs">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
        xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
      </ChipStatic>

      <ChipStatic color="Disabled" size="sm">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
        sm
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
      </ChipStatic>

      <ChipStatic color="Disabled" size="lg">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
        lg
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
      </ChipStatic>
    </div>
  ),
--- a/packages/design-system/lib/components/ChipStatic/index.tsx
+++ b/packages/design-system/lib/components/ChipStatic/index.tsx
@@ -1 +1,3 @@
 export { ChipStatic } from "./ChipStatic"
+// eslint-disable-next-line react-refresh/only-export-components
+export { variants as chipStaticVariants, withChipStatic } from "./variants"
--- a/packages/design-system/lib/components/ChipStatic/variants.ts
+++ b/packages/design-system/lib/components/ChipStatic/variants.ts
@@ -2,6 +2,8 @@ import { cva } from "class-variance-authority"

 import styles from "./chip-static.module.css"

+import { deepmerge } from "deepmerge-ts"
+
 const config = {
  variants: {
    color: {
@@ -22,3 +24,16 @@ const config = {
 } as const

 export const variants = cva(styles.chip, config)
+
+const chipConfig = {
+  variants: {
+    ...config.variants,
+  },
+  defaultVariants: {
+    ...config.defaultVariants,
+  },
+} as const
+
+export function withChipStatic<T>(config: T) {
+  return deepmerge(chipConfig, config)
+}
--- a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx
@@ -40,7 +40,9 @@ export function HotelCardDialogImage({
      {rating?.tripAdvisor && (
        <TripAdvisorChip
          rating={rating.tripAdvisor}
-          size={position === "top" ? "small" : "default"}
+          color="Neutral"
+          size={position === "top" ? "xs" : "sm"}
+          wrapper={position === "top" ? "x05" : "x15"}
        />
      )}
    </div>
--- a/packages/design-system/lib/components/HotelCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/index.tsx
@@ -216,7 +216,12 @@ export const HotelCardComponent = memo(
              sizes="(min-width: 768px) calc(100vw - 340px), (min-width: 1367px) 33vw, 100vw"
            />
            {hotel.ratings?.tripAdvisor && (
-              <TripAdvisorChip rating={hotel.ratings.tripAdvisor} />
+              <TripAdvisorChip
+                rating={hotel.ratings.tripAdvisor}
+                color="Neutral"
+                size="sm"
+                wrapper="x2"
+              />
            )}
          </div>
        </div>
--- a/packages/design-system/lib/components/HotelInfoCard/index.tsx
+++ b/packages/design-system/lib/components/HotelInfoCard/index.tsx
@@ -59,7 +59,12 @@ export function HotelInfoCard({
        <div className={styles.imageWrapper}>
          <ImageGallery title={hotel.name} images={galleryImages} fill />
          {hotel.ratings?.tripAdvisor && (
-            <TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
+            <TripAdvisorChip
+              rating={hotel.ratings.tripAdvisor.rating}
+              color="Neutral"
+              size="sm"
+              wrapper="x2"
+            />
          )}
        </div>
        <div className={styles.hotelContent}>
--- a/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx
+++ b/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",
  },
 }
--- a/packages/design-system/lib/components/TripAdvisorChip/index.tsx
+++ b/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
  )
--- a/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css
+++ b/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);
 }