Modified Checkbox to accept theming

GTBitsOfGood · Mar 6, 2022 · 7caa18c · 7caa18c
1 parent a670b8a
commit 7caa18c
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 41 deletions.
diff --git a/component-library/src/components/Checkbox/Checkbox.jsx b/component-library/src/components/Checkbox/Checkbox.jsx
@@ -1,44 +1,150 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import './checkbox.css'
-
- const Checkbox = ({ label, isDisabled, isIndeterminate, hasLabel, onChange, ...props}) => {
-    const classes = "checkbox" + (isDisabled ? "-disabled" : "") + (isIndeterminate ? "-indeterminate" : "") + (hasLabel ? "-hasLabel" : "")
-    return (
-        <label className="container">
-          <input 
-            id="checkbox" 
-            className={classes} 
-            type="checkbox" 
-            disabled={isDisabled} 
-            ref={(el) => {
-              if (el) {
-                el.indeterminate = isIndeterminate;
-              }
-            }}
-            onChange={onChange} 
-            {...props}
+import styled, { css } from 'styled-components';
+import { variant as styledVariant } from 'styled-system';
+import theme from '../../theme';
+import { get } from '../../utils/utils';
+import { COMMON } from '../../utils/constants';
+
+const verticalStyle = css`
+  display: block;
+  padding-top: 10px;
+  padding-bottom: 10px;
+`;
+
+const LabelBase = styled.label`
+  ${get('typography.checkbox')}
+  color: ${get('colors.text.dark.main')};
+
+  position: relative;
+  cursor: pointer;
+
+  ${(props) => props.vertical && verticalStyle}
+
+  & input:checked ~ span {
+    ${styledVariant({
+      prop: 'error',
+      scale: 'checkbox.checked',
+    })};
+    border-radius: 3px;
+    display: block;s
+  }
+
+  & input:checked ~ span svg {
+    display: inline-block;
+  }
+
+  ${COMMON};
+`;
+
+const InputBase = styled.input`
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+`;
+
+const CheckboxBase = styled.span`
+  position: absolute;
+  top: ${(props) => (props.vertical ? '9px' : '0')};
+  left: 0;
+  height: 16px;
+  width: 16px;
+  border: ${get('checkbox.border')};
+  border-radius: 4px;
+  &::after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+  & svg {
+    position: absolute;
+    top: 4px;
+    left: 2.2px;
+    height: 10px;
+    display: none;
+  }
+  &[disabled] {
+    ${get('checkbox.disabled')};
+  }
+`;
+
+const StyledSVG = styled.svg`
+  &[disabled] {
+    stroke: ${get('colors.lightGrey')};
+  }
+`
+
+const Checkbox = ({
+  checked,
+  children,
+  defaultChecked,
+  disabled,
+  id,
+  intermediate,
+  name,
+  onChange,
+  theme: propTheme,
+  value,
+  vertical,
+  ...props
+}) => (
+  <LabelBase
+    htmlFor={id}
+    disabled={disabled}
+    theme={propTheme}
+    vertical={vertical}
+    {...props}
+  >
+    {children}
+    <InputBase
+      checked={checked}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      id={id}
+      name={name}
+      onChange={onChange}
+      type="checkbox"
+      value={value}
+    />
+    <CheckboxBase disabled={disabled} theme={propTheme} vertical={vertical}>
+      {intermediate ? 
+        <svg width="11" height="3" viewBox="0 0 11 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path 
+            d="M1.5 1.56165H9.5" 
+            stroke="white"
+            stroke-width="1.5" 
+            stroke-linecap="round"
           />
-          <span className="checkmark"></span>
-          {hasLabel && <span className="labelText">{label}</span>}
-        </label>
-      );
-};
+        </svg> : 
+       <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+         <path 
+            d="M1 3.81165L4.5 7.31165L11 0.811646" 
+            stroke="white" 
+            stroke-width="1.5" 
+            stroke-linecap="round" 
+            stroke-linejoin="round"
+          />
+       </svg>
+      }
+    </CheckboxBase>
+  </LabelBase>
+);
+
+Checkbox.defaultProps = { theme };
 
 Checkbox.propTypes = {
-  label: PropTypes.string,
-  hasLabel: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isIndeterminate: PropTypes.bool,
-  onChange: PropTypes.func,  
-}
-
-Checkbox.defaultProps = {
-  label: "Label",
-  hasLabel: false,
-  isDisabled: false,
-  isIndeterminate: false,
-  onChange: undefined,
-}
-
-export default Checkbox;
+  checked: PropTypes.bool,
+  children: PropTypes.node,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  theme: PropTypes.object,
+  value: PropTypes.any,
+  vertical: PropTypes.bool,
+  ...COMMON.propTypes,
+};
+
+export default Checkbox;
diff --git a/component-library/src/components/Checkbox/index.js b/component-library/src/components/Checkbox/index.js
@@ -0,0 +1,3 @@
+import Checkbox from "./Checkbox";
+
+export default Checkbox;
diff --git a/component-library/src/stories/Checkbox.stories.jsx b/component-library/src/stories/Checkbox.stories.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
-import Checkbox from '../components/Checkbox/Checkbox';
+import { default as Checkbox } from '../components/Checkbox';
 import { withDesign } from 'storybook-addon-designs'
 
 export default {
     title: 'Components/Checkbox',
     component: Checkbox,
     argTypes: {
-        label: {
+        children: {
             type: { 
               summary: 'string', 
               detail: 'checkbox label'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Checkbox from "./Checkbox";

		export default Checkbox;