diff --git a/stories/features/shields/panel/components/controls.tsx b/stories/features/shields/panel/components/controls.tsx index b34521399b88..bf1fb07b673c 100644 --- a/stories/features/shields/panel/components/controls.tsx +++ b/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 ( + theme={theme.braveShieldsControls} + > console.log('fired onClick')}> + onClick={log.bind(this, 'fired onClick')} + > + titleName={locale.shieldsControlsAdControl} + > {/* TODO needs "show brave ads" */} + titleName={locale.shieldsControlsCookieControl} + > - + titleName={locale.shieldsControlsFingerprintingProtection} + > @@ -53,7 +61,8 @@ class BraveShieldsControls extends React.PureComponent { disabled={false} rightText={locale.shieldsControlsHttpsEverywhereSwitch} checked={true} - onChange={() => console.log('httpsE')} /> + onChange={log.bind(this, 'httpsE')} + /> console.log('block JS')} /> + onChange={log.bind(this, 'block JS')} + /> console.log('block Pishing/Malware')} /> + onChange={log.bind(this, 'block Pishing/Malware')} + /> diff --git a/stories/features/shields/panel/components/footer.tsx b/stories/features/shields/panel/components/footer.tsx index 21eb11c89ab6..f30078bee0ef 100644 --- a/stories/features/shields/panel/components/footer.tsx +++ b/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} + /> diff --git a/stories/features/shields/panel/components/header.tsx b/stories/features/shields/panel/components/header.tsx index c7e3608a4cf6..0741b865af61 100644 --- a/stories/features/shields/panel/components/header.tsx +++ b/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 ( + theme={theme.braveShieldsHeader} + > @@ -26,13 +31,15 @@ class BraveShieldsHeader extends React.PureComponent { leftText={locale.shieldsHeaderToggleLeftPosition} rightText={locale.shieldsHeaderToggleRightPosition} checked={true} - onChange={() => {}} /> + onChange={doNothing} + /> {}} /> + onClick={doNothing} + /> diff --git a/stories/features/shields/panel/fakeLocale.ts b/stories/features/shields/panel/fakeLocale.ts index 18f9276bd42d..60221aa34bfb 100644 --- a/stories/features/shields/panel/fakeLocale.ts +++ b/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', diff --git a/stories/features/shields/panel/index.tsx b/stories/features/shields/panel/index.tsx index e285458aa954..0841aba9873b 100644 --- a/stories/features/shields/panel/index.tsx +++ b/stories/features/shields/panel/index.tsx @@ -11,7 +11,7 @@ import BraveShieldsFooter from './components/footer' export default class BraveShields extends React.PureComponent { render () { return ( -
+
diff --git a/stories/features/shields/panel/theme.ts b/stories/features/shields/panel/theme.ts index e845dc6e6366..034acf0c484c 100644 --- a/stories/features/shields/panel/theme.ts +++ b/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',