Merge branch 'master' of https://github.com/bokuweb/react-bulma

README.md

@@ -13,6 +13,33 @@ This repository is heavily under development and unstable.
 npm i -S re-bulma
 ```
 
+In your javascript pick up the css using 
+``` sh
+import insertCss from 'insert-css';
+import css from '<path to yours or rebulmas>/build/css';
+try {
+  if (typeof document !== 'undefined' || document !== null) insertCss(css, { prepend: true });
+} catch (e) {}
+```
+
+If you want to change the styles then do the following as well.
+``` sh
+npm install [email protected] --save-dev
+npm install https://github.com/bokuweb/csjs.git --save-dev
+npm install lodash.camelcase --save-dev
+
+add the following to your Gruntfile.js or do similar for your build process
+    shell: {
+      buildReBulma: {
+        command: 'node node_modules/re-bulma/scripts/transform.js
+          ./re-bulma-variables.properties node_modules/re-bulma/src/styles/ build/ no'
+      }
+and include shell:buildReBulma in the grunt.registerTask('default'...) line
+
+in the re-bulma-variables.properties specify the settings you require (see the 
+re-bulma/default/re-bulma-variables.properties for reference)
+```
+
 ## Development
 
 ``` sh

default/re-bulma-variables.properties

@@ -0,0 +1,19 @@
+primary_color =                   #1fc8db
+primary_hover_color =             #199fae
+primary_active_color =            #199fae
+disabled_background_color =       #f5f7fa
+disabled_border_color =           #d3d6db
+disabled_opacity =                0.5
+font_size_base =                  1rem
+
+breakpoint_mobile_max = 768px
+breakpoint_tablet_min = 769px
+breakpoint_tablet_max = 979px
+breakpoint_desktop_min = 980px
+breakpoint_desktop_max = 1180px
+breakpoint_widescreen_min = 1181px
+
+container_breakpoint_wide_min = 1180px
+container_breakpoint_narrow_min = 980px
+container_wide_max_width = 1200px
+container_narrow_max_width = 960px

example/src/example.js

@@ -87,9 +87,20 @@ export default class Example extends Component {
   render() {
     return (
       <div>
+        <Columns responsive="isMobile">
+          <Column size="is2">Is Mobile 1</Column>
+          <Column size="is3">Is Mobile 2</Column>
+        </Columns>
+
+        <hr/>
+
         <Button >test</Button>
         <Button size="isLarge" states="isActive">Guthub</Button>
         <Button size="isSmall" states="isActive" icon="fa fa-github">Github</Button>
+        <Button data={[{"name":"item-name", value:"something"}]}>Data</Button>
+        <Button color="isPrimary">Primary</Button>
+        <Button color="isPrimary" state="isActive">Primary Active</Button>
+        <Button state="isDisabled">Disabled</Button>
         <Columns>
           <Column size="is2" style={{ background: '#ccc' }}>aaaa</Column>
           <Column>bbbb</Column>

example/src/index.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import { render } from 'react-dom';
 import Example from './example';
+import insertCss from 'insert-css';
+import css from '../../build/css';
+
+try {
+  if (typeof document !== 'undefined' || document !== null) insertCss(css, { prepend: true });
+} catch (e) {}
 
 render(<Example />, document.querySelector('#root'));
 

package.json

@@ -8,7 +8,7 @@
     "start": "node server.js",
     "test": "karma start",
     "test:watch": "karma start --auto-watch --no-single-run",
-    "build:style": "node scripts/transform.js src/styles/ build/",
+    "build:style": "node scripts/transform.js default/re-bulma-variables.properties src/styles/ build/ yes",
     "compile": "npm run build:style && babel -d lib/ src/",
     "styleguide-server": "styleguidist server",
     "styleguide-build": "node_modules/react-styleguidist/bin/styleguidist build",
@@ -60,9 +60,11 @@
   "files": [
     "lib",
     "build",
-    "src"
+    "src",
+    "scripts"
   ],
   "dependencies": {
-    "insert-css": "^0.2.0"
+    "insert-css": "^0.2.0",
+    "properties-parser": "^0.3.1"
   }
 }

scripts/transform.js

@@ -1,9 +1,12 @@
 const csjs = require('csjs');
 const fs = require('fs');
 const camelCase = require('lodash.camelcase');
-const path = process.argv[2];
-const dist = process.argv[3];
+const variablesPath = process.argv[2];
+const path = process.argv[3];
+const dist = process.argv[4];
+const generateStyleGuideCss = process.argv.length >= 4 ? process.argv[5] : null;
 const CleanCSS = require('clean-css');
+const parse = require('properties-parser').parse;
 
 let combinedCss = '';
 
@@ -14,18 +17,39 @@ files.forEach(file => {
   combinedCss += fs.readFileSync(`${path}${file}`, { encoding: 'utf8' });
 });
 
-const csjsObj = csjs`${combinedCss}`;
+const replacements = parse(fs.readFileSync(variablesPath, { encoding: 'utf8' }));
+console.dir(replacements);
+
+function applyStylingVariables() {
+  let r = [];
+  for(let i in replacements) {
+    r.push('\\$\\{' + i + '\\}');
+  }
+  const s = r.join('|');
+  return combinedCss.replace(new RegExp(s, "g"), function(matched) {
+    const innerRe = /\$\{(.*)\}/g;
+    const p = innerRe.exec(matched);
+    if (p.length>1) {
+      return replacements[p[1]];
+    } else {
+      return matched;
+    }
+  });
+}
+const csjsObj = csjs`${applyStylingVariables()}`;
 const styles = {};
 
 fs.writeFileSync(
   `${dist}css.js`,
   `module.exports = \'${new CleanCSS().minify(csjs.getCss(csjsObj)).styles}\'\;`
 );
 
-fs.writeFileSync(
-  'styleguide/style.css',
-  `${csjs.getCss(csjsObj)}`
-);
+if (generateStyleGuideCss=='yes') {
+  fs.writeFileSync(
+    'styleguide/style.css',
+    `${csjs.getCss(csjsObj)}`
+  );
+}
 
 Object.keys(csjsObj).forEach(c => {
   styles[camelCase(c)] = csjsObj[c].toString();

src/elements/button.js

@@ -38,6 +38,7 @@ export default class Button extends Component {
     ]),
     delete: PropTypes.bool,
     isIconRight: PropTypes.bool,
+    data: PropTypes.array,
   };
 
   static defaultProps = {
@@ -95,12 +96,28 @@ export default class Button extends Component {
       : this.renderLeftIcon();
   }
 
+  renderDataAttributes() {
+    if (this.props.data && this.props.data.length>0) {
+      return this.props.data.map(d => {
+        return "data-"+d.name + " = " + d.value;}
+      ).join(" ");
+    } else
+      return null;
+  }
+
   render() {
+    const extraProps = {};
+    if (this.props.data && this.props.data.length>0) {
+      this.props.data.map(d => {
+        extraProps["data-" + encodeURIComponent(d.name)] = encodeURIComponent(d.value);
+      })
+    }
     return (
       <button
         {...getCallbacks(this.props)}
         style={this.props.style}
         className={this.createClassName()}
+        {...extraProps}
       >
         <span>
         {

src/index.js

@@ -1,5 +1,3 @@
-import insertCss from 'insert-css';
-import css from '../build/css';
 import styles from '../build/styles';
 
 // grid
@@ -84,10 +82,6 @@ import HeroFoot from './layout/hero-foot';
 import HeroHead from './layout/hero-head';
 import HeroBody from './layout/hero-body';
 
-try {
-    if (typeof document !== 'undefined' || document !== null) insertCss(css, { prepend: true });
-} catch (e) {}
-
 export {
   Button,
   Columns,

src/styles/box.css

@@ -11,7 +11,7 @@
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   color: #69707a;
   line-height: 1.428571428571429;
-  font-size: 14px;
+  font-size: ${font_size_base};
   background: transparent;
   background-color: #fff;
   border-radius: 5px;

src/styles/button.css

@@ -43,7 +43,7 @@
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  font-size: 14px;
+  font-size: ${font_size_base};
   height: 32px;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
@@ -73,8 +73,8 @@ button:active,
 
 .button[disabled],
 .button.is-disabled {
-  background-color: #f5f7fa;
-  border-color: #d3d6db;
+  background-color: ${disabled_background_color};
+  border-color: ${disabled_border_color};
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -285,17 +285,24 @@ button:active,
 }
 
 .button.is-primary {
-  background-color: #1fc8db;
+  background-color: ${primary_color};
   border-color: transparent;
   color: white;
 }
 
 .button.is-primary:hover, .button.is-primary:focus, .button.is-primary.is-active {
-  background-color: #199fae;
   border-color: transparent;
   color: white;
 }
 
+.button.is-primary:hover, .button.is-primary:focus {
+  background-color: ${primary_hover_color};
+}
+
+.button.is-primary.is-active {
+  background-color: ${primary_active_color};
+}
+
 .button.is-primary:active {
   border-color: transparent;
 }
@@ -315,13 +322,13 @@ button:active,
 
 .button.is-primary.is-outlined {
   background-color: transparent;
-  border-color: #1fc8db;
-  color: #1fc8db;
+  border-color: ${primary_color};
+  color: ${primary_color};
 }
 
 .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus {
-  background-color: #1fc8db;
-  border-color: #1fc8db;
+  background-color: ${primary_hover_color};
+  border-color: ${primary_hover_color};
   color: white;
 }
 
@@ -525,7 +532,7 @@ button:active,
 }
 
 .button[disabled], .button.is-disabled {
-  opacity: 0.5;
+  opacity: ${disabled_opacity};
 }
 
 .button.is-fullwidth {

src/styles/card.css

@@ -6,7 +6,7 @@
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   color: #69707a;
   line-height: 1.428571428571429;
-  font-size: 14px;
+  font-size: ${font_size_base};
   margin: 0;
   padding: 0;
   border: 0;

src/styles/columns.css

@@ -244,7 +244,7 @@
   margin-left: 100%;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: ${breakpoint_mobile_max}) {
   .column.is-narrow-mobile {
     -webkit-box-flex: 0;
     -webkit-flex: none;
@@ -430,7 +430,7 @@
   }
 }
 
-@media screen and (min-width: 769px) {
+@media screen and (min-width: ${breakpoint_tablet_min}) {
   .column.is-narrow, .column.is-narrow-tablet {
     -webkit-box-flex: 0;
     -webkit-flex: none;
@@ -616,7 +616,7 @@
   }
 }
 
-@media screen and (min-width: 980px) {
+@media screen and (min-width: ${breakpoint_desktop_min}) {
   .column.is-narrow-desktop {
     -webkit-box-flex: 0;
     -webkit-flex: none;
@@ -802,7 +802,7 @@
   }
 }
 
-@media screen and (min-width: 1180px) {
+@media screen and (min-width: ${breakpoint_desktop_max}) {
   .column.is-narrow-widescreen {
     -webkit-box-flex: 0;
     -webkit-flex: none;
@@ -1028,7 +1028,7 @@
   padding: 0;
 }
 
-@media screen and (min-width: 769px) {
+@media screen and (min-width: ${breakpoint_tablet_min}) {
   .columns.is-grid {
     -webkit-flex-wrap: wrap;
         -ms-flex-wrap: wrap;
@@ -1069,7 +1069,7 @@
 }
 
 /* FIXME: It is csjs bug, #42
-@media screen and (min-width: 769px) {
+@media screen and (min-width: ${breakpoint_tablet_min}) {
   .columns:not(.is-desktop) {
     display: -webkit-box;
     display: -webkit-flex;
@@ -1079,7 +1079,7 @@
 }
 */
 
-@media screen and (min-width: 769px) {
+@media screen and (min-width: ${breakpoint_tablet_min}) {
   .columns {
     display: -webkit-box;
     display: -webkit-flex;
@@ -1088,13 +1088,13 @@
   }
 }
 
-@media screen and (min-width: 769x) {
+@media screen and (min-width: ${breakpoint_tablet_min}) {
   .columns.is-desktop {
     display: block;
   }
 }
 
-@media screen and (min-width: 980px) {
+@media screen and (min-width: ${breakpoint_desktop_min}) {
   .columns.is-desktop {
     display: -webkit-box;
     display: -webkit-flex;