@@ -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';
 

@@ -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"
 ]
 }

@@ -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');
 

@@ -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>
 );
 }
 }

@@ -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 (

@@ -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');
 

@@ -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');
 

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

@@ -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');
 

@@ -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');
 }
 

@@ -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');
 

@@ -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');
 

@@ -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>
 );

@@ -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..componentDidMount.calledOnce).toEqual(true);
 });
-})
+it('should call isHidden()', () => {
+const isHidden = spy(AppAside., 'isHidden');
+shallow(<AppAside />);
+expect(isHidden.called).toBe(true);
+});
+it('should call isOffCanvas()', () => {
+const isOffCanvas = spy(AppAside., 'isOffCanvas');
+shallow(<AppAside offCanvas={false}/>);
+expect(isOffCanvas.called).toBe(true);
+});
+})

@@ -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..componentDidMount.calledOnce).toEqual(true);
 });
-})
+it('should call isFixed()', () => {
+const isFixed = spy(AppFooter., 'isFixed');
+shallow(<AppFooter />);
+expect(isFixed.called).toBe(true);
+});
+
+})

@@ -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..componentDidMount.calledOnce).toEqual(true);
 });
-})
+it('should call isFixed()', () => {
+const isFixed = spy(AppHeader., 'isFixed');
+shallow(<AppHeader />);
+expect(isFixed.called).toBe(true);
+});
+})

@@ -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"');
+});
+
 });