From 05e8e5e8ba3ff5345972dc90e2d277b5fc86b08f Mon Sep 17 00:00:00 2001 From: Peter Xu Date: Fri, 19 Jul 2019 15:27:14 -0700 Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20New=20Tab=20Page:=20remove=20pe?= =?UTF-8?q?rsistant=20menu=20state=20and=20ensure=20configuration=20menu?= =?UTF-8?q?=20is=20keyboard=20accessible;=20closes=20brave/brave-browser#5?= =?UTF-8?q?041;=20closes=20/brave/brave-browser/issues/5199?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../actions/new_tab_actions.ts | 6 +- components/brave_new_tab_ui/brave_new_tab.tsx | 7 ++ .../components/default/grid/index.ts | 4 - .../components/default/index.ts | 3 +- .../components/default/page/index.ts | 25 ++++- .../components/default/settings/index.ts | 19 ++-- .../components/toggle/index.tsx | 8 +- .../constants/new_tab_types.ts | 5 +- .../containers/newTab/footerInfo.tsx | 73 ++++++++++----- .../containers/newTab/index.tsx | 39 ++++---- .../containers/newTab/settings.tsx | 92 +++++++++++-------- .../reducers/new_tab_reducer.tsx | 9 +- components/brave_new_tab_ui/storage.ts | 2 +- components/definitions/newTab.d.ts | 2 +- .../actions/new_tab_actions_test.ts | 22 +++-- .../__snapshots__/settings_test.tsx.snap | 3 - .../components/settings_test.tsx | 29 +++++- .../reducers/new_tab_reducer_test.ts | 28 ------ components/test/testData.ts | 2 +- 19 files changed, 223 insertions(+), 155 deletions(-) delete mode 100644 components/test/brave_new_tab_ui/components/__snapshots__/settings_test.tsx.snap diff --git a/components/brave_new_tab_ui/actions/new_tab_actions.ts b/components/brave_new_tab_ui/actions/new_tab_actions.ts index a2a84a3224b4..a7f2415c5836 100644 --- a/components/brave_new_tab_ui/actions/new_tab_actions.ts +++ b/components/brave_new_tab_ui/actions/new_tab_actions.ts @@ -64,14 +64,12 @@ export const gridSitesUpdated = (gridSites: NewTab.Site[]) => action(types.NEW_T export const statsUpdated = () => action(types.NEW_TAB_STATS_UPDATED) +export const textDirectionUpdated = (textDirection: string) => action(types.NEW_TAB_TEXT_DIRECTION_UPDATED, textDirection) + export const changePrivateSearchEngine = (shouldUse: boolean) => action(types.NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE, { shouldUse }) -export const showSettingsMenu = () => action(types.NEW_TAB_SHOW_SETTINGS_MENU) - -export const closeSettingsMenu = () => action(types.NEW_TAB_CLOSE_SETTINGS_MENU) - export const preferencesUpdated = (preferences: Preferences) => action(types.NEW_TAB_PREFERENCES_UPDATED, { preferences }) diff --git a/components/brave_new_tab_ui/brave_new_tab.tsx b/components/brave_new_tab_ui/brave_new_tab.tsx index aa994389abe8..1a26af47f15c 100644 --- a/components/brave_new_tab_ui/brave_new_tab.tsx +++ b/components/brave_new_tab_ui/brave_new_tab.tsx @@ -23,6 +23,7 @@ import '../fonts/poppins.css' import '../fonts/muli.css' async function initialize () { + getTextDirection() render( @@ -42,6 +43,12 @@ async function updatePreferences () { actions.preferencesUpdated(preferences) } +function getTextDirection () { + const actions = dataFetchAPI.getActions() + const textDirection = window.loadTimeData.getString('textdirection') + actions.textDirectionUpdated(textDirection) +} + function updateStats () { const actions = dataFetchAPI.getActions() actions.statsUpdated() diff --git a/components/brave_new_tab_ui/components/default/grid/index.ts b/components/brave_new_tab_ui/components/default/grid/index.ts index 0d832fb1514e..731c2f904a94 100644 --- a/components/brave_new_tab_ui/components/default/grid/index.ts +++ b/components/brave_new_tab_ui/components/default/grid/index.ts @@ -82,10 +82,6 @@ export const Footer = styled<{}, 'footer'>('footer')` grid-template-areas: "credits actions"; - > *:first-child { - text-align: left; - } - > *:nth-child(2) { justify-content: flex-end; } diff --git a/components/brave_new_tab_ui/components/default/index.ts b/components/brave_new_tab_ui/components/default/index.ts index 19a25e8a16b1..c6354add2a24 100644 --- a/components/brave_new_tab_ui/components/default/index.ts +++ b/components/brave_new_tab_ui/components/default/index.ts @@ -4,7 +4,7 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ import { StatsContainer, StatsItem } from './stats' -import { Page, DynamicBackground, Gradient, Link, Navigation, IconLink, PhotoName } from './page' +import { Page, DynamicBackground, Gradient, Link, Navigation, IconLink, IconButton, PhotoName } from './page' import { Header, Main, Footer } from './grid' import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from './settings' import { List, ListWidget, Tile, TileActionsContainer, TileAction, TileFavicon } from './topSites' @@ -21,6 +21,7 @@ export { Link, Navigation, IconLink, + IconButton, PhotoName, Header, Main, diff --git a/components/brave_new_tab_ui/components/default/page/index.ts b/components/brave_new_tab_ui/components/default/page/index.ts index db8c038882d7..60ee0fd05dce 100644 --- a/components/brave_new_tab_ui/components/default/page/index.ts +++ b/components/brave_new_tab_ui/components/default/page/index.ts @@ -90,12 +90,11 @@ export const Navigation = styled<{}, 'nav'>('nav')` display: flex; ` -interface IconLinkProps { - disabled?: boolean +interface IconButtonProps { + clickDisabled?: boolean } -export const IconLink = styled('a')` - pointer-events: ${p => p.disabled && 'none'}; +export const IconLink = styled<{}, 'a'>('a')` display: flex; width: 24px; height: 24px; @@ -109,3 +108,21 @@ export const IconLink = styled('a')` opacity: 0.95; } ` + +export const IconButton = styled('button')` + pointer-events: ${p => p.clickDisabled && 'none'}; + display: flex; + width: 24px; + height: 24px; + padding: 0; + border: none; + margin: 12px; + cursor: pointer; + color: #ffffff; + background-color: transparent; + opacity: 0.7; + transition: opacity 0.15s ease, filter 0.15s ease; + &:hover { + opacity: 0.95; + } +` diff --git a/components/brave_new_tab_ui/components/default/settings/index.ts b/components/brave_new_tab_ui/components/default/settings/index.ts index 66daf8ff6237..ae9255a665be 100644 --- a/components/brave_new_tab_ui/components/default/settings/index.ts +++ b/components/brave_new_tab_ui/components/default/settings/index.ts @@ -4,7 +4,15 @@ import styled from 'styled-components' -export const SettingsMenu = styled<{}, 'div'>('div')` +interface Props { + textDirection: string +} + +export const SettingsMenu = styled('div')` + bottom: 48px; + width: auto; + position: absolute; + ${p => p.textDirection && (p.textDirection === 'rtl') ? `left: 12px` : `right: 12px`} background-color: ${p => p.theme.color.contextMenuBackground}; color: ${p => p.theme.color.contextMenuForeground}; border-radius: 8px; @@ -38,14 +46,7 @@ export const SettingsText = styled<{}, 'span'>('span')` ` export const SettingsWrapper = styled<{}, 'div'>('div')` - position: absolute; - bottom: 118px; - padding: 0 222px; + position: relative; display: flex; - width: 100%; justify-content: flex-end; - - @media screen and (max-width: 1150px) { - padding: 0 192px; - } ` diff --git a/components/brave_new_tab_ui/components/toggle/index.tsx b/components/brave_new_tab_ui/components/toggle/index.tsx index 92dfe40cd9ee..0f985b7c982b 100644 --- a/components/brave_new_tab_ui/components/toggle/index.tsx +++ b/components/brave_new_tab_ui/components/toggle/index.tsx @@ -9,7 +9,7 @@ export interface Props { testId?: string checked?: boolean disabled?: boolean - onChange?: (e: any) => void + onChange?: (event: any) => void id?: string readOnly?: boolean autoFocus?: boolean @@ -41,17 +41,17 @@ export class Toggle extends React.PureComponent { } } - handleChange (e: any) { + handleChange (event: any) { const { props } = this if (props.disabled) { return } if (!('checked' in props)) { - this.setState({ checked: e.target.checked }) + this.setState({ checked: event.target.checked }) } if (props.onChange) { - props.onChange({ target: { checked: e.target.checked } }) + props.onChange({ target: { checked: event.target.checked } }) } } diff --git a/components/brave_new_tab_ui/constants/new_tab_types.ts b/components/brave_new_tab_ui/constants/new_tab_types.ts index 62958751a90f..b335b85f30cb 100644 --- a/components/brave_new_tab_ui/constants/new_tab_types.ts +++ b/components/brave_new_tab_ui/constants/new_tab_types.ts @@ -18,7 +18,6 @@ export const enum types { NEW_TAB_GRID_SITES_UPDATED = '@@newtab/NEW_TAB_GRID_SITES_UPDATED', NEW_TAB_STATS_UPDATED = '@@newtab/NEW_TAB_STATS_UPDATED', NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE = '@@newtab/NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE', - NEW_TAB_SHOW_SETTINGS_MENU = '@@newtab/NEW_TAB_SHOW_SETTINGS_MENU', - NEW_TAB_CLOSE_SETTINGS_MENU = '@@newtab/NEW_TAB_CLOSE_SETTINGS_MENU', - NEW_TAB_PREFERENCES_UPDATED = '@@newtab/NEW_TAB_PREFERENCES_UPDATED' + NEW_TAB_PREFERENCES_UPDATED = '@@newtab/NEW_TAB_PREFERENCES_UPDATED', + NEW_TAB_TEXT_DIRECTION_UPDATED = '@@newtab/NEW_TAB_TEXT_DIRECTION_UPDATED' } diff --git a/components/brave_new_tab_ui/containers/newTab/footerInfo.tsx b/components/brave_new_tab_ui/containers/newTab/footerInfo.tsx index 3af76dbc7c81..53d1d0e5d308 100644 --- a/components/brave_new_tab_ui/containers/newTab/footerInfo.tsx +++ b/components/brave_new_tab_ui/containers/newTab/footerInfo.tsx @@ -8,46 +8,75 @@ import * as React from 'react' import { Link, Navigation, IconLink, PhotoName } from '../../components/default' // Icons -import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon, SettingsIcon } from 'brave-ui/components/icons' +import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon } from 'brave-ui/components/icons' // Helpers import { getLocale } from '../../../common/locale' +import Settings from './settings' interface Props { - backgroundImageInfo: NewTab.Image | undefined + textDirection: string + onClickOutside: () => void + backgroundImageInfo: any onClickSettings: () => void - isSettingsMenuOpen: boolean + showSettingsMenu: boolean showPhotoInfo: boolean + toggleShowBackgroundImage: () => void + toggleShowClock: () => void + toggleShowStats: () => void + toggleShowTopSites: () => void + showBackgroundImage: boolean + showClock: boolean + showStats: boolean + showTopSites: boolean } -export default class FooterInfo extends React.Component { +export default class FooterInfo extends React.PureComponent { + render () { const { + textDirection, backgroundImageInfo, onClickSettings, - isSettingsMenuOpen, - showPhotoInfo + showSettingsMenu, + showPhotoInfo, + onClickOutside, + toggleShowBackgroundImage, + toggleShowClock, + toggleShowStats, + toggleShowTopSites, + showBackgroundImage, + showClock, + showStats, + showTopSites } = this.props - if (!backgroundImageInfo) { - return null - } - return ( <> -
- {showPhotoInfo && - - {`${getLocale('photoBy')} `} - - {backgroundImageInfo.author} - - } -
+
+ {showPhotoInfo && + + {`${getLocale('photoBy')} `} + + {backgroundImageInfo.author} + + } +
- - - + diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx index bdf8cbea7a5c..dfcf90902700 100644 --- a/components/brave_new_tab_ui/containers/newTab/index.tsx +++ b/components/brave_new_tab_ui/containers/newTab/index.tsx @@ -17,7 +17,6 @@ import { } from '../../components/default' // Components -import Settings from './settings' import Stats from './stats' import Block from './block' import FooterInfo from './footerInfo' @@ -32,7 +31,16 @@ interface Props { saveShowStats: (value: boolean) => void } -class NewTabPage extends React.Component { +interface State { + showSettingsMenu: boolean +} + +class NewTabPage extends React.Component { + constructor (props: Props) { + super(props) + this.state = { showSettingsMenu: false } + } + componentDidMount () { // if a notification is open at component mounting time, close it this.props.actions.onHideSiteRemovalNotification() @@ -90,16 +98,17 @@ class NewTabPage extends React.Component { ) } - showSettings = () => { - this.props.actions.showSettingsMenu() + closeSettings = () => { + this.setState({ showSettingsMenu: false }) } - closeSettings = () => { - this.props.actions.closeSettingsMenu() + toggleSettings = () => { + this.setState({ showSettingsMenu: !this.state.showSettingsMenu }) } render () { const { newTabData, actions } = this.props + const { showSettingsMenu } = this.state if (!newTabData || !newTabData.backgroundImage) { return null @@ -141,10 +150,14 @@ class NewTabPage extends React.Component { } - { - newTabData.showSettings && - + { showStats={newTabData.showStats} showTopSites={newTabData.showTopSites} /> - } -
-
diff --git a/components/brave_new_tab_ui/containers/newTab/settings.tsx b/components/brave_new_tab_ui/containers/newTab/settings.tsx index 4a63f3fe1103..1743858f62c1 100644 --- a/components/brave_new_tab_ui/containers/newTab/settings.tsx +++ b/components/brave_new_tab_ui/containers/newTab/settings.tsx @@ -4,13 +4,17 @@ import * as React from 'react' -import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from '../../components/default' +import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper, IconButton } from '../../components/default' import { Toggle } from '../../components/toggle' import { getLocale } from '../../../common/locale' +import { SettingsIcon } from 'brave-ui/components/icons' export interface Props { + textDirection: string + showSettingsMenu: boolean + onClick: () => void onClickOutside: () => void toggleShowBackgroundImage: () => void toggleShowClock: () => void @@ -43,8 +47,16 @@ export default class Settings extends React.PureComponent { document.removeEventListener('mousedown', this.handleClickOutside) } + onKeyPressSettings = (event: React.KeyboardEvent) => { + if (event.key === 'Escape') { + this.props.onClickOutside() + } + } + render () { const { + textDirection, + showSettingsMenu, toggleShowBackgroundImage, toggleShowClock, toggleShowStats, @@ -52,46 +64,50 @@ export default class Settings extends React.PureComponent { showBackgroundImage, showStats, showClock, - showTopSites + showTopSites, + onClick } = this.props return ( - - - {getLocale('dashboardSettingsTitle')} - - {getLocale('showBackgroundImage')} - - - - {getLocale('showBraveStats')} - - - - {getLocale('showClock')} - - - - {getLocale('showTopSites')} - - + + + {showSettingsMenu && + + {getLocale('dashboardSettingsTitle')} + + {getLocale('showBackgroundImage')} + + + + {getLocale('showBraveStats')} + + + + {getLocale('showClock')} + + + + {getLocale('showTopSites')} + + - + } + ) } } diff --git a/components/brave_new_tab_ui/reducers/new_tab_reducer.tsx b/components/brave_new_tab_ui/reducers/new_tab_reducer.tsx index 7a50ed211f4f..46834345361b 100644 --- a/components/brave_new_tab_ui/reducers/new_tab_reducer.tsx +++ b/components/brave_new_tab_ui/reducers/new_tab_reducer.tsx @@ -27,14 +27,9 @@ export const newTabReducer: Reducer = (state: NewTab.S const startingState = state const payload = action.payload switch (action.type) { - case types.NEW_TAB_SHOW_SETTINGS_MENU: - state = { ...state, showSettings: true } + case types.NEW_TAB_TEXT_DIRECTION_UPDATED: + state = { ...state, textDirection: payload } break - - case types.NEW_TAB_CLOSE_SETTINGS_MENU: - state = { ...state, showSettings: false } - break - case types.BOOKMARK_ADDED: const topSite: NewTab.Site | undefined = state.topSites.find((site) => site.url === payload.url) if (topSite) { diff --git a/components/brave_new_tab_ui/storage.ts b/components/brave_new_tab_ui/storage.ts index 15b87cb69d04..0be4f5be603f 100644 --- a/components/brave_new_tab_ui/storage.ts +++ b/components/brave_new_tab_ui/storage.ts @@ -10,11 +10,11 @@ import { debounce } from '../common/debounce' const keyName = 'new-tab-data' const defaultState: NewTab.State = { + textDirection: 'ltr', showBackgroundImage: false, showStats: false, showClock: false, showTopSites: false, - showSettings: false, topSites: [], ignoredTopSites: [], pinnedTopSites: [], diff --git a/components/definitions/newTab.d.ts b/components/definitions/newTab.d.ts index b230dd7f7a31..e6158c1f2ddf 100644 --- a/components/definitions/newTab.d.ts +++ b/components/definitions/newTab.d.ts @@ -41,6 +41,7 @@ declare namespace NewTab { } export interface State { + textDirection: string topSites: Site[] ignoredTopSites: Site[] pinnedTopSites: Site[] @@ -56,7 +57,6 @@ declare namespace NewTab { gridLayoutSize?: 'small' showSiteRemovalNotification?: boolean showBackgroundImage: boolean - showSettings: boolean showStats: boolean showClock: boolean showTopSites: boolean diff --git a/components/test/brave_new_tab_ui/actions/new_tab_actions_test.ts b/components/test/brave_new_tab_ui/actions/new_tab_actions_test.ts index f7dd302569ab..e7b17ea4b354 100644 --- a/components/test/brave_new_tab_ui/actions/new_tab_actions_test.ts +++ b/components/test/brave_new_tab_ui/actions/new_tab_actions_test.ts @@ -144,14 +144,24 @@ describe('newTabActions', () => { payload: { shouldUse } }) }) - it('showSettingsMenu', () => { - expect(actions.showSettingsMenu()).toEqual({ - type: types.NEW_TAB_SHOW_SETTINGS_MENU + it('preferencesUpdated', () => { + const preferences = { + showBackgroundImage: false, + showStats: false, + showClock: false, + showTopSites: false + } + expect(actions.preferencesUpdated(preferences)).toEqual({ + meta: undefined, + type: types.NEW_TAB_PREFERENCES_UPDATED, + payload: { preferences } }) }) - it('closeSettingsMenu', () => { - expect(actions.showSettingsMenu()).toEqual({ - type: types.NEW_TAB_SHOW_SETTINGS_MENU + it('textDirectionUpdated', () => { + expect(actions.textDirectionUpdated('ltr')).toEqual({ + meta: undefined, + type: types.NEW_TAB_TEXT_DIRECTION_UPDATED, + payload: 'ltr' }) }) }) diff --git a/components/test/brave_new_tab_ui/components/__snapshots__/settings_test.tsx.snap b/components/test/brave_new_tab_ui/components/__snapshots__/settings_test.tsx.snap deleted file mode 100644 index 0de93b1ead7f..000000000000 --- a/components/test/brave_new_tab_ui/components/__snapshots__/settings_test.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`settings component tests should render the component properly 1`] = `ShallowWrapper {}`; diff --git a/components/test/brave_new_tab_ui/components/settings_test.tsx b/components/test/brave_new_tab_ui/components/settings_test.tsx index 286ba4d13407..6e6a6fb0c336 100644 --- a/components/test/brave_new_tab_ui/components/settings_test.tsx +++ b/components/test/brave_new_tab_ui/components/settings_test.tsx @@ -5,7 +5,10 @@ import Settings, { Props } from '../../../../components/brave_new_tab_ui/contain describe('settings component tests', () => { const mockProps: Props = { + textDirection: 'ltr', + onClick: () => null, onClickOutside: () => null, + showSettingsMenu: false, toggleShowBackgroundImage: () => null, showBackgroundImage: true, toggleShowClock: () => null, @@ -16,10 +19,33 @@ describe('settings component tests', () => { showTopSites: true } - it('should render the component properly', () => { + it('should not render the settings menu', () => { const wrapper = shallow( ) + expect(wrapper.find(SettingsMenu)).toHaveLength(0) + expect(wrapper.find(SettingsWrapper)).toHaveLength(1) + }) + + it('should render the setting menu properly', () => { + const wrapper = shallow( + { />) expect(wrapper.find(SettingsMenu)).toHaveLength(1) expect(wrapper.find(SettingsWrapper)).toHaveLength(1) - expect(wrapper).toMatchSnapshot() }) }) diff --git a/components/test/brave_new_tab_ui/reducers/new_tab_reducer_test.ts b/components/test/brave_new_tab_ui/reducers/new_tab_reducer_test.ts index 36c4323651dc..08278e0665bd 100644 --- a/components/test/brave_new_tab_ui/reducers/new_tab_reducer_test.ts +++ b/components/test/brave_new_tab_ui/reducers/new_tab_reducer_test.ts @@ -324,32 +324,4 @@ describe('newTabReducer', () => { }) }) }) - - describe('NEW_TAB_SHOW_SETTINGS_MENU', () => { - it('should set show settings to true', () => { - const mockState = { ...fakeState, showSettings: false } - const assertion = newTabReducer(mockState, { - type: types.NEW_TAB_SHOW_SETTINGS_MENU - }) - const expected = { - ...mockState, - showSettings: true - } - expect(assertion).toEqual(expected) - }) - }) - - describe('NEW_TAB_CLOSE_SETTINGS_MENU', () => { - it('should set show settings to false', () => { - const mockState = { ...fakeState, showSettings: true } - const assertion = newTabReducer(mockState, { - type: types.NEW_TAB_CLOSE_SETTINGS_MENU - }) - const expected = { - ...mockState, - showSettings: false - } - expect(assertion).toEqual(expected) - }) - }) }) diff --git a/components/test/testData.ts b/components/test/testData.ts index 0ac9676e6ffc..e1a030e00eb9 100644 --- a/components/test/testData.ts +++ b/components/test/testData.ts @@ -42,7 +42,7 @@ export const syncInitialState: Sync.ApplicationState = { syncData } export const newTabInitialState: NewTab.ApplicationState = { newTabData: { showBackgroundImage: false, - showSettings: false, + showSettingsMenu: false, topSites: [], ignoredTopSites: [], pinnedTopSites: [], From 8935550015670fa75771983ef4244f4eb5af42fc Mon Sep 17 00:00:00 2001 From: Peter Xu Date: Fri, 19 Jul 2019 15:27:58 -0700 Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20Storybook:=20Add=20normalizer?= =?UTF-8?q?=20for=20parity=20with=20browser=20webui=20(NTP)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/config.js | 3 +- .../brave_new_tab_ui/stories/default.tsx | 6 +- .../stories/default/footerInfo.tsx | 45 ++++++++- .../stories/default/index.tsx | 46 +++++----- .../stories/default/settings.tsx | 92 +++++++++++-------- .../brave_new_tab_ui/stories/fakeLocale.ts | 2 +- 6 files changed, 124 insertions(+), 70 deletions(-) diff --git a/.storybook/config.js b/.storybook/config.js index 1b950dce043d..b90e3ce0058d 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,6 +1,5 @@ -import { withBackgrounds } from '@storybook/addon-backgrounds' +import 'emptykit.css' import { configure, addDecorator, addParameters } from '@storybook/react' -import { withOptions } from '@storybook/addon-options' import { initLocale } from 'brave-ui/helpers' import locale from './locale' import { withThemesProvider } from 'storybook-addon-styled-component-theme' diff --git a/components/brave_new_tab_ui/stories/default.tsx b/components/brave_new_tab_ui/stories/default.tsx index a327a2fa38b5..e83a36b47f31 100644 --- a/components/brave_new_tab_ui/stories/default.tsx +++ b/components/brave_new_tab_ui/stories/default.tsx @@ -4,13 +4,17 @@ import * as React from 'react' import { storiesOf } from '@storybook/react' +import { withKnobs, select } from '@storybook/addon-knobs/react' // Components import NewTabPage from './default/index' storiesOf('New Tab/Default', module) + .addDecorator(withKnobs) .add('Page', () => { return ( - + ) }) diff --git a/components/brave_new_tab_ui/stories/default/footerInfo.tsx b/components/brave_new_tab_ui/stories/default/footerInfo.tsx index ec492e356c30..7fac03da21de 100644 --- a/components/brave_new_tab_ui/stories/default/footerInfo.tsx +++ b/components/brave_new_tab_ui/stories/default/footerInfo.tsx @@ -8,25 +8,47 @@ import * as React from 'react' import { Link, Navigation, IconLink, PhotoName } from '../../components/default' // Icons -import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon, SettingsIcon } from 'brave-ui/components/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 - isSettingsMenuOpen: boolean + showSettingsMenu: boolean showPhotoInfo: boolean + toggleShowBackgroundImage: () => void + toggleShowClock: () => void + toggleShowStats: () => void + toggleShowTopSites: () => void + showBackgroundImage: boolean + showClock: boolean + showStats: boolean + showTopSites: boolean } export default class FooterInfo extends React.PureComponent { + render () { const { + textDirection, backgroundImageInfo, onClickSettings, - isSettingsMenuOpen, - showPhotoInfo + showSettingsMenu, + showPhotoInfo, + onClickOutside, + toggleShowBackgroundImage, + toggleShowClock, + toggleShowStats, + toggleShowTopSites, + showBackgroundImage, + showClock, + showStats, + showTopSites } = this.props return ( @@ -41,7 +63,20 @@ export default class FooterInfo extends React.PureComponent { } - + diff --git a/components/brave_new_tab_ui/stories/default/index.tsx b/components/brave_new_tab_ui/stories/default/index.tsx index d3b0776df39b..5596573bd4c7 100644 --- a/components/brave_new_tab_ui/stories/default/index.tsx +++ b/components/brave_new_tab_ui/stories/default/index.tsx @@ -7,7 +7,6 @@ import * as React from 'react' // Feature-specific components import { Page, Header, Main, Footer, DynamicBackground, Gradient, ClockWidget as Clock } from '../../components/default' -import Settings from './settings' import TopSitesList from './topSites/topSitesList' import Stats from './stats' import SiteRemovalNotification from './siteRemovalNotification' @@ -19,18 +18,22 @@ import { images } from './data/background' const generateRandomBackgroundData = getRandomBackgroundData(images) interface State { - showSettings: boolean + showSettingsMenu: boolean showBackgroundImage: boolean showStats: boolean showClock: boolean showTopSites: boolean } -export default class NewTabPage extends React.PureComponent<{}, State> { - constructor (props: {}) { +interface Props { + textDirection: string +} + +export default class NewTabPage extends React.PureComponent { + constructor (props: Props) { super(props) this.state = { - showSettings: false, + showSettingsMenu: false, showBackgroundImage: true, showStats: true, showClock: true, @@ -54,18 +57,19 @@ export default class NewTabPage extends React.PureComponent<{}, State> { this.setState({ showTopSites: !this.state.showTopSites }) } - showSettings = () => { - this.setState({ showSettings: true }) + closeSettings = () => { + this.setState({ showSettingsMenu: false }) } - closeSettings = () => { - this.setState({ showSettings: false }) + toggleSettings = () => { + this.setState({ showSettingsMenu: !this.state.showSettingsMenu }) } render () { - const { showSettings, showBackgroundImage, showClock, showStats, showTopSites } = this.state + const { showSettingsMenu, showBackgroundImage, showClock, showStats, showTopSites } = this.state + const { textDirection } = this.props return ( - + {showBackgroundImage && }
@@ -82,27 +86,23 @@ export default class NewTabPage extends React.PureComponent<{}, State> {
- { - showSettings && - + - } -
-
diff --git a/components/brave_new_tab_ui/stories/default/settings.tsx b/components/brave_new_tab_ui/stories/default/settings.tsx index 50126f661f24..a785a902f281 100644 --- a/components/brave_new_tab_ui/stories/default/settings.tsx +++ b/components/brave_new_tab_ui/stories/default/settings.tsx @@ -4,13 +4,17 @@ import * as React from 'react' -import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from '../../components/default' +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 @@ -43,8 +47,16 @@ export default class Settings extends React.PureComponent { document.removeEventListener('mousedown', this.handleClickOutside) } + onKeyPressSettings = (event: React.KeyboardEvent) => { + if (event.key === 'Escape') { + this.props.onClickOutside() + } + } + render () { const { + textDirection, + showSettingsMenu, toggleShowBackgroundImage, toggleShowClock, toggleShowStats, @@ -52,46 +64,50 @@ export default class Settings extends React.PureComponent { showBackgroundImage, showStats, showClock, - showTopSites + showTopSites, + onClick } = this.props return ( - - - {getLocale('dashboardSettings')} - - {getLocale('showBackgroundImg')} - - - - {getLocale('showBraveStats')} - - - - {getLocale('showClock')} - - - - {getLocale('showTopSites')} - - + + + {showSettingsMenu && + + {getLocale('dashboardSettingsTitle')} + + {getLocale('showBackgroundImg')} + + + + {getLocale('showBraveStats')} + + + + {getLocale('showClock')} + + + + {getLocale('showTopSites')} + + - + } + ) } } diff --git a/components/brave_new_tab_ui/stories/fakeLocale.ts b/components/brave_new_tab_ui/stories/fakeLocale.ts index 787a86146174..c76f6276b9ac 100644 --- a/components/brave_new_tab_ui/stories/fakeLocale.ts +++ b/components/brave_new_tab_ui/stories/fakeLocale.ts @@ -17,7 +17,7 @@ const locale: any = { restoreAll: 'Restore All', close: 'Close', // settings - dashboardSettings: 'Dashboard Settings', + dashboardSettingsTitle: 'Dashboard Settings', showBackgroundImg: 'Show background image', showBraveStats: 'Show Brave Stats', showClock: 'Show Clock',