From eabf5ebafd808be499918fc738eff6d017a8d024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tarik=20G=C3=BCrsoy?= <tarik.guersoy@cloudogu.com>
Date: Wed, 20 Sep 2023 17:42:41 +0200
Subject: [PATCH] Card Tag Variants

CardDetailTags can now be styled according to 3 distinct styles, info, info-light and light
---
 gradle/changelog/cardtags_added.yaml     |  2 ++
 scm-ui/ui-layout/src/card/CardDetail.tsx | 25 ++++++++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 gradle/changelog/cardtags_added.yaml

diff --git a/gradle/changelog/cardtags_added.yaml b/gradle/changelog/cardtags_added.yaml
new file mode 100644
index 0000000000..68b83d94f3
--- /dev/null
+++ b/gradle/changelog/cardtags_added.yaml
@@ -0,0 +1,2 @@
+- type: added
+  description: Cardtags can now be colored according to 3 distinct styles
diff --git a/scm-ui/ui-layout/src/card/CardDetail.tsx b/scm-ui/ui-layout/src/card/CardDetail.tsx
index 4c051fb49f..d1cb918da3 100644
--- a/scm-ui/ui-layout/src/card/CardDetail.tsx
+++ b/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>
   )