-
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.
feat(molecule): setup card divider molecule
- setup carddivider molecule - setup styleguidist for the carddivider - write tests for the carddivider molecule - add title font size variable attribute - refactor divider to display inline - add webpack molecule module resolver - add jest config molecule module resolver - add molecule sections to styleguide configuration [Finishes #167271157]
- Loading branch information
1 parent
a5315ee
commit 9b68db5
Showing
11 changed files
with
266 additions
and
112 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
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
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
118 changes: 118 additions & 0 deletions
118
src/components/UI/molecules/CardDivider/CardDivider.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,118 @@ | ||
import React, { Fragment } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import styled from 'styled-components'; | ||
|
||
import Divider from '<atoms>/Divider/Divider'; | ||
import Text from '<atoms>/Text/Text'; | ||
import spacing from '<variables>/spacing'; | ||
import { fontWeights, fontSizes } from '<variables>/fonts'; | ||
import { textColors, borderColors } from '<variables>/colorPalette'; | ||
|
||
/** | ||
* @description - CardDivider Component | ||
* | ||
* @prop {string} height - height | ||
* @prop {string} text - divider text | ||
* @prop {string} dividerMargin - divider margin | ||
* @prop {string} dividerColor - color | ||
* @prop {string} width - maxWidth | ||
* @prop {string} margin - margin | ||
* @prop {string} fontSize - font Size | ||
* @prop {string} textAlign - text Align | ||
* @prop {string} textColor - color | ||
* @prop {string} textDisplay - display | ||
* @prop {string} textTransform - text transform | ||
* @prop {string} fontWeight - fontWeight | ||
* @prop {string} textPadding - text padding | ||
* @prop {children} children - children | ||
* | ||
* @return {component} CardDivider | ||
*/ | ||
const CardDivider = ({ | ||
text, | ||
dividerMargin, | ||
width, | ||
height, | ||
margin, | ||
dividerColor, | ||
fontSize, | ||
textAlign, | ||
textColor, | ||
textDisplay, | ||
textTransform, | ||
fontWeight, | ||
textPadding, | ||
content, | ||
}) => { | ||
const SingleDivider = () => ( | ||
<Divider | ||
width={width} | ||
height={height} | ||
margin={margin} | ||
dividerColor={dividerColor} | ||
/> | ||
); | ||
const DividerText = () => ( | ||
<Text | ||
fontSize={fontSize} | ||
textAlign={textAlign} | ||
color={textColor} | ||
display={textDisplay} | ||
textTransform={textTransform} | ||
padding={textPadding} | ||
content={content} | ||
fontWeight={fontWeight} | ||
> | ||
{text} | ||
</Text> | ||
); | ||
|
||
return ( | ||
<CardDivider.Container | ||
text={text} | ||
dividerMargin={dividerMargin} | ||
> | ||
<SingleDivider /> | ||
{text && ( | ||
<Fragment> | ||
<DividerText /> | ||
<SingleDivider /> | ||
</Fragment> | ||
)} | ||
</CardDivider.Container> | ||
); | ||
}; | ||
|
||
CardDivider.propTypes = { | ||
text: PropTypes.string, | ||
textDisplay: PropTypes.oneOf(['block', 'inline', 'inline-block', 'none']), | ||
textColor: PropTypes.oneOf(Object.keys(textColors)), | ||
fontSize: PropTypes.oneOf(Object.keys(fontSizes)), | ||
textAlign: PropTypes.oneOf(['left', 'center', 'right', 'justify']), | ||
textTransform: PropTypes.oneOf([ | ||
'none', | ||
'capitalize', | ||
'uppercase', | ||
'lowercase', | ||
]), | ||
content: PropTypes.oneOf(['true', 'false']), | ||
textPadding: PropTypes.oneOf(Object.keys(spacing)), | ||
fontWeight: PropTypes.oneOf(Object.keys(fontWeights)), | ||
width: PropTypes.oneOf(Object.keys(spacing)), | ||
height: PropTypes.oneOf(Object.keys(spacing)), | ||
margin: PropTypes.oneOf(Object.keys(spacing)), | ||
dividerColor: PropTypes.oneOf(Object.keys(borderColors)), | ||
dividerMargin: PropTypes.oneOf(Object.keys(spacing)), | ||
}; | ||
|
||
CardDivider.Container = styled.div` | ||
${({ | ||
dividerMargin, | ||
theme, | ||
}) => ` | ||
display: block; | ||
text-align: center; | ||
margin: ${theme.spacing[dividerMargin]}; | ||
`} | ||
`; | ||
export default CardDivider; |
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,25 @@ | ||
CardDivider Default: | ||
|
||
```jsx | ||
<CardDivider /> | ||
``` | ||
|
||
CardDivider With All Props: | ||
```jsx | ||
<CardDivider | ||
text='Sign In With' | ||
fontSize='title' | ||
textColor='primary' | ||
dividerMargin='md' | ||
textAlign='justify' | ||
textDisplay='inline-block' | ||
textTransform='capitalize' | ||
textPadding='xs' | ||
content='true' | ||
fontWeight='bold' | ||
width='xxl' | ||
height='zero' | ||
margin='xs' | ||
dividerColor='primary' | ||
/> | ||
``` |
20 changes: 20 additions & 0 deletions
20
src/components/UI/molecules/CardDivider/CardDivider.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,20 @@ | ||
import React from 'react'; | ||
import { render, cleanup } from '<src>/helpers/testUtils'; | ||
import CardDivider from './CardDivider'; | ||
import '@testing-library/jest-dom/extend-expect'; | ||
|
||
afterEach(cleanup); | ||
|
||
describe('CardDivider', () => { | ||
it('should render the CardDivider component', () => { | ||
const { container } = render(<CardDivider />); | ||
|
||
expect(container.lastChild).toBeTruthy(); | ||
}); | ||
|
||
it('should render card divider with text', () => { | ||
const { getByText } = render(<CardDivider text='Sign In With' />); | ||
|
||
expect(getByText('Sign In With')).toBeTruthy(); | ||
}); | ||
}); |
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
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