From 8c05f79aa62afd9aca50088fa81ca38e20cf018c Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Thu, 23 Jan 2025 18:53:17 +0000
Subject: [PATCH 01/20] progress at end of day

---
 src/components/Atoms/Checkbox/Checkbox.js | 15 +++++++++++----
 src/components/Atoms/Checkbox/Checkbox.md |  2 +-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index 8a71f32de..c4b851c06 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -29,11 +29,13 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;
     background-color: ${({ theme }) => theme.color('red')};
-    border-color: ${({ theme }) => theme.color('red')};
+    border-color: ${({ theme, checkboxBorderColour }) => theme.color(checkboxBorderColour)};
+    background-color: grey;
+    border-color: green;
     background-size: contain;
   }
   :focus + span {
-    border-color: ${({ theme }) => theme.color('red')};
+    border-color: ${({ theme, checkboxBorderColour }) => theme.color(checkboxBorderColour)};
     border-width: 1px;
   }
 `;
@@ -45,7 +47,11 @@ const Label = styled.label`
 `;
 
 const Checkbox = React.forwardRef(({
-  label = undefined, value, children = undefined, ...rest
+  label = undefined,
+  value,
+  children = undefined,
+  checkboxBorderColour,
+  ...rest
 }, ref) => (
   <Label hasLabelAsString={!!label}>
     <StyledCheckboxInput {...rest} value={value} ref={ref} />
@@ -58,7 +64,8 @@ Checkbox.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   label: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  checkboxBorderColour: PropTypes.string
 };
 
 export default Checkbox;
diff --git a/src/components/Atoms/Checkbox/Checkbox.md b/src/components/Atoms/Checkbox/Checkbox.md
index 804a4964d..e4abdeeaa 100644
--- a/src/components/Atoms/Checkbox/Checkbox.md
+++ b/src/components/Atoms/Checkbox/Checkbox.md
@@ -24,7 +24,7 @@ const LongLabel = () => (
 
 <>
     <p>List of checkboxes</p>
-    <Checkbox name="sport" value="Tennis" label="Tennis" />
+    <Checkbox name="sport" value="Tennis" label="Tennis" checkboxBorderColour="red" />
     <Checkbox name="sport" value="Basketball" label="Basketball" />
     <Checkbox name="sport" value="Cycling" label="Cycling" />
     <Checkbox name="sport" value="Football" label="Football" />

From cc53a121d1f82b107956ac566a4dc49b42cd80ac Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Fri, 24 Jan 2025 12:51:25 +0000
Subject: [PATCH 02/20] setting up more props

---
 src/components/Atoms/Checkbox/Checkbox.js | 35 +++++++++++++++++------
 src/components/Atoms/Checkbox/Checkbox.md | 10 ++++++-
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index c4b851c06..d2186c2c3 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -21,7 +21,12 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
     width: 24px;
     height: 24px;
     border-radius: 4px;
-    background-color: ${({ theme }) => theme.color('white')};
+    background-color: ${({ theme, checkboxBackground }) =>
+      checkboxBackground ?
+      theme.color(checkboxBackground)
+      :
+      theme.color('white')
+    };
     border: 1px solid ${({ theme }) => theme.color('grey')};
     float: left;
     flex-shrink: 0;
@@ -29,13 +34,11 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;
     background-color: ${({ theme }) => theme.color('red')};
-    border-color: ${({ theme, checkboxBorderColour }) => theme.color(checkboxBorderColour)};
-    background-color: grey;
-    border-color: green;
+    border-color: ${({ theme }) => theme.color('red')};
     background-size: contain;
   }
   :focus + span {
-    border-color: ${({ theme, checkboxBorderColour }) => theme.color(checkboxBorderColour)};
+    border-color: ${({ theme, checkboxBorderChecked }) => theme.color(checkboxBorderChecked)};
     border-width: 1px;
   }
 `;
@@ -50,11 +53,22 @@ const Checkbox = React.forwardRef(({
   label = undefined,
   value,
   children = undefined,
-  checkboxBorderColour,
+  checkboxBackground,
+  checkboxBorder,
+  checkboxBackgroundChecked,
+  checkboxBorderChecked,
   ...rest
 }, ref) => (
   <Label hasLabelAsString={!!label}>
-    <StyledCheckboxInput {...rest} value={value} ref={ref} />
+    <StyledCheckboxInput
+      {...rest}
+      value={value}
+      ref={ref}
+      checkboxBackground={checkboxBackground}
+      checkboxBorder={checkboxBorder}
+      checkboxBackgroundChecked={checkboxBackgroundChecked}
+      checkboxBorderChecked={checkboxBorderChecked}
+    />
     <span />
     {label ? <Text weight="bold">{label}</Text> : children}
   </Label>
@@ -65,7 +79,12 @@ Checkbox.propTypes = {
   value: PropTypes.string.isRequired,
   label: PropTypes.string,
   children: PropTypes.node,
-  checkboxBorderColour: PropTypes.string
+  checkboxBackground: PropTypes.string,
+  checkboxBorderChecked: PropTypes.string,
+  checkboxBackground: PropTypes.string,
+  checkboxBorder: PropTypes.string,
+  checkboxBackgroundChecked: PropTypes.string,
+  checkboxBorderChecked: PropTypes.string
 };
 
 export default Checkbox;
diff --git a/src/components/Atoms/Checkbox/Checkbox.md b/src/components/Atoms/Checkbox/Checkbox.md
index e4abdeeaa..6b8e193c0 100644
--- a/src/components/Atoms/Checkbox/Checkbox.md
+++ b/src/components/Atoms/Checkbox/Checkbox.md
@@ -24,7 +24,15 @@ const LongLabel = () => (
 
 <>
     <p>List of checkboxes</p>
-    <Checkbox name="sport" value="Tennis" label="Tennis" checkboxBorderColour="red" />
+    <Checkbox
+        name="sport"
+        value="Tennis"
+        label="Tennis (with wacky styling props)"
+        checkboxBackground="red"
+        checkboxBorder="green"
+        checkboxBackgroundChecked="green"
+        checkboxBorderChecked="red"
+    />
     <Checkbox name="sport" value="Basketball" label="Basketball" />
     <Checkbox name="sport" value="Cycling" label="Cycling" />
     <Checkbox name="sport" value="Football" label="Football" />

From 7ea05e91e15c116f88728535154a060db269afc9 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Fri, 24 Jan 2025 14:22:25 +0000
Subject: [PATCH 03/20] linting

---
 src/components/Atoms/Checkbox/Checkbox.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index d2186c2c3..0a4804a82 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -21,12 +21,10 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
     width: 24px;
     height: 24px;
     border-radius: 4px;
-    background-color: ${({ theme, checkboxBackground }) =>
-      checkboxBackground ?
-      theme.color(checkboxBackground)
-      :
-      theme.color('white')
-    };
+    background-color: ${({ theme, checkboxBackground }) => (checkboxBackground
+    ? theme.color(checkboxBackground)
+    : theme.color('white'))
+};
     border: 1px solid ${({ theme }) => theme.color('grey')};
     float: left;
     flex-shrink: 0;

From 19aeee2e53422d10482b9804e89d2d182377f3d6 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Fri, 24 Jan 2025 14:23:15 +0000
Subject: [PATCH 04/20] fix double up props

---
 src/components/Atoms/Checkbox/Checkbox.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index 0a4804a82..bf702fbcb 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -78,8 +78,6 @@ Checkbox.propTypes = {
   label: PropTypes.string,
   children: PropTypes.node,
   checkboxBackground: PropTypes.string,
-  checkboxBorderChecked: PropTypes.string,
-  checkboxBackground: PropTypes.string,
   checkboxBorder: PropTypes.string,
   checkboxBackgroundChecked: PropTypes.string,
   checkboxBorderChecked: PropTypes.string

From fb3b2e1352f27be22643e1b01daa7b9036542619 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Fri, 24 Jan 2025 14:56:37 +0000
Subject: [PATCH 05/20] snaps

---
 src/components/Atoms/Checkbox/Checkbox.test.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.test.js b/src/components/Atoms/Checkbox/Checkbox.test.js
index 7d52623fd..caf851d69 100644
--- a/src/components/Atoms/Checkbox/Checkbox.test.js
+++ b/src/components/Atoms/Checkbox/Checkbox.test.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
-import Checkbox from './Checkbox';
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
+import Checkbox from "./Checkbox";
 
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = renderWithTheme(
     <>
       <Checkbox name="sport" value="Tenis" label="Tenis" />
@@ -55,7 +55,7 @@ it('renders correctly', () => {
     }
 
     .c1:focus + span {
-      border-color: #E52630;
+      border-color: inherit;
       border-width: 1px;
     }
 
@@ -131,7 +131,7 @@ it('renders correctly', () => {
     }
 
     .c1:focus + span {
-      border-color: #E52630;
+      border-color: inherit;
       border-width: 1px;
     }
 

From 76f4817ec9d76952d8ccdd150bae58bae5fbb63b Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Fri, 24 Jan 2025 19:31:24 +0000
Subject: [PATCH 06/20] add some comment to groq the structure of the
 underlying html

---
 src/components/Atoms/Checkbox/Checkbox.js | 26 ++++++++++-------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index bf702fbcb..222f0b966 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -5,17 +5,19 @@ import styled from 'styled-components';
 import Text from '../Text/Text';
 import checkBoxIcon from './assets/tick.svg';
 
+// This label wraps both the input and the span that is the visual square checkbox you see */
+const Label = styled.label`
+  display: flex;
+  ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
+  margin-bottom: 8px;
+`;
+
 const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
-  font-size: ${({ theme }) => theme.fontSize('sm')};
-  display: block;
-  box-sizing: border-box;
-  opacity: 0;
-  position: absolute;
-  left: 0px;
-  width: 24px;
-  height: 24px;
+  /* This input is not visible as it is set to opacity: 0 */
+  width: 0;
+  height: 0;
   margin: 0;
-  border: 1px solid ${({ theme }) => theme.color('grey')};
+  /* This span is actually the visual square checkbox you see */
   + span {
     margin-right: 12px;
     width: 24px;
@@ -41,12 +43,6 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
   }
 `;
 
-const Label = styled.label`
-  display: flex;
-  ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
-  margin-bottom: 8px;
-`;
-
 const Checkbox = React.forwardRef(({
   label = undefined,
   value,

From 4b356bf23cae52b450cf3f07eeac86113ae89913 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Fri, 24 Jan 2025 19:32:30 +0000
Subject: [PATCH 07/20] snaps

---
 .../Atoms/Checkbox/Checkbox.test.js           | 68 ++++++++-----------
 1 file changed, 28 insertions(+), 40 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.test.js b/src/components/Atoms/Checkbox/Checkbox.test.js
index caf851d69..091bc6b21 100644
--- a/src/components/Atoms/Checkbox/Checkbox.test.js
+++ b/src/components/Atoms/Checkbox/Checkbox.test.js
@@ -22,16 +22,22 @@ it("renders correctly", () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
     .c1 {
-      display: block;
-      box-sizing: border-box;
-      opacity: 0;
-      position: absolute;
-      left: 0px;
-      width: 24px;
-      height: 24px;
+      width: 0;
+      height: 0;
       margin: 0;
-      border: 1px solid #969598;
     }
 
     .c1 + span {
@@ -59,18 +65,6 @@ it("renders correctly", () => {
       border-width: 1px;
     }
 
-    .c0 {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-align-items: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      margin-bottom: 8px;
-    }
-
     <label
         className="c0"
       >
@@ -98,16 +92,22 @@ it("renders correctly", () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
     .c1 {
-      display: block;
-      box-sizing: border-box;
-      opacity: 0;
-      position: absolute;
-      left: 0px;
-      width: 24px;
-      height: 24px;
+      width: 0;
+      height: 0;
       margin: 0;
-      border: 1px solid #969598;
     }
 
     .c1 + span {
@@ -135,18 +135,6 @@ it("renders correctly", () => {
       border-width: 1px;
     }
 
-    .c0 {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-align-items: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      margin-bottom: 8px;
-    }
-
     <label
         className="c0"
       >

From 24e362b4e809f8cec72dc6acc07eb62f7fb21a5d Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 27 Jan 2025 14:19:03 +0000
Subject: [PATCH 08/20] rename some props

---
 src/components/Atoms/Checkbox/Checkbox.js | 18 +++++++++---------
 src/components/Atoms/Checkbox/Checkbox.md |  6 +++---
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index 222f0b966..e063eb324 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -23,10 +23,10 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
     width: 24px;
     height: 24px;
     border-radius: 4px;
-    background-color: ${({ theme, checkboxBackground }) => (checkboxBackground
-    ? theme.color(checkboxBackground)
+    background-color: ${({ theme, checkboxBg }) => (checkboxBg
+    ? theme.color(checkboxBg)
     : theme.color('white'))
-};
+  };
     border: 1px solid ${({ theme }) => theme.color('grey')};
     float: left;
     flex-shrink: 0;
@@ -47,9 +47,9 @@ const Checkbox = React.forwardRef(({
   label = undefined,
   value,
   children = undefined,
-  checkboxBackground,
+  checkboxBg,
   checkboxBorder,
-  checkboxBackgroundChecked,
+  checkboxBgChecked,
   checkboxBorderChecked,
   ...rest
 }, ref) => (
@@ -58,9 +58,9 @@ const Checkbox = React.forwardRef(({
       {...rest}
       value={value}
       ref={ref}
-      checkboxBackground={checkboxBackground}
+      checkboxBg={checkboxBg}
       checkboxBorder={checkboxBorder}
-      checkboxBackgroundChecked={checkboxBackgroundChecked}
+      checkboxBgChecked={checkboxBgChecked}
       checkboxBorderChecked={checkboxBorderChecked}
     />
     <span />
@@ -73,9 +73,9 @@ Checkbox.propTypes = {
   value: PropTypes.string.isRequired,
   label: PropTypes.string,
   children: PropTypes.node,
-  checkboxBackground: PropTypes.string,
+  checkboxBg: PropTypes.string,
   checkboxBorder: PropTypes.string,
-  checkboxBackgroundChecked: PropTypes.string,
+  checkboxBgChecked: PropTypes.string,
   checkboxBorderChecked: PropTypes.string
 };
 
diff --git a/src/components/Atoms/Checkbox/Checkbox.md b/src/components/Atoms/Checkbox/Checkbox.md
index 6b8e193c0..5369e3c1d 100644
--- a/src/components/Atoms/Checkbox/Checkbox.md
+++ b/src/components/Atoms/Checkbox/Checkbox.md
@@ -27,10 +27,10 @@ const LongLabel = () => (
     <Checkbox
         name="sport"
         value="Tennis"
-        label="Tennis (with wacky styling props)"
-        checkboxBackground="red"
+        label="Tennis (with wacky styling to test props)"
+        checkboxBg="red"
         checkboxBorder="green"
-        checkboxBackgroundChecked="green"
+        checkboxBgChecked="green"
         checkboxBorderChecked="red"
     />
     <Checkbox name="sport" value="Basketball" label="Basketball" />

From ea2b609a8a6766758ffb1a16a2871cb4c9cda00d Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 27 Jan 2025 14:19:40 +0000
Subject: [PATCH 09/20] lint

---
 src/components/Atoms/Checkbox/Checkbox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index e063eb324..1aa880f44 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -26,7 +26,7 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
     background-color: ${({ theme, checkboxBg }) => (checkboxBg
     ? theme.color(checkboxBg)
     : theme.color('white'))
-  };
+};
     border: 1px solid ${({ theme }) => theme.color('grey')};
     float: left;
     flex-shrink: 0;

From 28b69239e5b10dd916b912a6a200de9fd533fffd Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 27 Jan 2025 14:35:44 +0000
Subject: [PATCH 10/20] extra props logic

---
 src/components/Atoms/Checkbox/Checkbox.js | 14 +++++---------
 src/components/Atoms/Checkbox/Checkbox.md |  2 +-
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index 1aa880f44..6dd57f2c0 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -23,23 +23,19 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
     width: 24px;
     height: 24px;
     border-radius: 4px;
-    background-color: ${({ theme, checkboxBg }) => (checkboxBg
-    ? theme.color(checkboxBg)
-    : theme.color('white'))
-};
-    border: 1px solid ${({ theme }) => theme.color('grey')};
+    background-color: ${({ theme, checkboxBg }) => (checkboxBg ? theme.color(checkboxBg) : theme.color('white'))};
+    border: 1px solid ${({ theme, checkboxBorder }) => (checkboxBorder ? theme.color(checkboxBorder) : theme.color('grey'))};
     float: left;
     flex-shrink: 0;
   }
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;
-    background-color: ${({ theme }) => theme.color('red')};
-    border-color: ${({ theme }) => theme.color('red')};
     background-size: contain;
+    background-color: ${({ theme, checkboxBgChecked }) => (checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('white'))};
+    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('grey'))};
   }
   :focus + span {
-    border-color: ${({ theme, checkboxBorderChecked }) => theme.color(checkboxBorderChecked)};
-    border-width: 1px;
+    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
   }
 `;
 
diff --git a/src/components/Atoms/Checkbox/Checkbox.md b/src/components/Atoms/Checkbox/Checkbox.md
index 5369e3c1d..da49d383e 100644
--- a/src/components/Atoms/Checkbox/Checkbox.md
+++ b/src/components/Atoms/Checkbox/Checkbox.md
@@ -29,7 +29,7 @@ const LongLabel = () => (
         value="Tennis"
         label="Tennis (with wacky styling to test props)"
         checkboxBg="red"
-        checkboxBorder="green"
+        checkboxBorder="blue"
         checkboxBgChecked="green"
         checkboxBorderChecked="red"
     />

From 027cd244cda59810b71bcc5a9ad7863a5d6a237d Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 27 Jan 2025 14:38:46 +0000
Subject: [PATCH 11/20] snaps

---
 src/components/Atoms/Checkbox/Checkbox.test.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.test.js b/src/components/Atoms/Checkbox/Checkbox.test.js
index 091bc6b21..2e68da108 100644
--- a/src/components/Atoms/Checkbox/Checkbox.test.js
+++ b/src/components/Atoms/Checkbox/Checkbox.test.js
@@ -55,14 +55,13 @@ it("renders correctly", () => {
 
     .c1:checked + span {
       background: url(mock.asset) no-repeat center;
-      background-color: #E52630;
-      border-color: #E52630;
       background-size: contain;
+      background-color: #FFFFFF;
+      border: 1px solid #969598;
     }
 
     .c1:focus + span {
-      border-color: inherit;
-      border-width: 1px;
+      border: 1px solid #E52630;
     }
 
     <label
@@ -125,14 +124,13 @@ it("renders correctly", () => {
 
     .c1:checked + span {
       background: url(mock.asset) no-repeat center;
-      background-color: #E52630;
-      border-color: #E52630;
       background-size: contain;
+      background-color: #FFFFFF;
+      border: 1px solid #969598;
     }
 
     .c1:focus + span {
-      border-color: inherit;
-      border-width: 1px;
+      border: 1px solid #E52630;
     }
 
     <label

From 7ae97cdfdf4e7018d01840449f7fb7b81e8c5c20 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 27 Jan 2025 14:53:44 +0000
Subject: [PATCH 12/20] adding label colour

---
 src/components/Atoms/Checkbox/Checkbox.js | 10 ++++++++--
 src/components/Atoms/Checkbox/Checkbox.md |  1 +
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index 6dd57f2c0..3fec4da90 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -10,6 +10,7 @@ const Label = styled.label`
   display: flex;
   ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
   margin-bottom: 8px;
+  ${({ labelColour }) => labelColour && `color: ${labelColour};`}
 `;
 
 const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
@@ -43,13 +44,17 @@ const Checkbox = React.forwardRef(({
   label = undefined,
   value,
   children = undefined,
+  labelColour,
   checkboxBg,
   checkboxBorder,
   checkboxBgChecked,
   checkboxBorderChecked,
   ...rest
 }, ref) => (
-  <Label hasLabelAsString={!!label}>
+  <Label
+    hasLabelAsString={!!label}
+    labelColour={labelColour}
+  >
     <StyledCheckboxInput
       {...rest}
       value={value}
@@ -67,8 +72,9 @@ const Checkbox = React.forwardRef(({
 Checkbox.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
-  label: PropTypes.string,
   children: PropTypes.node,
+  label: PropTypes.string,
+  labelColour: PropTypes.string,
   checkboxBg: PropTypes.string,
   checkboxBorder: PropTypes.string,
   checkboxBgChecked: PropTypes.string,
diff --git a/src/components/Atoms/Checkbox/Checkbox.md b/src/components/Atoms/Checkbox/Checkbox.md
index da49d383e..3e82e290f 100644
--- a/src/components/Atoms/Checkbox/Checkbox.md
+++ b/src/components/Atoms/Checkbox/Checkbox.md
@@ -28,6 +28,7 @@ const LongLabel = () => (
         name="sport"
         value="Tennis"
         label="Tennis (with wacky styling to test props)"
+        labelColour="pink"
         checkboxBg="red"
         checkboxBorder="blue"
         checkboxBgChecked="green"

From 25dcc1bf9b131858f9dd45a7f63f9cac657bea38 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 27 Jan 2025 15:02:13 +0000
Subject: [PATCH 13/20] cleanup

---
 src/components/Atoms/Checkbox/Checkbox.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.md b/src/components/Atoms/Checkbox/Checkbox.md
index 3e82e290f..0dec347f7 100644
--- a/src/components/Atoms/Checkbox/Checkbox.md
+++ b/src/components/Atoms/Checkbox/Checkbox.md
@@ -24,9 +24,13 @@ const LongLabel = () => (
 
 <>
     <p>List of checkboxes</p>
+    <Checkbox name="sport" value="Tennis" label="Tennis" />
+    <Checkbox name="sport" value="Basketball" label="Basketball" />
+    <Checkbox name="sport" value="Cycling" label="Cycling" />
+    <Checkbox name="sport" value="Football" label="Football" />
     <Checkbox
         name="sport"
-        value="Tennis"
+        value="Football"
         label="Tennis (with wacky styling to test props)"
         labelColour="pink"
         checkboxBg="red"
@@ -34,9 +38,6 @@ const LongLabel = () => (
         checkboxBgChecked="green"
         checkboxBorderChecked="red"
     />
-    <Checkbox name="sport" value="Basketball" label="Basketball" />
-    <Checkbox name="sport" value="Cycling" label="Cycling" />
-    <Checkbox name="sport" value="Football" label="Football" />
     <br/>
     <p>A checkbox with a long label containing links</p>
     <Checkbox name="node_label" value="node_label">

From 7fa48350faff8be0082094488d3e166f34a5556d Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 27 Jan 2025 17:49:59 +0000
Subject: [PATCH 14/20] Empty commit to trigger build


From 47d6f1493c87c3c7c36232ee5e5c7ac92a20a2c2 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 27 Jan 2025 18:01:29 +0000
Subject: [PATCH 15/20] trying to fix tests

---
 src/components/Atoms/Checkbox/Checkbox.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.md b/src/components/Atoms/Checkbox/Checkbox.md
index 0dec347f7..d08b154f8 100644
--- a/src/components/Atoms/Checkbox/Checkbox.md
+++ b/src/components/Atoms/Checkbox/Checkbox.md
@@ -27,7 +27,6 @@ const LongLabel = () => (
     <Checkbox name="sport" value="Tennis" label="Tennis" />
     <Checkbox name="sport" value="Basketball" label="Basketball" />
     <Checkbox name="sport" value="Cycling" label="Cycling" />
-    <Checkbox name="sport" value="Football" label="Football" />
     <Checkbox
         name="sport"
         value="Football"

From f7168c11f134d6ddc459de104d532fdd6930a986 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 27 Jan 2025 18:08:46 +0000
Subject: [PATCH 16/20] cleanup

---
 src/components/Atoms/Checkbox/Checkbox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index 3fec4da90..61b887698 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -14,7 +14,7 @@ const Label = styled.label`
 `;
 
 const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
-  /* This input is not visible as it is set to opacity: 0 */
+  /* This input is not visible */
   width: 0;
   height: 0;
   margin: 0;

From 7d0bf4c06f83c526056d987b97a48269b9531148 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Mon, 27 Jan 2025 18:09:59 +0000
Subject: [PATCH 17/20] add comments

---
 src/components/Atoms/Checkbox/Checkbox.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index 61b887698..5e1328b8f 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -18,7 +18,7 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
   width: 0;
   height: 0;
   margin: 0;
-  /* This span is actually the visual square checkbox you see */
+  /* This span is actually the visual square Checkbox you see */
   + span {
     margin-right: 12px;
     width: 24px;
@@ -29,12 +29,14 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
     float: left;
     flex-shrink: 0;
   }
+  /* Visual checkbox when ticked */
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;
     background-size: contain;
     background-color: ${({ theme, checkboxBgChecked }) => (checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('white'))};
     border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('grey'))};
   }
+  /* Visual checkbox when focused */
   :focus + span {
     border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
   }

From 57f37d72b00a86e72596129476308a6a6e5cd769 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Tue, 28 Jan 2025 17:24:20 +0000
Subject: [PATCH 18/20] fix red

---
 src/components/Atoms/Checkbox/Checkbox.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.js b/src/components/Atoms/Checkbox/Checkbox.js
index 5e1328b8f..d545754d6 100644
--- a/src/components/Atoms/Checkbox/Checkbox.js
+++ b/src/components/Atoms/Checkbox/Checkbox.js
@@ -33,8 +33,8 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;
     background-size: contain;
-    background-color: ${({ theme, checkboxBgChecked }) => (checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('white'))};
-    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('grey'))};
+    background-color: ${({ theme, checkboxBgChecked }) => (checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('red'))};
+    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
   }
   /* Visual checkbox when focused */
   :focus + span {

From 77a10b6f0b9916d636968df7a934873d20142ac4 Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Tue, 28 Jan 2025 17:25:37 +0000
Subject: [PATCH 19/20] snaps

---
 src/components/Atoms/Checkbox/Checkbox.test.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.test.js b/src/components/Atoms/Checkbox/Checkbox.test.js
index 2e68da108..cacb9292b 100644
--- a/src/components/Atoms/Checkbox/Checkbox.test.js
+++ b/src/components/Atoms/Checkbox/Checkbox.test.js
@@ -56,8 +56,8 @@ it("renders correctly", () => {
     .c1:checked + span {
       background: url(mock.asset) no-repeat center;
       background-size: contain;
-      background-color: #FFFFFF;
-      border: 1px solid #969598;
+      background-color: #E52630;
+      border: 1px solid #E52630;
     }
 
     .c1:focus + span {
@@ -125,8 +125,8 @@ it("renders correctly", () => {
     .c1:checked + span {
       background: url(mock.asset) no-repeat center;
       background-size: contain;
-      background-color: #FFFFFF;
-      border: 1px solid #969598;
+      background-color: #E52630;
+      border: 1px solid #E52630;
     }
 
     .c1:focus + span {

From 65ddb8e801b4aef8b44611bd4880fb8643874d9c Mon Sep 17 00:00:00 2001
From: Micheal O'Donovan <mikeodonovan3@gmail.com>
Date: Fri, 31 Jan 2025 10:50:33 +0000
Subject: [PATCH 20/20] fix " to ' mess

---
 src/components/Atoms/Checkbox/Checkbox.test.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Atoms/Checkbox/Checkbox.test.js b/src/components/Atoms/Checkbox/Checkbox.test.js
index cacb9292b..f91ae674f 100644
--- a/src/components/Atoms/Checkbox/Checkbox.test.js
+++ b/src/components/Atoms/Checkbox/Checkbox.test.js
@@ -1,9 +1,9 @@
-import React from "react";
-import "jest-styled-components";
-import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
-import Checkbox from "./Checkbox";
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import Checkbox from './Checkbox';
 
-it("renders correctly", () => {
+it('renders correctly', () => {
   const tree = renderWithTheme(
     <>
       <Checkbox name="sport" value="Tenis" label="Tenis" />