Handle collapsing and expanding

components/ChecklistItem/Heading.js

@@ -1,16 +1,22 @@
 // @flow
 import React from 'react';
-import { Title, Description } from './style';
+import { Title, Description, Uncollapse } from './style';
 import type { ChecklistResource } from '../../types';
 
 type Props = {
   resource: ChecklistResource,
   isCollapsed: boolean,
+  handleCollapse: Function,
 };
 
-export const Heading = ({ resource, isCollapsed }: Props) => (
+export const Heading = ({ resource, isCollapsed, handleCollapse }: Props) => (
   <React.Fragment>
-    <Title>{resource.title}</Title>
+    <Title>
+      {resource.title}
+      <Uncollapse onClick={handleCollapse}>
+        {isCollapsed ? 'Show details' : 'Hide details'}
+      </Uncollapse>
+    </Title>
     {!isCollapsed && <Description source={resource.description} />}
   </React.Fragment>
 );

components/ChecklistItem/index.js

@@ -43,9 +43,12 @@ class ChecklistItem extends React.Component<Props, State> {
     const { isChecked, isCollapsed } = this.state;
     const { resource } = this.props;
     setCheckedStatusById(resource.id, !isChecked);
-    return this.setState({ isChecked: !isChecked, isCollapsed: !isCollapsed });
+    return this.setState({ isChecked: !isChecked, isCollapsed: !isChecked });
   };
 
+  uncollapse = () =>
+    this.setState(state => ({ isCollapsed: !state.isCollapsed }));
+
   render() {
     const { isChecked, isLoading, isCollapsed } = this.state;
     const { resource } = this.props;
@@ -61,7 +64,11 @@ class ChecklistItem extends React.Component<Props, State> {
             </CheckboxContainer>
 
             <ResourceContent isChecked={isChecked} isCollapsed={isCollapsed}>
-              <Heading resource={resource} isCollapsed={isCollapsed} />
+              <Heading
+                resource={resource}
+                isCollapsed={isCollapsed}
+                handleCollapse={this.uncollapse}
+              />
 
               {!isCollapsed && resource.apps && (
                 <React.Fragment>

components/ChecklistItem/style.js

@@ -22,6 +22,8 @@ export const Title = styled.h3`
   font-size: 18px;
   font-weight: 500;
   color: ${theme.text.default};
+  display: flex;
+  justify-content: space-between;
 `;
 
 export const Description = styled(Markdown)`
@@ -103,7 +105,7 @@ export const Checkbox = styled.span`
 export const ResourceContent = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: ${props => (props.isCollapsed ? 'center' : 'flex-start')};
+  margin-top: 2px;
   padding-left: 16px;
   width: 100%;
 
@@ -304,3 +306,21 @@ export const Divider = styled.div`
     display: none;
   }
 `;
+
+export const Uncollapse = styled.span`
+  background: ${theme.bg.wash};
+  border-radius: 20px;
+  padding: 8px 16px;
+  font-size: 15px;
+  color: ${theme.text.tertiary};
+  cursor: pointer;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+
+  &:hover {
+    color: ${theme.text.default};
+    background: ${tint(theme.bg.wash, -4)};
+  }
+`;