Merge pull request #64 from brianlovin/truncate-apps

Truncate apps

components/ChecklistItem/Apps.js

@@ -1,6 +1,8 @@
 // @flow
-import React from 'react';
-import { AppsContainer, SectionHeading } from './style';
+// $FlowIssue
+import React, { useState } from 'react';
+import { AppsContainer, SectionHeading, ExpandContainer } from './style';
+import { Button } from '../Button';
 import type { ChecklistResource } from '../../types';
 import { AppRow } from './App';
 
@@ -9,13 +11,33 @@ type Props = {
 };
 
 export const Apps = ({ resource }: Props) => {
+  const [overflowExpanded, setOverflowExpanded] = useState(false);
+
   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>
+    <AppsContainer overflowExpanded={overflowExpanded}>
       <SectionHeading>Apps</SectionHeading>
-      {resource.apps.map(app => (
+      {appList.map(app => (
         <AppRow key={app.name} app={app} />
       ))}
+
+      {overflowAppList && !overflowExpanded && (
+        <ExpandContainer onClick={() => setOverflowExpanded(true)}>
+          <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);
+  }
+`;

config/twoFactor.js

@@ -67,12 +67,12 @@ export default {
     },
     {
       name: 'Microsoft Authenticator',
-      image: '/static/img/static/img/microsoft_authenticator_80.png',
+      image: '/static/img/microsoft_authenticator_80.png',
       url: 'https://www.microsoft.com/en-us/account/authenticator',
       sources: {
-        ios:
-          'https://itunes.apple.com/app/microsoft-authenticator/id983156458',
-        android: 'https://play.google.com/store/apps/details?id=com.azure.authenticator',
+        ios: 'https://itunes.apple.com/app/microsoft-authenticator/id983156458',
+        android:
+          'https://play.google.com/store/apps/details?id=com.azure.authenticator',
       },
     },
     {