Add checkbox component

src/atoms/avatar.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 import styled from 'styled-components';
 
-export interface Props extends HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   url: string;
   alt: string;
 }

src/atoms/checkbox.tsx

@@ -0,0 +1,149 @@
+import React, { HTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+interface CheckboxErrorProps {
+  error?: string;
+}
+
+interface CheckboxWrapperProps extends CheckboxErrorProps {
+  disabled?: boolean;
+}
+
+const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
+  display: inline-block;
+  position: relative;
+  height: 24px;
+  padding-left: 0;
+  cursor: ${props => (props.disabled ? 'auto' : 'pointer')};
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &:hover input:not(:disabled) ~ span {
+    border-color: var(--purple, hsl(256, 55%, 43%));
+  }
+
+  span {
+    color: ${props =>
+      props.error
+        ? 'var(--red, hsl(354, 83%, 64%))'
+        : props.disabled
+        ? 'var(--grey, hsl(0, 0%, 85%))'
+        : null};
+    border-color: ${props =>
+      props.error ? 'var(--red, hsl(354, 83%, 64%))' : null};
+  }
+`;
+
+const Label = styled.span`
+  padding-left: 30px;
+  line-height: 24px;
+  vertical-align: middle;
+`;
+
+const Input = styled.input`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+
+  &:checked:not(:disabled) ~ span {
+    background-color: var(--green, hsl(186, 62%, 59%));
+    border-color: hsl(186, 62%, 49%);
+
+    &:after {
+      display: block;
+    }
+  }
+
+  &:checked:disabled ~ span {
+    background-color: var(--grey, hsl(186, 62%, 59%));
+    color: var(--darkGrey, hsl(0, 0%, 48%));
+
+    &:after {
+      display: block;
+    }
+  }
+
+  &:not(:checked):disabled ~ span {
+    background-color: hsl(0, 0%, 96%);
+  }
+
+  &:hover:not(:disabled) {
+    &:checked ~ span {
+      border-color: hsl(186, 62%, 49%);
+    }
+  }
+`;
+
+const Checkmark = styled.span<CheckboxErrorProps>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 2px solid
+    ${props =>
+      props.error
+        ? 'var(--red, hsl(354, 83%, 64%))'
+        : 'var(--grey, hsl(0, 0%, 85%))'};
+  border-radius: 100%;
+  width: 24px;
+  height: 24px;
+  transition-duration: 0.3s;
+
+  &:after {
+    content: '';
+    position: absolute;
+    display: none;
+    top: 3px;
+    left: 6px;
+    width: 5px;
+    height: 9px;
+    border: solid var(--white, hsl(0, 0%, 100%));
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+`;
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  label?: string;
+  checked?: boolean;
+  onChange?: () => {};
+  error?: string;
+  disabled?: boolean;
+}
+
+const Checkbox = (props: Props) => {
+  const {
+    label,
+    value,
+    checked = false,
+    onChange = () => {},
+    error,
+    disabled = false,
+    style,
+    className = '',
+  } = props;
+  return (
+    <CheckboxWrapper
+      error={error}
+      disabled={disabled}
+      style={style}
+      className={className}
+    >
+      <Label>{label}</Label>
+      <Input
+        type="checkbox"
+        name={value}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+      />
+      <Checkmark />
+    </CheckboxWrapper>
+  );
+};
+
+export default Checkbox;

src/index.ts

@@ -6,3 +6,4 @@ export { default as TaikaiLogo } from './ions/taikai-logo';
 
 // Atoms
 export { default as Avatar } from './atoms/avatar';
+export { default as Checkbox } from './atoms/checkbox';

stories/checkbox.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Checkbox } from '../src';
+
+export default {
+  title: 'Design System|Atoms|Checkbox',
+  component: Checkbox,
+};
+
+export const CheckboxComponent = args => <Checkbox {...args} />;
+
+CheckboxComponent.args = {
+  name: 'Checkbox',
+  label: 'ola',
+  checked: true,
+};

test/__snapshots__/checkbox.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox renders 1`] = `
+<DocumentFragment>
+  <label
+    class="sc-gsTCUz fIQQCp"
+  >
+    <span
+      class="sc-dlfnbm jMDpkz"
+    >
+      ola
+    </span>
+    <input
+      checked=""
+      class="sc-hKgILt erBOJf"
+      name="check"
+      type="checkbox"
+    />
+    <span
+      class="sc-eCssSg khPRpK"
+    />
+  </label>
+</DocumentFragment>
+`;

test/checkbox.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Checkbox } from '../src';
+
+describe('Checkbox', () => {
+  it('renders', () => {
+    const { asFragment } = render(
+      <Checkbox value={'check'} label={'ola'} checked={true} />
+    );
+    screen.logTestingPlaygroundURL();
+    expect(asFragment()).toMatchSnapshot();
+  });
+});