fix(pagination): update pagination design (#303)

* fix(pagination): fix width and add animations

#287

Author: KRRISH96

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

@@ -78,6 +78,14 @@ export const componentData = {
         name: 'dots',
         description: 'Class used for displaying dots between ends and current portion.',
       },
+      {
+        name: 'withNavigation',
+        description: 'Class used for controlling width of component when navigation buttons are present.',
+      },
+      {
+        name: 'noNavigation',
+        description: 'Class used for controlling width of component when navigation buttons are not present.',
+      },
     ],
     basicComponent: `
       <Pagination total={10}/>

lib/pagination/index.js

@@ -114,7 +114,11 @@ class Pagination extends Component {
     const { currentActive } = this.state;
 
     const rootProps = {
-      className: classnames(theme['pagination-wrapper'], className),
+      className: classnames(
+        theme['pagination-wrapper'],
+        navigationButtons ? theme.withNavigation : theme.noNavigation,
+        className,
+      ),
     };
 
     const paginationProps = {

lib/pagination/theme.module.scss

@@ -1,3 +1,5 @@
+@import '../globals/animations.module.scss';
+
 :local(.pagination) {
     display: grid;
     grid-auto-flow: column;
@@ -16,12 +18,21 @@
     width: fit-content;
     flex-flow: row;
     align-items: center;
+    justify-content: space-between;
     flex-direction: row;
     box-sizing: border-box;
     min-height: fit-content;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+:local(.noNavigation) {
+  width: 262px;
+  justify-content: center;
+}
+:local(.withNavigation) {
+  width: 332px;
+}
+
 :local(.pagination-steps) {
     display: flex;
     align-items: center;
@@ -37,6 +48,9 @@
     cursor: pointer;
     padding: 1em;
     margin: 1px;
+    @include zoomIn();
+    animation-duration: 0.2s;
+    animation-timing-function: ease-in;
 }
 
 :local(.active) {
@@ -51,6 +65,9 @@
     height: 100%;
     align-items: center;
     margin: 0 0.2em;
+    @include zoomIn();
+    animation-duration: 0.2s;
+    animation-timing-function: ease-in;
     span {
         height: 0.5em;
         width: 0.5em;