From 85c37f799ddd5d0c59383acee2a154c1fa427455 Mon Sep 17 00:00:00 2001 From: danielvaldivv Date: Sun, 14 Nov 2021 22:36:25 -0500 Subject: [PATCH 1/6] feature-7 created Input Component styles default --- packages/components/src/Input/Input.d.ts | 4 ++ packages/components/src/Input/Input.js | 67 +++++++++++++++++++++ packages/components/src/Input/Input.spec.js | 0 packages/components/src/Input/index.d.ts | 2 + packages/components/src/Input/index.js | 1 + 5 files changed, 74 insertions(+) create mode 100644 packages/components/src/Input/Input.d.ts create mode 100644 packages/components/src/Input/Input.js create mode 100644 packages/components/src/Input/Input.spec.js create mode 100644 packages/components/src/Input/index.d.ts create mode 100644 packages/components/src/Input/index.js diff --git a/packages/components/src/Input/Input.d.ts b/packages/components/src/Input/Input.d.ts new file mode 100644 index 0000000..36fb1f8 --- /dev/null +++ b/packages/components/src/Input/Input.d.ts @@ -0,0 +1,4 @@ +import { HTMLProps } from 'react'; + +export interface InputProps extends HTMLProps {} +export default function Input(props: InputProps): JSX.Element; diff --git a/packages/components/src/Input/Input.js b/packages/components/src/Input/Input.js new file mode 100644 index 0000000..fed7ab8 --- /dev/null +++ b/packages/components/src/Input/Input.js @@ -0,0 +1,67 @@ +import { useState } from 'react'; +import { createStyleSheet } from '@platzily-ui/styling' +import PropTypes from 'prop-types' + +const useStyleSheet = createStyleSheet( + (theme, required, type) => ({ + inputDefault: { + width: 199, + height: 40, + radius: 5, + boxSizing: 'border-box', + backgroundColor: theme.palette.neutral.light, + borderWidth: 1, + borderStyle: 'solid', + borderColor: theme.palette.neutral.secondary, + required, + type + }, + inputActive: { + borderColor: theme.palette.neutral.secondary, + }, + inputDisabled: { + borderColor: theme.palette.neutral.tertiary, + }, + inputError: { + borderColor: theme.palette.error.main, + }, + inputFocus: { + borderColor: theme.palette.tertiary.main, + }, + }), + {key: 'InputComponent'} +); + +const Input = forwardTef(function MyInput(props, ref) { + const { className, ...otherProps } = props; + const { classes, cx } = useStyleSheet(props); + + const [state, setState] = useState({ + name: '', + }); + + const handleInputChange = (event) => setState( + { name: event.target.value } + ); + + return ; +}); + +Input.propTypes = { + className: PropTypes.string, + inputRequired: PropTypes.boolean, + type: PropTypes.oneOf(['text', 'submit', 'file', 'checkbox']) +} + +Input.defaultProps = { + inputRequired: false, + type: 'text' +} + +export default Input; diff --git a/packages/components/src/Input/Input.spec.js b/packages/components/src/Input/Input.spec.js new file mode 100644 index 0000000..e69de29 diff --git a/packages/components/src/Input/index.d.ts b/packages/components/src/Input/index.d.ts new file mode 100644 index 0000000..b64980c --- /dev/null +++ b/packages/components/src/Input/index.d.ts @@ -0,0 +1,2 @@ +export * from './Input'; +export { default } from './Input'; diff --git a/packages/components/src/Input/index.js b/packages/components/src/Input/index.js new file mode 100644 index 0000000..a2e6049 --- /dev/null +++ b/packages/components/src/Input/index.js @@ -0,0 +1 @@ +export { default } from './Input'; From 4d9cb26f3f7dea9db9faae01eba6d5a992df1323 Mon Sep 17 00:00:00 2001 From: danielvaldivv Date: Mon, 15 Nov 2021 10:30:10 -0500 Subject: [PATCH 2/6] feature-7 created documentation files --- packages/components/src/Input/Input.js | 13 ++++++++----- packages/docs/components/Input/Input.js | 10 ++++++++++ packages/docs/components/styling/index.js | 10 ++++++++++ packages/docs/pages/components/Input.mdx | 5 +++++ 4 files changed, 33 insertions(+), 5 deletions(-) create mode 100644 packages/docs/components/Input/Input.js create mode 100644 packages/docs/pages/components/Input.mdx diff --git a/packages/components/src/Input/Input.js b/packages/components/src/Input/Input.js index fed7ab8..f38453a 100644 --- a/packages/components/src/Input/Input.js +++ b/packages/components/src/Input/Input.js @@ -8,7 +8,10 @@ const useStyleSheet = createStyleSheet( width: 199, height: 40, radius: 5, - boxSizing: 'border-box', + display: 'flex', + alignContent: 'center', + alignItems: 'center', + justifyContent: 'center', backgroundColor: theme.palette.neutral.light, borderWidth: 1, borderStyle: 'solid', @@ -16,16 +19,16 @@ const useStyleSheet = createStyleSheet( required, type }, - inputActive: { + '&:active': { borderColor: theme.palette.neutral.secondary, }, - inputDisabled: { + '&:disabled': { borderColor: theme.palette.neutral.tertiary, }, - inputError: { + '&:error': { borderColor: theme.palette.error.main, }, - inputFocus: { + '&:hover': { borderColor: theme.palette.tertiary.main, }, }), diff --git a/packages/docs/components/Input/Input.js b/packages/docs/components/Input/Input.js new file mode 100644 index 0000000..4916bce --- /dev/null +++ b/packages/docs/components/Input/Input.js @@ -0,0 +1,10 @@ +import { Input } from "@platzily-ui/components"; + +export default function InputComponent() { + const InputStyle = { + color: blue + } + + return + +} diff --git a/packages/docs/components/styling/index.js b/packages/docs/components/styling/index.js index f2e0225..fdb942c 100644 --- a/packages/docs/components/styling/index.js +++ b/packages/docs/components/styling/index.js @@ -6,6 +6,8 @@ import ColorComponent from './ColorComponent'; import HeaderComponent from '../Header/Header'; +import InputComponent from '../Input/Input'; + import { defaultTheme, customTheme } from './theme'; export function DefaultStyledBox({ color }) { @@ -59,3 +61,11 @@ export function Header() { ); } + +export function input() { + return ( + + + + ); +} diff --git a/packages/docs/pages/components/Input.mdx b/packages/docs/pages/components/Input.mdx new file mode 100644 index 0000000..faf54f8 --- /dev/null +++ b/packages/docs/pages/components/Input.mdx @@ -0,0 +1,5 @@ +# Input Component + +import { Input } from '../../components/styling/index'; + + From 6e9f7abe89590d0ad1f050f1bae5376097e3f303 Mon Sep 17 00:00:00 2001 From: danielvaldivv Date: Tue, 16 Nov 2021 22:31:50 -0500 Subject: [PATCH 3/6] feature-7 added necessary functionalities to build local server and component requirements --- packages/components/package.json | 1 + packages/components/src/Input/Input.d.ts | 1 + packages/components/src/Input/Input.js | 94 ++++++++++++++--------- packages/components/src/index.d.ts | 3 + packages/components/src/index.js | 1 + packages/docs/components/Input/Input.js | 26 +++++-- packages/docs/components/styling/index.js | 5 +- packages/docs/package.json | 3 +- packages/docs/pages/components/Input.mdx | 4 +- yarn.lock | 2 +- 10 files changed, 91 insertions(+), 49 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 13492b2..46b1c26 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -58,6 +58,7 @@ } }, "dependencies": { + "@lerna/bootstrap": "^4.0.0", "@platzily-ui/styling": "0.1.4", "prop-types": "15.7.2" }, diff --git a/packages/components/src/Input/Input.d.ts b/packages/components/src/Input/Input.d.ts index 36fb1f8..4963b73 100644 --- a/packages/components/src/Input/Input.d.ts +++ b/packages/components/src/Input/Input.d.ts @@ -1,4 +1,5 @@ import { HTMLProps } from 'react'; export interface InputProps extends HTMLProps {} + export default function Input(props: InputProps): JSX.Element; diff --git a/packages/components/src/Input/Input.js b/packages/components/src/Input/Input.js index f38453a..783c0aa 100644 --- a/packages/components/src/Input/Input.js +++ b/packages/components/src/Input/Input.js @@ -1,13 +1,13 @@ -import { useState } from 'react'; -import { createStyleSheet } from '@platzily-ui/styling' -import PropTypes from 'prop-types' +import { useState, forwardRef } from 'react'; +import { createStyleSheet } from '@platzily-ui/styling'; +import PropTypes from 'prop-types'; const useStyleSheet = createStyleSheet( - (theme, required, type) => ({ + (theme, { required, type }) => ({ inputDefault: { width: 199, height: 40, - radius: 5, + borderRadius: 5, display: 'flex', alignContent: 'center', alignItems: 'center', @@ -17,54 +17,76 @@ const useStyleSheet = createStyleSheet( borderStyle: 'solid', borderColor: theme.palette.neutral.secondary, required, - type + type, + '&:focus': { + borderColor: theme.palette.tertiary.main, + backgroundColor: theme.palette.neutral.light, + borderWidth: 1, + borderStyle: 'solid', + outline: 'none', + }, + '&:disabled': { + borderColor: theme.palette.neutral.tertiary, + cursor: 'not-allowed', + }, + '&:invalid': { + borderColor: theme.palette.error.main, + }, + '&:hover': { + borderColor: theme.palette.tertiary.main, + }, }, - '&:active': { - borderColor: theme.palette.neutral.secondary, - }, - '&:disabled': { - borderColor: theme.palette.neutral.tertiary, - }, - '&:error': { - borderColor: theme.palette.error.main, - }, - '&:hover': { - borderColor: theme.palette.tertiary.main, + inputRequired: { + textAlign: 'left', + '&::placeholder': { + color: theme.palette.error.main, + paddingLeft: '95%' + } }, }), - {key: 'InputComponent'} + { key: 'InputComponent' }, ); -const Input = forwardTef(function MyInput(props, ref) { - const { className, ...otherProps } = props; +const Input = forwardRef(function Input(props, ref) { + const { required, className, ...otherProps } = props; const { classes, cx } = useStyleSheet(props); + // useState Hook const [state, setState] = useState({ name: '', }); + const handleInputChange = (event) => setState({ name: event.target.value }); - const handleInputChange = (event) => setState( - { name: event.target.value } - ); + // Required Validation because of the styles + let requiredStyles; + let placeHolder; + if(required) { + requiredStyles = classes.inputRequired; + placeHolder = '*'; + } else { + requiredStyles = null; + placeHolder = null; + } - return ; + return ( + + ); }); Input.propTypes = { className: PropTypes.string, - inputRequired: PropTypes.boolean, - type: PropTypes.oneOf(['text', 'submit', 'file', 'checkbox']) -} + required: PropTypes.boolean, +}; Input.defaultProps = { - inputRequired: false, - type: 'text' -} + required: false, +}; export default Input; diff --git a/packages/components/src/index.d.ts b/packages/components/src/index.d.ts index f2e6a02..beb521d 100644 --- a/packages/components/src/index.d.ts +++ b/packages/components/src/index.d.ts @@ -12,3 +12,6 @@ export { default as Button } from './Button'; export * from './SvgIcon'; export { default as SvgIcon } from './SvgIcon'; + +export * from './Input'; +export { default as Input } from './Input'; diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 008ef0e..e5cde22 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -3,3 +3,4 @@ export { default as Text } from './Text'; export { default as Header } from './Header'; export { default as Button } from './Button'; export { default as SvgIcon } from './SvgIcon'; +export { default as Input } from './Input'; diff --git a/packages/docs/components/Input/Input.js b/packages/docs/components/Input/Input.js index 4916bce..a966d27 100644 --- a/packages/docs/components/Input/Input.js +++ b/packages/docs/components/Input/Input.js @@ -1,10 +1,22 @@ -import { Input } from "@platzily-ui/components"; +import { Input } from '@platzily-ui/components'; +import { createStyleSheet } from '@platzily-ui/styling'; -export default function InputComponent() { - const InputStyle = { - color: blue - } +const useStyleSheet = createStyleSheet((theme) => ({ + inputStyle: { + padding: theme.spacing(2), + }, +}), { key: 'padding' }); - return +const InputComponent = (props) => { + const { classes } = useStyleSheet(); + const { required, type, otherProps } = props; -} + return ; +}; + +export default InputComponent; diff --git a/packages/docs/components/styling/index.js b/packages/docs/components/styling/index.js index fdb942c..14bba19 100644 --- a/packages/docs/components/styling/index.js +++ b/packages/docs/components/styling/index.js @@ -5,7 +5,6 @@ import UseThemeStyledBoxComponent from './UseThemeStyledBox'; import ColorComponent from './ColorComponent'; import HeaderComponent from '../Header/Header'; - import InputComponent from '../Input/Input'; import { defaultTheme, customTheme } from './theme'; @@ -62,10 +61,10 @@ export function Header() { ); } -export function input() { +export function Input(props) { return ( - + ); } diff --git a/packages/docs/package.json b/packages/docs/package.json index e0bac5c..18a9fae 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -41,8 +41,9 @@ "start": "next dev" }, "dependencies": { - "@platzily-ui/icons": "0.1.0", + "@lerna/bootstrap": "^4.0.0", "@platzily-ui/components": "0.1.0", + "@platzily-ui/icons": "0.1.0", "@platzily-ui/styling": "0.1.4", "next": "12.0.2", "nextra": "1.1.0", diff --git a/packages/docs/pages/components/Input.mdx b/packages/docs/pages/components/Input.mdx index faf54f8..d1a62a5 100644 --- a/packages/docs/pages/components/Input.mdx +++ b/packages/docs/pages/components/Input.mdx @@ -2,4 +2,6 @@ import { Input } from '../../components/styling/index'; - +
+ +
diff --git a/yarn.lock b/yarn.lock index 1898210..27ffb2a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1446,7 +1446,7 @@ pacote "^11.2.6" semver "^7.3.4" -"@lerna/bootstrap@4.0.0": +"@lerna/bootstrap@4.0.0", "@lerna/bootstrap@^4.0.0": version "4.0.0" resolved "https://registry.yarnpkg.com/@lerna/bootstrap/-/bootstrap-4.0.0.tgz#5f5c5e2c6cfc8fcec50cb2fbe569a8c607101891" integrity sha512-RkS7UbeM2vu+kJnHzxNRCLvoOP9yGNgkzRdy4UV2hNalD7EP41bLvRVOwRYQ7fhc2QcbhnKNdOBihYRL0LcKtw== From 63decaf7a9f37d90c01a13d992e15deb741111f8 Mon Sep 17 00:00:00 2001 From: danielvaldivv Date: Tue, 16 Nov 2021 23:54:48 -0500 Subject: [PATCH 4/6] feature-7 added Documentation of Input Component on docs folder --- packages/docs/components/Input/Input.js | 4 +- packages/docs/pages/components/Input.mdx | 133 ++++++++++++++++++++++- 2 files changed, 132 insertions(+), 5 deletions(-) diff --git a/packages/docs/components/Input/Input.js b/packages/docs/components/Input/Input.js index a966d27..5cf7a4b 100644 --- a/packages/docs/components/Input/Input.js +++ b/packages/docs/components/Input/Input.js @@ -9,12 +9,14 @@ const useStyleSheet = createStyleSheet((theme) => ({ const InputComponent = (props) => { const { classes } = useStyleSheet(); - const { required, type, otherProps } = props; + const { required, type, placeholder, disabled, otherProps } = props; return ; }; diff --git a/packages/docs/pages/components/Input.mdx b/packages/docs/pages/components/Input.mdx index d1a62a5..a99b704 100644 --- a/packages/docs/pages/components/Input.mdx +++ b/packages/docs/pages/components/Input.mdx @@ -1,7 +1,132 @@ -# Input Component - import { Input } from '../../components/styling/index'; -
- +# Inputs + +Input fields let get the user different type of data. + + +
+ +
+ +------ + +The component has type='text' by default but the user can change it using the attribute type and his prefer value. + +
+ + +
+ +```jsx +import { Input } from '@platzily-ui/components'; + +const InputComponent = () => { + + return ; +}; +export default InputComponent; +``` + + The user also can provide principally the disabled and required attribute . + +
+ + +
+ +```jsx +import { Button } from '@platzily-ui/components'; +import { Fragment } from 'react'; + +const InputComponent = () => { + return ( + + + + + ); +}; +export default InputComponent; +``` + + +------ + +## Type attribute + +Users can use all his different values in the type attribute like: date, checkbox, password, + +
+
+ +```jsx +import { Input } from '@platzily-ui/components'; + +const InputComponent = () => { + + return ; +}; +export default InputComponent; +``` + +
+ +
+ +```jsx +import { Input } from '@platzily-ui/components'; + +const InputComponent = () => { + + return ; +}; + +export default InputComponent; +``` + +
+ +
+ +```jsx +import { Input } from '@platzily-ui/components'; + +const InputComponent = () => { + + return ; +}; + +export default InputComponent; +``` + +## Styling + +The user can provide styles to the component using the createStyleSheet method. + +
+ +
+ +```jsx +import { Input } from '@platzily-ui/components'; +import { createStyleSheet } from '@platzily-ui/styling'; + +const useStyleSheet = createStyleSheet((theme) => ({ + inputStyle: { + backgroundColor: theme.palette.secondary.main, + padding: theme.spacing(2), + }, +}), { key: 'classNameStyle' }); + +const InputComponent = (props) => { + const { classes } = useStyleSheet(); + + return ; +}; + +export default InputComponent; +``` From 3ea66194b9c82ea2de269953db473bdf05f15a9c Mon Sep 17 00:00:00 2001 From: danielvaldivv Date: Wed, 17 Nov 2021 11:00:45 -0500 Subject: [PATCH 5/6] feature-7 added 3 different tests: provide styles, provide type atribute, getting dates inside form tag --- packages/components/src/Input/Input.spec.js | 61 +++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/packages/components/src/Input/Input.spec.js b/packages/components/src/Input/Input.spec.js index e69de29..3b1a4b1 100644 --- a/packages/components/src/Input/Input.spec.js +++ b/packages/components/src/Input/Input.spec.js @@ -0,0 +1,61 @@ +import { getByTestId, render } from '@testing-library/react'; +import { ThemeProvider, createTheme } from '@platzily-ui/styling'; +import Input from './Input'; + +describe('@Components/Input', () => { + it('Given the Input Component, when the props provide an object within the styles attribute then the component will take those styles ', () => { + // arrange + const theme = createTheme(); + const { getByRole } = render( + + + , + ); + + // act + const InputTestedText = getByRole('banner'); + // assert + expect(InputTestedText).toBeDefined(); + expect(InputTestedText).toHaveStyle(`color:#97c343`); + }); + + it('Given the Input Component, when the props provide type or required attributes then the component will take those props', () => { + // arrange + const { getByRole } = render( + + + , + ); + + // act + const InputTestedText = getByRole('form'); + + // assert + expect(InputTestedText).toBeDefined(); + expect(InputTestedText).toHaveProperty('type'); + expect(InputTestedText).toHaveProperty('required'); + }); + + it('Given the Input Component, when include the component inside form tag, then form tag gets properties and his values. ', () => { + // arrange + const { getByTestId } = render( + +
+ + + + +
+ , + ); + + // act + const InputTestedText = getByTestId('login-form'); + + // assert + expect(InputTestedText).toHaveFormValues({ + username: 'platzily-user', + rememberMe: true, + }); + }); +}); From 4a46de2e29f681b4ab2f72b1e7d959af19727905 Mon Sep 17 00:00:00 2001 From: danielvaldivv Date: Fri, 26 Nov 2021 12:16:18 -0500 Subject: [PATCH 6/6] feature-7 fixed code review comments of the PR --- packages/components/package.json | 1 - packages/components/src/Input/Input.js | 65 ++++------------- packages/components/src/Input/Input.spec.js | 15 ++-- packages/components/src/Paper/Paper.js | 2 +- packages/docs/components/Input/Input.js | 18 +++-- packages/docs/package.json | 1 - packages/docs/pages/components/Input.mdx | 78 +++++++++------------ yarn.lock | 2 +- 8 files changed, 71 insertions(+), 111 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 46b1c26..13492b2 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -58,7 +58,6 @@ } }, "dependencies": { - "@lerna/bootstrap": "^4.0.0", "@platzily-ui/styling": "0.1.4", "prop-types": "15.7.2" }, diff --git a/packages/components/src/Input/Input.js b/packages/components/src/Input/Input.js index 783c0aa..03dbea6 100644 --- a/packages/components/src/Input/Input.js +++ b/packages/components/src/Input/Input.js @@ -1,80 +1,46 @@ -import { useState, forwardRef } from 'react'; +import { forwardRef } from 'react'; import { createStyleSheet } from '@platzily-ui/styling'; import PropTypes from 'prop-types'; const useStyleSheet = createStyleSheet( - (theme, { required, type }) => ({ + (theme, { width, height }) => ({ inputDefault: { - width: 199, - height: 40, - borderRadius: 5, - display: 'flex', - alignContent: 'center', - alignItems: 'center', - justifyContent: 'center', + width: width || 199, + height: height || 40, backgroundColor: theme.palette.neutral.light, borderWidth: 1, borderStyle: 'solid', borderColor: theme.palette.neutral.secondary, - required, - type, '&:focus': { borderColor: theme.palette.tertiary.main, backgroundColor: theme.palette.neutral.light, - borderWidth: 1, - borderStyle: 'solid', outline: 'none', }, '&:disabled': { borderColor: theme.palette.neutral.tertiary, cursor: 'not-allowed', }, - '&:invalid': { - borderColor: theme.palette.error.main, - }, + '&:hover': { borderColor: theme.palette.tertiary.main, }, }, - inputRequired: { - textAlign: 'left', - '&::placeholder': { - color: theme.palette.error.main, - paddingLeft: '95%' - } - }, + }), - { key: 'InputComponent' }, + { key: 'Input' }, ); const Input = forwardRef(function Input(props, ref) { - const { required, className, ...otherProps } = props; + const { className, width, height, ...otherProps } = props; const { classes, cx } = useStyleSheet(props); - // useState Hook - const [state, setState] = useState({ - name: '', - }); - const handleInputChange = (event) => setState({ name: event.target.value }); - - // Required Validation because of the styles - let requiredStyles; - let placeHolder; - if(required) { - requiredStyles = classes.inputRequired; - placeHolder = '*'; - } else { - requiredStyles = null; - placeHolder = null; - } - return ( ); @@ -82,11 +48,10 @@ const Input = forwardRef(function Input(props, ref) { Input.propTypes = { className: PropTypes.string, - required: PropTypes.boolean, + height: PropTypes.number, + width: PropTypes.number, }; -Input.defaultProps = { - required: false, -}; + export default Input; diff --git a/packages/components/src/Input/Input.spec.js b/packages/components/src/Input/Input.spec.js index 3b1a4b1..e3e4fb5 100644 --- a/packages/components/src/Input/Input.spec.js +++ b/packages/components/src/Input/Input.spec.js @@ -1,38 +1,37 @@ -import { getByTestId, render } from '@testing-library/react'; +import { render } from '@testing-library/react'; import { ThemeProvider, createTheme } from '@platzily-ui/styling'; import Input from './Input'; describe('@Components/Input', () => { - it('Given the Input Component, when the props provide an object within the styles attribute then the component will take those styles ', () => { + it('Given the Input Component, when the props provide a width and his value, then the component will take those styles', () => { // arrange const theme = createTheme(); const { getByRole } = render( - + , ); // act - const InputTestedText = getByRole('banner'); + const InputTestedText = getByRole('textbox'); // assert expect(InputTestedText).toBeDefined(); - expect(InputTestedText).toHaveStyle(`color:#97c343`); + expect(InputTestedText).toHaveStyle(`width:150px`); }); it('Given the Input Component, when the props provide type or required attributes then the component will take those props', () => { // arrange const { getByRole } = render( - + , ); // act - const InputTestedText = getByRole('form'); + const InputTestedText = getByRole('textbox'); // assert expect(InputTestedText).toBeDefined(); - expect(InputTestedText).toHaveProperty('type'); expect(InputTestedText).toHaveProperty('required'); }); diff --git a/packages/components/src/Paper/Paper.js b/packages/components/src/Paper/Paper.js index 735cb08..16412fd 100644 --- a/packages/components/src/Paper/Paper.js +++ b/packages/components/src/Paper/Paper.js @@ -15,7 +15,7 @@ const useStyleSheet = createStyleSheet( (theme, { color, elevation }) => ({ paper: { backgroundColor: detectColor(theme, color || 'neutral-tertiary'), - padding: theme.spacing(), + padding: theme.spacing(1), borderRadius: 5, }, outlined: { diff --git a/packages/docs/components/Input/Input.js b/packages/docs/components/Input/Input.js index 5cf7a4b..ad4d64f 100644 --- a/packages/docs/components/Input/Input.js +++ b/packages/docs/components/Input/Input.js @@ -2,21 +2,29 @@ import { Input } from '@platzily-ui/components'; import { createStyleSheet } from '@platzily-ui/styling'; const useStyleSheet = createStyleSheet((theme) => ({ - inputStyle: { + input: { + borderRadius: theme.spacing(), padding: theme.spacing(2), + '&:invalid':{ + borderColor: theme.palette.error.main, + '&::placeholder': { + color: theme.palette.error.main, + } + } }, -}), { key: 'padding' }); +}), { key: 'DocsInput' }); const InputComponent = (props) => { const { classes } = useStyleSheet(); - const { required, type, placeholder, disabled, otherProps } = props; + const { type, placeholder, disabled, width, required, ...otherProps } = props; return ; }; diff --git a/packages/docs/package.json b/packages/docs/package.json index 18a9fae..da85377 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -41,7 +41,6 @@ "start": "next dev" }, "dependencies": { - "@lerna/bootstrap": "^4.0.0", "@platzily-ui/components": "0.1.0", "@platzily-ui/icons": "0.1.0", "@platzily-ui/styling": "0.1.4", diff --git a/packages/docs/pages/components/Input.mdx b/packages/docs/pages/components/Input.mdx index a99b704..0c8b9dd 100644 --- a/packages/docs/pages/components/Input.mdx +++ b/packages/docs/pages/components/Input.mdx @@ -14,7 +14,7 @@ Input fields let get the user different type of data. The component has type='text' by default but the user can change it using the attribute type and his prefer value.
- +
@@ -28,11 +28,12 @@ const InputComponent = () => { export default InputComponent; ``` - The user also can provide principally the disabled and required attribute . + The user should provide width and height properties and his values by props, also can provide any input attribute of HTML. -
- - +
+ + +
```jsx @@ -42,8 +43,9 @@ import { Fragment } from 'react'; const InputComponent = () => { return ( - - + // Example One + // Example Two + // Example Three ); }; @@ -57,56 +59,37 @@ export default InputComponent; Users can use all his different values in the type attribute like: date, checkbox, password, -
+
-
- -```jsx -import { Input } from '@platzily-ui/components'; - -const InputComponent = () => { - - return ; -}; -export default InputComponent; -``` - -
- -
- -```jsx -import { Input } from '@platzily-ui/components'; - -const InputComponent = () => { - - return ; -}; - -export default InputComponent; -``` - -
+
```jsx import { Input } from '@platzily-ui/components'; +import { Fragment } from 'react'; const InputComponent = () => { - - return ; + return ( + + + + /> + + ); + return ; }; - export default InputComponent; ``` + +---------- ## Styling The user can provide styles to the component using the createStyleSheet method. -
- +
+
```jsx @@ -114,9 +97,15 @@ import { Input } from '@platzily-ui/components'; import { createStyleSheet } from '@platzily-ui/styling'; const useStyleSheet = createStyleSheet((theme) => ({ - inputStyle: { - backgroundColor: theme.palette.secondary.main, + input: { + borderRadius: theme.spacing(), padding: theme.spacing(2), + '&:invalid':{ + borderColor: theme.palette.error.main, + '&::placeholder': { + color: theme.palette.error.main, + } + } }, }), { key: 'classNameStyle' }); @@ -124,7 +113,8 @@ const InputComponent = (props) => { const { classes } = useStyleSheet(); return ; }; diff --git a/yarn.lock b/yarn.lock index 27ffb2a..1898210 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1446,7 +1446,7 @@ pacote "^11.2.6" semver "^7.3.4" -"@lerna/bootstrap@4.0.0", "@lerna/bootstrap@^4.0.0": +"@lerna/bootstrap@4.0.0": version "4.0.0" resolved "https://registry.yarnpkg.com/@lerna/bootstrap/-/bootstrap-4.0.0.tgz#5f5c5e2c6cfc8fcec50cb2fbe569a8c607101891" integrity sha512-RkS7UbeM2vu+kJnHzxNRCLvoOP9yGNgkzRdy4UV2hNalD7EP41bLvRVOwRYQ7fhc2QcbhnKNdOBihYRL0LcKtw==