[WIP] Troubleshooting section

package.json

@@ -8,7 +8,7 @@
     "@emotion/core": "10.0.28",
     "@emotion/styled": "10.0.27",
     "antd": "4.0.3",
-    "framer-motion": "^2.0.0-beta.52",
+    "framer-motion": "^2.0.0-beta.57",
     "markdown-to-jsx": "6.11.0",
     "query-string": "6.11.1",
     "react": "16.13.0",

src/components/common/DiffViewer.js

@@ -8,6 +8,7 @@ import { getDiffPatchURL } from '../../utils'
 import DiffSection from './Diff/DiffSection'
 import DiffLoading from './Diff/DiffLoading'
 import UsefulContentSection from './UsefulContentSection'
+import TroubleshootingSection from './TroubleshootingSection'
 import ViewStyleOptions from './Diff/DiffViewStyleOptions'
 import CompletedFilesCounter from './CompletedFilesCounter'
 
@@ -162,6 +163,8 @@ const DiffViewer = ({
             toVersion={toVersion}
           />
 
+          <TroubleshootingSection isLoading={isLoading} />
+
           <ViewStyleOptions
             handleViewStyleChange={handleViewStyleChange}
             diffViewStyle={diffViewStyle}

src/components/common/Sections/HideContentButton.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import { UpOutlined, DownOutlined } from '@ant-design/icons'
+import { Button } from 'antd'
+
+const HideContentButton = styled(
+  ({ toggleContentVisibility, isContentVisible, ...props }) => (
+    <Button
+      {...props}
+      type="link"
+      icon={isContentVisible ? <UpOutlined /> : <DownOutlined />}
+      onClick={toggleContentVisibility}
+    />
+  )
+)`
+  float: right;
+  position: absolute;
+  top: 11px;
+  right: 12px;
+  font-size: 12px;
+  border-width: 0px;
+  width: 20px;
+  height: 20px;
+  color: rgba(0, 0, 0, 0.45);
+  &:hover,
+  &:focus {
+    color: #24292e;
+  }
+`
+
+export default HideContentButton

src/components/common/Sections/Section.js

@@ -0,0 +1,107 @@
+import React, { Component } from 'react'
+import styled from '@emotion/styled'
+import { motion } from 'framer-motion'
+import Title from './Title'
+import HideContentButton from './HideContentButton'
+
+const Container = styled.div`
+  position: relative;
+  margin-top: 16px;
+  color: rgba(0, 0, 0, 0.65);
+  overflow: hidden;
+`
+
+const InnerContainer = styled.div`
+  color: rgba(0, 0, 0, 0.65);
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  border-width: 1px;
+  border-left-width: 7px;
+  border-color: ${({ accentColor }) => accentColor};
+  border-style: solid;
+  border-radius: 3px;
+  transition: padding 0.25s ease-out;
+`
+
+const ContentContainer = styled(({ isContentVisible, children, ...props }) => (
+  <motion.div
+    {...props}
+    variants={{
+      visible: {
+        opacity: 1,
+        height: 'auto',
+        translateY: 0
+      },
+      hidden: { opacity: 0, height: 0, translateY: -20 }
+    }}
+    initial={isContentVisible ? 'visible' : 'hidden'}
+    animate={isContentVisible ? 'visible' : 'hidden'}
+    transition={{
+      duration: 0.25
+    }}
+    inherit={false}
+  >
+    <div children={children} />
+  </motion.div>
+))`
+  & > div {
+    padding: 15px 24px 19px;
+  }
+`
+
+class Section extends Component {
+  state = {
+    isContentVisible:
+      this.props.initialContentVisible !== undefined
+        ? this.props.initialContentVisible
+        : true
+  }
+
+  // TODO: re-enable this
+  // shouldComponentUpdate(nextProps, nextState) {
+  //   // Only re-render component if it has reloaded the diff on the parent
+  //   const hasLoaded = this.props.isLoading && !nextProps.isLoading
+  //   // or if the content has been hidden
+  //   const hasContentBeenHidden =
+  //     this.state.isContentVisible !== nextState.isContentVisible
+
+  //   return hasLoaded || hasContentBeenHidden
+  // }
+
+  handleToggleContentVisibility = () =>
+    this.setState(({ isContentVisible }) => ({
+      isContentVisible: !isContentVisible
+    }))
+
+  render() {
+    const { isContentVisible } = this.state
+    const { backgroundColor, accentColor, renderTitle, children } = this.props
+
+    return (
+      <Container isContentVisible={isContentVisible}>
+        <InnerContainer
+          isContentVisible={isContentVisible}
+          backgroundColor={backgroundColor}
+          accentColor={accentColor}
+        >
+          <Title
+            isContentVisible={isContentVisible}
+            onClick={this.handleToggleContentVisibility}
+          >
+            {renderTitle()}
+          </Title>
+
+          <HideContentButton
+            isContentVisible={isContentVisible}
+            toggleContentVisibility={this.handleToggleContentVisibility}
+          />
+
+          <ContentContainer isContentVisible={isContentVisible}>
+            {children}
+          </ContentContainer>
+        </InnerContainer>
+      </Container>
+    )
+  }
+}
+
+export default Section

src/components/common/Sections/Title.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import { motion } from 'framer-motion'
+
+const Title = styled(({ isContentVisible, ...props }) => (
+  <motion.h2
+    {...props}
+    variants={{
+      visibleContent: {
+        translateX: 0,
+        translateY: 0
+      },
+      hiddenContent: {
+        translateX: -5,
+        translateY: -10
+      }
+    }}
+    initial={isContentVisible ? 'visibleContent' : 'hiddenContent'}
+    animate={isContentVisible ? 'visibleContent' : 'hiddenContent'}
+    transition={{
+      duration: 0.25
+    }}
+    inherit={false}
+  />
+))`
+  font-size: 17px;
+  cursor: pointer;
+  margin: 0px;
+  padding: 18px 0px 0px 14px;
+`
+
+export default Title