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
studiobakers · Oct 26, 2021 · d890006 · d890006
1 parent 7ba99e6
commit d890006
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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}