diff --git a/src/views/Feed/Feed.js b/src/views/Feed/Feed.js index 4a228ae024..648dd062b3 100644 --- a/src/views/Feed/Feed.js +++ b/src/views/Feed/Feed.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -20,8 +20,19 @@ import FeedSummary from './FeedSummary' import FeedUser from './FeedUser' function Feed(props) { - const { children, className, events, size } = props - const classes = cx('ui', className, size, 'feed') + const { + children, + className, + events, + size, + } = props + + const classes = cx( + 'ui', + size, + 'feed', + className, + ) const rest = getUnhandledProps(Feed, props) const ElementType = getElementType(Feed, props) @@ -50,9 +61,6 @@ function Feed(props) { Feed._meta = { name: 'Feed', type: META.TYPES.VIEW, - props: { - size: _.without(SUI.SIZES, 'mini', 'tiny', 'medium', 'big', 'huge', 'massive'), - }, } Feed.propTypes = { @@ -69,7 +77,7 @@ Feed.propTypes = { events: customPropTypes.collectionShorthand, /** A feed can have different sizes. */ - size: PropTypes.oneOf(Feed._meta.props.size), + size: PropTypes.oneOf(_.without(SUI.SIZES, 'mini', 'tiny', 'medium', 'big', 'huge', 'massive')), } Feed.Content = FeedContent diff --git a/src/views/Feed/FeedContent.js b/src/views/Feed/FeedContent.js index 58ce912348..b243efd1da 100644 --- a/src/views/Feed/FeedContent.js +++ b/src/views/Feed/FeedContent.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -15,8 +15,18 @@ import FeedMeta from './FeedMeta' import FeedSummary from './FeedSummary' function FeedContent(props) { - const { children, className, content, extraImages, extraText, date, meta, summary } = props - const classes = cx(className, 'content') + const { + children, + className, + content, + extraImages, + extraText, + date, + meta, + summary, + } = props + + const classes = cx('content', className) const rest = getUnhandledProps(FeedContent, props) const ElementType = getElementType(FeedContent, props) diff --git a/src/views/Feed/FeedDate.js b/src/views/Feed/FeedDate.js index 585f122eb7..8085f066df 100644 --- a/src/views/Feed/FeedDate.js +++ b/src/views/Feed/FeedDate.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -8,16 +8,21 @@ import { getUnhandledProps, META, } from '../../lib' + /** - * Show a feed date + * An event or an event summary can contain a date. */ function FeedDate(props) { const { children, className, content } = props - const classes = cx(className, 'date') + const classes = cx('date', className) const rest = getUnhandledProps(FeedDate, props) const ElementType = getElementType(FeedDate, props) - return {_.isNil(children) ? content : children} + return ( + + {_.isNil(children) ? content : children} + + ) } FeedDate._meta = { diff --git a/src/views/Feed/FeedEvent.js b/src/views/Feed/FeedEvent.js index 22352d7163..dc4e9fa90e 100644 --- a/src/views/Feed/FeedEvent.js +++ b/src/views/Feed/FeedEvent.js @@ -11,9 +11,24 @@ import { import FeedContent from './FeedContent' import FeedLabel from './FeedLabel' +/** + * A feed contains an event. + */ function FeedEvent(props) { - const { content, children, className, date, extraImages, extraText, image, icon, meta, summary } = props - const classes = cx(className, 'event') + const { + content, + children, + className, + date, + extraImages, + extraText, + image, + icon, + meta, + summary, + } = props + + const classes = cx('event', className) const rest = getUnhandledProps(FeedEvent, props) const ElementType = getElementType(FeedEvent, props) @@ -47,16 +62,16 @@ FeedEvent.propTypes = { className: PropTypes.string, /** Shorthand for FeedContent. */ - content: FeedContent.propTypes.content, + content: customPropTypes.itemShorthand, /** Shorthand for FeedDate. */ - date: FeedContent.propTypes.date, + date: customPropTypes.itemShorthand, /** Shorthand for FeedExtra with images. */ - extraImages: FeedContent.propTypes.extraImages, + extraImages: customPropTypes.itemShorthand, /** Shorthand for FeedExtra with content. */ - extraText: FeedContent.propTypes.extraText, + extraText: customPropTypes.itemShorthand, /** An event can contain icon label. */ icon: customPropTypes.itemShorthand, @@ -65,10 +80,10 @@ FeedEvent.propTypes = { image: customPropTypes.itemShorthand, /** Shorthand for FeedMeta. */ - meta: FeedContent.propTypes.meta, + meta: customPropTypes.itemShorthand, /** Shorthand for FeedSummary. */ - summary: FeedContent.propTypes.summary, + summary: customPropTypes.itemShorthand, } export default FeedEvent diff --git a/src/views/Feed/FeedExtra.js b/src/views/Feed/FeedExtra.js index 56b03def98..2be6bba49b 100644 --- a/src/views/Feed/FeedExtra.js +++ b/src/views/Feed/FeedExtra.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -11,13 +11,22 @@ import { useKeyOnly, } from '../../lib' +/** + * A feed can contain an extra content. + */ function FeedExtra(props) { - const { children, className, content, images, text } = props - const classes = cx( + const { children, className, + content, + images, + text, + } = props + + const classes = cx( useKeyOnly(images, 'images'), useKeyOnly(content || text, 'text'), - 'extra' + 'extra', + className, ) const rest = getUnhandledProps(FeedExtra, props) const ElementType = getElementType(FeedExtra, props) diff --git a/src/views/Feed/FeedLabel.js b/src/views/Feed/FeedLabel.js index f8fd16fc18..0cc3fcc3f3 100644 --- a/src/views/Feed/FeedLabel.js +++ b/src/views/Feed/FeedLabel.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -11,9 +11,19 @@ import { } from '../../lib' import Icon from '../../elements/Icon' +/** + * An event can contain an image or icon label. + */ function FeedLabel(props) { - const { children, className, content, icon, image } = props - const classes = cx(className, 'label') + const { + children, + className, + content, + icon, + image, + } = props + + const classes = cx('label', className) const rest = getUnhandledProps(FeedLabel, props) const ElementType = getElementType(FeedLabel, props) diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js index 4b9f206579..d115d37a70 100644 --- a/src/views/Feed/FeedLike.js +++ b/src/views/Feed/FeedLike.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -10,9 +10,18 @@ import { } from '../../lib' import Icon from '../../elements/Icon' +/** + * A feed can contain a like element. + */ function FeedLike(props) { - const { children, className, content, icon } = props - const classes = cx(className, 'like') + const { + children, + className, + content, + icon, + } = props + + const classes = cx('like', className) const rest = getUnhandledProps(FeedLike, props) const ElementType = getElementType(FeedLike, props) diff --git a/src/views/Feed/FeedMeta.js b/src/views/Feed/FeedMeta.js index 58067ce201..e22d5edc6c 100644 --- a/src/views/Feed/FeedMeta.js +++ b/src/views/Feed/FeedMeta.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -11,9 +11,18 @@ import { } from '../../lib' import FeedLike from './FeedLike' +/** + * A feed can contain a meta. + */ function FeedMeta(props) { - const { children, className, content, like } = props - const classes = cx(className, 'meta') + const { + children, + className, + content, + like, + } = props + + const classes = cx('meta', className) const rest = getUnhandledProps(FeedMeta, props) const ElementType = getElementType(FeedMeta, props) diff --git a/src/views/Feed/FeedSummary.js b/src/views/Feed/FeedSummary.js index ea22f2b5e3..f663257f61 100644 --- a/src/views/Feed/FeedSummary.js +++ b/src/views/Feed/FeedSummary.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -12,9 +12,19 @@ import { import FeedDate from './FeedDate' import FeedUser from './FeedUser' +/** + * A feed can contain a summary. + */ function FeedSummary(props) { - const { children, className, content, date, user } = props - const classes = cx(className, 'summary') + const { + children, + className, + content, + date, + user, + } = props + + const classes = cx('summary', className) const rest = getUnhandledProps(FeedSummary, props) const ElementType = getElementType(FeedSummary, props) diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js index 5be7fea863..b43a4f5409 100644 --- a/src/views/Feed/FeedUser.js +++ b/src/views/Feed/FeedUser.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -9,13 +9,20 @@ import { META, } from '../../lib' +/** + * A feed can contain a user element. + */ function FeedUser(props) { const { children, className, content } = props - const classes = cx(className, 'user') + const classes = cx('user', className) const rest = getUnhandledProps(FeedUser, props) const ElementType = getElementType(FeedUser, props) - return {_.isNil(children) ? content : children} + return ( + + {_.isNil(children) ? content : children} + + ) } FeedUser._meta = { diff --git a/src/views/Feed/index.d.ts b/src/views/Feed/index.d.ts index 2de88794e6..3045d709dc 100644 --- a/src/views/Feed/index.d.ts +++ b/src/views/Feed/index.d.ts @@ -1,7 +1,8 @@ -import {SemanticSIZES} from '../..'; import * as React from 'react'; interface FeedProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -15,10 +16,10 @@ interface FeedProps { events?: Array; /** A feed can have different sizes. */ - size?: SemanticSIZES; + size?: 'small' | 'large'; } -interface FeedClass extends React.ComponentClass { +interface FeedComponent extends React.StatelessComponent { Content: typeof FeedContent; Date: typeof FeedDate; Event: typeof FeedEvent; @@ -28,12 +29,13 @@ interface FeedClass extends React.ComponentClass { Like: typeof FeedLike; Summary: typeof FeedSummary; User: typeof FeedUser; - } -export const Feed: FeedClass; +export const Feed: FeedComponent; interface FeedContentProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -44,7 +46,7 @@ interface FeedContentProps { className?: string; /** Shorthand for primary content. */ - content?: any; + content?: React.ReactNode; /** An event can contain a date. */ date?: any; @@ -62,9 +64,11 @@ interface FeedContentProps { summary?: any; } -export const FeedContent: React.ComponentClass; +export const FeedContent: React.StatelessComponent; interface FeedDateProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -78,9 +82,11 @@ interface FeedDateProps { content?: any; } -export const FeedDate: React.ComponentClass; +export const FeedDate: React.StatelessComponent; interface FeedEventProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -90,7 +96,7 @@ interface FeedEventProps { /** Additional classes. */ className?: string; - /** Shorthand for primary content. */ + /** Shorthand for FeedContent. */ content?: any; /** Shorthand for FeedDate. */ @@ -115,9 +121,11 @@ interface FeedEventProps { summary?: any; } -export const FeedEvent: React.ComponentClass; +export const FeedEvent: React.StatelessComponent; interface FeedExtraProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -128,18 +136,20 @@ interface FeedExtraProps { className?: string; /** Shorthand for primary content. */ - content?: any; + content?: React.ReactNode; /** An event can contain additional information like a set of images. */ - images?: any; + images?: boolean | Array; /** An event can contain additional text information. */ text?: boolean; } -export const FeedExtra: React.ComponentClass; +export const FeedExtra: React.StatelessComponent; interface FeedLabelProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -150,7 +160,7 @@ interface FeedLabelProps { className?: string; /** Shorthand for primary content. */ - content?: any; + content?: React.ReactNode; /** An event can contain icon label. */ icon?: any; @@ -159,9 +169,11 @@ interface FeedLabelProps { image?: any; } -export const FeedLabel: React.ComponentClass; +export const FeedLabel: React.StatelessComponent; interface FeedLikeProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -172,15 +184,17 @@ interface FeedLikeProps { className?: string; /** Shorthand for primary content. */ - content?: any; + content?: React.ReactNode; /** Shorthand for icon. Mutually exclusive with children. */ icon?: any; } -export const FeedLike: React.ComponentClass; +export const FeedLike: React.StatelessComponent; interface FeedMetaProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -191,15 +205,17 @@ interface FeedMetaProps { className?: string; /** Shorthand for primary content. */ - content?: any; + content?: React.ReactNode; /** Shorthand for FeedLike. */ like?: any; } -export const FeedMeta: React.ComponentClass; +export const FeedMeta: React.StatelessComponent; interface FeedSummaryProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -210,7 +226,7 @@ interface FeedSummaryProps { className?: string; /** Shorthand for primary content. */ - content?: any; + content?: React.ReactNode; /** Shorthand for FeedDate. */ date?: any; @@ -219,9 +235,11 @@ interface FeedSummaryProps { user?: any; } -export const FeedSummary: React.ComponentClass; +export const FeedSummary: React.StatelessComponent; interface FeedUserProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -232,7 +250,7 @@ interface FeedUserProps { className?: string; /** Shorthand for primary content. */ - content?: any; + content?: React.ReactNode; } -export const FeedUser: React.ComponentClass; +export const FeedUser: React.StatelessComponent; diff --git a/test/specs/views/Feed/FeedContent-test.js b/test/specs/views/Feed/FeedContent-test.js index ab47209da4..2ca32f1291 100644 --- a/test/specs/views/Feed/FeedContent-test.js +++ b/test/specs/views/Feed/FeedContent-test.js @@ -1,14 +1,15 @@ import React from 'react' -import * as common from 'test/specs/commonTests' import FeedContent from 'src/views/Feed/FeedContent' import FeedDate from 'src/views/Feed/FeedDate' import FeedSummary from 'src/views/Feed/FeedSummary' import FeedExtra from 'src/views/Feed/FeedExtra' import FeedMeta from 'src/views/Feed/FeedMeta' +import * as common from 'test/specs/commonTests' describe('FeedContent', () => { common.isConformant(FeedContent) + common.rendersChildren(FeedContent) common.implementsShorthandProp(FeedContent, { propKey: 'date', @@ -36,8 +37,6 @@ describe('FeedContent', () => { mapValueToProps: val => ({ content: val }), }) - common.rendersChildren(FeedContent) - it('renders text with content prop', () => { shallow() .should.contain.text('foo') diff --git a/test/specs/views/Feed/FeedDate-test.js b/test/specs/views/Feed/FeedDate-test.js index a4fb1e352e..67cef1a765 100644 --- a/test/specs/views/Feed/FeedDate-test.js +++ b/test/specs/views/Feed/FeedDate-test.js @@ -1,8 +1,8 @@ import faker from 'faker' import React from 'react' -import * as common from 'test/specs/commonTests' import FeedDate from 'src/views/Feed/FeedDate' +import * as common from 'test/specs/commonTests' describe('FeedDate', () => { common.isConformant(FeedDate) diff --git a/test/specs/views/Feed/FeedEvent-test.js b/test/specs/views/Feed/FeedEvent-test.js index 288c24ae13..ca00347ca7 100644 --- a/test/specs/views/Feed/FeedEvent-test.js +++ b/test/specs/views/Feed/FeedEvent-test.js @@ -1,14 +1,15 @@ -import _ from 'lodash' import faker from 'faker' +import _ from 'lodash' import React from 'react' -import * as common from 'test/specs/commonTests' import FeedEvent from 'src/views/Feed/FeedEvent' import FeedLabel from 'src/views/Feed/FeedLabel' +import * as common from 'test/specs/commonTests' describe('FeedEvent', () => { common.isConformant(FeedEvent) common.rendersChildren(FeedEvent) + common.implementsShorthandProp(FeedEvent, { propKey: 'icon', ShorthandComponent: FeedLabel, diff --git a/test/specs/views/Feed/FeedExtra-test.js b/test/specs/views/Feed/FeedExtra-test.js index 8c06c517ed..a2a1f06ab5 100644 --- a/test/specs/views/Feed/FeedExtra-test.js +++ b/test/specs/views/Feed/FeedExtra-test.js @@ -1,13 +1,14 @@ import React from 'react' -import * as common from 'test/specs/commonTests' import FeedExtra from 'src/views/Feed/FeedExtra' +import * as common from 'test/specs/commonTests' describe('FeedExtra', () => { common.isConformant(FeedExtra) + common.rendersChildren(FeedExtra) + common.propKeyOnlyToClassName(FeedExtra, 'images') common.propKeyOnlyToClassName(FeedExtra, 'text') - common.rendersChildren(FeedExtra) it('renders text with content prop', () => { shallow() diff --git a/test/specs/views/Feed/FeedLabel-test.js b/test/specs/views/Feed/FeedLabel-test.js index d3179ca9ac..24f238e91e 100644 --- a/test/specs/views/Feed/FeedLabel-test.js +++ b/test/specs/views/Feed/FeedLabel-test.js @@ -1,14 +1,15 @@ import faker from 'faker' import React from 'react' -import * as common from 'test/specs/commonTests' import FeedLabel from 'src/views/Feed/FeedLabel' +import * as common from 'test/specs/commonTests' describe('FeedLabel', () => { common.isConformant(FeedLabel) - common.implementsIconProp(FeedLabel) common.rendersChildren(FeedLabel) + common.implementsIconProp(FeedLabel) + describe('image prop', () => { it('renders with string', () => { const src = faker.image.imageUrl() diff --git a/test/specs/views/Feed/FeedLike-test.js b/test/specs/views/Feed/FeedLike-test.js index f7ee1fb5b4..a7e4af4bb5 100644 --- a/test/specs/views/Feed/FeedLike-test.js +++ b/test/specs/views/Feed/FeedLike-test.js @@ -1,13 +1,14 @@ import React from 'react' -import * as common from 'test/specs/commonTests' import FeedLike from 'src/views/Feed/FeedLike' +import * as common from 'test/specs/commonTests' describe('FeedLike', () => { common.isConformant(FeedLike) - common.implementsIconProp(FeedLike) common.rendersChildren(FeedLike) + common.implementsIconProp(FeedLike) + it('renders text with content prop', () => { shallow() .should.contain.text('foo') diff --git a/test/specs/views/Feed/FeedMeta-test.js b/test/specs/views/Feed/FeedMeta-test.js index 9a14df3738..790f188144 100644 --- a/test/specs/views/Feed/FeedMeta-test.js +++ b/test/specs/views/Feed/FeedMeta-test.js @@ -1,12 +1,13 @@ import React from 'react' -import * as common from 'test/specs/commonTests' import FeedMeta from 'src/views/Feed/FeedMeta' import FeedLike from 'src/views/Feed/FeedLike' +import * as common from 'test/specs/commonTests' describe('FeedMeta', () => { common.isConformant(FeedMeta) common.rendersChildren(FeedMeta) + common.implementsShorthandProp(FeedMeta, { propKey: 'like', ShorthandComponent: FeedLike, diff --git a/test/specs/views/Feed/FeedSummary-test.js b/test/specs/views/Feed/FeedSummary-test.js index 0bb1a9eedc..6094417885 100644 --- a/test/specs/views/Feed/FeedSummary-test.js +++ b/test/specs/views/Feed/FeedSummary-test.js @@ -1,13 +1,14 @@ import React from 'react' -import * as common from 'test/specs/commonTests' import FeedSummary from 'src/views/Feed/FeedSummary' import FeedDate from 'src/views/Feed/FeedDate' import FeedUser from 'src/views/Feed/FeedUser' +import * as common from 'test/specs/commonTests' describe('FeedSummary', () => { common.isConformant(FeedSummary) common.rendersChildren(FeedSummary) + common.implementsShorthandProp(FeedSummary, { propKey: 'date', ShorthandComponent: FeedDate, diff --git a/test/specs/views/Feed/FeedUser-test.js b/test/specs/views/Feed/FeedUser-test.js index 965545f36e..df51093071 100644 --- a/test/specs/views/Feed/FeedUser-test.js +++ b/test/specs/views/Feed/FeedUser-test.js @@ -1,8 +1,8 @@ import faker from 'faker' import React from 'react' -import * as common from 'test/specs/commonTests' import FeedUser from 'src/views/Feed/FeedUser' +import * as common from 'test/specs/commonTests' describe('FeedUser', () => { common.isConformant(FeedUser)