Add component names with namespaces

zookatron · Mar 29, 2018 · 88c137d · 88c137d
1 parent 48f510a
commit 88c137d
Show file tree

Hide file tree

Showing 28 changed files with 272 additions and 222 deletions.
diff --git a/src/components/columns/components/column.js b/src/components/columns/components/column.js
@@ -7,6 +7,7 @@ const sizes = [null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
   .concat(Object.keys(CONSTANTS.SIZES).map(key => CONSTANTS.SIZES[key]));
 
 export default class Column extends PureComponent {
+  static displayName = 'Columns.Column'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/dropdown/components/divider.js b/src/components/dropdown/components/divider.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class DropdownDivider extends PureComponent {
+  static displayName = 'Dropdown.Divider'
   static propTypes = {
     style: PropTypes.shape({}),
     className: PropTypes.string,

diff --git a/src/components/dropdown/components/item.js b/src/components/dropdown/components/item.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class DropdownItem extends PureComponent {
+  static displayName = 'Dropdown.Item'
   static propTypes = {
     active: PropTypes.bool,
     children: PropTypes.node,

diff --git a/src/components/form/components/field/field-body.js b/src/components/form/components/field/field-body.js
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 
 
 export default class FieldBody extends PureComponent {
+  static displayName = 'Field.Body'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/form/components/field/field-label.js b/src/components/form/components/field/field-label.js
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 
 
 export default class FieldLabel extends PureComponent {
+  static displayName = 'Field.Label'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/hero/components/hero-body.js b/src/components/hero/components/hero-body.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class HeroBody extends PureComponent {
+  static displayName = 'Hero.Body'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/hero/components/hero-footer.js b/src/components/hero/components/hero-footer.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class HeroFooter extends PureComponent {
+  static displayName = 'Hero.Footer'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/hero/components/hero-head.js b/src/components/hero/components/hero-head.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class HeroHead extends PureComponent {
+  static displayName = 'Hero.Head'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/level/components/level-item.js b/src/components/level/components/level-item.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class LevelItem extends PureComponent {
+  static displayName = 'Level.Item'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/level/components/level-side.js b/src/components/level/components/level-side.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class LevelSide extends PureComponent {
+  static displayName = 'Level.Side'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/media/components/media-content.js b/src/components/media/components/media-content.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class MediaContent extends PureComponent {
+  static displayName = 'Media.Content'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/media/components/media-item.js b/src/components/media/components/media-item.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class MediaItem extends PureComponent {
+  static displayName = 'Media.Item'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/modal/components/card/body.js b/src/components/modal/components/card/body.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class ModalCardBody extends PureComponent {
+  static displayName = 'Modal.Card.Body'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/modal/components/card/card.js b/src/components/modal/components/card/card.js
@@ -8,6 +8,7 @@ import ModalCardFoot from './foot';
 import ModalCardTitle from './title';
 
 export default class ModalCard extends PureComponent {
+  static displayName = 'Modal.Card'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/modal/components/card/foot.js b/src/components/modal/components/card/foot.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class ModalCardFoot extends PureComponent {
+  static displayName = 'Modal.Card.Foot'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/modal/components/card/head.js b/src/components/modal/components/card/head.js
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import Button from '../../../button';
 
 export default class ModalCardHead extends PureComponent {
+  static displayName = 'Modal.Card.Head'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/modal/components/card/title.js b/src/components/modal/components/card/title.js
@@ -2,29 +2,35 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const ModalCardTitle = ({
-  children,
-  className,
-  ...props
-}) => (
-  <p
-    {...props}
-    className={classnames('modal-card-title', className)}
-  >
-    {children}
-  </p>
-);
+export default class ModalCardTitle extends React.PureComponent {
+  static displayName = 'Modal.Card.Title'
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    style: PropTypes.shape({}),
+  }
 
-ModalCardTitle.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.shape({}),
-};
+  static defaultProps = {
+    children: null,
+    className: '',
+    style: {},
+  }
 
-ModalCardTitle.defaultProps = {
-  children: null,
-  className: '',
-  style: {},
-};
+  render() {
+    const {
+      children,
+      className,
+      ...props
+    } = this.props;
+
+    return (
+      <p
+        {...props}
+        className={classnames('modal-card-title', className)}
+      >
+        {children}
+      </p>
+    );
+  }
+}
 
-export default ModalCardTitle;
diff --git a/src/components/modal/components/content.js b/src/components/modal/components/content.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class ModalContent extends PureComponent {
+  static displayName = 'Modal.Content'
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/src/components/navbar/components/brand.js b/src/components/navbar/components/brand.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Burger from './burger';
 
-export default class Brand extends React.PureComponent {
+export default class NavbarBrand extends React.PureComponent {
+  static displayName = 'Navbar.Brand'
   static propTypes = {
     style: PropTypes.shape({}),
     className: PropTypes.string,

diff --git a/src/components/navbar/components/burger.js b/src/components/navbar/components/burger.js
@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-export default class Burger extends React.PureComponent {
+export default class NavbarBurger extends React.PureComponent {
+  static displayName = 'Navbar.Burger'
   static propTypes = {
     style: PropTypes.shape({}),
     className: PropTypes.string,

diff --git a/src/components/navbar/components/container.js b/src/components/navbar/components/container.js
@@ -2,40 +2,44 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const Container = ({
-  className,
-  renderAs,
-  children,
-  position,
-  ...props
-}) => {
-  const Element = renderAs;
-  return (
-    <Element
-      {...props}
-      className={classnames({
-        [`navbar-${position}`]: position,
-      }, className)}
-    >
-      {children}
-    </Element>
-  );
-};
+export default class NavbarContainer extends React.PureComponent {
+  static displayName = 'Navbar.Container'
+  static propTypes = {
+    style: PropTypes.shape({}),
+    className: PropTypes.string,
+    children: PropTypes.node,
+    renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    position: PropTypes.oneOf(['start', 'end']),
+  }
 
-Container.propTypes = {
-  style: PropTypes.shape({}),
-  className: PropTypes.string,
-  children: PropTypes.node,
-  renderAs: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  position: PropTypes.oneOf(['start', 'end']),
-};
+  static defaultProps = {
+    style: {},
+    className: '',
+    children: null,
+    renderAs: 'div',
+    position: 'start',
+  }
 
-Container.defaultProps = {
-  style: {},
-  className: '',
-  children: null,
-  renderAs: 'div',
-  position: 'start',
-};
+  render() {
+    const {
+      className,
+      renderAs,
+      children,
+      position,
+      ...props
+    } = this.props;
+
+    const Element = renderAs;
+    return (
+      <Element
+        {...props}
+        className={classnames({
+          [`navbar-${position}`]: position,
+        }, className)}
+      >
+        {children}
+      </Element>
+    );
+  }
+}
 
-export default Container;
diff --git a/src/components/navbar/components/divider.js b/src/components/navbar/components/divider.js
@@ -2,24 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const Divider = ({
-  className,
-  ...props
-}) => (
-  <div
-    {...props}
-    className={classnames('navbar-divider', className)}
-  />
-);
+export default class NavbarDivider extends React.PureComponent {
+  static displayName = 'Navbar.Divider'
+  static propTypes = {
+    style: PropTypes.shape({}),
+    className: PropTypes.string,
+  }
 
-Divider.propTypes = {
-  style: PropTypes.shape({}),
-  className: PropTypes.string,
-};
+  static defaultProps = {
+    style: {},
+    className: '',
+  }
 
-Divider.defaultProps = {
-  style: {},
-  className: '',
-};
+  render() {
+    const {
+      className,
+      ...props
+    } = this.props;
+
+    return (
+      <div
+        {...props}
+        className={classnames('navbar-divider', className)}
+      />
+    );
+  }
+}
 
-export default Divider;