diff --git a/components/ChecklistItem/Apps.js b/components/ChecklistItem/Apps.js index 0350197..e0a18e0 100644 --- a/components/ChecklistItem/Apps.js +++ b/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 ( - + Apps - {resource.apps.map(app => ( + {appList.map(app => ( ))} + + {overflowAppList && !overflowExpanded && ( + setOverflowExpanded(true)}> + + + )} + + {overflowAppList && + overflowExpanded && + overflowAppList.map(app => )} ); }; diff --git a/components/ChecklistItem/style.js b/components/ChecklistItem/style.js index f9f518b..5d8ba91 100644 --- a/components/ChecklistItem/style.js +++ b/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); + } +`; diff --git a/config/twoFactor.js b/config/twoFactor.js index 81014e7..644e2b4 100644 --- a/config/twoFactor.js +++ b/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', }, }, {