Replace extraClass prop #27

src/Accordion/index.js

@@ -4,8 +4,8 @@ import cx from 'classnames'
 
 import Icon from '../Icon'
 
-const Accordion = ({ children, title, extraClass, ...props }) => {
-  const styles = cx('ola_accordion', extraClass)
+const Accordion = ({ children, title, className, ...props }) => {
+  const styles = cx('ola_accordion', className)
   return (
     <details className={styles} {...props}>
       <summary className="ola_accordion-header">
@@ -21,10 +21,6 @@ const Accordion = ({ children, title, extraClass, ...props }) => {
   )
 }
 
-Accordion.defaultProps = {
-  extraClass: null
-}
-
 Accordion.propTypes = {
   /** Title */
   title: PT.oneOfType([
@@ -33,7 +29,7 @@ Accordion.propTypes = {
     PT.node
   ]).isRequired,
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** Childen nodes */
   children: PT.oneOfType([
     PT.string,

src/Accordion/test.js

@@ -20,7 +20,7 @@ it('Open accordion', () => {
 
 it('Accordion with extra class', () => {
   const tree = renderer
-    .create(<Accordion title="See more" extraClass="foo">Lorem ipsum dolor sit amet</Accordion>)
+    .create(<Accordion title="See more" className="foo">Lorem ipsum dolor sit amet</Accordion>)
     .toJSON()
 
   expect(tree).toMatchSnapshot()

src/Button/index.js

@@ -5,15 +5,15 @@ import { getElementType } from '../utils'
 
 import Spinner from '../Spinner'
 
-const Button = ({ variant, children, disabled, busy, extraClass, as, ...props }) => {
+const Button = ({ variant, children, disabled, busy, className, as, ...props }) => {
   const ElementType = getElementType(Button, { as: as, ...props })
   delete props['as']
   const styles = cx(
     'ola_button',
     {[`is-${variant}`]: variant },
     {'is-busy': busy},
     {'is-disabled': disabled && !busy},
-    extraClass
+    className
   )
   return (
     <ElementType className={styles} disabled={busy ? true : disabled} {...props}>
@@ -27,7 +27,7 @@ Button.defaultProps = {
   as: 'button',
   variant: null,
   busy: null,
-  extraClass: null,
+  className: null,
   disabled: false
 }
 
@@ -42,7 +42,7 @@ Button.propTypes = {
     PT.bool
   ]),
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** Childen nodes */
   children: PT.oneOfType([
     PT.string,

src/Button/test.js

@@ -60,7 +60,7 @@ it('Busy button', () => {
 
 it('Primary button with extra class', () => {
   const tree = renderer
-    .create(<Button variant="primary" extraClass="is-extra">Click here</Button>)
+    .create(<Button variant="primary" className="is-extra">Click here</Button>)
     .toJSON()
 
   expect(tree).toMatchSnapshot()

src/ButtonGroup/index.js

@@ -2,12 +2,12 @@ import React from 'react'
 import {default as PT} from 'prop-types'
 import cx from 'classnames'
 
-const ButtonGroup = ({ variant, extraClass, children, ...props }) => {
+const ButtonGroup = ({ variant, className, children, ...props }) => {
   const styles = cx(
     'ola_buttonGroup',
     { 'is-center': variant && (variant == 'center' || variant == 'reversed-center') },
     { 'is-reversed': variant && (variant == 'reversed' || variant == 'reversed-center') },
-    extraClass
+    className
   )
   return (
     <div className={styles} {...props}>
@@ -18,14 +18,14 @@ const ButtonGroup = ({ variant, extraClass, children, ...props }) => {
 
 ButtonGroup.defaultProps = {
   variant: 'default',
-  extraClass: null
+  className: null
 }
 
 ButtonGroup.propTypes = {
   /** Variants: Center or Reversed button order ( helper for tabulation problems ) */
   variant: PT.oneOf(['default', 'reversed', 'center', 'reversed-center']),
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** Childen nodes */
   children: PT.oneOfType([
     PT.string,

src/ButtonGroup/test.js

@@ -58,7 +58,7 @@ it('Group with two buttons in reverse order centered', () => {
 it('Group with two buttons in reverse order and extra class', () => {
   const tree = renderer
     .create(
-      <ButtonGroup variant="reversed" extraClass="is-extra">
+      <ButtonGroup variant="reversed" className="is-extra">
         <Button variant="primary">Main button</Button>
         <Button variant="secondary">Secondary button</Button>
       </ButtonGroup>

src/ButtonIcon/index.js

@@ -5,15 +5,15 @@ import cx from 'classnames'
 
 import Spinner from '../Spinner'
 
-const ButtonIcon = ({ as, extraClass, children, busy, disabled, variant, ...props }) => {
+const ButtonIcon = ({ as, className, children, busy, disabled, variant, ...props }) => {
   const ElementType = getElementType(ButtonIcon, { as: as, ...props })
   delete props['as']
   const styles = cx(
     'ola_buttonIcon',
     `is-${variant}`,
     {'is-busy': busy},
     {'is-disabled': disabled && !busy},
-    extraClass
+    className
   )
   return (
     <ElementType {...props} disabled={busy ? true : disabled} className={styles}>
@@ -35,7 +35,7 @@ ButtonIcon.propTypes = {
   /** Button variants */
   variant: PT.oneOf(['primary', 'secondary', 'destructive', 'chevron']),
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** Childen nodes */
   children: PT.oneOfType([
     PT.string,

src/Check/index.js

@@ -2,9 +2,9 @@ import React from 'react'
 import cx from 'classnames'
 import {default as PT} from 'prop-types'
 
-const Check = ({ type, children, extraClass, variant, ...props }) => {
+const Check = ({ type, children, className, variant, ...props }) => {
   return (
-    <label className={cx('ola_check', variant && `is-${variant}`, extraClass)}>
+    <label className={cx('ola_check', variant && `is-${variant}`, className)}>
       <input type={type} className="ola_check-input" {...props} />
       <div className="ola_check-label">
         { children && <div className="ola_check-label-content">{ children }</div> }
@@ -16,7 +16,7 @@ const Check = ({ type, children, extraClass, variant, ...props }) => {
 Check.defaultProps = {
   variant: null,
   type: 'checkbox',
-  extraClass: null,
+  className: null,
 }
 
 Check.propTypes = {
@@ -25,7 +25,7 @@ Check.propTypes = {
   /** CheckArea variants */
   variant: PT.oneOf(['area', 'option']),
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** Childen nodes */
   children: PT.oneOfType([
     PT.string,

src/CheckGroup/index.js

@@ -2,23 +2,23 @@ import React from 'react'
 import {default as PT} from 'prop-types'
 import cx from 'classnames'
 
-const CheckGroup = ({ variant, children, extraClass, ...props }) => {
+const CheckGroup = ({ variant, children, className, ...props }) => {
   return (
-    <div role="radiogroup" className={cx('ola_checkGroup', variant && `is-${variant}`, extraClass)} { ...props }>
+    <div role="radiogroup" className={cx('ola_checkGroup', variant && `is-${variant}`, className)} { ...props }>
       { children }
     </div>
   )
 }
 
 CheckGroup.defaultProps = {
   variant: 'row',
-  extraClass: null,
+  className: null,
 }
 
 CheckGroup.propTypes = {
   variant: PT.oneOf(['row', 'column', 'list']),
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** Childen nodes */
   children: PT.oneOfType([
     PT.string,

src/Icon/index.js

@@ -43,9 +43,9 @@ const ICONS = {
   'warning': Warning
 }
 
-const Icon = ({ name, size, extraClass, ...props }) => {
+const Icon = ({ name, size, className, ...props }) => {
   const SpecificIcon = ICONS[name]
-  const IconClasses = cx('ola_icon', `is-${size}`, extraClass)
+  const IconClasses = cx('ola_icon', `is-${size}`, className)
   return (
     <svg width="28" height="28" viewBox="0 0 28 28" fillRule="evenodd" className={IconClasses} {...props}>
       <SpecificIcon />
@@ -56,7 +56,7 @@ const Icon = ({ name, size, extraClass, ...props }) => {
 Icon.defaultProps = {
   name: 'help',
   size: 'medium',
-  extraClass: null
+  className: null
 }
 
 Icon.propTypes = {
@@ -84,7 +84,7 @@ Icon.propTypes = {
   /** Size */
   size: PT.oneOf(['small', 'medium', 'big']),
   /** Extra className */
-  extraClass: PT.string
+  className: PT.string
 }
 
 export default Icon

src/Input/index.js

@@ -2,15 +2,15 @@ import React from 'react'
 import {default as PT} from 'prop-types'
 import cx from 'classnames'
 
-const Input = ({ extraClass, error, type, ...props }) => {
+const Input = ({ className, error, type, ...props }) => {
   return type === 'textarea' ?
-    ( <textarea type={type} className={ cx('ola_input', {'is-invalid': error}, extraClass) } {...props} /> ) :
-    ( <input type={type} className={ cx('ola_input', {'is-invalid': error}, extraClass) } {...props} /> )
+    ( <textarea type={type} className={ cx('ola_input', {'is-invalid': error}, className) } {...props} /> ) :
+    ( <input type={type} className={ cx('ola_input', {'is-invalid': error}, className) } {...props} /> )
 }
 
 Input.defaultProps = {
   type: 'text',
-  extraClass: null,
+  className: null,
   error: false
 }
 
@@ -32,7 +32,7 @@ Input.propTypes = {
     'week'
   ]),
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** Input is invalid */
   error: PT.bool
 }

src/Metric/index.js

@@ -13,17 +13,17 @@ const defaultIcons = {
 const MetricValue = ({busy=false, variant, valueIcon, children}) => {
   return (
     <strong className="ola_metric-value">
-      { busy && <Spinner extraClass="ola_metric-icon" /> }
-      { (variant === 'error') && <Icon name={defaultIcons.error} extraClass="ola_metric-icon" /> }
-      { (valueIcon && variant && variant !== 'error') && <Icon name={defaultIcons[variant]} extraClass="ola_metric-icon" /> }
+      { busy && <Spinner className="ola_metric-icon" /> }
+      { (variant === 'error') && <Icon name={defaultIcons.error} className="ola_metric-icon" /> }
+      { (valueIcon && variant && variant !== 'error') && <Icon name={defaultIcons[variant]} className="ola_metric-icon" /> }
       {children}
     </strong>
   )
 }
 
-const Metric = ({ title, value, description, variant, valueIcon, busy, extraClass, footer, ...props }) => {
+const Metric = ({ title, value, description, variant, valueIcon, busy, className, footer, ...props }) => {
   return (
-    <div className={cx('ola_metric', variant && `is-${variant}`, busy && 'is-busy', footer && 'is-centered', extraClass)} {...props}>
+    <div className={cx('ola_metric', variant && `is-${variant}`, busy && 'is-busy', footer && 'is-centered', className)} {...props}>
       <strong className="ola_metric-title">{title}</strong>
       { description && !footer && <p className="ola_metric-description">{description}</p> }
       <MetricValue busy={busy} variant={variant} valueIcon={valueIcon}>
@@ -38,7 +38,7 @@ Metric.defaultProps = {
   title: null,
   description: null,
   value: null,
-  extraClass: null,
+  className: null,
   variant: null,
   valueIcon: false,
   busy: false,
@@ -53,7 +53,7 @@ Metric.propTypes = {
   /** Metric value */
   value: PT.string,
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** Tag variants */
   variant: PT.oneOf(['error', 'positive', 'negative']),
   /** Icon for value variants */

src/Modal/Content.js

@@ -2,9 +2,9 @@ import React from 'react'
 import {default as PT} from 'prop-types'
 import cx from 'classnames'
 
-const ModalContent = ({ extraClass, variant, children, ...props }) => {
+const ModalContent = ({ className, variant, children, ...props }) => {
   return (
-    <div className={cx('ola_modal-content', variant && `is-${variant}`, extraClass)} {...props}>
+    <div className={cx('ola_modal-content', variant && `is-${variant}`, className)} {...props}>
       {children}
     </div>
   )
@@ -16,7 +16,7 @@ ModalContent.defaultProps = {
 
 ModalContent.propTypes = {
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** ModalContent variants */
   variant: PT.oneOf(['fullwidth']),
   /** Childen nodes */

src/Modal/Footer.js

@@ -2,17 +2,17 @@ import React from 'react'
 import {default as PT} from 'prop-types'
 import cx from 'classnames'
 
-const ModalFooter = ({ extraClass, children, ...props }) => {
+const ModalFooter = ({ className, children, ...props }) => {
   return (
-    <div className={cx('ola_modal-footer', extraClass)} {...props}>
+    <div className={cx('ola_modal-footer', className)} {...props}>
       { children }
     </div>
   )
 }
 
 ModalFooter.propTypes = {
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** Childen nodes */
   children: PT.oneOfType([
     PT.string,

src/Modal/Header.js

@@ -2,9 +2,9 @@ import React from 'react'
 import {default as PT} from 'prop-types'
 import cx from 'classnames'
 
-const ModalHeader = ({ title, intro, children, extraClass, ...props }) => {
+const ModalHeader = ({ title, intro, children, className, ...props }) => {
   return (
-    <header className={cx('ola_modal-header', children && 'has-extra', extraClass)} {...props}>
+    <header className={cx('ola_modal-header', children && 'has-extra', className)} {...props}>
       <h2 className="ola_modal-title">{title}</h2>
       { intro && <p className="ola_modal-intro">{intro}</p> }
       { children && <div className="ola_modal-extra">{ children }</div> }
@@ -19,7 +19,7 @@ ModalHeader.defaultProps = {
 
 ModalHeader.propTypes = {
   /** Extra className */
-  extraClass: PT.string,
+  className: PT.string,
   /** Title of header */
   title: PT.oneOfType([
     PT.string,