Add Feed component (#363)

* feat(Feed) Initial commit * feat(Feed) Docs and components update * feat(Feed) Docs and components update * feat(Feed) More docs and components * feat(Feed) Remove meta.library * feat(Feed) Update prop handling * feat(Feed) Update prop handling * feat(Feed) More shorthands * refactor(Feed): use string shorthand props * feat(Feed) Update prop handling and tests * fix(Feed) More tests * refactor(Feed): update to refactored utils * fix(Feed) Fixes and more tests * fix(Feed) Lint issues * fix(Feed) Update lint issues
Semantic-Org · Aug 14, 2016 · afe7851 · afe7851
1 parent 756ebbb
commit afe7851
Show file tree

Hide file tree

Showing 36 changed files with 1,428 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -133,7 +133,7 @@ Be sure to check out the above migrations before embarking on a new component.
 | x Button        | x Breadcrumb    | _ Advertisement | x Accordion     | x Form Validation  |
 | x Container     | x Form          | _ Card          | x Checkbox      | *API (NA)*         |
 | x Divider       | x Grid          | _ Comment       | _ Dimmer        | *Visibility (NA)*  |
-| x Flag          | x Menu          | _ Feed          | x Dropdown      |                    |
+| x Flag          | x Menu          | x Feed          | x Dropdown      |                    |
 | x Header        | x Message       | x Item          | _ Embed         |                    |
 | x Icon          | x Table         | x Statistic     | x Modal         |                    |
 | x Image         |                 |                 | _ Nag           |                    |

diff --git a/docs/app/Examples/views/Feed/Content/AdditionalInformation.js b/docs/app/Examples/views/Feed/Content/AdditionalInformation.js
@@ -0,0 +1,82 @@
+import _ from 'lodash'
+import React from 'react'
+import { Feed } from 'stardust'
+
+const { Content, Event, Extra, Label, Summary } = Feed
+const images = _.times(2, () => 'http://semantic-ui.com/images/wireframe/image.png')
+
+const AdditionalInformation = () => {
+  return (
+    <Feed>
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Content date='3 days ago'>
+          <Summary>
+            <a>Helen Troy</a> added 2 photos
+          </Summary>
+          <Extra images>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+          </Extra>
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Content date='3 days ago'>
+          <Summary>
+            <a>Helen Troy</a> added 2 photos
+          </Summary>
+          <Extra images={images} />
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Content date='3 days ago'>
+          <Summary>
+            <a>Helen Troy</a> added 2 photos
+          </Summary>
+          <Extra images={images} />
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Content date='3 days ago'>
+          <Summary>
+            <a>Helen Troy</a> added 2 photos
+          </Summary>
+          <Extra images>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+          </Extra>
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/laura.jpg' />
+        <Content date='3 days ago'>
+          <Summary>
+            <a>Laura Faucet</a> created a post
+          </Summary>
+          <Extra text>
+            Have you seen what's going on in Israel? Can you believe it.
+          </Extra>
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/laura.jpg' />
+        <Content date='3 days ago'>
+          <Summary>
+            <a>Laura Faucet</a> created a post
+          </Summary>
+          <Extra text="Have you seen what's going on in Israel? Can you believe it." />
+        </Content>
+      </Event>
+    </Feed>
+  )
+}
+
+export default AdditionalInformation
diff --git a/docs/app/Examples/views/Feed/Content/Date.js b/docs/app/Examples/views/Feed/Content/Date.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const imageSrc = 'http://semantic-ui.com/images/avatar/small/jenny.jpg'
+
+const Date = () => {
+  return (
+    <Feed>
+      <Feed.Event>
+        <Feed.Label image={imageSrc} />
+        <Feed.Content>
+          <Feed.Date>3 days ago</Feed.Date>
+          <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={imageSrc} />
+        <Feed.Content>
+          <Feed.Date date='3 days 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={imageSrc} />
+        <Feed.Content date='3 days 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={imageSrc} />
+        <Feed.Content
+          date='3 days ago'
+          summary='You added Jenny Hess to your coworker group.'
+        />
+      </Feed.Event>
+    </Feed>
+  )
+}
+
+export default Date
diff --git a/docs/app/Examples/views/Feed/Content/DateSummary.js b/docs/app/Examples/views/Feed/Content/DateSummary.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const { Content, Date, Event, Label, Summary } = Feed
+const imageSrc = 'http://semantic-ui.com/images/avatar/small/jenny.jpg'
+
+const DateSummary = () => {
+  return (
+    <Feed>
+      <Event>
+        <Label image={imageSrc} />
+        <Content>
+          <Summary>
+            You added <a>Jenny Hess</a> to your <a>coworker</a> group.
+
+            <Date>3 days ago</Date>
+          </Summary>
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image={imageSrc} />
+        <Content>
+          <Summary>
+            You added <a>Jenny Hess</a> to your <a>coworker</a> group.
+
+            <Date date='3 days ago' />
+          </Summary>
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image={imageSrc} />
+        <Content>
+          <Summary date='3 days ago'>
+            You added <a>Jenny Hess</a> to your <a>coworker</a> group.
+          </Summary>
+        </Content>
+      </Event>
+    </Feed>
+  )
+}
+
+export default DateSummary
diff --git a/docs/app/Examples/views/Feed/Content/LabelIcon.js b/docs/app/Examples/views/Feed/Content/LabelIcon.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const LabelImage = () => {
+  return (
+    <Feed>
+      <Feed.Event>
+        <Feed.Label icon='pencil' />
+        <Feed.Content>
+          <Feed.Summary>
+            You posted on your friend <a>Stevie Feliciano's</a> wall.
+            <Feed.Date>Today</Feed.Date>
+          </Feed.Summary>
+        </Feed.Content>
+      </Feed.Event>
+
+      <Feed.Event icon='pencil'>
+        <Feed.Content>
+          <Feed.Summary>
+            You posted on your friend <a>Stevie Feliciano's</a> wall.
+            <Feed.Date>Today</Feed.Date>
+          </Feed.Summary>
+        </Feed.Content>
+      </Feed.Event>
+    </Feed>
+  )
+}
+
+export default LabelImage
diff --git a/docs/app/Examples/views/Feed/Content/LabelImage.js b/docs/app/Examples/views/Feed/Content/LabelImage.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const image = <img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
+
+const LabelImage = () => {
+  return (
+    <div>
+      <Feed>
+        <Feed.Event>
+          <Feed.Label>
+            <img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
+          </Feed.Label>
+          <Feed.Content>
+            You added Elliot Fu to the group <a>Coworkers</a>
+          </Feed.Content>
+        </Feed.Event>
+
+        <Feed.Event image='http://semantic-ui.com/images/avatar/small/elliot.jpg'>
+          <Feed.Content>
+            You added Elliot Fu to the group <a>Coworkers</a>
+          </Feed.Content>
+        </Feed.Event>
+
+        <Feed.Event image={image}>
+          <Feed.Content>
+            You added Elliot Fu to the group <a>Coworkers</a>
+          </Feed.Content>
+        </Feed.Event>
+      </Feed>
+    </div>
+  )
+}
+
+export default LabelImage
diff --git a/docs/app/Examples/views/Feed/Content/index.js b/docs/app/Examples/views/Feed/Content/index.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const FeedContentExamples = () => {
+  return (
+    <ExampleSection title='Content'>
+      <ComponentExample
+        title='Label'
+        description='An event can contain an image or icon label'
+        examplePath='views/Feed/Content/LabelImage'
+      />
+      <ComponentExample examplePath='views/Feed/Content/LabelIcon' />
+
+      <ComponentExample
+        title='Date'
+        description='An event or an event summary can contain a date'
+        examplePath='views/Feed/Content/Date'
+      />
+      <ComponentExample examplePath='views/Feed/Content/DateSummary' />
+
+      <ComponentExample
+        title='Additional information'
+        description='An event can contain additional information like a set of images or text'
+        examplePath='views/Feed/Content/AdditionalInformation'
+      />
+    </ExampleSection>
+  )
+}
+
+export default FeedContentExamples
diff --git a/docs/app/Examples/views/Feed/Types/Basic.js b/docs/app/Examples/views/Feed/Types/Basic.js
@@ -0,0 +1,83 @@
+import React from 'react'
+import { Feed } from 'stardust'
+
+const { Content, Date, Event, Extra, Label, Like, Meta, Summary, User } = Feed
+
+const Basic = () => {
+  return (
+    <Feed>
+      <Event>
+        <Label>
+          <img src='http://semantic-ui.com/images/avatar/small/elliot.jpg' />
+        </Label>
+        <Content>
+          <Summary>
+            <User>Elliot Fu</User> added you as a friend
+            <Date>1 Hour Ago</Date>
+          </Summary>
+          <Meta>
+            <Like icon='like'>4 Likes</Like>
+          </Meta>
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/helen.jpg' />
+        <Content>
+          <Summary>
+            <a>Helen Troy</a> added <a>2 new illustrations</a>
+            <Date>4 days ago</Date>
+          </Summary>
+          <Extra images>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+          </Extra>
+          <Meta>
+            <Like>1 Like</Like>
+          </Meta>
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/jenny.jpg' />
+        <Content>
+          <Summary date='2 Days Ago'>
+            <User>Jenny Hess</User> added you as a friend
+          </Summary>
+          <Meta like='8 Likes' />
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/joe.jpg' />
+        <Content>
+          <Summary date='3 days ago'>
+            <a>Joe Henderson</a> posted on his page
+          </Summary>
+          <Extra text>
+            Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all
+            over again. Even if we don't run extra laps that day, we surely will come back for more of the same another
+            day soon.
+          </Extra>
+          <Meta like='5 Likes' />
+        </Content>
+      </Event>
+
+      <Event>
+        <Label image='http://semantic-ui.com/images/avatar/small/justen.jpg' />
+        <Content>
+          <Summary date='4 days ago'>
+            <a>Justen Kitsune</a> added <a>2 new photos</a> of you
+          </Summary>
+          <Extra images>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+            <a><img src='http://semantic-ui.com/images/wireframe/image.png' /></a>
+          </Extra>
+          <Meta like='41 Likes' />
+        </Content>
+      </Event>
+    </Feed>
+  )
+}
+
+export default Basic