style(Comment): update typings and propTypes usage (Semantic-Org#1293)

* style(Comment): update typings and propTypes usage

* docs(CommentContent): update component description

* docs(CommentText): update component description

Author: layershifter

src/views/Comment/Comment.js

@@ -18,14 +18,10 @@ import CommentMetadata from './CommentMetadata'
 import CommentText from './CommentText'
 
 /**
- * A comment displays user feedback to site content
+ * A comment displays user feedback to site content.
  * */
 function Comment(props) {
-  const {
-    className,
-    children,
-    collapsed,
-  } = props
+  const { className, children, collapsed } = props
 
   const classes = cx(
     useKeyOnly(collapsed, 'collapsed'),

src/views/Comment/CommentAction.js

@@ -9,12 +9,11 @@ import {
   useKeyOnly,
 } from '../../lib'
 
+/**
+ * A comment can contain an action.
+ */
 function CommentAction(props) {
-  const {
-    active,
-    className,
-    children,
-  } = props
+  const { active, className, children } = props
 
   const classes = cx(
     useKeyOnly(active, 'active'),

src/views/Comment/CommentActions.js

@@ -8,6 +8,9 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A comment can contain an list of actions a user may perform related to this comment.
+ */
 function CommentActions(props) {
   const { className, children } = props
   const classes = cx('actions', className)

src/views/Comment/CommentAuthor.js

@@ -8,6 +8,9 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A comment can contain an author.
+ */
 function CommentAuthor(props) {
   const { className, children } = props
   const classes = cx('author', className)

src/views/Comment/CommentAvatar.js

@@ -9,6 +9,9 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A comment can contain an image or avatar.
+ */
 function CommentAvatar(props) {
   const { className, src } = props
   const classes = cx('avatar', className)

src/views/Comment/CommentContent.js

@@ -8,9 +8,12 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A comment can contain content.
+ */
 function CommentContent(props) {
   const { className, children } = props
-  const classes = cx('content', className)
+  const classes = cx(className, 'content')
   const rest = getUnhandledProps(CommentContent, props)
   const ElementType = getElementType(CommentContent, props)
 

src/views/Comment/CommentGroup.js

@@ -9,6 +9,9 @@ import {
   useKeyOnly,
 } from '../../lib'
 
+/**
+ * Comments can be grouped.
+ */
 function CommentGroup(props) {
   const {
     className,
@@ -51,10 +54,10 @@ CommentGroup.propTypes = {
   /** Comments can be collapsed, or hidden from view. */
   collapsed: PropTypes.bool,
 
-  /** Comments can hide extra information unless a user shows intent to interact with a comment */
+  /** Comments can hide extra information unless a user shows intent to interact with a comment. */
   minimal: PropTypes.bool,
 
-  /** A comment list can be threaded to showing the relationship between conversations */
+  /** A comment list can be threaded to showing the relationship between conversations. */
   threaded: PropTypes.bool,
 }
 

src/views/Comment/CommentMetadata.js

@@ -8,6 +8,9 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
+ */
 function CommentMetadata(props) {
   const { className, children } = props
   const classes = cx('metadata', className)

src/views/Comment/CommentText.js

@@ -8,9 +8,12 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A comment can contain text.
+ */
 function CommentText(props) {
   const { className, children } = props
-  const classes = cx('text', className)
+  const classes = cx(className, 'text')
   const rest = getUnhandledProps(CommentText, props)
   const ElementType = getElementType(CommentText, props)
 

src/views/Comment/index.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 interface CommentProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -14,35 +16,39 @@ interface CommentProps {
   collapsed?: boolean;
 }
 
-interface CommentClass extends React.ComponentClass<CommentProps> {
-  Author: typeof CommentAuthor;
+interface CommentComponent extends React.StatelessComponent<CommentProps> {
   Action: typeof CommentAction;
   Actions: typeof CommentActions;
+  Author: typeof CommentAuthor;
   Avatar: typeof CommentAvatar;
   Content: typeof CommentContent;
   Group: typeof CommentGroup;
   Metadata: typeof CommentMetadata;
   Text: typeof CommentText;
 }
 
-export const Comment: CommentClass;
+export const Comment: CommentComponent;
+
+interface CommentActionProps {
+  [key: string]: any;
 
-interface CommentAuthorProps {
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** Style as the currently active action. */
+  active?: boolean;
+
   /** Primary content. */
   children?: React.ReactNode;
 
   /** Additional classes. */
   className?: string;
 }
 
-export const CommentAuthor: React.ComponentClass<CommentAuthorProps>;
+export const CommentAction: React.ComponentClass<CommentActionProps>;
 
-interface CommentActionProps {
-  /** Style as the currently active action. */
-  active?: boolean;
+interface CommentActionsProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
@@ -54,11 +60,13 @@ interface CommentActionProps {
   className?: string;
 }
 
-export const CommentAction: React.ComponentClass<CommentActionProps>;
+export const CommentActions: React.StatelessComponent<CommentActionsProps>;
+
+interface CommentAuthorProps {
+  [key: string]: any;
 
-interface CommentActionsProps {
   /** An element type to render as (string or function). */
-  as?: any;
+    as?: any;
 
   /** Primary content. */
   children?: React.ReactNode;
@@ -67,9 +75,11 @@ interface CommentActionsProps {
   className?: string;
 }
 
-export const CommentActions: React.ComponentClass<CommentActionsProps>;
+export const CommentAuthor: React.StatelessComponent<CommentAuthorProps>;
 
 interface CommentAvatarProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -80,9 +90,11 @@ interface CommentAvatarProps {
   src?: string;
 }
 
-export const CommentAvatar: React.ComponentClass<CommentAvatarProps>;
+export const CommentAvatar: React.StatelessComponent<CommentAvatarProps>;
 
 interface CommentContentProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -93,9 +105,11 @@ interface CommentContentProps {
   className?: string;
 }
 
-export const CommentContent: React.ComponentClass<CommentContentProps>;
+export const CommentContent: React.StatelessComponent<CommentContentProps>;
 
 interface CommentGroupProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -115,9 +129,10 @@ interface CommentGroupProps {
   threaded?: boolean;
 }
 
-export const CommentGroup: React.ComponentClass<CommentGroupProps>;
+export const CommentGroup: React.StatelessComponent<CommentGroupProps>;
 
 interface CommentMetadataProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
@@ -129,9 +144,10 @@ interface CommentMetadataProps {
   className?: string;
 }
 
-export const CommentMetadata: React.ComponentClass<CommentMetadataProps>;
+export const CommentMetadata: React.StatelessComponent<CommentMetadataProps>;
 
 interface CommentTextProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
@@ -143,4 +159,4 @@ interface CommentTextProps {
   className?: string;
 }
 
-export const CommentText: React.ComponentClass<CommentTextProps>;
+export const CommentText: React.StatelessComponent<CommentTextProps>;

test/specs/views/Comment/Comment-test.js

@@ -1,4 +1,3 @@
-import * as common from 'test/specs/commonTests'
 import Comment from 'src/views/Comment/Comment'
 import CommentAction from 'src/views/Comment/CommentAction'
 import CommentActions from 'src/views/Comment/CommentActions'
@@ -8,6 +7,7 @@ import CommentContent from 'src/views/Comment/CommentContent'
 import CommentGroup from 'src/views/Comment/CommentGroup'
 import CommentMetadata from 'src/views/Comment/CommentMetadata'
 import CommentText from 'src/views/Comment/CommentText'
+import * as common from 'test/specs/commonTests'
 
 describe('Comment', () => {
   common.isConformant(Comment)

test/specs/views/Comment/CommentAction-test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import * as common from 'test/specs/commonTests'
 import CommentAction from 'src/views/Comment/CommentAction'
+import * as common from 'test/specs/commonTests'
 
 describe('CommentAction', () => {
   common.isConformant(CommentAction)

test/specs/views/Comment/CommentActions-test.js

@@ -1,5 +1,5 @@
-import * as common from 'test/specs/commonTests'
 import CommentActions from 'src/views/Comment/CommentActions'
+import * as common from 'test/specs/commonTests'
 
 describe('CommentActions', () => {
   common.isConformant(CommentActions)

test/specs/views/Comment/CommentAuthor-test.js

@@ -1,5 +1,5 @@
-import * as common from 'test/specs/commonTests'
 import CommentAuthor from 'src/views/Comment/CommentAuthor'
+import * as common from 'test/specs/commonTests'
 
 describe('CommentAuthor', () => {
   common.isConformant(CommentAuthor)

test/specs/views/Comment/CommentAvatar-test.js

@@ -1,8 +1,8 @@
 import faker from 'faker'
 import React from 'react'
 
-import * as common from 'test/specs/commonTests'
 import CommentAvatar from 'src/views/Comment/CommentAvatar'
+import * as common from 'test/specs/commonTests'
 
 describe('CommentAvatar', () => {
   common.isConformant(CommentAvatar)

test/specs/views/Comment/CommentContent-test.js

@@ -1,5 +1,5 @@
-import * as common from 'test/specs/commonTests'
 import CommentContent from 'src/views/Comment/CommentContent'
+import * as common from 'test/specs/commonTests'
 
 describe('CommentContent', () => {
   common.isConformant(CommentContent)

test/specs/views/Comment/CommentGroup-test.js

@@ -1,5 +1,5 @@
-import * as common from 'test/specs/commonTests'
 import CommentGroup from 'src/views/Comment/CommentGroup'
+import * as common from 'test/specs/commonTests'
 
 describe('CommentGroup', () => {
   common.isConformant(CommentGroup)

test/specs/views/Comment/CommentMetadata-test.js

@@ -1,5 +1,5 @@
-import * as common from 'test/specs/commonTests'
 import CommentMetadata from 'src/views/Comment/CommentMetadata'
+import * as common from 'test/specs/commonTests'
 
 describe('CommentMetadata', () => {
   common.isConformant(CommentMetadata)

test/specs/views/Comment/CommentText-test.js

@@ -1,5 +1,5 @@
-import * as common from 'test/specs/commonTests'
 import CommentText from 'src/views/Comment/CommentText'
+import * as common from 'test/specs/commonTests'
 
 describe('CommentText', () => {
   common.isConformant(CommentText)