add placeholders

.babelrc

@@ -1,4 +1,9 @@
 {
     "presets": ["@babel/preset-env", "@babel/preset-react"],
-    "plugins": ["@babel/plugin-proposal-class-properties"]
+    "plugins": ["@babel/plugin-proposal-class-properties"],
+    "env": {
+        "development": {
+            "compact": false
+        }
+    }
 }

.eslintrc

@@ -3,7 +3,12 @@
   "extends": "airbnb",
   "rules": {
     "react/jsx-filename-extension": 0,
-    "import/no-extraneous-dependencies": ["error" , { "devDependencies" : true }],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ],
     "jsx-a11y/label-has-for": 0
   },
   "parserOptions": {

.gitignore

@@ -6,4 +6,5 @@ coverage
 .nyc_output
 /dist
 /stats
-/components
+/components
+/yarn.lock

lib/autocomplete/index.js

@@ -185,7 +185,7 @@ class AutoComplete extends Component {
             if (
               focusedItem
               && ((findNode(this.listRef).scrolldataTop
-              + findNode(this.listRef).offsetTop) > focusedItem.offsetTop)
+                + findNode(this.listRef).offsetTop) > focusedItem.offsetTop)
             ) {
               findNode(this.listRef).scrollTop
                 -= focusedItem.offsetHeight;
@@ -318,8 +318,8 @@ AutoComplete.defaultProps = {
   className: '',
   labelKey: 'label',
   valueKey: 'value',
-  onChange: () => {},
-  onKeyPress: () => {},
+  onChange: () => { },
+  onKeyPress: () => { },
 };
 
 export default themr('CBAutoComplete', defaultTheme)(AutoComplete);

lib/button/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -36,7 +38,7 @@ class Button extends Component {
         [theme[`${type}Bordered`]]: bordered,
         [theme[`${type}Borderless`]]: borderless,
         [theme.iconButton]: iconButton,
-      },
+      }
     );
 
     let Icon;
@@ -52,7 +54,9 @@ class Button extends Component {
     const rootProps = {
       ...others,
       href: !href ? undefined : href,
-      className: classnames(theme.buttonWrapper, { [theme.iconButtonWrapper]: iconButton }),
+      className: classnames(theme.buttonWrapper, {
+        [theme.iconButtonWrapper]: iconButton,
+      }),
       onMouseUp: this.handleMouseUp,
       onMouseLeave: this.handleMouseLeave,
     };
@@ -64,10 +68,11 @@ class Button extends Component {
       className: classes,
       disabled,
     };
+
     return (
       <Element {...rootProps}>
         <button type="button" {...buttonProps}>
-          { icon !== null && <Icon /> }
+          {icon !== null && <Icon />}
           {children}
         </button>
       </Element>

lib/card/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { themr } from 'react-css-themr';

lib/globals/_theme.scss

@@ -17,8 +17,9 @@ $input-active-item: rgba(71, 233, 243, 0.2);
 $input-bottom-border: #6c757d;
 $primary-input-active-border: #47e9f3;
 $secondary-input-active-border: #d8d8d8;
-$dropdown-menu-shadow: 1px 1px 1px 2px rgba(233, 226, 226, 0.5), 0 1px 1px 0 rgba(194, 194, 194, 0.5);
-
+$dropdown-menu-shadow: 1px 1px 1px 2px rgba(233, 226, 226, 0.5),
+0 1px 1px 0 rgba(194, 194, 194, 0.5);
+
 $orange-yellow: #ffa500;
 $bright-cyan: #47e9f3;
 $very-light-pink: #d8d8d8;
@@ -55,3 +56,10 @@ $dark-hot-pink-20: rgba(225, 0, 80, 0.2);
 $orange-yellow-20: rgba(255, 165, 0, 0.2);
 $battleship-grey-20: rgba(108, 117, 125, 0.2);
 $dark-hot-pink-50: rgba(225, 0, 80, 0.5);
+
+$shimmer-color-light: #f6f7f8;
+$shimmer-color-dark: #edeef1;
+
+$shadow-light: 0 2px 4px 0 rgba(0, 1, 38, 0.4);
+
+$border-radius-medium: 6px;

lib/globals/animations.module.scss

@@ -1,41 +1,107 @@
 @mixin inputFocus() {
-    -o-animation-name: animateFocus;
-    -moz-animation-name: animateFocus;
-    -webkit-animation-name: animateFocus;
-    animation-name: animateFocus;
-    @keyframes animateFocus {
-        0% {
-            width: 0%;
-        }
-        100% {
-            width: 100%;
-        }
+  -o-animation-name: animateFocus;
+  -moz-animation-name: animateFocus;
+  -webkit-animation-name: animateFocus;
+  animation-name: animateFocus;
+  @keyframes animateFocus {
+    0% {
+      width: 0%;
     }
+
+    100% {
+      width: 100%;
+    }
+  }
 }
 
 @mixin zoomIn() {
-    -o-animation-name: animateZoom;
-    -moz-animation-name: animateZoom;
-    -webkit-animation-name: animateZoom;
-    animation-name: animateZoom;
-    @keyframes animateZoom {
-        0% {
-            transform: scale(0.1);
-        }
-        100% {
-            transform: scale(1);
-        }
+  -o-animation-name: animateZoom;
+  -moz-animation-name: animateZoom;
+  -webkit-animation-name: animateZoom;
+  animation-name: animateZoom;
+  @keyframes animateZoom {
+    0% {
+      transform: scale(0.1);
+    }
+    100% {
+      transform: scale(1);
     }
+  }
 }
 
 @mixin sectionEntry($duration) {
-    visibility: hidden;
-    opacity: 0;
-    transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
-    &.enabled {
-        visibility: visible;
-        opacity: 1;
-        transition: visibility $duration, opacity $duration, transform $duration;
-        transform: translate(0, 0);
+  visibility: hidden;
+  opacity: 0;
+  transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
+
+  &.enabled {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility $duration, opacity $duration, transform $duration;
+    transform: translate(0, 0);
+  }
+}
+
+@mixin lineShimmer($length: 80px, $duration: 1s, $timingFunction: linear) {
+  animation-duration: $duration;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeholderShimmer;
+  animation-timing-function:  $timingFunction;
+
+  -webkit-animation-duration: $duration;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeholderShimmer;
+  -webkit-animation-timing-function:  $timingFunction;
+
+  @keyframes placeholderShimmer {
+    0% {
+      background-position: -700px 0;
+    }
+    100% {
+      background-position: 700px 0;
+    }
+  }
+
+  @-webkit-keyframes placeholderShimmer {
+    0% {
+      background-position: -700px 0;
+    }
+    100% {
+      background-position: 700px 0;
+    }
+  }
+}
+
+@mixin boxShimmer($length: 80px, $duration: 1s, $timingFunction: linear) {
+  animation-duration: $duration;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: boxPlaceholderShimmer;
+  animation-timing-function:  $timingFunction;
+
+  -webkit-animation-duration: $duration;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: boxPlaceholderShimmer;
+  -webkit-animation-timing-function:  $timingFunction;
+
+  @keyframes boxPlaceholderShimmer {
+    0% {
+      background-position: -80px 0;
+    }
+    100% {
+      background-position: 80px 0;
+    }
+  }
+
+  @-webkit-keyframes boxPlaceholderShimmer {
+    0% {
+      background-position: -80px 0;
+    }
+    100% {
+      background-position: 80px 0;
     }
+  }
 }

lib/index.js

@@ -24,3 +24,10 @@ export { default as Carousel } from './carousel';
 export { default as ProgressBar } from './progressbar';
 export { default as Table } from './table';
 export { default as Pagination } from './pagination';
+export {
+  BoxPlaceholder,
+  LinePlaceholder,
+  ParagraphPlaceHolder,
+  CardPlaceholder,
+  ImageCard,
+} from './placeholders';

lib/navbar/index.js

@@ -143,7 +143,8 @@ class Navbar extends React.Component {
           {leftIcon && (
             <div className={theme.leftIcon} onClick={onLeftIconClick}>
               {React.isValidElement(leftIcon) ? leftIcon : <img src={leftIcon} alt="navbar-left-logo" />}
-            </div>)
+            </div>
+          )
           }
           <div className={theme.navbarContent}>
             {this.renderLeftContent()}
@@ -152,7 +153,8 @@ class Navbar extends React.Component {
           {rightIcon && (
             <div className={theme.rightIcon} onClick={onRightIconClick}>
               {React.isValidElement(rightIcon) ? rightIcon : <img src={rightIcon} alt="navbar-right-logo" />}
-            </div>)
+            </div>
+          )
           }
         </div>
         <div className={classnames(theme.clearfix, 'clearfix')} />

lib/placeholders/box/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+
+import '../../globals/fonts.scss';
+import defaultTheme from './theme.module.scss';
+
+const BoxPlaceholder = ({ theme, shape }) => {
+  const classes = classnames(theme.styles, theme.boxStyles, theme[shape]);
+
+  const boxPlaceholderProps = {
+    className: classes,
+  };
+
+  return <div {...boxPlaceholderProps} />;
+};
+
+BoxPlaceholder.propTypes = {
+  theme: PropTypes.shape({}),
+  shape: PropTypes.oneOf(['square', 'circle']),
+};
+
+BoxPlaceholder.defaultProps = {
+  theme: {},
+  shape: 'square',
+};
+
+export default themr('BPLACEHOLDER', defaultTheme)(BoxPlaceholder);

lib/placeholders/box/readMe.md

@@ -0,0 +1,74 @@
+## Box Placeholder
+
+The box placeholder component.
+
+### Properties
+
+| Name    | Type     | Default   | Description                   |
+| :------ | :------- | :-------- | :---------------------------- |
+| `shape` | `String` | `square` | Prop to set the shape of box. Circle or Square.  |
+
+### Theme
+
+| Name        | Description                               |
+| :---------- | :---------------------------------------- |
+| `boxStyles` | Class used for the style the box element. |
+
+### Usage
+
+```
+
+class Demo extends React.Component {
+    state = {
+       loading: false,
+    }
+    render() {
+       const {loading} = this.state;
+       return (
+            <div>
+                { loading ? <BoxPlaceholder theme={boxPlaceholderTheme} shape={boxShape} /> : 
+                <div>User Content</div>
+             </div>
+        )
+    }
+}
+```
+
+
+### You can make custom card placeholder by putting together box and line placeholder.
+
+```
+
+const CustomPlaceholder = () => (
+    <div style={{
+        margin: "8px",
+        padding: "16px"
+    }}>
+    <div style={{
+      display: "flex",
+      alignItems: "center"
+    }}>
+      <BoxPlaceholder />
+      <LinePlaceholder lineWidth="75" />
+    </div>
+
+    <LinePlaceholder lineWidth="50" />
+    <LinePlaceholder lineWidth="25" />
+  </div>
+) 
+
+class Demo extends React.Component {
+    state = {
+       loading: false,
+    }
+    render() {
+       const {loading} = this.state;
+       return (
+            <div>
+                { loading ? <CustomPlaceholder /> : 
+                <div>User Content</div>
+             </div>
+        )
+    }
+}
+```