From 240d9d1de0c1e6ca563c645b25e5f78b1eb0704d Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@gmail.com>
Date: Wed, 27 Sep 2023 15:04:41 -0400
Subject: [PATCH] Badge docs + preview

---
 .../docs/components/accents/_category_.json   |  6 ++++
 .../docs/components/accents/badge.mdx         | 19 +++++++++++
 .../src/componentPreview/badgePreview.tsx     | 32 +++++++++++++++++++
 .../src/components/PreviewBlock/index.tsx     |  2 ++
 .../src/components/Badge/index.tsx            |  8 ++++-
 5 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 @stellar/design-system-website/docs/components/accents/_category_.json
 create mode 100644 @stellar/design-system-website/docs/components/accents/badge.mdx
 create mode 100644 @stellar/design-system-website/src/componentPreview/badgePreview.tsx

diff --git a/@stellar/design-system-website/docs/components/accents/_category_.json b/@stellar/design-system-website/docs/components/accents/_category_.json
new file mode 100644
index 00000000..f7f060ff
--- /dev/null
+++ b/@stellar/design-system-website/docs/components/accents/_category_.json
@@ -0,0 +1,6 @@
+{
+  "label": "Accents",
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/@stellar/design-system-website/docs/components/accents/badge.mdx b/@stellar/design-system-website/docs/components/accents/badge.mdx
new file mode 100644
index 00000000..bc7d1d17
--- /dev/null
+++ b/@stellar/design-system-website/docs/components/accents/badge.mdx
@@ -0,0 +1,19 @@
+---
+slug: /badge
+---
+
+# Badge
+
+<ComponentDescription componentName="Badge" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Badge">
+  <Badge>Label</Badge>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Badge" />
diff --git a/@stellar/design-system-website/src/componentPreview/badgePreview.tsx b/@stellar/design-system-website/src/componentPreview/badgePreview.tsx
new file mode 100644
index 00000000..f7bdcc4f
--- /dev/null
+++ b/@stellar/design-system-website/src/componentPreview/badgePreview.tsx
@@ -0,0 +1,32 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const badgePreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "variant",
+      options: [
+        {
+          value: "default",
+          label: "Default",
+        },
+        {
+          value: "success",
+          label: "Success",
+        },
+        {
+          value: "warning",
+          label: "Warning",
+        },
+        {
+          value: "pending",
+          label: "Pending",
+        },
+        {
+          value: "error",
+          label: "Error",
+        },
+      ],
+    },
+  ],
+};
diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
index 48d4933b..220922fa 100644
--- a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
+++ b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
@@ -14,6 +14,7 @@ import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
+import { badgePreview } from "@site/src/componentPreview/badgePreview";
 
 // =============================================================================
 // Component previews
@@ -27,6 +28,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Paragraph: paragraphPreview,
   Title: titlePreview,
   Notification: notificationPreview,
+  Badge: badgePreview,
 };
 
 type Theme = "sds-theme-light" | "sds-theme-dark";
diff --git a/@stellar/design-system/src/components/Badge/index.tsx b/@stellar/design-system/src/components/Badge/index.tsx
index a20566f3..5bad4ab7 100644
--- a/@stellar/design-system/src/components/Badge/index.tsx
+++ b/@stellar/design-system/src/components/Badge/index.tsx
@@ -1,11 +1,17 @@
 import React from "react";
 import "./styles.scss";
 
-interface BadgeProps {
+/** */
+export interface BadgeProps {
+  /** Variant of the badge @defaultValue `default` */
   variant?: "default" | "success" | "warning" | "pending" | "error";
+  /** Label of the badge */
   children: string;
 }
 
+/**
+ * `Badge` is used to label or categorize an item. There are five variants: `default`, `success`, `warning`, `pending`, and `error`.
+ */
 export const Badge: React.FC<BadgeProps> = ({
   variant = "default",
   children,