Merge pull request #101 from arturbien/feature/menu-checkbox-and-radio

arturbien · web-flow · commit 1b636b582f46 · 2020-02-29T17:06:57.000+01:00
Feature/menu checkbox and radio
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -7,6 +7,7 @@ import { createDisabledTextStyles, createHatchedBackground } from '../common';
 import { padding, fontSizes } from '../common/system';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
 import Cutout from '../Cutout/Cutout';
+import { StyledListItem } from '../ListItem/ListItem';
 
 const checkboxSize = 20;
 
@@ -22,6 +23,11 @@ const StyledLabel = styled.label`
   user-select: none;
   font-size: ${fontSizes.md};
   ${props => props.isDisabled && createDisabledTextStyles()}
+
+  ${StyledListItem} & {
+    margin: 0;
+    height: 100%;
+  }
 `;
 
 const StyledInput = styled.input`
@@ -63,6 +69,21 @@ const StyledFlatCheckbox = styled.div`
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.flatLight : theme.canvas};
 `;
+
+const StyledMenuCheckbox = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.flatLight : theme.canvas};
+  ${sharedCheckboxStyles}
+  width: ${checkboxSize - 4}px;
+  height: ${checkboxSize - 4}px;
+  background: none;
+  border: none;
+  outline: none;
+`;
+
 const CheckmarkIcon = styled.span.attrs(() => ({
   'data-testid': 'checkmarkIcon'
 }))`
@@ -84,15 +105,46 @@ const CheckmarkIcon = styled.span.attrs(() => ({
         isDisabled ? theme.checkmarkDisabled : theme.checkmark};
     border-width: 0 3px 3px 0;
     transform: translate(-50%, -50%) rotate(45deg);
+    
+    ${({ variant, theme, isDisabled }) =>
+      variant === 'menu'
+        ? css`
+            border-color: ${isDisabled ? theme.textDisabled : theme.text};
+            filter: drop-shadow(
+              1px 1px 0px
+                ${isDisabled ? theme.textDisabledShadow : 'transparent'}
+            );
+          `
+        : css`
+            border-color: ${isDisabled
+              ? theme.checkmarkDisabled
+              : theme.checkmark};
+          `}
+  ${StyledListItem}:hover & {
+    ${({ theme, isDisabled, variant }) =>
+      !isDisabled &&
+      variant === 'menu' &&
+      css`
+        border-color: ${theme.textInvert};
+      `};
   }
 `;
 const IndeterminateIcon = styled.span.attrs(() => ({
   'data-testid': 'indeterminateIcon'
 }))`
   display: inline-block;
   position: relative;
-  width: 100%;
-  height: 100%;
+
+  ${({ variant }) =>
+    variant === 'menu'
+      ? css`
+          height: calc(100% - 4px);
+          width: calc(100% - 4px);
+        `
+      : css`
+          width: 100%;
+          height: 100%;
+        `}
   &:after {
     content: '';
     display: block;
@@ -104,12 +156,33 @@ const IndeterminateIcon = styled.span.attrs(() => ({
       createHatchedBackground({
         mainColor: isDisabled ? theme.checkmarkDisabled : theme.checkmark
       })}
-    background-position: -1px -1px, 1px 1px;
-    outline: 1px solid
-      ${({ theme, isDisabled }) => (isDisabled ? theme.material : theme.canvas)};
-    outline-offset: -1px;
+    background-position: 0px 0px, 2px 2px;
+
+    ${({ variant, isDisabled, theme }) =>
+      variant === 'menu' &&
+      css`
+        ${StyledListItem}:hover & {
+          ${createHatchedBackground({
+            mainColor: theme.textInvert
+          })}
+        }
+        filter: drop-shadow(
+          1px 1px 0px ${isDisabled ? theme.textDisabledShadow : 'transparent'}
+        );
+      `};
   }
 `;
+const LabelText = styled.span`
+  display: inline-block;
+  line-height: 1;
+`;
+
+const CheckboxComponents = {
+  flat: StyledFlatCheckbox,
+  default: StyledCheckbox,
+  menu: StyledMenuCheckbox
+};
+
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
   const {
     onChange,
@@ -134,8 +207,8 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     setState(newState);
     if (onChange) onChange(e);
   };
-  const CheckboxComponent =
-    variant === 'flat' ? StyledFlatCheckbox : StyledCheckbox;
+
+  const CheckboxComponent = CheckboxComponents[variant];
 
   let Icon = null;
   if (indeterminate) {
@@ -151,9 +224,9 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
         isDisabled={disabled}
         role='presentation'
       >
-        {Icon && <Icon isDisabled={disabled} />}
+        {Icon && <Icon isDisabled={disabled} variant={variant} />}
       </CheckboxComponent>
-      {label && <span>{label}</span>}
+      {label && <LabelText>{label}</LabelText>}
       <StyledInput
         disabled={disabled}
         onChange={disabled ? undefined : handleChange}
@@ -195,7 +268,7 @@ Checkbox.propTypes = {
   label: propTypes.oneOfType([propTypes.string, propTypes.number]),
   checked: propTypes.bool,
   disabled: propTypes.bool,
-  variant: propTypes.oneOf(['default', 'flat']),
+  variant: propTypes.oneOf(['default', 'flat', 'menu']),
   style: propTypes.shape([propTypes.string, propTypes.number]),
   defaultChecked: propTypes.bool,
   indeterminate: propTypes.bool,
diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
@@ -2,7 +2,15 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from 'styled-components';
 
-import { Checkbox, Fieldset, Button, Cutout } from '..';
+import {
+  Checkbox,
+  Fieldset,
+  Button,
+  Cutout,
+  List,
+  ListItem,
+  Divider
+} from '..';
 
 const StyledCutout = styled(Cutout)`
   background: ${({ theme }) => theme.canvas};
@@ -64,6 +72,42 @@ storiesOf('Checkbox', module)
         </div>
       </StyledCutout>
     ))
+  )
+  .add('menu', () =>
+    React.createElement(() => (
+      <List>
+        <ListItem size='md'>
+          <Checkbox
+            name='useGradient'
+            variant='menu'
+            value='useGradient'
+            label='Use gradient'
+            defaultChecked
+          />
+        </ListItem>
+        <ListItem size='md'>
+          <Checkbox
+            name='thickBrush'
+            variant='menu'
+            defaultChecked={false}
+            value='thickBrush'
+            label='Thick brush'
+            indeterminate
+          />
+        </ListItem>
+        <Divider />
+        <ListItem size='md' disabled>
+          <Checkbox
+            name='autoSave'
+            variant='menu'
+            value='autoSave'
+            checked
+            label='Auto-save'
+            disabled
+          />
+        </ListItem>
+      </List>
+    ))
   );
 
 class ControlledCheckboxGroupExample extends React.Component {
diff --git a/src/components/ListItem/ListItem.js b/src/components/ListItem/ListItem.js
@@ -5,17 +5,20 @@ import styled from 'styled-components';
 import { createDisabledTextStyles } from '../common';
 import { padding, blockSizes } from '../common/system';
 
-const StyledListItem = styled.li`
+export const StyledListItem = styled.li`
   box-sizing: border-box;
 
-  display: block;
+  display: flex;
+  align-items: center;
   position: relative;
   height: ${props => blockSizes[props.size]};
   width: ${props => (props.square ? blockSizes[props.size] : 'auto')};
   padding: 0 ${padding.sm};
 
   white-space: nowrap;
-  text-align: ${props => (props.square ? 'center' : 'left')};
+  justify-content: ${props =>
+    props.square ? 'space-around' : 'space-between'};
+  text-align: center;
   line-height: ${props => blockSizes[props.size]};
   color: ${({ theme }) => theme.text};
   pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')};
diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js
@@ -5,6 +5,7 @@ import styled, { css } from 'styled-components';
 import { createDisabledTextStyles, createFlatBoxStyles } from '../common';
 import { padding, fontSizes } from '../common/system';
 import Cutout from '../Cutout/Cutout';
+import { StyledListItem } from '../ListItem/ListItem';
 
 const radioSize = '20px';
 const StyledLabel = styled.label`
@@ -19,6 +20,11 @@ const StyledLabel = styled.label`
   user-select: none;
   font-size: ${fontSizes.md};
   ${props => props.isDisabled && createDisabledTextStyles()}
+
+  ${StyledListItem} & {
+    margin: 0;
+    height: 100%;
+  }
 `;
 
 const StyledInput = styled.input`
@@ -75,6 +81,15 @@ const StyledFlatCheckbox = styled.div`
     border-radius: 50%;
   }
 `;
+const StyledMenuCheckbox = styled.div`
+  ${sharedCheckboxStyles}
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  background: none;
+`;
 const Icon = styled.span.attrs(() => ({
   'data-testid': 'checkmarkIcon'
 }))`
@@ -87,10 +102,37 @@ const Icon = styled.span.attrs(() => ({
   height: 6px;
   transform: translate(-50%, -50%);
   border-radius: 50%;
-  background: ${({ theme, isDisabled }) =>
-    isDisabled ? theme.checkmarkDisabled : theme.checkmark};
+  ${({ variant, theme, isDisabled }) =>
+    variant === 'menu'
+      ? css`
+          background: ${isDisabled ? theme.textDisabled : theme.text};
+          filter: drop-shadow(
+            1px 1px 0px ${isDisabled ? theme.textDisabledShadow : 'transparent'}
+          );
+        `
+      : css`
+          background: ${isDisabled ? theme.checkmarkDisabled : theme.checkmark};
+        `}
+  ${StyledListItem}:hover & {
+    ${({ theme, isDisabled, variant }) =>
+      !isDisabled &&
+      variant === 'menu' &&
+      css`
+        background: ${theme.textInvert};
+      `};
+  }
+`;
+const LabelText = styled.span`
+  display: inline-block;
+  line-height: 1;
 `;
 
+const CheckboxComponents = {
+  flat: StyledFlatCheckbox,
+  default: StyledCheckbox,
+  menu: StyledMenuCheckbox
+};
+
 const Radio = React.forwardRef(function Radio(props, ref) {
   const {
     onChange,
@@ -104,8 +146,8 @@ const Radio = React.forwardRef(function Radio(props, ref) {
     style,
     ...otherProps
   } = props;
-  const CheckboxComponent =
-    variant === 'flat' ? StyledFlatCheckbox : StyledCheckbox;
+
+  const CheckboxComponent = CheckboxComponents[variant];
 
   return (
     <StyledLabel isDisabled={disabled} className={className} style={style}>
@@ -114,9 +156,9 @@ const Radio = React.forwardRef(function Radio(props, ref) {
         isDisabled={disabled}
         role='presentation'
       >
-        {checked && <Icon isDisabled={disabled} />}
+        {checked && <Icon isDisabled={disabled} variant={variant} />}
       </CheckboxComponent>
-      {label && <span>{label}</span>}
+      {label && <LabelText>{label}</LabelText>}
       <StyledInput
         disabled={disabled}
         onChange={disabled ? undefined : onChange}
@@ -155,7 +197,7 @@ Radio.propTypes = {
   label: propTypes.oneOfType([propTypes.string, propTypes.number]),
   checked: propTypes.bool,
   disabled: propTypes.bool,
-  variant: propTypes.oneOf(['default', 'flat']),
+  variant: propTypes.oneOf(['default', 'flat', 'menu']),
   style: propTypes.shape([propTypes.string, propTypes.number]),
   className: propTypes.string
 };
diff --git a/src/components/Radio/Radio.stories.js b/src/components/Radio/Radio.stories.js
