Imported from brave-ui: Welcome - ✨New welcome flow for importing set…

…tings

src/features/welcome/index.ts

@@ -4,6 +4,7 @@
 
 import { SkipButton, FooterButton, Bullet, PrimaryButton } from './button'
 import { Title, Paragraph } from './text'
+import { SelectBox } from './select'
 import {
   Footer,
   FooterLeftColumn,
@@ -31,5 +32,6 @@ export {
   Page,
   Panel,
   SelectGrid,
-  SlideContent
+  SlideContent,
+  SelectBox
 }

src/features/welcome/select/index.ts

@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled, { css } from '../../../theme'
+import palette from '../../../theme/colors'
+import caratUrl from './carat.svg'
+
+export interface SelectBoxProps {
+  id?: string
+  multiple?: boolean
+  autoFocus?: boolean
+  disabled?: boolean
+  value?: string
+  onChange?: (e: any) => void
+  children: React.ReactNode
+}
+
+export const SelectBox = styled<SelectBoxProps, 'select'>('select')`
+  box-sizing: border-box;
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  appearance: none;
+  height: 32px;
+  color: ${p => p.theme.color.text};
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  font-family: ${p => p.theme.fontFamily.heading};
+  border: 1px solid ${p => p.theme.color.inputBorder};
+  background: url(${caratUrl}) 97% / 16px no-repeat transparent;
+  /* avoid text overflow w/ carat */
+  -webkit-padding-start: 10px;
+  -webkit-padding-end: 32px;
+  outline-width: 2px;
+  outline-color: ${p => p.theme.color.brandBrave};
+  cursor: pointer;
+
+  > option {
+    /* see https://github.com/brave/brave-browser/issues/4213 for info */
+    color: ${palette.black};
+  }
+
+  ${(p: SelectBoxProps) => p.disabled
+    ? css`
+      user-select: none;
+      opacity: 0.6;
+    ` : ''
+  }
+  ${(p: SelectBoxProps) => p.multiple
+    ? css`
+      padding: 6px;
+      background: none;
+    ` : ''
+  }
+`

stories/features/welcome/page/fakeLocale.ts

@@ -9,8 +9,11 @@ const locale = {
   letsGo: 'Let\'s go',
   // second screen
   importFromAnotherBrowser: 'Import bookmarks & settings',
-  setupImport: 'Brave makes it easy to set up your usual environment by importing bookmarks and settings from other browsers installed on your computer.',
+  setupImport: 'Set up your usual browsing environment by importing bookmarks and settings from your old browser. Advanced import options can be found in Settings.',
   import: 'Import',
+  importFrom: 'Import from...',
+  fakeBrowser1: 'Chrome',
+  fakeBrowser2: 'Firefox',
   imported: 'Imported',
   // third screen
   setDefault: 'Set default',

stories/features/welcome/page/screens/importBox.tsx

@@ -5,7 +5,8 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Content, Title, Paragraph, PrimaryButton } from '../../../../../src/features/welcome/'
+import { Content, Title, Paragraph, PrimaryButton, SelectGrid } from '../../../../../src/features/welcome/'
+import { SelectBox } from '../../../../../src/features/welcome'
 
 // Utils
 import locale from '../fakeLocale'
@@ -20,22 +21,28 @@ interface Props {
 }
 
 interface State {
-  onClickFired: boolean
+  importSelected: boolean
 }
 
 export default class ImportBox extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
-    this.state = { onClickFired: false }
+    this.state = {
+      importSelected: false
+    }
   }
 
   onClickImport = () => {
-    this.setState({ onClickFired: !this.state.onClickFired })
     this.props.onClick()
   }
 
+  onChangeImportOption = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    this.setState({ importSelected: event.target.value !== '' })
+  }
+
   render () {
     const { index, currentScreen } = this.props
+    const { importSelected } = this.state
     return (
       <Content
         zIndex={index}
@@ -46,13 +53,21 @@ export default class ImportBox extends React.PureComponent<Props, State> {
         <WelcomeImportImage />
         <Title>{locale.importFromAnotherBrowser}</Title>
         <Paragraph>{locale.setupImport}</Paragraph>
-          <PrimaryButton
-            level='primary'
-            type='accent'
-            size='large'
-            text={this.state.onClickFired ? locale.import : locale.import}
-            onClick={this.onClickImport}
-          />
+          <SelectGrid>
+              <SelectBox onChange={this.onChangeImportOption}>
+                <option value=''>{locale.importFrom}</option>
+                <option value='Chrome'>{locale.fakeBrowser1}</option>
+                <option value='Firefox'>{locale.fakeBrowser2}</option>
+              </SelectBox>
+              <PrimaryButton
+                level='primary'
+                type='accent'
+                size='large'
+                text={locale.import}
+                disabled={!importSelected}
+                onClick={this.onClickImport}
+              />
+            </SelectGrid>
       </Content>
     )
   }

stories/features/welcome/page/screens/searchBox.tsx

@@ -7,7 +7,7 @@ import * as React from 'react'
 
 // Feature-specific components
 import { Content, Title, Paragraph, SelectGrid, PrimaryButton } from '../../../../../src/features/welcome/'
-import { SelectBox } from '../../../../../src/features/shields'
+import { SelectBox } from '../../../../../src/features/welcome'
 
 // Utils
 import locale from '../fakeLocale'