From 53584b2542ec82f4db656d3dc788c89fc243aa04 Mon Sep 17 00:00:00 2001 From: rayyan224 Date: Wed, 19 Jan 2022 20:56:28 -0500 Subject: [PATCH 1/6] Bug Fix for Button styles --- .idea/.gitignore | 8 ++++++ .idea/inspectionProfiles/Project_Default.xml | 6 +++++ .idea/misc.xml | 6 +++++ .idea/modules.xml | 8 ++++++ .idea/runConfigurations.xml | 10 +++++++ .idea/vcs.xml | 6 +++++ .idea/web3uikit.iml | 9 +++++++ src/components/Button/Button.stories.tsx | 11 ++++++++ src/components/Button/Button.test.tsx | 28 ++++++++++++++++++++ src/components/Button/Button.tsx | 2 ++ src/components/Button/types.ts | 6 +++++ src/components/Form/Form.tsx | 4 +++ 12 files changed, 104 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/runConfigurations.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/web3uikit.iml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 000000000..73f69e095 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 000000000..03d9549ea --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 000000000..639900d13 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 000000000..15042d422 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml new file mode 100644 index 000000000..797acea53 --- /dev/null +++ b/.idea/runConfigurations.xml @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 000000000..35eb1ddfb --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/web3uikit.iml b/.idea/web3uikit.iml new file mode 100644 index 000000000..d6ebd4805 --- /dev/null +++ b/.idea/web3uikit.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index 48a14c809..0e8cabd40 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -401,3 +401,14 @@ Translucent.args = { iconLayout: 'leading', size: 'large', }; + +export const CustomStyle = Template.bind({}); +CustomStyle.args = { + id: 'test-button-primary-style', + text: 'Button With Custom Styling', + theme: 'primary', + type: 'button', + buttonStyle: { + width: "100%", + } +}; diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx index 6f1b58fc1..55d54cc39 100644 --- a/src/components/Button/Button.test.tsx +++ b/src/components/Button/Button.test.tsx @@ -21,6 +21,7 @@ const { ColoredGreen, ColoredYellow, ColoredBlue, + CustomStyle } = composeStories(stories); let container: HTMLDivElement; @@ -514,3 +515,30 @@ describe('Button - ColoredYellow', () => { expect(testClickEvent).toHaveBeenCalled(); }); }); + +describe('Button - Primary with custom styling', () => { + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + ReactDOM.render(, container); + }); + afterEach(() => { + document.body.removeChild(container); + container.remove(); + }); + + it('renders PrimaryLarge button with correct styles', () => { + const element = container.querySelector( + `[data-testid="${buttonTestId}"]`, + ); + const styles = element && getComputedStyle(element); + const colorHex = styles && RGBToHex(styles.color).toUpperCase(); + expect(colorHex).toBe(color.white); + const bgColorHex = + styles && RGBToHex(styles.backgroundColor).toUpperCase(); + expect(bgColorHex).toBe(color.green); + expect(styles?.borderWidth).toBe('2px'); + expect(styles?.fontSize).toBe('14px'); + expect(styles?.width).toBe('100%'); + }); +}); diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 20a81af36..4be07bd5e 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -14,6 +14,7 @@ const Button: React.FC = ({ text = 'click', theme, type = 'button', + buttonStyle = {} }: ButtonProps) => { return ( = ({ size={size} theme={theme} type={type} + style={buttonStyle} > {icon && } {text} diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts index 2ba6dd2e6..a4696140d 100644 --- a/src/components/Button/types.ts +++ b/src/components/Button/types.ts @@ -51,4 +51,10 @@ export interface ButtonProps { * set an icon position, or maybe show only the icon */ iconLayout?: 'leading' | 'trailing' | 'icon-only'; + + /** + * Apply custom styles to button + * Will override all base styles + */ + buttonStyle?: React.CSSProperties; } diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index 811780a9a..bf1bf4a89 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -171,6 +171,10 @@ const Form: React.FC = ({ data, id, title, onSubmit }) => { theme="primary" type="submit" onClick={(e) => e.preventDefault} + buttonStyle={{ + width: "100%", + marginTop: "30px" + }} > Submit From 589ca786b2792c34dd2640fd77a8be2cb743e196 Mon Sep 17 00:00:00 2001 From: rayyan224 Date: Wed, 19 Jan 2022 20:58:06 -0500 Subject: [PATCH 2/6] Removed ide specifc folders --- .idea/.gitignore | 8 -------- .idea/inspectionProfiles/Project_Default.xml | 6 ------ .idea/misc.xml | 6 ------ .idea/modules.xml | 8 -------- .idea/runConfigurations.xml | 10 ---------- .idea/vcs.xml | 6 ------ .idea/web3uikit.iml | 9 --------- 7 files changed, 53 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/inspectionProfiles/Project_Default.xml delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/runConfigurations.xml delete mode 100644 .idea/vcs.xml delete mode 100644 .idea/web3uikit.iml diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index 73f69e095..000000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Datasource local storage ignored files -/dataSources/ -/dataSources.local.xml -# Editor-based HTTP Client requests -/httpRequests/ diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml deleted file mode 100644 index 03d9549ea..000000000 --- a/.idea/inspectionProfiles/Project_Default.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 639900d13..000000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 15042d422..000000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml deleted file mode 100644 index 797acea53..000000000 --- a/.idea/runConfigurations.xml +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 35eb1ddfb..000000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/web3uikit.iml b/.idea/web3uikit.iml deleted file mode 100644 index d6ebd4805..000000000 --- a/.idea/web3uikit.iml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file From e5b56d75a39bccafdeaa0acdc86d89b32ddce425 Mon Sep 17 00:00:00 2001 From: rayyan224 Date: Wed, 19 Jan 2022 23:47:05 -0500 Subject: [PATCH 3/6] Adding Custom submit text forget it :( --- src/components/Form/Form.stories.tsx | 43 ++++++++++++++++++++++++++ src/components/Form/Form.test.tsx | 45 ++++++++++++++++++++++++++-- src/components/Form/Form.tsx | 17 +++++++---- src/components/Form/types.ts | 5 ++++ 4 files changed, 102 insertions(+), 8 deletions(-) diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx index 2747781eb..f49c93e7b 100644 --- a/src/components/Form/Form.stories.tsx +++ b/src/components/Form/Form.stories.tsx @@ -13,6 +13,7 @@ const Template: ComponentStory = (args) =>
; export const DemoForm = Template.bind({}); DemoForm.args = { title: 'Test form', + data: [ { name: 'first name', @@ -85,3 +86,45 @@ DemoForm.args = { }, ], }; + +export const CustomSubmitText = Template.bind({}); +CustomSubmitText.args = { + title: 'Custom Form', + customSubmitText: '... Something cool', + data: [ + { + name: 'first name', + type: 'text', + value: '', + }, + { + name: 'your email', + type: 'email', + value: '', + validation: { + required: true, + regExp: validateRegExp.email, + }, + }, + { + name: 'your digits', + type: 'tel', + value: '', + validation: { + required: true, + regExp: validateRegExp.telephoneNumber, + regExpInvalidMessage: 'Who ya gonna call?', + }, + }, + { + name: 'your password', + type: 'password', + value: '', + validation: { + required: true, + characterMinLength: 6, + characterMaxLength: 20, + }, + }, + ], +}; diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx index 70ea31dc2..08407d388 100644 --- a/src/components/Form/Form.test.tsx +++ b/src/components/Form/Form.test.tsx @@ -2,9 +2,9 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { composeStories } from '@storybook/testing-react'; import * as stories from './Form.stories'; -// import { fireEvent } from "@testing-library/react"; +import { render, screen } from '@testing-library/react'; -const { DemoForm } = composeStories(stories); +const { DemoForm, CustomSubmitText } = composeStories(stories); let container: HTMLDivElement; const formTestID = 'test-form'; const FormTestTitleID = 'test-form-title'; @@ -43,3 +43,44 @@ describe('Form', () => { expect(elements.length).toBe(testData?.length); }); }); + +describe('Form', () => { + const testTitle = CustomSubmitText.args?.title; + const testData = CustomSubmitText.args?.data; + const customText = CustomSubmitText.args?.customSubmitText; + + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + ReactDOM.render(, container); + }); + afterEach(() => { + document.body.removeChild(container); + container.remove(); + }); + + it('renders the component', () => { + const element: HTMLFormElement | null = container.querySelector( + `[data-testid="${formTestID}"]`, + ); + expect(element).not.toBeNull(); + }); + it('renders the title', () => { + const element: HTMLHeadingElement | null = container.querySelector( + `[data-testid="${FormTestTitleID}"]`, + ); + expect(element).not.toBeNull(); + expect(element?.textContent).toBe(testTitle); + }); + it('renders the correct amount of inputs from the data', () => { + const elements = container.querySelectorAll( + `[data-testclass="form-ele"]`, + ); + expect(elements.length).toBe(testData?.length); + }); + it('renders custom text', () => { + render(); + const element = screen.getAllByText(`${customText}`); + expect(element).toBeDefined(); + }); +}); diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index bf1bf4a89..5341a299c 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -7,7 +7,13 @@ import { Radios } from '../Radios'; import { TextArea } from '../TextArea'; import { H3Styled, H4Styled, FormStyled } from './Form.styles'; -const Form: React.FC = ({ data, id, title, onSubmit }) => { +const Form: React.FC = ({ + data, + id, + title, + onSubmit, + customSubmitText = 'Submit', +}) => { const formSubmitted = (event: React.SyntheticEvent) => { event.preventDefault(); event.stopPropagation(); @@ -172,12 +178,11 @@ const Form: React.FC = ({ data, id, title, onSubmit }) => { type="submit" onClick={(e) => e.preventDefault} buttonStyle={{ - width: "100%", - marginTop: "30px" + width: '100%', + marginTop: '30px', }} - > - Submit - + text={customSubmitText} + /> ); }; diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts index baae84751..b9566dac5 100644 --- a/src/components/Form/types.ts +++ b/src/components/Form/types.ts @@ -16,6 +16,11 @@ export interface FormProps { */ id: string; + /** + *Text, to show for the submit button + */ + customSubmitText: string; + /** * when the form passes validation the data is returned * { id: string, data: [{inputName: string; inputResult: string[] | string;}]} From a0d58935801ba0b39a95ff774d7c18a413763928 Mon Sep 17 00:00:00 2001 From: rayyan224 Date: Wed, 19 Jan 2022 23:48:25 -0500 Subject: [PATCH 4/6] Pushing changes that I forgot to save --- src/components/Form/Form.stories.tsx | 1 - src/components/Form/types.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx index f49c93e7b..d411ccccf 100644 --- a/src/components/Form/Form.stories.tsx +++ b/src/components/Form/Form.stories.tsx @@ -13,7 +13,6 @@ const Template: ComponentStory = (args) => ; export const DemoForm = Template.bind({}); DemoForm.args = { title: 'Test form', - data: [ { name: 'first name', diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts index b9566dac5..dcdae8e7e 100644 --- a/src/components/Form/types.ts +++ b/src/components/Form/types.ts @@ -17,7 +17,7 @@ export interface FormProps { id: string; /** - *Text, to show for the submit button + * The text that is to be shown in the submit button */ customSubmitText: string; From b2498e35e4cc35f057cb1f5b6d7ab0be4f16ffcc Mon Sep 17 00:00:00 2001 From: rayyan224 Date: Thu, 20 Jan 2022 23:43:03 -0500 Subject: [PATCH 5/6] Addded bakground to table, and aligned no Data custom prop to the center --- src/components/Table/Table.styles.ts | 1 + src/components/Table/Table.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Table/Table.styles.ts b/src/components/Table/Table.styles.ts index 8fcd114e4..db3de9d0e 100644 --- a/src/components/Table/Table.styles.ts +++ b/src/components/Table/Table.styles.ts @@ -14,6 +14,7 @@ export const TableParent = styled.div` box-shadow: 0 4px 10px rgba(48, 71, 105, 0.1); display: flex; flex-direction: column; + background-color: white; `; export const NoData = styled.div` diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index a91db852f..2a7f742be 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -82,7 +82,7 @@ const Table: React.FC = ({ const RenderNoData = (): JSX.Element => { if (customNoDataComponent) { - return <>{customNoDataComponent}; + return {customNoDataComponent}; } return ( From 31730876acc34123130239f8d5dd4e1b090b85d9 Mon Sep 17 00:00:00 2001 From: rayyan224 Date: Fri, 21 Jan 2022 01:30:37 -0500 Subject: [PATCH 6/6] Made Loading component for kit --- src/components/Loading/Loading.stories.tsx | 27 ++++++++++++++++ src/components/Loading/Loading.styles.tsx | 33 +++++++++++++++++++ src/components/Loading/Loading.test.tsx | 37 ++++++++++++++++++++++ src/components/Loading/Loading.tsx | 23 ++++++++++++++ src/components/Loading/index.ts | 2 ++ src/components/Loading/types.ts | 10 ++++++ src/index.ts | 6 ++-- src/utils/HexToRgb.ts | 11 +++++++ 8 files changed, 146 insertions(+), 3 deletions(-) create mode 100644 src/components/Loading/Loading.stories.tsx create mode 100644 src/components/Loading/Loading.styles.tsx create mode 100644 src/components/Loading/Loading.test.tsx create mode 100644 src/components/Loading/Loading.tsx create mode 100644 src/components/Loading/index.ts create mode 100644 src/components/Loading/types.ts create mode 100644 src/utils/HexToRgb.ts diff --git a/src/components/Loading/Loading.stories.tsx b/src/components/Loading/Loading.stories.tsx new file mode 100644 index 000000000..36d202185 --- /dev/null +++ b/src/components/Loading/Loading.stories.tsx @@ -0,0 +1,27 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import React from 'react'; +import color from '../../styles/colors'; +import Loading from './Loading'; + +export default { + title: 'UI/Loading', + component: Loading, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Spinner = Template.bind({}); +Spinner.args = {}; + +export const CustomSizeSpinner = Template.bind({}); +CustomSizeSpinner.args = { + size: 90, +}; + +export const CustomRingColors = Template.bind({}); +CustomRingColors.args = { + ringColor: color.green, + ballColor: color.yellowDark, +}; diff --git a/src/components/Loading/Loading.styles.tsx b/src/components/Loading/Loading.styles.tsx new file mode 100644 index 000000000..4aa45dce1 --- /dev/null +++ b/src/components/Loading/Loading.styles.tsx @@ -0,0 +1,33 @@ +import styled, { keyframes } from 'styled-components'; +import { ILoadingProps } from './types'; + +const rotate = keyframes` + 0%{ + transform: rotate(0deg); + } + 100%{ + transform: rotate(360deg); + } +`; + +export const StyledSpinnerDiv = styled.div` + width: ${(props) => props.size}px; + height: ${(props) => props.size}px; + border: 3px solid + rgba(${(props) => props.ringColor && props.ringColor}, 0.5); + transform: translate(-50%, -50%); + border-radius: 50%; + animation: ${rotate} 1.5s linear infinite; + :before { + content: ''; + position: absolute; + top: -15%; + left: 50%; + background: rgb(${(props) => props.ballColor && props.ballColor}); + width: 25%; + height: 25%; + max-height: 40px; + max-width: 40px; + border-radius: 50%; + } +`; diff --git a/src/components/Loading/Loading.test.tsx b/src/components/Loading/Loading.test.tsx new file mode 100644 index 000000000..0b7e264c4 --- /dev/null +++ b/src/components/Loading/Loading.test.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { composeStories } from '@storybook/testing-react'; +import * as stories from './Loading.stories'; +import { render, screen } from '@testing-library/react'; + +const { Spinner, CustomSizeSpinner, CustomRingColors } = + composeStories(stories); + +describe('Spinner - DefaultSpinner', () => { + it('Should render', () => { + render(); + const element = screen.getAllByRole('spinner'); + expect(element).toBeDefined(); + }); +}); + +describe('Spinner - Customized spinner', () => { + const size = CustomSizeSpinner?.args?.size; + it('Should render', () => { + render(); + const element = screen.getAllByRole('spinner'); + expect(element).toBeDefined(); + }); + it('Should render different size', () => { + render(); + const element = screen.getByTestId(`${size}`); + expect(element).toBeDefined(); + }); +}); + +describe('Spinner - Customized colors spinner', () => { + it('Should render', () => { + render(); + const element = screen.getAllByRole('spinner'); + expect(element).toBeDefined(); + }); +}); diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx new file mode 100644 index 000000000..683e0d006 --- /dev/null +++ b/src/components/Loading/Loading.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import color from '../../styles/colors'; +import hexToRgb from '../../utils/HexToRgb'; +import { StyledSpinnerDiv } from './Loading.styles'; +import { ILoadingProps } from './types'; + +const Loading: React.FC = ({ + size = 50, + ringColor = color.blue, + ballColor = color.blue, +}) => { + return ( + + ); +}; + +export default Loading; diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts new file mode 100644 index 000000000..ff06c2cd0 --- /dev/null +++ b/src/components/Loading/index.ts @@ -0,0 +1,2 @@ +export { default as Loading } from './Loading'; +export type { ILoadingProps } from './types'; diff --git a/src/components/Loading/types.ts b/src/components/Loading/types.ts new file mode 100644 index 000000000..8139f53a4 --- /dev/null +++ b/src/components/Loading/types.ts @@ -0,0 +1,10 @@ +export interface ILoadingProps { + // The size of the spinner + size: number; + + // The color of the spinner's ring + ringColor?: string; + + // The color of the spinner's ball + ballColor?: string; +} diff --git a/src/index.ts b/src/index.ts index 999ee22de..07aa4b235 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,14 +15,14 @@ export * from './components/Illustrations'; export * from './components/Info'; export * from './components/Input'; export * from './components/LinkTo'; +export * from './components/Loading'; export * from './components/Logo'; export * from './components/Modal'; export * from './components/Notification'; export * from './components/Radios'; export * from './components/Select'; -export * from './components/Tag'; -export * from './components/TextArea'; export * from './components/Table'; export * from './components/Tabs'; +export * from './components/Tag'; +export * from './components/TextArea'; export * from './components/Tooltip'; - diff --git a/src/utils/HexToRgb.ts b/src/utils/HexToRgb.ts new file mode 100644 index 000000000..47d4de448 --- /dev/null +++ b/src/utils/HexToRgb.ts @@ -0,0 +1,11 @@ +const hexToRgb = (hex: string): string => { + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? ` ${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt( + result[3], + 16, + )} ` + : '66, 135, 245'; +}; + +export default hexToRgb;