From 32c00803ede4abc513de18ced218b19ed50def22 Mon Sep 17 00:00:00 2001 From: Brian Lovin Date: Wed, 16 Jan 2019 17:47:38 -0800 Subject: [PATCH 1/3] Fix msft authenticator image url --- config/twoFactor.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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', }, }, { From 69f4798ce1d267e9a111d60cb250b1785ad7ef6b Mon Sep 17 00:00:00 2001 From: Brian Lovin Date: Wed, 16 Jan 2019 17:49:02 -0800 Subject: [PATCH 2/3] Add truncation to only show first 3 apps by default --- components/ChecklistItem/Apps.js | 54 ++++++++++++++++++++++++------- components/ChecklistItem/style.js | 25 ++++++++++++++ 2 files changed, 68 insertions(+), 11 deletions(-) diff --git a/components/ChecklistItem/Apps.js b/components/ChecklistItem/Apps.js index 0350197..da0dd46 100644 --- a/components/ChecklistItem/Apps.js +++ b/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 ( - - Apps - {resource.apps.map(app => ( - - ))} - - ); +type State = { + overflowExpanded: boolean, }; + +export class Apps extends React.Component { + 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 ( + + Apps + {appList.map(app => ( + + ))} + + {overflowAppList && !overflowExpanded && ( + + + + )} + + {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); + } +`; From b486bb8e7fbf8395b8bbd30d8114d17470fee784 Mon Sep 17 00:00:00 2001 From: Brian Lovin Date: Wed, 16 Jan 2019 17:52:09 -0800 Subject: [PATCH 3/3] Use hooks! --- components/ChecklistItem/Apps.js | 70 ++++++++++++++------------------ 1 file changed, 30 insertions(+), 40 deletions(-) diff --git a/components/ChecklistItem/Apps.js b/components/ChecklistItem/Apps.js index da0dd46..e0a18e0 100644 --- a/components/ChecklistItem/Apps.js +++ b/components/ChecklistItem/Apps.js @@ -1,5 +1,6 @@ // @flow -import React from 'react'; +// $FlowIssue +import React, { useState } from 'react'; import { AppsContainer, SectionHeading, ExpandContainer } from './style'; import { Button } from '../Button'; import type { ChecklistResource } from '../../types'; @@ -9,45 +10,34 @@ type Props = { resource: ChecklistResource, }; -type State = { - overflowExpanded: boolean, -}; +export const Apps = ({ resource }: Props) => { + const [overflowExpanded, setOverflowExpanded] = useState(false); -export class Apps extends React.Component { - state = { overflowExpanded: false }; + if (!resource.apps) return null; - 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 ( - - Apps - {appList.map(app => ( - - ))} - - {overflowAppList && !overflowExpanded && ( - - - - )} - - {overflowAppList && - overflowExpanded && - overflowAppList.map(app => )} - - ); + let appList = resource.apps; + let overflowAppList; + if (appList.length > 3) { + overflowAppList = appList.slice(3, appList.length); + appList = appList.slice(0, 3); } -} + + return ( + + Apps + {appList.map(app => ( + + ))} + + {overflowAppList && !overflowExpanded && ( + setOverflowExpanded(true)}> + + + )} + + {overflowAppList && + overflowExpanded && + overflowAppList.map(app => )} + + ); +};