From 134acf93481618e0f6f7cbf38a4569b0cfa88936 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Sun, 13 Jan 2019 15:55:19 -0800
Subject: [PATCH] Collapse on check

---
 components/ChecklistItem/Heading.js |  5 +++--
 components/ChecklistItem/index.js   | 23 ++++++++++++++---------
 components/ChecklistItem/style.js   |  1 +
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/components/ChecklistItem/Heading.js b/components/ChecklistItem/Heading.js
index 2e9936e..cadd92e 100644
--- a/components/ChecklistItem/Heading.js
+++ b/components/ChecklistItem/Heading.js
@@ -5,11 +5,12 @@ import type { ChecklistResource } from '../../types';
 
 type Props = {
   resource: ChecklistResource,
+  isCollapsed: boolean,
 };
 
-export const Heading = ({ resource }: Props) => (
+export const Heading = ({ resource, isCollapsed }: Props) => (
   <React.Fragment>
     <Title>{resource.title}</Title>
-    <Description source={resource.description} />
+    {!isCollapsed && <Description source={resource.description} />}
   </React.Fragment>
 );
diff --git a/components/ChecklistItem/index.js b/components/ChecklistItem/index.js
index 1d1ea6e..73f6bbd 100644
--- a/components/ChecklistItem/index.js
+++ b/components/ChecklistItem/index.js
@@ -23,26 +23,31 @@ type Props = {
 type State = {
   isChecked: boolean,
   isLoading: boolean,
+  isCollapsed: boolean,
 };
 
 class ChecklistItem extends React.Component<Props, State> {
-  state = { isChecked: false, isLoading: true };
+  state = { isChecked: false, isLoading: true, isCollapsed: true };
 
   componentDidMount() {
     const { resource } = this.props;
     const isChecked = getCheckedStatusById(resource.id);
-    return this.setState({ isChecked, isLoading: false });
+    return this.setState({
+      isChecked,
+      isLoading: false,
+      isCollapsed: isChecked,
+    });
   }
 
   handleSetChecked = () => {
-    const { isChecked } = this.state;
+    const { isChecked, isCollapsed } = this.state;
     const { resource } = this.props;
     setCheckedStatusById(resource.id, !isChecked);
-    return this.setState({ isChecked: !isChecked });
+    return this.setState({ isChecked: !isChecked, isCollapsed: !isCollapsed });
   };
 
   render() {
-    const { isChecked, isLoading } = this.state;
+    const { isChecked, isLoading, isCollapsed } = this.state;
     const { resource } = this.props;
 
     if (isLoading) return <LoadingChecklistItem />;
@@ -55,17 +60,17 @@ class ChecklistItem extends React.Component<Props, State> {
               <Checkbox isChecked={isChecked} />
             </CheckboxContainer>
 
-            <ResourceContent isChecked={isChecked}>
-              <Heading resource={resource} />
+            <ResourceContent isChecked={isChecked} isCollapsed={isCollapsed}>
+              <Heading resource={resource} isCollapsed={isCollapsed} />
 
-              {resource.apps && (
+              {!isCollapsed && resource.apps && (
                 <React.Fragment>
                   <Divider />
                   <Apps resource={resource} />
                 </React.Fragment>
               )}
 
-              {resource.resources && (
+              {!isCollapsed && resource.resources && (
                 <React.Fragment>
                   <Divider />
                   <Resources resource={resource} />
diff --git a/components/ChecklistItem/style.js b/components/ChecklistItem/style.js
index f245072..03b4e52 100644
--- a/components/ChecklistItem/style.js
+++ b/components/ChecklistItem/style.js
@@ -103,6 +103,7 @@ export const Checkbox = styled.span`
 export const ResourceContent = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: ${props => (props.isCollapsed ? 'center' : 'flex-start')};
   padding-left: 16px;
   width: 100%;