add size option to circle component

JoshK2 · Sep 1, 2019 · 1a75823 · 1a75823
1 parent bb91772
commit 1a75823
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/components/Circle/index.js b/src/components/Circle/index.js
@@ -4,15 +4,19 @@ import './style.css'
 
 export default class Circle extends Component {
     render() {
-        return <div className="lds-circle" style={{ background: this.props.color }}></div>
+        const { color, size } = this.props;
+        return <div className="lds-circle" style={{ background: color, width: size, height: size }}></div>
     }
 }
 
 Circle.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** size in pixel */
+    size: PropTypes.number,
 }
 
 Circle.defaultProps = {
     color: '#7f58af',
+    size: 64,
 }
diff --git a/src/components/Circle/style.css b/src/components/Circle/style.css
@@ -1,7 +1,5 @@
 .lds-circle {
     display: inline-block;
-    width: 64px;
-    height: 64px;
     margin: 8px;
     border-radius: 50%;
     animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;