diff --git a/components/brave_welcome_ui/brave_welcome.tsx b/components/brave_welcome_ui/brave_welcome.tsx index 1ef991faa57e..ae28433d5a41 100644 --- a/components/brave_welcome_ui/brave_welcome.tsx +++ b/components/brave_welcome_ui/brave_welcome.tsx @@ -11,7 +11,7 @@ import Theme from 'brave-ui/theme/brave-default' import { ThemeProvider } from 'brave-ui/theme' // Components -import App from './components/app' +import App from './containers/app' // Utils import store from './store' diff --git a/components/brave_welcome_ui/components/button/index.ts b/components/brave_welcome_ui/components/button/index.ts new file mode 100644 index 000000000000..d391c743749f --- /dev/null +++ b/components/brave_welcome_ui/components/button/index.ts @@ -0,0 +1,79 @@ +/* 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 { ComponentType } from 'react' +import styled, { css } from 'brave-ui/theme' +import Button, { Props as ButtonProps } from 'brave-ui/components/buttonsIndicators/button' + +interface BaseButtonProps { + active?: boolean +} + +const BaseButton = styled('button')` + box-sizing: border-box; + padding: 0; + margin: 0; + display: block; + line-height: 1; + background: none; + border: none; + cursor: pointer; + outline: inherit; +` + +export const FooterButton = styled(Button as ComponentType)` + outline: none; + border: 1px solid ${p => p.theme.palette.grey400}; + color: ${p => p.theme.color.text}; + + &:hover { + opacity: .9; + } + + &:focus { + box-shadow: 0 0 0 2px rgba(255,80,0,0.2); + } +` + +export const SkipButton = styled(BaseButton)` + color: ${p => p.theme.color.text}; + text-decoration: underline; + font-weight: 300; + letter-spacing: 0; + + &:hover { + opacity: .9; + } +` + +export const PrimaryButton = styled(Button as ComponentType)` + outline: none; + + &:hover { + opacity: .9; + } + + &:focus { + box-shadow: 0 0 0 2px rgba(255,80,0,0.2); + } +` + +export const Bullet = styled(BaseButton as ComponentType)` + padding: 0 7px; + font-size: 36px; + color: #7C7D8C; + letter-spacing: 0; + + &:hover { + color: #343546; + } + + ${p => p.active && css` + color: #FB542B; + + &:hover { + color: #C72E03; + } + `} +` diff --git a/components/brave_welcome_ui/components/images/index.ts b/components/brave_welcome_ui/components/images/index.ts new file mode 100644 index 000000000000..90388bd7a4ad --- /dev/null +++ b/components/brave_welcome_ui/components/images/index.ts @@ -0,0 +1,81 @@ +/* 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, { keyframes } from 'styled-components' + +import LionImage from './lion_logo.svg' +import ImportImage from './welcome_import.svg' +import RewardsImage from './welcome_rewards.svg' +import SearchImage from './welcome_search.svg' +import ShieldsImage from './welcome_shields.svg' +import ThemeImage from './welcome_theme.svg' +import WelcomeImage from './welcome_bg.svg' + +const BaseImage = styled<{}, 'img'>('img')` + box-sizing: border-box; + display: block; + max-width: 100%; +` + +export const WelcomeLionImage = styled(BaseImage).attrs({ src: LionImage })` + height: 140px; +` + +export const WelcomeImportImage = styled(BaseImage).attrs({ src: ImportImage })` + height: 190px; +` + +export const WelcomeRewardsImage = styled(BaseImage).attrs({ src: RewardsImage })` + height: 190px; +` + +export const WelcomeSearchImage = styled(BaseImage).attrs({ src: SearchImage })` + height: 190px; +` + +export const WelcomeShieldsImage = styled(BaseImage).attrs({ src: ShieldsImage })` + height: 190px; +` + +export const WelcomeThemeImage = styled(BaseImage).attrs({ src: ThemeImage })` + height: 190px; +` + +interface BackgroundProps { + position: string +} + +export const topToBottom = keyframes` + from { + transform: translateY(-100%); + } + + to { + transform: translateY(0); + } +` + +export const BackgroundContainer = styled<{}, 'div'>('div')` + box-sizing: border-box; + width: inherit; + height: inherit; + position: absolute; + animation-delay: 0s; + animation-name: ${topToBottom}; + animation-duration: 2000ms; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-iteration-count: 1; + overflow: hidden; +` + +export const Background = styled('div')` + box-sizing: border-box; + background: url('${WelcomeImage}') repeat-x; + width: 500%; + height: inherit; + will-change: transform; + transform: translateX(${p => p.position}); + transition: transform ease-in-out 1200ms; +` diff --git a/components/brave_welcome_ui/components/images/lion_logo.svg b/components/brave_welcome_ui/components/images/lion_logo.svg new file mode 100644 index 000000000000..09dd2e4288f0 --- /dev/null +++ b/components/brave_welcome_ui/components/images/lion_logo.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/brave_welcome_ui/components/images/welcome_bg.svg b/components/brave_welcome_ui/components/images/welcome_bg.svg new file mode 100644 index 000000000000..0b33a2e86b3a --- /dev/null +++ b/components/brave_welcome_ui/components/images/welcome_bg.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/components/brave_welcome_ui/components/images/welcome_import.svg b/components/brave_welcome_ui/components/images/welcome_import.svg new file mode 100644 index 000000000000..d765f3c69993 --- /dev/null +++ b/components/brave_welcome_ui/components/images/welcome_import.svg @@ -0,0 +1,164 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/brave_welcome_ui/components/images/welcome_rewards.svg b/components/brave_welcome_ui/components/images/welcome_rewards.svg new file mode 100644 index 000000000000..00771d218695 --- /dev/null +++ b/components/brave_welcome_ui/components/images/welcome_rewards.svg @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/brave_welcome_ui/components/images/welcome_search.svg b/components/brave_welcome_ui/components/images/welcome_search.svg new file mode 100644 index 000000000000..df9626557f47 --- /dev/null +++ b/components/brave_welcome_ui/components/images/welcome_search.svg @@ -0,0 +1,189 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/brave_welcome_ui/components/images/welcome_shields.svg b/components/brave_welcome_ui/components/images/welcome_shields.svg new file mode 100644 index 000000000000..44a9620e636d --- /dev/null +++ b/components/brave_welcome_ui/components/images/welcome_shields.svg @@ -0,0 +1,172 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/brave_welcome_ui/components/images/welcome_theme.svg b/components/brave_welcome_ui/components/images/welcome_theme.svg new file mode 100644 index 000000000000..fcc3ce85e67b --- /dev/null +++ b/components/brave_welcome_ui/components/images/welcome_theme.svg @@ -0,0 +1,181 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/brave_welcome_ui/components/index.ts b/components/brave_welcome_ui/components/index.ts new file mode 100644 index 000000000000..68bdaa697a79 --- /dev/null +++ b/components/brave_welcome_ui/components/index.ts @@ -0,0 +1,37 @@ +/* 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 { SkipButton, FooterButton, Bullet, PrimaryButton } from './button' +import { Title, Paragraph } from './text' +import { SelectBox } from './select' +import { + Footer, + FooterLeftColumn, + FooterMiddleColumn, + FooterRightColumn, + Content, + Page, + Panel, + SelectGrid, + SlideContent +} from './wrapper' + +export { + SkipButton, + PrimaryButton, + FooterButton, + Bullet, + Title, + Paragraph, + Footer, + FooterLeftColumn, + FooterMiddleColumn, + FooterRightColumn, + Content, + Page, + Panel, + SelectGrid, + SlideContent, + SelectBox +} diff --git a/components/brave_welcome_ui/components/select/carat.svg b/components/brave_welcome_ui/components/select/carat.svg new file mode 100644 index 000000000000..61aadff2c5cb --- /dev/null +++ b/components/brave_welcome_ui/components/select/carat.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/components/brave_welcome_ui/components/select/index.ts b/components/brave_welcome_ui/components/select/index.ts new file mode 100644 index 000000000000..e75aaa4e6774 --- /dev/null +++ b/components/brave_welcome_ui/components/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 'brave-ui/theme' +import palette from 'brave-ui/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/components/brave_welcome_ui/components/text/index.ts b/components/brave_welcome_ui/components/text/index.ts new file mode 100644 index 000000000000..92288b374bd5 --- /dev/null +++ b/components/brave_welcome_ui/components/text/index.ts @@ -0,0 +1,25 @@ +/* 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 from 'styled-components' +import Heading from 'brave-ui/components/text/heading' + +export const Title = styled(Heading)` + font-size: 28px; + color: #212121; + margin: 10px 0 0; + text-align: center; + line-height: 44px; +` + +export const Paragraph = styled<{}, 'p'>('p')` + display: block; + -webkit-font-smoothing: antialiased; + font-size: 17px; + color: #76777A; + line-height: 32px; + text-align: center; + margin: 10px 0 20px; + font-family: Muli, sans-serif; +` diff --git a/components/brave_welcome_ui/components/wrapper/index.ts b/components/brave_welcome_ui/components/wrapper/index.ts new file mode 100644 index 000000000000..292cf1fd6fd4 --- /dev/null +++ b/components/brave_welcome_ui/components/wrapper/index.ts @@ -0,0 +1,128 @@ +/* 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, keyframes } from 'styled-components' + +const fadeIn = keyframes` + from { + opacity: 0; + } + to { + opacity: 1; + } +` + +const BaseGrid = styled<{}, 'div'>('div')` + box-sizing: border-box; + display: grid; + height: 100%; +` + +const BaseColumn = styled<{}, 'div'>('div')` + box-sizing: border-box; + position: relative; + display: flex; +` + +export const SelectGrid = styled(BaseGrid)` + display: grid; + height: 100%; + grid-template-columns: 2fr 1fr; + grid-template-rows: 1fr; + padding: 0 30px; + grid-gap: 30px; + align-items: center; +` + +export const Footer = styled(BaseGrid.withComponent('footer'))` + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; + padding: 0 50px 40px; +` + +export const FooterLeftColumn = styled(BaseColumn)` + align-items: center; + justify-content: flex-start; +` + +export const FooterMiddleColumn = styled(BaseColumn)` + align-items: center; + justify-content: center; +` + +export const FooterRightColumn = styled(BaseColumn)` + align-items: center; + justify-content: flex-end; +` + +interface ContentProps { + active: boolean + zIndex: number + screenPosition: string + isPrevious: boolean +} + +export const Content = styled('section')` + opacity: 0; + will-change: transform; + transform: translateX(${p => p.isPrevious ? '-' + p.screenPosition : p.screenPosition}) scale(0.8); + transition: opacity 700ms, transform 700ms ease-in-out; + position: absolute; + z-index: ${p => p.zIndex}; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1; + padding: 0 60px; + + ${p => p.active && css` + opacity: 1; + transform: translateX(0) scale(1); + `} +` + +export const Page = styled<{}, 'div'>('div')` + width: inherit%; + height: inherit; + display: flex; + align-items: center; + justify-content: center; +` + +export const Panel = styled('div')` + user-select: none; + /* animation start state must be the same as "from" keyframe */ + opacity: 0; + /* animation stuff courtesy of ross */ + animation-delay: 1s; + animation-name: ${fadeIn}; + animation-duration: 1200ms; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + /* end of animation stuff */ + box-sizing: border-box; + position: relative; + overflow: hidden; + margin: 0; + background-color: rgba(255,255,255,0.99); + border-radius: 20px; + box-shadow: 0 6px 12px 0 rgba(39, 46, 64, 0.2); + max-width: 600px; + width: 100%; + min-height: 540px; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 0; + font-size: inherit; +` + +export const SlideContent = styled<{}, 'div'>('div')` + max-width: inherit; + min-height: 540px; + display: flex; + justify-content: center; + align-items: center; +` diff --git a/components/brave_welcome_ui/components/app.tsx b/components/brave_welcome_ui/containers/app.tsx similarity index 96% rename from components/brave_welcome_ui/components/app.tsx rename to components/brave_welcome_ui/containers/app.tsx index 0570ae0afc42..f44acc4bb45f 100644 --- a/components/brave_welcome_ui/components/app.tsx +++ b/components/brave_welcome_ui/containers/app.tsx @@ -7,7 +7,7 @@ import { bindActionCreators, Dispatch } from 'redux' import { connect } from 'react-redux' // Feature-specific components -import { Page, Panel, SlideContent } from 'brave-ui/features/welcome' +import { Page, Panel, SlideContent } from '../components' // Component groups import WelcomeBox from './screens/welcomeBox' @@ -19,7 +19,7 @@ import ThemeBox from './screens/themeBox' import FooterBox from './screens/footerBox' // Images -import { Background, BackgroundContainer } from 'brave-ui/features/welcome/images' +import { Background, BackgroundContainer } from '../components/images' // Utils import * as welcomeActions from '../actions/welcome_actions' diff --git a/components/brave_welcome_ui/components/screens/footerBox.tsx b/components/brave_welcome_ui/containers/screens/footerBox.tsx similarity index 98% rename from components/brave_welcome_ui/components/screens/footerBox.tsx rename to components/brave_welcome_ui/containers/screens/footerBox.tsx index e4b52c20a07b..e92093f71cb1 100644 --- a/components/brave_welcome_ui/components/screens/footerBox.tsx +++ b/components/brave_welcome_ui/containers/screens/footerBox.tsx @@ -13,7 +13,7 @@ import { SkipButton, FooterButton, Bullet -} from 'brave-ui/features/welcome' +} from '../../components' // Shared components import { ArrowRightIcon } from 'brave-ui/components/icons' diff --git a/components/brave_welcome_ui/components/screens/importBox.tsx b/components/brave_welcome_ui/containers/screens/importBox.tsx similarity index 92% rename from components/brave_welcome_ui/components/screens/importBox.tsx rename to components/brave_welcome_ui/containers/screens/importBox.tsx index 9cfda25a2aaf..7805c6378ec7 100644 --- a/components/brave_welcome_ui/components/screens/importBox.tsx +++ b/components/brave_welcome_ui/containers/screens/importBox.tsx @@ -5,14 +5,18 @@ import * as React from 'react' // Feature-specific components -import { Content, Title, Paragraph, PrimaryButton, SelectGrid, SelectBox } from 'brave-ui/features/welcome' +import { Content, Title, Paragraph, PrimaryButton, SelectGrid, SelectBox } from '../../components' // Images -import { WelcomeImportImage } from 'brave-ui/features/welcome/images' +import { WelcomeImportImage } from '../../components/images' // Utils import { getLocale } from '../../../common/locale' -import { getSelectedBrowserProfile, getSourceBrowserProfileIndex, isValidBrowserProfiles } from '../../welcomeUtils' +import { + getSelectedBrowserProfile, + getSourceBrowserProfileIndex, + isValidBrowserProfiles +} from '../../welcomeUtils' export interface Props { index: number diff --git a/components/brave_welcome_ui/components/screens/rewardsBox.tsx b/components/brave_welcome_ui/containers/screens/rewardsBox.tsx similarity index 87% rename from components/brave_welcome_ui/components/screens/rewardsBox.tsx rename to components/brave_welcome_ui/containers/screens/rewardsBox.tsx index 710755c3a49b..d41ed500ab69 100644 --- a/components/brave_welcome_ui/components/screens/rewardsBox.tsx +++ b/components/brave_welcome_ui/containers/screens/rewardsBox.tsx @@ -5,10 +5,10 @@ import * as React from 'react' // Feature-specific components -import { Content, Title, Paragraph, PrimaryButton } from 'brave-ui/features/welcome' +import { Content, Title, Paragraph, PrimaryButton } from '../../components' // Images -import { WelcomeRewardsImage } from 'brave-ui/features/welcome/images' +import { WelcomeRewardsImage } from '../../components/images' // Utils import { getLocale } from '../../../common/locale' diff --git a/components/brave_welcome_ui/components/screens/searchBox.tsx b/components/brave_welcome_ui/containers/screens/searchBox.tsx similarity index 96% rename from components/brave_welcome_ui/components/screens/searchBox.tsx rename to components/brave_welcome_ui/containers/screens/searchBox.tsx index b61900f1268d..f007d99950ba 100644 --- a/components/brave_welcome_ui/components/screens/searchBox.tsx +++ b/components/brave_welcome_ui/containers/screens/searchBox.tsx @@ -6,10 +6,10 @@ import * as React from 'react' // Feature-specific components -import { Content, Title, Paragraph, PrimaryButton, SelectGrid, SelectBox } from 'brave-ui/features/welcome' +import { Content, Title, Paragraph, PrimaryButton, SelectGrid, SelectBox } from '../../components' // Images -import { WelcomeSearchImage } from 'brave-ui/features/welcome/images' +import { WelcomeSearchImage } from '../../components/images' // Utils import { getLocale } from '../../../common/locale' diff --git a/components/brave_welcome_ui/components/screens/shieldsBox.tsx b/components/brave_welcome_ui/containers/screens/shieldsBox.tsx similarity index 86% rename from components/brave_welcome_ui/components/screens/shieldsBox.tsx rename to components/brave_welcome_ui/containers/screens/shieldsBox.tsx index c16d20a0307a..63e0a4bfade1 100644 --- a/components/brave_welcome_ui/components/screens/shieldsBox.tsx +++ b/components/brave_welcome_ui/containers/screens/shieldsBox.tsx @@ -5,13 +5,13 @@ import * as React from 'react' // Feature-specific components -import { Content, Title, Paragraph } from 'brave-ui/features/welcome' +import { Content, Title, Paragraph } from '../../components' // Utils import { getLocale } from '../../../common/locale' // Images -import { WelcomeShieldsImage } from 'brave-ui/features/welcome/images' +import { WelcomeShieldsImage } from '../../components/images' interface Props { index: number diff --git a/components/brave_welcome_ui/components/screens/themeBox.tsx b/components/brave_welcome_ui/containers/screens/themeBox.tsx similarity index 87% rename from components/brave_welcome_ui/components/screens/themeBox.tsx rename to components/brave_welcome_ui/containers/screens/themeBox.tsx index f8719fb40cf1..7a88a923a09b 100644 --- a/components/brave_welcome_ui/components/screens/themeBox.tsx +++ b/components/brave_welcome_ui/containers/screens/themeBox.tsx @@ -5,10 +5,10 @@ import * as React from 'react' // Feature-specific components -import { Content, Title, Paragraph, PrimaryButton } from 'brave-ui/features/welcome' +import { Content, Title, Paragraph, PrimaryButton } from '../../components' // Images -import { WelcomeThemeImage } from 'brave-ui/features/welcome/images' +import { WelcomeThemeImage } from '../../components/images' // Utils import { getLocale } from '../../../common/locale' diff --git a/components/brave_welcome_ui/components/screens/welcomeBox.tsx b/components/brave_welcome_ui/containers/screens/welcomeBox.tsx similarity index 89% rename from components/brave_welcome_ui/components/screens/welcomeBox.tsx rename to components/brave_welcome_ui/containers/screens/welcomeBox.tsx index 03a3ac37b30b..f98b48cd7069 100644 --- a/components/brave_welcome_ui/components/screens/welcomeBox.tsx +++ b/components/brave_welcome_ui/containers/screens/welcomeBox.tsx @@ -5,13 +5,13 @@ import * as React from 'react' // Feature-specific components -import { Content, Title, Paragraph, PrimaryButton } from 'brave-ui/features/welcome' +import { Content, Title, Paragraph, PrimaryButton } from '../../components' // Shared components import { ArrowRightIcon } from 'brave-ui/components/icons' // Images -import { WelcomeLionImage } from 'brave-ui/features/welcome/images' +import { WelcomeLionImage } from '../../components/images' // Utils import { getLocale } from '../../../common/locale' diff --git a/components/brave_welcome_ui/stories/page/fakeLocale.ts b/components/brave_welcome_ui/stories/page/fakeLocale.ts new file mode 100644 index 000000000000..77be6e3f2534 --- /dev/null +++ b/components/brave_welcome_ui/stories/page/fakeLocale.ts @@ -0,0 +1,48 @@ +/* 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/. */ + +const locale = { + // first screen + welcome: 'Brave the new Internet', + whatIsBrave: 'Get ready to enjoy a faster and more secure browsing experience with a browser built to protect your privacy.', + letsGo: 'Let\'s go', + // second screen + importFromAnotherBrowser: 'Import bookmarks & settings', + 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', + setDefaultSearchEngine: 'Set default search engine', + chooseSearchEngine: 'Choose the search engine you would like to use by default when searching the web from the address bar.', + privateExperience: 'For a more private search experience, try DuckDuckGo.', + selectSearchEngine: 'Select a search engine', + fakeSearchProvider1: 'DuckDuckGo', + fakeSearchProvider2: 'Google (default)', + // fourth screen + chooseYourTheme: 'Choose your color theme', + findToolbarTheme: 'Set the color of your toolbar by selecting the light or dark option from the settings panel.', + // fifth screen + protectYourPrivacy: 'Manage your shields', + adjustProtectionLevel: 'Protect against privacy-invading ads and trackers while browsing with Brave Shields. Set Shields to "down" if a site doesn’t seem to be working properly.', + showMeWhere: 'Show Shields', + // sixth screen + enableBraveRewards: 'Enable Brave Rewards', + setupBraveRewards: 'Your attention is valuable. Earn by viewing privacy-respecting ads while you browse, and pay it forward to support content creators you love.', + getStarted: 'Enable Rewards', + // footer + skipWelcomeTour: 'Skip welcome tour', + next: 'Next', + done: 'Done', + // shared + confirm: 'Confirm', + confirmed: 'Confirmed', + theme: 'Change theme', + search: 'Settings' +} + +export default locale diff --git a/components/brave_welcome_ui/stories/page/index.tsx b/components/brave_welcome_ui/stories/page/index.tsx new file mode 100644 index 000000000000..7655b082d330 --- /dev/null +++ b/components/brave_welcome_ui/stories/page/index.tsx @@ -0,0 +1,148 @@ +/* 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 * as React from 'react' + +// Feature-specific components +import { Page, Panel, SlideContent } from '../../components' + +// Component groups +import WelcomeBox from './screens/welcomeBox' +import ImportBox from './screens/importBox' +import ShieldsBox from './screens/shieldsBox' +import SearchBox from './screens/searchBox' +import RewardsBox from './screens/rewardsBox' +import ThemeBox from './screens/themeBox' +import FooterBox from './screens/footerBox' + +// Images +import { Background, BackgroundContainer } from '../../components/images' + +export interface State { + currentScreen: number + fakeChangedSearchEngine: boolean + fakeBookmarksImported: boolean + fakeChangedDefaultTheme: boolean +} + +export interface Props { + isDefaultSearchGoogle: boolean +} + +export default class WelcomePage extends React.PureComponent { + constructor (props: Props) { + super(props) + this.state = { + currentScreen: 1, + fakeChangedSearchEngine: false, + fakeBookmarksImported: false, + fakeChangedDefaultTheme: false + } + } + + get totalScreensSize () { + return 6 + } + + onClickLetsGo = () => { + this.setState({ currentScreen: this.state.currentScreen + 1 }) + } + + onClickSlideBullet = (nextScreen: number) => { + this.setState({ currentScreen: nextScreen }) + } + + onClickNext = () => { + this.setState({ currentScreen: this.state.currentScreen + 1 }) + } + + onClickDone = () => { + // fades out + // fades in to new tab page + } + + onClickSkip = () => { + // fades out + // fades in to new tab page + } + + onClickImport = () => { + this.setState({ fakeBookmarksImported: !this.state.fakeBookmarksImported }) + // prob not the correct syntax for this behavior, but a reminder that + // clicking this button executes functionality and then auto proceed to next screen + this.setState({ currentScreen: this.state.currentScreen + 1 }) + console.log('IMPORTED!') + } + + onChangeDefaultSearchEngine = () => { + this.setState({ fakeChangedSearchEngine: !this.state.fakeChangedSearchEngine }) + console.log('CHANGED DEFAULT SEARCH ENGINE!') + } + + onClickConfirmDefaultSearchEngine = () => { + this.setState({ currentScreen: this.state.currentScreen + 1 }) + console.log('CONFIRMED DEFAULT SEARCH ENGINE!') + } + + onClickChooseYourTheme = () => { + this.setState({ fakeChangedDefaultTheme: !this.state.fakeChangedDefaultTheme }) + this.setState({ currentScreen: this.state.currentScreen + 1 }) + console.log('NEW THEME CHOOSED') + } + + onClickRewardsGetStarted = () => { + console.log('SENT TO REWARDS PAGE') + } + + get backgroundPosition () { + switch (this.state.currentScreen) { + case 1: + return '100%' + case 2: + return '200%' + case 3: + return '300%' + case 4: + return '400%' + case 5: + return '500%' + case 6: + return '600%' + default: + return '100%' + } + } + + render () { + const { currentScreen } = this.state + const { isDefaultSearchGoogle } = this.props + return ( + <> + + + + + + + + + + + + + + + + + + ) + } +} diff --git a/components/brave_welcome_ui/stories/page/screens/footerBox.tsx b/components/brave_welcome_ui/stories/page/screens/footerBox.tsx new file mode 100644 index 000000000000..10b5736ed62c --- /dev/null +++ b/components/brave_welcome_ui/stories/page/screens/footerBox.tsx @@ -0,0 +1,75 @@ +/* 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 * as React from 'react' + +// Feature-specific components +import { + Footer, + FooterLeftColumn, + FooterMiddleColumn, + FooterRightColumn, + SkipButton, + FooterButton, + Bullet +} from '../../../components' + +// Shared components +import { ArrowRightIcon } from 'brave-ui/components/icons' + +// Utils +import locale from '../fakeLocale' + +interface Props { + currentScreen: number + totalScreensSize: number + onClickSkip: () => void + onClickNext: () => void + onClickSlideBullet: (args: any) => any + onClickDone: () => void +} + +export default class FooterBox extends React.PureComponent { + render () { + const { currentScreen, totalScreensSize, onClickSkip, onClickNext, onClickSlideBullet, onClickDone } = this.props + return ( +
+ + {locale.skipWelcomeTour} + + + {Array.from({ length: totalScreensSize }, (v: undefined, k: number) => ( + • + ))} + + + { + currentScreen !== totalScreensSize && + // don't show the next button in the first screen + currentScreen !== 1 + ? ( + }} + /> + ) + : currentScreen !== 1 && ( + + ) + } + +
+ ) + } +} diff --git a/components/brave_welcome_ui/stories/page/screens/importBox.tsx b/components/brave_welcome_ui/stories/page/screens/importBox.tsx new file mode 100644 index 000000000000..cf50ba0ff592 --- /dev/null +++ b/components/brave_welcome_ui/stories/page/screens/importBox.tsx @@ -0,0 +1,80 @@ +/* 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 * as React from 'react' + +// Feature-specific components +import { + Content, + Title, + Paragraph, + PrimaryButton, + SelectGrid, + SelectBox +} from '../../../components' + +// Utils +import locale from '../fakeLocale' + +// Images +import { WelcomeImportImage } from '../../../components/images' + +interface Props { + index: number + currentScreen: number + onClick: () => void +} + +interface State { + importSelected: boolean +} + +export default class ImportBox extends React.PureComponent { + constructor (props: Props) { + super(props) + this.state = { + importSelected: false + } + } + + onClickImport = () => { + 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/components/brave_welcome_ui/stories/page/screens/rewardsBox.tsx b/components/brave_welcome_ui/stories/page/screens/rewardsBox.tsx new file mode 100644 index 000000000000..5b25311fe6d4 --- /dev/null +++ b/components/brave_welcome_ui/stories/page/screens/rewardsBox.tsx @@ -0,0 +1,45 @@ +/* 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 * as React from 'react' + +// Feature-specific components +import { Content, Title, Paragraph, PrimaryButton } from '../../../components' + +// Utils +import locale from '../fakeLocale' + +// Images +import { WelcomeRewardsImage } from '../../../components/images' + +interface Props { + index: number + currentScreen: number + onClick: () => void +} + +export default class PaymentsBox extends React.PureComponent { + render () { + const { index, currentScreen, onClick } = this.props + return ( + + + {locale.enableBraveRewards} + {locale.setupBraveRewards} + + + ) + } +} diff --git a/components/brave_welcome_ui/stories/page/screens/searchBox.tsx b/components/brave_welcome_ui/stories/page/screens/searchBox.tsx new file mode 100644 index 000000000000..8b3c9f426524 --- /dev/null +++ b/components/brave_welcome_ui/stories/page/screens/searchBox.tsx @@ -0,0 +1,82 @@ + +/* 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 * as React from 'react' + +// Feature-specific components +import { + Content, + Title, + Paragraph, + SelectGrid, + PrimaryButton, + SelectBox +} from '../../../components' + +// Utils +import locale from '../fakeLocale' + +// Images +import { WelcomeSearchImage } from '../../../components/images' + +interface Props { + index: number + currentScreen: number + onClick: () => void + fakeOnChange: () => void + isDefaultSearchGoogle: boolean +} + +interface State { + searchEngineSelected: boolean +} + +export default class SearchEngineBox extends React.PureComponent { + constructor (props: Props) { + super(props) + this.state = { + searchEngineSelected: false + } + } + + onChangeDefaultSearchEngine = (event: React.ChangeEvent) => { + console.log((event.target.value) !== '') + this.setState({ searchEngineSelected: (event.target.value) !== '' }) + this.props.fakeOnChange() + } + + render () { + const { index, currentScreen, onClick, isDefaultSearchGoogle } = this.props + const { searchEngineSelected } = this.state + const bodyText = isDefaultSearchGoogle ? `${locale.chooseSearchEngine} ${locale.privateExperience}` : locale.chooseSearchEngine + return ( + + + {locale.setDefaultSearchEngine} + {bodyText} + + + + + + + + + + ) + } +} diff --git a/components/brave_welcome_ui/stories/page/screens/shieldsBox.tsx b/components/brave_welcome_ui/stories/page/screens/shieldsBox.tsx new file mode 100644 index 000000000000..986283d82ea3 --- /dev/null +++ b/components/brave_welcome_ui/stories/page/screens/shieldsBox.tsx @@ -0,0 +1,37 @@ +/* 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 * as React from 'react' + +// Feature-specific components +import { Content, Title, Paragraph } from '../../../components' + +// Utils +import locale from '../fakeLocale' + +// Images +import { WelcomeShieldsImage } from '../../../components/images' + +interface Props { + index: number + currentScreen: number +} + +export default class ShieldsBox extends React.PureComponent { + render () { + const { index, currentScreen } = this.props + return ( + + + {locale.protectYourPrivacy} + {locale.adjustProtectionLevel} + + ) + } +} diff --git a/components/brave_welcome_ui/stories/page/screens/themeBox.tsx b/components/brave_welcome_ui/stories/page/screens/themeBox.tsx new file mode 100644 index 000000000000..6bc7d10ccb53 --- /dev/null +++ b/components/brave_welcome_ui/stories/page/screens/themeBox.tsx @@ -0,0 +1,45 @@ +/* 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 * as React from 'react' + +// Feature-specific components +import { Content, Title, Paragraph, PrimaryButton } from '../../../components' + +// Utils +import locale from '../fakeLocale' + +// Images +import { WelcomeThemeImage } from '../../../components/images' + +interface Props { + index: number + currentScreen: number + onClick: () => void +} + +export default class ThemingBox extends React.PureComponent { + render () { + const { index, currentScreen, onClick } = this.props + return ( + + + {locale.chooseYourTheme} + {locale.findToolbarTheme} + + + ) + } +} diff --git a/components/brave_welcome_ui/stories/page/screens/welcomeBox.tsx b/components/brave_welcome_ui/stories/page/screens/welcomeBox.tsx new file mode 100644 index 000000000000..82b90a370506 --- /dev/null +++ b/components/brave_welcome_ui/stories/page/screens/welcomeBox.tsx @@ -0,0 +1,49 @@ +/* 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 * as React from 'react' + +// Feature-specific components +import { Content, Title, Paragraph, PrimaryButton } from '../../../components' + +// Shared components +import { ArrowRightIcon } from 'brave-ui/components/icons' + +// Utils +import locale from '../fakeLocale' + +// Images +import { WelcomeLionImage } from '../../../components/images' + +interface Props { + index: number + currentScreen: number + onClick: () => void +} + +export default class ThemingBox extends React.PureComponent { + render () { + const { index, currentScreen, onClick } = this.props + return ( + + + {locale.welcome} + {locale.whatIsBrave} + }} + /> + + ) + } +} diff --git a/components/brave_welcome_ui/stories/story.tsx b/components/brave_welcome_ui/stories/story.tsx new file mode 100644 index 000000000000..5e1c90a616c6 --- /dev/null +++ b/components/brave_welcome_ui/stories/story.tsx @@ -0,0 +1,27 @@ +/* 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 * as React from 'react' +import { storiesOf } from '@storybook/react' +import { withKnobs, boolean } from '@storybook/addon-knobs' + +// Components +import WelcomePage from './page/index' + +const fullPageStoryStyles: object = { + width: '-webkit-fill-available', + height: '-webkit-fill-available' +} + +export const FullPageStory = (storyFn: any) => +
{storyFn()}
+ +storiesOf('Welcome', module) + .addDecorator(withKnobs) + .addDecorator(FullPageStory) + .add('Page', () => { + return ( + + ) + }) diff --git a/components/brave_welcome_ui/welcomeUtils.ts b/components/brave_welcome_ui/welcomeUtils.ts index 7f7134f43f1a..4079ef38404b 100644 --- a/components/brave_welcome_ui/welcomeUtils.ts +++ b/components/brave_welcome_ui/welcomeUtils.ts @@ -4,7 +4,7 @@ import { Dispatch } from 'redux' import { getSearchEngineProvidersSuccess, getBrowserProfilesSuccess } from './actions/welcome_actions' -import { State as ImportBoxState } from '../brave_welcome_ui/components/screens/importBox' +import { State as ImportBoxState } from './containers/screens/importBox' // Search box diff --git a/components/test/brave_welcome_ui/components/app_test.tsx b/components/test/brave_welcome_ui/components/app_test.tsx index f5c309a76d9e..8899cac19bd0 100644 --- a/components/test/brave_welcome_ui/components/app_test.tsx +++ b/components/test/brave_welcome_ui/components/app_test.tsx @@ -4,7 +4,7 @@ import { welcomeInitialState } from '../../testData' import { WelcomePage, mapStateToProps -} from '../../../brave_welcome_ui/components/app' +} from '../../../../components/brave_welcome_ui/containers/app' describe('welcomePage component', () => { describe('mapStateToProps', () => { diff --git a/components/test/brave_welcome_ui/components/importBox_test.tsx b/components/test/brave_welcome_ui/components/importBox_test.tsx index a457eb1cb8c9..784ed3a88ab6 100644 --- a/components/test/brave_welcome_ui/components/importBox_test.tsx +++ b/components/test/brave_welcome_ui/components/importBox_test.tsx @@ -4,9 +4,9 @@ import * as React from 'react' import { shallow } from 'enzyme' -import { Content, PrimaryButton } from 'brave-ui/features/welcome' -import { WelcomeImportImage } from 'brave-ui/features/welcome/images' -import ImportBox, { Props } from '../../../../components/brave_welcome_ui/components/screens/importBox' +import { Content, PrimaryButton } from '../../../../components/brave_welcome_ui/components' +import { WelcomeImportImage } from '../../../../components/brave_welcome_ui/components/images' +import ImportBox, { Props } from '../../../../components/brave_welcome_ui/containers/screens/importBox' import { mockImportSources } from '../../testData' describe('ImportBox component tests', () => { diff --git a/components/test/brave_welcome_ui/components/searchBox_test.tsx b/components/test/brave_welcome_ui/components/searchBox_test.tsx index ccf84799444b..bf21d7beec3e 100644 --- a/components/test/brave_welcome_ui/components/searchBox_test.tsx +++ b/components/test/brave_welcome_ui/components/searchBox_test.tsx @@ -4,9 +4,9 @@ import * as React from 'react' import { shallow } from 'enzyme' -import { Content } from 'brave-ui/features/welcome' -import { WelcomeSearchImage } from 'brave-ui/features/welcome/images' -import SearchBox, { Props } from '../../../../components/brave_welcome_ui/components/screens/searchBox' +import { Content } from '../../../../components/brave_welcome_ui/components' +import { WelcomeSearchImage } from '../../../../components/brave_welcome_ui/components/images' +import SearchBox, { Props } from '../../../../components/brave_welcome_ui/containers/screens/searchBox' import { mockSearchProviders } from '../../testData' describe('searchBox component tests', () => {