Skip to content

Commit

Permalink
Deprecate prop type from Card component in favor to use Card.XXX comp…
Browse files Browse the repository at this point in the history
…onents
  • Loading branch information
John Benavides committed Dec 27, 2017
1 parent d6dcc93 commit 56e6432
Show file tree
Hide file tree
Showing 13 changed files with 337 additions and 31 deletions.
65 changes: 64 additions & 1 deletion src/components/card/__test__/__snapshots__/card.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,57 @@ exports[`Card component Should have card classname 1`] = `
exports[`Card component Should have card-content classname 1`] = `
<div
className="card-content"
style={Object {}}
>
Content
</div>
`;

exports[`Card component Should have card-footer's classname 1`] = `
<div
className="card"
style={Object {}}
>
<div
className="card-footer"
>
<div
className="card-footer-item"
>
Yes
</div>
<div
className="card-footer-item"
>
No
</div>
</div>
</div>
`;

exports[`Card component Should have card-header's classname 1`] = `
<div
className="card"
style={Object {}}
>
<div
className="card-header"
>
<div
className="card-header-title"
>
Title
</div>
<div
className="card-header-icon"
>
<i
className="icon"
/>
</div>
</div>
</div>
`;

exports[`Card component Should have card-image classname 1`] = `
<div
className="card-image"
Expand All @@ -35,3 +80,21 @@ exports[`Card component Should have card-image classname 1`] = `
</figure>
</div>
`;

exports[`Card component Should print deprecation warning 1`] = `
<div
className="card-image"
style={Object {}}
>
<figure
className="image is-4by3"
style={Object {}}
>
<img
alt=""
onError={[Function]}
src="http://bulma.io/images/placeholders/1280x960.png"
/>
</figure>
</div>
`;
43 changes: 41 additions & 2 deletions src/components/card/__test__/card.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,50 @@ describe('Card component', () => {
expect(component.toJSON()).toMatchSnapshot();
});
it('Should have card-image classname', () => {
const component = renderer.create(<Card type="image" size="4by3" src="http://bulma.io/images/placeholders/1280x960.png" />);
const component = renderer.create(<Card.Image size="4by3" src="http://bulma.io/images/placeholders/1280x960.png" />);
expect(component.toJSON()).toMatchSnapshot();
});
it('Should have card-content classname', () => {
const component = renderer.create(<Card type="content">Content</Card>);
const component = renderer.create(<Card.Content>Content</Card.Content>);
expect(component.toJSON()).toMatchSnapshot();
});
it('Should have card-header\'s classname', () => {
const component = renderer.create(
<Card>
<Card.Header>
<Card.Header.Title>
Title
</Card.Header.Title>
<Card.Header.Icon>
<i className="icon" />
</Card.Header.Icon>
</Card.Header>
</Card>,
);
expect(component.toJSON()).toMatchSnapshot();
});
it('Should have card-footer\'s classname', () => {
const component = renderer.create(
<Card>
<Card.Footer>
<Card.Footer.Item>
Yes
</Card.Footer.Item>
<Card.Footer.Item>
No
</Card.Footer.Item>
</Card.Footer>
</Card>,
);
expect(component.toJSON()).toMatchSnapshot();
});
it('Should print deprecation warning', () => {
// eslint-disable-next-line no-console
console.warn = jest.genMockFn();
const component = renderer.create(<Card type="image" size="4by3" src="http://bulma.io/images/placeholders/1280x960.png" />);
expect(component.toJSON()).toMatchSnapshot();
expect(global.console.warn).toBeCalled();
// eslint-disable-next-line no-console
console.warn.mockRestore();
});
});
15 changes: 15 additions & 0 deletions src/components/card/card.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,19 @@ import classnames from 'classnames';
import PropTypes from 'prop-types';

import CardImage from './components/image';
import CardContent from './components/content';
import CardHeader from './components/header';
import CardFooter from './components/footer';

export default class Card extends PureComponent {
static propTypes = {
className: PropTypes.string,
children: PropTypes.node,
style: PropTypes.shape({}),
renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* @deprecated please use Card.Header, Card.Content, Card.Footer instead
*/
type: PropTypes.oneOf(['header', 'header-item', 'header-icon', 'footer', 'footer-item', 'image', 'content']),
}

Expand All @@ -21,6 +27,11 @@ export default class Card extends PureComponent {
renderAs: 'div',
}

static Image = CardImage
static Content = CardContent
static Header = CardHeader
static Footer = CardFooter

render() {
const {
className,
Expand All @@ -29,6 +40,10 @@ export default class Card extends PureComponent {
renderAs,
...props
} = this.props;
if (type) {
// eslint-disable-next-line no-console
console.warn('Deprecation Warning: Prop type is deprecated and will be removed on future release, please use Card.Header, Card.Content and Card.Footer elements instead');
}
if (type === 'image') {
return <CardImage {...props} className={className} />;
}
Expand Down
26 changes: 13 additions & 13 deletions src/components/card/card.story.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ storiesOf('Card', module)
))
.add('Default', withInfo()(() => (
<Card>
<Card type="image" size="4by3" src="http://bulma.io/images/placeholders/1280x960.png" />
<Card type="content">
<Card.Image size="4by3" src="http://bulma.io/images/placeholders/1280x960.png" />
<Card.Content>
<Media>
<Media.Item renderAs="figure" position="left">
<Image renderAs="p" size={64} alt="64x64" src="http://bulma.io/images/placeholders/128x128.png" />
Expand All @@ -35,15 +35,15 @@ storiesOf('Card', module)
<br />
<time dateTime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</Content>
</Card>
</Card.Content>
</Card>
)))
.add('With Footer actions', withInfo()(() => (
<Card>
<Card type="header">
<Card type="header-title">Title</Card>
</Card>
<Card type="content">
<Card.Header>
<Card.Header.Title>Title</Card.Header.Title>
</Card.Header>
<Card.Content>
<Media>
<Media.Item renderAs="figure" position="left">
<Image renderAs="p" size={64} alt="64x64" src="http://bulma.io/images/placeholders/128x128.png" />
Expand All @@ -60,11 +60,11 @@ storiesOf('Card', module)
<br />
<time dateTime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</Content>
</Card>
<Card type="footer">
<Card renderAs="a" href="#Yes" type="footer-item">Yes</Card>
<Card renderAs="a" href="#No" type="footer-item">No</Card>
<Card renderAs="a" href="#Maybe" type="footer-item">Maybe</Card>
</Card>
</Card.Content>
<Card.Footer>
<Card.Footer.Item renderAs="a" href="#Yes">Yes</Card.Footer.Item>
<Card.Footer.Item renderAs="a" href="#No">No</Card.Footer.Item>
<Card.Footer.Item renderAs="a" href="#Maybe">Maybe</Card.Footer.Item>
</Card.Footer>
</Card>
)));
29 changes: 29 additions & 0 deletions src/components/card/components/content.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

export default class CardContent extends React.PureComponent {
static displayName = 'Card.Content'

static propTypes = {
className: PropTypes.string,
renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
}

static defaultProps = {
className: '',
renderAs: 'div',
}

render() {
const {
className,
renderAs,
...props
} = this.props;
const Element = renderAs;
return (
<Element {...props} className={classnames('card-content', className)} />
);
}
}
29 changes: 29 additions & 0 deletions src/components/card/components/footer/components/footer-item.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

export default class CardFooterItem extends React.PureComponent {
static displayName = 'Card.Footer.Item'

static propTypes = {
className: PropTypes.string,
renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
}

static defaultProps = {
className: '',
renderAs: 'div',
}

render() {
const {
className,
renderAs,
...props
} = this.props;
const Element = renderAs;
return (
<Element {...props} className={classnames('card-footer-item', className)} />
);
}
}
32 changes: 32 additions & 0 deletions src/components/card/components/footer/footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import CardFooterItem from './components/footer-item';

export default class CardFooter extends React.PureComponent {
static displayName = 'Card.Footer'

static propTypes = {
className: PropTypes.string,
renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
}

static defaultProps = {
className: '',
renderAs: 'div',
}

static Item = CardFooterItem

render() {
const {
className,
renderAs,
...props
} = this.props;
const Element = renderAs;
return (
<Element {...props} className={classnames('card-footer', className)} />
);
}
}
1 change: 1 addition & 0 deletions src/components/card/components/footer/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './footer';
29 changes: 29 additions & 0 deletions src/components/card/components/header/components/header-icon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

export default class CardHeaderIcon extends React.PureComponent {
static displayName = 'Card.Header.Icon'

static propTypes = {
className: PropTypes.string,
renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
}

static defaultProps = {
className: '',
renderAs: 'div',
}

render() {
const {
className,
renderAs,
...props
} = this.props;
const Element = renderAs;
return (
<Element {...props} className={classnames('card-header-icon', className)} />
);
}
}
29 changes: 29 additions & 0 deletions src/components/card/components/header/components/header-title.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

export default class CardHeaderTitle extends React.PureComponent {
static displayName = 'Card.Header.Title'

static propTypes = {
className: PropTypes.string,
renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
}

static defaultProps = {
className: '',
renderAs: 'div',
}

render() {
const {
className,
renderAs,
...props
} = this.props;
const Element = renderAs;
return (
<Element {...props} className={classnames('card-header-title', className)} />
);
}
}
Loading

0 comments on commit 56e6432

Please sign in to comment.