fix(package): Minor improvements on component design and user accessibility

Author: rishichawda

doc/.env.development

@@ -0,0 +1 @@
+HOMEPAGE_ROOT_URL_PREFIX='/'

doc/.env.production

@@ -0,0 +1 @@
+HOMEPAGE_ROOT_URL_PREFIX='/react-lite-ui/'

doc/gatsby-browser.js

@@ -7,6 +7,11 @@
 // You can delete this file if you're not using it
 exports.onPreRouteUpdate = ({ location }) => {
   if (window && typeof window.gtag === 'function') {
-    window.gtag('config', 'UA-41862404-1', { page_path: location.pathname });
+    if (location.href.indexOf('?') >= 0) {
+      const component = location.search.substring(1).split('=')[1];
+      window.gtag('config', 'UA-41862404-1', { page_path: `${location.pathname}/${component}` });
+    } else {
+      window.gtag('config', 'UA-41862404-1', { page_path: location.pathname });
+    }
   }
 };

doc/gatsby-config.js

@@ -1,3 +1,7 @@
+require('dotenv').config({
+  path: `.env.${process.env.NODE_ENV}`,
+});
+
 module.exports = {
   pathPrefix: '/react-lite-ui',
   siteMetadata: {

doc/package-lock.json

@@ -23,7 +23,7 @@
   "scripts": {
     "build": "gatsby build --prefix-paths",
     "develop": "gatsby develop",
-    "serve": "rm -rf ./cache && rm -rf ./public && gatsby build && gatsby serve",
+    "serve": "rm -rf ./cache && rm -rf ./public && gatsby build --prefix-paths && gatsby serve",
     "format": "prettier --write '**/*.js'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

doc/package.json

@@ -33,6 +33,12 @@ export const componentData = {
       type: 'Boolean',
       defaultValue: 'true',
       description: 'Set boolean for showing / hiding left and right controls.',
+    },
+    {
+      prop: 'pauseOnHover',
+      type: 'Boolean',
+      defaultValue: 'true',
+      description: 'Set boolean to pause the carousel animation on mouse hover.',
     }
   ],  
   themesData: [

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

@@ -3,16 +3,16 @@
 }
 
 :local(.checkbox) {
-  border-color: #6b76ff;
+  border-color: #8b104e;
   .check-item {
-    border-color: #6b76ff !important;
+    border-color: #8b104e !important;
   }
 }
 
 
 :local(.inverted) {
-  background-color: #0b409c !important;
+  background-color: #8b104e !important;
   .check-item {
-    border-color: #f18a9b !important;
+    border-color: #fefefe !important;
   }
 }

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

@@ -145,10 +145,6 @@ export const componentData = {
 
       render() {
 
-        const MenuIcon = () => (
-          <svg xmlns="http://www.w3.org/2000/svg" height="30px" id="Layer_1"  version="1.1" viewBox="0 0 30 30" width="30px"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
-        );
-
         return (
           <div>
             <PreviewBlock header="Default Navbar">
@@ -160,7 +156,7 @@ export const componentData = {
             <PreviewBlock header="Navbar with leftIcon">
 
             {/* Navbar with icon on left set with leftIcon prop */}
-              <Navbar leftIcon={<MenuIcon />} title="logo" />
+              <Navbar leftIcon={match} title="logo" />
 
             </PreviewBlock>
             <PreviewBlock header="Flat Navbar (No box shadow)">

doc/src/components/common/componentData/Navbar/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}/>