refactor: update examples structure and views.

src/routes.js

@@ -5,53 +5,49 @@ const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
 const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
 
 // Base
-const Accordion = React.lazy(() => import('./views/components/base/accordion/Accordion'))
+const Accordion = React.lazy(() => import('./views/base/accordion/Accordion'))
-const Breadcrumbs = React.lazy(() => import('./views/components/base/breadcrumbs/Breadcrumbs'))
+const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'))
-const Cards = React.lazy(() => import('./views/components/base/cards/Cards'))
+const Cards = React.lazy(() => import('./views/base/cards/Cards'))
-const Carousels = React.lazy(() => import('./views/components/base/carousels/Carousels'))
+const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
-const Collapses = React.lazy(() => import('./views/components/base/collapses/Collapses'))
+const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'))
-const ListGroups = React.lazy(() => import('./views/components/base/list-groups/ListGroups'))
+const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
-const Navs = React.lazy(() => import('./views/components/base/navs/Navs'))
+const Navs = React.lazy(() => import('./views/base/navs/Navs'))
-const Paginations = React.lazy(() => import('./views/components/base/paginations/Paginations'))
+const Paginations = React.lazy(() => import('./views/base/paginations/Paginations'))
-const Popovers = React.lazy(() => import('./views/components/base/popovers/Popovers'))
+const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
-const Progress = React.lazy(() => import('./views/components/base/progress/Progress'))
+const Progress = React.lazy(() => import('./views/base/progress/Progress'))
-const Spinners = React.lazy(() => import('./views/components/base/spinners/Spinners'))
+const Spinners = React.lazy(() => import('./views/base/spinners/Spinners'))
-const Tables = React.lazy(() => import('./views/components/base/tables/Tables'))
+const Tables = React.lazy(() => import('./views/base/tables/Tables'))
-const Tooltips = React.lazy(() => import('./views/components/base/tooltips/Tooltips'))
+const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
 
 // Buttons
-const Buttons = React.lazy(() => import('./views/components/buttons/buttons/Buttons'))
+const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'))
-const ButtonGroups = React.lazy(() =>
+const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'))
-  import('./views/components/buttons/button-groups/ButtonGroups'),
+const Dropdowns = React.lazy(() => import('./views/buttons/dropdowns/Dropdowns'))
-)
-const Dropdowns = React.lazy(() => import('./views/components/buttons/dropdowns/Dropdowns'))
 
 //Forms
-const ChecksRadios = React.lazy(() => import('./views/components/forms/checks-radios/ChecksRadios'))
+const ChecksRadios = React.lazy(() => import('./views/forms/checks-radios/ChecksRadios'))
-const FloatingLabels = React.lazy(() =>
+const FloatingLabels = React.lazy(() => import('./views/forms/floating-labels/FloatingLabels'))
-  import('./views/components/forms/floating-labels/FloatingLabels'),
+const FormControl = React.lazy(() => import('./views/forms/form-control/FormControl'))
-)
+const InputGroup = React.lazy(() => import('./views/forms/input-group/InputGroup'))
-const FormControl = React.lazy(() => import('./views/components/forms/form-control/FormControl'))
+const Layout = React.lazy(() => import('./views/forms/layout/Layout'))
-const InputGroup = React.lazy(() => import('./views/components/forms/input-group/InputGroup'))
+const Range = React.lazy(() => import('./views/forms/range/Range'))
-const Layout = React.lazy(() => import('./views/components/forms/layout/Layout'))
+const Select = React.lazy(() => import('./views/forms/select/Select'))
-const Range = React.lazy(() => import('./views/components/forms/range/Range'))
+const Validation = React.lazy(() => import('./views/forms/validation/Validation'))
-const Select = React.lazy(() => import('./views/components/forms/select/Select'))
-const Validation = React.lazy(() => import('./views/components/forms/validation/Validation'))
 
-const Charts = React.lazy(() => import('./views/components/charts/Charts'))
+const Charts = React.lazy(() => import('./views/charts/Charts'))
 
 // Icons
-const CoreUIIcons = React.lazy(() => import('./views/components/icons/coreui-icons/CoreUIIcons'))
+const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons'))
-const Flags = React.lazy(() => import('./views/components/icons/flags/Flags'))
+const Flags = React.lazy(() => import('./views/icons/flags/Flags'))
-const Brands = React.lazy(() => import('./views/components/icons/brands/Brands'))
+const Brands = React.lazy(() => import('./views/icons/brands/Brands'))
 
 // Notifications
-const Alerts = React.lazy(() => import('./views/components/notifications/alerts/Alerts'))
+const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts'))
-const Badges = React.lazy(() => import('./views/components/notifications/badges/Badges'))
+const Badges = React.lazy(() => import('./views/notifications/badges/Badges'))
-const Modals = React.lazy(() => import('./views/components/notifications/modals/Modals'))
+const Modals = React.lazy(() => import('./views/notifications/modals/Modals'))
-const Toasts = React.lazy(() => import('./views/components/notifications/toasts/Toasts'))
+const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts'))
 
-const Widgets = React.lazy(() => import('./views/components/widgets/Widgets'))
+const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
 
 const routes = [
   { path: '/', exact: true, name: 'Home' },

src/views/base/accordion/Accordion.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import {
   CCard,
   CCardBody,

src/views/base/cards/Cards.js

@@ -21,6 +21,8 @@ import {
 } from '@coreui/react'
 import { DocsCallout, DocsExample } from 'src/components'
 
+import ReactImg from 'src/assets/images/react.jpg'
+
 const Cards = () => {
   return (
     <CRow>
@@ -48,24 +50,7 @@ const Cards = () => {
             </p>
             <DocsExample href="components/card">
               <CCard style={{ width: '18rem' }}>
-                <CCardImage
+                <CCardImage orientation="top" src={ReactImg} />
-                  component="svg"
-                  orientation="top"
-                  className="docs-placeholder-img"
-                  width="100%"
-                  height="180"
-                  xmlns="http://www.w3.org/2000/svg"
-                  role="img"
-                  aria-label="Placeholder: Image cap"
-                  preserveAspectRatio="xMidYMid slice"
-                  focusable="false"
-                >
-                  <title>Placeholder</title>
-                  <rect width="100%" height="100%" fill="#868e96"></rect>
-                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                    Image cap
-                  </text>
-                </CCardImage>
                 <CCardBody>
                   <CCardTitle>Card title</CCardTitle>
                   <CCardText>
@@ -144,24 +129,7 @@ const Cards = () => {
             </p>
             <DocsExample href="components/card/#images">
               <CCard style={{ width: '18rem' }}>
-                <CCardImage
+                <CCardImage orientation="top" src={ReactImg} />
-                  component="svg"
-                  orientation="top"
-                  className="docs-placeholder-img"
-                  width="100%"
-                  height="180"
-                  xmlns="http://www.w3.org/2000/svg"
-                  role="img"
-                  aria-label="Placeholder: Image cap"
-                  preserveAspectRatio="xMidYMid slice"
-                  focusable="false"
-                >
-                  <title>Placeholder</title>
-                  <rect width="100%" height="100%" fill="#868e96"></rect>
-                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                    Image cap
-                  </text>
-                </CCardImage>
                 <CCardBody>
                   <CCardText>
                     Some quick example text to build on the card title and make up the bulk of the
@@ -231,24 +199,7 @@ const Cards = () => {
             </p>
             <DocsExample href="components/card/#kitchen-sink">
               <CCard style={{ width: '18rem' }}>
-                <CCardImage
+                <CCardImage orientation="top" src={ReactImg} />
-                  component="svg"
-                  orientation="top"
-                  className="docs-placeholder-img"
-                  width="100%"
-                  height="180"
-                  xmlns="http://www.w3.org/2000/svg"
-                  role="img"
-                  aria-label="Placeholder: Image cap"
-                  preserveAspectRatio="xMidYMid slice"
-                  focusable="false"
-                >
-                  <title>Placeholder</title>
-                  <rect width="100%" height="100%" fill="#868e96"></rect>
-                  <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                    Image cap
-                  </text>
-                </CCardImage>
                 <CCardBody>
                   <CCardTitle>Card title</CCardTitle>
                   <CCardText>
@@ -550,24 +501,7 @@ const Cards = () => {
               <CRow>
                 <CCol lg={6}>
                   <CCard className="mb-3">
-                    <CCardImage
+                    <CCardImage orientation="top" src={ReactImg} />
-                      component="svg"
-                      orientation="top"
-                      className="docs-placeholder-img"
-                      width="100%"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      role="img"
-                      aria-label="Placeholder: Image cap"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                    >
-                      <title>Placeholder</title>
-                      <rect width="100%" height="100%" fill="#868e96"></rect>
-                      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                        Image cap
-                      </text>
-                    </CCardImage>
                     <CCardBody>
                       <CCardTitle>Card title</CCardTitle>
                       <CCardText>
@@ -592,24 +526,7 @@ const Cards = () => {
                         <small className="text-medium-emphasis">Last updated 3 mins ago</small>
                       </CCardText>
                     </CCardBody>
-                    <CCardImage
+                    <CCardImage orientation="bottom" src={ReactImg} />
-                      component="svg"
-                      orientation="bottom"
-                      className="docs-placeholder-img"
-                      width="100%"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      role="img"
-                      aria-label="Placeholder: Image cap"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                    >
-                      <title>Placeholder</title>
-                      <rect width="100%" height="100%" fill="#868e96"></rect>
-                      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                        Image cap
-                      </text>
-                    </CCardImage>
                   </CCard>
                 </CCol>
               </CRow>
@@ -745,24 +662,7 @@ const Cards = () => {
             <DocsExample href="components/card/#card-groups">
               <CCardGroup>
                 <CCard>
-                  <CCardImage
+                  <CCardImage orientation="top" src={ReactImg} />
-                    component="svg"
-                    orientation="top"
-                    className="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -775,24 +675,7 @@ const Cards = () => {
                   </CCardBody>
                 </CCard>
                 <CCard>
-                  <CCardImage
+                  <CCardImage orientation="top" src={ReactImg} />
-                    component="svg"
-                    orientation="top"
-                    className="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -805,24 +688,7 @@ const Cards = () => {
                   </CCardBody>
                 </CCard>
                 <CCard>
-                  <CCardImage
+                  <CCardImage orientation="top" src={ReactImg} />
-                    component="svg"
-                    orientation="top"
-                    className="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -843,24 +709,7 @@ const Cards = () => {
             <DocsExample href="components/card/#card-groups">
               <CCardGroup>
                 <CCard>
-                  <CCardImage
+                  <CCardImage orientation="top" src={ReactImg} />
-                    component="svg"
-                    orientation="top"
-                    className="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -873,24 +722,7 @@ const Cards = () => {
                   </CCardFooter>
                 </CCard>
                 <CCard>
-                  <CCardImage
+                  <CCardImage orientation="top" src={ReactImg} />
-                    component="svg"
-                    orientation="top"
-                    className="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -903,24 +735,7 @@ const Cards = () => {
                   </CCardFooter>
                 </CCard>
                 <CCard>
-                  <CCardImage
+                  <CCardImage orientation="top" src={ReactImg} />
-                    component="svg"
-                    orientation="top"
-                    className="docs-placeholder-img"
-                    width="100%"
-                    height="180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    role="img"
-                    aria-label="Placeholder: Image cap"
-                    preserveAspectRatio="xMidYMid slice"
-                    focusable="false"
-                  >
-                    <title>Placeholder</title>
-                    <rect width="100%" height="100%" fill="#868e96"></rect>
-                    <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                      Image cap
-                    </text>
-                  </CCardImage>
                   <CCardBody>
                     <CCardTitle>Card title</CCardTitle>
                     <CCardText>
@@ -956,24 +771,7 @@ const Cards = () => {
               <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
                 <CCol xs>
                   <CCard>
-                    <CCardImage
+                    <CCardImage orientation="top" src={ReactImg} />
-                      component="svg"
-                      orientation="top"
-                      className="docs-placeholder-img"
-                      width="100%"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      role="img"
-                      aria-label="Placeholder: Image cap"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                    >
-                      <title>Placeholder</title>
-                      <rect width="100%" height="100%" fill="#868e96"></rect>
-                      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                        Image cap
-                      </text>
-                    </CCardImage>
                     <CCardBody>
                       <CCardTitle>Card title</CCardTitle>
                       <CCardText>
@@ -988,24 +786,7 @@ const Cards = () => {
                 </CCol>
                 <CCol xs>
                   <CCard>
-                    <CCardImage
+                    <CCardImage orientation="top" src={ReactImg} />
-                      component="svg"
-                      orientation="top"
-                      className="docs-placeholder-img"
-                      width="100%"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      role="img"
-                      aria-label="Placeholder: Image cap"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                    >
-                      <title>Placeholder</title>
-                      <rect width="100%" height="100%" fill="#868e96"></rect>
-                      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                        Image cap
-                      </text>
-                    </CCardImage>
                     <CCardBody>
                       <CCardTitle>Card title</CCardTitle>
                       <CCardText>
@@ -1020,24 +801,7 @@ const Cards = () => {
                 </CCol>
                 <CCol xs>
                   <CCard>
-                    <CCardImage
+                    <CCardImage orientation="top" src={ReactImg} />
-                      component="svg"
-                      orientation="top"
-                      className="docs-placeholder-img"
-                      width="100%"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      role="img"
-                      aria-label="Placeholder: Image cap"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                    >
-                      <title>Placeholder</title>
-                      <rect width="100%" height="100%" fill="#868e96"></rect>
-                      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                        Image cap
-                      </text>
-                    </CCardImage>
                     <CCardBody>
                       <CCardTitle>Card title</CCardTitle>
                       <CCardText>
@@ -1052,24 +816,7 @@ const Cards = () => {
                 </CCol>
                 <CCol xs>
                   <CCard>
-                    <CCardImage
+                    <CCardImage orientation="top" src={ReactImg} />
-                      component="svg"
-                      orientation="top"
-                      className="docs-placeholder-img"
-                      width="100%"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      role="img"
-                      aria-label="Placeholder: Image cap"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                    >
-                      <title>Placeholder</title>
-                      <rect width="100%" height="100%" fill="#868e96"></rect>
-                      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                        Image cap
-                      </text>
-                    </CCardImage>
                     <CCardBody>
                       <CCardTitle>Card title</CCardTitle>
                       <CCardText>
@@ -1092,24 +839,7 @@ const Cards = () => {
               <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
                 <CCol xs>
                   <CCard>
-                    <CCardImage
+                    <CCardImage orientation="top" src={ReactImg} />
-                      component="svg"
-                      orientation="top"
-                      className="docs-placeholder-img"
-                      width="100%"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      role="img"
-                      aria-label="Placeholder: Image cap"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                    >
-                      <title>Placeholder</title>
-                      <rect width="100%" height="100%" fill="#868e96"></rect>
-                      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                        Image cap
-                      </text>
-                    </CCardImage>
                     <CCardBody>
                       <CCardTitle>Card title</CCardTitle>
                       <CCardText>
@@ -1124,24 +854,7 @@ const Cards = () => {
                 </CCol>
                 <CCol xs>
                   <CCard>
-                    <CCardImage
+                    <CCardImage orientation="top" src={ReactImg} />
-                      component="svg"
-                      orientation="top"
-                      className="docs-placeholder-img"
-                      width="100%"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      role="img"
-                      aria-label="Placeholder: Image cap"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                    >
-                      <title>Placeholder</title>
-                      <rect width="100%" height="100%" fill="#868e96"></rect>
-                      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                        Image cap
-                      </text>
-                    </CCardImage>
                     <CCardBody>
                       <CCardTitle>Card title</CCardTitle>
                       <CCardText>
@@ -1156,24 +869,7 @@ const Cards = () => {
                 </CCol>
                 <CCol xs>
                   <CCard>
-                    <CCardImage
+                    <CCardImage orientation="top" src={ReactImg} />
-                      component="svg"
-                      orientation="top"
-                      className="docs-placeholder-img"
-                      width="100%"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      role="img"
-                      aria-label="Placeholder: Image cap"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                    >
-                      <title>Placeholder</title>
-                      <rect width="100%" height="100%" fill="#868e96"></rect>
-                      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                        Image cap
-                      </text>
-                    </CCardImage>
                     <CCardBody>
                       <CCardTitle>Card title</CCardTitle>
                       <CCardText>
@@ -1188,24 +884,7 @@ const Cards = () => {
                 </CCol>
                 <CCol xs>
                   <CCard>
-                    <CCardImage
+                    <CCardImage orientation="top" src={ReactImg} />
-                      component="svg"
-                      orientation="top"
-                      className="docs-placeholder-img"
-                      width="100%"
-                      height="180"
-                      xmlns="http://www.w3.org/2000/svg"
-                      role="img"
-                      aria-label="Placeholder: Image cap"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                    >
-                      <title>Placeholder</title>
-                      <rect width="100%" height="100%" fill="#868e96"></rect>
-                      <text x="50%" y="50%" fill="#dee2e6" dy=".3em">
-                        Image cap
-                      </text>
-                    </CCardImage>
                     <CCardBody>
                       <CCardTitle>Card title</CCardTitle>
                       <CCardText>

src/views/base/carousels/Carousels.js

@@ -11,11 +11,9 @@ import {
 } from '@coreui/react'
 import { DocsCallout, DocsExample } from 'src/components'
 
-const slides = [
+import AngularImg from 'src/assets/images/angular.jpg'
-  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+import ReactImg from 'src/assets/images/react.jpg'
-  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+import VueImg from 'src/assets/images/vue.jpg'
-  'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-]
 
 const slidesLight = [
   'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
@@ -39,13 +37,13 @@ const Carousels = () => {
             <DocsExample href="components/carousel">
               <CCarousel>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[0]} alt="slide 1" />
+                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[1]} alt="slide 2" />
+                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[2]} alt="slide 3" />
+                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
                 </CCarouselItem>
               </CCarousel>
             </DocsExample>
@@ -64,13 +62,13 @@ const Carousels = () => {
             <DocsExample href="components/carousel/#with-controls">
               <CCarousel controls>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[0]} alt="slide 1" />
+                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[1]} alt="slide 2" />
+                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[2]} alt="slide 3" />
+                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
                 </CCarouselItem>
               </CCarousel>
             </DocsExample>
@@ -89,13 +87,13 @@ const Carousels = () => {
             <DocsExample href="components/carousel/#with-indicators">
               <CCarousel controls indicators>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[0]} alt="slide 1" />
+                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[1]} alt="slide 2" />
+                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[2]} alt="slide 3" />
+                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
                 </CCarouselItem>
               </CCarousel>
             </DocsExample>
@@ -119,21 +117,21 @@ const Carousels = () => {
             <DocsExample href="components/carousel/#with-captions">
               <CCarousel controls indicators>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[0]} alt="slide 1" />
+                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
                   <CCarouselCaption className="d-none d-md-block">
                     <h5>First slide label</h5>
                     <p>Some representative placeholder content for the first slide.</p>
                   </CCarouselCaption>
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[1]} alt="slide 2" />
+                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
                   <CCarouselCaption className="d-none d-md-block">
                     <h5>Second slide label</h5>
                     <p>Some representative placeholder content for the first slide.</p>
                   </CCarouselCaption>
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[2]} alt="slide 3" />
+                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
                   <CCarouselCaption className="d-none d-md-block">
                     <h5>Third slide label</h5>
                     <p>Some representative placeholder content for the first slide.</p>
@@ -157,13 +155,13 @@ const Carousels = () => {
             <DocsExample href="components/carousel/#crossfade">
               <CCarousel controls transition="crossfade">
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[0]} alt="slide 1" />
+                  <img className="d-block w-100" src={ReactImg} alt="slide 1" />
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[1]} alt="slide 2" />
+                  <img className="d-block w-100" src={AngularImg} alt="slide 2" />
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[2]} alt="slide 3" />
+                  <img className="d-block w-100" src={VueImg} alt="slide 3" />
                 </CCarouselItem>
               </CCarousel>
             </DocsExample>

src/views/dashboard/Dashboard.js

@@ -44,15 +44,15 @@ import {
   cilUserFemale,
 } from '@coreui/icons'
 
-import avatar1 from './../../assets/images/avatars/1.jpg'
+import avatar1 from 'src/assets/images/avatars/1.jpg'
-import avatar2 from './../../assets/images/avatars/2.jpg'
+import avatar2 from 'src/assets/images/avatars/2.jpg'
-import avatar3 from './../../assets/images/avatars/3.jpg'
+import avatar3 from 'src/assets/images/avatars/3.jpg'
-import avatar4 from './../../assets/images/avatars/4.jpg'
+import avatar4 from 'src/assets/images/avatars/4.jpg'
-import avatar5 from './../../assets/images/avatars/5.jpg'
+import avatar5 from 'src/assets/images/avatars/5.jpg'
-import avatar6 from './../../assets/images/avatars/6.jpg'
+import avatar6 from 'src/assets/images/avatars/6.jpg'
 
-const WidgetsDropdown = lazy(() => import('../components/widgets/WidgetsDropdown.js'))
+const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
-const WidgetsBrand = lazy(() => import('../components/widgets/WidgetsBrand.js'))
+const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js'))
 
 const Dashboard = () => {
   const random = (min, max) => {

src/views/notifications/alerts/Alerts.js

@@ -133,7 +133,7 @@ const Alerts = () => {
               <CAlert
                 color="warning"
                 dismissible
-                onDismissed={() => {
+                onClose={() => {
                   alert('👋 Well, hi there! Thanks for dismissing me.')
                 }}
               >

src/views/notifications/modals/Modals.js

@@ -22,7 +22,7 @@ const LiveDemo = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-      <CModal visible={visible} onDismiss={() => setVisible(false)}>
+      <CModal visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
@@ -43,7 +43,7 @@ const StaticBackdrop = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
-      <CModal backdrop="static" visible={visible} onDismiss={() => setVisible(false)}>
+      <CModal backdrop="static" visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
@@ -66,7 +66,7 @@ const ScrollingLongContent = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-      <CModal visible={visible} onDismiss={() => setVisible(false)}>
+      <CModal visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
@@ -166,7 +166,7 @@ const ScrollingLongContent2 = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-      <CModal scrollable visible={visible} onDismiss={() => setVisible(false)}>
+      <CModal scrollable visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
@@ -266,7 +266,7 @@ const VerticallyCentered = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
-      <CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
+      <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
@@ -290,7 +290,7 @@ const VerticallyCentered2 = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
-      <CModal alignment="center" scrollable visible={visible} onDismiss={() => setVisible(false)}>
+      <CModal alignment="center" scrollable visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
@@ -333,7 +333,7 @@ const TooltipsPopovers = () => {
   return (
     <>
       <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
-      <CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
+      <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
         </CModalHeader>
@@ -379,19 +379,19 @@ const OptionalSizes = () => {
       <CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
       <CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
       <CButton onClick={() => setVisibleSm(!visibleSm)}>Small large modal</CButton>
-      <CModal size="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
+      <CModal size="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
         <CModalHeader>
           <CModalTitle>Extra large modal</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal size="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
+      <CModal size="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
         <CModalHeader>
           <CModalTitle>Large modal</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal size="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
+      <CModal size="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
         <CModalHeader>
           <CModalTitle>Small modal</CModalTitle>
         </CModalHeader>
@@ -417,37 +417,37 @@ const FullscreenModal = () => {
       <CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
       <CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
       <CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
-      <CModal fullscreen visible={visible} onDismiss={() => setVisible(false)}>
+      <CModal fullscreen visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Full screen</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal fullscreen="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
+      <CModal fullscreen="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
         <CModalHeader>
           <CModalTitle>Full screen below sm</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal fullscreen="md" visible={visibleMd} onDismiss={() => setVisibleMd(false)}>
+      <CModal fullscreen="md" visible={visibleMd} onClose={() => setVisibleMd(false)}>
         <CModalHeader>
           <CModalTitle>Full screen below md</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal fullscreen="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
+      <CModal fullscreen="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
         <CModalHeader>
           <CModalTitle>Full screen below lg</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal fullscreen="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
+      <CModal fullscreen="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
         <CModalHeader>
           <CModalTitle>Full screen below xl</CModalTitle>
         </CModalHeader>
         <CModalBody>...</CModalBody>
       </CModal>
-      <CModal fullscreen="xxl" visible={visibleXXL} onDismiss={() => setVisibleXXL(false)}>
+      <CModal fullscreen="xxl" visible={visibleXXL} onClose={() => setVisibleXXL(false)}>
         <CModalHeader>
           <CModalTitle>Full screen below xxl</CModalTitle>
         </CModalHeader>

src/views/notifications/toasts/Toasts.js

@@ -19,7 +19,7 @@ const ExampleToast = () => {
   const toaster = useRef()
   const exampleToast = (
     <CToast title="CoreUI for React.js">
-      <CToastHeader close>
+      <CToastHeader closeButton>
         <svg
           className="rounded me-2"
           width="20"
@@ -63,8 +63,8 @@ const Toasts = () => {
               dismiss button.
             </p>
             <DocsExample href="components/toast">
-              <CToast title="CoreUI for React.js" autohide={false}>
+              <CToast title="CoreUI for React.js" autohide={false} visible={true}>
-                <CToastHeader close>
+                <CToastHeader closeButton>
                   <svg
                     className="rounded me-2"
                     width="20"
@@ -97,8 +97,8 @@ const Toasts = () => {
             </p>
             <DocsExample href="components/toast#translucent">
               <div className="bg-dark p-3">
-                <CToast title="CoreUI for React.js" autohide={false}>
+                <CToast title="CoreUI for React.js" autohide={false} visible={true}>
-                  <CToastHeader close>
+                  <CToastHeader closeButton>
                     <svg
                       className="rounded me-2"
                       width="20"
@@ -132,8 +132,8 @@ const Toasts = () => {
             </p>
             <DocsExample href="components/toast#stacking">
               <CToaster>
-                <CToast title="CoreUI for React.js" autohide={false}>
+                <CToast title="CoreUI for React.js" autohide={false} visible={true}>
-                  <CToastHeader close>
+                  <CToastHeader closeButton>
                     <svg
                       className="rounded me-2"
                       width="20"
@@ -150,8 +150,8 @@ const Toasts = () => {
                   </CToastHeader>
                   <CToastBody>Hello, world! This is a toast message.</CToastBody>
                 </CToast>
-                <CToast title="CoreUI for React.js" autohide={false}>
+                <CToast title="CoreUI for React.js" autohide={false} visible={true}>
-                  <CToastHeader close>
+                  <CToastHeader closeButton>
                     <svg
                       className="rounded me-2"
                       width="20"
@@ -189,7 +189,7 @@ const Toasts = () => {
               the layout.
             </p>
             <DocsExample href="components/toast#custom-content">
-              <CToast autohide={false} className="align-items-center">
+              <CToast autohide={false} className="align-items-center" visible={true}>
                 <div className="d-flex">
                   <CToastBody>Hello, world! This is a toast message.</CToastBody>
                   <CToastClose className="me-2 m-auto" />
@@ -200,7 +200,7 @@ const Toasts = () => {
               Alternatively, you can also add additional controls and components to toasts.
             </p>
             <DocsExample href="components/toast#custom-content">
-              <CToast autohide={false}>
+              <CToast autohide={false} visible={true}>
                 <CToastBody>
                   Hello, world! This is a toast message.
                   <div className="mt-2 pt-2 border-top">
@@ -233,7 +233,12 @@ const Toasts = () => {
               default border with <code>.border-0</code>.
             </p>
             <DocsExample href="components/toast#color-schemes">
-              <CToast autohide={false} color="primary" className="text-white align-items-center">
+              <CToast
+                autohide={false}
+                color="primary"
+                className="text-white align-items-center"
+                visible={true}
+              >
                 <div className="d-flex">
                   <CToastBody>Hello, world! This is a toast message.</CToastBody>
                   <CToastClose className="me-2 m-auto" white />

src/views/widgets/Widgets.js

@@ -38,7 +38,7 @@ const Widgets = () => {
   const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 
   return (
-    <CCard>
+    <CCard className="mb-4">
       <CCardHeader>Widgets</CCardHeader>
       <CCardBody>
         <DocsExample href="/components/widgets/#cwidgetstatsa">