Changes structure of the project

stories/features/newTab/private/fakeData.ts

@@ -0,0 +1,12 @@
+/* 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 data = {
+ trackersBlockedCount: '9,245',
+ adsBlockedCount: '3,784',
+ httpsUpgradesCount: '5,663',
+ estimatedTimeCount: '11'
+}
+
+export default data

stories/features/newTab/private/fakeLocale.ts

@@ -0,0 +1,18 @@
+/* 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 = {
+ trackersBlocked: 'Trackers Blocked',
+ adsBlocked: 'Ads Blocked',
+ httpsUpgrades: 'HTTPS Upgrades',
+ estimatedTime: 'Estimated Time Saved',
+ minutes: 'minutes',
+ title: 'This is a Private Tab',
+ switchLabel: 'PrivateSearch with DuckDuckGo',
+ paragraph1: 'Private tabs are not logged in page history or counted in Brave Payments calculations. Private tabs and their cookies vanish when the browser is closed.',
+ paragraph2: 'Please note: Even though sites you visit in private tabs are not saved locally, they do not make you anonymous or invisible to your ISP, your employer, or to the sites you are visiting.',
+ paragraph3: 'With private search, Brave will use DuckDuckGo to answer your searches while you are in this private tab. DuckDuckGo is a search engine that does not track your search history, enabling you to search privately.'
+}
+
+export default locale

stories/features/newTab/private/index.tsx

@@ -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 * as React from 'react'
+
+// Components
+import Page from '../../../../src/old/page/index'
+import { Grid, Column } from '../../../../src/components/layout/gridList/index'
+import { DataBlock, DataItem } from '../../../../src/old/dataBlock/index'
+import Clock from '../../../../src/old/clock/index'
+import MediaContent from '../../../../src/old/mediaContent/index'
+import BoxedContent from '../../../../src/old/boxedContent/index'
+import { Heading } from '../../../../src/old/headings/index'
+import Paragraph from '../../../../src/old/paragraph/index'
+import SwitchButton from '../../../../src/old/switchButton/index'
+
+import theme from './theme'
+
+// Assets
+import locale from './fakeLocale'
+import data from './fakeData'
+import '../../../assets/fonts/muli.css'
+import '../../../assets/fonts/poppins.css'
+
+// Images
+const privateTabIcon = require('../../../assets/img/private_tab_pagearea_icon.svg')
+
+class NewPrivateTab extends React.PureComponent {
+ render () {
+ return (
+ <Page theme={theme.page}>
+ <Grid columns={3}>
+ <Column size={2}>
+ <DataBlock>
+ <DataItem
+ theme={theme.trackersBlocked}
+ description={locale.trackersBlocked}
+ counter={data.trackersBlockedCount} />
+ <DataItem
+ theme={theme.adsBlocked}
+ description={locale.adsBlocked}
+ counter={data.adsBlockedCount} />
+ <DataItem
+ theme={theme.httpsUpgrades}
+ description={locale.httpsUpgrades}
+ counter={data.httpsUpgradesCount} />
+ <DataItem
+ theme={theme.estimatedTime}
+ description={locale.estimatedTime}
+ text={locale.minutes}
+ counter={data.estimatedTimeCount} />
+ </DataBlock>
+ </Column>
+ <Column size={1} theme={theme.clockContainer}>
+ <Clock theme={theme.clock} />
+ </Column>
+ </Grid>
+ <BoxedContent theme={theme.textualContainer}>
+ <MediaContent media={privateTabIcon} theme={theme.media}>
+ <Heading level={1} theme={theme.title} text={locale.title} />
+ <Paragraph theme={theme.text} text={locale.paragraph1} />
+ <Paragraph theme={theme.italicText} text={locale.paragraph2} />
+ <BoxedContent theme={theme.switchContainer}>
+ <SwitchButton
+ id='togglePrivateSearchEngine'
+ size='large'
+ checked={false}
+ rightText={locale.switchLabel} />
+ </BoxedContent>
+ <Paragraph theme={theme.text} text={locale.paragraph3} />
+ </MediaContent>
+ </BoxedContent>
+ </Page>
+ )
+ }
+}
+
+export default NewPrivateTab

stories/features/newTab/private/theme.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/. */
+
+const theme = {
+ page: {
+ fontFamily: '"Poppins", sans-serif',
+ color: '#fff',
+ padding: '80px 60px 40px',
+ background: 'linear-gradient(#4b3c6e, #000)'
+ },
+ trackersBlocked: {
+ counterColor: '#f39030',
+ descriptionColor: '#fff'
+ },
+ adsBlocked: {
+ counterColor: '#fe521d',
+ descriptionColor: '#fff'
+ },
+ httpsUpgrades: {
+ counterColor: '#0796fa',
+ descriptionColor: '#fff'
+ },
+ estimatedTime: {
+ counterColor: '#999999',
+ descriptionColor: '#fff'
+ },
+ clock: {
+ color: 'rgba(255,255,255,0.8)'
+ },
+ clockContainer: {
+ justifyContent: 'flex-end'
+ },
+ textualContainer: {
+ maxWidth: '650px',
+ margin: '60px auto 0',
+ fontFamily: '"Muli", sans-serif'
+ },
+ media: {
+ width: '80px',
+ margin: '0 0 0 25px'
+ },
+ title: {
+ fontFamily: '"Poppins", sans-serif',
+ fontWeight: '400',
+ color: '#fff'
+ },
+ italicText: {
+ fontStyle: 'italic',
+ fontSize: '15px'
+ },
+ text: {
+ fontSize: '18px'
+ },
+ switchContainer: {
+ margin: '40px 0 25px'
+ }
+}
+
+export default theme

stories/features/newTab/story.tsx

@@ -0,0 +1,19 @@
+/* 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, addDecorator } from '@storybook/react'
+import { withKnobs } from '@storybook/addon-knobs'
+import { BetterPageVisualizer } from '../../storyUtil'
+
+// Components
+import NewPrivateTab from './private/index'
+
+addDecorator(withKnobs)
+
+// Globally adapt the story visualizer for this story
+addDecorator(BetterPageVisualizer)
+
+storiesOf('Feature Components/New Tab', module)
+ .add('Private', () => <NewPrivateTab />)