Merge pull request #7 from coreui/dev-beta-1

ship: v2.0.0-beta.1

demo/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM, { render } from 'react-dom';
+import ReactDOM from 'react-dom';
 import App from './App';
 // import registerServiceWorker from './registerServiceWorker';
 

package.json

@@ -8,7 +8,8 @@
     "css/",
     "es/",
     "lib/",
-    "umd/"
+    "umd/",
+    "README.md"
   ],
   "scripts": {
     "build": "nwb build-react-component",
@@ -20,7 +21,7 @@
     "lint": "eslint src"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.0-beta.9",
+    "@coreui/coreui": "^2.0.0-beta.10",
     "bootstrap": "^4.1.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
@@ -61,6 +62,9 @@
     "react",
     "bootstrap",
     "framework",
-    "responsive"
+    "responsive",
+    "layout",
+    "component",
+    "components"
   ]
 }

src/Aside.js

@@ -62,7 +62,13 @@ class AppAside extends Component {
   }
 
   render() {
-    const { className, children, display, fixed, hidden, offCanvas, isOpen, tag: Tag, ...attributes } = this.props;
+    const { className, children, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.display
+    delete attributes.fixed
+    delete attributes.hidden
+    delete attributes.offCanvas
+    delete attributes.isOpen
 
     const classes = classNames(className, 'aside-menu');
 

src/AsideToggler.js

@@ -45,19 +45,23 @@ class AppAsideToggler extends Component {
   }
 
   render() {
-    const { className, children, mobile, tag: Tag, display, ...attributes } = this.props;
+    const { className, children, type, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.display
+    delete attributes.mobile
+    delete attributes.display
 
     const classes = classNames(className, 'navbar-toggler');
 
     return (
-      <button
-          type="button"
+      <Tag
+          type={type}
           className={classes}
           {...attributes}
           onClick={(event)=>this.asideToggle(event)}
       >
         {children || <span className="navbar-toggler-icon" />}
-      </button>
+      </Tag>
     );
   }
 }

src/Breadcrumb.js

@@ -82,7 +82,11 @@ class AppBreadcrumb extends Component {
   }
 
   render() {
-    const { className, children, appRoutes, tag: Tag, ...attributes } = this.props;
+    const { className, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.children
+    delete attributes.appRoutes
+
     const classes = classNames(className);
 
     return (

src/Footer.js

@@ -30,7 +30,9 @@ class AppFooter extends Component {
   }
 
   render() {
-    const { className, children, fixed, tag: Tag, ...attributes } = this.props;
+    const { className, children, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.fixed
 
     const classes = classNames(className, 'app-footer');
 

src/Header.js

@@ -28,7 +28,9 @@ class AppHeader extends Component {
   // }
 
   render() {
-    const { className, children, fixed, tag: Tag, ...attributes } = this.props;
+    const { className, children, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.fixed
 
     const classes = classNames(className, 'app-header', 'navbar');
 

src/Shared/layout/layout.js

@@ -1,4 +1,4 @@
-import { ToggleClasses } from '../toggle-classes';
+// import { toggleClasses } from '../toggle-classes';
 
 class Layout {
   static sidebarToggle() {

src/Sidebar.js

@@ -71,7 +71,15 @@ class AppSidebar extends Component {
   }
 
   render() {
-    const { className, children, compact, display, fixed, minimized, offCanvas, isOpen, tag: Tag, staticContext, ...attributes } = this.props;
+    const { className, children, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.compact
+    delete attributes.display
+    delete attributes.fixed
+    delete attributes.minimized
+    delete attributes.offCanvas
+    delete attributes.isOpen
+    delete attributes.staticContext
 
     const classes = classNames(className, 'sidebar');
 

src/SidebarMinimizer.js

@@ -20,9 +20,7 @@ class AppSidebarMinimizer extends Component {
 
     this.handleClick = this.handleClick.bind(this);
   }
-  sidebarMinimize(e) {
-    // e.preventDefault();
-
+  sidebarMinimize() {
     document.body.classList.toggle('sidebar-minimized');
     const sidebar = document.querySelector('.sidebar-nav')
     if (sidebar) {
@@ -31,9 +29,7 @@ class AppSidebarMinimizer extends Component {
     }
   }
 
-  brandMinimize(e) {
-    // e.preventDefault();
-
+  brandMinimize() {
     document.body.classList.toggle('brand-minimized');
   }
 

src/SidebarNav.js

@@ -165,7 +165,11 @@ class AppSidebarNav extends Component {
   }
 
   render() {
-    const { className, children, isOpen, tag: Tag, navConfig, staticContext, ...attributes } = this.props;
+    const { className, children, navConfig, ...attributes } = this.props;
+
+    delete attributes.isOpen
+    delete attributes.staticContext
+    delete attributes.Tag
 
     const navClasses = classNames(className, 'sidebar-nav');
 

src/SidebarToggler.js

@@ -43,7 +43,10 @@ class AppSidebarToggler extends Component {
   }
 
   render() {
-    const { className, children, mobile, tag: Tag, display, ...attributes } = this.props;
+    const { className, children, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.mobile
+    delete attributes.display
 
     const classes = classNames(className, 'navbar-toggler');
 

src/Switch.js

@@ -5,20 +5,23 @@ import classNames from 'classnames';
 const propTypes = {
   color: PropTypes.string,
   label: PropTypes.bool,
-  outline: PropTypes.bool,
-  outlineAlt: PropTypes.bool,
-  pill: PropTypes.bool,
-  size: PropTypes.string,
+  outline: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string,
+    PropTypes.oneOf(['', 'alt'])
+  ]),
+  size: PropTypes.oneOf(['', 'lg', 'sm']),
   checked: PropTypes.bool,
   defaultChecked: PropTypes.bool,
   defaultValue: PropTypes.any,
+  value: PropTypes.string,
   disabled: PropTypes.bool,
   form: PropTypes.any,
-  indeterminate: PropTypes.any,
   name: PropTypes.string,
   required: PropTypes.bool,
-  type: PropTypes.string,
-  value: PropTypes.string,
+  onChange: PropTypes.func,
+  type: PropTypes.oneOf(['checkbox', 'radio']),
+  variant: PropTypes.oneOf(['', '3d', 'pill']),
   className: PropTypes.string,
   dataOn: PropTypes.string,
   dataOff: PropTypes.string,
@@ -28,48 +31,52 @@ const defaultProps = {
   color: 'secondary',
   label: false,
   outline: false,
-  outlineAlt: false,
-  pill: false,
   size: '',
   checked: false,
   defaultChecked: false,
   disabled: false,
   required: false,
   type: 'checkbox',
+  variant: '',
   dataOn: 'On',
   dataOff: 'Off',
 };
 
 class AppSwitch extends Component {
   constructor(props) {
     super(props);
-    this.toggle = this.toggle.bind(this);
+    this.onChange = this.onChange.bind(this);
     this.state = {
       checked: this.props.defaultChecked || this.props.checked,
+      selected: []
     };
   }
 
-  toggle(event) {
+  onChange(event) {
     const target = event.target;
     this.setState({
       checked: target.checked,
-    });
+    })
+
+    if (this.props.onChange) {
+      this.props.onChange(event);
+    }
   }
 
   render() {
-    const { className, checked, disabled, color, defaultChecked, name, label, outline, outlineAlt, pill, size, required, type, value, dataOn, dataOff, ...attributes } = this.props;
-
-    const outlined = outline || outlineAlt;
+    const { className, disabled, color, name, label, outline, size, required, type, value, dataOn, dataOff, variant, ...attributes } = this.props;
 
-    const variant = `switch${outlined ? '-outline' : ''}-${color}${outlineAlt ? '-alt' : ''}`;
+    delete attributes.checked
+    delete attributes.defaultChecked
+    delete attributes.onChange
 
     const classes = classNames(
       className,
       'switch',
       label ? 'switch-label' : false,
-      pill ? 'switch-pill' : false,
       size ? `switch-${size}` : false,
-      variant,
+      variant ? `switch-${variant}` : false,
+      `switch${outline ? '-outline' : ''}-${color}${outline==='alt' ? '-alt' : ''}`,
       'form-check-label',
     );
 
@@ -84,7 +91,7 @@ class AppSwitch extends Component {
 
     return (
       <label className={classes}>
-        <input type={type} className={inputClasses} onChange={this.toggle} checked={this.state.checked} name={name} required={required} disabled={disabled} value={value} />
+        <input type={type} className={inputClasses} onChange={this.onChange} checked={this.state.checked} name={name} required={required} disabled={disabled} value={value} {...attributes} />
         <span className={sliderClasses} data-checked={dataOn} data-unchecked={dataOff}></span>
       </label>
     );

tests/Aside.test.js

@@ -2,7 +2,7 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
-import { configure, mount } from 'enzyme'
+import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import { spy } from 'sinon'
 
@@ -12,7 +12,7 @@ configure({ adapter: new Adapter() });
 
 describe('AppAside', () => {
   it('renders aside with class="aside-menu"', () => {
-    expect(render(<AppAside fixed hidden display="lg">aside</AppAside>))
+    expect(render(<AppAside fixed hidden offCanvas display="lg">aside</AppAside>))
     .toContain('<aside class="aside-menu">aside</aside>')
   });
   it('calls componentDidMount', () => {
@@ -21,4 +21,14 @@ describe('AppAside', () => {
     const wrapper = mount(<AppAside fixed hidden display="lg" />);
     expect(AppAside.prototype.componentDidMount.calledOnce).toEqual(true);
   });
-})
+  it('should call isHidden()', () => {
+    const isHidden = spy(AppAside.prototype, 'isHidden');
+    shallow(<AppAside />);
+    expect(isHidden.called).toBe(true);
+  });
+  it('should call isOffCanvas()', () => {
+    const isOffCanvas = spy(AppAside.prototype, 'isOffCanvas');
+    shallow(<AppAside offCanvas={false}/>);
+    expect(isOffCanvas.called).toBe(true);
+  });
+})

tests/Footer.test.js

@@ -2,7 +2,7 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
-import { configure, mount } from 'enzyme'
+import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import { spy } from 'sinon'
 
@@ -21,4 +21,10 @@ describe('AppFooter', () => {
     const wrapper = mount(<AppFooter fixed display="lg" />);
     expect(AppFooter.prototype.componentDidMount.calledOnce).toEqual(true);
   });
-})
+  it('should call isFixed()', () => {
+    const isFixed = spy(AppFooter.prototype, 'isFixed');
+    shallow(<AppFooter />);
+    expect(isFixed.called).toBe(true);
+  });
+
+})

tests/Header.test.js

@@ -2,11 +2,12 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
-import { configure, mount } from 'enzyme'
+import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import { spy } from 'sinon'
 
 import AppHeader from 'src/Header'
+import AppFooter from '../src/Footer';
 
 configure({ adapter: new Adapter() });
 
@@ -21,4 +22,9 @@ describe('AppHeader', () => {
     const wrapper = mount(<AppHeader fixed/>);
     expect(AppHeader.prototype.componentDidMount.calledOnce).toEqual(true);
   });
-})
+  it('should call isFixed()', () => {
+    const isFixed = spy(AppHeader.prototype, 'isFixed');
+    shallow(<AppHeader />);
+    expect(isFixed.called).toBe(true);
+  });
+})

tests/NavbarBrand.test.js

@@ -15,4 +15,13 @@ describe('AppNavbarBrand', () => {
       minimized={{ src: sygnet, width: 30, height: 30, alt: 'CoreUI Minimized' }}
     />)).toContain('class="navbar-brand"');
   });
+  it('renders anchor with class="navbar-brand"', () => {
+    expect(render(<AppNavbarBrand
+      brand={{ }}
+    />)).toContain('class="navbar-brand"');
+  });
+  it('renders anchor with class="navbar-brand"', () => {
+    expect(render(<AppNavbarBrand />)).toContain('class="navbar-brand"');
+  });
+
 });