Card - Githubissues

As a developer I want to be able to use a Card component so that I can create container for text, photos, and actions in the context of a single subject

The component should contain:

[x] Embedded className called dcx-card
[x] Embedded className called dcx-card--selected when the prop selected is true
[x] Embedded className called dcx-card-header
[x] Embedded className called dcx-card-content
[x] Embedded className called dcx-card-image
[x] Embedded className called dcx-card-actions
[x] Embedded className called dcx-card-footer
[x] dcx-card should have two variants normal or default simple behavior and action for actionable behavior
[x] dcx-card For actionable behavior need optional selected boolean prop

Code Guidance:

import { classNames } from '../common';
....
//for card-header
className={classNames(['dcx-card-header', className])}

Available Props:

[x] Relevant classes for shared / reusable styling for each element: card, cardHeader, cardContent, cardImage, cardActions, and cardFooter
[x] Add the ability to specify other props (...props) for each element: card, cardHeader, cardContent, cardImage, cardActions, and cardFooter

Code Guidance (Card, CardHeader, CardContent, CardActions, CardFooter):

children: JSX.Element[]; 
//Relevant classes for shared / reusable styling
className?: string;
//additional properties to support something else that we didn't plan
props?: React.HTMLAttributes<HTMLElement>;

Code Guidance (CardImage):

//Relevant classes for shared / reusable styling
className?: string;
//additional properties to support something else that we didn't plan
props?: React.HTMLAttributes<HTMLElement>;
// src of the image to add
src: string;
// alternative text of the image
alt: string;

Example:

<Card className="" props={{}}>
  <CardHeader className="" props={{}}>{{ Section anchored to the top of the card (adds padding) }}</CardHeader>
  <CardContent className="" props={{}}>{{ Primary card content (adds padding) }}</CardContext>
  <CardImage className="" src="" alt="" props={{}}>{{ Card image. Stretches the image to the container width }}</CardImage>
  <CardActions className="" props={{}}>{{ Container for buttons at the bottom of the card (adds padding) }}</CardActions>
  <CardFooter className="" props={{}}>{{ Section anchored to the bottom of the card }}</CardFooter>
</Card>

Behind the scenes the Card component could be like so:

<article className="dcx-card myCardClass">
   <!-- CardHeader -->
   <div className="dcx-card-header myCardClass">{children}</div>
   <!-- CardContent -->
   <p className="dcx-card-content myCardClass" >{children}</p>
   <!-- CardImage -->
   <img className="dcx-card-image myCardClass" src={} alt={}  />
   <!-- CardActions -->
   <div className="dcx-card-actions myCardClass">{children}</div>
   <!-- CardFooter -->
   <div className="dcx-card-footer myCardClass">{children}</div>
</article>

Tasks:

[x] Add unit tests
[x] Add Application code with commented props
[x] Add Demo use of component
[x] Add to storybook documentation file with examples (.mdx) in a section called Layout
[x] Add to live demo

Please follow the below to create your branch

git checkout release/1.0.0
git pull
git checkout -b 'feature/card'

Capgemini / dcx-react-library

Card #550