Card Tag Variants

CardDetailTags can now be styled according to 3 distinct styles, info, info-light and light

gradle/changelog/cardtags_added.yaml

@@ -0,0 +1,2 @@
+- type: added
+  description: Cardtags can now be colored according to 3 distinct styles

scm-ui/ui-layout/src/card/CardDetail.tsx

@@ -27,10 +27,27 @@ import classNames from "classnames";
 import { useGeneratedId } from "@scm-manager/ui-components";
 import styled from "styled-components";
 
+export const CardVariants = {
+  LIGHT: "light",
+  INFO: "info",
+} as const;
+
+type CardVariant = typeof CardVariants[keyof typeof CardVariants];
+
+const createCardVariantClasses = (variant?: string | undefined) =>
+  classNames({
+    "is-light": variant === "light" || !variant,
+    "is-info": variant === "info",
+  });
+
 type CardDetailProps = HTMLAttributes<HTMLSpanElement> & {
   children: ReactNode | ((props: { labelId: string }) => ReactNode);
 };
 
+type CardVariantProps = {
+  cardVariant?: CardVariant;
+};
+
 /**
  * @beta
  * @since 2.46.0
@@ -62,9 +79,13 @@ export const CardDetailLabel = React.forwardRef<HTMLSpanElement, HTMLAttributes<
  * @beta
  * @since 2.46.0
  */
-export const CardDetailTag = React.forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+export const CardDetailTag = React.forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement> & CardVariantProps>(
   ({ children, className, ...props }, ref) => (
-    <span {...props} className={classNames("tag is-rounded is-light", className)} ref={ref}>
+    <span
+      {...props}
+      className={classNames("tag is-rounded", createCardVariantClasses(props.cardVariant), className)}
+      ref={ref}
+    >
       {children}
     </span>
   )