#168078593 Create a reusable card component #266
Conversation
|
@oluwajuwon thanks for the good work, is it possible to add screenshot so that we are able to see the changes |
| return ( | ||
| <div | ||
| className="card" | ||
| style={{ |
There was a problem hiding this comment.
I think it will be a good approach to pass style as props in className in steady of allowing height and width to be passed in as props.
Something like this <div className={card ${classes}}>
There was a problem hiding this comment.
Great work @oluwajuwon, implement @Luckzman's feedback as this will make the component much more dynamic and reusable
There was a problem hiding this comment.
hmmm, that makes sense @Luckzman I'll look into that
| @@ -0,0 +1,6 @@ | |||
|
|
|||
| .card { | |||
| padding: 10px; | |||
There was a problem hiding this comment.
I think there should be a default height and width based on the design.
| return ( | ||
| <div | ||
| className="card" | ||
| style={{ |
There was a problem hiding this comment.
Great work @oluwajuwon, implement @Luckzman's feedback as this will make the component much more dynamic and reusable
oluwajuwon
force-pushed
the
ft-reusable-card-168078593
branch
from
042c7db to
d22d3d5
Compare
| describe('Card component', () => { | ||
| it('should render correctly', () => { | ||
| const props = { | ||
| height: '10px', |
There was a problem hiding this comment.
the required props for the Card component is style and children, why add height and width as props in your test
There was a problem hiding this comment.
yeah I forgot about that when I made the previous change lol. thanks
| import PropTypes from 'prop-types'; | ||
| import '../../assets/components/_card.scss'; | ||
|
|
||
| const Card = (props) => { |
There was a problem hiding this comment.
I think jsDoc will make sense here for the sake of documentation
There was a problem hiding this comment.
will add that. 👍
oluwajuwon
force-pushed
the
ft-reusable-card-168078593
branch
2 times, most recently
from
83cfb5e to
dcb0808
Compare
| }; | ||
|
|
||
| Card.propTypes = { | ||
| children: PropTypes.string.isRequired, |
There was a problem hiding this comment.
I think children should have PropTypes.node.isRequired since the children props will take jsx
There was a problem hiding this comment.
lol I didn't even know there was something like that. thanks
oluwajuwon
force-pushed
the
ft-reusable-card-168078593
branch
from
dcb0808 to
3b752dc
Compare
- write test for card component - create card component to be reusable - add styling to the card component - fix jest configuration - add setup files for enzyme and jest [Delivers #168078593]
oluwajuwon
force-pushed
the
ft-reusable-card-168078593
branch
from
3b752dc to
6e72493
Compare
What Does This PR Do?
This PR creates a re-usable card component
Description Of Task To Be Completed
Any Background Context You Want To Provide?
N/A
How can this be manually tested?
git fetch origin ft-reusable-card-168078593&git checkout ft-reusable-card-168078593respectivelyrevampedClient/components/cards/Card.jsxfolderWhat are the relevant pivotal tracker stories?
#168078593
Screenshot(s)
N/A