refactor: update components examples

Author: mrholek

src/pug/_mixins/callout.pug

@@ -1,6 +1,6 @@
 mixin callout(name, href)
   .callout.callout-info.bg-white
-    | CoreUI #{name} Component has been created as an extension of Bootstrap #{name}. CoreUI #{name} is delivered with some new features, variants, and unique design that matches CoreUI Design System requirements.
+    | CoreUI #{name} has been created as an extension of Bootstrap #{name}. #{name} is delivered with some new features, variants, and unique design that matches CoreUI Design System requirements.
     br
     br
     | For more information please visit our official

src/pug/_mixins/example.pug

@@ -7,15 +7,14 @@ mixin example
           svg.icon.me-2
             use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play")
           | Preview
-
-        li.nav-item
-          a.nav-link(data-coreui-toggle="tab" href="#code-"+id role="tab")
-            svg.icon.me-2
-              use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code")
-            | Code
+      li.nav-item
+        a.nav-link(data-coreui-toggle="tab" href="#code-"+id role="tab")
+          svg.icon.me-2
+            use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code")
+          | Code
     .tab-content
-      .tab-pane.py-3.active(role="tabpanel" id="preview-"+id )
+      .tab-pane.py-3.active.preview(role="tabpanel" id="preview-"+id )
         block
       .tab-pane.py-3(role="tabpanel" id="code-"+id )
-        script.language-html(type='text/plain')
+        script.language-markup(type='text/plain')
           block

src/pug/_partials/scripts.pug

@@ -5,16 +5,6 @@ script(src='https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism
 script(src='https://cdn.jsdelivr.net/npm/[email protected]/plugins/unescaped-markup/prism-unescaped-markup.min.js')
 script(src='https://cdn.jsdelivr.net/npm/[email protected]/plugins/normalize-whitespace/prism-normalize-whitespace.js')
 
-script(type='text/javascript').
-  // Optional
-  Prism.plugins.NormalizeWhitespace.setDefaults({
-  'remove-trailing': true,
-  'remove-indent': true,
-  'left-trim': true,
-  'right-trim': true,
-  //- 'break-lines': 60,
-  });
-
 script(src='https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js' integrity='sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D' crossorigin='anonymous' async)
 
 block scripts

src/pug/_partials/sidebar.pug

@@ -51,10 +51,6 @@
           a.nav-link(href='base/collapse.html')
             span.nav-icon
             |  Collapse
-        li.nav-item
-            a.nav-link(href='base/forms.html')
-              span.nav-icon
-              |  Forms
         li.nav-item
           a.nav-link(href='base/list-group.html')
             span.nav-icon
@@ -79,6 +75,10 @@
           a.nav-link(href='base/scrollspy.html')
             span.nav-icon
             |  Scrollspy
+        li.nav-item
+          a.nav-link(href='base/spinners.html')
+            span.nav-icon
+            |  Spinners
         li.nav-item
             a.nav-link(href='base/tables.html')
               span.nav-icon

src/pug/views/base/accordion.pug

@@ -9,11 +9,10 @@ block view
     .col-12.col-md-6
       .card.mb-4
         .card-header
-          |  Accordion
+          strong Accordion
         .card-body
-          p
+          p.text-medium-emphasis.small
             | Click the accordions below to expand/collapse the accordion content.
-          hr
           +example()
             #accordionExample.accordion
               .accordion-item
@@ -49,16 +48,15 @@ block view
     .col-12.col-md-6
       .card.mb-4
         .card-header
-          |  Accordion
+          strong Accordion
           span.small.ms-1 Flush
         .card-body
-          p
-            | Add
+          p.text-medium-emphasis.small
+            | Add 
             code .accordion-flush
-            |  to remove the default
+            |  to remove the default 
             code background-color
             | , some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
-          hr
           +example()
             #accordionFlushExample.accordion.accordion-flush
               .accordion-item

src/pug/views/base/breadcrumb.pug

@@ -9,9 +9,9 @@ block view
     .col-lg-12
       .card.mb-4
         .card-header
-          |  Bootstrap Breadcrumb
+          strong Breadcrumb
         .card-body
-          p
+          p.text-medium-emphasis.small
             | The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through
             a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/::before')
               |

src/pug/views/base/collapse.pug

@@ -9,7 +9,7 @@ block view
     .card-header
       |  Collapse
     .card-body
-      p
+      p.text-medium-emphasis.small
         | You can use a link with the
         |
         code href
@@ -34,7 +34,7 @@ block view
       strong Collapse
       span.small.ms-1 multiple targets
     .card-body
-      p
+      p.text-medium-emphasis.small
         | A
         |
         code

src/pug/views/base/list-group.pug

@@ -12,7 +12,7 @@ block view
           strong List group
           span.small.ms-1 Basic example
         .card-body
-          p The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.
+          p.text-medium-emphasis.small The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.
           +example()
             ul.list-group
               li.list-group-item Cras justo odio
@@ -26,7 +26,7 @@ block view
           strong List group
           span.small.ms-1 active items
         .card-body
-          p
+          p.text-medium-emphasis.small
             | Attach
             |
             code .active
@@ -47,7 +47,7 @@ block view
           strong List group
           span.small.ms-1 disabled items
         .card-body
-          p
+          p.text-medium-emphasis.small
             | Attach
             |
             code .disabled
@@ -72,7 +72,7 @@ block view
           span.small.ms-1 disabled links
         .card-body
           .list-group
-            p
+            p.text-medium-emphasis.small
               | Use
               |
               code
@@ -95,7 +95,7 @@ block view
               code
                 = '<div>'
               | s) don’t provide a click or tap affordance.
-            p
+            p.text-medium-emphasis.small
               | Be sure to
               strong
                 |  not use the standard
@@ -117,7 +117,7 @@ block view
           span.small.ms-1 disabled buttons
         .card-body
           .list-group
-            p
+            p.text-medium-emphasis.small
               | With
               |
               code
@@ -147,7 +147,7 @@ block view
           strong List group
           span.small.ms-1 flush
         .card-body
-          p
+          p.text-medium-emphasis.small
             | Add
             |
             code .list-group-flush
@@ -165,7 +165,7 @@ block view
           strong List group
           span.small.ms-1 horizontal
         .card-body
-          p
+          p.text-medium-emphasis.small
             | Add
             |
             code .list-group-horizontal
@@ -177,7 +177,7 @@ block view
             code min-width
             | . Currently
             strong  horizontal list groups cannot be combined with flush list groups.
-          p
+          p.text-medium-emphasis.small
             strong ProTip:
             |  Want equal-width list group items when horizontal? Add
             |
@@ -215,7 +215,7 @@ block view
           strong List group
           span.small.ms-1 contextual classes
         .card-body
-          p Use contextual classes to style list items with a stateful background and color.
+          p.text-medium-emphasis.small Use contextual classes to style list items with a stateful background and color.
           +example()
             ul.list-group
               li.list-group-item Dapibus ac facilisis in
@@ -236,7 +236,7 @@ block view
             |
             code .action
         .card-body
-          p
+          p.text-medium-emphasis.small
             | Contextual classes also work with
             |
             code .list-group-item-action
@@ -277,7 +277,7 @@ block view
           strong List group
           span.small.ms-1 with badges
         .card-body
-          p
+          p.text-medium-emphasis.small
             | Add badges to any list group item to show unread counts, activity, and more with the help of some
             a(href='https://coreui.io/docs/4.0/utilities/flex/') utilities
             | .
@@ -298,7 +298,7 @@ block view
           stron List group
           span.small.ms-1 custom content
         .card-body
-          p
+          p.text-medium-emphasis.small
             | Add nearly any HTML within, even for linked list groups like the one below, with the help of
             a(href='https://coreui.io/docs/4.0/utilities/flex/') flexbox utilities
             | .
@@ -332,7 +332,7 @@ block view
           strong  List group
           span.small.ms-1 tab Javascript plugin
         .card-body
-          p
+          p.text-medium-emphasis.small
             | Use the tab JavaScript plugin—include it individually or through the compiled
             |
             code coreui.js