HOV-13 | Adds Input component

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
+<div className="App">
+  <Flex flexDirection="column" gap="6px">
+    <Label htmlFor={"basic-input"}>Simple Input</Label>
+    <Input id="basic-input" placeholder="placeholder" />
+  </Flex>
+</div>
+```
+
+
+<Flex flexDirection="column" gap="6px">
+  <Label htmlFor={"basic-input"}>Simple Input</Label>
+  <Input id="basic-input" placeholder="placeholder" />
+</Flex>
+
+##### Input Success
+
+```jsx
+<div className="App">
+  <Input statusBorder={"hsla(145, 63%, 42%, 1)"} />
+</div>
+```
+
+<Input statusBorder={"hsla(145, 63%, 42%, 1)"} />
+
+##### Input Warning
+
+```jsx
+<div className="App">
+  <Input statusBorder={"hsla(45, 74%, 56%, 1)"} />
+</div>
+```
+
+<Input statusBorder={"hsla(45, 74%, 56%, 1)"} />
+
+##### Input Error
+
+```jsx
+<div className="App">
+  <Input statusBorder={"hsla(0, 79%, 63%, 1)"} />
+</div>
+```
+
+<Input statusBorder={"hsla(0, 79%, 63%, 1)"} />
+
+##### Input with Icon
+
+```jsx
+<div className="App">
+  <Input Icon={<TwitterIconSvg />} />
+</div>
+```
+
+<Input
+  Icon={
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler icon-tabler-brand-twitter"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
+    </svg>
+  }
+/>
+
+##### Input with Icon
+
+```jsx
+<div className="App">
+  <Input Icon={<TwitterIconSvg />} />
+</div>
+```
+
+<Input
+  iconPosition={"left"}
+  Icon={
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler icon-tabler-brand-twitter"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
+    </svg>
+  }
+/>

lib/src/components/Accordion/Accordion.tsx

@@ -10,7 +10,7 @@ const Accordion: ForwardRefRenderFunction<
 > = ({ children, onToggle, className, ...nativeProps }, ref) => {
   return (
     <details
-      ref={ref as LegacyRef<HTMLElement> | undefined}
+      ref={ref}
       onToggle={onToggle}
       className={`${detailsClass} ${accordionThemeClass} ${className}`}
       {...nativeProps}

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<HTMLInputElement, InputProps> = (
+  {
+    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 (
+    <div className={inputWrapperClass}>
+      {Icon && iconPosition === "left" && (
+        <Flex
+          className={`${iconWrapper} ${leftIconWrapper}`}
+          alignItems={"center"}
+          justifyContent="center"
+        >
+          {Icon}
+        </Flex>
+      )}
+      <input
+        ref={ref}
+        style={{
+          ...assignInlineVars({
+            [inputThemeVars.borderColor]: statusBorder,
+            [inputThemeVars.padding.left]: paddingForIcon.left,
+            [inputThemeVars.padding.right]: paddingForIcon.right,
+          }),
+          ...style,
+        }}
+        className={`${inputClass} ${inputThemeClass} ${className || ""}`}
+        {...props}
+      />
+      {Icon && iconPosition === "right" && (
+        <Flex
+          className={`${iconWrapper} ${rightIconWrapper}`}
+          alignItems={"center"}
+          justifyContent="center"
+        >
+          {Icon}
+        </Flex>
+      )}
+    </div>
+  );
+};
+const InputWithRef = React.forwardRef(Input);
+export { InputWithRef as Input };

lib/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export * from "./Input";
+export * from "./input.styles.css";

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",
+});

lib/src/components/Input/input.types.ts

@@ -0,0 +1,21 @@
+export interface InputProps
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  statusBorder?: string;
+  iconPosition?: "left" | "right";
+  Icon?: React.ReactNode;
+}
+export type IInputTheme = [
+  string,
+  {
+    borderColor: string;
+    padding: {
+      top: string;
+      right: string;
+      bottom: string;
+      left: string;
+    };
+  }
+];

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<HTMLLabelElement, ILabelProps> = (
+  { children, ...props },
+  ref
+) => {
+  return (
+    <label className={labelClass} ref={ref} {...props}>
+      {children}
+    </label>
+  );
+};
+const LabelWithRef = React.forwardRef(Label);
+export { LabelWithRef as Label };

lib/src/components/Label/index.ts

@@ -0,0 +1,2 @@
+export * from "./Label";
+export * from "./label.styles.css";

lib/src/components/Label/label.styles.css.ts

@@ -0,0 +1,5 @@
+import { style } from "@vanilla-extract/css";
+
+export const labelClass = style({
+  fontSize: "16px",
+});

lib/src/components/Label/label.types.ts

@@ -0,0 +1,5 @@
+export interface ILabelProps
+  extends React.DetailedHTMLProps<
+    React.LabelHTMLAttributes<HTMLLabelElement>,
+    HTMLLabelElement
+  > {}

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";

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;
 }