docs(checkbox): 📝 add more custom stories

adaptui · Aug 20, 2021 · 404bebe · 404bebe
1 parent 8aa55f3
commit 404bebe
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 59 deletions.
diff --git a/src/checkboxNew/Checkbox.tsx b/src/checkboxNew/Checkbox.tsx
@@ -1,25 +1,24 @@
 import * as React from "react";
 import { splitProps } from "reakit-utils";
 
+import {
+  CheckboxInitialState,
+  CheckboxStateReturn,
+  useCheckboxState,
+} from "./CheckboxState";
 import { runIfFn } from "../utils";
 import { CheckboxText } from "./CheckboxText";
 import { CheckboxLabel } from "./CheckboxLabel";
 import { USE_CHECKBOX_STATE_KEYS } from "./__keys";
 import { CheckboxDescription } from "./CheckboxDescription";
 import { CheckboxIcon, CheckboxDefaultIcon } from "./CheckboxIcon";
 import { CheckboxInput, CheckboxInputHTMLProps } from "./CheckboxInput";
-import { CheckboxInitialState, useCheckboxState } from "./CheckboxState";
 
 export type CheckboxOwnProps = CheckboxInputHTMLProps & {
   /**
    * Provide custom icons as a replacement for the default ones.
    */
-  icon?: React.ReactNode;
-
-  /**
-   * Label for the Checkbox.
-   */
-  label?: string;
+  icon?: React.ReactNode | ((args: CheckboxStateReturn) => JSX.Element);
 
   /**
    * Description for the Checkbox.
@@ -38,7 +37,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     const state = useCheckboxState(stateProps);
     const {
       icon = CheckboxDefaultIcon,
-      label,
+      children,
       description,
       className,
       style,
@@ -49,12 +48,12 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       <CheckboxLabel {...state} className={className} style={style}>
         <CheckboxInput ref={ref} {...state} {...inputProps} />
         <CheckboxIcon {...state}>{runIfFn(icon, state)}</CheckboxIcon>
-        {label && !description ? (
-          <CheckboxText {...state}>{label}</CheckboxText>
+        {children && !description ? (
+          <CheckboxText {...state}>{children}</CheckboxText>
         ) : null}
-        {label && description ? (
+        {children && description ? (
           <div className="flex flex-col">
-            <CheckboxText {...state}>{label}</CheckboxText>
+            <CheckboxText {...state}>{children}</CheckboxText>
             <CheckboxDescription {...state}>{description}</CheckboxDescription>
           </div>
         ) : null}

diff --git a/src/checkboxNew/CheckboxDescription.tsx b/src/checkboxNew/CheckboxDescription.tsx
@@ -30,7 +30,7 @@ export const useCheckboxDescription = createHook<
     const className = cx(
       theme.description.base,
       theme.description.size[size],
-      restHtmlProps,
+      htmlClassName,
     );
 
     return { className, ...restHtmlProps };

diff --git a/src/checkboxNew/CheckboxState.ts b/src/checkboxNew/CheckboxState.ts
@@ -39,10 +39,8 @@ export type CheckboxActions = RenderlesskitCheckboxActions & {};
 
 export type CheckboxStateReturn = CheckboxState & CheckboxActions;
 
-export type CheckboxInitialState = RenderlesskitCheckboxInitialState & {
-  size?: CheckboxState["size"];
-  value?: CheckboxInputOptions["value"];
-};
+export type CheckboxInitialState = RenderlesskitCheckboxInitialState &
+  Partial<Pick<CheckboxState, "size" | "value">>;
 
 export function useCheckboxState(
   props: CheckboxInitialState = {},

diff --git a/src/checkboxNew/CheckboxText.tsx b/src/checkboxNew/CheckboxText.tsx
@@ -26,7 +26,7 @@ export const useCheckboxText = createHook<
     const { className: htmlClassName, ...restHtmlProps } = htmlProps;
 
     const theme = useTheme("checkboxNew");
-    const className = cx(theme.text.base, theme.text.size[size], restHtmlProps);
+    const className = cx(theme.text.base, theme.text.size[size], htmlClassName);
 
     return { className, ...restHtmlProps };
   },

diff --git a/src/checkboxNew/index.ts b/src/checkboxNew/index.ts
@@ -1,2 +1,7 @@
+export * from "./Checkbox";
+export * from "./CheckboxState";
+export * from "./CheckboxIcon";
+export * from "./CheckboxText";
+export * from "./CheckboxDescription";
 export * from "./CheckboxLabel";
 export * from "./CheckboxInput";