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

…bility
Codebrahma · Jan 3, 2019 · 8ecf603 · 8ecf603
2 parents 00a5f2f + 2d22280
commit 8ecf603
Show file tree

Hide file tree

Showing 66 changed files with 20,012 additions and 733 deletions.
diff --git a/doc/.env.development b/doc/.env.development
@@ -0,0 +1 @@
+HOMEPAGE_ROOT_URL_PREFIX='/'
diff --git a/doc/.env.production b/doc/.env.production
@@ -0,0 +1 @@
+HOMEPAGE_ROOT_URL_PREFIX='/react-lite-ui/'
diff --git a/doc/gatsby-browser.js b/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 });
+    }
   }
 };
diff --git a/doc/gatsby-config.js b/doc/gatsby-config.js
@@ -1,3 +1,7 @@
+require('dotenv').config({
+  path: `.env.${process.env.NODE_ENV}`,
+});
+
 module.exports = {
   pathPrefix: '/react-lite-ui',
   siteMetadata: {

diff --git a/doc/package-lock.json b/doc/package-lock.json
diff --git a/doc/package.json b/doc/package.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"
   },

diff --git a/doc/src/components/common/componentData/Carousel/index.js b/doc/src/components/common/componentData/Carousel/index.js
@@ -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: [

diff --git a/doc/src/components/common/componentData/Checkbox/theme.scss b/doc/src/components/common/componentData/Checkbox/theme.scss
@@ -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;
   }
 }
diff --git a/doc/src/components/common/componentData/Navbar/index.js b/doc/src/components/common/componentData/Navbar/index.js
@@ -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)">

diff --git a/doc/src/components/common/componentData/Pagination/index.js b/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}/>

diff --git a/doc/src/components/common/componentData/Snackbar/index.js b/doc/src/components/common/componentData/Snackbar/index.js
@@ -53,6 +53,14 @@ export const componentData = {
       name: 'snackbarWrapper',
       description: 'Class used for snackbar wrapper element',
     },
+    {
+      name: 'snackbarContent',
+      description: 'Class used for snackbar content',
+    },
+    {
+      name: 'close',
+      description: 'Class used for indefinite snackbar close icon',
+    },
   ],
   basicComponent: `
     class SnackDisplay extends React.Component {
@@ -106,6 +114,7 @@ export const componentData = {
         this.openTopSnackbar = this.openTopSnackbar.bind(this);
         this.openIndefiniteSnackbar = this.openIndefiniteSnackbar.bind(this);
         this.handleSnackClose = this.handleSnackClose.bind(this);
+        this.handleIndefiniteSnackClose = this.handleIndefiniteSnackClose.bind(this);
       }
 
       openBottomSnackbar() {
@@ -134,6 +143,12 @@ export const componentData = {
         });
       }
 
+      handleIndefiniteSnackClose() {
+        this.setState({
+          showIndefiniteSnackbar: false,
+        })
+      }
+
       render() {
         return (
           <div>
@@ -176,9 +191,9 @@ export const componentData = {
 
                 <Snackbar
                   active={this.state.showIndefiniteSnackbar}
-                  onClose={this.handleSnackClose}
+                  onClose={this.handleIndefiniteSnackClose}
                   autoClose={false}>
-                  <span>This is a indefinite snackbar.</span>
+                  <span>This is a indefinite snackbar. Click x to close.</span>
                 </Snackbar>
                  
               </PreviewBlock>

diff --git a/doc/src/components/common/componentData/Table/index.js b/doc/src/components/common/componentData/Table/index.js
@@ -64,6 +64,12 @@ export const componentData = {
       defaultValue: 'false',
       description: 'Prop to be sent, If sorting functionality is required.',
     },
+    {
+      prop: 'sortByTitle',
+      type: 'Boolean',
+      defaultValue: 'false',
+      description: 'Prop to be sent, If sorting functionality by clicking column header is required.',
+    },
   ],  
   themesData: [
     {
@@ -106,6 +112,10 @@ export const componentData = {
       name: 'sortArrow',
       description: 'Class used for the sorting arrows in table header cells.',
     },
+    {
+      name: 'sortableTitle',
+      description: 'Class used for the title when sortByTitle is enabled.',
+    },
   ],
   basicComponent: `
     class Demo extends React.Component {
@@ -163,7 +173,7 @@ export const componentData = {
       render() {
         const columns = [
           { title: 'Name', key: 'name', colWidth: '150px' },
-          { title: 'Default Value', key: 'defaultValue' },
+          { title: 'Default Value', key: 'defaultValue', colWidth: '180px' },
           { title: 'Description', key: 'description' },
         ];
         const data = [
@@ -194,12 +204,20 @@ export const componentData = {
           },
         ];
         return (
-          <PreviewElements>
+          <div>
+            <PreviewBlock header="Table, Sortable with buttons">
 
-          {/* Default table component with sort functionality */}
-            <Table columns={columns} data={data} sort />
-            
-          </PreviewElements>
+            {/* Default table component with sort functionality */}
+              <Table columns={columns} data={data} sort />
+              
+            </PreviewBlock>
+            <PreviewBlock header="Table, sortable by clicking header cell">
+
+            {/* Default table component with sort functionality on clicking header */}
+              <Table columns={columns} data={data} sortByTitle />
+              
+            </PreviewBlock>
+          </div>
         )
       }
     }

diff --git a/doc/src/components/header.js b/doc/src/components/header.js
@@ -10,7 +10,7 @@ import theme from './theme.module.scss';
 const Header = ({ location }) => (
   <Navbar
     theme={theme}
-    className={`navbar${location.pathname !== '/' ? ' navbar-extended' : ' navbar-animated'}`}
+    className={`navbar${location.pathname !== process.env.HOMEPAGE_ROOT_URL_PREFIX ? ' navbar-extended' : ' navbar-animated'}`}
     position="fixed"
     flat
     title={<Link to="/">React Lite UI</Link>}

diff --git a/doc/src/components/styles.scss b/doc/src/components/styles.scss
@@ -15,6 +15,8 @@
 }
 
 .navbar-extended {
+  transform: translateY(0) !important;
+  opacity: 1 !important;
   div[class*=innerWrapper] {
     max-width: 100vw !important;
   }

diff --git a/doc/src/images/desktop.svg b/doc/src/images/desktop.svg
diff --git a/doc/src/images/i-pad-air.svg b/doc/src/images/i-pad-air.svg
diff --git a/doc/src/images/i-phone-6.svg b/doc/src/images/i-phone-6.svg
diff --git a/doc/src/pages/documentation.js b/doc/src/pages/documentation.js
@@ -47,7 +47,9 @@ class DocumentationPage extends React.Component {
   }
 
   onClickComponent = (name, componentData) => {
+    const { location } = this.props;
     navigate(`/documentation?component=${name.toLowerCase()}`);
+    window.gtag('config', 'UA-41862404-1', { page_path: `${location.pathname}/${name.toLowerCase()}` });
     this.setState({
       activeComponent: name,
       componentData,

diff --git a/doc/src/pages/index.scss b/doc/src/pages/index.scss
@@ -5,6 +5,11 @@ body {
     overflow-x: hidden;
 }
 
+.navbar {
+    transform: translateY(-100%);
+    opacity: 0;
+}
+
 .hero-container {
     display: flex;
     width: 100%;

diff --git a/doc/src/pages/playground.js b/doc/src/pages/playground.js
@@ -52,29 +52,25 @@ export default class Playground extends Component {
       });
     }
 
-    componentDidUpdate(prevProps) {
-      const { location } = this.props;
-      const { currentComponent } = this.state;
-      if (location.search !== prevProps.location.search) {
-        navigate(`/playground?component=${currentComponent.toLowerCase()}`);
-      }
-    }
-
     // eslint-disable-next-line max-len
     getComponentByName = name => componentList.filter(comp => comp.name.toLowerCase() === name.toLowerCase());
 
     changeComponent = ({ label }) => {
+      const { location } = this.props;
       const component = this.getComponentByName(label)[0].componentData;
       this.setState({
         currentComponent: label,
         component,
       });
       navigate(`/playground?component=${label.toLowerCase()}`);
+      window.gtag('config', 'UA-41862404-1', { page_path: `${location.pathname}/${label.toLowerCase()}` });
     }
 
     navigateBack = () => {
       const { prevPage, currentComponent } = this.state;
+      const { location } = this.props;
       navigate(`/${prevPage}?component=${currentComponent.toLowerCase()}`);
+      window.gtag('config', 'UA-41862404-1', { page_path: `/${location.pathname.replace(new RegExp('/', 'g'), '')}/${currentComponent.toLowerCase()}` });
     }
 
     renderPlaygroundNavigation = () => {

diff --git a/doc/src/pages/usage.js b/doc/src/pages/usage.js
@@ -47,7 +47,9 @@ class UsagePage extends React.Component {
   }
 
   onClickComponent = (name, componentData) => {
+    const { location } = this.props;
     navigate(`/usage?component=${name.toLowerCase()}`);
+    window.gtag('config', 'UA-41862404-1', { page_path: `${location.pathname}/${name.toLowerCase()}` });
     this.setState({
       activeComponent: name,
       componentData,

diff --git a/lib/autocomplete/index.js b/lib/autocomplete/index.js
@@ -247,7 +247,7 @@ class AutoComplete extends Component {
             {item[`${labelKey}`]}
           </div>
         );
-      }) : 'No results found!';
+      }) : <span className={theme['no-results']}>No results found!</span>;
   };
 
   render() {

diff --git a/lib/autocomplete/tests/edgecases.test.js b/lib/autocomplete/tests/edgecases.test.js
@@ -29,7 +29,7 @@ describe('AutoComplete Edge Cases tests', () => {
     wrappedComponent.setProps({ data: [] });
     const simulatedValue = () => wrappedComponent
       .find('#autocomplete-list')
-      .children().length;
+      .children('div').length;
 
     wrappedComponent.find('input').simulate('focus');
     expect(simulatedValue()).equal(expectedValue);

diff --git a/lib/autocomplete/theme.module.scss b/lib/autocomplete/theme.module.scss
@@ -1,7 +1,6 @@
 @import '../globals/_theme.scss';
 @import '../globals/animations.module.scss';
 @import '../globals/common.scss';
-
 :local(.autocomplete) {
     @include customScroll();
     width: 16em;
@@ -18,43 +17,43 @@
             border: none;
             border-bottom: 2px solid $input-bottom-border;
             outline: none;
-            &:focus {
-                border-bottom: 2px solid $secondary-input-active-border;
-            }
         }
     }
-
-
     :local(.autocomplete-list) {
         z-index: 1;
         box-sizing: border-box;
         height: fit-content;
         height: -moz-fit-content;
-        text-align: center;
         max-height: 300px;
         width: 100%;
         overflow-y: auto;
         box-shadow: $dropdown-menu-shadow;
         border-radius: 2px;
-        margin-top: 10px;
+        margin-top: 0.2em;
         padding: 2% 0;
         position: absolute;
         background-color: white;
-
         @include sectionEntry(0.25s);
-
+        :local(.no-results) {
+            display: flex;
+            padding: 2% 5%;
+            box-sizing: border-box;
+            color: rgba(0, 0, 0, 0.5);
+            font-size: 0.8em;
+        }
         :local(.autocomplete-list-item) {
             display: block;
             box-sizing: border-box;
+            text-align: left;
             cursor: pointer;
-            padding: 2% 2%;
+            padding: 5% 4%;
             box-shadow: none;
             &:hover {
-                background-color: $input-active-item;
+                background-color: rgba(160, 198, 255, 0.77);
             }
         }
         :local(.item-hover) {
-            background-color: $input-active-item;
+            background-color: rgba(160, 198, 255, 0.77);
         }
     }
 }
@@ -63,16 +62,16 @@
     &::after {
         content: '';
         display: block;
-        background-color: $primary-input-active-border !important;
+        background-color: rgba(160, 198, 255, 0.77) !important;
         height: 2px;
         @include inputFocus();
         animation-duration: 0.3s;
         animation-timing-function: linear;
         margin-top: -2px;
         position: relative;
         /* Safari only style */
-        @media not all and (min-resolution:.001dpcm) {
-          bottom: 2px;
+        @media not all and (min-resolution: .001dpcm) {
+            bottom: 2px;
         }
     }
 }