diff --git a/docs/docs/components/badge.mdx b/docs/docs/components/badge.mdx new file mode 100644 index 0000000..0b070f6 --- /dev/null +++ b/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 +
+ + + + + + + +
+``` + +
+ + + + + + + +
+ +##### Badge with shapes + +```jsx +
+ + + + + + + +
+``` + +
+ + + + + + + +
+ +##### Badge with position + +```jsx +
+ + +
+``` + +
+ + + +
+ +##### Badge with a child + +```jsx +
+ + +
+``` + +
+ + +
+ +### Props Referece + +| Attributes | Values | Optional ? | +| :--------- | :--------------------------------------------------------------------: | ---------: | +| color | `string` | Yes | +| textColor | `string` | Yes | +| label | `string` | No | +| shape | `rounded` | `rounded-circle` | Yes | +| hide | `boolean;` | Yes | +| position | `top-start` | `top-end` | `bottom-start` | `bottom-end` | Yes | +| ref | `RefObject;` | Yes | diff --git a/examples/vanilla-extract-react/src/main.tsx b/examples/vanilla-extract-react/src/main.tsx index 606a3cf..b3a6638 100755 --- a/examples/vanilla-extract-react/src/main.tsx +++ b/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( , - document.getElementById('root') -) + document.getElementById("root") +); diff --git a/lib/src/components/Badge/Badge.tsx b/lib/src/components/Badge/Badge.tsx new file mode 100644 index 0000000..52608fe --- /dev/null +++ b/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 ( + + {children} + + {label} + + + ); +}; + +const BadgeWithRef = React.forwardRef(BadgeComponent); +export { BadgeWithRef as Badge }; diff --git a/lib/src/components/Badge/badge.css.ts b/lib/src/components/Badge/badge.css.ts new file mode 100644 index 0000000..738f21e --- /dev/null +++ b/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" } + } + } +}); diff --git a/lib/src/components/Badge/badge.types.ts b/lib/src/components/Badge/badge.types.ts new file mode 100644 index 0000000..51e26d5 --- /dev/null +++ b/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 & { + 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 } +]; diff --git a/lib/src/components/Badge/index.ts b/lib/src/components/Badge/index.ts new file mode 100644 index 0000000..d8aef6c --- /dev/null +++ b/lib/src/components/Badge/index.ts @@ -0,0 +1,2 @@ +export * from "./Badge"; +export * from "./badge.css"; diff --git a/lib/src/index.ts b/lib/src/index.ts index da7a529..8f249f0 100644 --- a/lib/src/index.ts +++ b/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"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ab75216..9b0e704 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -67,7 +67,7 @@ importers: '@types/react': 17.0.41 '@types/react-dom': 17.0.14 '@vitejs/plugin-react': 1.2.0 - typescript: 4.6.2 + typescript: 4.6.4 vite: 2.8.6 lib: