release 1.1.1

.eslintrc

@@ -16,7 +16,7 @@
   "rules": {
     "semi": ["error", "always"],
     "quotes": ["error", "single"],
-    "no-console": 0,
+    "no-console": 2,
     "no-param-reassign": 0,
     "react/jsx-filename-extension": 0,
     "import/no-extraneous-dependencies": 0,

README.md

@@ -70,15 +70,18 @@ The Following componets were ported:
 - Form ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Form)) ([Docs](http://bulma.io/documentation/form/general/))
 - Heading (Title, Subtitle and heading on Bulma) ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Heading)) ([Docs](http://bulma.io/documentation/elements/title/))
 - Hero ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Hero)) ([Docs](http://bulma.io/documentation/layout/hero/))
-- Image ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Image)) ([Docs](http://bulma.io/documentation/elements/image/))
 - Icon ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Icon)) ([Docs](http://bulma.io/documentation/elements/icon/))
+- Image ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Image)) ([Docs](http://bulma.io/documentation/elements/image/))
 - 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/))
 - 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/))
 - 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/))
 - Table ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Table)) ([Docs](http://bulma.io/documentation/elements/table/))
 - Tag ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Tag)) ([Docs](http://bulma.io/documentation/elements/tag/))
 - Tile ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Tile)) ([Docs](http://bulma.io/documentation/layout/tiles/))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bulma-components",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "React components for Bulma framework",
   "main": "dist",
   "scripts": {
@@ -25,8 +25,16 @@
     "type": "git",
     "url": "git+https://github.com/couds/react-bulma-components.git"
   },
-  "keywords": [],
-  "author": "",
+  "keywords": [
+    "react",
+    "bulma",
+    "bulma.io",
+    "css",
+    "bootstrap",
+    "modal",
+    "layout"
+  ],
+  "author": "John Benavides",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/couds/react-bulma-components/issues"
@@ -42,26 +50,26 @@
     "react-dom": "^16.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^3.2.17",
-    "@storybook/addon-actions": "^3.2.17",
-    "@storybook/addon-backgrounds": "^3.2.17",
-    "@storybook/addon-centered": "^3.2.17",
-    "@storybook/addon-events": "^3.2.17",
-    "@storybook/addon-info": "^3.2.17",
-    "@storybook/addon-jest": "^3.2.17",
-    "@storybook/addon-knobs": "^3.2.17",
-    "@storybook/addon-links": "^3.2.17",
-    "@storybook/addon-notes": "^3.2.17",
-    "@storybook/addon-options": "^3.2.17",
-    "@storybook/addon-storyshots": "^3.2.17",
-    "@storybook/addons": "^3.2.17",
-    "@storybook/components": "^3.2.17",
-    "@storybook/react": "^3.2.17",
+    "@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/storybook-deployer": "2.2.0",
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",
     "babel-eslint": "8.0.3",
-    "babel-jest": "21.2.0",
+    "babel-jest": "22.0.3",
     "babel-loader": "7.1.2",
     "babel-plugin-add-module-exports": "0.2.1",
     "babel-plugin-syntax-object-rest-spread": "6.13.0",
@@ -77,7 +85,7 @@
     "coveralls": "3.0.0",
     "css-loader": "0.28.7",
     "enzyme": "3.2.0",
-    "enzyme-adapter-react-16": "1.1.0",
+    "enzyme-adapter-react-16": "1.1.1",
     "eslint": "4.13.1",
     "eslint-config-airbnb": "16.1.0",
     "eslint-import-resolver-webpack": "0.8.3",
@@ -87,10 +95,10 @@
     "eslint-plugin-react": "7.5.1",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.6",
-    "jest": "21.2.1",
+    "jest": "22.0.3",
     "jsdom": "11.5.1",
     "node-sass": "4.7.2",
-    "nodemon": "1.13.3",
+    "nodemon": "1.14.0",
     "null-loader": "0.1.1",
     "optimize-css-assets-webpack-plugin": "3.2.0",
     "postcss-loader": "2.0.9",

src/components/box/box.js

@@ -23,13 +23,13 @@ export default class Box extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('box', className)}
       >
         {children}

src/components/breadcrumb/__test__/breadcrumb.test.js

@@ -11,9 +11,11 @@ const Anchor = ({
 
 describe('Breadcrumb component', () => {
   beforeEach(() => {
+    // eslint-disable-next-line no-console
     console.warn = jest.genMockFn();
   });
   afterAll(() => {
+    // eslint-disable-next-line no-console
     console.warn.mockRestore();
   });
   it('Should be a Breadcrumb', () => {

src/components/breadcrumb/breadcrumb.js

@@ -35,21 +35,22 @@ export default class Breadcrumb extends PureComponent {
   render() {
     const {
       className,
-      style,
       items,
       renderAs,
       hrefAttr,
       separator,
       size,
       align,
+      ...props
     } = this.props;
     if (renderAs !== 'a' && !hrefAttr) {
+      // eslint-disable-next-line no-console
       console.warn('if renderAs is different the anchor (a), hrefAttr is required. Check Breadcrumb props');
     }
     const Element = renderAs;
     return (
       <nav
-        style={style}
+        {...props}
         className={classnames('breadcrumb', className, {
           [`has-${separator}-separator`]: separator,
           [`is-${size}`]: size,
@@ -59,7 +60,7 @@ export default class Breadcrumb extends PureComponent {
         <ul>
           {
             items.map((item) => {
-              const props = {
+              const p = {
                 [renderAs === 'a' ? 'href' : hrefAttr]: item.url,
               };
               return (
@@ -69,7 +70,7 @@ export default class Breadcrumb extends PureComponent {
                     'is-active': item.active,
                   })}
                 >
-                  <Element {...props}>
+                  <Element {...p}>
                     {item.name}
                   </Element>
                 </li>

src/components/button/__test__/button.test.js

@@ -45,12 +45,15 @@ describe('Button component', () => {
     expect(component.toJSON()).toMatchSnapshot();
   });
   it('Should throw a console.error if no hrefAttr is defined when renderAs different as A and href attr is defined', () => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
     renderer.create(
       <Button renderAs={Link} href="http://google.com" color="danger" >
         TEST
       </Button>);
+    // eslint-disable-next-line no-console
     expect(console.error).toHaveBeenCalled();
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
   });
   it('Should render be disabled', () => {

src/components/button/button.js

@@ -59,9 +59,7 @@ export default class Button extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
-      onClick,
       color,
       size,
       outlined,
@@ -84,6 +82,7 @@ export default class Button extends PureComponent {
     if (href) {
       otherProps[renderAs === 'a' ? 'href' : hrefAttr] = href;
       if (renderAs !== 'a' && !hrefAttr) {
+        // eslint-disable-next-line no-console
         console.error('warning: if renderAs is different the anchor (a), hrefAttr is required. Check Button props');
       }
     }
@@ -100,9 +99,7 @@ export default class Button extends PureComponent {
       <Element
         {...props}
         {...otherProps}
-        style={style}
         disabled={disabled}
-        onClick={onClick}
         className={classnames(className, {
           'is-link': link,
           [`is-${color}`]: color,

src/components/card/card.js

@@ -25,18 +25,16 @@ export default class Card extends PureComponent {
     const {
       className,
       children,
-      style,
       type,
       renderAs,
       ...props
     } = this.props;
     if (type === 'image') {
-      return <CardImage {...props} style={style} className={className} />;
+      return <CardImage {...props} className={className} />;
     }
     const Element = renderAs;
     return (
       <Element
-        style={style}
         className={classnames(className, {
           [`card-${type}`]: type,
           card: !type,

src/components/columns/__test__/columns.test.js

@@ -4,9 +4,11 @@ import Columns from '..';
 
 describe('Columns component', () => {
   beforeEach(() => {
+    // eslint-disable-next-line no-console
     console.warn = jest.genMockFn();
   });
   afterAll(() => {
+    // eslint-disable-next-line no-console
     console.warn.mockRestore();
   });
   it('Should have columns classname', () => {

src/components/columns/columns.js

@@ -47,21 +47,21 @@ export default class Columns extends PureComponent {
     const {
       children,
       className,
-      style,
       breakpoint,
       gapless,
       multiline,
       centered,
+      ...props
     } = this.props;
     return (
       <div
+        {...props}
         className={classNames(className, 'columns', {
         [`is-${breakpoint}`]: breakpoint,
         'is-gapless': gapless,
         'is-multiline': multiline,
         'is-centered': centered,
       })}
-        style={style}
       >
         {children}
       </div>

src/components/columns/components/column.js

@@ -154,7 +154,6 @@ export default class Column extends PureComponent {
     const {
       children,
       className,
-      style,
       size,
       offset,
       narrow,
@@ -163,7 +162,6 @@ export default class Column extends PureComponent {
       desktop,
       widescreen,
       fullhd,
-
       mobileSize,
       tabletSize,
       desktopSize,
@@ -174,14 +172,17 @@ export default class Column extends PureComponent {
       desktopOffset,
       widescreenOffset,
       fullhdOffset,
+      ...props
     } = this.props;
 
     if (mobileSize || tabletSize || desktopSize || widescreenSize || fullhdSize || mobileOffset || tabletOffset || desktopOffset || widescreenOffset || fullhdOffset) {
+      // eslint-disable-next-line no-console
       console.warn('DEPRECATION Warning: The props: mobileSize tabletSize desktopSize widescreenSize fullhdSize mobileOffset tabletOffset desktopOffset widescreenOffset fullhdOffset are deprecated, please use the mobile.size... alternatives');
     }
 
     return (
       <div
+        {...props}
         className={classNames(className, 'column', {
         [`is-${size}`]: size,
         [`is-${mobile.size || mobileSize}-mobile`]: mobile.size || mobileSize,
@@ -202,7 +203,6 @@ export default class Column extends PureComponent {
         'is-narrow-widescreen': widescreen.narrow,
         'is-narrow-fullhd': fullhd.narrow,
       })}
-        style={style}
       >
         {children}
       </div>

src/components/container/container.js

@@ -30,13 +30,13 @@ export default class Container extends PureComponent {
       fluid,
       breakpoint,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('container', className, {
           'is-fluid': fluid,
           [`is-${breakpoint}`]: breakpoint,

src/components/content/content.js

@@ -23,14 +23,14 @@ export default class Content extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       size,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('content', className, {
           [`is-${size}`]: size,
         })}

src/components/dropdown/__test__/dropdown.test.js

@@ -62,6 +62,7 @@ describe('Dropdown component', () => {
     expect(component.toJSON()).toMatchSnapshot();
   });
   it('Should print error if value is passed but no onChange Handler', () => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
     renderer.create(
       <Dropdown value="value" style={{ width: 400 }}>
@@ -70,6 +71,7 @@ describe('Dropdown component', () => {
         </Dropdown.Item>
       </Dropdown>);
     expect(global.console.error).toBeCalled();
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
   });
   it('Should have divider', () => {
@@ -154,6 +156,7 @@ describe('Dropdown component', () => {
     expect(component.state('open')).toBe(false);
   });
   it('Should change display error message if props change has value but no onChange Handler', () => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
     const component = shallow(
       <Dropdown value="value" style={{ width: 400 }} onChange={() => {}}>
@@ -166,6 +169,7 @@ describe('Dropdown component', () => {
     expect(global.console.error).not.toBeCalled();
     component.setProps({ value: 'other', onChange: null });
     expect(global.console.error).toBeCalled();
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
   });
 });