Merge 4f805f4 into f76b247

couds · Jul 4, 2018 · f420ce4 · f420ce4
2 parents f76b247 + 4f805f4
commit f420ce4
Show file tree

Hide file tree

Showing 92 changed files with 1,289 additions and 572 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -32,7 +32,8 @@
     "jsx-a11y/click-events-have-key-events": 0,
     "function-paren-newline": 0,
     "jsx-a11y/anchor-is-valid": 0,
-    "object-curly-newline": 0
+    "object-curly-newline": 0,
+    "react/forbid-foreign-prop-types": 0
   },
   "globals": {
     "document": true,

diff --git a/src/components/box/box.js b/src/components/box/box.js
@@ -1,25 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import modifiers from '../../modifiers';
 
 const Box = ({
   children,
   className,
   renderAs,
-  ...props
+  ...allProps
 }) => {
   const Element = renderAs;
+  const props = modifiers.clean(allProps);
   return (
     <Element
       {...props}
-      className={classnames('box', className)}
+      className={classnames('box', className, modifiers.classnames(allProps))}
     >
       {children}
     </Element>
   );
 };
 
 Box.propTypes = {
+  ...modifiers.propTypes,
   children: PropTypes.node,
   className: PropTypes.string,
   style: PropTypes.shape({}),
@@ -30,6 +33,7 @@ Box.propTypes = {
 };
 
 Box.defaultProps = {
+  ...modifiers.defaultProps,
   children: null,
   className: '',
   style: {},

diff --git a/src/components/box/box.story.js b/src/components/box/box.story.js
@@ -6,10 +6,37 @@ import Box from 'react-bulma-components/lib/components/box';
 import Media from 'react-bulma-components/lib/components/media';
 import Image from 'react-bulma-components/lib/components/image';
 import Content from 'react-bulma-components/lib/components/content';
+import { boolean } from '@storybook/addon-knobs';
 
 storiesOf('Box', module)
   .add('Default', () => (
-    <Box>
+    <Box
+      paddingless={boolean('paddingless', false)}
+      responsive={{
+        mobile: {
+          display: 'block',
+        },
+        tablet: {
+          display: 'flex',
+        },
+        desktop: {
+          display: 'inline-flex',
+          only: true,
+        },
+        widescreen: {
+          display: 'inline-block',
+        },
+      }}
+      hide={{
+        tablet: {
+          hide: true,
+          only: true,
+        },
+        widescreen: {
+          hide: true,
+        },
+      }}
+    >
       <Media>
         <Media.Item renderAs="figure" position="left">
           <Image size={64} alt="64x64" src="http://bulma.io/images/placeholders/128x128.png" />

diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import modifiers from '../../modifiers';
 
 const Breadcrumb = ({
   className,
@@ -10,13 +11,14 @@ const Breadcrumb = ({
   separator,
   size,
   align,
-  ...props
+  ...allProps
 }) => {
   const Element = renderAs;
+  const props = modifiers.clean(allProps);
   return (
     <nav
       {...props}
-      className={classnames('breadcrumb', className, {
+      className={classnames('breadcrumb', className, modifiers.classnames(allProps), {
         [`has-${separator}-separator`]: separator,
         [`is-${size}`]: size,
         [`is-${align}`]: align,
@@ -48,6 +50,7 @@ const Breadcrumb = ({
 };
 
 Breadcrumb.propTypes = {
+  ...modifiers.propTypes,
   className: PropTypes.string,
   style: PropTypes.shape({}),
   separator: PropTypes.oneOf(['arrow', 'bullet', 'dot', 'succeeds']),
@@ -66,6 +69,7 @@ Breadcrumb.propTypes = {
 };
 
 Breadcrumb.defaultProps = {
+  ...modifiers.defaultProps,
   items: [],
   hrefAttr: null,
   separator: null,

diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import CONSTANTS from '../../constants';
+import modifiers from '../../modifiers';
 
 const colors = [null, ''].concat(Object.keys(CONSTANTS.COLORS).map(key => CONSTANTS.COLORS[key]));
 
@@ -24,9 +25,10 @@ const Button = ({
   rounded,
   onClick,
   text,
-  ...props
+  ...allProps
 }) => {
   let Element = isStatic ? 'span' : renderAs;
+  const props = modifiers.clean(allProps);
   const otherProps = {};
   if (submit) {
     Element = 'button';
@@ -44,7 +46,7 @@ const Button = ({
       {...otherProps}
       disabled={disabled}
       onClick={disabled ? undefined : onClick}
-      className={classnames(className, {
+      className={classnames(className, modifiers.classnames(allProps), {
         [`is-${color}`]: color,
         [`is-${size}`]: size,
         [`is-${state}`]: state,
@@ -65,6 +67,7 @@ const Button = ({
 };
 
 Button.propTypes = {
+  ...modifiers.propTypes,
   children: PropTypes.node,
   className: PropTypes.string,
   style: PropTypes.shape({}),
@@ -90,6 +93,7 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
+  ...modifiers.defaultProps,
   children: null,
   className: '',
   style: {},

diff --git a/src/components/card/card.js b/src/components/card/card.js
@@ -6,17 +6,19 @@ import CardImage from './components/image';
 import CardContent from './components/content';
 import CardHeader from './components/header';
 import CardFooter from './components/footer';
+import modifiers from '../../modifiers';
 
 const Card = ({
   className,
   children,
   renderAs,
-  ...props
+  ...allProps
 }) => {
   const Element = renderAs;
+  const props = modifiers.clean(allProps);
   return (
     <Element
-      className={classnames('card', className)}
+      className={classnames('card', modifiers.classnames(allProps), className)}
       {...props}
     >
       {children}
@@ -33,13 +35,15 @@ Card.Header = CardHeader;
 Card.Footer = CardFooter;
 
 Card.propTypes = {
+  ...modifiers.propTypes,
   className: PropTypes.string,
   children: PropTypes.node,
   style: PropTypes.shape({}),
   renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 };
 
 Card.defaultProps = {
+  ...modifiers.defaultProps,
   className: '',
   children: null,
   style: {},

diff --git a/src/components/card/components/content.js b/src/components/card/components/content.js
@@ -1,29 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import modifiers from '../../../modifiers';
 
-export default class CardContent extends React.PureComponent {
-  static displayName = 'Card.Content'
+const CardContent = ({
+  className,
+  renderAs,
+  ...allProps
+}) => {
+  const Element = renderAs;
+  const props = modifiers.clean(allProps);
+  return (
+    <Element {...props} className={classnames('card-content', modifiers.classnames(allProps), className)} />
+  );
+};
 
-  static propTypes = {
-    className: PropTypes.string,
-    renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  }
+CardContent.propTypes = {
+  ...modifiers.propTypes,
+  className: PropTypes.string,
+  renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+};
 
-  static defaultProps = {
-    className: '',
-    renderAs: 'div',
-  }
+CardContent.defaultProps = {
+  ...modifiers.defaultProps,
+  className: '',
+  renderAs: 'div',
+};
 
-  render() {
-    const {
-      className,
-      renderAs,
-      ...props
-    } = this.props;
-    const Element = renderAs;
-    return (
-      <Element {...props} className={classnames('card-content', className)} />
-    );
-  }
-}
+export default CardContent;
diff --git a/src/components/card/components/footer/components/footer-item.js b/src/components/card/components/footer/components/footer-item.js
@@ -1,29 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import modifiers from '../../../../../modifiers';
 
-export default class CardFooterItem extends React.PureComponent {
-  static displayName = 'Card.Footer.Item'
+const CardFooterItem = ({
+  className,
+  renderAs,
+  ...allProps
+}) => {
+  const Element = renderAs;
+  const props = modifiers.clean(allProps);
+  return (
+    <Element {...props} className={classnames('card-footer-item', modifiers.classnames(allProps), className)} />
+  );
+};
 
-  static propTypes = {
-    className: PropTypes.string,
-    renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  }
+CardFooterItem.propTypes = {
+  ...modifiers.propTypes,
+  className: PropTypes.string,
+  renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+};
 
-  static defaultProps = {
-    className: '',
-    renderAs: 'div',
-  }
+CardFooterItem.defaultProps = {
+  ...modifiers.defaultProps,
+  className: '',
+  renderAs: 'div',
+};
 
-  render() {
-    const {
-      className,
-      renderAs,
-      ...props
-    } = this.props;
-    const Element = renderAs;
-    return (
-      <Element {...props} className={classnames('card-footer-item', className)} />
-    );
-  }
-}
+export default CardFooterItem;
diff --git a/src/components/card/components/footer/footer.js b/src/components/card/components/footer/footer.js
@@ -2,29 +2,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import CardFooterItem from './components/footer-item';
+import modifiers from '../../../../modifiers';
 
-export default class CardFooter extends React.PureComponent {
-  static Item = CardFooterItem
+const CardFooter = ({
+  className,
+  renderAs,
+  ...allProps
+}) => {
+  const Element = renderAs;
+  const props = modifiers.clean(allProps);
+  return (
+    <Element {...props} className={classnames('card-footer', modifiers.classnames(allProps), className)} />
+  );
+};
 
-  static propTypes = {
-    className: PropTypes.string,
-    renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  }
+CardFooter.Item = CardFooterItem;
 
-  static defaultProps = {
-    className: '',
-    renderAs: 'div',
-  }
+CardFooter.propTypes = {
+  ...modifiers.propTypes,
+  className: PropTypes.string,
+  renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+};
 
-  render() {
-    const {
-      className,
-      renderAs,
-      ...props
-    } = this.props;
-    const Element = renderAs;
-    return (
-      <Element {...props} className={classnames('card-footer', className)} />
-    );
-  }
-}
+CardFooter.defaultProps = {
+  ...modifiers.defaultProps,
+  className: '',
+  renderAs: 'div',
+};
+
+export default CardFooter;