Merge pull request #260 from Codebrahma/patch-0

Patch 0

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/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/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/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 />