reuse vairant logic

libs/ui-toolkit/src/components/lozenge/lozenge.tsx

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react';
 import classNames from 'classnames';
+import type { Variant } from '../../utils/intent';
+import { getVariantBackground } from '../../utils/intent';
 
 interface LozengeProps {
   children: ReactNode;
-  variant?: 'success' | 'warning' | 'danger' | 'highlight';
+  variant?: Variant;
   className?: string;
   details?: string;
 }
@@ -13,13 +15,10 @@ const getWrapperClasses = (className: LozengeProps['className']) => {
 };
 
 const getLozengeClasses = (variant: LozengeProps['variant']) => {
-  return classNames(['rounded-md', 'font-mono', 'leading-none', 'p-4'], {
+  return classNames(
-    'bg-intent-success text-black': variant === 'success',
+    ['rounded-md', 'font-mono', 'leading-none', 'p-4'],
-    'bg-intent-danger text-white': variant === 'danger',
+    getVariantBackground(variant)
-    'bg-intent-warning text-black': variant === 'warning',
+  );
-    'bg-intent-highlight text-black': variant === 'highlight',
-    'bg-intent-help text-white': !variant,
-  });
 };
 
 export const Lozenge = ({

libs/ui-toolkit/src/index.ts

@@ -21,6 +21,8 @@ export { ThemeSwitcher } from './components/theme-switcher';
 export { Dialog } from './components/dialog/dialog';
 export { VegaLogo } from './components/vega-logo';
 export { Tooltip } from './components/tooltip';
+export { Indicator } from './components/indicator';
+export { Card } from './components/card';
 
 // Utils
 export * from './utils/intent';

libs/ui-toolkit/src/utils/intent.ts

@@ -9,6 +9,13 @@ export enum Intent {
   Help = 'help',
 }
 
+export enum Variant {
+  Success = 'success',
+  Warning = 'warning',
+  Danger = 'danger',
+  Highlight = 'highlight',
+}
+
 export const getIntentShadow = (intent?: Intent) => {
   return classNames('shadow-callout', {
     'shadow-intent-danger': intent === Intent.Danger,
@@ -19,3 +26,13 @@ export const getIntentShadow = (intent?: Intent) => {
     'shadow-intent-help': intent === Intent.Help,
   });
 };
+
+export const getVariantBackground = (variant?: Variant) => {
+  return classNames('shadow-callout', {
+    'bg-intent-success text-black': variant === Variant.Success,
+    'bg-intent-danger text-white': variant === Variant.Danger,
+    'bg-intent-warning text-black': variant === Variant.Warning,
+    'bg-intent-highlight text-black': variant === Variant.Highlight,
+    'bg-intent-help text-white': !variant,
+  });
+};