From cb54be46ee1b64b5e18ef126d82af79dc86e6ffc Mon Sep 17 00:00:00 2001 From: Rahul Sawant Date: Wed, 6 Jul 2022 02:05:26 +0530 Subject: [PATCH 1/4] feat: created badge component --- examples/vanilla-extract-react/src/App.tsx | 4 ++ lib/package.json | 1 + lib/src/components/Badge/Badge.tsx | 49 ++++++++++++++++++++ lib/src/components/Badge/badge.css.ts | 53 ++++++++++++++++++++++ lib/src/components/Badge/index.ts | 2 + lib/src/index.ts | 1 + pnpm-lock.yaml | 10 +++- 7 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 lib/src/components/Badge/Badge.tsx create mode 100644 lib/src/components/Badge/badge.css.ts create mode 100644 lib/src/components/Badge/index.ts diff --git a/examples/vanilla-extract-react/src/App.tsx b/examples/vanilla-extract-react/src/App.tsx index dc3a649..7c83a82 100755 --- a/examples/vanilla-extract-react/src/App.tsx +++ b/examples/vanilla-extract-react/src/App.tsx @@ -9,6 +9,7 @@ import { PageMain } from "components/pageMain/PageMain"; import React from "react"; import { fonts, fontSizes } from "styles/index.css"; import "styles/reset.css"; +import { Badge } from "@hover-design/react"; const App: React.FC = () => { return ( @@ -16,6 +17,9 @@ const App: React.FC = () => {
+
+ 123 +

👋   Welcome to Hover Design System Example

Colors

diff --git a/lib/package.json b/lib/package.json index e89badc..f1f5180 100644 --- a/lib/package.json +++ b/lib/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "@vanilla-extract/css": "^1.6.8", + "@vanilla-extract/dynamic": "^2.0.2", "@vanilla-extract/recipes": "^0.2.3", "@vanilla-extract/sprinkles": "^1.3.3", "@vanilla-extract/vite-plugin": "^3.1.0", diff --git a/lib/src/components/Badge/Badge.tsx b/lib/src/components/Badge/Badge.tsx new file mode 100644 index 0000000..5c63a23 --- /dev/null +++ b/lib/src/components/Badge/Badge.tsx @@ -0,0 +1,49 @@ +import React from "react"; + +import { + badges, + badgeWrapper, + badgeThemeClass, + badgeThemeVars +} from "./badge.css"; +import { RecipeVariants } from "@vanilla-extract/recipes"; +import { ReactNode } from "react"; +import { assignInlineVars } from "@vanilla-extract/dynamic"; + +type IBadgesProps = RecipeVariants & { + color?: string; + textColor?: string; + children: ReactNode; + position?: "top-start" | "top-end" | "bottom-end" | "bottom-start"; //variants + shape?: "rounded" | "rounded-circle"; //variants + show?: boolean; //variants +}; + +const Badge: React.FC = ({ + color = "red", + textColor = "#fff", + position, + shape = "rounded-circle", + show = true, + children +}) => { + const badgeStyle = badges({ + shape + }); + + return ( + + + {children} + + + ); +}; + +export { 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..eb6d266 --- /dev/null +++ b/lib/src/components/Badge/badge.css.ts @@ -0,0 +1,53 @@ +import { recipe } from "@vanilla-extract/recipes"; +import { style, createTheme } from "@vanilla-extract/css"; + +export type IBadgeTheme = [ + string, + { badgeStyleColor: string; badgeStyleTextColor: string } +]; + +export const [badgeThemeClass, badgeThemeVars]: IBadgeTheme = createTheme({ + badgeStyleColor: "none", + badgeStyleTextColor: "inherit" +}); + +export const badgeWrapper = style({ + position: "relative", + display: "inline-block", + minWidth: "24px", + height: " 24px" +}); + +export const badges = recipe({ + base: { + backgroundColor: badgeThemeVars.badgeStyleColor, + color: badgeThemeVars.badgeStyleTextColor, + position: "absolute", + minWidth: "24px", + height: " 24px", + textAlign: "center", + padding: "4px 8px", + lineHeight: "1.3", + fontSize: "13px", + top: "0", + left: "0", + transform: " translate(-50%, -50%)" + }, + + variants: { + shape: { + rounded: { borderRadius: "50px" }, + ["rounded-circle"]: { borderRadius: "4px" } + } + } +}); + +// top: 0; +// right: 0; +// transform: translate(-50%, -50%); +// transform: translate(50%, -50%); +// /* transform: translate(50%, 50%); */ +// /* transform: translate(-50%, 50%); + +// React Node - className: with position +// just a string - className: without position 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 31473aa..895d33e 100644 --- a/lib/src/index.ts +++ b/lib/src/index.ts @@ -2,3 +2,4 @@ export * from "./components/Button"; export * from "./components/Card"; export * from "./components/reset"; export * from "./components/Switch"; +export * from "./components/Badge"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 28adeb0..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: @@ -76,6 +76,7 @@ importers: '@types/react': ^17.0.0 '@types/react-dom': ^17.0.0 '@vanilla-extract/css': ^1.6.8 + '@vanilla-extract/dynamic': ^2.0.2 '@vanilla-extract/recipes': ^0.2.3 '@vanilla-extract/sprinkles': ^1.3.3 '@vanilla-extract/vite-plugin': ^3.1.0 @@ -91,6 +92,7 @@ importers: vite-tsconfig-paths: ^3.4.0 dependencies: '@vanilla-extract/css': 1.6.8 + '@vanilla-extract/dynamic': 2.0.2 '@vanilla-extract/recipes': 0.2.3_@vanilla-extract+css@1.6.8 '@vanilla-extract/sprinkles': 1.4.0_@vanilla-extract+css@1.6.8 '@vanilla-extract/vite-plugin': 3.1.3_vite@2.8.6 @@ -2898,6 +2900,12 @@ packages: outdent: 0.8.0 dev: false + /@vanilla-extract/dynamic/2.0.2: + resolution: {integrity: sha512-U4nKaEQ8Kuz+exXEr51DUpyaOuzo24/S/k1YbDPQR06cYcNjQqvwFRnwWtZ+9ImocqM1wTKtzrdUgSTtLGIwAg==} + dependencies: + '@vanilla-extract/private': 1.0.3 + dev: false + /@vanilla-extract/integration/3.0.0: resolution: {integrity: sha512-9VraQc7Qmdzvdrylq2ZwCbli4UxC1q2CtIfVr1fGOn8a6Xj+dXprrNboEqOLg29nOzPW1xldyIojRxMjWw1VEw==} dependencies: From 8f5eb02d7b6c1de0be7a46af9a8ca39a65210124 Mon Sep 17 00:00:00 2001 From: Rahul Sawant Date: Thu, 7 Jul 2022 00:19:29 +0530 Subject: [PATCH 2/4] refactor: refactored variants and types, included ref --- examples/vanilla-extract-react/src/App.tsx | 30 +++++++++++- examples/vanilla-extract-react/src/main.tsx | 13 ++--- lib/src/components/Badge/Badge.tsx | 53 +++++++++++---------- lib/src/components/Badge/badge.css.ts | 43 ++++++++--------- lib/src/components/Badge/badge.types.ts | 24 ++++++++++ 5 files changed, 106 insertions(+), 57 deletions(-) create mode 100644 lib/src/components/Badge/badge.types.ts diff --git a/examples/vanilla-extract-react/src/App.tsx b/examples/vanilla-extract-react/src/App.tsx index 7c83a82..ac4c8e6 100755 --- a/examples/vanilla-extract-react/src/App.tsx +++ b/examples/vanilla-extract-react/src/App.tsx @@ -9,7 +9,7 @@ import { PageMain } from "components/pageMain/PageMain"; import React from "react"; import { fonts, fontSizes } from "styles/index.css"; import "styles/reset.css"; -import { Badge } from "@hover-design/react"; +import { Badge, Button } from "@hover-design/react"; const App: React.FC = () => { return ( @@ -17,8 +17,34 @@ const App: React.FC = () => {
+ +
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +

- 123

👋   Welcome to Hover Design System Example

Colors

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 index 5c63a23..2825175 100644 --- a/lib/src/components/Badge/Badge.tsx +++ b/lib/src/components/Badge/Badge.tsx @@ -1,38 +1,39 @@ -import React from "react"; - +import React, { ForwardRefRenderFunction } from "react"; import { badges, badgeWrapper, badgeThemeClass, badgeThemeVars } from "./badge.css"; -import { RecipeVariants } from "@vanilla-extract/recipes"; -import { ReactNode } from "react"; import { assignInlineVars } from "@vanilla-extract/dynamic"; +import { IBadgesProps } from "./badge.types"; -type IBadgesProps = RecipeVariants & { - color?: string; - textColor?: string; - children: ReactNode; - position?: "top-start" | "top-end" | "bottom-end" | "bottom-start"; //variants - shape?: "rounded" | "rounded-circle"; //variants - show?: boolean; //variants -}; - -const Badge: React.FC = ({ - color = "red", - textColor = "#fff", - position, - shape = "rounded-circle", - show = true, - children -}) => { +const BadgeComponent: ForwardRefRenderFunction< + HTMLSpanElement, + IBadgesProps +> = ( + { + color = "red", + textColor = "#fff", + hide = false, + shape = "rounded-circle", + position = "default", + label, + children, + ...props + }, + ref +) => { const badgeStyle = badges({ - shape + shape, + visible: hide ? "hide" : "show", + position }); + const badgeWrapperStyle = badgeWrapper({}); + return ( - + = ({ })} className={`${badgeStyle} ${badgeThemeClass}`} > - {children} + {label} + {children} ); }; -export { Badge }; +const BadgeWithRef = React.forwardRef(BadgeComponent); +export { BadgeComponent as Badge }; diff --git a/lib/src/components/Badge/badge.css.ts b/lib/src/components/Badge/badge.css.ts index eb6d266..9e2887e 100644 --- a/lib/src/components/Badge/badge.css.ts +++ b/lib/src/components/Badge/badge.css.ts @@ -1,21 +1,18 @@ import { recipe } from "@vanilla-extract/recipes"; import { style, createTheme } from "@vanilla-extract/css"; - -export type IBadgeTheme = [ - string, - { badgeStyleColor: string; badgeStyleTextColor: string } -]; +import { IBadgeTheme } from "./badge.types"; export const [badgeThemeClass, badgeThemeVars]: IBadgeTheme = createTheme({ badgeStyleColor: "none", badgeStyleTextColor: "inherit" }); -export const badgeWrapper = style({ - position: "relative", - display: "inline-block", - minWidth: "24px", - height: " 24px" +export const badgeWrapper = recipe({ + base: { + position: "relative", + minWidth: "24px", + height: " 24px" + } }); export const badges = recipe({ @@ -28,26 +25,24 @@ export const badges = recipe({ textAlign: "center", padding: "4px 8px", lineHeight: "1.3", - fontSize: "13px", - top: "0", - left: "0", - transform: " translate(-50%, -50%)" + fontSize: "13px" }, variants: { shape: { rounded: { borderRadius: "50px" }, ["rounded-circle"]: { borderRadius: "4px" } + }, + visible: { + show: { display: "inline-block" }, + hide: { display: "none" } + }, + position: { + default: { top: "0px", left: "0px" }, + ["top-start"]: { top: "-15px", left: "-15px" }, + ["top-end"]: { top: "-15px", right: "-15px" }, + ["bottom-start"]: { bottom: "-15px", left: "-15px" }, + ["bottom-end"]: { bottom: "-15px", right: "-15px" } } } }); - -// top: 0; -// right: 0; -// transform: translate(-50%, -50%); -// transform: translate(50%, -50%); -// /* transform: translate(50%, 50%); */ -// /* transform: translate(-50%, 50%); - -// React Node - className: with position -// just a string - className: without position diff --git a/lib/src/components/Badge/badge.types.ts b/lib/src/components/Badge/badge.types.ts new file mode 100644 index 0000000..56254f3 --- /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 } +]; From 4b48affaf855d005edf049f913c5af69e5c02b82 Mon Sep 17 00:00:00 2001 From: Rahul Sawant Date: Mon, 11 Jul 2022 17:37:04 +0530 Subject: [PATCH 3/4] feat: Added Docs --- docs/docs/components/badge.mdx | 117 +++++++++++++++++++++ examples/vanilla-extract-react/src/App.tsx | 30 ------ lib/src/components/Badge/Badge.tsx | 2 +- lib/src/components/Badge/badge.css.ts | 18 ++-- lib/src/components/Badge/badge.types.ts | 2 +- 5 files changed, 130 insertions(+), 39 deletions(-) create mode 100644 docs/docs/components/badge.mdx 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/App.tsx b/examples/vanilla-extract-react/src/App.tsx index ac4c8e6..dc3a649 100755 --- a/examples/vanilla-extract-react/src/App.tsx +++ b/examples/vanilla-extract-react/src/App.tsx @@ -9,7 +9,6 @@ import { PageMain } from "components/pageMain/PageMain"; import React from "react"; import { fonts, fontSizes } from "styles/index.css"; import "styles/reset.css"; -import { Badge, Button } from "@hover-design/react"; const App: React.FC = () => { return ( @@ -17,35 +16,6 @@ const App: React.FC = () => {
- -
- - - -
-
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
-

👋   Welcome to Hover Design System Example

Colors

diff --git a/lib/src/components/Badge/Badge.tsx b/lib/src/components/Badge/Badge.tsx index 2825175..2b87014 100644 --- a/lib/src/components/Badge/Badge.tsx +++ b/lib/src/components/Badge/Badge.tsx @@ -34,6 +34,7 @@ const BadgeComponent: ForwardRefRenderFunction< return ( + {children} {label} - {children} ); }; diff --git a/lib/src/components/Badge/badge.css.ts b/lib/src/components/Badge/badge.css.ts index 9e2887e..28badca 100644 --- a/lib/src/components/Badge/badge.css.ts +++ b/lib/src/components/Badge/badge.css.ts @@ -19,13 +19,13 @@ export const badges = recipe({ base: { backgroundColor: badgeThemeVars.badgeStyleColor, color: badgeThemeVars.badgeStyleTextColor, - position: "absolute", minWidth: "24px", height: " 24px", textAlign: "center", padding: "4px 8px", lineHeight: "1.3", - fontSize: "13px" + fontSize: "13px", + fontWeight: "700" }, variants: { @@ -38,11 +38,15 @@ export const badges = recipe({ hide: { display: "none" } }, position: { - default: { top: "0px", left: "0px" }, - ["top-start"]: { top: "-15px", left: "-15px" }, - ["top-end"]: { top: "-15px", right: "-15px" }, - ["bottom-start"]: { bottom: "-15px", left: "-15px" }, - ["bottom-end"]: { bottom: "-15px", right: "-15px" } + 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 index 56254f3..51e26d5 100644 --- a/lib/src/components/Badge/badge.types.ts +++ b/lib/src/components/Badge/badge.types.ts @@ -4,7 +4,7 @@ import { ReactNode } from "react"; export type IBadgesProps = JSX.IntrinsicElements["span"] & RecipeVariants & { - label?: string | JSX.Element; + label: string | JSX.Element; color?: string; textColor?: string; children?: ReactNode; From ba02663f0b8f3bc55ccd127a019cc4fa929ad3b0 Mon Sep 17 00:00:00 2001 From: Rahul Sawant Date: Wed, 13 Jul 2022 00:01:22 +0530 Subject: [PATCH 4/4] refactor: Updated ref and role attribute --- lib/src/components/Badge/Badge.tsx | 6 ++---- lib/src/components/Badge/badge.css.ts | 10 ++++------ 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/lib/src/components/Badge/Badge.tsx b/lib/src/components/Badge/Badge.tsx index 2b87014..52608fe 100644 --- a/lib/src/components/Badge/Badge.tsx +++ b/lib/src/components/Badge/Badge.tsx @@ -30,10 +30,8 @@ const BadgeComponent: ForwardRefRenderFunction< position }); - const badgeWrapperStyle = badgeWrapper({}); - return ( - + {children}