fix(ChecklistCard): Ensure divider doesn’t cover error border (#92)

seek-oss · Feb 13, 2019 · fc3c4a5 · fc3c4a5
1 parent bdb75fb
commit fc3c4a5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/lib/components/ChecklistCard/ChecklistCard.docs.tsx b/lib/components/ChecklistCard/ChecklistCard.docs.tsx
@@ -78,16 +78,15 @@ const docs: ComponentDocs = {
             id={`${id}_1`}
             label="This is a checkbox"
             checked={false}
-            tone="critical"
-            message="This is a critical message"
+            message={false}
             onChange={handleChange}
           >
             <Text>This text is visible when the checkbox is checked.</Text>
           </Checkbox>
           <Checkbox
             id={`${id}_2`}
             label="This is a checkbox"
-            checked={true}
+            checked={false}
             tone="critical"
             message="This is a critical message"
             onChange={handleChange}
@@ -97,7 +96,7 @@ const docs: ComponentDocs = {
           <Checkbox
             id={`${id}_3`}
             label="This is a checkbox"
-            checked={false}
+            checked={true}
             tone="critical"
             message="This is a critical message"
             onChange={handleChange}
@@ -107,15 +106,6 @@ const docs: ComponentDocs = {
           <Checkbox
             id={`${id}_4`}
             label="This is a checkbox"
-            checked={true}
-            message={false}
-            onChange={handleChange}
-          >
-            <Text>This text is visible when the checkbox is checked.</Text>
-          </Checkbox>
-          <Checkbox
-            id={`${id}_5`}
-            label="This is a checkbox"
             checked={false}
             message={false}
             onChange={handleChange}

diff --git a/lib/components/ChecklistCard/ChecklistCard.tsx b/lib/components/ChecklistCard/ChecklistCard.tsx
@@ -19,14 +19,24 @@ export default class ChecklistCard extends Component<ChecklistCardProps> {
     const { children, ...restProps } = this.props;
     return (
       <Card {...restProps}>
-        {React.Children.map(children, (child, i) => (
-          <Fragment>
-            {i > 0 && <Divider />}
-            {React.cloneElement(child as ReactElement<CheckboxProps>, {
-              variant: 'inChecklistCard'
-            })}
-          </Fragment>
-        ))}
+        {React.Children.map(children, (child, i) => {
+          if (typeof child !== 'object') {
+            return null;
+          }
+
+          const checkboxChild = child as ReactElement<CheckboxProps>;
+
+          return (
+            <Fragment>
+              {i > 0 && checkboxChild.props.tone !== 'critical' ? (
+                <Divider />
+              ) : null}
+              {React.cloneElement(child, {
+                variant: 'inChecklistCard'
+              })}
+            </Fragment>
+          );
+        })}
       </Card>
     );
   }