diff --git a/src/features/welcome/index.ts b/src/features/welcome/index.ts index ed487e065d05..68bdaa697a79 100644 --- a/src/features/welcome/index.ts +++ b/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 } diff --git a/src/features/welcome/select/carat.svg b/src/features/welcome/select/carat.svg new file mode 100644 index 000000000000..61aadff2c5cb --- /dev/null +++ b/src/features/welcome/select/carat.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/features/welcome/select/index.ts b/src/features/welcome/select/index.ts new file mode 100644 index 000000000000..716bf9fc265d --- /dev/null +++ b/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('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; + ` : '' + } +` diff --git a/stories/features/welcome/page/fakeLocale.ts b/stories/features/welcome/page/fakeLocale.ts index 5dbdc8f74302..77be6e3f2534 100644 --- a/stories/features/welcome/page/fakeLocale.ts +++ b/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', diff --git a/stories/features/welcome/page/screens/importBox.tsx b/stories/features/welcome/page/screens/importBox.tsx index 03ca14ec62fd..528911953c7e 100644 --- a/stories/features/welcome/page/screens/importBox.tsx +++ b/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 { 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) => { + this.setState({ importSelected: event.target.value !== '' }) + } + render () { const { index, currentScreen } = this.props + const { importSelected } = this.state return ( { {locale.importFromAnotherBrowser} {locale.setupImport} - + + + + + + + + ) } diff --git a/stories/features/welcome/page/screens/searchBox.tsx b/stories/features/welcome/page/screens/searchBox.tsx index 821005815d8d..fbcd9220e508 100644 --- a/stories/features/welcome/page/screens/searchBox.tsx +++ b/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'