Add size to Grid

Author: GuilhermeJSilva

README.md

@@ -39,7 +39,7 @@ Component that accepts `size` prop have a default size in pixel.
 | `<Ellipsis/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |
 | `<DualRing/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |
 | `<Facebook/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |
-| `<Grid/>`        | `#7f58af`     | -             | `""`              | `{}`          |
+| `<Grid/>`        | `#7f58af`     | `80`          | `""`              | `{}`          |
 | `<Heart/>`       | `#7f58af`     | `80`          | `""`              | `{}`          |
 | `<Hourglass/>`   | `#7f58af`     | `32`          | `""`              | `{}`          |
 | `<Ring/>`        | `#7f58af`     | `80`          | `""`              | `{}`          |

src/components/Grid/index.js

@@ -2,11 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default function Grid({ color, className, style }) {
+export default function Grid({ color, className, style, size }) {
     const circles = [...Array(9)].map((_, index) => <div key={index} style={{ background: `${color}` }} />)
 
     return (
-        <div className={`lds-grid ${className}`} style={{ ...style }}>
+        <div className={`lds-grid ${className}`} style={{ width: size, height: size, ...style }}>
             {circles}
         </div>
     )
@@ -15,6 +15,8 @@ export default function Grid({ color, className, style }) {
 Grid.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** size in pixel */
+    size: PropTypes.number,
     /** class name  */
     className: PropTypes.string,
     /** style object */
@@ -23,6 +25,7 @@ Grid.propTypes = {
 
 Grid.defaultProps = {
     color: '#7f58af',
+    size: 80,
     className: '',
     style: {},
 }

src/components/Grid/style.css

@@ -6,55 +6,55 @@
   }
   .lds-grid div {
     position: absolute;
-    width: 16px;
-    height: 16px;
+    width: 20%;
+    height: 20%;
     border-radius: 50%;
     background: #fff;
     animation: lds-grid 1.2s linear infinite;
   }
   .lds-grid div:nth-child(1) {
-    top: 8px;
-    left: 8px;
+    top: 10%;
+    left: 10%;
     animation-delay: 0s;
   }
   .lds-grid div:nth-child(2) {
-    top: 8px;
-    left: 32px;
+    top: 10%;
+    left: 40%;
     animation-delay: -0.4s;
   }
   .lds-grid div:nth-child(3) {
-    top: 8px;
-    left: 56px;
+    top: 10%;
+    left: 70%;
     animation-delay: -0.8s;
   }
   .lds-grid div:nth-child(4) {
-    top: 32px;
-    left: 8px;
+    top: 40%;
+    left: 10%;
     animation-delay: -0.4s;
   }
   .lds-grid div:nth-child(5) {
-    top: 32px;
-    left: 32px;
+    top: 40%;
+    left: 40%;
     animation-delay: -0.8s;
   }
   .lds-grid div:nth-child(6) {
-    top: 32px;
-    left: 56px;
+    top: 40%;
+    left: 70%;
     animation-delay: -1.2s;
   }
   .lds-grid div:nth-child(7) {
-    top: 56px;
-    left: 8px;
+    top: 70%;
+    left: 10%;
     animation-delay: -0.8s;
   }
   .lds-grid div:nth-child(8) {
-    top: 56px;
-    left: 32px;
+    top: 70%;
+    left: 40%;
     animation-delay: -1.2s;
   }
   .lds-grid div:nth-child(9) {
-    top: 56px;
-    left: 56px;
+    top: 70%;
+    left: 70%;
     animation-delay: -1.6s;
   }
   @keyframes lds-grid {

src/index.js

@@ -167,6 +167,11 @@ const SizeProp = () => {
                 <Default color="#be97e8" size={40} />
                 <Default color="#be97e8" size={20} />
             </div>
+            <div className="block">
+                <Grid color="#be97e8" />
+                <Grid color="#be97e8" size={40} />
+                <Grid color="#be97e8" size={20} />
+            </div>
             <div style={{ clear: 'both' }}></div>
         </div>
     )