Merge pull request #261 from Codebrahma/minor-fixes

Minor fixes

Author: KRRISH96

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

@@ -122,7 +122,7 @@ export const componentData = {
         this.style = {
           buttonContainer: {
             display: "grid",
-            gridTemplateColumns: "repeat(auto-fill, 150px)",
+            gridTemplateColumns: "repeat(auto-fit, 150px)",
             gridGap: 20,
             alignItems: "center"
           }

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={5} 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/Toggle/index.js

@@ -102,7 +102,7 @@ export const componentData = {
               />
 
             </PreviewBlock>
-            <PreviewBlock header="Toggle with switch on (with toggable)">
+            <PreviewBlock header="Custom Toggle">
               
             {/* Custom Toggle, Refer theme.scss */}
               <Toggle 

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';

doc/src/pages/playground.scss

@@ -109,8 +109,8 @@
 }
 
 .playground-editor  {
-    margin: 0 10% !important;
-    overflow: scroll;
+    margin: 0 10% 10% !important;
+    overflow: auto;
     &::before {
         content: '// Edit the code here and preview the changes above.';
         display: flex;

doc/src/templates/landing-main/contrib-section/index.scss

@@ -35,6 +35,7 @@ div.contrib-section>div:nth-child(3) {
         color: rgb(228, 228, 228);
         font-weight: bold;
         align-items: center;
+        text-align: center;
         width: 100%;
         background-color: transparent !important;
         &>* {

doc/src/templates/landing-main/index.scss

@@ -75,6 +75,7 @@
                 font-size: 1.5em;
                 font-weight: bold;
                 letter-spacing: 0.1rem;
+                text-align: center;
             }
 
             a {

lib/autocomplete/theme.module.scss

@@ -28,12 +28,15 @@
     :local(.autocomplete-list) {
         z-index: 1;
         box-sizing: border-box;
-        height: 45vh;
+        height: fit-content;
+        height: -moz-fit-content;
+        max-height: 300px;
         width: 100%;
         overflow-y: auto;
         box-shadow: $dropdown-menu-shadow;
         border-radius: 2px;
         margin-top: 10px;
+        padding: 2% 0;
         position: absolute;
         background-color: white;
 

lib/pagination/index.js

@@ -36,34 +36,38 @@ class Pagination extends Component {
 
     const steps = [];
 
-    // eslint-disable-next-line no-restricted-syntax
-    for (const key of Array(3).keys()) {
-      let page;
-
-      if (currentActive > 2) {
-        if (currentActive >= total - 1) {
-          page = (key - 3) + total;
+    if (total >= 3) {
+      const innerSteps = total > 5 ? 3 : (total - 2); //   FIX THIS for 3,4 pages
+      // eslint-disable-next-line no-restricted-syntax
+      for (const key of Array(innerSteps).keys()) {
+        let page;
+
+        if (currentActive > 2) {
+          if ((currentActive >= total - 1) && total > 4) {
+            page = (key - 3) + total;
+          } else if (total === 4 && currentActive === 4) {
+            page = currentActive + (key - 2);
+          } else {
+            page = currentActive + (key - 1);
+          }
         } else {
-          page = currentActive + (key - 1);
+          page = key + 2;
         }
-      } else {
-        page = key + 2;
+        /* eslint-disable jsx-a11y/click-events-have-key-events */
+        /* eslint-disable jsx-a11y/no-static-element-interactions */
+        steps.push(<div
+          className={classnames(theme['pagination-steps'], {
+            [theme.active]: page === currentActive,
+          })}
+          data-react-active-page={page === currentActive ? 'active' : undefined}
+          key={page}
+          onClick={() => this.navigate(page)}
+        >
+          {page}
+          {/* eslint-disable-next-line react/jsx-closing-tag-location */}
+        </div>);
       }
-      /* eslint-disable jsx-a11y/click-events-have-key-events */
-      /* eslint-disable jsx-a11y/no-static-element-interactions */
-      steps.push(<div
-        className={classnames(theme['pagination-steps'], {
-          [theme.active]: page === currentActive,
-        })}
-        data-react-active-page={page === currentActive ? 'active' : undefined}
-        key={page}
-        onClick={() => this.navigate(page)}
-      >
-        {page}
-        {/* eslint-disable-next-line react/jsx-closing-tag-location */}
-      </div>);
     }
-
     return [
       <div
         className={classnames(theme['pagination-steps'], {
@@ -75,19 +79,21 @@ class Pagination extends Component {
       >
         {1}
       </div>,
-      currentActive > 2 ? this.renderDots('left') : null,
-      steps,
-      currentActive < total - 1 ? this.renderDots('right') : null,
-      <div
-        className={classnames(theme['pagination-steps'], {
-          [theme.active]: total === currentActive,
-        })}
-        key={total}
-        data-react-active-page={total === currentActive ? 'active' : undefined}
-        onClick={() => this.navigate(total)}
-      >
-        {total}
-      </div>,
+      total > 5 && currentActive > 3 ? this.renderDots('left') : null,
+      total >= 3 && steps,
+      total > 5 && currentActive < total - 2 ? this.renderDots('right') : null,
+      total >= 2 && (
+        <div
+          className={classnames(theme['pagination-steps'], {
+            [theme.active]: total === currentActive,
+          })}
+          key={total}
+          data-react-active-page={total === currentActive ? 'active' : undefined}
+          onClick={() => this.navigate(total)}
+        >
+          {total}
+        </div>
+      ),
     ];
   };