From b9d8a88f54bd0b4a533dd5b32b32e504a819cc5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 11:10:04 +0200 Subject: [PATCH 01/34] Creates the Checkbox Componet. --- src/inputs/checkbox/Checkbox.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/inputs/checkbox/Checkbox.tsx diff --git a/src/inputs/checkbox/Checkbox.tsx b/src/inputs/checkbox/Checkbox.tsx new file mode 100644 index 0000000..e69de29 From 195fd340fb1f8fe32cde6e45317b099fcb2a8925 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 11:14:55 +0200 Subject: [PATCH 02/34] Implements the Checkbox Component. --- src/inputs/checkbox/Checkbox.tsx | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/inputs/checkbox/Checkbox.tsx b/src/inputs/checkbox/Checkbox.tsx index e69de29..bbdd02a 100644 --- a/src/inputs/checkbox/Checkbox.tsx +++ b/src/inputs/checkbox/Checkbox.tsx @@ -0,0 +1,30 @@ +import React, { FC, InputHTMLAttributes } from 'react' +import '../../index.css' + +export interface Props extends InputHTMLAttributes { + className?: string + value?: string + name?: string + id?: string + children?: any + variant: string +} + +const Checkbox: FC = ({ + className, + variant, +}: Props) => { + return ( +
+ +
+ + ) +} + +export default Checkbox; \ No newline at end of file From c471b7dc633cc71b865e3c7a732634c96f81c60a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 11:29:25 +0200 Subject: [PATCH 03/34] Exports the Checkbox Component. --- src/index.tsx | 1 + src/inputs/checkbox/index.tsx | 5 +++++ src/inputs/index.tsx | 5 +++-- 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 src/inputs/checkbox/index.tsx diff --git a/src/index.tsx b/src/index.tsx index a52139f..177fc62 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,6 +3,7 @@ export { default as Dropdown } from './inputs/dropdown/Dropdown' export { default as Option } from './inputs/dropdown/Dropdown' export { default as DatePickerAPI } from './inputs/datePicker/DatePickerAPI' export { default as TextArea } from './inputs/textArea/TextArea' +export { default as Checkbox } from './inputs/checkbox/Checkbox' export { default as Typography } from './typography/Typography' export { default as HeadingOne } from './typography/HeadingOne' diff --git a/src/inputs/checkbox/index.tsx b/src/inputs/checkbox/index.tsx new file mode 100644 index 0000000..696cfda --- /dev/null +++ b/src/inputs/checkbox/index.tsx @@ -0,0 +1,5 @@ +import Checkbox from './Checkbox' + +export { Checkbox } + +export default { Checkbox } \ No newline at end of file diff --git a/src/inputs/index.tsx b/src/inputs/index.tsx index b59d082..27fe1db 100644 --- a/src/inputs/index.tsx +++ b/src/inputs/index.tsx @@ -2,8 +2,9 @@ import Input from './input/Input' import Dropdown, { Option } from './dropdown/Dropdown' import DatePickerAPI from './datePicker/DatePickerAPI' import TextArea from './textArea/TextArea' +import Checkbox from './checkbox/Checkbox' -export { Input, Dropdown, Option, DatePickerAPI, TextArea } +export { Input, Dropdown, Option, DatePickerAPI, TextArea, Checkbox } -export default { Input, Dropdown, Option, DatePickerAPI, TextArea } +export default { Input, Dropdown, Option, DatePickerAPI, TextArea, Checkbox } From c7d40676024caf1004acdadabfd5a09a445a7e5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 11:31:22 +0200 Subject: [PATCH 04/34] Creates a Checkbox story in Storybook. --- src/inputs/checkbox/Checkbox.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/inputs/checkbox/Checkbox.tsx b/src/inputs/checkbox/Checkbox.tsx index bbdd02a..407239b 100644 --- a/src/inputs/checkbox/Checkbox.tsx +++ b/src/inputs/checkbox/Checkbox.tsx @@ -13,17 +13,18 @@ export interface Props extends InputHTMLAttributes { const Checkbox: FC = ({ className, variant, + children, + ...rest }: Props) => { return ( -
- -
- + ) } From 9258b0899deb916925d7d7fd7472894862a2d679 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 11:32:14 +0200 Subject: [PATCH 05/34] Modifies the Checkbox story. --- stories/Inputs.stories.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/stories/Inputs.stories.tsx b/stories/Inputs.stories.tsx index a1919e1..3c3fa7a 100644 --- a/stories/Inputs.stories.tsx +++ b/stories/Inputs.stories.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Input, Dropdown, DatePickerAPI, TextArea } from '../src/inputs' +import { Input, Dropdown, DatePickerAPI, TextArea, Checkbox } from '../src/inputs' import { Option } from '../src/inputs/dropdown' export default { title: 'Input/Inputs', @@ -81,3 +81,9 @@ export const Text_Area = () => placeholder="Enter Text here.." /> +export const CheckBox = () => + + + From fc74b25d4de530d8d6ac20fcd96e48abccc11e4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 12:06:56 +0200 Subject: [PATCH 06/34] Adds the Checkbox states to Storybook. --- stories/Inputs.stories.tsx | 35 ++++++++++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/stories/Inputs.stories.tsx b/stories/Inputs.stories.tsx index 3c3fa7a..5b9b683 100644 --- a/stories/Inputs.stories.tsx +++ b/stories/Inputs.stories.tsx @@ -11,6 +11,11 @@ function onChange(value: any) { console.log(`selected ${value}`) } +function handleChange(isChecked: boolean) { + console.log(`selected ${isChecked}`) +} + + function onBlur() { console.log('blur') } @@ -82,8 +87,32 @@ export const Text_Area = () => export const CheckBox = () => - +
    +
  • + + Placeholder + +

    • +
  • + + Placeholder + +

    • +
  • + + Placeholder + +
    • +
+ From fd82472a479f5cb13c3659b2bb240f3b0d73b2e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 12:07:20 +0200 Subject: [PATCH 07/34] Adds state to checkbox Component. --- src/inputs/checkbox/Checkbox.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/inputs/checkbox/Checkbox.tsx b/src/inputs/checkbox/Checkbox.tsx index 407239b..ec4b31a 100644 --- a/src/inputs/checkbox/Checkbox.tsx +++ b/src/inputs/checkbox/Checkbox.tsx @@ -3,27 +3,31 @@ import '../../index.css' export interface Props extends InputHTMLAttributes { className?: string - value?: string - name?: string - id?: string + onChange: any, children?: any variant: string + disabled?: boolean, + isChecked?: boolean } const Checkbox: FC = ({ className, + onChange, variant, children, - ...rest + disabled=false, + isChecked=false }: Props) => { return ( ) } From b7de7e21eb4feeeb1fbe9ca4faf3bdd7d93f7d81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 13:00:17 +0200 Subject: [PATCH 08/34] Adds Captions to the Checkbox Stories. --- stories/Inputs.stories.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/stories/Inputs.stories.tsx b/stories/Inputs.stories.tsx index f533b4b..f8f2b0f 100644 --- a/stories/Inputs.stories.tsx +++ b/stories/Inputs.stories.tsx @@ -89,6 +89,9 @@ export const Text_Area = () => export const CheckBox = () =>
  • +
  • + Unchecked +

  • +
  • + Checked +

  • +
  • + Disabled +
    • Date: Thu, 8 Apr 2021 13:47:19 +0200 Subject: [PATCH 09/34] Fixes the
  • descendent issue. --- stories/Inputs.stories.tsx | 33 ++++++++++++++++----------------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/stories/Inputs.stories.tsx b/stories/Inputs.stories.tsx index 404a07a..d65a688 100644 --- a/stories/Inputs.stories.tsx +++ b/stories/Inputs.stories.tsx @@ -30,17 +30,17 @@ function onSearch(val: any) { export const Default = () =>
    • -
    • +

      Text Input -

      • +


    • -
    • +

      Number Input -

      • +

      ( export const Date_Picker = () => (
      • -
      • +

        Date Picker -

        • +


      • -
      • +

        Range Picker -

        • +

        @@ -97,9 +97,9 @@ export const Text_Area = () => export const CheckBox = () =>
        • -
        • +

          Unchecked -

          • +


        • -
        • - Checked -
          • +

          + Checked +

          + isChecked={true}> Placeholder
        • -
        • +

          Disabled -

          • +

          Placeholder From 49dc11c6d2618c3e55be286b2bfc5b10449d73ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 13:47:35 +0200 Subject: [PATCH 10/34] Fixes the Checked state. --- src/inputs/checkbox/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/inputs/checkbox/Checkbox.tsx b/src/inputs/checkbox/Checkbox.tsx index ec4b31a..3a7f20a 100644 --- a/src/inputs/checkbox/Checkbox.tsx +++ b/src/inputs/checkbox/Checkbox.tsx @@ -3,7 +3,7 @@ import '../../index.css' export interface Props extends InputHTMLAttributes { className?: string - onChange: any, + onChange?: any, children?: any variant: string disabled?: boolean, From 50cbed3d8876b06fd6ff3c4fee1ac309774a1f74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 13:49:18 +0200 Subject: [PATCH 11/34] Fixes the clip-rule and fill-rule issue in LoadingSpinner. --- assets/icons/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/icons/index.tsx b/assets/icons/index.tsx index 1b822c3..797cbc2 100644 --- a/assets/icons/index.tsx +++ b/assets/icons/index.tsx @@ -9,8 +9,8 @@ const LoadingSpinner: FC = () => ( xmlns="http://www.w3.org/2000/svg" > From db96cc0bc8a6b1f5c8dea4bfb981e81310803f63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 15:12:04 +0200 Subject: [PATCH 12/34] Adds handleChangeFunction to Checkbox --- stories/Inputs.stories.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/stories/Inputs.stories.tsx b/stories/Inputs.stories.tsx index d65a688..92beb1d 100644 --- a/stories/Inputs.stories.tsx +++ b/stories/Inputs.stories.tsx @@ -11,11 +11,16 @@ function onChange(value: any) { console.log(`selected ${value}`) } -function handleChange(isChecked: boolean) { - console.log(`selected ${isChecked}`) +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') } From 706d63fd9dd1afaf7b0bc06fce88cc8a742ae782 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 15:12:28 +0200 Subject: [PATCH 13/34] Adds an id to Checkbox for Testing. --- src/inputs/checkbox/Checkbox.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/inputs/checkbox/Checkbox.tsx b/src/inputs/checkbox/Checkbox.tsx index 3a7f20a..4529c8b 100644 --- a/src/inputs/checkbox/Checkbox.tsx +++ b/src/inputs/checkbox/Checkbox.tsx @@ -26,6 +26,7 @@ const Checkbox: FC = ({ type={variant} disabled={disabled} checked={isChecked} + id="checkbox" /> {children} From 82fed2d6197398c0df606e15790e40532aa3b1ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 15:25:08 +0200 Subject: [PATCH 14/34] Export Checkbox. --- src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.tsx b/src/index.tsx index 2e4be28..846a742 100644 --- a/src/index.tsx +++ b/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' From 4ba4063f4e43c1a6827c8b8175cc6e410ea15ae9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 15:26:44 +0200 Subject: [PATCH 15/34] Tests the Checkbox component for the correct classname. --- test/input.test.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/test/input.test.tsx b/test/input.test.tsx index b2e6e3e..a658ea9 100644 --- a/test/input.test.tsx +++ b/test/input.test.tsx @@ -1,7 +1,7 @@ import React from 'react' import { render, fireEvent } from '@testing-library/react' import '@testing-library/jest-dom/extend-expect' -import { Input, Dropdown, DatePicker, TextArea } from '../src/index'; +import { Input, Dropdown, DatePicker, TextArea, Checkbox } from '../src/index'; import { Option } from '../src/inputs/dropdown' function onChange(value: any) { @@ -174,4 +174,16 @@ describe('Input Components', () => { ) expect(queryByPlaceholderText(testPH)) }) + + it('[Checkbox] - Checks if it Returns the correct classname', () => { + const testCheckboxClass = "form-checkbox h-4 w-4" + const { container, getByTestId } = render( + + + ) + fireEvent.click(getByTestId("checkbox")); + expect(container.getElementsByClassName(testCheckboxClass)) + }) }) \ No newline at end of file From a1870c493873f8840448e7d80454ad0553f7aed8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 15:29:20 +0200 Subject: [PATCH 16/34] Adds a data-testid to checkbox for testing. --- src/inputs/checkbox/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/inputs/checkbox/Checkbox.tsx b/src/inputs/checkbox/Checkbox.tsx index 4529c8b..9d3623a 100644 --- a/src/inputs/checkbox/Checkbox.tsx +++ b/src/inputs/checkbox/Checkbox.tsx @@ -26,7 +26,7 @@ const Checkbox: FC = ({ type={variant} disabled={disabled} checked={isChecked} - id="checkbox" + data-testid="checkbox" /> {children} From 45c4c3c1635b5fc69188b746dadc18fc4f893c1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 15:36:08 +0200 Subject: [PATCH 17/34] Checks the Checkbox component for the correct toggle state. --- test/input.test.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/test/input.test.tsx b/test/input.test.tsx index a658ea9..9f4e06c 100644 --- a/test/input.test.tsx +++ b/test/input.test.tsx @@ -175,9 +175,9 @@ describe('Input Components', () => { expect(queryByPlaceholderText(testPH)) }) - it('[Checkbox] - Checks if it Returns the correct classname', () => { + it('[Checkbox] - Checks if it Returns the correct classname && tests for correct state', () => { const testCheckboxClass = "form-checkbox h-4 w-4" - const { container, getByTestId } = render( + const { container, getByTestId, rerender } = render( @@ -185,5 +185,18 @@ describe('Input Components', () => { ) fireEvent.click(getByTestId("checkbox")); expect(container.getElementsByClassName(testCheckboxClass)) + + //Test for the correct toggle state + const toggleState: boolean = true + const checkboxState = getByTestId("checkbox") as HTMLInputElement; + rerender( + + + ) + fireEvent.change(checkboxState, { target: { value: toggleState } }); + expect(checkboxState).toBe(true); }) }) \ No newline at end of file From 32dda85985105330cb2878580b7c3688f1f7c959 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 15:38:07 +0200 Subject: [PATCH 18/34] Rectifies the toggle Test for Checkbox. --- test/input.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/input.test.tsx b/test/input.test.tsx index 9f4e06c..f96cba9 100644 --- a/test/input.test.tsx +++ b/test/input.test.tsx @@ -197,6 +197,6 @@ describe('Input Components', () => { ) fireEvent.change(checkboxState, { target: { value: toggleState } }); - expect(checkboxState).toBe(true); + expect(checkboxState).toBeValid(); }) }) \ No newline at end of file From 34d39abf631a5ec2b08bb82977736199cc27c604 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Thu, 8 Apr 2021 16:46:30 +0200 Subject: [PATCH 19/34] Adds an empty string to className as default. --- src/buttons/Button.tsx | 2 +- src/inputs/checkbox/Checkbox.tsx | 2 +- src/inputs/datePicker/DatePicker.tsx | 2 +- src/inputs/dropdown/Dropdown.tsx | 2 +- src/inputs/input/Input.tsx | 2 +- src/inputs/textArea/TextArea.tsx | 2 +- src/typography/BodyText.tsx | 2 +- src/typography/HeadingFive.tsx | 2 +- src/typography/HeadingFour.tsx | 2 +- src/typography/HeadingOne.tsx | 2 +- src/typography/HeadingSix.tsx | 2 +- src/typography/HeadingThree.tsx | 2 +- src/typography/HeadingTwo.tsx | 2 +- src/typography/Link.tsx | 2 +- src/typography/Typography.tsx | 2 +- 15 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/buttons/Button.tsx b/src/buttons/Button.tsx index 321da6e..f251203 100644 --- a/src/buttons/Button.tsx +++ b/src/buttons/Button.tsx @@ -23,7 +23,7 @@ const ImageLoading = styled.div` ` const Button: FC = ({ - className, + className='', onClick, children, disabled, diff --git a/src/inputs/checkbox/Checkbox.tsx b/src/inputs/checkbox/Checkbox.tsx index 9d3623a..73a4ca5 100644 --- a/src/inputs/checkbox/Checkbox.tsx +++ b/src/inputs/checkbox/Checkbox.tsx @@ -11,7 +11,7 @@ export interface Props extends InputHTMLAttributes { } const Checkbox: FC = ({ - className, + className='', onChange, variant, children, diff --git a/src/inputs/datePicker/DatePicker.tsx b/src/inputs/datePicker/DatePicker.tsx index 62eb9b1..23bd6c3 100644 --- a/src/inputs/datePicker/DatePicker.tsx +++ b/src/inputs/datePicker/DatePicker.tsx @@ -14,7 +14,7 @@ export interface Props { } -const DatePicker: FC = ({ className, onChange, variant = "datePicker", format = "DD/MM/YYYY", value }: Props) => ( +const DatePicker: FC = ({ className='', onChange, variant = "datePicker", format = "DD/MM/YYYY", value }: Props) => ( = ({ className, children, onBlur, onChange, onFocus, onSearch }: Props) => ( +const Dropdown: FC = ({ className='', children, onBlur, onChange, onFocus, onSearch }: Props) => ( Unchecked

          Placeholder @@ -117,7 +116,6 @@ export const CheckBox = () => Checked

          Placeholder @@ -128,7 +126,6 @@ export const CheckBox = () => Disabled

          Placeholder diff --git a/test/input.test.tsx b/test/input.test.tsx index f96cba9..4027b60 100644 --- a/test/input.test.tsx +++ b/test/input.test.tsx @@ -179,8 +179,7 @@ describe('Input Components', () => { const testCheckboxClass = "form-checkbox h-4 w-4" const { container, getByTestId, rerender } = render( + onChange={onChange}> ) fireEvent.click(getByTestId("checkbox")); @@ -192,7 +191,6 @@ describe('Input Components', () => { rerender( ) From b273c6a5ea18ba66b9e8b552da46ba564225e72c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CVesta?= Date: Fri, 9 Apr 2021 10:48:39 +0200 Subject: [PATCH 21/34] Adds rounded adges to Text area. --- src/inputs/checkbox/Checkbox.tsx | 4 ++-- src/inputs/textArea/TextArea.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/inputs/checkbox/Checkbox.tsx b/src/inputs/checkbox/Checkbox.tsx index eeaccc9..2be6958 100644 --- a/src/inputs/checkbox/Checkbox.tsx +++ b/src/inputs/checkbox/Checkbox.tsx @@ -1,9 +1,9 @@ -import React, { FC, InputHTMLAttributes } from 'react' +import React, { ChangeEventHandler, FC, InputHTMLAttributes } from 'react' import '../../index.css' export interface Props extends InputHTMLAttributes { className?: string - onChange?: any, + onChange?: ChangeEventHandler, children?: any disabled?: boolean, isChecked?: boolean diff --git a/src/inputs/textArea/TextArea.tsx b/src/inputs/textArea/TextArea.tsx index d7357c6..66ca2d1 100644 --- a/src/inputs/textArea/TextArea.tsx +++ b/src/inputs/textArea/TextArea.tsx @@ -15,7 +15,7 @@ const TextArea: FC = ({ }: Props) => { return (