add placeholders

.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/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,75 @@
 @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 shimmer($duration: 2s) {
+  animation-duration: $duration;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeholderShimmer;
+  animation-timing-function: linear;
+
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeholderShimmer;
+  -webkit-animation-timing-function: linear;
+
+  @keyframes placeholderShimmer {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+  }
+
+  @-webkit-keyframes placeholderShimmer {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 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(['default', 'circle']),
+};
+
+BoxPlaceholder.defaultProps = {
+  theme: {},
+  shape: 'default',
+};
+
+export default themr('BPLACEHOLDER', defaultTheme)(BoxPlaceholder);

lib/placeholders/box/readMe.md

@@ -0,0 +1,30 @@
+## Box Placeholder
+
+The box placeholder component.
+
+### Properties
+
+| Name    | Type     | Default   | Description                   |
+| :------ | :------- | :-------- | :---------------------------- |
+| `shape` | `String` | `default` | Prop to set the shape of box. |
+
+### Theme
+
+| Name        | Description                               |
+| :---------- | :---------------------------------------- |
+| `boxStyles` | Class used for the style the box element. |
+
+### Usage
+
+```
+
+const Demo = ({theme, shape}) => {
+    const classes = classnames(theme.styles, theme.boxStyles, theme[shape]);
+
+  const boxPlaceholderProps = {
+    className: classes,
+  };
+
+  return <div {...boxPlaceholderProps} />;
+}
+```

lib/placeholders/box/tests/accessibility.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { expect, assert } from 'chai';
+
+import BoxPlaceholder from '..';
+
+/* eslint-disable no-undef */
+describe('BoxPlaceholder accessibility tests', () => {
+  let wrappedComponent;
+  let expectedValue;
+  let actualValue;
+
+  beforeEach(() => {
+    wrappedComponent = mount(<BoxPlaceholder shape="circle" />);
+  });
+
+  afterEach(() => {
+    wrappedComponent.unmount();
+  });
+
+  it('allows us to set props', () => {
+    expect(wrappedComponent.props().shape).to.equal('circle');
+    wrappedComponent.setProps({ shape: 'default' });
+    expect(wrappedComponent.props().shape).to.equal('default');
+  });
+
+  it('should accept `Shape` prop', () => {
+    expectedValue = 'circle';
+    actualValue = () => wrappedComponent.prop('shape');
+    assert.strictEqual(actualValue(), expectedValue);
+  });
+});

lib/placeholders/box/tests/render.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { expect } from 'chai';
+
+import BoxPlaceHolder from '..';
+
+/* eslint-disable no-undef */
+describe('Box placeholder render test', () => {
+  let wrappedComponent;
+  const expectedValue = 1;
+  const actualValue = element => wrappedComponent.find(element).length;
+
+  beforeEach(() => {
+    wrappedComponent = mount(<BoxPlaceHolder />);
+  });
+
+  afterEach(() => {
+    wrappedComponent.unmount();
+  });
+
+  it('Should render the BoxPlaceholder component', () => {
+    expect(actualValue('div')).equal(expectedValue);
+  });
+
+  it('Should render a `BoxPlaceholder` with defalult `shape`', () => {
+    expect(wrappedComponent.props().shape).to.equal('default');
+  });
+});

lib/placeholders/box/theme.module.scss

@@ -0,0 +1,29 @@
+@import '../../globals/theme';
+@import '../../globals/animations.module.scss';
+
+:local(.styles) {
+  background: $shimmer-color-light;
+  background-image: linear-gradient(
+    to right,
+    $shimmer-color-light 0%,
+    $shimmer-color-dark 20%,
+    $shimmer-color-light 40%,
+    $shimmer-color-light 100%
+  );
+  background-repeat: no-repeat;
+  //  ****  change here for height ***
+  // background-size: 800px 80px;
+  display: inline-block;
+  position: relative;
+
+  @include shimmer();
+}
+
+:local(.boxStyles) {
+  width: 80px;
+  height: 80px;
+}
+
+:local(.circle) {
+  border-radius: 100px;
+}