Merge pull request 'feature/checkbox' (#44) from feature/checkbox into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/44

src/App.tsx

@@ -10,9 +10,7 @@ import React from "react";
  * @return {JSX.Element}
  */
 function App() {
-  return (
-    <div>Hello world!</div>
-  );
+  return <div>Hello world!</div>;
 }
 
 export default App;

src/components/Checkbox.stories.tsx

@@ -1,58 +1,43 @@
-import React from 'react';
+import React, { useState } from "react";
+import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import Checkbox from './Checkbox';
+import Checkbox from "./Checkbox";
 
 export default {
-  // Title inside navigation bar
-  title: 'Checkbox',
-  // Component to test
+  title: "Checkbox",
   component: Checkbox,
-  // Clarifying the way how to process specific
-  // properties of your component and which values
-  // it can accept.
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    checked: {
-      options: [true, false],
-      control: { type: 'radio' },
+    isChecked: {
+      type: "boolean",
+    },
+    children: {
+      type: "string",
+      defaultValue: "Use light theme",
+    },
+    disabled: {
+      type: "boolean",
+      defaultValue: "false",
     },
   },
 } as ComponentMeta<typeof Checkbox>;
 
-/**
- * This is a way to define a tempalte for your component.
- * 
- * This template should cover all the states.
- * 
- * In most cases you should just distruct args attribute
- * on a returning component.
- */
 const Template: ComponentStory<typeof Checkbox> = (args) => (
   <Checkbox {...args} />
 );
 
-/* -------------------------------------------------------------------------- */
-/*                          States of your component                          */
-/* -------------------------------------------------------------------------- */
+export const Checked = Template.bind({});
+Checked.args = {
+  isChecked: true,
+  children: "This is custom checkbox",
+};
 
 export const Unchecked = Template.bind({});
 Unchecked.args = {
-  label: "On/off lights",
-  checked: false,
-  children: undefined,
-}
-export const Checked = Template.bind({});
-Checked.args = {
-  children: "On/off lights",
-  checked: true,
-  label: undefined,
-}
+  isChecked: false,
+};
 
-export const EitherLabelChildren = Template.bind({});
-EitherLabelChildren.args = {
-  children: "On/off lights",
-  checked: true,
-  label: "Label!",
-}
-// GO Further
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};

src/components/Checkbox.tsx

@@ -1,38 +1,47 @@
-import classNames from "classnames";
 import React from "react";
+import classNames from "classnames";
+import { ReactComponent as Checkmark } from "assets/svg/check.svg";
 
-type Props = {
+export type Props = {
   /**
-   * The way to provide `children` inside a component
-   * via attribute instead of enclosed tag
+   * Control the state of checkbox
    */
-  label?: React.ReactNode;
+  isChecked: boolean;
   /**
-   * When you will have both `children` and `label`
-   * defined on a component it will choose `children`
-   * to display
+   * An Element next to the checkbox
    */
   children?: React.ReactNode;
-} & Omit<React.ComponentPropsWithoutRef<"input">, "type">;
-
-/**
- * Customized `input[type="checkbox"]` component with label
- * 
- * All common input properties are inherited.
- * 
- * To define a label content either provide `label` attribute
- * or use common `children` property
- */
-const Checkbox = ({label, children, className, ...props}: Props) => {
-  
-  if(label && !children) {
-    children = label;
-  }
+} & Omit<React.HTMLProps<HTMLInputElement>, "type">;
 
+const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
   return (
-    <label className={classNames(className, "flex items-center")}>
-      <input type="checkbox" {...props} />
-      {children !== undefined && <span>{children}</span>}
+    <label
+      className={classNames(
+        "flex gap-x-4 flex-nowrap text-base text-black select-none",
+        className
+      )}
+      htmlFor={props.id}
+    >
+      <div className="w-6 h-6 relative">
+        <input
+          className="peer appearance-none transition-colors bg-transparent border-2 border-gray-300 w-6 h-6 
+                      rounded checked:bg-blue-500 checked:border-blue-500 
+                      nextOnChecked:opacity-100 hover:border-blue-500 
+                      focus:outline focus:outline-4 focus:outline-blue-300/40 focus:outline-offset-1 
+                      disabled:bg-gray-75 disabled:border-gray-300 "
+          type="checkbox"
+          checked={isChecked}
+          {...props}
+        />
+        <div //
+          className=" w-4 h-3 leading-[0] absolute top-1.5 left-1 opacity-0 
+                      pointer-events-none focus:pointer-events-auto flex items-center justify-center 
+                      fill-white peer-disabled:fill-gray-500 "
+        >
+          <Checkmark className="fill-inherit" />
+        </div>
+      </div>
+      {children}
     </label>
   );
 };

src/components/icons.tsx

@@ -3,9 +3,9 @@ export {ReactComponent as SVGArrowDown} from "@assets/svg/arrow-down.svg";
 export { ReactComponent as SVGArrowLeft } from "@assets/svg/arrow-left.svg";
 export { ReactComponent as SVGArrowRight } from "@assets/svg/arrow-right.svg";
 export { ReactComponent as SVGBookmark } from "@assets/svg/bookmark.svg";
-export {ReactComponent as SVGCaretDown} from "@assets/svg/caret-down.svg"
-export {ReactComponent as SVGCaretLeft} from "@assets/svg/caret-left.svg"
-export {ReactComponent as SVGCaretRight} from "@assets/svg/caret-right.svg"
+export { ReactComponent as SVGCaretDown } from "@assets/svg/caret-down.svg";
+export { ReactComponent as SVGCaretLeft } from "@assets/svg/caret-left.svg";
+export { ReactComponent as SVGCaretRight } from "@assets/svg/caret-right.svg";
 export { ReactComponent as SVGCaretUp } from "@assets/svg/caret-up.svg";
 export { ReactComponent as SVGChevronesLeft } from "@assets/svg/chevrones-left.svg";
 export { ReactComponent as SVGChevronesRight } from "@assets/svg/chevrones-right.svg";
@@ -30,4 +30,4 @@ export {ReactComponent as SVGSearch} from "@assets/svg/search.svg";
 export { ReactComponent as SVGShare } from "@assets/svg/share.svg";
 export { ReactComponent as SVGUser } from "@assets/svg/user.svg";
 export { ReactComponent as SVGXMark } from "@assets/svg/xmark.svg";
-
+export { ReactComponent as SVGCheckmark } from "@assets/svg/checkmark.svg";

src/index.css

@@ -17,7 +17,8 @@
   @font-face {
     font-family: "Poppins";
     src: url("assets/fonts/Poppins-Medium.eot");
-    src: url("assets/fonts/Poppins-Medium.eot?#iefix") format("embedded-opentype"),
+    src: url("assets/fonts/Poppins-Medium.eot?#iefix")
+        format("embedded-opentype"),
       url("assets/fonts/Poppins-Medium.woff2") format("woff2"),
       url("assets/fonts/Poppins-Medium.ttf") format("truetype");
     font-weight: 500;
@@ -28,7 +29,8 @@
   @font-face {
     font-family: "Poppins";
     src: url("assets/fonts/Poppins-Regular.eot");
-    src: url("assets/fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"),
+    src: url("assets/fonts/Poppins-Regular.eot?#iefix")
+        format("embedded-opentype"),
       url("assets/fonts/Poppins-Regular.woff2") format("woff2"),
       url("assets/fonts/Poppins-Regular.ttf") format("truetype");
     font-weight: normal;
@@ -90,7 +92,6 @@
     --color-gray-50: 250 250 250;
     --color-gray-75: 240 240 240;
     --color-gray-100: 235 235 235;
-    ;
     --color-gray-200: 214 214 214;
     --color-gray-300: 191 191 191;
     --color-gray-400: 166 166 166;
@@ -120,7 +121,7 @@
 
   .separate::after,
   .separate::before {
-    content: '';
+    content: "";
     @apply border-b border-gray-300 flex-1;
   }