feat(checkbox): Added scale (#68)

* feat(checkbox): Added scale

* chore(checkbox): Renamed function

Co-authored-by: RabbitDoge <72658581+RabbitDoge@users.noreply.github.com>

src/components/Checkbox/index.stories.tsx

@@ -9,8 +9,13 @@ export default {
 
 export const Default: React.FC = () => {
   return (
-    <div>
-      <Checkbox />
-    </div>
+    <>
+      <div style={{ marginBottom: "32px" }}>
+        <Checkbox />
+      </div>
+      <div>
+        <Checkbox scale="sm" />
+      </div>
+    </>
   );
 };

src/components/Checkbox/index.tsx

@@ -1,13 +1,24 @@
 import styled from "styled-components";
+import { CheckboxProps, scales } from "./types";
 
-const Checkbox = styled.input.attrs({ type: "checkbox" })`
+const getScale = ({ scale }: CheckboxProps) => {
+  switch (scale) {
+    case scales.SM:
+      return "24px";
+    case scales.MD:
+    default:
+      return "32px";
+  }
+};
+
+const Checkbox = styled.input.attrs({ type: "checkbox" })<CheckboxProps>`
   appearance: none;
   overflow: hidden;
   cursor: pointer;
   position: relative;
   display: inline-block;
-  height: 32px;
-  width: 32px;
+  height: ${getScale};
+  width: ${getScale};
   vertical-align: middle;
   transition: background-color 0.2s ease-in-out;
   border: 0;
@@ -46,4 +57,8 @@ const Checkbox = styled.input.attrs({ type: "checkbox" })`
   }
 `;
 
+Checkbox.defaultProps = {
+  scale: scales.MD,
+};
+
 export default Checkbox;

src/components/Checkbox/types.ts

@@ -0,0 +1,10 @@
+export const scales = {
+  SM: "sm",
+  MD: "md",
+} as const;
+
+export type Scales = typeof scales[keyof typeof scales];
+
+export interface CheckboxProps {
+  scale?: Scales;
+}