Merge pull request #263 from Codebrahma/development

Development

Author: rishichawda

doc/src/components/WithComponentsBar/WithComponentBar.js

@@ -14,7 +14,8 @@ import './styles.scss';
 
 class WithComponentBar extends React.Component {
   componentDidUpdate(prevProps) {
-    if (this.props.activeComponent !== prevProps.activeComponent) {
+    const { activeComponent } = this.props;
+    if (activeComponent !== prevProps.activeComponent) {
       const element = document.querySelector('div[data-react-active-component=active]');
       const { top, height } = element.getBoundingClientRect();
       const { parentNode } = document.querySelector('div[data-react-active-component=active]');

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/components/header.js

@@ -19,19 +19,22 @@ const Header = ({ location }) => (
     <Link
       to="/documentation"
       activeClassName="active-link"
-    >Documentation
+    >
+Documentation
     </Link>
     <Link
       to="/usage"
       activeClassName="active-link"
-    >Usage
+    >
+Usage
     </Link>
     <Link
       to="/playground"
       activeClassName="active-link"
-    >Playground
+    >
+Playground
     </Link>
-    <a href="https://www.github.com/Codebrahma/react-lite-ui/" >
+    <a href="https://www.github.com/Codebrahma/react-lite-ui/">
       <svg xmlns="http://www.w3.org/2000/svg" width="69" height="23" viewBox="0 0 69 23">
         <g fill="#FFF" fillRule="evenodd">
           <text fontFamily="Roboto-Bold, Roboto" fontSize="20" transform="translate(29 -1)">

doc/src/components/usage/Usage.js

@@ -22,7 +22,7 @@ const PreviewBlock = ({ children, header }) => (
 );
 
 const PreviewElements = ({ children, style }) => (
-  <div className="preview-elements" style={style} >
+  <div className="preview-elements" style={style}>
     {children}
   </div>
 );
@@ -36,6 +36,7 @@ class Usage extends React.Component {
   componentDidUpdate() {
     highlightAll();
   }
+
   renderComponentUsage = componentData => (
     <LiveProvider
       scope={{
@@ -88,6 +89,11 @@ PreviewBlock.propTypes = {
 
 PreviewElements.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node]).isRequired,
+  style: PropTypes.oneOfType([PropTypes.object]),
+};
+
+PreviewElements.defaultProps = {
+  style: undefined,
 };
 
 export default Usage;

doc/src/pages/documentation.js

@@ -19,7 +19,8 @@ class DocumentationPage extends React.Component {
   }
 
   componentDidMount() {
-    const { search } = this.props.location;
+    const { location } = this.props;
+    const { search } = location;
     const queryComponent = this.getQueryComponent(search);
     if (queryComponent.length) {
       // eslint-disable-next-line react/no-did-mount-set-state
@@ -31,7 +32,8 @@ class DocumentationPage extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { search } = this.props.location;
+    const { location } = this.props;
+    const { search } = location;
     if (search !== prevProps.location.search) {
       const queryComponent = this.getQueryComponent(search);
       if (queryComponent.length) {

doc/src/pages/index.js

@@ -10,6 +10,7 @@ class IndexPage extends Component {
     super(props);
     this.heroBottom = null;
   }
+
   componentDidMount() {
     window.addEventListener('scroll', this.registerScroll);
     // eslint-disable-next-line react/no-find-dom-node
@@ -49,7 +50,8 @@ class IndexPage extends Component {
           <div className="hero-content">
             <img src={liteLogo} alt="react-lite-ui-logo" />
             <div>
-              <h2>React Lite UI</h2><br />
+              <h2>React Lite UI</h2>
+              <br />
               <p>A set of light weight React Components</p>
             </div>
           </div>

doc/src/pages/playground.js

@@ -1,7 +1,9 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import {
+  LiveProvider, LiveEditor, LiveError, LivePreview,
+} from 'react-live';
 import { navigate } from 'gatsby';
 import { componentList } from '../components/common/componentList';
 import * as components from '../../../lib';
@@ -92,13 +94,13 @@ export default class Playground extends Component {
               />
               <span>Select a component from the dropdown to edit it in playground.</span>
             </div>
-            ) : (
-              <Preloader
-                loader="colorCircleLoader"
-                size="small"
-                color="primary"
-              />
-            )
+          ) : (
+            <Preloader
+              loader="colorCircleLoader"
+              size="small"
+              color="primary"
+            />
+          )
           }
           <Button theme={theme} onClick={this.navigateBack} flat borderless>{`Go to ${prevPage}`}</Button>
         </div>

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/pages/usage.js

@@ -19,7 +19,8 @@ class UsagePage extends React.Component {
   }
 
   componentDidMount() {
-    const { search } = this.props.location;
+    const { location } = this.props;
+    const { search } = location;
     const queryComponent = this.getQueryComponent(search);
     if (queryComponent.length) {
       // eslint-disable-next-line react/no-did-mount-set-state
@@ -31,7 +32,8 @@ class UsagePage extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { search } = this.props.location;
+    const { location } = this.props;
+    const { search } = location;
     if (search !== prevProps.location.search) {
       const queryComponent = this.getQueryComponent(search);
       if (queryComponent.length) {

doc/src/templates/landing-main/contrib-section/footer.js

@@ -7,9 +7,15 @@ const FooterSection = () => (
     <div className="row">
       {'Want us to build something for you? '}
       {'Great! We would love to!'}
-      <Button theme={theme} bordered href="https://codebrahma.com/contact/" >Let us know here!</Button>
+      <Button theme={theme} bordered href="https://codebrahma.com/contact/">Let us know here!</Button>
+    </div>
+    <div className="row bottom-bar">
+Made with
+      <span className="heart">❤</span>
+      {' '}
+by
+      <a target="blank" href="https://www.codebrahma.com"><span>Codebrahma</span></a>
     </div>
-    <div className="row bottom-bar">Made with <span className="heart">❤</span> by<a target="blank" href="https://www.codebrahma.com"><span>Codebrahma</span></a></div>
   </div>
 );
 

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/features.js

@@ -22,7 +22,7 @@ const FeaturesSection = () => (
       <img src={quill} alt="lite-weight" />
       <p>Extremely Lite</p>
     </div>
-  </div >
+  </div>
 );
 
 

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

@@ -29,7 +29,7 @@ const LandingMain = () => (
     <div className="row">
       <div className="col">
         <p>Designed for all screen sizes.</p>
-        <Link to="/usage" ><Button>Take a Tour</Button></Link>
+        <Link to="/usage"><Button>Take a Tour</Button></Link>
       </div>
     </div>
     <ContributionSection />

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 {