From 0eb3fcda89712a71e29453492a69a403cff04ea8 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 16:04:34 +0100
Subject: [PATCH] refactor: update examples

---
 src/components/DocsExample.vue     | 16 ++++++++--------
 src/styles/_examples.scss          |  5 ++++-
 src/views/base/Tables.vue          |  2 +-
 src/views/buttons/Buttons.vue      |  2 +-
 src/views/notifications/Alerts.vue |  2 +-
 src/views/notifications/Toasts.vue | 10 +++++-----
 6 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/DocsExample.vue b/src/components/DocsExample.vue
index 6fa8aa46..5ec26d21 100644
--- a/src/components/DocsExample.vue
+++ b/src/components/DocsExample.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="example">
-    <CNav variant="tabs">
+    <CNav variant="underline-border">
       <CNavItem>
         <CNavLink href="#" active>
           <CIcon icon="cil-media-play" class="me-2" />
+          Preview
         </CNavLink>
       </CNavItem>
       <CNavItem>
@@ -13,7 +14,7 @@
         </CNavLink>
       </CNavItem>
     </CNav>
-    <CTabContent class="rounded-bottom">
+    <CTabContent :class="['rounded-bottom', addClass]">
       <CTabPane class="p-3 preview" visible>
         <slot></slot>
       </CTabPane>
@@ -25,16 +26,15 @@
 export default {
   name: 'DocsExample',
   props: {
-    href: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    href: String,
+    tabContentClass: String,
   },
   setup(props) {
     const url = `https://coreui.io/vue/docs/${props.href}`
-
+    const addClass = props.tabContentClass
+ 
     return {
+      addClass,
       url,
     }
   },
diff --git a/src/styles/_examples.scss b/src/styles/_examples.scss
index fdf64254..df228af2 100644
--- a/src/styles/_examples.scss
+++ b/src/styles/_examples.scss
@@ -9,7 +9,7 @@
   }
 
   .tab-content {
-    background-color: var(--#{$prefix}tertiary-bg) !important;
+    background-color: var(--#{$prefix}tertiary-bg);
   }
 
   & + p {
@@ -51,6 +51,9 @@
     }
 
     // Buttons
+    .col > .btn,
+    .col-auto > .btn,
+    .d-md-block > .btn,
     > .btn,
     > .btn-group {
       margin: .25rem .125rem;
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 7247135b..30dde23b 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -447,7 +447,7 @@
             </CTable>
           </DocsExample>
           <p class="text-body-secondary small">
-            <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
+            <a href="https://coreui.io/docs/utilities/borders#border-color">
               Border color utilities
             </a>
             can be added to change colors:
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index b99174e9..9d18dcb3 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -59,7 +59,7 @@
         <CCardBody>
           <p class="text-body-secondary small">
             You can combine button with our
-            <a href="https://icons.coreui.io/">CoreUI Icons</a>.
+            <a href="https://coreui.io/icons/">CoreUI Icons</a>.
           </p>
           <DocsExample href="components/button.html">
             <template
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index 1c9ebcc7..e6d12929 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -12,7 +12,7 @@
             <strong>required</strong> contextual <code>color</code> props (e.g.,
             <code>primary</code>). For inline dismissal, use the
             <a
-              href="https://coreui.io/vue/docs/4.0/components/alert.html#dismissing"
+              href="https://coreui.io/vue/docs/components/alert.html#dismissing"
             >
               dismissing prop
             </a>
diff --git a/src/views/notifications/Toasts.vue b/src/views/notifications/Toasts.vue
index 4ad75b3b..959b5951 100644
--- a/src/views/notifications/Toasts.vue
+++ b/src/views/notifications/Toasts.vue
@@ -133,11 +133,11 @@
         <CCardBody>
           <p class="text-body-secondary small">
             Customize your toasts by removing sub-components, tweaking them with
-            <a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your own
+            <a href="https://coreui.io/docs/utilities/api">utilities</a>, or by adding your own
             markup. Here we&#39;ve created a simpler toast by removing the default
             <code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from
-            <a href="https://icons.coreui.io">CoreUI Icons</a>, and using some
-            <a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust the
+            <a href="https://coreui.io/icons/">CoreUI Icons</a>, and using some
+            <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a> to adjust the
             layout.
           </p>
           <DocsExample href="components/toast.html#custom-content">
@@ -173,8 +173,8 @@
         <CCardBody>
           <p class="text-body-secondary small">
             Building on the above example, you can create different toast color schemes with our
-            <a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and
-            <a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
+            <a href="https://coreui.io/docs/utilities/colors">color</a> and
+            <a href="https://coreui.io/docs//utilities/background">background</a> utilities.
             Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
             <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set
             <code>white</code> property to our close button. For a crisp edge, we remove the default