update bulma version

zookatron · Apr 27, 2018 · f865dc8 · f865dc8
1 parent 33f15aa
commit f865dc8
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 [![Npm Downloads](https://img.shields.io/npm/dm/react-bulma-components.svg)](https://www.npmjs.com/package/react-bulma-components)
 
 
-React components for Bulma framework
+React components for Bulma (v0.7.1) framework
 
 This is a implementation in React of the [Bulma](http://bulma.io/) Framework Component by Jeremy Thomas.
 

diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
   },
   "homepage": "https://github.com/couds/react-bulma-components#readme",
   "dependencies": {
-    "bulma": "0.6.1",
+    "bulma": "0.7.1",
     "classnames": "2.2.5"
   },
   "peerDependencies": {

diff --git a/src/components/columns/columns.story.js b/src/components/columns/columns.story.js
@@ -33,7 +33,7 @@ storiesOf('Columns', module)
   .add('Sizes by name', withInfo('')(() => (
     <div>
       {Object.keys(CONSTANTS.SIZES).map(size => (
-        <Columns>
+        <Columns key={size}>
           <Columns.Column size={CONSTANTS.SIZES[size]}>
             <p className="bd-notification is-success">{CONSTANTS.SIZES[size]}</p>
           </Columns.Column>

diff --git a/src/components/image/constants.js b/src/components/image/constants.js
@@ -0,0 +1,4 @@
+export default {
+  SIZES: [16, 24, 32, 48, 64, 96, 128, 'square', '1by1', '4by3', '3by2', '16by9', '2by1', '5by4', '5by3', '3by1', '4by5', '3by4', '2by3', '3by5', '9by16', '1by2', '1by3'],
+};
+
diff --git a/src/components/image/image.js b/src/components/image/image.js
@@ -1,14 +1,15 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import CONSTANTS from './constants';
 
 export default class Image extends PureComponent {
   static propTypes = {
     className: PropTypes.string,
     src: PropTypes.string,
     alt: PropTypes.string,
     style: PropTypes.shape({}),
-    size: PropTypes.oneOf([16, 24, 32, 48, 64, 96, 128, 'square', '1by1', '4by3', '3by2', '16by9', '2by1', '5by4', '5by3', '3by1', '4by5', '3by4', '2by3', '3by5', '9by16', '1by2', '1by3']),
+    size: PropTypes.oneOf(CONSTANTS.SIZES),
     fallback: PropTypes.string,
   }
 

diff --git a/src/components/image/image.story.js b/src/components/image/image.story.js
@@ -4,7 +4,8 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import Image from '.';
-import Content from '../content';
+import CONSTANTS from './constants';
+import Table from '../table';
 
 storiesOf('Image', module)
   .addDecorator(story => (
@@ -18,82 +19,54 @@ storiesOf('Image', module)
     </div>
   )))
   .add('Fixed Square', withInfo()(() => (
-    <Content>
-      <table>
-        <thead>
-          <tr>
-            <th>Size</th>
-            <th>Image</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>16</td>
-            <td><Image src="http://bulma.io/images/placeholders/128x128.png" size={16} /></td>
-          </tr>
-          <tr>
-            <td>24</td>
-            <td><Image src="http://bulma.io/images/placeholders/128x128.png" size={24} /></td>
-          </tr>
-          <tr>
-            <td>32</td>
-            <td><Image src="http://bulma.io/images/placeholders/128x128.png" size={32} /></td>
-          </tr>
-          <tr>
-            <td>48</td>
-            <td><Image src="http://bulma.io/images/placeholders/128x128.png" size={48} /></td>
-          </tr>
-          <tr>
-            <td>64</td>
-            <td><Image src="http://bulma.io/images/placeholders/128x128.png" size={64} /></td>
-          </tr>
-          <tr>
-            <td>96</td>
-            <td><Image src="http://bulma.io/images/placeholders/128x128.png" size={96} /></td>
-          </tr>
-          <tr>
-            <td>128</td>
-            <td><Image src="http://bulma.io/images/placeholders/128x128.png" size={128} /></td>
-          </tr>
-        </tbody>
-      </table>
-    </Content>
+    <Table>
+      <thead>
+        <tr>
+          <th />
+          <th>Size</th>
+          <th>Image</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {
+            CONSTANTS.SIZES.filter(size => typeof size === 'number').map(size => (
+              <tr key={size}>
+                <td />
+                <td style={{ width: 100 }}>{size}</td>
+                <td style={{ width: 128 }}>
+                  <Image src="https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest?cb=20170330235552&format=original" size={size} />
+                </td>
+                <td />
+              </tr>
+            ))
+          }
+      </tbody>
+    </Table>
   )))
   .add('Responsive images with ratios', withInfo()(() => (
-    <Content>
-      <table>
-        <thead>
-          <tr>
-            <th>Ratio</th>
-            <th>Image</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>square</td>
-            <td><Image src="http://bulma.io/images/placeholders/480x480.png" size="square" /></td>
-          </tr>
-          <tr>
-            <td>1by1</td>
-            <td><Image src="http://bulma.io/images/placeholders/480x480.png" size="1by1" /></td>
-          </tr>
-          <tr>
-            <td>4by3</td>
-            <td><Image src="http://bulma.io/images/placeholders/640x480.png" size="4by3" /></td>
-          </tr>
-          <tr>
-            <td>3by2</td>
-            <td><Image src="http://bulma.io/images/placeholders/480x320.png" size="3by2" /></td>
-          </tr>
-          <tr>
-            <td>16by9</td>
-            <td><Image src="http://bulma.io/images/placeholders/640x360.png" size="16by9" /></td>
-          </tr>
-          <tr>
-            <td>2by1</td>
-            <td><Image src="http://bulma.io/images/placeholders/640x320.png" size="2by1" /></td>
-          </tr>
-        </tbody>
-      </table>
-    </Content>
+    <Table>
+      <thead>
+        <tr>
+          <th />
+          <th>Size</th>
+          <th>Image</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {
+            CONSTANTS.SIZES.filter(size => typeof size === 'string').map(size => (
+              <tr key={size}>
+                <td />
+                <td style={{ width: 100 }}>{size}</td>
+                <td style={{ width: 128 }}>
+                  <Image src="https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest?cb=20170330235552&format=original" size={size} />
+                </td>
+                <td />
+              </tr>
+            ))
+          }
+      </tbody>
+    </Table>
   )));
diff --git a/yarn.lock b/yarn.lock
@@ -2181,9 +2181,9 @@ builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
 
-bulma@0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.6.1.tgz#5f21a77c0c06f7d80051c06628c23516081bd649"
+bulma@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.1.tgz#73c2e3b2930c90cc272029cbd19918b493fca486"
 
 [email protected]:
   version "3.0.0"