From 3cebeec24adda35fe5206b317e84f1e4aa9fc0fe Mon Sep 17 00:00:00 2001
From: Aanand Prasad <aanand.prasad@gmail.com>
Date: Wed, 31 Jan 2018 11:31:18 +0000
Subject: [PATCH] feat(ui): convert Checkbox to a styled component

---
 packages/ui/src/atoms/Checkbox.js         | 109 ++++++++++++++++++----
 packages/ui/src/atoms/Checkbox.local.scss |  97 -------------------
 2 files changed, 89 insertions(+), 117 deletions(-)
 delete mode 100644 packages/ui/src/atoms/Checkbox.local.scss

diff --git a/packages/ui/src/atoms/Checkbox.js b/packages/ui/src/atoms/Checkbox.js
index 987849bf2..ae1f4cfcc 100644
--- a/packages/ui/src/atoms/Checkbox.js
+++ b/packages/ui/src/atoms/Checkbox.js
@@ -1,6 +1,76 @@
 import React from 'react'
-import classnames from 'classnames'
-import classes from './Checkbox.local.scss'
+import styled, { keyframes } from 'styled-components'
+
+const checking = keyframes`
+  0% {
+    transform: scale(0.8);
+  }
+  20% {
+    transform: scale(1.2);
+  }
+  80% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1);
+  }
+`
+
+const Root = styled.label`
+  align-items: center;
+  display: ${props => (props.inline ? 'inline-flex' : 'flex')};
+  font-family: var(--font-author);
+  font-size: 1em;
+  font-style: italic;
+  letter-spacing: 1px;
+  transition: all 2s;
+
+  &:not(:last-child) {
+    margin-right: ${props => (props.inline ? '2.7em' : '0')};
+    margin-bottom: ${props => (props.inline ? '0' : '0.5rem')};
+  }
+
+  & input {
+    display: none;
+    margin-right: 0.25rem;
+  }
+
+  & span {
+    border-bottom: 1px solid transparent;
+    font-size: 1.1em;
+    transition: color 0.5s;
+  }
+
+  &:hover span {
+    color: var(--color-primary);
+  }
+
+  & span::before {
+    --local-border-size: 3px;
+    --local-borderTwo-size: 1px;
+
+    content: ' ';
+    display: inline-block;
+    vertical-align: middle;
+
+    width: 0.7em;
+    height: 0.7em;
+    margin-right: 0.5em;
+
+    background: ${props => (props.checked ? 'currentcolor' : 'transparent')};
+    border: var(--local-border-size) solid white;
+    box-shadow: 0 0 0 var(--local-borderTwo-size) currentcolor;
+
+    transition: border 0.5s ease, background-size 0.3s ease;
+  }
+
+  &:hover span::before {
+    animation: ${checking} 0.5s;
+
+    background: var(--color-primary);
+    box-shadow: 0 0 0 var(--local-borderTwo-size) var(--color-primary);
+  }
+`
 
 const Checkbox = ({
   inline,
@@ -10,23 +80,22 @@ const Checkbox = ({
   checked,
   required,
   onChange,
-}) => (
-  <label
-    className={classnames(classes.root, {
-      [classes.inline]: inline,
-    })}
-  >
-    <input
-      checked={checked || false}
-      className={classes.input}
-      name={name}
-      onChange={onChange}
-      required={required}
-      type="checkbox"
-      value={value}
-    />
-    <span>{label}</span>
-  </label>
-)
+}) => {
+  checked = checked || false
+
+  return (
+    <Root checked={checked}>
+      <input
+        checked={checked}
+        name={name}
+        onChange={onChange}
+        required={required}
+        type="checkbox"
+        value={value}
+      />
+      <span>{label}</span>
+    </Root>
+  )
+}
 
 export default Checkbox
diff --git a/packages/ui/src/atoms/Checkbox.local.scss b/packages/ui/src/atoms/Checkbox.local.scss
deleted file mode 100644
index 4822afe1e..000000000
--- a/packages/ui/src/atoms/Checkbox.local.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-.root {
-  align-items: center;
-  display: flex;
-  font-family: var(--font-author);
-  font-size: 1em;
-  font-style: italic;
-  letter-spacing: 1px;
-  transition: all 2s;
-}
-
-.root.inline {
-  display: inline-flex;
-}
-
-.root.inline:not(:last-child) {
-  margin-right: 2.7em;
-}
-
-.root:not(.inline):not(:last-child) {
-  margin-bottom: 0.5rem;
-}
-
-.root span {
-  border-bottom: 1px solid transparent;
-  font-size: 1.1em;
-  transition: color 0.5s;
-}
-
-.root .input {
-  display: none;
-  margin-right: 0.25rem;
-}
-
-.root span::before {
-  --local-border-size: 3px;
-  --local-borderTwo-size: 1px;
-
-  border: var(--local-border-size) solid white;
-  box-shadow: 0 0 0 var(--local-borderTwo-size) currentcolor;
-  content: ' ';
-  display: inline-block;
-  height: 0.7em;
-  margin-right: 0.5em;
-  transition: border 0.5s ease, background-size 0.3s ease;
-  vertical-align: middle;
-  width: 0.7em;
-}
-
-.author span {
-  --font-local: var(--font-author);
-
-  font-size: 1.3em;
-  line-height: 1.8;
-}
-
-.root:hover span {
-  color: var(--color-primary);
-}
-
-.root .input:checked:hover {
-  --color-primary: grey;
-}
-
-.root:hover span::before {
-  animation: checking 0.5s;
-  background: var(--color-primary);
-  border: var(--local-border-size) solid white;
-  box-shadow: 0 0 0 var(--local-borderTwo-size) var(--color-primary);
-}
-
-.root input:checked + span {
-  &::before {
-    background: currentcolor;
-    border: var(--local-border-size) solid white;
-    box-shadow: 0 0 0 var(--local-borderTwo-size) currentcolor;
-    transition: border 0.5s ease, background-size 0.3s ease;
-  }
-}
-
-.root input:checked:hover + span::before {
-  background: var(--color-primary);
-}
-
-@keyframes checking {
-  0% {
-    transform: scale(0.8);
-  }
-  20% {
-    transform: scale(1.2);
-  }
-  80% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-- 
GitLab