Changes structure of the project

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

@@ -0,0 +1,83 @@
+/* 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 { 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 locale from '../fakeLocale'
+import theme from '../theme'
+
+class BraveShieldsControls extends React.PureComponent {
+  render () {
+    return (
+      <Grid
+        id='braveShieldsControls'
+        theme={theme.braveShieldsControls}>
+        <Column>
+          <ContentToggleArrow
+            withSeparator={true}
+            defaultOpen={true}
+            summary={locale.shieldsControlsAdvancedControls}
+            onClick={() => console.log('fired onClick')}>
+            <BoxedContent theme={theme.braveShieldsControlsContent}>
+              <SelectOption
+                disabled={false}
+                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}>
+                <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}>
+                <option value='block_third_party'>{locale.shieldsControlsFingerprintingOptionBlock3p}</option>
+                <option value='block'>{locale.shieldsControlsFingerprintingOptionBlockAll}</option>
+                <option value='allow'>{locale.shieldsControlsFingerprintingOptionAllowAll}</option>
+              </SelectOption>
+              <Grid theme={theme.braveShieldsControlsSwitches}>
+                <Column>
+                  <SwitchButton
+                    id='httpsEverywhere'
+                    disabled={false}
+                    rightText={locale.shieldsControlsHttpsEverywhereSwitch}
+                    checked={true}
+                    onChange={() => console.log('httpsE')} />
+                </Column>
+                <Column>
+                  <SwitchButton
+                    id='blockScripts'
+                    disabled={false}
+                    rightText={locale.shieldsControlsBlockScriptsSwitch}
+                    checked={true}
+                    onChange={() => console.log('block JS')} />
+                </Column>
+                <Column>
+                  <SwitchButton
+                    id='blockPhishingMalware'
+                    checked={true}
+                    disabled={false}
+                    rightText={locale.shieldsControlsBlockPhishingMalwareSwitch}
+                    onChange={() => console.log('block Pishing/Malware')} />
+                </Column>
+              </Grid>
+            </BoxedContent>
+          </ContentToggleArrow>
+        </Column>
+      </Grid>
+    )
+  }
+}
+
+export default BraveShieldsControls

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

@@ -0,0 +1,31 @@
+/* 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 { Grid, Column } from '../../../../../src/components/layout/gridList'
+import UnstyledButton from '../../../../../src/old/unstyledButton/index'
+import Anchor from '../../../../../src/old/anchor'
+import locale from '../fakeLocale'
+import theme from '../theme'
+
+class BraveShieldsFooter extends React.PureComponent {
+  render () {
+    return (
+      <Grid id='braveShieldsFooter' theme={theme.braveShieldsFooter}>
+        <Column size={9} theme={theme.columnStart}>
+          <Anchor
+            theme={theme.editLink}
+            href='chrome://settings'
+            target='_blank'
+            text={locale.shieldsFooterEditDefault} />
+        </Column>
+        <Column size={3} theme={theme.columnEnd}>
+          <UnstyledButton text={locale.shieldsFooterReload} />
+        </Column>
+      </Grid>
+    )
+  }
+}
+
+export default BraveShieldsFooter

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

@@ -0,0 +1,49 @@
+/* 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 { Grid, Column } from '../../../../../src/components/layout/gridList'
+import Separator from '../../../../../src/old/separator/index'
+import SwitchButton from '../../../../../src/old/switchButton/index'
+import UnstyledButton from '../../../../../src/old/unstyledButton/index'
+import TextLabel from '../../../../../src/old/textLabel/index'
+import locale from '../fakeLocale'
+import theme from '../theme'
+
+class BraveShieldsHeader extends React.PureComponent {
+  render () {
+    return (
+      <Grid
+        id='braveShieldsHeader'
+        theme={theme.braveShieldsHeader}>
+        <Column size={4} theme={theme.columnVerticalCenter}>
+          <TextLabel theme={theme.title} text={locale.shieldsHeaderShieldsToggle} />
+        </Column>
+        <Column size={6} theme={theme.columnVerticalCenter}>
+          <SwitchButton
+            id='shieldsToggle'
+            leftText={locale.shieldsHeaderToggleLeftPosition}
+            rightText={locale.shieldsHeaderToggleRightPosition}
+            checked={true}
+            onChange={() => {}} />
+        </Column>
+        <Column size={2} theme={theme.columnVerticalCenterEnd}>
+          <UnstyledButton
+            theme={theme.closeButton}
+            text='&times;'
+            onClick={() => {}} />
+        </Column>
+        <Column>
+          <Separator />
+        </Column>
+        <Column theme={theme.hostnameContent}>
+          <TextLabel text={locale.shieldsHeaderForSite} />
+          <TextLabel theme={theme.hostname} text='Simply Red Fan Club' />
+        </Column>
+      </Grid>
+    )
+  }
+}
+
+export default BraveShieldsHeader

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

@@ -0,0 +1,61 @@
+/* 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 { Grid, Column } from '../../../../../src/components/layout/gridList/index'
+import TextLabel from '../../../../../src/old/textLabel/index'
+import data from '../fakeData'
+import locale from '../fakeLocale'
+import theme from '../theme'
+
+class BraveShieldsStats extends React.PureComponent {
+  render () {
+    return (
+      <Grid
+        id='braveShieldsStats'
+        theme={theme.braveShieldsStats}
+        disabled={false}
+      >
+        <Column theme={theme.statsNumbers} size={1}>
+          <TextLabel
+            theme={theme.totalAdsTrackersBlockedStat}
+            text={data.totalAdsTrackersBlocked}
+          />
+          <TextLabel
+            theme={theme.httpsRedirectedStat}
+            text={data.httpsRedirected}
+          />
+          <TextLabel
+            theme={theme.javascriptBlockedStat}
+            text={data.javascriptBlocked}
+          />
+          <TextLabel
+            theme={theme.fingerprintingBlockedStat}
+            text={data.fingerprintingBlocked}
+          />
+        </Column>
+        <Column theme={theme.statsNames} size={11}>
+          <TextLabel
+            theme={theme.totalAdsTrackersBlockedText}
+            text={locale.shieldsStatsAdsTrackersBlocked}
+          />
+          <TextLabel
+            theme={theme.httpsRedirectedText}
+            text={locale.shieldsStatsHttpsUpgrades}
+          />
+          <TextLabel
+            theme={theme.javascriptBlockedText}
+            text={locale.shieldsStatsScriptsBlocked}
+          />
+          <TextLabel
+            theme={theme.fingerprintingBlockedText}
+            text={locale.shieldsFingerPrintingBlocked}
+          />
+        </Column>
+      </Grid>
+    )
+  }
+}
+
+export default BraveShieldsStats

stories/features/shields/panel/fakeData.ts

@@ -0,0 +1,12 @@
+/* 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 data = {
+  totalAdsTrackersBlocked: '100',
+  httpsRedirected: '3',
+  javascriptBlocked: '22',
+  fingerprintingBlocked: '11'
+}
+
+export default data

stories/features/shields/panel/fakeLocale.ts

@@ -0,0 +1,33 @@
+/* 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 = {
+  shieldsControlsCookieControl: 'Cookie Control',
+  shieldsControlsCookieOptionBlockAll: 'Block All Cookies',
+  shieldsControlsAdControlOptionAllowAdsTracking: 'Allow Ads and Tracking',
+  shieldsHeaderToggleLeftPosition: 'Down',
+  shieldsStatsHttpsUpgrades: 'HTTPS Upgrades',
+  shieldsControlsFingerprintingOptionAllowAll: 'Allow All Fingerprinting',
+  shieldsFooterReload: 'Reload...',
+  shieldsControlsAdControl: 'Ad Control',
+  shieldsStatsScriptsBlocked: 'Scripts Blocked',
+  shieldsHeaderToggleRightPosition: 'Up',
+  shieldsControlsFingerprintingOptionBlockAll: 'Block All Fingerprinting',
+  shieldsControlsCookieOptionAllowAll: 'Allow All Cookies',
+  shieldsControlsHttpsEverywhereSwitch: 'HTTPS Everywhere',
+  shieldsControlsCookieOptionBlock3p: 'Block 3rd Party Cookies',
+  shieldsControlsFingerprintingOptionBlock3p: 'Block 3rd Party Fingerprinting',
+  shieldsHeaderForSite: 'Site shield settings for',
+  shieldsHeaderShieldsToggle: 'Shields',
+  shieldsFooterEditDefault: 'Edit default shield settings...',
+  shieldsControlsAdControlOptionBlockAds: 'Block Ads',
+  shieldsFingerPrintingBlocked: 'Fingerprinting Methods Blocked',
+  shieldsControlsBlockPhishingMalwareSwitch: 'Block Phishing/Malware',
+  shieldsControlsAdvancedControls: 'Advanced Controls',
+  shieldsControlsBlockScriptsSwitch: 'Block Scripts',
+  shieldsStatsAdsTrackersBlocked: 'Ads and Trackers Blocked',
+  shieldsControlsFingerprintingProtection: 'Fingerprinting Protection'
+}
+
+export default locale

stories/features/shields/panel/index.tsx

@@ -0,0 +1,22 @@
+/* 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 BraveShieldsHeader from './components/header'
+import BraveShieldsStats from './components/stats'
+import BraveShieldsControls from './components/controls'
+import BraveShieldsFooter from './components/footer'
+
+export default class BraveShields extends React.PureComponent {
+  render () {
+    return (
+      <div style={{maxWidth: '300px'}}>
+        <BraveShieldsHeader />
+        <BraveShieldsStats />
+        <BraveShieldsControls />
+        <BraveShieldsFooter />
+      </div>
+    )
+  }
+}