feat(tailwind): add bundle classenames for Badge

kiwicom · Oct 2, 2023 · 3874b70 · 3874b70
1 parent bcc0063
commit 3874b70
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 56 deletions.
diff --git a/...-tailwind/Badge/TailwindBadge.stories.tsx → .../src/tmp-tailwind/Badge/Badge.stories.tsx b/...-tailwind/Badge/TailwindBadge.stories.tsx → .../src/tmp-tailwind/Badge/Badge.stories.tsx
@@ -1,5 +1,3 @@
-// TODO: rename before migration to master to Badge.stories.tsx
-
 import React from "react";
 import { text, select } from "@storybook/addon-knobs";
 
@@ -14,7 +12,7 @@ const getIcons = (defaultIcon: string | null) =>
 const getIcon = (source: string | null) => source && Icons[source];
 
 export default {
-  title: "Tailwind/TailwindBadge",
+  title: "Tailwind/Badge",
 };
 
 export const Default = () => {

diff --git a/packages/orbit-components/src/tmp-tailwind/Badge/consts.ts b/packages/orbit-components/src/tmp-tailwind/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/tmp-tailwind/Badge/index.tsx b/packages/orbit-components/src/tmp-tailwind/Badge/index.tsx
@@ -4,46 +4,33 @@ import React from "react";
 import clsx from "clsx";
 
 import BadgePrimitive from "../primitives/BadgePrimitive";
-import { TYPE_OPTIONS, TOKENS } from "./consts";
+import { TYPE_OPTIONS } from "./consts";
 import type { Props, Type } from "./types";
 
-const getTypeToken = ({ name, type }: { name: string; type: Type }) => {
+const getTypeToken = (type: Type) => {
   const tokens = {
-    [TOKENS.background]: {
-      [TYPE_OPTIONS.NEUTRAL]: "bg-badge-neutral-background",
-      [TYPE_OPTIONS.INFO_SUBTLE]: "bg-badge-info-subtle-background",
-      [TYPE_OPTIONS.SUCCESS_SUBTLE]: "bg-badge-success-subtle-background",
-      [TYPE_OPTIONS.WARNING_SUBTLE]: "bg-badge-warning-subtle-background",
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: "bg-badge-critical-subtle-background",
-      [TYPE_OPTIONS.DARK]: "bg-badge-dark-background",
-      [TYPE_OPTIONS.WHITE]: "bg-badge-white-background",
-      [TYPE_OPTIONS.INFO]: "bg-badge-info-background",
-      [TYPE_OPTIONS.CRITICAL]: "bg-badge-critical-background",
-      [TYPE_OPTIONS.SUCCESS]: "bg-badge-success-background",
-      [TYPE_OPTIONS.WARNING]: "bg-badge-warning-background",
-      // TODO: repalce with proper granular tokens for gradients
-      [TYPE_OPTIONS.BUNDLE_BASIC]: "bg-badge-bundle-basic-background",
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: "bg-badge-bundle-medium-background",
-      [TYPE_OPTIONS.BUNDLE_TOP]: "bg-badge-bundle-top-background",
-    },
-    [TOKENS.color]: {
-      [TYPE_OPTIONS.NEUTRAL]: "text-badge-neutral-foreground",
-      [TYPE_OPTIONS.INFO_SUBTLE]: "text-badge-info-subtle-foreground",
-      [TYPE_OPTIONS.SUCCESS_SUBTLE]: "text-badge-success-subtle-foreground",
-      [TYPE_OPTIONS.WARNING_SUBTLE]: "text-badge-warning-subtle-foreground",
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: "text-badge-critical-subtle-foreground",
-      [TYPE_OPTIONS.DARK]: "text-badge-dark-foreground",
-      [TYPE_OPTIONS.WHITE]: "text-badge-white-foreground",
-      [TYPE_OPTIONS.INFO]: "text-badge-info-foreground",
-      [TYPE_OPTIONS.CRITICAL]: "text-badge-critical-foreground",
-      [TYPE_OPTIONS.SUCCESS]: "text-badge-success-foreground",
-      [TYPE_OPTIONS.WARNING]: "text-badge-warning-foreground",
-      [TYPE_OPTIONS.BUNDLE_BASIC]: "text-badge-bundle-basic-foreground",
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: "text-badge-bundle-medium-foreground",
-      [TYPE_OPTIONS.BUNDLE_TOP]: "text-badge-bundle-top-foreground",
-    },
+    [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 = ({
@@ -58,11 +45,7 @@ const Badge = ({
   return (
     <BadgePrimitive
       carriers={carriers}
-      className={clsx(
-        "orbit-badge",
-        getTypeToken({ name: TOKENS.background, type }),
-        getTypeToken({ name: TOKENS.color, type }),
-      )}
+      className={clsx("orbit-badge", getTypeToken(type))}
       icon={icon}
       id={id}
       ariaLabel={ariaLabel}

diff --git a/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap b/packages/orbit-tailwind-preset/src/presets/__tests__/__snapshots__/configs.test.ts.snap
@@ -588,9 +588,6 @@ exports[`orbitPreset should match snapshot 1`] = `
       "DEFAULT": "100%",
     },
     "backgroundColor": {
-      "badge-bundle-basic-background": "linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)",
-      "badge-bundle-medium-background": "linear-gradient(to top right, #3719AB 0%, #8539DB 100%)",
-      "badge-bundle-top-background": "linear-gradient(to top right, #2D2D2E 0%, #696E73 100%)",
       "badge-critical-background": "#D21C1C",
       "badge-critical-subtle-background": "#FAEAEA",
       "badge-dark-background": "#252A31",
@@ -766,6 +763,9 @@ exports[`orbitPreset should match snapshot 1`] = `
       },
     },
     "backgroundImage": {
+      "badge-bundle-basic-background": "linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)",
+      "badge-bundle-medium-background": "linear-gradient(to top right, #3719AB 0%, #8539DB 100%)",
+      "badge-bundle-top-background": "linear-gradient(to top right, #2D2D2E 0%, #696E73 100%)",
       "button-bundle-basic-background": "linear-gradient(to top right, #E13E3B 0%, #E87E09 100%)",
       "button-bundle-basic-background-active": "linear-gradient(to top right, #9F1816 0%, #C36802 100%)",
       "button-bundle-basic-background-hover": "linear-gradient(to top right, #BD2825 0%, #D67000 100%)",
@@ -999,10 +999,10 @@ exports[`orbitPreset should match snapshot 1`] = `
       "95": "0.95",
     },
     "borderRadius": {
+      "badge": "12px",
       "button-circled-large": "52px",
       "button-circled-normal": "44px",
       "button-circled-small": "32px",
-      "badge": "12px",
       "circle": "50%",
       "dialog-desktop": "9px",
       "dialog-mobile": "12px",

diff --git a/packages/orbit-tailwind-preset/src/presets/components/index.ts b/packages/orbit-tailwind-preset/src/presets/components/index.ts
@@ -219,6 +219,9 @@ const cfg = (options?: Options): Config => {
           "button-bundle-top-background": defaultTokens.buttonBundleTopBackground,
           "button-bundle-top-background-hover": defaultTokens.buttonBundleTopBackgroundHover,
           "button-bundle-top-background-active": defaultTokens.buttonBundleTopBackgroundActive,
+          "badge-bundle-basic-background": defaultTokens.badgeBundleBasicBackground,
+          "badge-bundle-medium-background": defaultTokens.badgeBundleMediumBackground,
+          "badge-bundle-top-background": defaultTokens.badgeBundleTopBackground,
         },
         boxShadow: {
           "button-focus": defaultTokens.boxShadowButtonFocus,

diff --git a/packages/orbit-tailwind-preset/src/presets/foundation/helpers.ts b/packages/orbit-tailwind-preset/src/presets/foundation/helpers.ts
@@ -89,9 +89,11 @@ export const getComponentLevelToken = (
 
     if (k.startsWith(c) && k.endsWith(t)) {
       // Button bundles are linear gradients
-      if (key.includes("buttonBundle")) {
+      if (
+        key.includes("buttonBundle") ||
+        (key.includes("badgeBundle") && !type.includes("foreground"))
+      )
         return acc;
-      }
 
       if (defaultTokens[key]) {
         acc[kebabCase(key)] = defaultTokens[key];