Add docs for VuiBadge

src/docs/components/Example.tsx

@@ -24,6 +24,7 @@ export const Example = ({ name, component, source }: Props) => {
         <VuiTab isActive={tab === "example"} onClick={() => setTab("example")}>
           Example
         </VuiTab>
+
         <VuiTab isActive={tab === "source"} onClick={() => setTab("source")}>
           Source
         </VuiTab>

src/docs/pages.tsx

@@ -1,4 +1,5 @@
 // Components
+import { badge } from "./pages/badge";
 import { button } from "./pages/button";
 import { drawer } from "./pages/drawer";
 import { flex } from "./pages/flex";
@@ -36,7 +37,7 @@ export const categories: Category[] = [
   },
   {
     name: "Info",
-    pages: [icon]
+    pages: [badge, icon]
   },
   {
     name: "Containers",

src/docs/pages/badge/BadgeColors.tsx

@@ -0,0 +1,13 @@
+import { BADGE_COLOR, VuiBadge, VuiFlexContainer, VuiFlexItem } from "../../../lib";
+
+export const BadgeColors = () => {
+  return (
+    <VuiFlexContainer>
+      {BADGE_COLOR.map((color) => (
+        <VuiFlexItem grow={false} key={color}>
+          <VuiBadge color={color}>Color {color}</VuiBadge>
+        </VuiFlexItem>
+      ))}
+    </VuiFlexContainer>
+  );
+};

src/docs/pages/badge/ClickableBadges.tsx

@@ -0,0 +1,19 @@
+import { VuiBadge, VuiFlexContainer, VuiFlexItem } from "../../../lib";
+
+export const ClickableBadges = () => {
+  return (
+    <VuiFlexContainer>
+      <VuiFlexItem grow={false}>
+        <VuiBadge color="primary" href="https://docs.vectara.com/" target="_blank">
+          Docs
+        </VuiBadge>
+      </VuiFlexItem>
+
+      <VuiFlexItem grow={false}>
+        <VuiBadge color="primary" onClick={() => alert("Hello, world")}>
+          Hello, world
+        </VuiBadge>
+      </VuiFlexItem>
+    </VuiFlexContainer>
+  );
+};

src/docs/pages/badge/index.tsx

@@ -0,0 +1,22 @@
+import { BadgeColors } from "./BadgeColors";
+import { ClickableBadges } from "./ClickableBadges";
+
+const BadgeColorsSource = require("!!raw-loader!./BadgeColors");
+const ClickableBadgesSource = require("!!raw-loader!./ClickableBadges");
+
+export const badge = {
+  name: "Badge",
+  path: "/badge",
+  examples: [
+    {
+      name: "Colors",
+      component: <BadgeColors />,
+      source: BadgeColorsSource.default.toString()
+    },
+    {
+      name: "Clickable badges",
+      component: <ClickableBadges />,
+      source: ClickableBadgesSource.default.toString()
+    }
+  ]
+};

src/lib/components/badge/Badge.tsx

@@ -4,12 +4,12 @@ import { Link } from "react-router-dom";
 import { Props as LinkProps } from "../link/Link";
 import { getTrackingProps } from "../../utils/getTrackingProps";
 
-const COLOR = ["accent", "primary", "danger", "success", "normal"] as const;
+export const BADGE_COLOR = ["accent", "primary", "danger", "success", "normal"] as const;
 
 type Props = {
   children: React.ReactNode;
   className?: string;
-  color: (typeof COLOR)[number];
+  color: (typeof BADGE_COLOR)[number];
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   href?: LinkProps["href"];
   target?: LinkProps["target"];
@@ -31,7 +31,7 @@ export const VuiBadge = ({ children, className, color, onClick, href, target, tr
 
   if (href) {
     return (
-      <Link className={classes} onClick={onClick} to={href} {...getTrackingProps(track)}>
+      <Link className={classes} onClick={onClick} to={href} target={target} {...getTrackingProps(track)}>
         {children}
       </Link>
     );

src/lib/components/badge/_index.scss

@@ -8,6 +8,7 @@
   border-radius: $sizeS;
   font-family: inherit;
   white-space: nowrap;
+  text-decoration: none;
 }
 
 .vuiBadge--clickable {

src/lib/components/index.ts

@@ -2,7 +2,7 @@ import { VuiAppContent } from "./appContent/AppContent";
 import { VuiAppHeader } from "./appHeader/AppHeader";
 import { VuiAppLayout } from "./appLayout/AppLayout";
 import { VuiAppSideNav } from "./appSideNav/AppSideNav";
-import { VuiBadge } from "./badge/Badge";
+import { BADGE_COLOR, VuiBadge } from "./badge/Badge";
 import { BUTTON_COLOR, BUTTON_SIZE, ButtonColor } from "./button/types";
 import { VuiButtonPrimary } from "./button/ButtonPrimary";
 import { VuiButtonSecondary } from "./button/ButtonSecondary";
@@ -46,6 +46,7 @@ import { VuiToggle } from "./toggle/Toggle";
 export type { ButtonColor, TabSize };
 
 export {
+  BADGE_COLOR,
   BUTTON_COLOR,
   BUTTON_SIZE,
   ICON_COLOR,