From d890006cf108451dad5225d7dc8688974221ae07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?An=C4=B1lerkan=20Madenci?=
 <43711824+Anlerkan@users.noreply.github.com>
Date: Tue, 26 Oct 2021 11:51:00 +0300
Subject: [PATCH] feat(checkbox-input): Allow custom icon (#164)

* feat(checkbox-input): Custom icon added

* fix(checkbox-input): Default margin removed

* fix(checkbox-input): Label's display value changed to inline-flex, removed isSelected check for display icon

* fix(checkbox-input): labels's display value changed to inline-flex
---
 src/form/input/checkbox/CheckboxInput.tsx    | 7 ++++---
 src/form/input/checkbox/_checkbox-input.scss | 4 +---
 stories/2-CheckboxInput.stories.tsx          | 4 ++++
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/form/input/checkbox/CheckboxInput.tsx b/src/form/input/checkbox/CheckboxInput.tsx
index bef1c3a9..f32031c0 100644
--- a/src/form/input/checkbox/CheckboxInput.tsx
+++ b/src/form/input/checkbox/CheckboxInput.tsx
@@ -15,6 +15,7 @@ export interface CheckboxInputProps {
   ) => void;
   isSelected: boolean;
   isDisabled?: boolean;
+  customIcon?: React.ReactNode;
   customClassName?: string;
   testid?: string;
 }
@@ -25,6 +26,7 @@ function CheckboxInput({
   customClassName,
   isSelected,
   isDisabled,
+  customIcon,
   testid
 }: CheckboxInputProps) {
   const {
@@ -35,6 +37,7 @@ function CheckboxInput({
     "checkbox-input-label--is-selected": isSelected,
     "checkbox-input-label--is-disabled": isDisabled
   });
+  const icon = customIcon || <CheckIcon />;
 
   return (
     <label data-testid={testid} htmlFor={htmlFor} className={containerClassName}>
@@ -49,9 +52,7 @@ function CheckboxInput({
         disabled={isDisabled}
       />
 
-      <span className={"checkbox-input-label__icon"}>
-        <CheckIcon />
-      </span>
+      <span className={"checkbox-input-label__icon"}>{icon}</span>
 
       {content}
     </label>
diff --git a/src/form/input/checkbox/_checkbox-input.scss b/src/form/input/checkbox/_checkbox-input.scss
index e9fac584..393e4d50 100644
--- a/src/form/input/checkbox/_checkbox-input.scss
+++ b/src/form/input/checkbox/_checkbox-input.scss
@@ -8,11 +8,9 @@
 
   position: relative;
 
-  display: flex;
+  display: inline-flex;
   align-items: center;
 
-  margin-bottom: 10px;
-
   cursor: pointer;
   user-select: none;
 
diff --git a/stories/2-CheckboxInput.stories.tsx b/stories/2-CheckboxInput.stories.tsx
index c0ca7a05..a92cd1e4 100644
--- a/stories/2-CheckboxInput.stories.tsx
+++ b/stories/2-CheckboxInput.stories.tsx
@@ -30,6 +30,8 @@ storiesOf("Checkbox", module).add("Checkbox", () => {
             }}
           />
 
+          <br />
+
           <CheckboxInput
             onSelect={() =>
               setState({...state, termsAndConditions: !state.termsAndConditions})
@@ -46,6 +48,8 @@ storiesOf("Checkbox", module).add("Checkbox", () => {
             }}
           />
 
+          <br />
+
           <CheckboxInput
             onSelect={() => setState({...state, privacyPolicy: !state.privacyPolicy})}
             isSelected={state.privacyPolicy}