Merge branch 'master' of https://github.com/mrholek/CoreUI-React

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.0-beta",
+  "version": "2.0.0-beta.1",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -12,27 +12,27 @@
     "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.0-beta.6",
+    "@coreui/coreui": "^2.0.0-beta.10",
-    "@coreui/react": "^2.0.0-beta",
+    "@coreui/react": "^2.0.0-beta.1",
-    "babel-jest": "^22.4.3",
+    "bootstrap": "^4.1.0",
-    "bootstrap": "4.0.0",
     "chart.js": "^2.7.2",
-    "classnames": "^2.2.3",
+    "classnames": "^2.2.5",
     "flag-icon-css": "^3.0.0",
     "font-awesome": "^4.7.0",
-    "node-sass-chokidar": "^1.2.2",
     "prop-types": "^15.6.1",
-    "react": "^16.3.1",
+    "react": "^16.3.2",
     "react-chartjs-2": "^2.7.0",
-    "react-dom": "^16.3.1",
+    "react-dom": "^16.3.2",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "^1.1.4",
     "reactstrap": "^5.0.0",
     "simple-line-icons": "^2.4.1"
   },
   "devDependencies": {
-    "npm-run-all": "^4.1.2"
+    "babel-jest": "^22.4.3",
+    "node-sass-chokidar": "^1.2.2",
+    "npm-run-all": "^4.1.2",
+    "react-scripts": "^1.1.4"
   },
   "scripts": {
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",

src/containers/Full/FullAside.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
+import { Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { AppSwitch } from '@coreui/react'
 
 const propTypes = {
   children: PropTypes.node,
@@ -239,11 +240,7 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-4">
                 <small><b>Option 1</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'}/>
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </div>
               <div>
                 <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -255,11 +252,7 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 2</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} size={'sm'}/>
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </div>
               <div>
                 <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -271,22 +264,17 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 3</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} disabled/>
-                  <Input type="checkbox" className="switch-input" />
+                <div>
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                  <small className="text-muted">Option disabled.</small>
-                  <span className="switch-handle"></span>
+                </div>
-                </Label>
               </div>
             </div>
 
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 4</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </div>
             </div>
 

src/routes.js

@@ -44,7 +44,7 @@ const routes = [
   { path: '/base', exact: true, name: 'Base', component: Cards },
   { path: '/base/cards', name: 'Cards', component: Cards },
   { path: '/base/forms', name: 'Forms', component: Forms },
-  { path: '/base/switches', name: 'Swithces', component: Switches },
+  { path: '/base/switches', name: 'Switches', component: Switches },
   { path: '/base/tables', name: 'Tables', component: Tables },
   { path: '/base/tabs', name: 'Tabs', component: Tabs },
   { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },

src/views/Base/Cards/Cards.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row, Collapse, Fade } from 'reactstrap';
+import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Row, Collapse, Fade } from 'reactstrap';
+import { AppSwitch } from '@coreui/react'
 
 class Cards extends Component {
   constructor(props) {
@@ -64,11 +65,7 @@ class Cards extends Component {
             <Card>
               <CardHeader>
                 Card with switch
-                <Label className="switch switch-sm switch-text switch-info float-right mb-0">
+                <AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/>
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardHeader>
               <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

src/views/Base/Collapses/Collapses.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap';
+import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap';
 
 class Collapses extends Component {
 
@@ -130,6 +130,9 @@ class Collapses extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i> Collapse <small>accordion</small>
+                <div className="card-header-actions">
+                  <Badge>NEW</Badge>
+                </div>
               </CardHeader>
               <CardBody>
                 <div id="accordion">
@@ -187,6 +190,9 @@ class Collapses extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i> Collapse <small>custom accordion</small>
+                <div className="card-header-actions">
+                  <Badge>NEW</Badge>
+                </div>
               </CardHeader>
               <CardBody>
                 <div id="exampleAccordion" data-children=".item">

src/views/Base/Forms/Forms.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import {
+  Badge,
   Button,
   ButtonDropdown,
   Card,
@@ -195,7 +196,7 @@ class Forms extends Component {
                   </FormGroup>
                   <FormGroup row>
                     <Col md="3">
-                      <Label htmlFor="date-input">Date Input</Label>
+                      <Label htmlFor="date-input">Date Input <Badge>NEW</Badge></Label>
                     </Col>
                     <Col xs="12" md="9">
                       <Input type="date" id="date-input" name="date-input" placeholder="date" />

src/views/Base/ListGroups/ListGroups.js

@@ -172,6 +172,9 @@ class ListGroups extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>List Group</strong> <small>with TabPanes</small>
+                <div className="card-header-actions">
+                  <Badge>NEW</Badge>
+                </div>
               </CardHeader>
               <CardBody>
                 <Row>

src/views/Dashboard/Dashboard.js

@@ -890,135 +890,6 @@ class Dashboard extends Component {
                       </div>
                     </ul>
                   </Col>
-                  {/*<Col xs="12" xl="4">*/}
-                    {/*<Row>*/}
-                      {/*<Col sm="6">*/}
-                        {/*<div className="callout">*/}
-                          {/*<small className="text-muted">CTR</small>*/}
-                          {/*<br />*/}
-                          {/*<strong className="h4">23%</strong>*/}
-                          {/*<div className="chart-wrapper">*/}
-                            {/*<Line data={makeSparkLineData(4)} options={sparklineChartOpts} width={100} height={30} />*/}
-                          {/*</div>*/}
-                        {/*</div>*/}
-                      {/*</Col>*/}
-                      {/*<Col sm="6">*/}
-                        {/*<div className="callout callout-primary">*/}
-                          {/*<small className="text-muted">Bounce Rate</small>*/}
-                          {/*<br />*/}
-                          {/*<strong className="h4">5%</strong>*/}
-                          {/*<div className="chart-wrapper">*/}
-                            {/*<Line data={makeSparkLineData(5, brandPrimary)} options={sparklineChartOpts} width={100} height={30} />*/}
-                          {/*</div>*/}
-                        {/*</div>*/}
-                      {/*</Col>*/}
-                    {/*</Row>*/}
-                    {/*<hr className="mt-0" />*/}
-                    {/*<ul className="icons-list">*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-screen-desktop bg-primary"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">iMac 4k</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Sold this week</div>*/}
-                          {/*<strong>1.924</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-screen-smartphone bg-info"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">Samsung Galaxy Edge</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Sold this week</div>*/}
-                          {/*<strong>1.224</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-screen-smartphone bg-warning"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">iPhone 6S</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Sold this week</div>*/}
-                          {/*<strong>1.163</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-user bg-danger"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">Premium accounts</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Sold this week</div>*/}
-                          {/*<strong>928</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-social-spotify bg-success"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">Spotify Subscriptions</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Sold this week</div>*/}
-                          {/*<strong>893</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-cloud-download bg-danger"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">Ebook</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Downloads</div>*/}
-                          {/*<strong>121.924</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-camera bg-warning"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">Photos</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Uploaded</div>*/}
-                          {/*<strong>12.125</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li className="divider text-center">*/}
-                        {/*<Button color="link" size="sm" className="text-muted" data-toggle="tooltip" data-placement="top" title="show more"><i*/}
-                          {/*className="icon-options"></i></Button>*/}
-                      {/*</li>*/}
-                    {/*</ul>*/}
-                  {/*</Col>*/}
                 </Row>
                 <br />
                 <Table hover responsive className="table-outline mb-0 d-none d-sm-table">