From 3874b706b93612ee008ab35a37b546a396efbc89 Mon Sep 17 00:00:00 2001 From: Victor Genaev Date: Wed, 20 Sep 2023 14:14:51 +0200 Subject: [PATCH] feat(tailwind): add bundle classenames for Badge --- ...indBadge.stories.tsx => Badge.stories.tsx} | 4 +- .../src/tmp-tailwind/Badge/consts.ts | 6 -- .../src/tmp-tailwind/Badge/index.tsx | 65 +++++++------------ .../__snapshots__/configs.test.ts.snap | 8 +-- .../src/presets/components/index.ts | 3 + .../src/presets/foundation/helpers.ts | 6 +- 6 files changed, 36 insertions(+), 56 deletions(-) rename packages/orbit-components/src/tmp-tailwind/Badge/{TailwindBadge.stories.tsx => Badge.stories.tsx} (98%) diff --git a/packages/orbit-components/src/tmp-tailwind/Badge/TailwindBadge.stories.tsx b/packages/orbit-components/src/tmp-tailwind/Badge/Badge.stories.tsx similarity index 98% rename from packages/orbit-components/src/tmp-tailwind/Badge/TailwindBadge.stories.tsx rename to packages/orbit-components/src/tmp-tailwind/Badge/Badge.stories.tsx index 6a82fcf99c..e6b337653f 100644 --- a/packages/orbit-components/src/tmp-tailwind/Badge/TailwindBadge.stories.tsx +++ b/packages/orbit-components/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 index 8f4e083e65..3334886071 100644 --- 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 = { 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 index df9678a9fc..186a23962f 100644 --- 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 ( { "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 index 32d72d2110..95605533dd 100644 --- 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];