diff --git a/.storybook/locale.ts b/.storybook/locale.ts index dff975122cad..62cb35ec03f4 100644 --- a/.storybook/locale.ts +++ b/.storybook/locale.ts @@ -318,7 +318,24 @@ const locale: Record = { whyBraveRewardsDesc2: 'Well, you\'ve come to the right place. Brave welcomes you to the new internet. One where your time is valued, your personal data is kept private, and you actually get paid for your attention.', whyHow: 'Why & How', yourBalance: 'Your Balance', - yourWallet: 'Your wallet' + yourWallet: 'Your wallet', + // New Tab Page + adsTrackersBlocked: 'Ads and Trackers Blocked', + httpsUpgraded: 'HTTPS Upgrades', + estimatedTimeSaved: 'Estimated Time Saved', + minutes: 'minutes', + photoBy: 'Photo by', + thumbRemoved: 'Top site removed', + undoRemoved: 'Undo', + close: 'Close', + hide: 'Hide', + dashboardSettingsTitle: 'Dashboard Settings', + showBackgroundImg: 'Show background image', + showBraveStats: 'Show Brave Stats', + showClock: 'Show Clock', + showTopSites: 'Show Top Sites', + showRewards: 'Show Rewards', + rewardsWidgetEnableBrandedWallpaperTitle: 'Get paid to view this sponsored background image.' } export default locale diff --git a/components/brave_new_tab_ui/stories/default/data/topSites.ts b/components/brave_new_tab_ui/data/defaultTopSites.ts similarity index 71% rename from components/brave_new_tab_ui/stories/default/data/topSites.ts rename to components/brave_new_tab_ui/data/defaultTopSites.ts index 8b8dda3e6fcc..58379ee348b9 100644 --- a/components/brave_new_tab_ui/stories/default/data/topSites.ts +++ b/components/brave_new_tab_ui/data/defaultTopSites.ts @@ -2,12 +2,12 @@ * 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 AppStoreFavicon from './siteIcons/appstore.png' -import BraveFavicon from './siteIcons/brave.png' -import FacebookFavicon from './siteIcons/facebook.png' -import PlayStoreFavicon from './siteIcons/playstore.png' -import TwitterFavicon from './siteIcons/twitter.png' -import YouTubeFavicon from './siteIcons/youtube.png' +import AppStoreFavicon from '../../img/newtab/defaultTopSitesIcon/appstore.png' +import BraveFavicon from '../../img/newtab/defaultTopSitesIcon/brave.png' +import FacebookFavicon from '../../img/newtab/defaultTopSitesIcon/facebook.png' +import PlayStoreFavicon from '../../img/newtab/defaultTopSitesIcon/playstore.png' +import TwitterFavicon from '../../img/newtab/defaultTopSitesIcon/twitter.png' +import YouTubeFavicon from '../../img/newtab/defaultTopSitesIcon/youtube.png' export const defaultTopSitesData = [ { diff --git a/components/brave_new_tab_ui/storage.ts b/components/brave_new_tab_ui/storage.ts index 61390ed6ffa0..713a5cbdbbb0 100644 --- a/components/brave_new_tab_ui/storage.ts +++ b/components/brave_new_tab_ui/storage.ts @@ -4,13 +4,18 @@ // Utils import { debounce } from '../common/debounce' +import { + getLoadTimeDataString, + getLoadTimeDataBoolean, + getChromeDataBoolean +} from '../common/loadTimeDataUtils' const keyName = 'new-tab-data' const defaultState: NewTab.State = { initialDataLoaded: false, - textDirection: window.loadTimeData.getString('textdirection'), - featureFlagBraveNTPBrandedWallpaper: window.loadTimeData.getBoolean('featureFlagBraveNTPBrandedWallpaper'), + textDirection: getLoadTimeDataString('textdirection'), + featureFlagBraveNTPBrandedWallpaper: getLoadTimeDataBoolean('featureFlagBraveNTPBrandedWallpaper'), showBackgroundImage: false, showStats: false, showClock: false, @@ -23,7 +28,7 @@ const defaultState: NewTab.State = { pinnedTopSites: [], gridSites: [], showEmptyPage: false, - isIncognito: chrome.extension.inIncognitoContext, + isIncognito: getChromeDataBoolean('inIncognitoContext'), useAlternativePrivateSearchEngine: false, isTor: false, isQwant: false, @@ -55,9 +60,9 @@ const defaultState: NewTab.State = { } } -if (chrome.extension.inIncognitoContext) { - defaultState.isTor = window.loadTimeData.getBoolean('isTor') - defaultState.isQwant = window.loadTimeData.getBoolean('isQwant') +if (getChromeDataBoolean('inIncognitoContext')) { + defaultState.isTor = getLoadTimeDataBoolean('isTor') + defaultState.isQwant = getLoadTimeDataBoolean('isQwant') } const getPersistentData = (state: NewTab.State): NewTab.PersistentState => { diff --git a/components/brave_new_tab_ui/stories/default.tsx b/components/brave_new_tab_ui/stories/default.tsx index f6e632accd9a..9620d08aeb76 100644 --- a/components/brave_new_tab_ui/stories/default.tsx +++ b/components/brave_new_tab_ui/stories/default.tsx @@ -3,22 +3,52 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react' +import { Provider as ReduxProvider } from 'react-redux' import { storiesOf } from '@storybook/react' -import { withKnobs, select, boolean } from '@storybook/addon-knobs/react' +import { withKnobs, select } from '@storybook/addon-knobs/react' +import Theme from 'brave-ui/theme/brave-default' +import DarkTheme from 'brave-ui/theme/brave-dark' +import BraveCoreThemeProvider from '../../common/BraveCoreThemeProvider' // Components -import NewTabPage from './default/index' +import NewTabPage from '../containers/newTab' +import * as actions from '../actions/new_tab_actions' +import store from '../store' +import { getNewTabData } from './default/data/storybookState' -storiesOf('New Tab/Default', module) +export default function Provider ({ story }: any) { + return ( + + + {story} + + + ) +} + +storiesOf('New Tab/Containers', module) .addDecorator(withKnobs) - .add('Page', () => { + .addDecorator(story => ) + .add('Default', () => { + const doNothing = (value: boolean) => value return ( ) }) diff --git a/components/brave_new_tab_ui/stories/default/data/background.ts b/components/brave_new_tab_ui/stories/default/data/background.ts deleted file mode 100644 index f325835fb1bb..000000000000 --- a/components/brave_new_tab_ui/stories/default/data/background.ts +++ /dev/null @@ -1,103 +0,0 @@ -/* 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 Image1 from '../../../../img/newtab/ntp-1.webp' -import Image2 from '../../../../img/newtab/ntp-2.webp' -import Image3 from '../../../../img/newtab/ntp-3.webp' -import Image4 from '../../../../img/newtab/ntp-4.webp' -import Image5 from '../../../../img/newtab/ntp-5.webp' -import Image6 from '../../../../img/newtab/ntp-6.webp' -import Image7 from '../../../../img/newtab/ntp-7.webp' -import Image8 from '../../../../img/newtab/ntp-8.webp' -import Image9 from '../../../../img/newtab/ntp-9.webp' -import Image10 from '../../../../img/newtab/ntp-10.webp' -import Image11 from '../../../../img/newtab/ntp-11.webp' -import Image12 from '../../../../img/newtab/ntp-12.webp' -import Image13 from '../../../../img/newtab/ntp-13.webp' -import Image14 from '../../../../img/newtab/ntp-14.webp' -import Image15 from '../../../../img/newtab/ntp-15.webp' -import Image16 from '../../../../img/newtab/ntp-16.webp' - -export const images = [ - { - 'source': Image1, - 'author': 'Pok Rie', - 'link': 'https://www.pexels.com/@pok-rie-33563' - }, - { - 'source': Image2, - 'author': 'Jack Millard', - 'link': 'https://unsplash.com/@millarjb' - }, - { - 'source': Image3, - 'author': 'Buzz Andersen', - 'link': 'https://unsplash.com/@ldandersen' - }, - { - 'source': Image4, - 'author': 'Frank McKenna', - 'link': 'https://unsplash.com/@frankiefoto' - }, - { - 'source': Image5, - 'author': 'SpaceX', - 'link': 'https://www.flickr.com/photos/spacex/' - }, - { - 'source': Image6, - 'author': 'SpaceX', - 'link': 'https://www.flickr.com/photos/spacex/' - }, - { - 'source': Image7, - 'author': 'SpaceX', - 'link': 'https://www.flickr.com/photos/spacex/' - }, - { - 'source': Image8, - 'author': 'Will Christiansen', - 'link': 'https://www.theskyfolk.com' - }, - { - 'source': Image9, - 'author': 'Will Christiansen', - 'link': 'https://www.theskyfolk.com' - }, - { - 'source': Image10, - 'author': 'Will Christiansen', - 'link': 'https://www.theskyfolk.com' - }, - { - 'source': Image11, - 'author': 'Will Christiansen', - 'link': 'http://www.noutgons.nl/' - }, - { - 'source': Image12, - 'author': 'Artem Bali', - 'link': 'https://www.pexels.com/@belart84' - }, - { - 'source': Image13, - 'author': 'Hristo Fidanov', - 'link': 'https://www.pexels.com/@hristo-fidanov-520662' - }, - { - 'source': Image14, - 'author': 'Life of Pix', - 'link': 'https://www.pexels.com/@life-of-pix' - }, - { - 'source': Image15, - 'author': 'Cassie Boca', - 'link': 'https://unsplash.com/@cassieboca' - }, - { - 'source': Image16, - 'author': 'Braden Jarvis', - 'link': 'https://unsplash.com/@jarvisphoto' - } -] diff --git a/components/brave_new_tab_ui/stories/default/data/siteIcons/appstore.png b/components/brave_new_tab_ui/stories/default/data/siteIcons/appstore.png deleted file mode 100644 index 323456f5e6c7..000000000000 Binary files a/components/brave_new_tab_ui/stories/default/data/siteIcons/appstore.png and /dev/null differ diff --git a/components/brave_new_tab_ui/stories/default/data/siteIcons/facebook.png b/components/brave_new_tab_ui/stories/default/data/siteIcons/facebook.png deleted file mode 100644 index 231076c247e1..000000000000 Binary files a/components/brave_new_tab_ui/stories/default/data/siteIcons/facebook.png and /dev/null differ diff --git a/components/brave_new_tab_ui/stories/default/data/siteIcons/playstore.png b/components/brave_new_tab_ui/stories/default/data/siteIcons/playstore.png deleted file mode 100644 index 5d6419829d0a..000000000000 Binary files a/components/brave_new_tab_ui/stories/default/data/siteIcons/playstore.png and /dev/null differ diff --git a/components/brave_new_tab_ui/stories/default/data/siteIcons/twitter.png b/components/brave_new_tab_ui/stories/default/data/siteIcons/twitter.png deleted file mode 100644 index c04213379393..000000000000 Binary files a/components/brave_new_tab_ui/stories/default/data/siteIcons/twitter.png and /dev/null differ diff --git a/components/brave_new_tab_ui/stories/default/data/siteIcons/youtube.png b/components/brave_new_tab_ui/stories/default/data/siteIcons/youtube.png deleted file mode 100644 index ed23028a8b37..000000000000 Binary files a/components/brave_new_tab_ui/stories/default/data/siteIcons/youtube.png and /dev/null differ diff --git a/components/brave_new_tab_ui/stories/default/data/storybookState.ts b/components/brave_new_tab_ui/stories/default/data/storybookState.ts new file mode 100644 index 000000000000..7ce7b0a7c3da --- /dev/null +++ b/components/brave_new_tab_ui/stories/default/data/storybookState.ts @@ -0,0 +1,64 @@ +import { select, boolean, number } from '@storybook/addon-knobs/react' +import { images } from '../../../data/backgrounds' +import { defaultTopSitesData } from '../../../data/defaultTopSites' +import dummyBrandedWallpaper from './brandedWallpaper' + +function generateStaticImages (images: NewTab.Image[]) { + const staticImages = {} + for (const image of images) { + Object.assign(staticImages, { + [image.author]: { + ...image, + source: require('../../../../img/newtab/' + image.source) + } + }) + } + return staticImages +} + +function generateTopSites (topSites: typeof defaultTopSitesData) { + const staticTopSites = [] + for (const [index, topSite] of topSites.entries()) { + staticTopSites.push({ + ...topSite, + index, + title: topSite.name, + letter: '', + thumb: '', + themeColor: '', + computedThemeColor: '', + pinned: false + }) + } + return staticTopSites +} + +function shouldShowBrandedWallpaperData (shouldShow: boolean) { + if (shouldShow === false) { + return { + BrandedWallpaper: '', + wallpaperImageUrl: '', + logo: { image: '', companyName: '', alt: '', destinationUrl: '' } + } + } + return dummyBrandedWallpaper +} + +export const getNewTabData = (state: NewTab.State) => ({ + ...state, + brandedWallpaperData: shouldShowBrandedWallpaperData(boolean('Show branded background image?', true)), + backgroundImage: select('Background image', generateStaticImages(images), generateStaticImages(images)['SpaceX']), + showBackgroundImage: boolean('Show background image?', true), + showStats: boolean('Show stats?', true), + showClock: boolean('Show clock?', true), + showTopSites: boolean('Show top sites?', true), + showRewards: boolean('Show rewards?', true), + textDirection: select('Text direction', { ltr: 'ltr', rtl: 'rtl' } , 'ltr'), + gridSites: generateTopSites(defaultTopSitesData), + stats: { + ...state.stats, + adsBlockedStat: number('Number of blocked items', 1337), + httpsUpgradesStat: number('Number of HTTPS upgrades', 1337) + }, + initialDataLoaded: true +}) diff --git a/components/brave_new_tab_ui/stories/default/footerInfo.tsx b/components/brave_new_tab_ui/stories/default/footerInfo.tsx deleted file mode 100644 index 3fad7fdf3494..000000000000 --- a/components/brave_new_tab_ui/stories/default/footerInfo.tsx +++ /dev/null @@ -1,103 +0,0 @@ -/* 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 { Link, Navigation, IconLink, PhotoName } from '../../components/default' -import * as S from '../../components/default/page' - -// Icons -import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon } from 'brave-ui/components/icons' - -// Helpers -import { getLocale } from '../fakeLocale' -import Settings from './settings' - -interface Props { - textDirection: string - onClickOutside: () => void - backgroundImageInfo: any - onClickSettings: () => void - showSettingsMenu: boolean - showPhotoInfo: boolean - toggleShowBackgroundImage: () => void - toggleShowClock: () => void - toggleShowStats: () => void - toggleShowTopSites: () => void - toggleShowRewards: () => void - toggleBrandedWallpaperOptIn: () => void - showBackgroundImage: boolean - showClock: boolean - showStats: boolean - showTopSites: boolean - showRewards: boolean - brandedWallpaperOptIn: boolean -} - -export default class FooterInfo extends React.PureComponent { - - render () { - const { - textDirection, - backgroundImageInfo, - onClickSettings, - showSettingsMenu, - showPhotoInfo, - onClickOutside, - toggleShowBackgroundImage, - toggleShowClock, - toggleShowStats, - toggleShowTopSites, - toggleShowRewards, - toggleBrandedWallpaperOptIn, - showBackgroundImage, - showClock, - showStats, - showTopSites, - showRewards, - brandedWallpaperOptIn - } = this.props - - return ( - <> - {showPhotoInfo && - - - {`${getLocale('photoBy')} `} - - {backgroundImageInfo.author} - - - - } - - - - - - - - - - ) - } -} diff --git a/components/brave_new_tab_ui/stories/default/helpers.ts b/components/brave_new_tab_ui/stories/default/helpers.ts deleted file mode 100644 index c393341ed4e0..000000000000 --- a/components/brave_new_tab_ui/stories/default/helpers.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* 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 { defaultTopSitesData } from './data/topSites' - -export const getItems = () => { - return defaultTopSitesData - .map((value, key) => ({ - id: `item-${key}`, - name: value.name, - url: value.url, - favicon: value.favicon, - background: value.background - })) -} - -export const reorder = (list: any[], startIndex: number, endIndex: number) => { - const result = Array.from(list) - const [removed] = result.splice(startIndex, 1) - result.splice(endIndex, 0, removed) - - return result -} - -export const getRandomBackgroundData = (imagesArr: any[]) => - imagesArr[Math.floor(Math.random() * imagesArr.length)] diff --git a/components/brave_new_tab_ui/stories/default/index.tsx b/components/brave_new_tab_ui/stories/default/index.tsx deleted file mode 100644 index b2500b5f1299..000000000000 --- a/components/brave_new_tab_ui/stories/default/index.tsx +++ /dev/null @@ -1,310 +0,0 @@ -/* 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 { ClockWidget as Clock, RewardsWidget as Rewards } from '../../components/default' -import * as Page from '../../components/default/page' -import BrandedWallpaperLogo from '../../components/default/brandedWallpaper/logo' - -import TopSitesList from './topSites/topSitesList' -import Stats from './stats' -import TopSitesNotification from '../../containers/newTab/notification' -import FooterInfo from './footerInfo' - -// Assets -import { getRandomBackgroundData } from './helpers' -import { images } from './data/background' -import dummyBrandedWallpaper from './data/brandedWallpaper' - -const generateRandomBackgroundData = getRandomBackgroundData(images) -interface State { - showSettingsMenu: boolean - showBackgroundImage: boolean - showStats: boolean - showClock: boolean - showTopSites: boolean - showTopSitesNotification: boolean - showRewards: boolean - brandedWallpaperOptIn: boolean - adsEstimatedEarnings: number - balance: NewTab.RewardsBalance - promotions: NewTab.Promotion[] - enabledAds: boolean - enabledMain: boolean - totalContribution: number - walletCreated: boolean - walletCreating: boolean - walletCreateFailed: boolean - walletCorrupted: boolean, - isBrandedWallpaperNotificationDismissed: boolean - brandedWallpaper?: NewTab.BrandedWallpaper -} - -interface Props { - textDirection: string - showBrandedWallpaper: boolean - showTopSitesNotification: boolean - isAdsOn: boolean - isAdsSupported: boolean -} - -export default class NewTabPage extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - showSettingsMenu: false, - showBackgroundImage: true, - showStats: true, - showClock: true, - showTopSites: true, - showTopSitesNotification: props.showTopSitesNotification, - showRewards: true, - brandedWallpaperOptIn: true, - adsEstimatedEarnings: 5, - enabledAds: false, - enabledMain: false, - promotions: [], - balance: { - total: 0, - rates: {}, - wallets: {} - }, - totalContribution: 0.0, - walletCreated: false, - walletCreating: false, - walletCreateFailed: false, - walletCorrupted: false, - isBrandedWallpaperNotificationDismissed: false - } - } - - doNothing = (s: string) => { - console.log('doNothing called:', s) - } - - toggleShowBackgroundImage = () => { - this.setState({ showBackgroundImage: !this.state.showBackgroundImage }) - } - - toggleShowClock = () => { - this.setState({ showClock: !this.state.showClock }) - } - - toggleShowStats = () => { - this.setState({ showStats: !this.state.showStats }) - } - - toggleShowTopSites = () => { - this.setState({ showTopSites: !this.state.showTopSites }) - } - - toggleShowRewards = () => { - this.setState({ showRewards: !this.state.showRewards }) - } - - closeSettings = () => { - this.setState({ showSettingsMenu: false }) - } - - toggleSettings = () => { - this.setState({ showSettingsMenu: !this.state.showSettingsMenu }) - } - - enableAds = () => { - this.setState({ enabledAds: true }) - } - - enableRewards = () => { - this.setState({ enabledMain: true }) - } - - toggleBrandedWallpaperOptIn = () => { - this.setState({ brandedWallpaperOptIn: !this.state.brandedWallpaperOptIn }) - } - - hideSiteRemovalNotification = () => { - this.setState({ showTopSitesNotification: false }) - } - - onDismissBrandedWallpaperNotification = () => { - this.setState({ isBrandedWallpaperNotificationDismissed: true }) - } - - createWallet = () => { - this.setState({ walletCreating: true }) - setTimeout(() => { - this.setState({ walletCreated: true }) - this.enableAds() - this.enableRewards() - }, 1000) - } - - componentDidUpdate (prevProps: Props) { - if (!prevProps.showBrandedWallpaper && this.props.showBrandedWallpaper) { - const brandedWallpaper = dummyBrandedWallpaper - this.setState({ brandedWallpaper }) - } - if (prevProps.showTopSitesNotification !== this.props.showTopSitesNotification) { - this.setState({ showTopSitesNotification: this.props.showTopSitesNotification }) - } - } - - render () { - const { showSettingsMenu, showBackgroundImage, showClock, showStats, showTopSites, showRewards } = this.state - const { - enabledMain, - adsEstimatedEarnings, - walletCorrupted, - walletCreateFailed, - walletCreated, - walletCreating, - promotions, - balance, - totalContribution - } = this.state - const { textDirection } = this.props - - const enabledAds = this.state.enabledAds && this.props.isAdsOn - - const hasImage = showBackgroundImage - let imageSource - if (hasImage) { - imageSource = this.state.brandedWallpaper ? this.state.brandedWallpaper.wallpaperImageUrl : generateRandomBackgroundData.source - } - - const showBrandedWallpaper = this.props.showBrandedWallpaper && - this.state.brandedWallpaperOptIn - - return ( - - - {hasImage && - - } - - {hasImage && - - } - - {showStats && - - - - } - {showClock && - - - - } - {showTopSites && - - - - } - {this.state.showTopSitesNotification && - - { console.log('undo site ignored') }, - onUndoAllSiteIgnored: () => { console.log('undo all site ignored') }, - onHideSiteRemovalNotification: () => this.hideSiteRemovalNotification() - }} - /> - - } - {(showRewards || (showBrandedWallpaper && !this.state.isBrandedWallpaperNotificationDismissed)) && - - - - } - - - {showBrandedWallpaper && this.state.brandedWallpaper && - this.state.brandedWallpaper.logo && - - - - } - - - - - - ) - } -} diff --git a/components/brave_new_tab_ui/stories/default/settings.tsx b/components/brave_new_tab_ui/stories/default/settings.tsx deleted file mode 100644 index ef89cd10571e..000000000000 --- a/components/brave_new_tab_ui/stories/default/settings.tsx +++ /dev/null @@ -1,138 +0,0 @@ -/* 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 { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper, IconButton } from '../../components/default' - -import { Toggle } from '../../components/toggle' - -import { getLocale } from '../fakeLocale' -import { SettingsIcon } from 'brave-ui/components/icons' - -interface Props { - textDirection: string - showSettingsMenu: boolean - onClick: () => void - onClickOutside: () => void - toggleShowBackgroundImage: () => void - toggleShowClock: () => void - toggleShowStats: () => void - toggleShowTopSites: () => void - toggleShowRewards: () => void - toggleBrandedWallpaperOptIn: () => void - showBackgroundImage: boolean - showStats: boolean - showClock: boolean - showTopSites: boolean - brandedWallpaperOptIn: boolean - showRewards: boolean -} - -export default class Settings extends React.PureComponent { - settingsMenuRef: React.RefObject - constructor (props: Props) { - super(props) - this.settingsMenuRef = React.createRef() - } - - handleClickOutside = (event: Event) => { - if (this.settingsMenuRef && !this.settingsMenuRef.current.contains(event.target)) { - this.props.onClickOutside() - } - } - - componentDidMount () { - document.addEventListener('mousedown', this.handleClickOutside) - } - - componentWillUnmount () { - document.removeEventListener('mousedown', this.handleClickOutside) - } - - onKeyPressSettings = (event: React.KeyboardEvent) => { - if (event.key === 'Escape') { - this.props.onClickOutside() - } - } - - render () { - const { - textDirection, - showSettingsMenu, - toggleShowBackgroundImage, - toggleShowClock, - toggleShowStats, - toggleShowTopSites, - toggleShowRewards, - toggleBrandedWallpaperOptIn, - showBackgroundImage, - showStats, - showClock, - showTopSites, - showRewards, - brandedWallpaperOptIn, - onClick - } = this.props - return ( - - - {showSettingsMenu && - - {getLocale('dashboardSettingsTitle')} - - {getLocale('showBackgroundImg')} - - - - {getLocale('brandedWallpaperOptIn')} - - - - {getLocale('showBraveStats')} - - - - {getLocale('showClock')} - - - - {getLocale('showTopSites')} - - - - {getLocale('showRewards')} - - - - } - - ) - } -} diff --git a/components/brave_new_tab_ui/stories/default/stats.tsx b/components/brave_new_tab_ui/stories/default/stats.tsx deleted file mode 100644 index 0e826d5799ba..000000000000 --- a/components/brave_new_tab_ui/stories/default/stats.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/* 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 { StatsContainer, StatsItem } from '../../components/default' - -// Helpers -import { getLocale } from '../fakeLocale' -import createWidget from '../../components/default/widget' - -class Stats extends React.PureComponent<{}, {}> { - render () { - return ( - - - - - - ) - } -} - -export default createWidget(Stats) diff --git a/components/brave_new_tab_ui/stories/default/topSites/topSite.tsx b/components/brave_new_tab_ui/stories/default/topSites/topSite.tsx deleted file mode 100644 index 8d9ea52e3c4b..000000000000 --- a/components/brave_new_tab_ui/stories/default/topSites/topSite.tsx +++ /dev/null @@ -1,54 +0,0 @@ -/* 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' - -// DND utils -import { Draggable } from 'react-beautiful-dnd' - -// Feature-specific components -import { Tile, TileActionsContainer, TileAction, TileFavicon } from '../../../components/default' - -// Icons -import { PinIcon, BookmarkOIcon, CloseStrokeIcon } from 'brave-ui/components/icons' - -interface Props { - item: { - id: string - name: string - url: string - favicon: string - background: string - } - index: number -} - -export default class TopSite extends React.PureComponent { - render () { - const { item, index } = this.props - return ( - - { - (provided, snapshot) => ( - - - - - {/* Hover is BookmarkIcon */} - - - - - ) - } - - ) - } -} diff --git a/components/brave_new_tab_ui/stories/default/topSites/topSitesList.tsx b/components/brave_new_tab_ui/stories/default/topSites/topSitesList.tsx deleted file mode 100644 index 00cf487aeaa6..000000000000 --- a/components/brave_new_tab_ui/stories/default/topSites/topSitesList.tsx +++ /dev/null @@ -1,62 +0,0 @@ -/* 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' - -// DND utils -import { DragDropContext, Droppable } from 'react-beautiful-dnd' -import { reorder, getItems } from '../helpers' - -// Feature-specific components -import { List } from '../../../components/default/topSites' -import createWidget from '../../../components/default/widget' - -// Component group -import TopSite from './topSite' - -interface Props {} - -interface State { - items: Array -} - -class TopSitesList extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { items: getItems() } - } - - onDragEnd = (result: any) => { - // dropped outside the list - if (!result.destination) { - return - } - - const items = reorder(this.state.items, result.source.index, result.destination.index) - this.setState({ items }) - } - - render () { - return ( - - - {(provided) => { - return ( - - {this.state.items.map((item, index) => )} - {provided.placeholder} - - ) - }} - - - ) - } -} - -export default createWidget(TopSitesList) diff --git a/components/brave_new_tab_ui/stories/fakeLocale.ts b/components/brave_new_tab_ui/stories/fakeLocale.ts deleted file mode 100644 index 49206e2f7d5a..000000000000 --- a/components/brave_new_tab_ui/stories/fakeLocale.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* 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: any = { - // stats - adsTrackersBlocked: 'Ads and Trackers Blocked', - httpsUpgrades: 'HTTPS Upgrades', - estimatedTimeSaved: 'Estimated Time Saved', - minutes: 'minutes', - // footer info - photoBy: 'Photo by', - // site removal notification - thumbRemoved: 'Top site removed', - undoRemoved: 'Undo', - restoreAll: 'Restore All', - close: 'Close', - // settings - dashboardSettingsTitle: 'Dashboard Settings', - showBackgroundImg: 'Show background image', - showBraveStats: 'Show Brave Stats', - showClock: 'Show Clock', - showTopSites: 'Show Top Sites', - showRewards: 'Show Rewards' -} - -export default locale - -export const getLocale = (word: string) => locale[word] diff --git a/components/common/BraveCoreThemeProvider.tsx b/components/common/BraveCoreThemeProvider.tsx index f50f69ee3ab3..0ea97e6d779f 100644 --- a/components/common/BraveCoreThemeProvider.tsx +++ b/components/common/BraveCoreThemeProvider.tsx @@ -23,13 +23,28 @@ export default class BraveCoreThemeProvider extends React.Component { this.setState(themeTypeToState(themeType)) } + componentDidUpdate (prevProps: Props) { + // Update theme based on React prop changes. + // This only runs on storybook and is needed + // since it has no access to chrome.* APIs + if ((chrome as any).braveTheme === undefined) { + if (prevProps.initialThemeType !== this.props.initialThemeType) { + this.setThemeState(this.props.initialThemeType || 'System') + } + } + } + render () { // Don't render until we have a theme if (!this.state.themeType) return null diff --git a/components/common/loadTimeDataUtils.ts b/components/common/loadTimeDataUtils.ts new file mode 100644 index 000000000000..f8d4926b8b67 --- /dev/null +++ b/components/common/loadTimeDataUtils.ts @@ -0,0 +1,37 @@ +// Copyright (c) 2020 The Brave Authors. All rights reserved. +// 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/. + +export function getLoadTimeDataString (key: string) { + if ( + (window as any) === undefined || + (window as any).loadTimeData === undefined || + (window as any).loadTimeData.getString === undefined + ) { + return key + } + return (window as any).loadTimeData.getString(key) +} + +export function getLoadTimeDataBoolean (key: string, forceBooleanType?: boolean) { + if ( + (window as any) === undefined || + (window as any).loadTimeData === undefined || + (window as any).loadTimeData.getBoolean === undefined + ) { + return !!forceBooleanType + } + return (window as any).loadTimeData.getBoolean(key) +} + +export function getChromeDataBoolean (key: string, forceBooleanType?: boolean) { + if ( + (chrome as any) === undefined || + (chrome as any).extension === undefined || + (chrome as any).extension[key] === undefined + ) { + return !!forceBooleanType + } + return chrome.extension[key] +} diff --git a/components/img/newtab/defaultTopSitesIcon/brave.ico b/components/img/newtab/defaultTopSitesIcon/brave.ico deleted file mode 100644 index 374fb80899c8..000000000000 Binary files a/components/img/newtab/defaultTopSitesIcon/brave.ico and /dev/null differ diff --git a/components/brave_new_tab_ui/stories/default/data/siteIcons/brave.png b/components/img/newtab/defaultTopSitesIcon/brave.png similarity index 100% rename from components/brave_new_tab_ui/stories/default/data/siteIcons/brave.png rename to components/img/newtab/defaultTopSitesIcon/brave.png