feat(Comment): add size prop to Group (Semantic-Org#1327)

* fix(Comment.Group): added size prop * fix(Comment.Group): appending size prop value to className, added tests * fix(Comment.Group): refactor to use SUI sizes * fix(Comment.Group): fix typings * Update index.d.ts * Update CommentGroup-test.js * Update CommentGroup.js * Update index.d.ts * docs(Comment.Group): added comment group size examples to doc site
harel · Feb 18, 2017 · 6079eb9 · 6079eb9
1 parent 3b19184
commit 6079eb9
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 0 deletions.
diff --git a/docs/app/Examples/views/Comment/Variations/CommentExampleGroupSize.js b/docs/app/Examples/views/Comment/Variations/CommentExampleGroupSize.js
@@ -0,0 +1,129 @@
+import React from 'react'
+import { Comment, Header } from 'semantic-ui-react'
+
+const CommentExampleGroupSize = () => (
+  <div>
+    <Comment.Group size='mini'>
+      <Header as='h3' dividing>Mini Comments</Header>
+
+      <Comment>
+        <Comment.Avatar as='a' src='http://semantic-ui.com/images/avatar/small/matt.jpg' />
+        <Comment.Content>
+          <Comment.Author as='a'>Matt</Comment.Author>
+          <Comment.Metadata>
+            <span>Today at 5:42PM</span>
+          </Comment.Metadata>
+          <Comment.Text>How artistic!</Comment.Text>
+          <Comment.Actions>
+            <a>Reply</a>
+          </Comment.Actions>
+        </Comment.Content>
+      </Comment>
+      <Comment>
+        <Comment.Avatar as='a' src='http://semantic-ui.com/images/avatar/small/joe.jpg' />
+        <Comment.Content>
+          <Comment.Author as='a'>Joe Henderson</Comment.Author>
+          <Comment.Metadata>
+            <span>5 days ago</span>
+          </Comment.Metadata>
+          <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
+          <Comment.Actions>
+            <a>Reply</a>
+          </Comment.Actions>
+        </Comment.Content>
+      </Comment>
+    </Comment.Group>
+    <Comment.Group size='small'>
+      <Header as='h3' dividing>Small Comments</Header>
+
+      <Comment>
+        <Comment.Avatar as='a' src='http://semantic-ui.com/images/avatar/small/matt.jpg' />
+        <Comment.Content>
+          <Comment.Author as='a'>Matt</Comment.Author>
+          <Comment.Metadata>
+            <span>Today at 5:42PM</span>
+          </Comment.Metadata>
+          <Comment.Text>How artistic!</Comment.Text>
+          <Comment.Actions>
+            <a>Reply</a>
+          </Comment.Actions>
+        </Comment.Content>
+      </Comment>
+      <Comment>
+        <Comment.Avatar as='a' src='http://semantic-ui.com/images/avatar/small/joe.jpg' />
+        <Comment.Content>
+          <Comment.Author as='a'>Joe Henderson</Comment.Author>
+          <Comment.Metadata>
+            <span>5 days ago</span>
+          </Comment.Metadata>
+          <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
+          <Comment.Actions>
+            <a>Reply</a>
+          </Comment.Actions>
+        </Comment.Content>
+      </Comment>
+    </Comment.Group>
+    <Comment.Group size='large'>
+      <Header as='h3' dividing>Large Comments</Header>
+
+      <Comment>
+        <Comment.Avatar as='a' src='http://semantic-ui.com/images/avatar/small/matt.jpg' />
+        <Comment.Content>
+          <Comment.Author as='a'>Matt</Comment.Author>
+          <Comment.Metadata>
+            <span>Today at 5:42PM</span>
+          </Comment.Metadata>
+          <Comment.Text>How artistic!</Comment.Text>
+          <Comment.Actions>
+            <a>Reply</a>
+          </Comment.Actions>
+        </Comment.Content>
+      </Comment>
+      <Comment>
+        <Comment.Avatar as='a' src='http://semantic-ui.com/images/avatar/small/joe.jpg' />
+        <Comment.Content>
+          <Comment.Author as='a'>Joe Henderson</Comment.Author>
+          <Comment.Metadata>
+            <span>5 days ago</span>
+          </Comment.Metadata>
+          <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
+          <Comment.Actions>
+            <a>Reply</a>
+          </Comment.Actions>
+        </Comment.Content>
+      </Comment>
+    </Comment.Group>
+    <Comment.Group size='massive'>
+      <Header as='h3' dividing>Massive Comments</Header>
+
+      <Comment>
+        <Comment.Avatar as='a' src='http://semantic-ui.com/images/avatar/small/matt.jpg' />
+        <Comment.Content>
+          <Comment.Author as='a'>Matt</Comment.Author>
+          <Comment.Metadata>
+            <span>Today at 5:42PM</span>
+          </Comment.Metadata>
+          <Comment.Text>How artistic!</Comment.Text>
+          <Comment.Actions>
+            <a>Reply</a>
+          </Comment.Actions>
+        </Comment.Content>
+      </Comment>
+      <Comment>
+        <Comment.Avatar as='a' src='http://semantic-ui.com/images/avatar/small/joe.jpg' />
+        <Comment.Content>
+          <Comment.Author as='a'>Joe Henderson</Comment.Author>
+          <Comment.Metadata>
+            <span>5 days ago</span>
+          </Comment.Metadata>
+          <Comment.Text>Dude, this is awesome. Thanks so much</Comment.Text>
+          <Comment.Actions>
+            <a>Reply</a>
+          </Comment.Actions>
+        </Comment.Content>
+      </Comment>
+    </Comment.Group>
+  </div>
+)
+
+export default CommentExampleGroupSize
diff --git a/docs/app/Examples/views/Comment/Variations/index.js b/docs/app/Examples/views/Comment/Variations/index.js
@@ -15,6 +15,11 @@ const CommentVariations = () => (
       description='Comments can hide extra information unless a user shows intent to interact with a comment.'
       examplePath='views/Comment/Variations/CommentExampleMinimal'
     />
+    <ComponentExample
+      title='Size'
+      description='Commments can have various sizes '
+      examplePath='views/Comment/Variations/CommentExampleGroupSize'
+    />
   </ExampleSection>
 )
 

diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js
@@ -1,11 +1,13 @@
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
+  SUI,
   useKeyOnly,
 } from '../../lib'
 
@@ -18,11 +20,13 @@ function CommentGroup(props) {
     children,
     collapsed,
     minimal,
+    size,
     threaded,
   } = props
 
   const classes = cx(
     'ui',
+    size,
     useKeyOnly(collapsed, 'collapsed'),
     useKeyOnly(minimal, 'minimal'),
     useKeyOnly(threaded, 'threaded'),
@@ -57,6 +61,9 @@ CommentGroup.propTypes = {
   /** Comments can hide extra information unless a user shows intent to interact with a comment. */
   minimal: PropTypes.bool,
 
+  /** Comments can have different sizes. */
+  size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
+
   /** A comment list can be threaded to showing the relationship between conversations. */
   threaded: PropTypes.bool,
 }

diff --git a/src/views/Comment/index.d.ts b/src/views/Comment/index.d.ts
@@ -125,6 +125,9 @@ interface CommentGroupProps {
   /** Comments can hide extra information unless a user shows intent to interact with a comment */
   minimal?: boolean;
 
+  /** Comments can have different sizes. */
+  size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive';
+
   /** A comment list can be threaded to showing the relationship between conversations */
   threaded?: boolean;
 }

diff --git a/test/specs/views/Comment/CommentGroup-test.js b/test/specs/views/Comment/CommentGroup-test.js
@@ -1,3 +1,6 @@
+import _ from 'lodash'
+
+import { SUI } from 'src/lib'
 import CommentGroup from 'src/views/Comment/CommentGroup'
 import * as common from 'test/specs/commonTests'
 
@@ -8,4 +11,6 @@ describe('CommentGroup', () => {
   common.propKeyOnlyToClassName(CommentGroup, 'collapsed')
   common.propKeyOnlyToClassName(CommentGroup, 'minimal')
   common.propKeyOnlyToClassName(CommentGroup, 'threaded')
+
+  common.propValueOnlyToClassName(CommentGroup, 'size', _.without(SUI.SIZES, 'medium'))
 })