feat/Tag

assets/icons/index.tsx

@@ -9,8 +9,8 @@ const LoadingSpinner: FC = () => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M18.65 8.35L15.86 11.14C15.54 11.46 15.76 12 16.21 12H18C18 15.31 15.31 18 12 18C11.21 18 10.44 17.85 9.75003 17.56C9.39003 17.41 8.98003 17.52 8.71003 17.79C8.20003 18.3 8.38003 19.16 9.05003 19.43C9.96003 19.8 10.96 20 12 20C16.42 20 20 16.42 20 12H21.79C22.24 12 22.46 11.46 22.14 11.15L19.35 8.36C19.16 8.16 18.84 8.16 18.65 8.35V8.35ZM6.00003 12C6.00003 8.69 8.69003 6 12 6C12.79 6 13.56 6.15 14.25 6.44C14.61 6.59 15.02 6.48 15.29 6.21C15.8 5.7 15.62 4.84 14.95 4.57C14.04 4.2 13.04 4 12 4C7.58003 4 4.00003 7.58 4.00003 12H2.21003C1.76003 12 1.54003 12.54 1.86003 12.85L4.65003 15.64C4.85003 15.84 5.16003 15.84 5.36003 15.64L8.15003 12.85C8.46003 12.54 8.24003 12 7.79003 12H6.00003Z"
       fill="white"
     />

src/buttons/Button.tsx

@@ -23,7 +23,7 @@ const ImageLoading = styled.div`
 `
 
 const Button: FC<Props> = ({
-  className,
+  className='',
   onClick,
   children,
   disabled,

src/index.tsx

@@ -4,6 +4,7 @@ export { default as Option } from './inputs/dropdown/Dropdown'
 export { default as DatePicker } from './inputs/datePicker/DatePicker'
 export { default as TextArea } from './inputs/textArea/TextArea'
 export { default as Typography } from './typography/Typography'
+export { default as Checkbox } from './inputs/checkbox/Checkbox'
 export { default as HeadingOne } from './typography/HeadingOne'
 export { default as HeadingTwo } from './typography/HeadingTwo'
 export { default as HeadingThree } from './typography/HeadingThree'
@@ -13,3 +14,4 @@ export { default as HeadingSix } from './typography/HeadingSix'
 export { default as BodyText } from './typography/BodyText'
 export { default as Link } from './typography/Link'
 export { default as Button } from './buttons/Button'
+export { default as Tag } from './labels/Tag'

src/inputs/checkbox/Checkbox.tsx

@@ -0,0 +1,34 @@
+import React, { ChangeEventHandler, FC, InputHTMLAttributes } from 'react'
+import '../../index.css'
+
+export interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    className?: string
+    onChange?: ChangeEventHandler,
+    children?: any
+    disabled?: boolean,
+    isChecked?: boolean
+}
+
+const Checkbox: FC<Props> = ({
+    className = '',
+    onChange,
+    children,
+    disabled = false,
+    isChecked = false
+}: Props) => {
+    return (
+        <label className="inline-flex items-center">
+            <input
+                className={` ${className} form-checkbox h-4 w-4`}
+                onChange={onChange}
+                type="checkbox"
+                disabled={disabled}
+                checked={isChecked}
+                data-testid="checkbox"
+            />
+            <span className="ml-2">{children}</span>
+        </label>
+    )
+}
+
+export default Checkbox;

src/inputs/checkbox/index.tsx

@@ -0,0 +1,5 @@
+import Checkbox from './Checkbox'
+
+export { Checkbox }
+
+export default { Checkbox }

src/inputs/datePicker/DatePicker.tsx

@@ -14,7 +14,7 @@ export interface Props {
 }
 
 
-const DatePicker: FC<Props> = ({ className, onChange, variant = "datePicker", format = "DD/MM/YYYY", value }: Props) => (
+const DatePicker: FC<Props> = ({ className='', onChange, variant = "datePicker", format = "DD/MM/YYYY", value }: Props) => (
     <Space
         className={`${className}`}
         direction="vertical"

src/inputs/dropdown/Dropdown.tsx

@@ -14,7 +14,7 @@ export interface Props {
     placeholder?: string
 }
 
-const Dropdown: FC<Props> = ({ className, children, onBlur, onChange, onFocus, onSearch }: Props) => (
+const Dropdown: FC<Props> = ({ className='', children, onBlur, onChange, onFocus, onSearch }: Props) => (
     <Select
         virtual={false}
         defaultValue="Select an Item"

src/inputs/index.tsx

@@ -2,8 +2,9 @@ import Input from './input/Input'
 import Dropdown, { Option } from './dropdown/Dropdown'
 import DatePicker from './datePicker/DatePicker'
 import TextArea from './textArea/TextArea'
+import Checkbox from './checkbox/Checkbox'
 
-export { Input, Dropdown, Option, DatePicker, TextArea }
+export { Input, Dropdown, Option, DatePicker, TextArea, Checkbox }
 
-export default { Input, Dropdown, Option, DatePicker, TextArea }
+export default { Input, Dropdown, Option, DatePicker, TextArea, Checkbox }
 

src/inputs/input/Input.tsx

@@ -24,7 +24,7 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
 // `
 
 const Input: FC<Props> = ({
-  className,
+  className='',
   onChange,
   variant = "text",
   ...rest

src/inputs/textArea/TextArea.tsx

@@ -8,14 +8,14 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 const TextArea: FC<Props> = ({
-    className,
+    className='',
     onChange,
     value,
     placeholder
 }: Props) => {
     return (
         <textarea
-            className={` ${className} border border-grey font-poppins  py-12 px-16 rounded-sm focus:outline-none `}
+            className={`${className} border border-grey font-poppins  py-12 px-16 rounded-sm focus:outline-none rounded-lg`}
             onChange={onChange}
             value={value}
             placeholder={placeholder}

src/labels/Tag.tsx

@@ -0,0 +1,64 @@
+import React, { FC } from 'react'
+import '../index.css'
+
+export interface Props {
+    className?: string
+    children?: any
+    variant: string,
+    count?: number
+    isCount?: boolean
+}
+
+const Tag: FC<Props> = ({
+    className = '',
+    children,
+    variant,
+    isCount = false,
+    count = 0
+}: Props) => {
+
+    const types: any = {
+        SuccessTag: {
+            backgroundColor: 'bg-green-300',
+            textUtils: 'text-white font-poppins rounded-md',
+        },
+        WarningTag: {
+            backgroundColor: 'bg-yellow-500',
+            textUtils: 'text-white font-poppins rounded-md',
+        },
+        DangerTag: {
+            backgroundColor: 'bg-red-300',
+            textUtils: 'text-white font-poppins rounded-md',
+        },
+        ActiveTag: {
+            backgroundColor: 'bg-green-300',
+            textUtils: 'text-white font-poppins rounded-md',
+        },
+        InactiveTag: {
+            borderColor: 'border border-solid border-red-200',
+            backgroundColor: 'bg-transparent',
+            textUtils: 'text-gray-300 font-poppins rounded-md',
+        },
+        UnknownTag: {
+            backgroundColor: 'bg-orange-400',
+            textUtils: 'text-gray-300 font-poppins rounded-full',
+        },
+        CountTag: {
+            backgroundColor: 'bg-red-200',
+            textUtils: 'text-white font-poppins rounded-lg',
+        }
+    }
+
+    const classNames: string = Object.values(types[variant]).join(' ')
+
+    return (
+        <div className={`${className} ${classNames} text-sm inline-flex items-center leading-sm px-3 py-1`}>
+            {isCount ? (
+                count
+            ) : (
+                children
+            )}
+        </div>
+    )
+}
+export default Tag;

src/labels/index.tsx

@@ -0,0 +1,5 @@
+import Tag from './Tag'
+
+export { Tag }
+
+export default { Tag }

src/typography/BodyText.tsx

@@ -6,7 +6,7 @@ export interface Props {
   children: any
 }
 
-const BodyText: FC<Props> = ({ children, className }: Props) => (
+const BodyText: FC<Props> = ({ children, className='' }: Props) => (
   <p className={` ${className} text-black text-base`}>{children}</p>
 )
 

src/typography/HeadingFive.tsx

@@ -6,7 +6,7 @@ interface Props {
   children: any
 }
 
-const HeadingFive: FC<Props> = ({ children, className }: Props) => (
+const HeadingFive: FC<Props> = ({ children, className='' }: Props) => (
   <h5 className={` ${className} text-2xl text-black font-poppins`}>
     {children}
   </h5>

src/typography/HeadingFour.tsx

@@ -5,7 +5,7 @@ interface Props {
     className: string
     children: any
 }
-const HeadingFour: FC<Props> = ({ children, className }: Props) => (
+const HeadingFour: FC<Props> = ({ children, className='' }: Props) => (
     <h4 className={` ${className} text-3xl text-black font-poppins`}>
         {children}
     </h4>

src/typography/HeadingOne.tsx

@@ -6,7 +6,7 @@ interface Props {
   children: any
 }
 
-const HeadingOne: FC<Props> = ({ children, className }: Props) => (
+const HeadingOne: FC<Props> = ({ children, className='' }: Props) => (
   <h1 className={` ${className} text-6xl text-black font-poppins`}>
     {children}
   </h1>

src/typography/HeadingSix.tsx

@@ -6,7 +6,7 @@ interface Props {
   children: any
 }
 
-const HeadingSix: FC<Props> = ({ children, className }: Props) => (
+const HeadingSix: FC<Props> = ({ children, className='' }: Props) => (
   <h6 className={` ${className} text-1xl text-black font-poppins`}>
     {children}
   </h6>

src/typography/HeadingThree.tsx

@@ -5,7 +5,7 @@ interface Props {
     className: string
     children: any
 }
-const HeadingThree: FC<Props> = ({ children, className }: Props) => (
+const HeadingThree: FC<Props> = ({ children, className='' }: Props) => (
     <h3 className={` ${className} text-4xl text-black font-poppins`}>
         {children}
     </h3>

src/typography/HeadingTwo.tsx

@@ -6,7 +6,7 @@ interface Props {
   children: any
 }
 
-const HeadingTwo: FC<Props> = ({ children, className }: Props) => (
+const HeadingTwo: FC<Props> = ({ children, className='' }: Props) => (
   <h2 className={` ${className} text-5xl text-black font-poppins`}>
     {children}
   </h2>

src/typography/Link.tsx

@@ -6,7 +6,7 @@ interface Props {
   children: any
   url: string
 }
-const Link: FC<Props> = ({ children, className, url }: Props) => (
+const Link: FC<Props> = ({ children, className='', url }: Props) => (
   <a
     href={url}
     className={` ${className} text-black font-poppins no-underline hover:underline hover:text-blue-400`}

src/typography/Typography.tsx

@@ -16,7 +16,7 @@ export interface Props {
 }
 const Typography: FC<Props> = ({
   variant,
-  className,
+  className='',
   children,
   href,
 }: Props) => {

stories/Inputs.stories.tsx → stories/inputs.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Input, Dropdown, DatePicker, TextArea } from '../src/inputs'
+import { Input, Dropdown, DatePicker, TextArea, Checkbox } from '../src/inputs'
 import { Option } from '../src/inputs/dropdown'
 export default {
   title: 'Input/Inputs',
@@ -11,6 +11,16 @@ function onChange(value: any) {
   console.log(`selected ${value}`)
 }
 
+function handleChange(isChecked: any) {
+  isChecked = !isChecked;
+  if ((document.getElementById('checkbox') as HTMLInputElement).checked) {
+    isChecked = !isChecked;
+    console.log("uchecked")
+  } else {
+    console.log("checked");
+  }
+}
+
 function onBlur() {
   console.log('blur')
 }
@@ -25,17 +35,17 @@ function onSearch(val: any) {
 export const Default = () =>
   <ul>
     <li>
-      <li>
+      <p>
         <b>Text Input</b>
-      </li>
+      </p>
       <Input
         placeholder="Type here"
         onChange={onChange} />
     </li><br />
     <li>
-      <li>
+      <p>
         <b>Number Input</b>
-      </li>
+      </p>
       <Input
         onChange={onChange}
         variant="number"
@@ -63,17 +73,17 @@ export const Dropdown_Menu = () => (
 export const Date_Picker = () => (
   <ul>
     <li>
-      <li>
+      <p>
         <b>Date Picker</b>
-      </li>
+      </p>
       <DatePicker
         onChange={onChange}>
       </DatePicker>
     </li><br />
     <li>
-      <li>
+      <p>
         <b>Range Picker</b>
-      </li>
+      </p>
       <DatePicker
         onChange={onChange}
         variant="rangePicker">
@@ -89,3 +99,38 @@ export const Text_Area = () =>
       placeholder="Enter Text here.." />
   </div>
 
+export const CheckBox = () =>
+  <ul>
+    <li>
+      <p>
+        <b>Unchecked</b>
+      </p>
+      <Checkbox
+        onChange={handleChange}
+      >
+        Placeholder
+    </Checkbox>
+    </li><br />
+    <li>
+      <p>
+        <b>Checked</b>
+      </p>
+      <Checkbox
+        onChange={handleChange}
+        isChecked={true}>
+        Placeholder
+    </Checkbox>
+    </li><br />
+    <li>
+      <p>
+        <b>Disabled</b>
+      </p>
+      <Checkbox
+        disabled={true}>
+        Placeholder
+    </Checkbox>
+    </li>
+  </ul>
+
+
+