Merge pull request #34 from 5-Bits-in-a-Byte/common-checkbox

Merging the common-checkbox into the master redundant-components branch
5-Bits-in-a-Byte · Apr 4, 2021 · 3dabd48 · 3dabd48
2 parents bdb1630 + 621df44
commit 3dabd48
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 23 deletions.
diff --git a/client/src/components/common/Checkbox.js b/client/src/components/common/Checkbox.js
@@ -1,20 +1,17 @@
 import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import BlueCheckmark from "../../imgs/bluecheck.svg";
-import GreyCheckmark from "../../imgs/greycheck.svg";
+import Checkmark from "./Checkmark";
 
 const Checkbox = ({ checkboxName, labelText, onChange, checkStatus }) => {
   return (
     <Wrapper>
       <CheckLabel>
-        <Box>
-          <CheckMark
-            className="checkMark"
-            id="Checkmark"
-            src={checkStatus == true ? BlueCheckmark : GreyCheckmark}
-          />
-        </Box>
+        <Checkmark
+          checkSize={"18px"}
+          checkFloat={"left"}
+          checkStatus={checkStatus}
+        />
         <SpecialInput
           name={checkboxName}
           type="checkbox"
@@ -48,20 +45,6 @@ const Wrapper = styled.div`
   border-radius: 4px;
 `;
 
-const Box = styled.div`
-  float: left;
-  width: 18px;
-  height: 18px;
-  margin: 0 0.5em;
-`;
-
-const CheckMark = styled.img`
-  width: 18px;
-  height: 18px;
-
-  transition: 150ms ease-in-out;
-`;
-
 const CheckLabel = styled.label`
   margin: 0 0.5em;
   line-height: 1em;

diff --git a/client/src/components/common/Checkmark.js b/client/src/components/common/Checkmark.js
@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+import BlueCheckmark from "../../imgs/bluecheck.svg";
+import GreyCheckmark from "../../imgs/greycheck.svg";
+
+const Checkmark = ({ checkSize, checkFloat, checkStatus }) => {
+  return (
+    <Box
+      className="checkMark"
+      id="Checkmark"
+      size={checkSize}
+      float={checkFloat}
+    >
+      <CheckImg
+        src={checkStatus == true ? BlueCheckmark : GreyCheckmark}
+        size={checkSize}
+      />
+    </Box>
+  );
+};
+
+export default Checkmark;
+
+// Defaults for the size and alignment
+var defaultSize = "18px";
+var defaultFloat = "none";
+
+const Box = styled.div`
+  float: ${(props) => props.float || defaultFloat};
+  width: ${(props) => props.size || defaultSize};
+  height: ${(props) => props.size || defaultSize};
+  margin: 0 0.5em;
+`;
+
+const CheckImg = styled.img`
+  width: ${(props) => props.size || defaultSize};
+  height: ${(props) => props.size || defaultSize};
+
+  transition: 150ms ease-in-out;
+`;