Merge pull request #128 from coreui/dev-vnext

v2.1.0

CHANGELOG.md

@@ -1,5 +1,35 @@
 ## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
 
+##### `v2.1.0` 
+- feat(SidebarNav): navLink `attributes` - optional JS object with valid JS API naming:
+  - valid attributes: `rel`, `target`, `hidden`, `disabled`, etc...  
+  - starting with `@coreui/coreui`, `@coreui/react` version `2.1.0` and up
+  - closes #106 
+  - item example(`./src/_nav.js`):
+      ```js
+      {
+        name: 'Disabled',
+        url: '/disabled',
+        icon: 'icon-ban',
+        attributes: { disabled: true },
+      },
+      {
+        name: 'Try CoreUI PRO',
+        url: 'https://coreui.io/pro/react/',
+        icon: 'cui-layers icons',
+        variant: 'danger',
+        attributes: { target: '_blank', rel: "noopener" },
+      },
+      ```
+- fix(Cards): `card-header-actions` added to `CardHeader` for `rtl` support
+- feat(Dashboard): new `Suspense` example with Widget03
+- chore: update `@coreui/coreui` to `2.1.0`
+- chore: update `@coreui/react` to `2.1.0`
+- chore: update `node-sass` to `4.10.0`
+- chore: update `react` to `16.6.1`
+- chore: update `react-dom` to `16.6.1`
+- chore: update `react-test-renderer` to `16.6.1`
+
 ##### `v2.0.14` 
 - chore: update `@coreui/coreui` to `2.0.25`
 - chore: update `chart.js` to `2.7.3`
@@ -11,7 +41,6 @@
 - chore: update `react-test-renderer` to `16.6.0`
 - chore: update `react-scripts` to `2.1.1`
 
-
 ##### `v2.0.13` 
 - refactor: migration to [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) cleanup 
   - cleanup `package.json` scripts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.14",
+  "version": "2.1.0",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -12,10 +12,10 @@
     "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.25",
+    "@coreui/coreui": "^2.1.0",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.3.0",
-    "@coreui/react": "^2.0.9",
+    "@coreui/react": "^2.1.0",
     "bootstrap": "^4.1.3",
     "chart.js": "^2.7.3",
     "classnames": "^2.2.6",
@@ -24,16 +24,16 @@
     "enzyme-adapter-react-16": "^1.6.0",
     "flag-icon-css": "^3.2.1",
     "font-awesome": "^4.7.0",
-    "node-sass": "^4.9.4",
+    "node-sass": "^4.10.0",
     "prop-types": "^15.6.2",
-    "react": "^16.6.0",
+    "react": "^16.6.1",
     "react-app-polyfill": "^0.1.3",
     "react-chartjs-2": "^2.7.2",
-    "react-dom": "^16.6.0",
+    "react-dom": "^16.6.1",
     "react-loadable": "^5.5.0",
     "react-router-config": "^4.4.0-beta.6",
     "react-router-dom": "^4.3.1",
-    "react-test-renderer": "^16.6.0",
+    "react-test-renderer": "^16.6.1",
     "reactstrap": "^6.5.0",
     "simple-line-icons": "^2.4.1"
   },

src/_nav.js

@@ -255,18 +255,26 @@ export default {
         },
       ],
     },
+    {
+      name: 'Disabled',
+      url: '/dashboard',
+      icon: 'icon-ban',
+      attributes: { disabled: true },
+    },
     {
       name: 'Download CoreUI',
-      url: 'http://coreui.io/react/',
+      url: 'https://coreui.io/react/',
       icon: 'icon-cloud-download',
       class: 'mt-auto',
       variant: 'success',
+      attributes: { target: '_blank', rel: "noopener" },
     },
     {
       name: 'Try CoreUI PRO',
-      url: 'http://coreui.io/pro/react/',
+      url: 'https://coreui.io/pro/react/',
       icon: 'icon-layers',
       variant: 'danger',
+      attributes: { target: '_blank', rel: "noopener" },
     },
   ],
 };

src/views/Base/Cards/Cards.js

@@ -52,7 +52,10 @@ class Cards extends Component {
           <Col xs="12" sm="6" md="4">
             <Card>
               <CardHeader>
-                <i className="fa fa-check float-right"></i>Card with icon
+                Card with icon
+                <div className="card-header-actions">
+                  <i className="fa fa-check float-right"></i>
+                </div>
               </CardHeader>
               <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@@ -65,7 +68,9 @@ class Cards extends Component {
             <Card>
               <CardHeader>
                 Card with switch
+                <div className="card-header-actions">
                   <AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/>
+                </div>
               </CardHeader>
               <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@@ -78,7 +83,9 @@ class Cards extends Component {
             <Card>
               <CardHeader>
                 Card with label
+                <div className="card-header-actions">
                   <Badge color="success" className="float-right">Success</Badge>
+                </div>
               </CardHeader>
               <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@@ -91,7 +98,9 @@ class Cards extends Component {
             <Card>
               <CardHeader>
                 Card with label
+                <div className="card-header-actions">
                   <Badge pill color="danger" className="float-right">42</Badge>
+                </div>
               </CardHeader>
               <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

src/views/Dashboard/Dashboard.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, lazy, Suspense } from 'react';
 import { Bar, Line } from 'react-chartjs-2';
 import {
   Badge,
@@ -20,10 +20,13 @@ import {
   Row,
   Table,
 } from 'reactstrap';
-import Widget03 from '../../views/Widgets/Widget03'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
 import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
 
+// import Widget03 from '../../views/Widgets/Widget03'
+const Widget03 = lazy(() => import('../../views/Widgets/Widget03'));
+const Loading = () => <div>Loading...</div>
+
 const brandPrimary = getStyle('--primary')
 const brandSuccess = getStyle('--success')
 const brandInfo = getStyle('--info')
@@ -637,53 +640,33 @@ class Dashboard extends Component {
 
         <Row>
           <Col xs="6" sm="6" lg="3">
+            <Suspense fallback={Loading()}>
               <Widget03 dataBox={() => ({ variant: 'facebook', friends: '89k', feeds: '459' })} >
                 <div className="chart-wrapper">
                   <Line data={makeSocialBoxData(0)} options={socialChartOpts} height={90} />
                 </div>
               </Widget03>
+            </Suspense>
           </Col>
 
           <Col xs="6" sm="6" lg="3">
-            <div className="brand-card">
+            <Suspense fallback={Loading()}>
-              <div className="brand-card-header bg-twitter">
+              <Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
-                <i className="fa fa-twitter"></i>
                 <div className="chart-wrapper">
                   <Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90} />
                 </div>
-              </div>
+              </Widget03>
-              <div className="brand-card-body">
+            </Suspense>
-                <div>
-                  <div className="text-value">973k</div>
-                  <div className="text-uppercase text-muted small">followers</div>
-                </div>
-                <div>
-                  <div className="text-value">1.792</div>
-                  <div className="text-uppercase text-muted small">tweets</div>
-                </div>
-              </div>
-            </div>
           </Col>
 
           <Col xs="6" sm="6" lg="3">
-            <div className="brand-card">
+            <Suspense fallback={Loading()}>
-              <div className="brand-card-header bg-linkedin">
+              <Widget03 dataBox={() => ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
-                <i className="fa fa-linkedin"></i>
                 <div className="chart-wrapper">
                   <Line data={makeSocialBoxData(2)} options={socialChartOpts} height={90} />
                 </div>
-              </div>
+              </Widget03>
-              <div className="brand-card-body">
+            </Suspense>
-                <div>
-                  <div className="text-value">500+</div>
-                  <div className="text-uppercase text-muted small">contacts</div>
-                </div>
-                <div>
-                  <div className="text-value">292</div>
-                  <div className="text-uppercase text-muted small">feeds</div>
-                </div>
-              </div>
-            </div>
           </Col>
 
           <Col xs="6" sm="6" lg="3">