Imported from brave-ui: Merge pull request #48 from brave/lint-story

Adds TS lint for storybook

stories/features/shields/panel/components/controls.tsx

@@ -3,45 +3,53 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import { Grid, Column } from '../../../../../src/components/layout/gridList/index'
-import SelectOption from '../../../../../src/old/selectOption/index'
-import SwitchButton from '../../../../../src/old/switchButton/index'
-import ContentToggleArrow from '../../../../../src/old/contentToggleArrow/index'
-import BoxedContent from '../../../../../src/old/boxedContent/index'
+import { Grid, Column } from '../../../../../src/components/layout/gridList'
+import SelectOption from '../../../../../src/old/selectOption'
+import SwitchButton from '../../../../../src/old/switchButton'
+import ContentToggleArrow from '../../../../../src/old/contentToggleArrow'
+import BoxedContent from '../../../../../src/old/boxedContent'
 import locale from '../fakeLocale'
 import theme from '../theme'
 
+const log = (text: string) => {
+ console.log(text)
+}
+
 class BraveShieldsControls extends React.PureComponent {
  render () {
  return (
  <Grid
  id='braveShieldsControls'
- theme={theme.braveShieldsControls}>
+ theme={theme.braveShieldsControls}
+ >
  <Column>
  <ContentToggleArrow
  withSeparator={true}
  defaultOpen={true}
  summary={locale.shieldsControlsAdvancedControls}
- onClick={() => console.log('fired onClick')}>
+ onClick={log.bind(this, 'fired onClick')}
+ >
  <BoxedContent theme={theme.braveShieldsControlsContent}>
  <SelectOption
  disabled={false}
- titleName={locale.shieldsControlsAdControl}>
+ titleName={locale.shieldsControlsAdControl}
+ >
  {/* TODO needs "show brave ads" */}
  <option value='allow'>{locale.shieldsControlsAdControlOptionBlockAds}</option>
  <option value='block'>{locale.shieldsControlsAdControlOptionAllowAdsTracking}</option>
  </SelectOption>
  <SelectOption
  disabled={false}
- titleName={locale.shieldsControlsCookieControl}>
+ titleName={locale.shieldsControlsCookieControl}
+ >
  <option value='SOME'>{locale.shieldsControlsCookieOptionBlock3p}</option>
  <option value='SOME'>{locale.shieldsControlsCookieOptionAllowAll}</option>
  <option value='SOME'>{locale.shieldsControlsCookieOptionBlockAll}</option>
  </SelectOption>
-
  <SelectOption
  disabled={false}
- titleName={locale.shieldsControlsFingerprintingProtection}>
+ titleName={locale.shieldsControlsFingerprintingProtection}
+ >
  <option value='block_third_party'>{locale.shieldsControlsFingerprintingOptionBlock3p}</option>
  <option value='block'>{locale.shieldsControlsFingerprintingOptionBlockAll}</option>
  <option value='allow'>{locale.shieldsControlsFingerprintingOptionAllowAll}</option>
@@ -53,23 +61,26 @@ class BraveShieldsControls extends React.PureComponent {
  disabled={false}
  rightText={locale.shieldsControlsHttpsEverywhereSwitch}
  checked={true}
- onChange={() => console.log('httpsE')} />
+ onChange={log.bind(this, 'httpsE')}
+ />
  </Column>
  <Column>
  <SwitchButton
  id='blockScripts'
  disabled={false}
  rightText={locale.shieldsControlsBlockScriptsSwitch}
  checked={true}
- onChange={() => console.log('block JS')} />
+ onChange={log.bind(this, 'block JS')}
+ />
  </Column>
  <Column>
  <SwitchButton
  id='blockPhishingMalware'
  checked={true}
  disabled={false}
  rightText={locale.shieldsControlsBlockPhishingMalwareSwitch}
- onChange={() => console.log('block Pishing/Malware')} />
+ onChange={log.bind(this, 'block Pishing/Malware')}
+ />
  </Column>
  </Grid>
  </BoxedContent>

stories/features/shields/panel/components/footer.tsx

@@ -18,7 +18,8 @@ class BraveShieldsFooter extends React.PureComponent {
  theme={theme.editLink}
  href='chrome://settings'
  target='_blank'
- text={locale.shieldsFooterEditDefault} />
+ text={locale.shieldsFooterEditDefault}
+ />
  </Column>
  <Column size={3} theme={theme.columnEnd}>
  <UnstyledButton text={locale.shieldsFooterReload} />

stories/features/shields/panel/components/header.tsx

@@ -11,12 +11,17 @@ import TextLabel from '../../../../../src/old/textLabel/index'
 import locale from '../fakeLocale'
 import theme from '../theme'
 
+const doNothing = () => {
+ console.log('nothing')
+}
+
 class BraveShieldsHeader extends React.PureComponent {
  render () {
  return (
  <Grid
  id='braveShieldsHeader'
- theme={theme.braveShieldsHeader}>
+ theme={theme.braveShieldsHeader}
+ >
  <Column size={4} theme={theme.columnVerticalCenter}>
  <TextLabel theme={theme.title} text={locale.shieldsHeaderShieldsToggle} />
  </Column>
@@ -26,13 +31,15 @@ class BraveShieldsHeader extends React.PureComponent {
  leftText={locale.shieldsHeaderToggleLeftPosition}
  rightText={locale.shieldsHeaderToggleRightPosition}
  checked={true}
- onChange={() => {}} />
+ onChange={doNothing}
+ />
  </Column>
  <Column size={2} theme={theme.columnVerticalCenterEnd}>
  <UnstyledButton
  theme={theme.closeButton}
  text='&times;'
- onClick={() => {}} />
+ onClick={doNothing}
+ />
  </Column>
  <Column>
  <Separator />

stories/features/shields/panel/fakeLocale.ts

@@ -2,7 +2,7 @@
  * 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 = {
+const locale = {
  shieldsControlsCookieControl: 'Cookie Control',
  shieldsControlsCookieOptionBlockAll: 'Block All Cookies',
  shieldsControlsAdControlOptionAllowAdsTracking: 'Allow Ads and Tracking',

stories/features/shields/panel/index.tsx

@@ -11,7 +11,7 @@ import BraveShieldsFooter from './components/footer'
 export default class BraveShields extends React.PureComponent {
  render () {
  return (
- <div style={{maxWidth: '300px'}}>
+ <div style={{ maxWidth: '300px' }}>
  <BraveShieldsHeader />
  <BraveShieldsStats />
  <BraveShieldsControls />

stories/features/shields/panel/theme.ts

@@ -2,7 +2,7 @@
  * 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 = {
+const theme = {
  braveShieldsHeader: {
  backgroundColor: '#808080',
  padding: '10px',