From e47899ae5cb5a8f8b73d2d551cd12b468b3d9315 Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Sun, 24 Apr 2022 11:43:32 +0800
Subject: [PATCH] feat(console): add component checkbox (#576)

* feat(console): add component checkbox

* fix: merge icons

* fix: svg color
---
 .../console/src/components/Checkbox/Icon.tsx  | 73 +++++++++++++++++++
 .../src/components/Checkbox/index.module.scss | 44 +++++++++++
 .../console/src/components/Checkbox/index.tsx | 23 ++++++
 .../components/SignInMethodsForm.tsx          | 27 ++++---
 .../components/index.module.scss              |  4 +
 5 files changed, 157 insertions(+), 14 deletions(-)
 create mode 100644 packages/console/src/components/Checkbox/Icon.tsx
 create mode 100644 packages/console/src/components/Checkbox/index.module.scss
 create mode 100644 packages/console/src/components/Checkbox/index.tsx

diff --git a/packages/console/src/components/Checkbox/Icon.tsx b/packages/console/src/components/Checkbox/Icon.tsx
new file mode 100644
index 000000000..598b164bf
--- /dev/null
+++ b/packages/console/src/components/Checkbox/Icon.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+type Props = {
+  className?: string;
+};
+
+const Icon = ({ className }: Props) => (
+  <span className={className}>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <rect x="1" y="1" width="18" height="18" rx="4" fill="currentColor" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.31476 13.858L5.13295 10.441C4.95568 10.253 4.95568 9.947 5.13295 9.757L5.77568 9.074C5.95295 8.886 6.24113 8.886 6.4184 9.074L8.63657 11.466L13.5811 6.141C13.7584 5.953 14.0465 5.953 14.2238 6.141L14.8665 6.825C15.0438 7.013 15.0438 7.32 14.8665 7.507L8.95748 13.858C8.78021 14.046 8.49203 14.046 8.31476 13.858Z"
+        fill="white"
+      />
+    </svg>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="2" />
+    </svg>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <rect x="1" y="1" width="18" height="18" rx="4" fill="currentColor" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.31476 13.858L5.13295 10.441C4.95568 10.253 4.95568 9.947 5.13295 9.757L5.77568 9.074C5.95295 8.886 6.24113 8.886 6.4184 9.074L8.63657 11.466L13.5811 6.141C13.7584 5.953 14.0465 5.953 14.2238 6.141L14.8665 6.825C15.0438 7.013 15.0438 7.32 14.8665 7.507L8.95748 13.858C8.78021 14.046 8.49203 14.046 8.31476 13.858Z"
+        fill="white"
+      />
+    </svg>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <rect
+        x="2"
+        y="2"
+        width="16"
+        height="16"
+        rx="3"
+        fill="#EFF1F1"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+    </svg>
+  </span>
+);
+
+export default Icon;
diff --git a/packages/console/src/components/Checkbox/index.module.scss b/packages/console/src/components/Checkbox/index.module.scss
new file mode 100644
index 000000000..aef8ecc03
--- /dev/null
+++ b/packages/console/src/components/Checkbox/index.module.scss
@@ -0,0 +1,44 @@
+@use '@/scss/underscore' as _;
+
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    margin-right: _.unit(2);
+
+    > svg {
+      display: none;
+      color: var(--color-neutral-60);
+
+      &:first-child {
+        color: var(--color-primary);
+      }
+    }
+  }
+
+  input {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    left: 0;
+    top: 0;
+    margin: 0;
+    opacity: 0%;
+  }
+
+  input:checked:not(:disabled) ~ .icon > svg:nth-child(1),
+  input:not(:checked):not(:disabled) ~ .icon > svg:nth-child(2),
+  input:checked:disabled ~ .icon > svg:nth-child(3),
+  input:not(:checked):disabled ~ .icon > svg:nth-child(4) {
+    display: block;
+  }
+
+  label {
+    font: var(--font-body-medium);
+    color: var(--color-text);
+  }
+}
diff --git a/packages/console/src/components/Checkbox/index.tsx b/packages/console/src/components/Checkbox/index.tsx
new file mode 100644
index 000000000..2a0dbe0ca
--- /dev/null
+++ b/packages/console/src/components/Checkbox/index.tsx
@@ -0,0 +1,23 @@
+import { nanoid } from 'nanoid';
+import React, { InputHTMLAttributes, ReactNode, useState } from 'react';
+
+import Icon from './Icon';
+import * as styles from './index.module.scss';
+
+type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+  label?: ReactNode;
+};
+
+const Checkbox = ({ label, disabled, ...rest }: Props) => {
+  const [id] = useState(nanoid());
+
+  return (
+    <div className={styles.checkbox}>
+      <input id={id} type="checkbox" disabled={disabled} {...rest} />
+      <Icon className={styles.icon} />
+      {label && <label htmlFor={id}>{label}</label>}
+    </div>
+  );
+};
+
+export default Checkbox;
diff --git a/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx b/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx
index 135def2a6..5a6ad5a55 100644
--- a/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import Checkbox from '@/components/Checkbox';
 import FormField from '@/components/FormField';
 import Select from '@/components/Select';
 import Switch from '@/components/Switch';
@@ -43,23 +44,21 @@ const SignInMethodsForm = () => {
           label={t('sign_in_exp.sign_in_methods.enable_secondary_description')}
         />
         {signInMethods.map((method) => (
-          <div key={method}>
-            {/* TODO: LOG-2187 checkbox component */}
-            <input
-              type="checkbox"
-              id={method}
-              value={method}
+          <div key={method} className={styles.method}>
+            <Checkbox
+              label={
+                <>
+                  {t('sign_in_exp.sign_in_methods.methods', { context: method })}
+                  {primaryMethod === method && (
+                    <span className={styles.primaryTag}>
+                      {t('sign_in_exp.sign_in_methods.methods_primary_tag')}
+                    </span>
+                  )}
+                </>
+              }
               disabled={primaryMethod === method}
               {...register(`signInMethods.${method}`)}
             />
-            <label htmlFor={method}>
-              {t('sign_in_exp.sign_in_methods.methods', { context: method })}
-              {primaryMethod === method && (
-                <span className={styles.primaryTag}>
-                  {t('sign_in_exp.sign_in_methods.methods_primary_tag')}
-                </span>
-              )}
-            </label>
           </div>
         ))}
       </FormField>
diff --git a/packages/console/src/pages/SignInExperience/components/index.module.scss b/packages/console/src/pages/SignInExperience/components/index.module.scss
index 65a964647..da96d6db7 100644
--- a/packages/console/src/pages/SignInExperience/components/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/components/index.module.scss
@@ -9,3 +9,7 @@
 .primaryTag {
   color: var(--color-caption);
 }
+
+.method {
+  margin-top: _.unit(2);
+}