Closes #6: Add additional config param to Cube

4so-fourseasons · Jan 26, 2018 · cbe9002 · cbe9002
1 parent f23d75e
commit cbe9002
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 16 deletions.
diff --git a/src/components/Cube/LargeBox.jsx b/src/components/Cube/LargeBox.jsx
@@ -8,7 +8,7 @@ const LargeBox = styled.div`
   width: ${props => props.size}px;
   height: ${props => props.size}px;
 
-  background-color: ${props => props.light};
+  background-color: ${props => props.outerColor};
   outline: 1px solid transparent;
 `
 

diff --git a/src/components/Cube/Loader.jsx b/src/components/Cube/Loader.jsx
@@ -11,7 +11,7 @@ const Loader = styled.div`
   margin: 0 auto;
   width: ${props => props.size}px;
   height: ${props => props.size}px;
-  animation: loaderAnim 1.25s infinite;
+  animation: loaderAnim ${props => props.speed}s infinite;
   outline: 1px solid transparent;
 `
 

diff --git a/src/components/Cube/README.md b/src/components/Cube/README.md
@@ -14,8 +14,9 @@ import { Cube } from '@4so-fourseasons/react-hoc-spinners'
 
 ## Props
 
-| propName | propType | defaultValue | isRequired |
-|----------|----------|--------------|------------|
-| size     | `number`   | 40           | -          |
-| dark     | `string`   | '#333333'    | -          |
-| light    | `string`   | '#c8022f'    | -          |
+| propName   | propType | defaultValue | isRequired |
+|------------|----------|--------------|------------|
+| size       | `number` | 40           | -          |
+| innerColor | `string` | '#333333'    | -          |
+| outerColor | `string` | '#c8022f'    | -          |
+| speed      | `number` | 1.25         | -          |
diff --git a/src/components/Cube/SmallBox.jsx b/src/components/Cube/SmallBox.jsx
@@ -14,11 +14,11 @@ const SmallBox = styled.div`
   width: ${props => props.size}px;
   height: ${props => props.size}px;
 
-  background-color: ${props => props.dark};
+  background-color: ${props => props.innerColor};
 
   outline: 1px solid transparent;
 
-  animation: smallBoxAnim 1.25s alternate infinite ease-in-out;
+  animation: smallBoxAnim ${props => props.speed}s alternate infinite ease-in-out;
 `
 
 export default SmallBox
diff --git a/src/components/Cube/index.jsx b/src/components/Cube/index.jsx
@@ -12,17 +12,19 @@ import SmallBox from './SmallBox'
 
 const Cube = ({
   size = 40,
-  dark = colors.secondary,
-  light = colors.primary
+  innerColor = colors.secondary,
+  outerColor = colors.primary,
+  speed = 1.25
 }: {
   size: number,
-  dark: string,
-  light: string
+  innerColor: string,
+  outerColor: string,
+  speed: number
 }) => (
   <Wrapper>
-    <Loader size={size}>
-      <LargeBox light={light} size={size} />
-      <SmallBox dark={dark} size={size} />
+    <Loader speed={speed} size={size}>
+      <LargeBox outerColor={outerColor} size={size} />
+      <SmallBox innerColor={innerColor} size={size} speed={speed} />
     </Loader>
   </Wrapper>
 )