Merge pull request #98 from ensdomains/update-checkboxrow-disabled

update disabled state for checkbox row
ensdomains · Feb 15, 2023 · ef04ff5 · ef04ff5
2 parents 88ace59 + 9edd805
commit ef04ff5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/components/src/components/molecules/CheckboxRow/CheckboxRow.tsx b/components/src/components/molecules/CheckboxRow/CheckboxRow.tsx
@@ -8,6 +8,7 @@ import { useId } from '../../../hooks/useId'
 
 export type Props = {
   label: string
+  subLabel?: string
   color?: Hue
 } & React.InputHTMLAttributes<HTMLInputElement>
 
@@ -130,14 +131,18 @@ const Content = styled.div(
 )
 
 export const CheckboxRow = React.forwardRef<HTMLInputElement, Props>(
-  ({ label: title, name, color = 'blue', ...props }, ref) => {
+  ({ label, subLabel, name, color = 'blue', disabled, ...props }, ref) => {
     const defaultRef = React.useRef<HTMLInputElement>(null)
     const inputRef = ref || defaultRef
 
     const id = useId()
+
+    const textColor = disabled ? 'grey' : 'text'
+
     return (
       <Container $color={color}>
         <RootInput
+          disabled={disabled}
           id={id}
           name={name}
           type="checkbox"
@@ -149,9 +154,14 @@ export const CheckboxRow = React.forwardRef<HTMLInputElement, Props>(
             <CheckSVG />
           </Circle>
           <Content>
-            <Typography color="text" fontVariant="bodyBold">
-              {title}
+            <Typography color={textColor} fontVariant="bodyBold">
+              {label}
             </Typography>
+            {subLabel && (
+              <Typography color={textColor} fontVariant="small">
+                {subLabel}
+              </Typography>
+            )}
           </Content>
         </Label>
       </Container>

diff --git a/docs/src/reference/mdx/molecules/CheckboxRow.docs.mdx b/docs/src/reference/mdx/molecules/CheckboxRow.docs.mdx
@@ -8,7 +8,7 @@ import { CheckboxRow } from '@ensdomains/thorin'
 ```
 
 ```tsx live=true expand=true
-<CheckboxRow label="Label" />
+<CheckboxRow label="Label" subLabel="Sublabel" />
 ```
 
 ## Props