[DS-352] Map Lozenge orbiter variants to Badge (#480)

.changeset/sixty-spies-drive.md

@@ -0,0 +1,6 @@
+---
+"@hopper-ui/components": patch
+---
+
+- To ease the transition from Orbiter to Hopper, we want to be able to replace the Lozenge component from Orbiter with the one from Hopper. We have mapped Lozenge variants to their corresponding Badge variants for temporary compatibility.
+- Also moved the temporary mapping functions to utils files for maintainability and readability.

packages/components/src/Badge/src/Badge.tsx

@@ -6,6 +6,7 @@ import { composeRenderProps, useContextProps } from "react-aria-components";
 
 import { OverlineText } from "../../typography/OverlineText/index.ts";
 import { ClearContainerSlots, composeClassnameRenderProps, cssModule, useRenderProps, type AccessibleSlotProps, type RenderProps } from "../../utils/index.ts";
+import { mapOrbiterToHopperVariants } from "../utils/Badge.utils.ts";
 
 import { BadgeContext, type BadgeContextValue } from "./BadgeContext.ts";
 
@@ -114,7 +115,7 @@ function Badge(props: BadgeProps, ref: ForwardedRef<HTMLSpanElement>) {
                 data-hovered={isHovered || undefined}
                 data-pressed={isPressed || undefined}
                 data-selected={isSelected || undefined}
-                data-variant={variant}
+                data-variant={mapOrbiterToHopperVariants(variant)}
             >
                 {!isDot && renderProps.children}
             </OverlineText>

packages/components/src/Badge/utils/Badge.utils.ts

@@ -0,0 +1,16 @@
+import type { BadgeVariant } from "../src/Badge.tsx";
+
+// TODO: Remove this when Orbiter is not used anymore
+type OrbiterVariant = "informative" | "warning" | "positive" | "negative";
+
+function isOrbiterVariant(variant: BadgeVariant | OrbiterVariant): variant is OrbiterVariant {
+    return ["informative", "warning", "positive", "negative"].includes(variant);
+}
+
+export function mapOrbiterToHopperVariants(variant: BadgeVariant | OrbiterVariant): BadgeVariant {
+    if (isOrbiterVariant(variant)) {
+        return "primary";
+    }
+
+    return variant;
+}

packages/components/src/buttons/src/EmbeddedButton.tsx

@@ -15,6 +15,7 @@ import {
 } from "react-aria-components";
 
 import type { TagVariant } from "../../tag/index.ts";
+import { mapOrbiterToHopperVariants } from "../../tag/utils/Tag.utils.ts";
 import {
     SlotProvider,
     composeClassnameRenderProps,
@@ -30,21 +31,6 @@ export const GlobalEmbeddedButtonCssSelector = "hop-EmbeddedButton";
 export type EmbeddedButtonSize = "md" | "lg";
 export type EmbeddedButtonVariant = TagVariant;
 
-// TODO: Remove this when Orbiter is not used anymore
-type OrbiterVariants = "informative" | "warning";
-
-export function mapOrbiterToHopperVariants(variant: TagVariant | OrbiterVariants): TagVariant {
-    if (variant === "informative") {
-        return "option1";
-    }
-
-    if (variant === "warning") {
-        return "option6";
-    }
-
-    return variant;
-}
-
 export interface EmbeddedButtonProps extends StyledComponentProps<RACButtonProps> {
     /**
      * Whether the EmbeddedButton should show a selected state.

packages/components/src/tag/src/Tag.tsx

@@ -12,7 +12,7 @@ import { Tag as RACTag, type TagProps as RACTagProps, composeRenderProps, useCon
 
 import { AvatarContext, type AvatarProps } from "../../Avatar/index.ts";
 import { BadgeContext } from "../../Badge/index.ts";
-import { ClearButton, type ClearButtonProps, mapOrbiterToHopperVariants } from "../../buttons/index.ts";
+import { ClearButton, type ClearButtonProps } from "../../buttons/index.ts";
 import { useLocalizedString } from "../../i18n/index.ts";
 import { IconListContext } from "../../IconList/index.ts";
 import { Spinner, type SpinnerProps } from "../../Spinner/index.ts";
@@ -25,6 +25,7 @@ import {
     composeClassnameRenderProps,
     cssModule
 } from "../../utils/index.ts";
+import { mapOrbiterToHopperVariants } from "../utils/Tag.utils.ts";
 
 import { TagContext } from "./TagContext.ts";
 

packages/components/src/tag/utils/Tag.utils.ts

@@ -0,0 +1,16 @@
+import type { TagVariant } from "../src/Tag.tsx";
+
+// TODO: Remove this when Orbiter is not used anymore
+type OrbiterVariant = "informative" | "warning";
+
+export function mapOrbiterToHopperVariants(variant: TagVariant | OrbiterVariant): TagVariant {
+    if (variant === "informative") {
+        return "option1";
+    }
+
+    if (variant === "warning") {
+        return "option6";
+    }
+
+    return variant;
+}