💄 Add Custom pagination example

Author: KRRISH96

doc/src/components/common/componentData/Pagination/index.js

@@ -45,7 +45,7 @@ export const componentData = {
       {
         prop: 'navigationButtons',
         type: 'boolean',
-        defaultValue: 'false',
+        defaultValue: 'true',
         description: 'Shows navigation buttons when `true`.',
       },
     ],  
@@ -83,16 +83,50 @@ export const componentData = {
       <Pagination total={10}/>
     `,
     componentUsage: `
-    class Demo extends React.Component {
+      //  Component.js
+
+      class Demo extends React.Component {
         render() {
           return (
-            <div>
+            <PreviewElements>
               <PreviewBlock header="Pagination">
-                <Pagination total={10}/>
+                <PreviewElements>
+
+                {/* Default Pagination Component */}
+                  <Pagination total={10}/>
+
+                </PreviewElements>
               </PreviewBlock>
-            </div>
+              <PreviewBlock header="Custom Pagination">
+                <PreviewElements>
+
+                {/* Custom themed Pagination Component, Refer theme.scss below */}
+                  <Pagination total={6} theme={componentTheme} navigationButtons={false}/>
+                
+                </PreviewElements>
+              </PreviewBlock>
+            </PreviewElements>
           )
         }
       }
     `,
+    componentUsageTheme: `
+      //  theme.scss
+
+      :local(.pagination-steps) {
+        border-color: transparent;
+        color: #8047c7;
+      }
+      
+      :local(.active) {
+        color: #ff8600;
+      }
+      
+      :local(.dots) {
+        span {
+          height: 0.3em;
+          width: 0.3em;
+        }
+      }
+    `,
   };

doc/src/components/common/componentData/Pagination/theme.scss

@@ -0,0 +1,15 @@
+:local(.pagination-steps) {
+  border-color: transparent;
+  color: #8047c7;
+}
+
+:local(.active) {
+  color: #ff8600;
+}
+
+:local(.dots) {
+  span {
+    height: 0.3em;
+    width: 0.3em;
+  }
+}

doc/src/components/common/componentData/theme.scss

@@ -8,6 +8,7 @@
 @import './Modal/theme.scss';
 @import './MultiSelect/theme.scss';
 @import './Navbar/theme.scss';
+@import './Pagination/theme.scss';
 @import './Select/theme.scss';
 @import './Slider/theme.scss';
 @import './TextInput/theme.scss';