HOV-3 - Adds Badge Component [V1]

docs/docs/components/badge.mdx

@@ -0,0 +1,117 @@
+# Badge
+
+### Quick start
+
+Here's a quick start guide to get started with the badge component
+
+### Importing Component
+
+import "@hover-design/react/dist/style.css";
+import { Badge, Button } from "@hover-design/react";
+
+```jsx
+import { Badge } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Badge Default
+
+```jsx
+<div className="App">
+  <Badge color="#321fdb" label="primary" />
+  <Badge color="#2eb85c" label="success" />
+  <Badge color="red" label="danger" />
+  <Badge color="#f9b115" label="warning" />
+  <Badge color="#39f" label="info" />
+  <Badge color="#ebedef" textColor="#000" label="light" />
+  <Badge color="#4f5d73" label="dark" />
+</div>
+```
+
+<div className="App">
+  <Badge color="#321fdb" label="primary" />
+  <Badge color="#2eb85c" label="success" />
+  <Badge color="red" label="danger" />
+  <Badge color="#f9b115" label="warning" />
+  <Badge color="#39f" label="info" />
+  <Badge color="#ebedef" textColor="#000" label="light" />
+  <Badge color="#4f5d73" label="dark" />
+</div>
+
+##### Badge with shapes
+
+```jsx
+<div className="App">
+  <Badge color="#321fdb" shape="rounded" label="primary" />
+  <Badge color="#2eb85c" shape="rounded" label="success" />
+  <Badge color="red" shape="rounded" label="danger" />
+  <Badge color="#f9b115" shape="rounded" label="warning" />
+  <Badge color="#39f" shape="rounded" label="info" />
+  <Badge color="#ebedef" textColor="#000" shape="rounded" label="light" />
+  <Badge color="#4f5d73" shape="rounded" label="dark" />
+</div>
+```
+
+<div className="App">
+  <Badge color="#321fdb" shape="rounded" label="primary" />
+  <Badge color="#2eb85c" shape="rounded" label="success" />
+  <Badge color="red" shape="rounded" label="danger" />
+  <Badge color="#f9b115" shape="rounded" label="warning" />
+  <Badge color="#39f" shape="rounded" label="info" />
+  <Badge color="#ebedef" textColor="#000" shape="rounded" label="light" />
+  <Badge color="#4f5d73" shape="rounded" label="dark" />
+</div>
+
+##### Badge with position
+
+```jsx
+<div className="App">
+  <Button variant="dark">
+    <Badge color="red" label="New" /> Profile
+  </Button>
+  <Button variant="dark">
+    Notifications <Badge color="red" label="7" shape="rounded" />
+  </Button>
+</div>
+```
+
+<div className="App">
+  <Badge color="red" label="3" shape="rounded" position="top-end">
+    <Button variant="dark">Notifications</Button>
+  </Badge>
+</div>
+
+##### Badge with a child
+
+```jsx
+<div className="App">
+  <Button variant="dark">
+    <Badge color="red" label="New" /> Profile
+  </Button>
+  <Button variant="dark">
+    Notifications <Badge color="red" label="7" shape="rounded" />
+  </Button>
+</div>
+```
+
+<div className="App">
+  <Button variant="dark">
+    <Badge color="red" label="New" /> Profile
+  </Button>
+  <Button variant="dark">
+    Notifications <Badge color="red" label="7" shape="rounded" />
+  </Button>
+</div>
+
+### Props Referece
+
+| Attributes |                                 Values                                 | Optional ? |
+| :--------- | :--------------------------------------------------------------------: | ---------: |
+| color      |                                `string`                                |        Yes |
+| textColor  |                                `string`                                |        Yes |
+| label      |                                `string`                                |         No |
+| shape      |                   `rounded` &#124; `rounded-circle`                    |        Yes |
+| hide       |                               `boolean;`                               |        Yes |
+| position   | `top-start` &#124; `top-end` &#124; `bottom-start` &#124; `bottom-end` |        Yes |
+| ref        |                    `RefObject<HTMLButtonElement>;`                     |        Yes |

examples/vanilla-extract-react/src/main.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import "@hover-design/react/dist/style.css";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-)
+  document.getElementById("root")
+);

lib/src/components/Badge/Badge.tsx

@@ -0,0 +1,50 @@
+import React, { ForwardRefRenderFunction } from "react";
+import {
+  badges,
+  badgeWrapper,
+  badgeThemeClass,
+  badgeThemeVars
+} from "./badge.css";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { IBadgesProps } from "./badge.types";
+
+const BadgeComponent: ForwardRefRenderFunction<
+  HTMLSpanElement,
+  IBadgesProps
+> = (
+  {
+    color = "red",
+    textColor = "#fff",
+    hide = false,
+    shape = "rounded-circle",
+    position = "default",
+    label,
+    children,
+    ...props
+  },
+  ref
+) => {
+  const badgeStyle = badges({
+    shape,
+    visible: hide ? "hide" : "show",
+    position
+  });
+
+  return (
+    <span role="status" className={`${badgeWrapper}`} ref={ref} {...props}>
+      {children}
+      <small
+        style={assignInlineVars({
+          [badgeThemeVars.badgeStyleColor]: color,
+          [badgeThemeVars.badgeStyleTextColor]: textColor
+        })}
+        className={`${badgeStyle}  ${badgeThemeClass}`}
+      >
+        {label}
+      </small>
+    </span>
+  );
+};
+
+const BadgeWithRef = React.forwardRef(BadgeComponent);
+export { BadgeWithRef as Badge };

lib/src/components/Badge/badge.css.ts

@@ -0,0 +1,50 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { style, createTheme } from "@vanilla-extract/css";
+import { IBadgeTheme } from "./badge.types";
+
+export const [badgeThemeClass, badgeThemeVars]: IBadgeTheme = createTheme({
+  badgeStyleColor: "none",
+  badgeStyleTextColor: "inherit"
+});
+
+export const badgeWrapper = style({
+  position: "relative",
+  minWidth: "24px",
+  height: " 24px"
+});
+
+export const badges = recipe({
+  base: {
+    backgroundColor: badgeThemeVars.badgeStyleColor,
+    color: badgeThemeVars.badgeStyleTextColor,
+    minWidth: "24px",
+    height: " 24px",
+    textAlign: "center",
+    padding: "4px 8px",
+    lineHeight: "1.3",
+    fontSize: "13px",
+    fontWeight: "700"
+  },
+
+  variants: {
+    shape: {
+      rounded: { borderRadius: "50px" },
+      ["rounded-circle"]: { borderRadius: "4px" }
+    },
+    visible: {
+      show: { display: "inline-block" },
+      hide: { display: "none" }
+    },
+    position: {
+      default: { position: "static", top: "0px", left: "0px" },
+      ["top-start"]: { position: "absolute", top: "-20px", left: "-15px" },
+      ["top-end"]: { position: "absolute", top: "-20px", right: "-15px" },
+      ["bottom-start"]: {
+        position: "absolute",
+        bottom: "-20px",
+        left: "-15px"
+      },
+      ["bottom-end"]: { position: "absolute", bottom: "-20px", right: "-15px" }
+    }
+  }
+});

lib/src/components/Badge/badge.types.ts

@@ -0,0 +1,24 @@
+import { RecipeVariants } from "@vanilla-extract/recipes";
+import { badges } from "./badge.css";
+import { ReactNode } from "react";
+
+export type IBadgesProps = JSX.IntrinsicElements["span"] &
+  RecipeVariants<typeof badges> & {
+    label: string | JSX.Element;
+    color?: string;
+    textColor?: string;
+    children?: ReactNode;
+    position?:
+      | "default"
+      | "top-start"
+      | "top-end"
+      | "bottom-end"
+      | "bottom-start";
+    shape?: "rounded" | "rounded-circle";
+    hide?: boolean;
+  };
+
+export type IBadgeTheme = [
+  string,
+  { badgeStyleColor: string; badgeStyleTextColor: string }
+];

lib/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export * from "./Badge";
+export * from "./badge.css";

lib/src/index.ts

@@ -2,5 +2,6 @@ export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/reset";
 export * from "./components/Switch";
+export * from "./components/Badge";
 export * from "./components/List";
 export * from "./components/ListItem";