Merge d7be694 into 78de9e3

couds · Mar 1, 2019 · 9b1a2a7 · 9b1a2a7
2 parents 78de9e3 + d7be694
commit 9b1a2a7
Show file tree

Hide file tree

Showing 24 changed files with 7,567 additions and 9,706 deletions.
diff --git a/README.md b/README.md
@@ -179,6 +179,7 @@ The following components were ported:
 |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/)|
+|List|[Storybook](https://couds.github.io/react-bulma-components/?selectedKind=List)|[Docs](https://bulma.io/documentation/components/list/)|
 |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/)|

diff --git a/jest.config.js b/jest.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  setupTestFrameworkScriptFile: './__test__/setup.js',
+  setupFilesAfterEnv: ['./__test__/setup.js'],
   rootDir: 'src',
   testMatch: ['**/*.test.js'],
   coverageDirectory: '<rootDir>/../.coverage',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
   },
   "homepage": "https://github.com/couds/react-bulma-components#readme",
   "dependencies": {
-    "bulma": "0.7.1",
+    "bulma": "0.7.4",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
@@ -52,76 +52,76 @@
     "react-dom": "16.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.1.5",
-    "@babel/core": "7.1.6",
-    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
-    "@babel/preset-env": "7.1.6",
+    "@babel/cli": "7.2.3",
+    "@babel/core": "7.3.4",
+    "@babel/plugin-proposal-object-rest-spread": "7.3.4",
+    "@babel/preset-env": "7.3.4",
     "@babel/preset-react": "7.0.0",
-    "@storybook/addon-a11y": "4.0.9",
-    "@storybook/addon-actions": "4.0.9",
-    "@storybook/addon-centered": "4.0.8",
-    "@storybook/addon-events": "4.0.8",
-    "@storybook/addon-info": "4.0.9",
-    "@storybook/addon-knobs": "4.0.9",
-    "@storybook/addon-links": "4.0.9",
-    "@storybook/addon-notes": "4.0.8",
-    "@storybook/addon-options": "4.0.8",
-    "@storybook/addon-storyshots": "4.0.9",
-    "@storybook/addon-storysource": "4.0.9",
-    "@storybook/addon-viewport": "4.0.9",
-    "@storybook/addons": "4.0.9",
-    "@storybook/cli": "4.0.9",
-    "@storybook/components": "4.0.9",
-    "@storybook/core-events": "4.0.8",
-    "@storybook/node-logger": "4.0.8",
-    "@storybook/react": "4.0.9",
-    "@storybook/storybook-deployer": "2.3.0",
-    "@types/react": "16.7.10",
+    "@storybook/addon-a11y": "4.1.13",
+    "@storybook/addon-actions": "4.1.13",
+    "@storybook/addon-centered": "4.1.13",
+    "@storybook/addon-events": "4.1.13",
+    "@storybook/addon-info": "4.1.13",
+    "@storybook/addon-knobs": "4.1.13",
+    "@storybook/addon-links": "4.1.13",
+    "@storybook/addon-notes": "4.1.13",
+    "@storybook/addon-options": "4.1.13",
+    "@storybook/addon-storyshots": "4.1.13",
+    "@storybook/addon-storysource": "4.1.13",
+    "@storybook/addon-viewport": "4.1.13",
+    "@storybook/addons": "4.1.13",
+    "@storybook/cli": "4.1.13",
+    "@storybook/components": "4.1.13",
+    "@storybook/core-events": "4.1.13",
+    "@storybook/node-logger": "4.1.13",
+    "@storybook/react": "^4.1.13",
+    "@storybook/storybook-deployer": "2.8.1",
+    "@types/react": "16.8.6",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
-    "babel-loader": "8.0.4",
+    "babel-jest": "24.1.0",
+    "babel-loader": "8.0.5",
     "babel-plugin-react-intl": "3.0.1",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-runtime": "6.26.0",
     "chai": "4.2.0",
-    "coveralls": "3.0.2",
-    "css-loader": "1.0.1",
-    "emotion": "10.0.0",
-    "emotion-theming": "10.0.0",
-    "enzyme": "3.7.0",
-    "enzyme-adapter-react-16": "1.7.0",
-    "eslint": "5.9.0",
+    "coveralls": "3.0.3",
+    "css-loader": "2.1.0",
+    "emotion": "10.0.7",
+    "emotion-theming": "10.0.7",
+    "enzyme": "3.9.0",
+    "enzyme-adapter-react-16": "1.10.0",
+    "eslint": "5.14.1",
     "eslint-config-airbnb": "17.1.0",
-    "eslint-import-resolver-webpack": "0.10.1",
-    "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-jest": "22.1.0",
-    "eslint-plugin-jsx-a11y": "6.1.2",
-    "eslint-plugin-react": "7.11.1",
-    "file-loader": "2.0.0",
-    "jest": "23.6.0",
-    "jsdom": "13.0.0",
-    "mini-css-extract-plugin": "0.4.5",
-    "moment": "2.22.2",
-    "node-sass": "4.10.0",
-    "nodemon": "1.18.7",
+    "eslint-import-resolver-webpack": "0.11.0",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-jest": "22.3.0",
+    "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-react": "7.12.4",
+    "file-loader": "3.0.1",
+    "jest": "24.1.0",
+    "jsdom": "13.2.0",
+    "mini-css-extract-plugin": "0.5.0",
+    "moment": "2.24.0",
+    "node-sass": "4.11.0",
+    "nodemon": "1.18.10",
     "null-loader": "0.1.1",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "postcss-loader": "3.0.0",
-    "progress-bar-webpack-plugin": "1.11.0",
-    "prop-types": "15.6.2",
-    "react": "16.6.3",
-    "react-dom": "16.6.3",
-    "react-test-renderer": "16.6.3",
-    "resolve-url-loader": "3.0.0",
+    "progress-bar-webpack-plugin": "1.12.1",
+    "prop-types": "15.7.2",
+    "react": "16.8.3",
+    "react-dom": "16.8.3",
+    "react-test-renderer": "16.8.3",
+    "resolve-url-loader": "3.0.1",
     "sass-loader": "7.1.0",
-    "source-map-support": "0.5.9",
+    "source-map-support": "0.5.10",
     "storybook-addon-themes": "0.0.4",
     "style-loader": "0.23.1",
     "toolbox-loader": "0.0.3",
-    "typescript": "3.2.1",
-    "webpack": "4.26.1",
-    "webpack-bundle-analyzer": "3.0.3",
-    "webpack-cli": "3.1.2"
+    "typescript": "3.3.3333",
+    "webpack": "4.29.6",
+    "webpack-bundle-analyzer": "3.0.4",
+    "webpack-cli": "3.2.3"
   }
 }
diff --git a/src/__test__/__snapshots__/index.test.js.snap b/src/__test__/__snapshots__/index.test.js.snap
@@ -29,6 +29,7 @@ Object {
   "Icon": [Function],
   "Image": [Function],
   "Level": [Function],
+  "List": [Function],
   "Loader": [Function],
   "Media": [Function],
   "Menu": [Function],

diff --git a/src/components/button/button.story.js b/src/components/button/button.story.js
@@ -91,6 +91,7 @@ storiesOf('Button', module)
       <Button.Group
         hasAddons={boolean('hasAddons', false)}
         position={select('Position', positions)}
+        size={select('Size', { small: 'small', medium: 'medium', large: 'large' })}
       >
         <Button
           renderAs="span"

diff --git a/src/components/button/components/button-group.js b/src/components/button/components/button-group.js
@@ -9,13 +9,15 @@ const ButtonGroup = ({
   className,
   hasAddons,
   position,
+  size,
   ...props
 }) => (
   <Element
     {...props}
     className={classnames('buttons', className, {
       'has-addons': hasAddons,
       [`is-${[position]}`]: position,
+      [`are-${size}`]: size,
     })}
   >
     {children}
@@ -26,6 +28,7 @@ ButtonGroup.propTypes = {
   ...modifiers.propTypes,
   className: PropTypes.string,
   hasAddons: PropTypes.bool,
+  size: PropTypes.string,
   position: PropTypes.oneOf(['centered', 'right']),
   renderAs: PropTypes.oneOfType([
     PropTypes.string,
@@ -38,6 +41,7 @@ ButtonGroup.defaultProps = {
   className: undefined,
   hasAddons: undefined,
   position: undefined,
+  size: undefined,
   renderAs: 'div',
 };
 

diff --git a/src/components/columns/columns.js b/src/components/columns/columns.js
@@ -9,12 +9,15 @@ import Element from '../element';
 
 const breakpoints = [null].concat(Object.keys(CONSTANTS.BREAKPOINTS).map(key => CONSTANTS.BREAKPOINTS[key]));
 
+const sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+
 const Columns = ({
   className,
   breakpoint,
   gapless,
   multiline,
   centered,
+  variableGap,
   ...props
 }) => (
   <Element
@@ -24,6 +27,15 @@ const Columns = ({
       'is-gapless': gapless,
       'is-multiline': multiline,
       'is-centered': centered,
+      'is-variable': Object.keys(variableGap).length > 0,
+      ...(variableGap ? {
+        [`is-${variableGap.touch}-touch`]: variableGap.touch,
+        [`is-${variableGap.mobile}-mobile`]: variableGap.mobile,
+        [`is-${variableGap.tablet}-tablet`]: variableGap.tablet,
+        [`is-${variableGap.desktop}-desktop`]: variableGap.desktop,
+        [`is-${variableGap.widescreen}-widescreen`]: variableGap.widescreen,
+        [`is-${variableGap.fullhd}-fullhd`]: variableGap.fullhd,
+      } : {}),
     })}
   />
 );
@@ -37,6 +49,12 @@ Columns.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   style: PropTypes.shape({}),
+  variableGap: PropTypes.shape({
+    ...Object.values(CONSTANTS.BREAKPOINTS).reduce((values, breakpoint) => ({
+      ...values,
+      [breakpoint]: PropTypes.oneOf(sizes),
+    }), {}),
+  }),
   /**
      * Breakpoint where columns become stacked.
      */
@@ -64,6 +82,7 @@ Columns.defaultProps = {
   gapless: false,
   centered: false,
   multiline: true,
+  variableGap: {},
 };
 
 export default Columns;
diff --git a/src/components/columns/columns.story.js b/src/components/columns/columns.story.js
@@ -473,4 +473,20 @@ storiesOf('Columns', module)
         <p className="bd-notification is-warning"> Last Column</p>
       </Columns.Column>
     </Columns>
+  )))
+  .add('Variable Gap', (() => (
+    <Columns variableGap={{ mobile: 1, tablet: 0, desktop: 3, widescreen: 8, fullhd: 2 }}>
+      <Columns.Column size={3}>
+        <p className="bd-notification is-dark">size-1</p>
+      </Columns.Column>
+      <Columns.Column size={3}>
+        <p className="bd-notification is-light">size-1</p>
+      </Columns.Column>
+      <Columns.Column size={3}>
+        <p className="bd-notification is-white">size-1</p>
+      </Columns.Column>
+      <Columns.Column size={3}>
+        <p className="bd-notification is-danger">size-1</p>
+      </Columns.Column>
+    </Columns>
   )));
diff --git a/src/components/columns/index.js b/src/components/columns/index.js
@@ -1,3 +1,4 @@
+import Columns from './columns';
 import './columns.sass';
 
-export { default } from './columns';
+export default Columns;
diff --git a/src/components/hero/hero.js b/src/components/hero/hero.js
@@ -17,6 +17,7 @@ const Hero = ({
   color,
   gradient,
   size,
+  hasNavbar,
   ...props
 }) => (
   <Element
@@ -25,6 +26,7 @@ const Hero = ({
       [`is-${color}`]: color,
       [`is-${size}`]: size,
       'is-bold': gradient,
+      'is-fullheight-with-navbar': hasNavbar,
     })}
   >
     {children}
@@ -46,6 +48,7 @@ Hero.propTypes = {
   color: PropTypes.oneOf(colors),
   gradient: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium', 'large', 'fullheight']),
+  hasNavbar: PropTypes.bool,
 };
 
 Hero.defaultProps = {
@@ -57,6 +60,7 @@ Hero.defaultProps = {
   color: undefined,
   gradient: undefined,
   size: undefined,
+  hasNavbar: undefined,
 };
 
 export default Hero;
diff --git a/src/components/list/__test__/__snapshots__/list.test.js.snap b/src/components/list/__test__/__snapshots__/list.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List component Should Exist 1`] = `[Function]`;
+
+exports[`List component Should Render a list 1`] = `
+<div
+  className="list"
+>
+  <div
+    className="list-item"
+  >
+    1
+  </div>
+  <div
+    className="list-item"
+  >
+    2
+  </div>
+  <div
+    className="list-item is-active"
+  >
+    3
+  </div>
+  <div
+    className="list-item"
+  >
+    4
+  </div>
+</div>
+`;
diff --git a/src/components/list/__test__/list.test.js b/src/components/list/__test__/list.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import List from '..';
+
+describe('List component', () => {
+  it('Should Exist', () => {
+    expect(List).toMatchSnapshot();
+  });
+
+  it('Should Render a list', () => {
+    const component = renderer.create(
+      <List>
+        <List.Item>1</List.Item>
+        <List.Item>2</List.Item>
+        <List.Item active>3</List.Item>
+        <List.Item>4</List.Item>
+      </List>);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});