Add truncation to only show first 3 apps by default

components/ChecklistItem/Apps.js

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
-import { AppsContainer, SectionHeading } from './style';
+import { AppsContainer, SectionHeading, ExpandContainer } from './style';
+import { Button } from '../Button';
 import type { ChecklistResource } from '../../types';
 import { AppRow } from './App';
 
@@ -8,14 +9,45 @@ type Props = {
   resource: ChecklistResource,
 };
 
-export const Apps = ({ resource }: Props) => {
-  if (!resource.apps) return null;
-  return (
-    <AppsContainer>
-      <SectionHeading>Apps</SectionHeading>
-      {resource.apps.map(app => (
-        <AppRow key={app.name} app={app} />
-      ))}
-    </AppsContainer>
-  );
+type State = {
+  overflowExpanded: boolean,
 };
+
+export class Apps extends React.Component<Props, State> {
+  state = { overflowExpanded: false };
+
+  expand = () => this.setState({ overflowExpanded: true });
+
+  render() {
+    const { resource } = this.props;
+    const { overflowExpanded } = this.state;
+
+    if (!resource.apps) return null;
+
+    let appList = resource.apps;
+    let overflowAppList;
+    if (appList.length > 3) {
+      overflowAppList = appList.slice(3, appList.length);
+      appList = appList.slice(0, 3);
+    }
+
+    return (
+      <AppsContainer overflowExpanded={overflowExpanded}>
+        <SectionHeading>Apps</SectionHeading>
+        {appList.map(app => (
+          <AppRow key={app.name} app={app} />
+        ))}
+
+        {overflowAppList && !overflowExpanded && (
+          <ExpandContainer onClick={this.expand}>
+            <Button>Show more choices</Button>
+          </ExpandContainer>
+        )}
+
+        {overflowAppList &&
+          overflowExpanded &&
+          overflowAppList.map(app => <AppRow key={app.name} app={app} />)}
+      </AppsContainer>
+    );
+  }
+}

components/ChecklistItem/style.js

@@ -389,3 +389,28 @@ export const LeftBorder = styled.div`
   background-image: linear-gradient(to bottom, #a913de, #6ac9ff);
   border-radius: 6px 0 0 6px;
 `;
+
+export const ExpandContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+  background: ${theme.bg.wash};
+  border: 1px solid ${tint(theme.bg.wash, -4)};
+  border-radius: 6px;
+  padding: 8px 16px;
+  margin-bottom: -28px;
+  margin-top: 16px;
+
+  @media (max-width: 768px) {
+    margin-bottom: 0;
+    border-left: none;
+    border-right: none;
+    margin-top: -1px;
+    border-radius: 0;
+    margin-left: -24px;
+    margin-right: -16px;
+    width: calc(100% + 40px);
+  }
+`;