-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
383 additions
and
4 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
98 changes: 98 additions & 0 deletions
98
src/components/UI/molecules/InputTextField/InputTextField.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import InputField from '<atoms>/InputField/InputField'; | ||
import Text from '<atoms>/Text/Text'; | ||
import FlexContainer from '<atoms>/layouts/FlexContainer/FlexContainer'; | ||
import Label from '<molecules>/label/Label'; | ||
import themeBorderRadius from '<variables>/border'; | ||
import width from '<variables>/width'; | ||
import { fontWeights, fontSizes } from '<variables>/fonts'; | ||
import { textColors } from '<variables>/colorPalette'; | ||
|
||
/** | ||
* @description - InputFormField component combined with an error field | ||
* | ||
* @prop {string} - placeholder | ||
* @prop {string | number} - value | ||
* @prop {string} - errorMessage | ||
* @prop {func} - onChange | ||
* @prop {string} - inputWidth | ||
* | ||
* @returns {JSX} - Input, Text, FlexContainer Component | ||
* | ||
* InputForm field Component | ||
*/ | ||
const InputTextField = ({ | ||
value, | ||
placeholder, | ||
onChange, | ||
errorMessage, | ||
inputWidth, | ||
borderRadius, | ||
type, | ||
name, | ||
label, | ||
display, | ||
color, | ||
labelDisplay, | ||
labelFontSize, | ||
labelFontWeight, | ||
}) => { | ||
const id = btoa(name); | ||
|
||
return ( | ||
|
||
<FlexContainer display={display}> | ||
{ label && <Label | ||
id={id} | ||
htmlFor={id} | ||
display={labelDisplay} | ||
fontSize={labelFontSize} | ||
fontWeight={labelFontWeight} | ||
color = {color} | ||
> | ||
{label} | ||
</Label>} | ||
<InputField | ||
id={id} | ||
name={name} | ||
type={type} | ||
placeholder={placeholder} | ||
value={value} | ||
inputWidth={inputWidth} | ||
borderRadius={borderRadius} | ||
error={errorMessage} | ||
onChange={onChange} /> | ||
{errorMessage | ||
&& <span><Text color='red' fontSize='small' display='block'> | ||
{errorMessage} | ||
</Text></span>} | ||
</FlexContainer> | ||
|
||
); | ||
}; | ||
|
||
InputTextField.propTypes = { | ||
type: PropTypes.oneOf(['number', 'email', 'password', 'text']).isRequired, | ||
label: PropTypes.string, | ||
inputWidth: PropTypes.oneOf(Object.keys(width)), | ||
placeholder: PropTypes.string, | ||
value: PropTypes.string, | ||
name: PropTypes.string.isRequired, | ||
errorMessage: PropTypes.string, | ||
borderRadius: PropTypes.oneOf(Object.keys(themeBorderRadius)), | ||
onChange: PropTypes.func.isRequired, | ||
display: PropTypes.oneOf(['block', 'inline', 'flex', 'inline-block', 'none']), | ||
labelDisplay: PropTypes.oneOf( | ||
['block', 'inline', 'flex', 'inline-block', 'none'], | ||
), | ||
color: PropTypes.oneOf(Object.keys(textColors)), | ||
labelFontSize: PropTypes.oneOf(Object.keys(fontSizes)), | ||
labelFontWeight: PropTypes.oneOf(Object.keys(fontWeights)), | ||
}; | ||
|
||
InputTextField.defaultProps = { | ||
display: 'block', | ||
}; | ||
|
||
export default InputTextField; |
60 changes: 60 additions & 0 deletions
60
src/components/UI/molecules/InputTextField/InputTextField.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
InputFormField Default: | ||
```jsx | ||
<InputTextField | ||
label='First Name' | ||
name='firstname' | ||
type='text' | ||
placeholder='Enter first name' | ||
onChange={e => setText(e.target.value)} | ||
inputWidth='fullWidth' | ||
/> | ||
``` | ||
|
||
example | ||
```jsx | ||
<InputTextField | ||
label='First Name' | ||
name='firstname' | ||
type='text' | ||
placeholder='enter first name' | ||
onChange={e => setText(e.target.value)} | ||
inputWidth='fullWidth' | ||
/> | ||
``` | ||
Form field with password | ||
```jsx | ||
<InputTextField | ||
label='Password ' | ||
name='password' | ||
type='password' | ||
placeholder='enter password' | ||
onChange={e => setText(e.target.value)} | ||
inputWidth='fullWidth' | ||
/> | ||
``` | ||
|
||
Form field with error message | ||
```jsx | ||
<InputTextField | ||
label='First Name' | ||
name='firstname' | ||
type='password' | ||
placeholder='enter first name' | ||
onChange={e => setText(e.target.value)} | ||
inputWidth='fullWidth' | ||
errorMessage='first name is required' | ||
/> | ||
``` | ||
|
||
Form field with half width | ||
```jsx | ||
<InputTextField | ||
label='First Name' | ||
name='firstname' | ||
type='text' | ||
placeholder='enter first name' | ||
onChange={e => setText(e.target.value)} | ||
inputWidth='searchBarWidth' | ||
errorMessage='first name is required' | ||
/> | ||
``` |
56 changes: 56 additions & 0 deletions
56
src/components/UI/molecules/InputTextField/InputTextField.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import React from 'react'; | ||
import { render, cleanup } from '<src>/helpers/testUtils'; | ||
import InputTextField from './InputTextField'; | ||
import '@testing-library/jest-dom/extend-expect'; | ||
|
||
afterEach(cleanup); | ||
|
||
const defaultProps = { | ||
label: 'First Name', | ||
name: 'firstname', | ||
type: 'text', | ||
errorMessage: 'this field required', | ||
onChange: () => {}, | ||
}; | ||
|
||
const id = btoa(defaultProps.name); | ||
|
||
const setUp = (props) => { | ||
const utils = render(<InputTextField id={id} {...defaultProps} {...props} />); | ||
return utils; | ||
}; | ||
|
||
describe('Input Text Fields', () => { | ||
it('should render a input field component', () => { | ||
const { container } = setUp(); | ||
expect(container).toBeTruthy(); | ||
}); | ||
|
||
it('should render and return the first name', () => { | ||
const { getByLabelText } = setUp({ type: 'password' }); | ||
const input = getByLabelText(defaultProps.label); | ||
|
||
expect(input.getAttribute('name')).toBe('firstname'); | ||
}); | ||
|
||
|
||
it('should render a input password field component', () => { | ||
const { getByLabelText } = setUp({ type: 'password' }); | ||
const input = getByLabelText(defaultProps.label); | ||
|
||
expect(input.getAttribute('type')).toBe('password'); | ||
}); | ||
|
||
it('should render a input password field component and return the id', () => { | ||
const { getByLabelText } = setUp({ type: 'password' }); | ||
const input = getByLabelText(defaultProps.label); | ||
|
||
expect(input.getAttribute('id')).toBe(id); | ||
}); | ||
|
||
it('should render a input password field component and return the id', () => { | ||
const { container } = setUp({ type: 'password' }); | ||
|
||
expect(container.lastChild).toHaveTextContent(defaultProps.errorMessage); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import styled from 'styled-components'; | ||
import { fontWeights, fontSizes } from '<variables>/fonts'; | ||
import { textColors } from '<variables>/colorPalette'; | ||
import Text from '<atoms>/Text/Text'; | ||
|
||
|
||
/** | ||
* @description - InputFormField component combined with an error field | ||
* | ||
* @prop {children} - children | ||
* | ||
* @returns {JSX} - label | ||
* | ||
* InputLabel field Component | ||
*/ | ||
const Label = ({ | ||
children, | ||
display, | ||
color, | ||
id, | ||
fontSize, | ||
fontWeight, | ||
}) => ( | ||
<Label.Container htmlFor={id} display={display}> | ||
<Text | ||
content='true' | ||
color={color} | ||
fontSize={fontSize} | ||
fontWeight={fontWeight} | ||
> | ||
{children} | ||
</Text> | ||
</Label.Container> | ||
); | ||
|
||
Label.Container = styled.label` | ||
${({ | ||
fontSize, | ||
fontWeight, | ||
display, | ||
color, | ||
theme, | ||
}) => { | ||
return ` | ||
color: ${theme.textColors[color]}; | ||
display: ${display}; | ||
font-size: ${theme.fontSizes[fontSize]}; | ||
font-weight: ${theme.fontWeights[fontWeight]}; | ||
`; | ||
}} | ||
`; | ||
|
||
|
||
Label.propTypes = { | ||
id: PropTypes.string.isRequired, | ||
display: PropTypes.oneOf(['block', 'inline', 'flex', 'inline-block', 'none']), | ||
color: PropTypes.oneOf(Object.keys(textColors)), | ||
fontSize: PropTypes.oneOf(Object.keys(fontSizes)), | ||
fontWeight: PropTypes.oneOf(Object.keys(fontWeights)), | ||
children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) | ||
.isRequired, | ||
}; | ||
|
||
Label.defaultProps = { | ||
children: 'text', | ||
color: 'primary', | ||
display: 'block', | ||
fontWeight: 'normal', | ||
fontSize: 'normal', | ||
}; | ||
|
||
export default Label; |
Oops, something went wrong.