docs: update link to documentation

mrholek · mrholek · commit 60244292d739 · 2024-11-15T13:47:25.000+01:00
diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js
@@ -16,7 +16,7 @@ const Accordion = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/accordion" />
+        <DocsComponents href="components/accordion/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Accordion</strong>
diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js
@@ -15,7 +15,7 @@ const Breadcrumbs = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/breadcrumb" />
+        <DocsComponents href="components/breadcrumb/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Breadcrumb</strong>
diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js
@@ -27,7 +27,7 @@ const Cards = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/card" />
+        <DocsComponents href="components/card/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>Card</strong> <small>Example</small>
@@ -245,7 +245,7 @@ const Cards = () => {
               </CCard>
             </DocsExample>
             <p className="text-body-secondary small">
-              Card headers can be styled by adding ex. <code>component=&#34;h5&#34;</code>.
+              Card headers can be styled by adding ex. <code>as=&#34;h5&#34;</code>.
             </p>
             <DocsExample href="components/card/#header-and-footer">
               <CCard>
diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js
@@ -25,7 +25,7 @@ const Carousels = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/carousel" />
+        <DocsComponents href="components/carousel/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>Carousel</strong> <small>Slide only</small>
diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js
@@ -11,7 +11,7 @@ const Collapses = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/collapse" />
+        <DocsComponents href="components/collapse/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Collapse</strong>
diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js
@@ -16,7 +16,7 @@ const ListGroups = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/list-group" />
+        <DocsComponents href="components/list-group/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React List Group</strong> <small>Basic example</small>
@@ -91,8 +91,8 @@ const ListGroups = () => {
             <p className="text-body-secondary small">
               Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create{' '}
               <em>actionable</em> list group items with hover, disabled, and active states by adding{' '}
-              <code>component=&#34;a|button&#34;</code>. We separate these pseudo-classes to ensure
-              list groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or{' '}
+              <code>as=&#34;a|button&#34;</code>. We separate these pseudo-classes to ensure list
+              groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or{' '}
               <code>&lt;div&gt;</code>
               s) don&#39;tprovide a click or tap affordance.
             </p>
diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js
@@ -19,7 +19,7 @@ const Navs = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/nav" />
+        <DocsComponents href="components/nav-tabs/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Navs</strong> <small>Base navs</small>
@@ -31,7 +31,7 @@ const Navs = () => {
               overrides (for working with lists), some link padding for larger hit areas, and basic
               disabled styling.
             </p>
-            <DocsExample href="components/nav#base-nav">
+            <DocsExample href="components/nav-tabs#base-nav">
               <CNav>
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -58,7 +58,7 @@ const Navs = () => {
               the .nav uses display: flex, the nav links behave the same as nav items would, but
               without the extra markup.
             </p>
-            <DocsExample href="components/nav#base-nav">
+            <DocsExample href="components/nav-tabs#base-nav">
               <CNav as="nav">
                 <CNavLink href="#" active>
                   Active
@@ -90,7 +90,7 @@ const Navs = () => {
             <p className="text-body-secondary small">
               Centered with <code>.justify-content-center</code>:
             </p>
-            <DocsExample href="components/nav#horizontal-alignment">
+            <DocsExample href="components/nav-tabs#horizontal-alignment">
               <CNav className="justify-content-center">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -113,7 +113,7 @@ const Navs = () => {
             <p className="text-body-secondary small">
               Right-aligned with <code>.justify-content-end</code>:
             </p>
-            <DocsExample href="components/nav#base-nav">
+            <DocsExample href="components/nav-tabs#base-nav">
               <CNav className="justify-content-end">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -147,7 +147,7 @@ const Navs = () => {
               <code>.flex-column</code> utility. Need to stack them on some viewports but not
               others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
             </p>
-            <DocsExample href="components/nav#vertical">
+            <DocsExample href="components/nav-tabs#vertical">
               <CNav className="flex-column">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -180,7 +180,7 @@ const Navs = () => {
               Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
               to generate a tabbed interface
             </p>
-            <DocsExample href="components/nav#tabs">
+            <DocsExample href="components/nav-tabs#tabs">
               <CNav variant="tabs">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -212,7 +212,7 @@ const Navs = () => {
             <p className="text-body-secondary small">
               Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
             </p>
-            <DocsExample href="components/nav#pills">
+            <DocsExample href="components/nav-tabs#pills">
               <CNav variant="pills">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -247,7 +247,7 @@ const Navs = () => {
               <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
               horizontal space is occupied, but not every nav item has the same width.
             </p>
-            <DocsExample href="components/nav#fill-and-justify">
+            <DocsExample href="components/nav-tabs#fill-and-justify">
               <CNav variant="pills" layout="fill">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -272,7 +272,7 @@ const Navs = () => {
               space will be occupied by nav links, but unlike the .nav-fill above, every nav item
               will be the same width.
             </p>
-            <DocsExample href="components/nav#fill-and-justify">
+            <DocsExample href="components/nav-tabs#fill-and-justify">
               <CNav variant="pills" layout="justified">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -308,7 +308,7 @@ const Navs = () => {
               the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
               horizontal layout that fills the available width starting from the small breakpoint.
             </p>
-            <DocsExample href="components/nav#working-with-flex-utilities">
+            <DocsExample href="components/nav-tabs#working-with-flex-utilities">
               <CNav as="nav" variant="pills" className="flex-column flex-sm-row">
                 <CNavLink href="#" active>
                   Active
@@ -329,7 +329,7 @@ const Navs = () => {
             <strong>React Navs</strong> <small>Tabs with dropdowns</small>
           </CCardHeader>
           <CCardBody>
-            <DocsExample href="components/nav#tabs-with-dropdowns">
+            <DocsExample href="components/nav-tabs#tabs-with-dropdowns">
               <CNav>
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -363,7 +363,7 @@ const Navs = () => {
             <strong>React Navs</strong> <small>Pills with dropdowns</small>
           </CCardHeader>
           <CCardBody>
-            <DocsExample href="components/nav#pills-with-dropdowns">
+            <DocsExample href="components/nav-tabs#pills-with-dropdowns">
               <CNav variant="pills">
                 <CNavItem>
                   <CNavLink href="#" active>
diff --git a/src/views/base/paginations/Paginations.js b/src/views/base/paginations/Paginations.js
@@ -14,7 +14,7 @@ const Paginations = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/pagination" />
+        <DocsComponents href="components/pagination/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Pagination</strong>
diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js
@@ -19,7 +19,7 @@ const Placeholders = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/placeholder" />
+        <DocsComponents href="components/placeholder/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Placeholder</strong>
@@ -60,10 +60,10 @@ const Placeholders = () => {
                     <rect width="100%" height="100%" fill="#868e96"></rect>
                   </svg>
                   <CCardBody>
-                    <CPlaceholder component={CCardTitle} animation="glow" xs={7}>
+                    <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
                       <CPlaceholder xs={6} />
                     </CPlaceholder>
-                    <CPlaceholder component={CCardText} animation="glow">
+                    <CPlaceholder as={CCardText} animation="glow">
                       <CPlaceholder xs={7} />
                       <CPlaceholder xs={4} />
                       <CPlaceholder xs={4} />
@@ -72,7 +72,7 @@ const Placeholders = () => {
                     </CPlaceholder>
                     <CPlaceholder
                       color="primary"
-                      component={CButton}
+                      as={CButton}
                       disabled
                       href="#"
                       tabIndex={-1}
@@ -101,7 +101,7 @@ const Placeholders = () => {
               </p>
               <CPlaceholder
                 color="primary"
-                component={CButton}
+                as={CButton}
                 aria-hidden="true"
                 disabled
                 href="#"
@@ -179,11 +179,11 @@ const Placeholders = () => {
               being <em>actively</em> loaded.
             </p>
             <DocsExample href="components/placeholder#animation">
-              <CPlaceholder component="p" animation="glow">
+              <CPlaceholder as="p" animation="glow">
                 <CPlaceholder xs={12} />
               </CPlaceholder>
 
-              <CPlaceholder component="p" animation="wave">
+              <CPlaceholder as="p" animation="wave">
                 <CPlaceholder xs={12} />
               </CPlaceholder>
             </DocsExample>
diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js
@@ -6,7 +6,7 @@ const Popovers = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/popover" />
+        <DocsComponents href="components/popover/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Popover</strong> <small>Basic example</small>
diff --git a/src/views/base/progress/Progress.js b/src/views/base/progress/Progress.js
@@ -6,7 +6,7 @@ const Progress = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/progress" />
+        <DocsComponents href="components/progress/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Progress</strong> <small>Basic example</small>
diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js
@@ -6,7 +6,7 @@ const Spinners = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/spinner" />
+        <DocsComponents href="components/spinner/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Spinner</strong> <small>Border</small>
diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js
@@ -19,7 +19,7 @@ const Tables = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/table" />
+        <DocsComponents href="components/table/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Table</strong> <small>Basic example</small>
diff --git a/src/views/base/tabs/Tabs.js b/src/views/base/tabs/Tabs.js
@@ -17,7 +17,7 @@ const Navs = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/tabs" />
+        <DocsComponents href="components/tabs/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Tabs</strong>
diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js
@@ -6,7 +6,7 @@ const Tooltips = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/tooltip" />
+        <DocsComponents href="components/tooltip/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Tooltip</strong> <small>Basic example</small>
diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js
@@ -24,7 +24,7 @@ const ButtonGroups = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/button-group" />
+        <DocsComponents href="components/button-group/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Button Group</strong> <span>Basic example</span>
diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js
@@ -8,7 +8,7 @@ const Buttons = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/buttons" />
+        <DocsComponents href="components/buttons/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Button</strong>
diff --git a/src/views/buttons/dropdowns/Dropdowns.js b/src/views/buttons/dropdowns/Dropdowns.js
@@ -19,7 +19,7 @@ const Dropdowns = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="components/dropdown" />
+        <DocsComponents href="components/dropdown/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Dropdown</strong> <small>Single button</small>
diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/forms/checks-radios/ChecksRadios.js
@@ -6,7 +6,7 @@ const ChecksRadios = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="forms/checks-radios" />
+        <DocsComponents href="forms/checks-radios/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Checkbox</strong>
diff --git a/src/views/forms/floating-labels/FloatingLabels.js b/src/views/forms/floating-labels/FloatingLabels.js
@@ -17,7 +17,7 @@ const FloatingLabels = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="forms/floating-labels" />
+        <DocsComponents href="forms/floating-labels/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Floating labels</strong>
diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js
@@ -17,7 +17,7 @@ const FormControl = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="forms/form-control" />
+        <DocsComponents href="forms/form-control/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Form Control</strong>
diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/forms/input-group/InputGroup.js
@@ -25,7 +25,7 @@ const InputGroup = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="forms/input-group" />
+        <DocsComponents href="forms/input-group/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Input group</strong> <small>Basic example</small>
diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js
@@ -20,7 +20,7 @@ const Layout = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="forms/layout" />
+        <DocsComponents href="forms/layout/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>Layout</strong> <small>Form grid</small>
diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js
@@ -6,7 +6,7 @@ const Range = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="forms/range" />
+        <DocsComponents href="forms/range/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Range</strong> <small></small>
diff --git a/src/views/forms/select/Select.js b/src/views/forms/select/Select.js
@@ -6,7 +6,7 @@ const Select = () => {
   return (
     <CRow>
       <CCol xs={12}>
-        <DocsComponents href="forms/select" />
+        <DocsComponents href="forms/select/" />
         <CCard className="mb-4">
           <CCardHeader>
             <strong>React Select</strong> <small>Default</small>
diff --git a/src/views/forms/validation/Validation.js b/src/views/forms/validation/Validation.js
diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js
diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js
diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js
diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js
