Skip to content

Commit

Permalink
release 1.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
John Benavides committed Dec 27, 2017
2 parents 7817b49 + 6d822cc commit 674b3fd
Show file tree
Hide file tree
Showing 49 changed files with 2,517 additions and 873 deletions.
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,13 @@ The Following componets were ported:
- Level ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Level)) ([Docs](http://bulma.io/documentation/layout/level/))
- Loader ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Loader))
- Media ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Media)) ([Docs](http://bulma.io/documentation/layout/media-object/))
- Message ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Message)) ([Docs](http://bulma.io/documentation/components/message/))
- Menu ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Menu)) ([Docs](http://bulma.io/documentation/components/menu/))
- Modal ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Modal)) ([Docs](http://bulma.io/documentation/components/modal/))
- Navbar ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Navbar)) ([Docs](https://bulma.io/documentation/components/navbar/))
- Notification ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Notification)) ([Docs](http://bulma.io/documentation/elements/notification/))
- Pagination ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Pagination)) ([Docs](https://bulma.io/documentation/components/pagination/))
- Panel ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Panel)) ([Docs](https://bulma.io/documentation/components/panel/))
- Progress ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Progress)) ([Docs](http://bulma.io/documentation/elements/progress/))
- Section ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Section)) ([Docs](http://bulma.io/documentation/layout/section/))
- Tabs ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Tabs)) ([Docs](https://bulma.io/documentation/components/tabs/))
Expand Down
42 changes: 21 additions & 21 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-bulma-components",
"version": "1.1.3",
"version": "1.2.0",
"description": "React components for Bulma framework",
"main": "dist",
"scripts": {
Expand Down Expand Up @@ -50,26 +50,26 @@
"react-dom": "^16.2.0"
},
"devDependencies": {
"@storybook/addon-a11y": "^3.2.18",
"@storybook/addon-actions": "^3.2.18",
"@storybook/addon-backgrounds": "^3.2.18",
"@storybook/addon-centered": "^3.2.18",
"@storybook/addon-events": "^3.2.18",
"@storybook/addon-info": "^3.2.18",
"@storybook/addon-jest": "^3.2.18",
"@storybook/addon-knobs": "^3.2.18",
"@storybook/addon-links": "^3.2.18",
"@storybook/addon-notes": "^3.2.18",
"@storybook/addon-options": "^3.2.18",
"@storybook/addon-storyshots": "^3.2.18",
"@storybook/addons": "^3.2.18",
"@storybook/components": "^3.2.18",
"@storybook/react": "^3.2.18",
"@storybook/addon-a11y": "^3.3.1",
"@storybook/addon-actions": "^3.3.1",
"@storybook/addon-backgrounds": "^3.3.1",
"@storybook/addon-centered": "^3.3.1",
"@storybook/addon-events": "^3.3.1",
"@storybook/addon-info": "^3.3.1",
"@storybook/addon-jest": "^3.3.1",
"@storybook/addon-knobs": "^3.3.1",
"@storybook/addon-links": "^3.3.1",
"@storybook/addon-notes": "^3.3.1",
"@storybook/addon-options": "^3.3.1",
"@storybook/addon-storyshots": "^3.3.1",
"@storybook/addons": "^3.3.1",
"@storybook/components": "^3.3.1",
"@storybook/react": "^3.3.1",
"@storybook/storybook-deployer": "2.2.0",
"babel-cli": "6.26.0",
"babel-core": "6.26.0",
"babel-eslint": "8.0.3",
"babel-jest": "22.0.3",
"babel-eslint": "8.1.2",
"babel-jest": "22.0.4",
"babel-loader": "7.1.2",
"babel-plugin-add-module-exports": "0.2.1",
"babel-plugin-syntax-object-rest-spread": "6.13.0",
Expand All @@ -86,7 +86,7 @@
"css-loader": "0.28.7",
"enzyme": "3.2.0",
"enzyme-adapter-react-16": "1.1.1",
"eslint": "4.13.1",
"eslint": "4.14.0",
"eslint-config-airbnb": "16.1.0",
"eslint-import-resolver-webpack": "0.8.3",
"eslint-plugin-import": "2.8.0",
Expand All @@ -95,10 +95,10 @@
"eslint-plugin-react": "7.5.1",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"jest": "22.0.3",
"jest": "22.0.4",
"jsdom": "11.5.1",
"node-sass": "4.7.2",
"nodemon": "1.14.0",
"nodemon": "1.14.3",
"null-loader": "0.1.1",
"optimize-css-assets-webpack-plugin": "3.2.0",
"postcss-loader": "2.0.9",
Expand Down
3 changes: 3 additions & 0 deletions src/__test__/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,13 @@ Object {
"Level": [Function],
"Loader": [Function],
"Media": [Function],
"Menu": [Function],
"Message": [Function],
"Modal": [Function],
"Navbar": [Function],
"Notification": [Function],
"Pagination": [Function],
"Panel": [Function],
"Progress": [Function],
"Section": [Function],
"Table": [Function],
Expand Down
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)} />
);
}
}
Loading

0 comments on commit 674b3fd

Please sign in to comment.