🐛 Add normalizer to storybook config; parody with production code; cl…

…oses brave/brave-browser#5041
brave · Jul 16, 2019 · 6c5e6fc · 6c5e6fc
1 parent 9913497
commit 6c5e6fc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git 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/footerInfo.tsx b/components/brave_new_tab_ui/stories/default/footerInfo.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Feature-specific components
-import { Link, Navigation, IconLink, PhotoName } from '../../components/default'
+import { Link, Navigation, IconLink, IconButton, PhotoName } from '../../components/default'
 
 // Icons
 import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon, SettingsIcon } from 'brave-ui/components/icons'
@@ -21,6 +21,13 @@ interface Props {
 }
 
 export default class FooterInfo extends React.PureComponent<Props, {}> {
+
+  onKeyPressSettings = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      this.props.onClickSettings()
+    }
+  }
+
   render () {
     const {
       backgroundImageInfo,
@@ -41,7 +48,14 @@ export default class FooterInfo extends React.PureComponent<Props, {}> {
           </PhotoName>}
         </div>
         <Navigation>
-          <IconLink onClick={onClickSettings} disabled={isSettingsMenuOpen}><SettingsIcon /></IconLink>
+          <IconButton
+              title={getLocale('dashboardSettingsTitle')}
+              onMouseDown={onClickSettings}
+              onKeyDown={this.onKeyPressSettings}
+              clickDisabled={isSettingsMenuOpen}
+          >
+             <SettingsIcon />
+          </IconButton>
           <IconLink><SettingsAdvancedIcon /></IconLink>
           <IconLink><BookmarkBook /></IconLink>
           <IconLink><HistoryIcon /></IconLink>

diff --git a/components/brave_new_tab_ui/stories/default/index.tsx b/components/brave_new_tab_ui/stories/default/index.tsx
@@ -54,12 +54,8 @@ export default class NewTabPage extends React.PureComponent<{}, State> {
     this.setState({ showTopSites: !this.state.showTopSites })
   }
 
-  showSettings = () => {
-    this.setState({ showSettings: true })
-  }
-
-  closeSettings = () => {
-    this.setState({ showSettings: false })
+  toggleSettings = () => {
+    this.setState({ showSettings: !this.state.showSettings })
   }
 
   render () {
@@ -85,7 +81,7 @@ export default class NewTabPage extends React.PureComponent<{}, State> {
           {
             showSettings &&
             <Settings
-              onClickOutside={this.closeSettings}
+              onClickOutside={this.toggleSettings}
               toggleShowBackgroundImage={this.toggleShowBackgroundImage}
               showBackgroundImage={showBackgroundImage}
               toggleShowClock={this.toggleShowClock}
@@ -99,7 +95,7 @@ export default class NewTabPage extends React.PureComponent<{}, State> {
           <Footer>
             <FooterInfo
               backgroundImageInfo={generateRandomBackgroundData}
-              onClickSettings={this.showSettings}
+              onClickSettings={this.toggleSettings}
               isSettingsMenuOpen={showSettings}
               showPhotoInfo={showBackgroundImage}
             />