Merge pull request #7816 from marcellamalune/checkbox

Migrate Checkbox from styled component to ChakraUI

Author: pettinarip

src/components/Checkbox.tsx

@@ -1,58 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
-
-const CheckboxContainer = styled.div`
-  display: inline-block;
-  vertical-align: middle;
-`
-
-const HiddenCheckbox = styled.input`
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-`
-
-const StyledCheckbox = styled.div<{
-  size: number
-  checked: boolean
-}>`
-  display: inline-block;
-  width: ${(props) => props.size}rem;
-  height: ${(props) => props.size}rem;
-  min-width: ${(props) => props.size}rem;
-  background: ${(props) =>
-    props.checked
-      ? props.theme.colors.primary400
-      : props.theme.colors.background};
-  border: 1px solid ${(props) => props.theme.colors.black50};
-  border-radius: 3px;
-  transition: all 150ms;
-  &:hover {
-    box-shadow: ${(props) => props.theme.colors.tableItemBoxShadow};
-    border: 1px solid ${(props) => props.theme.colors.primary600};
-    transition: transform 0.1s;
-    transform: scale(1.02);
-  }
-`
-
-const Icon = styled.svg<{
-  checked: boolean
-}>`
-  fill: none;
-  stroke: ${(props) => props.theme.colors.white};
-  stroke-width: 2px;
-  visibility: ${(props) => (props.checked ? "visible" : "hidden")};
-`
-
-const Label = styled.span`
-  margin-left: 0.5rem;
-`
+import { Box, VisuallyHiddenInput, Text } from "@chakra-ui/react"
 
 export interface IProps {
   children?: React.ReactNode
@@ -76,20 +23,56 @@ const Checkbox: React.FC<IProps> = ({
     }
   }
   return (
-    <CheckboxContainer className={className} onClick={handleClick}>
-      <HiddenCheckbox type="checkbox" checked={checked} readOnly {...rest} />
-      <StyledCheckbox
-        aria-hidden="true"
+    <Box
+      display="inline-block"
+      verticalAlign="middle"
+      className={className}
+      onClick={handleClick}
+    >
+      <VisuallyHiddenInput
+        type="checkbox"
         checked={checked}
+        readOnly
+        {...rest}
+      />
+      <Box
+        aria-hidden={true}
         className="styled-checkbox"
-        size={size}
+        display="inline-block"
+        w={`${size}rem`}
+        h={`${size}rem`}
+        minW={`${size}rem`}
+        bg={`${checked ? "primary400" : "background"}`}
+        border="1px"
+        borderStyle="solid"
+        borderColor="black50"
+        borderRadius="3px"
+        transition="all 150ms"
+        _hover={{
+          boxShadow: "tableItemBoxShadow",
+          border: "1px",
+          borderStyle: "solid",
+          borderColor: "primary600",
+          transition: "transform 0.1s",
+          transform: "scale(1.02)",
+        }}
       >
-        <Icon checked={checked} viewBox="0 0 24 24">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="white"
+          strokeWidth="2px"
+          visibility={`${checked ? "visible" : "hidden"}`}
+        >
           <polyline points="20 6 9 17 4 12" />
-        </Icon>
-      </StyledCheckbox>
-      {children && <Label>{children}</Label>}
-    </CheckboxContainer>
+        </svg>
+      </Box>
+      {children && (
+        <Text as="span" ml={2}>
+          {children}
+        </Text>
+      )}
+    </Box>
   )
 }