Merge pull request #104 from joien1/checkbox-variants

Add Checkbox variants -> v1-release
Headstorm · Aug 11, 2020 · 6945c1e · 6945c1e
2 parents 186f441 + 977dfd3
commit 6945c1e
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 39 deletions.
diff --git a/packages/hs-react-ui/package.json b/packages/hs-react-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@headstorm/hs-react-ui",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "description": "Robust UI library written in React. It's DRY, with CSS in JS; stirred, not shaken.",
   "author": "Headstorm LLC",
   "homepage": "http://headstorm.com",

diff --git a/packages/hs-react-ui/src/components/Checkbox/Checkbox.stories.tsx b/packages/hs-react-ui/src/components/Checkbox/Checkbox.stories.tsx
@@ -3,6 +3,7 @@ import { select, text, boolean } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 
 import Checkbox, { CheckboxTypes } from './Checkbox';
+import variants from '../../enums/variants';
 
 const design = {
   type: 'figma',
@@ -12,13 +13,14 @@ const design = {
 storiesOf('Checkbox', module).add(
   'Default',
   () => {
-    const [checked, setChecked] = useState(boolean('Checked', false));
+    const [checked, setChecked] = useState(boolean('Checked', true));
 
     return (
       <Checkbox
         checkboxType={select('CheckboxType', CheckboxTypes, CheckboxTypes.check)}
         checked={checked}
         onClick={() => setChecked(!checked)}
+        variant={select('variant', variants, variants.outline)}
       >
         {text('Children', 'The label for the checkbox')}
       </Checkbox>

diff --git a/packages/hs-react-ui/src/components/Checkbox/Checkbox.tsx b/packages/hs-react-ui/src/components/Checkbox/Checkbox.tsx
@@ -6,6 +6,8 @@ import { mdiCheck, mdiCheckboxBlank, mdiClose, mdiMinus } from '@mdi/js';
 import { Div, Input as InputElement, Label as LabelElement } from '../../htmlElements';
 import { SubcomponentPropsType } from '../commonTypes';
 import { useColors } from '../../context';
+import variants from '../../enums/variants';
+import { darken } from 'polished';
 
 export enum CheckboxTypes {
   fill = 'fill',
@@ -37,6 +39,8 @@ export const Label = styled(LabelElement)`
       display: flex;
       align-items: center;
       cursor: pointer;
+      height: 2em;
+      font-size: 1em;
     
       ${Input}:focus + & {
         box-shadow: 0 0 0 3px ${grayXlight};
@@ -46,18 +50,31 @@ export const Label = styled(LabelElement)`
 `;
 
 export const Box = styled(Div)`
-  ${() => {
-    const { grayLight } = useColors();
+  ${({ variant, checked, checkboxType }) => {
+    const { grayLight, success, destructive, background } = useColors();
+    let color = grayLight;
+    if (checkboxType === CheckboxTypes.check && checked) color = success;
+    if (checkboxType === CheckboxTypes.cross && checked) color = destructive;
+    const backgroundColor = variant === variants.fill && checked ? color : background;
+
     return `
-      border: 1px solid ${grayLight};
+      ${
+        variant === variants.outline || variant === variants.fill
+          ? `border: 1px solid ${color};`
+          : ''
+      } 
+      background-color: ${backgroundColor};
       border-radius: 2px;
-      width: 0.75rem;
-      height: 0.75rem;
+      width: 1rem;
+      height: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: visible;
       margin-right: 0.5rem;
+      &:hover {
+        background-color: ${darken(0.05, backgroundColor)}
+      }
     `;
   }}
 `;
@@ -67,53 +84,47 @@ export const CheckboxContainer = styled.div`
   vertical-align: middle;
 `;
 
-export const StyledIcon = styled(Icon)`
+export const BaseIcon = styled(Icon)`
   overflow: visible;
-`;
+  height: 1rem;
+  width: 1rem;
+` as string & StyledComponentBase<any, {}>;
 
-const CheckIcon = styled(StyledIcon)`
-  ${() => {
-    const { success } = useColors();
+const CheckIcon = styled(BaseIcon)`
+  ${({ variant }) => {
+    const { success, background } = useColors();
     return `
-      color: ${success};
-      height: 2rem;
-      width: 1.4rem;
-      margin: 0 0 0.1rem 0.35rem;
+      color: ${variant === variants.fill ? background : success};
     `;
   }}
 `;
 
-const CrossIcon = styled(StyledIcon)`
-  ${() => {
-    const { destructive } = useColors();
+const CrossIcon = styled(BaseIcon)`
+  ${({ variant }) => {
+    const { destructive, background } = useColors();
     return `
-      color: ${destructive};
-      height: 1rem;
-      width: 1rem;
+      color: ${variant === variants.fill ? background : destructive};
     `;
   }}
 `;
 
-const DefaultIcon = styled(StyledIcon)`
+const DefaultIcon = styled(BaseIcon)`
   ${() => {
-    const { grayMedium } = useColors();
+    const { grayLight } = useColors();
     return `
-      color: ${grayMedium};
-      height: 0.7rem;
-      width: 0.7rem;
+      color: ${grayLight}
     `;
   }}
 `;
 
-const NeutralIcon = styled(StyledIcon)`
-  ${() => {
-    const { grayMedium } = useColors();
+const NeutralIcon = styled(BaseIcon)`
+  ${({ variant }) => {
+    const { grayMedium, background } = useColors();
+    const color = variant === variants.fill ? background : grayMedium;
     return `
-      color: ${grayMedium};
-      height: 0.65rem;
-      width: 0.65rem;
+      color: ${color};
       path {
-        stroke: ${grayMedium};
+        stroke: ${color};
         stroke-width: 2px;
       }
     `;
@@ -125,13 +136,16 @@ export interface CheckboxProps {
   StyledCheckboxContainer?: string & StyledComponentBase<any, {}>;
   StyledBox?: string & StyledComponentBase<any, {}>;
   StyledInput?: string & StyledComponentBase<any, {}>;
+  StyledIcon?: string & StyledComponentBase<any, {}>;
 
   labelProps?: SubcomponentPropsType;
   checkboxContainerProps?: SubcomponentPropsType;
   boxProps?: SubcomponentPropsType;
   inputProps?: SubcomponentPropsType;
+  iconProps?: SubcomponentPropsType;
 
   checkboxType?: CheckboxTypes;
+  variant?: variants;
   children?: React.ReactNode;
   checked?: boolean;
   onClick: (event: React.MouseEvent) => void;
@@ -158,25 +172,35 @@ const Checkbox = ({
   StyledCheckboxContainer = CheckboxContainer,
   StyledBox = Box,
   StyledInput = Input,
+  StyledIcon,
 
   labelProps = {},
   checkboxContainerProps = {},
   boxProps = {},
   inputProps = {},
+  iconProps = {},
 
-  checkboxType = CheckboxTypes.default,
+  checkboxType = CheckboxTypes.check,
+  variant = variants.fill,
   checked = false,
   children,
 
   onClick,
 }: CheckboxProps) => {
   const iconPath = iconPaths[checkboxType];
-  const IconComponent = iconComponents[checkboxType];
+  const IconComponent = StyledIcon || iconComponents[checkboxType];
   return (
     <StyledLabel data-test-id="hsui-Checkbox" {...labelProps}>
       <StyledCheckboxContainer {...checkboxContainerProps}>
-        <StyledBox {...boxProps}>
-          {checked ? <IconComponent data-test-id="hsui-Checkbox-Icon" path={iconPath} /> : null}
+        <StyledBox checkboxType={checkboxType} checked={checked} variant={variant} {...boxProps}>
+          {checked ? (
+            <IconComponent
+              data-test-id="hsui-Checkbox-Icon"
+              path={iconPath}
+              variant={variant}
+              {...iconProps}
+            />
+          ) : null}
         </StyledBox>
         <StyledInput
           data-test-id="hsui-Checkbox-Input"
@@ -195,4 +219,8 @@ Checkbox.Box = Box;
 Checkbox.Input = Input;
 Checkbox.Container = CheckboxContainer;
 Checkbox.Types = CheckboxTypes;
+Checkbox.CheckIcon = CheckIcon;
+Checkbox.CrossIcon = CrossIcon;
+Checkbox.NeutralIcon = NeutralIcon;
+Checkbox.FillIcon = DefaultIcon;
 export default Checkbox;
diff --git a/packages/hs-react-ui/src/components/Checkbox/__tests__/Checkbox.test.tsx b/packages/hs-react-ui/src/components/Checkbox/__tests__/Checkbox.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent, waitFor, configure } from '@testing-library/react';
 
-import Checkbox, { CheckboxTypes } from '../Checkbox';
+import Checkbox from '../Checkbox';
 
 configure({ testIdAttribute: 'data-test-id' });