Card: add component

[athurman]

Adds Card component to v1 API

http://semantic-ui.com/views/card.html

Types

Fluid Card

<div class="ui fluid card">
  ...
</div>

<Card fluid />

Centered Card

<div class="ui centered card">
  ...
</div>

<Card centered />

Raised Card

<div class="ui raised card">
  ...
</div>

<Card raised />

Link Card

<a class="ui card" href="http://www.dog.com">
  ...
</a>

<Card href='http://www.dog.com' />

<Card onClick={(e) => (this.onClick(e))} />

Colored Card

<div class="ui red card">
  ...
</div>

<Card color='red' />

Cards

A group of cards

<div class="ui cards">
  <div class="card">
    ...
  </div>
  <div class="card">
    ...
  </div>
</div

<Card.Group cards={[{}]} />

<Card.Group>
  <Card color='red' />
  <Card color='orange' />
</Card.Group>

Column Count

defines how many cards should exist in a row

<div class="ui four cards">
  <div class="card">
    ...
  </div>
  <div class="card">
    ...
  </div>
</div

<Card.Group itemsPerRow={4} />

Stackable

<div class="ui three stackable cards">
  <div class="card">
    ...
  </div>
  <div class="card">
    ...
  </div>
</div

<Card.Group itemsPerRow={3} stackable />

Doubling

<div class="ui six doubling cards">
  <div class="card">
    ...
  </div>
  <div class="card">
    ...
  </div>
</div

<Card.Group itemsPerRow={6} doubling />

[levithomason]

Add ui class as the first class. Then, put the user's className as the last class.

[levithomason]

Great, glad to have this started again. Let's get the subcomponents in and a doc example going. Reference the Rating docs for the most recent doc site pattern.

[levithomason]

API looks like a good start. Linking to the docs is helpful but you don't have to go through that if you don't want!

Still thinking about the absence of the ui class on the card when in cards. Though, as we tested the markup is OK with it included.

We just need to add the subcomponents now:

Content

<div class="content"></div>

<Card.Content />

extra

<div class="extra content"></div>

<Card.Content extra />

Header

<div class="header"></div>

<Card.Header />

Description

<div class="description"></div>

<Card.Description />

Meta

<div class="meta"></div>

<Card.Meta />

[codecov-io]

Current coverage is 95.10% (diff: 100%)

Merging #387 into master will increase coverage by 0.20%

@@             master       #387   diff @@
==========================================
  Files            85         91     +6   
  Lines          1119       1165    +46   
  Methods           0          0          
  Messages          0          0          
  Branches          0          0          
==========================================
+ Hits           1062       1108    +46   
  Misses           57         57          
  Partials          0          0          

Powered by Codecov. Last update 8ffd7e0...05718d6

[levithomason]

We have another propUtil to get the rest:

import { getUnhandledProps } from '../../utils/propUtils'

const rest = getUnhandledProps(Card, props)

This is needed since we might not always destructure all the props when using ...rest. Especially when there are multiple render methods. The util creates an object of all the props that your component does not handle (i.e. the rest of the user's props).

[levithomason]

I've updated this PR to use the newly refactored utils, see #388. I also updated the shorthand props to comply with our latest RFC on this, #391.

[levithomason]

This strikes me as strange, can we use a regular string here? If we're fighting max column issues, we can put more content on a single line:

const description = [
  'Amy is a violinist with 2 years experience in the wedding industry.',
  'She enjoys the outdoors and currently resides in upstate New York.',
].join(' ')

[levithomason]

Before I also forget, here's a reminder to mark the "Card" off in the README.md support table.

[levithomason]

@athurman bump:

Before I also forget, here's a reminder to mark the "Card" off in the README.md support table.

[levithomason]

For shorthand examples where there are no nodes between the Card and Content, let's just put the props on the Card:

<Card 
  href='#link'
  header='Elliot Baker'
  meta='Friend'
  description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'
/>

[levithomason]

To assist with the docs, let's separate the shorthand props examples into separate files. This way there are two descriptions and two code blocks. It also removes the need for the extra div wrapper.

See this thread for more context and an example: https://github.com/TechnologyAdvice/stardust/pull/344#discussion_r74117525

[levithomason]

Whoops, no # when defining an href.

Oh, I see, this is going to link to the example of the same name. In the future, prefer empty # to linking to actual anchors. No need to update. 👍

[levithomason]

Released in v0.35.0