Merge branch 'next-release' into main

studiobakers · Oct 26, 2021 · 9e3ced4 · 9e3ced4
2 parents 20e5480 + 6d1a91f
commit 9e3ced4
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hipo/react-ui-toolkit",
-  "version": "1.0.0-alpha.4.1.0",
+  "version": "1.0.0-alpha.4.1.1",
   "description": "React based UI toolkit.",
   "main": "dist/index.js",
   "scripts": {

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}