feat(Cards): add docs examples

Semantic-Org · Aug 15, 2016 · a099621 · a099621
1 parent 8ff1f38
commit a099621
Show file tree

Hide file tree

Showing 15 changed files with 378 additions and 3 deletions.
diff --git a/docs/app/Examples/views/Card/Content/ContentBlock.js b/docs/app/Examples/views/Card/Content/ContentBlock.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import { Card, Feed } from 'stardust'
+
+const ContentBlock = () => (
+  <div>
+    <Card>
+      <Card.Content>
+        <Card.Header>
+          Recent Activity
+        </Card.Header>
+      </Card.Content>
+      <Card.Content>
+        <Feed>
+          <Feed.Event>
+            <Feed.Label image='http://semantic-ui.com/images/avatar/small/jenny.jpg' />
+            <Feed.Content>
+              <Feed.Date date='1 day ago' />
+              <Feed.Summary>
+                You added <a>Jenny Hess</a> to your <a>coworker</a> group.
+              </Feed.Summary>
+            </Feed.Content>
+          </Feed.Event>
+
+          <Feed.Event>
+            <Feed.Label image='http://semantic-ui.com/images/avatar2/small/molly.png' />
+            <Feed.Content>
+              <Feed.Date date='3 days ago' />
+              <Feed.Summary>
+                You added <a>Molly Malone</a> as a friend.
+              </Feed.Summary>
+            </Feed.Content>
+          </Feed.Event>
+
+          <Feed.Event>
+            <Feed.Label image='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
+            <Feed.Content date='4 days ago'>
+              <Feed.Summary>
+                You added <a>Elliot Baker</a> to your <a>musicians</a> group.
+              </Feed.Summary>
+            </Feed.Content>
+          </Feed.Event>
+        </Feed>
+      </Card.Content>
+    </Card>
+  </div>
+)
+
+export default ContentBlock
diff --git a/docs/app/Examples/views/Card/Content/ExtraContent.js b/docs/app/Examples/views/Card/Content/ExtraContent.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { Card, Icon } from 'stardust'
+
+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(' ')
+
+const ExtraContent = () => (
+  <div>
+    <Card>
+      <Card.Content>
+        <Card.Header>
+          About Amy
+        </Card.Header>
+      </Card.Content>
+      <Card.Content description={description} />
+      <Card.Content extra>
+        <Icon name='user' />
+        4 Friends
+      </Card.Content>
+    </Card>
+  </div>
+)
+
+export default ExtraContent
diff --git a/docs/app/Examples/views/Card/Content/HeaderCard.js b/docs/app/Examples/views/Card/Content/HeaderCard.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import { Card } from 'stardust'
+
+const HeaderCards = () => (
+  <div>
+    <Card.Group>
+      <Card>
+        <Card.Content>
+          <Card.Header>
+            Matthew Harris
+          </Card.Header>
+          <Card.Meta>
+            Co-Worker
+          </Card.Meta>
+          <Card.Description>
+            Matthew is a pianist living in Nashville.
+          </Card.Description>
+        </Card.Content>
+      </Card>
+
+      <Card>
+        <Card.Content>
+          <Card.Header content='Jake Smith' />
+          <Card.Meta content='Musicians' />
+          <Card.Description content='Jake is a drummer living in New York.' />
+        </Card.Content>
+      </Card>
+
+      <Card>
+        <Card.Content
+          header='Elliot Baker'
+          meta='Friend'
+          description='Elliot is a music producer living in Chicago.'
+        />
+      </Card>
+    </Card.Group>
+  </div>
+)
+
+export default HeaderCards
diff --git a/docs/app/Examples/views/Card/Content/ImageCard.js b/docs/app/Examples/views/Card/Content/ImageCard.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Card, Icon, Image } from 'stardust'
+
+const ImageCard = () => (
+  <div>
+    <Card>
+      <Image src='http://semantic-ui.com/images/avatar/large/daniel.jpg' />
+      <Card.Content>
+        <Card.Header>
+          Daniel
+        </Card.Header>
+        <Card.Meta>
+          <span className='date'>
+            Joined in 2016
+          </span>
+        </Card.Meta>
+        <Card.Description>
+          Daniel is a comedian living in Nashville.
+        </Card.Description>
+      </Card.Content>
+      <Card.Content extra>
+        <a>
+          <Icon name='user' />
+          10 Friends
+        </a>
+      </Card.Content>
+    </Card>
+  </div>
+)
+
+export default ImageCard
diff --git a/docs/app/Examples/views/Card/Content/LinkCard.js b/docs/app/Examples/views/Card/Content/LinkCard.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Card } from 'stardust'
+
+const LinkCard = () => (
+  <div>
+    <Card href='#link'>
+      <Card.Content
+        header='Elliot Baker'
+        meta='Friend'
+        description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'
+      />
+    </Card>
+  </div>
+)
+
+export default LinkCard
diff --git a/docs/app/Examples/views/Card/Content/index.js b/docs/app/Examples/views/Card/Content/index.js
@@ -0,0 +1,36 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const Content = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Content Block'
+      description='A card contains blocks of content'
+      examplePath='views/Card/Content/ContentBlock'
+    />
+    <ComponentExample
+      title='Extra Content'
+      description='A card can contain extra content meant to be formatted separately from the main content'
+      examplePath='views/Card/Content/ExtraContent'
+    />
+    <ComponentExample
+      title='Image'
+      description='A card can contain an image'
+      examplePath='views/Card/Content/ImageCard'
+    />
+    <ComponentExample
+      title='Header'
+      description='A card can contain a header'
+      examplePath='views/Card/Content/HeaderCard'
+    />
+    <ComponentExample
+      title='Link'
+      description='A card can be formatted to link to other contnet'
+      examplePath='views/Card/Content/LinkCard'
+    />
+  </ExampleSection>
+)
+
+export default Content
diff --git a/docs/app/Examples/views/Card/Types/Groups.js b/docs/app/Examples/views/Card/Types/Groups.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import { Button, Card, Image } from 'stardust'
+
+const Groups = () => (
+  <div>
+    <Card.Group>
+      <Card>
+        <Card.Content>
+          <Image floated='right' size='mini' src='http://semantic-ui.com/images/avatar/large/steve.jpg' />
+          <Card.Header>
+            Steve Sanders
+          </Card.Header>
+          <Card.Meta>
+            Friends of Elliot
+          </Card.Meta>
+          <Card.Description>
+            Steve wants to add you to the group <strong>best friends</strong>
+          </Card.Description>
+        </Card.Content>
+        <Card.Content extra>
+          <div className='ui two buttons'>
+            <Button className='basic green'>Approve</Button>
+            <Button className='basic red'>Decline</Button>
+          </div>
+        </Card.Content>
+      </Card>
+      <Card>
+        <Card.Content>
+          <Image floated='right' size='mini' src='http://semantic-ui.com/images/avatar2/large/molly.png' />
+          <Card.Header>
+            Molly Thomas
+          </Card.Header>
+          <Card.Meta>
+            New User
+          </Card.Meta>
+          <Card.Description>
+            Molly wants to add you to the group <strong>musicians</strong>
+          </Card.Description>
+        </Card.Content>
+        <Card.Content extra>
+          <div className='ui two buttons'>
+            <Button className='basic green'>Approve</Button>
+            <Button className='basic red'>Decline</Button>
+          </div>
+        </Card.Content>
+      </Card>
+      <Card>
+        <Card.Content>
+          <Image floated='right' size='mini' src='http://semantic-ui.com/images/avatar/large/jenny.jpg' />
+          <Card.Header>
+            Jenny Lawrence
+          </Card.Header>
+          <Card.Meta>
+            New User
+          </Card.Meta>
+          <Card.Description>
+            Jenny requested permission to view your contact details
+          </Card.Description>
+        </Card.Content>
+        <Card.Content extra>
+          <div className='ui two buttons'>
+            <Button className='basic green'>Approve</Button>
+            <Button className='basic red'>Decline</Button>
+          </div>
+        </Card.Content>
+      </Card>
+    </Card.Group>
+  </div>
+)
+
+export default Groups
diff --git a/docs/app/Examples/views/Card/Types/IndividualCard.js b/docs/app/Examples/views/Card/Types/IndividualCard.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import { Card, Icon, Image } from 'stardust'
+
+const IndividualCard = () => (
+  <div>
+    <Card>
+      <Image src='http://semantic-ui.com/images/avatar2/large/matthew.png' />
+      <Card.Content>
+        <Card.Header>
+          Matthew
+        </Card.Header>
+        <Card.Meta>
+          <span className='date'>
+            Joined in 2015
+          </span>
+        </Card.Meta>
+        <Card.Description>
+          Matthew is a musician living in Nashville.
+        </Card.Description>
+      </Card.Content>
+      <Card.Content extra>
+        <a>
+          <Icon name='user' />
+          22 Friends
+        </a>
+      </Card.Content>
+    </Card>
+
+    <Card>
+      <Card.Content
+        header='Elliot Baker'
+        meta='Friend'
+        description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'
+      />
+    </Card>
+  </div>
+)
+
+export default IndividualCard
diff --git a/docs/app/Examples/views/Card/Types/index.js b/docs/app/Examples/views/Card/Types/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Card'
+      description='A card displays site content in a manner similar to a playing card'
+      examplePath='views/Card/Types/IndividualCard'
+    />
+    <ComponentExample
+      title='Cards'
+      description='A group of cards'
+      examplePath='views/Card/Types/Groups'
+    />
+  </ExampleSection>
+)
+
+export default Types
diff --git a/docs/app/Examples/views/Card/Variations/index.js b/docs/app/Examples/views/Card/Variations/index.js
diff --git a/docs/app/Examples/views/Card/index.js b/docs/app/Examples/views/Card/index.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import Content from './Content'
+import Types from './Types'
+
+const CardExamples = () => (
+  <div>
+    <Types />
+    <Content />
+  </div>
+)
+
+export default CardExamples
diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js
@@ -61,13 +61,28 @@ Card._meta = {
 }
 
 Card.propTypes = {
+  /** A Card can center itself inside its container. */
   centered: PropTypes.bool,
+
+  /** Primary content of the Card. */
   children: PropTypes.node,
+
+  /** Classes that will be added to the Card className. */
   className: PropTypes.string,
+
+  /** A Card can be formatted to display different colors. */
   color: PropTypes.oneOf(Card._meta.props.color),
+
+  /** A Card can be formatted to take up the width of its container. */
   fluid: PropTypes.bool,
+
+  /** Render as an `a` tag instead of a `div` and adds the href attribute. */
   href: PropTypes.string,
+
+  /** Render as an `a` tag instead of a `div` and called with event on Card click. */
   onClick: PropTypes.func,
+
+  /** A Card can be formatted to raise above the page. */
   raised: PropTypes.bool,
 }