fix(CheckboxE): Fix disabled, unchecked styling

Previously a disabled, unchecked CheckboxE was rendering exactly the same as a checked one.
Royal-Navy · Feb 8, 2022 · 4ebed3b · 4ebed3b
1 parent 1fa60d9
commit 4ebed3b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/packages/react-component-library/src/components/CheckboxE/CheckboxE.stories.tsx b/packages/react-component-library/src/components/CheckboxE/CheckboxE.stories.tsx
@@ -27,13 +27,31 @@ Default.args = {
   name: 'default',
 }
 
-export const Disabled = Template.bind({})
-Disabled.args = {
+export const Checked = Template.bind({})
+Checked.args = {
   id: undefined,
+  defaultChecked: true,
+  label: 'Checked',
+  name: 'checked',
+}
+
+export const DisabledUnchecked = Template.bind({})
+DisabledUnchecked.storyName = 'Disabled, unchecked'
+DisabledUnchecked.args = {
+  id: undefined,
+  isDisabled: true,
+  label: 'Disabled, unchecked',
+  name: 'disabled',
+}
+
+export const DisabledChecked = Template.bind({})
+DisabledChecked.storyName = 'Disabled, checked'
+DisabledChecked.args = {
+  id: undefined,
+  defaultChecked: true,
   isDisabled: true,
-  label: 'Disabled checkbox',
+  label: 'Disabled, checked',
   name: 'disabled',
-  checked: true,
 }
 
 export const Invalid = Template.bind({})

diff --git a/packages/react-component-library/src/components/CheckboxE/partials/StyledCheckmark.tsx b/packages/react-component-library/src/components/CheckboxE/partials/StyledCheckmark.tsx
@@ -25,6 +25,7 @@ export const StyledCheckmark = styled.div`
 
   &::after {
     content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPgogICAgPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMywgNCkiIGQ9Ik04LjgyMiAwYzEuMDUtLjAyNyAxLjU3NCAxLjMwNC44MjcgMi4wOEw0LjI5OCA3Ljc0YS44My44MyAwIDAgMS0xLjIwNyAwTC4zNzYgNC44NTVDLS43NTIgMy43MTguOTE0IDEuOTU2IDEuOTkgMy4xNDlsMS41MDggMS41OTVjLjEwNS4xMS4yODguMTEuNDA3IDBsNC4xMy00LjM3QTEuMSAxLjEgMCAwIDEgOC44MjMgMHoiCiAgICAgICAgICBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg==);
+    display: none;
     border-radius: 2px;
     color: ${color('neutral', 'white')};
   }
@@ -47,11 +48,15 @@ export const StyledCheckmark = styled.div`
   }
 
   ${StyledCheckbox} input:disabled ~ & {
-    background-color: ${color('neutral', '200')};
+    background-color: ${color('neutral', '000')};
     border-color: ${color('neutral', '200')};
 
     &::before {
       box-shadow: none;
     }
   }
+
+  ${StyledCheckbox} input:disabled:checked ~ & {
+    background-color: ${color('neutral', '200')};
+  }
 `