diff --git a/docs/docs/components/input.mdx b/docs/docs/components/input.mdx new file mode 100644 index 0000000..b3d28fe --- /dev/null +++ b/docs/docs/components/input.mdx @@ -0,0 +1,120 @@ +# Input + +### Quick start + +Here's a quick start guide to get started with the button component + +### Importing Component + +```jsx +import { Input } from "@hover-design/react"; +``` + +### Code Snippets and Examples + +##### Input Default + +import "@hover-design/react/dist/style.css"; +import { Input, Label, Flex } from "@hover-design/react"; + +```jsx +
+ + + + +
+``` + + + + + + + +##### Input Success + +```jsx +
+ +
+``` + + + +##### Input Warning + +```jsx +
+ +
+``` + + + +##### Input Error + +```jsx +
+ +
+``` + + + +##### Input with Icon + +```jsx +
+ } /> +
+``` + + + + + + } +/> + +##### Input with Icon + +```jsx +
+ } /> +
+``` + + + + + + } +/> diff --git a/lib/src/components/Accordion/Accordion.tsx b/lib/src/components/Accordion/Accordion.tsx index e7b4e1e..509b357 100644 --- a/lib/src/components/Accordion/Accordion.tsx +++ b/lib/src/components/Accordion/Accordion.tsx @@ -10,7 +10,7 @@ const Accordion: ForwardRefRenderFunction< > = ({ children, onToggle, className, ...nativeProps }, ref) => { return (
| undefined} + ref={ref} onToggle={onToggle} className={`${detailsClass} ${accordionThemeClass} ${className}`} {...nativeProps} diff --git a/lib/src/components/Input/Input.tsx b/lib/src/components/Input/Input.tsx new file mode 100644 index 0000000..a9a6dbc --- /dev/null +++ b/lib/src/components/Input/Input.tsx @@ -0,0 +1,69 @@ +import React, { ForwardRefRenderFunction } from "react"; +import { InputProps } from "./input.types"; +import { + inputClass, + inputThemeClass, + inputThemeVars, + inputWrapperClass, + iconWrapper, + leftIconWrapper, + rightIconWrapper, +} from "./input.styles.css"; +import { Flex } from "../Flex"; +import { assignInlineVars } from "@vanilla-extract/dynamic"; +import { lightColors } from "src/styles/tokens"; + +const Input: ForwardRefRenderFunction = ( + { + className, + style, + statusBorder = lightColors.brand[400], + Icon, + iconPosition = "right", + ...props + }, + ref +) => { + const paddingForIcon = { + left: iconPosition === "left" && Icon ? "38px" : "14px", + right: iconPosition === "right" && Icon ? "38px" : "14px", + }; + + return ( +
+ {Icon && iconPosition === "left" && ( + + {Icon} + + )} + + {Icon && iconPosition === "right" && ( + + {Icon} + + )} +
+ ); +}; +const InputWithRef = React.forwardRef(Input); +export { InputWithRef as Input }; diff --git a/lib/src/components/Input/index.ts b/lib/src/components/Input/index.ts new file mode 100644 index 0000000..498d1d3 --- /dev/null +++ b/lib/src/components/Input/index.ts @@ -0,0 +1,2 @@ +export * from "./Input"; +export * from "./input.styles.css"; diff --git a/lib/src/components/Input/input.styles.css.ts b/lib/src/components/Input/input.styles.css.ts new file mode 100644 index 0000000..67f4428 --- /dev/null +++ b/lib/src/components/Input/input.styles.css.ts @@ -0,0 +1,43 @@ +import { createTheme, style } from "@vanilla-extract/css"; +import { recipe } from "@vanilla-extract/recipes"; + +import { lightColors } from "src/styles/tokens"; +import { IInputTheme } from "./input.types"; + +export const inputWrapperClass = style({ + position: "relative", + display: "inline-block", +}); + +export const [inputThemeClass, inputThemeVars]: IInputTheme = createTheme({ + borderColor: `${lightColors.brand[400]}`, + padding: { + left: "14px", + right: "14px", + top: "10px", + bottom: "10px", + }, +}); +export const inputClass = style({ + fontSize: "16px", + borderRadius: "8px", + paddingTop: inputThemeVars.padding.top, + paddingRight: inputThemeVars.padding.right, + paddingBottom: inputThemeVars.padding.bottom, + paddingLeft: inputThemeVars.padding.left, + border: `1px solid ${inputThemeVars.borderColor}`, +}); + +export const rightIconWrapper = style({ + right: "14px", +}); + +export const leftIconWrapper = style({ + left: "14px", +}); + +export const iconWrapper = style({ + position: "absolute", + height: "100%", + top: "0", +}); diff --git a/lib/src/components/Input/input.types.ts b/lib/src/components/Input/input.types.ts new file mode 100644 index 0000000..c65baae --- /dev/null +++ b/lib/src/components/Input/input.types.ts @@ -0,0 +1,21 @@ +export interface InputProps + extends React.DetailedHTMLProps< + React.InputHTMLAttributes, + HTMLInputElement + > { + statusBorder?: string; + iconPosition?: "left" | "right"; + Icon?: React.ReactNode; +} +export type IInputTheme = [ + string, + { + borderColor: string; + padding: { + top: string; + right: string; + bottom: string; + left: string; + }; + } +]; diff --git a/lib/src/components/Label/Label.tsx b/lib/src/components/Label/Label.tsx new file mode 100644 index 0000000..a5aa29c --- /dev/null +++ b/lib/src/components/Label/Label.tsx @@ -0,0 +1,16 @@ +import React, { ForwardRefRenderFunction } from "react"; +import { labelClass } from "./label.styles.css"; +import { ILabelProps } from "./label.types"; + +const Label: ForwardRefRenderFunction = ( + { children, ...props }, + ref +) => { + return ( + + ); +}; +const LabelWithRef = React.forwardRef(Label); +export { LabelWithRef as Label }; diff --git a/lib/src/components/Label/index.ts b/lib/src/components/Label/index.ts new file mode 100644 index 0000000..45b76ca --- /dev/null +++ b/lib/src/components/Label/index.ts @@ -0,0 +1,2 @@ +export * from "./Label"; +export * from "./label.styles.css"; diff --git a/lib/src/components/Label/label.styles.css.ts b/lib/src/components/Label/label.styles.css.ts new file mode 100644 index 0000000..16e7e95 --- /dev/null +++ b/lib/src/components/Label/label.styles.css.ts @@ -0,0 +1,5 @@ +import { style } from "@vanilla-extract/css"; + +export const labelClass = style({ + fontSize: "16px", +}); diff --git a/lib/src/components/Label/label.types.ts b/lib/src/components/Label/label.types.ts new file mode 100644 index 0000000..3b3d831 --- /dev/null +++ b/lib/src/components/Label/label.types.ts @@ -0,0 +1,5 @@ +export interface ILabelProps + extends React.DetailedHTMLProps< + React.LabelHTMLAttributes, + HTMLLabelElement + > {} diff --git a/lib/src/index.ts b/lib/src/index.ts index d826dff..5f68be1 100644 --- a/lib/src/index.ts +++ b/lib/src/index.ts @@ -7,6 +7,8 @@ export * from "./components/ListItem"; export * from "./components/reset"; export * from "./components/Switch"; export * from "./components/Accordion"; +export * from "./components/Input"; +export * from "./components/Label"; export * from "./components/Divider"; export * from "./components/Icon"; export * from "./components/TextArea"; diff --git a/lib/src/styles/tokens/colors.ts b/lib/src/styles/tokens/colors.ts index 6a62f30..0b11e84 100644 --- a/lib/src/styles/tokens/colors.ts +++ b/lib/src/styles/tokens/colors.ts @@ -5,12 +5,16 @@ export const lightColors: IThemeColors = { 100: "hsla(51,10%,91%,1)", 200: "hsla(51,33%,91%,1)", 300: "hsla(51,76%,91%,1)", + 400: "hsla(213, 84%, 19%, 1)", }, typography: { 200: "hsla(0, 0%, 25%,1)", 500: "hsla(0, 0%, 10%,1)", 900: "hsla(0, 0%, 0%,1)", }, + success: "hsla(145, 63%, 42%, 1)", + warning: "hsla(45, 74%, 56%, 1)", + error: "hsla(0, 79%, 63%, 1)", }; export interface IThemeColors { @@ -19,10 +23,14 @@ export interface IThemeColors { 100: string; 200: string; 300: string; + 400: string; }; typography: { 200: string; 500: string; 900: string; }; + success: string; + warning: string; + error: string; }