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>