feat(Badge): migrate to Tailwind

kiwicom · Oct 2, 2023 · 1e67630 · 1e67630
1 parent 85de2df
commit 1e67630
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 543 deletions.
diff --git a/packages/orbit-components/src/Badge/consts.ts b/packages/orbit-components/src/Badge/consts.ts
@@ -16,9 +16,3 @@ export const TYPE_OPTIONS: Record<string, Type> = {
   BUNDLE_MEDIUM: "bundleMedium",
   BUNDLE_TOP: "bundleTop",
 };
-
-export const TOKENS = {
-  background: "background",
-  color: "color",
-  border: "border",
-};
diff --git a/packages/orbit-components/src/Badge/index.tsx b/packages/orbit-components/src/Badge/index.tsx
@@ -1,49 +1,36 @@
 "use client";
 
 import React from "react";
+import cx from "clsx";
 
 import BadgePrimitive from "../primitives/BadgePrimitive";
-import { TYPE_OPTIONS, TOKENS } from "./consts";
-import useTheme from "../hooks/useTheme";
-import type { Theme } from "../defaultTheme";
+import { TYPE_OPTIONS } from "./consts";
 import type { Props, Type } from "./types";
 
-const getTypeToken = ({ name, theme, type }: { name: string; theme: Theme; type: Type }) => {
+const getTypeToken = (type: Type) => {
   const tokens = {
-    [TOKENS.background]: {
-      [TYPE_OPTIONS.NEUTRAL]: theme.orbit.badgeNeutralBackground,
-      [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.badgeInfoSubtleBackground,
-      [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.badgeSuccessSubtleBackground,
-      [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.badgeWarningSubtleBackground,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.badgeCriticalSubtleBackground,
-      [TYPE_OPTIONS.DARK]: theme.orbit.badgeDarkBackground,
-      [TYPE_OPTIONS.WHITE]: theme.orbit.badgeWhiteBackground,
-      [TYPE_OPTIONS.INFO]: theme.orbit.badgeInfoBackground,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.badgeCriticalBackground,
-      [TYPE_OPTIONS.SUCCESS]: theme.orbit.badgeSuccessBackground,
-      [TYPE_OPTIONS.WARNING]: theme.orbit.badgeWarningBackground,
-      [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.badgeBundleBasicBackground,
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.badgeBundleMediumBackground,
-      [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.badgeBundleTopBackground,
-    },
-    [TOKENS.color]: {
-      [TYPE_OPTIONS.NEUTRAL]: theme.orbit.badgeNeutralForeground,
-      [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.badgeInfoSubtleForeground,
-      [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.badgeSuccessSubtleForeground,
-      [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.badgeWarningSubtleForeground,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.badgeCriticalSubtleForeground,
-      [TYPE_OPTIONS.DARK]: theme.orbit.badgeDarkForeground,
-      [TYPE_OPTIONS.WHITE]: theme.orbit.badgeWhiteForeground,
-      [TYPE_OPTIONS.INFO]: theme.orbit.badgeInfoForeground,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.badgeCriticalForeground,
-      [TYPE_OPTIONS.SUCCESS]: theme.orbit.badgeSuccessForeground,
-      [TYPE_OPTIONS.WARNING]: theme.orbit.badgeWarningForeground,
-      [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.badgeBundleBasicForeground,
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.badgeBundleMediumForeground,
-      [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.badgeBundleTopForeground,
-    },
+    [TYPE_OPTIONS.NEUTRAL]: "bg-badge-neutral-background text-badge-neutral-foreground",
+    [TYPE_OPTIONS.INFO_SUBTLE]: "bg-badge-info-subtle-background text-badge-info-subtle-foreground",
+    [TYPE_OPTIONS.SUCCESS_SUBTLE]:
+      "bg-badge-success-subtle-background text-badge-success-subtle-foreground",
+    [TYPE_OPTIONS.WARNING_SUBTLE]:
+      "bg-badge-warning-subtle-background text-badge-warning-subtle-foreground",
+    [TYPE_OPTIONS.CRITICAL_SUBTLE]:
+      "bg-badge-critical-subtle-background text-badge-critical-subtle-foreground",
+    [TYPE_OPTIONS.DARK]: "bg-badge-dark-background text-badge-dark-foreground",
+    [TYPE_OPTIONS.WHITE]: "bg-badge-white-background text-badge-white-foreground",
+    [TYPE_OPTIONS.INFO]: "bg-badge-info-background text-badge-info-foreground",
+    [TYPE_OPTIONS.CRITICAL]: "bg-badge-critical-background text-badge-critical-foreground",
+    [TYPE_OPTIONS.SUCCESS]: "bg-badge-success-background text-badge-success-foreground",
+    [TYPE_OPTIONS.WARNING]: "bg-badge-warning-background text-badge-warning-foreground",
+    [TYPE_OPTIONS.BUNDLE_BASIC]:
+      "bg-badge-bundle-basic-background text-badge-bundle-basic-foreground",
+    [TYPE_OPTIONS.BUNDLE_MEDIUM]:
+      "bg-badge-bundle-medium-background text-badge-bundle-medium-foreground",
+    [TYPE_OPTIONS.BUNDLE_TOP]: "bg-badge-bundle-top-background text-badge-bundle-top-foreground",
   };
-  return tokens[name][type];
+
+  return tokens[type];
 };
 
 const Badge = ({
@@ -55,13 +42,10 @@ const Badge = ({
   id,
   carriers,
 }: Props) => {
-  const theme = useTheme();
-
   return (
     <BadgePrimitive
       carriers={carriers}
-      background={getTypeToken({ name: TOKENS.background, theme, type })}
-      foregroundColor={getTypeToken({ name: TOKENS.color, theme, type })}
+      className={cx("orbit-badge", getTypeToken(type))}
       icon={icon}
       id={id}
       ariaLabel={ariaLabel}

diff --git a/packages/orbit-components/src/tmp-tailwind/Badge/Badge.stories.tsx b/packages/orbit-components/src/tmp-tailwind/Badge/Badge.stories.tsx