brave · bbondy · Oct 30, 2016 · Oct 29, 2016
diff --git a/app/extensions/brave/about-style.html b/app/extensions/brave/about-style.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- 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/. -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="availableLanguages" content="">
+    <meta name="defaultLanguage" content="en-US">
+    <meta name='theme-color' content='#4B0082'>
+    <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
+    <title data-l10n-id="styleGuide"></title>
+    <script src='js/about.js'></script>
+    <script src="ext/l20n.min.js" async></script>
+    <link rel="localization" href="locales/{locale}/style.properties">
+ </head>
+ <body>
+    <div id="appContainer"/>
+ </body>
+</html>
diff --git a/app/extensions/brave/locales/en-US/style.properties b/app/extensions/brave/locales/en-US/style.properties
@@ -0,0 +1,7 @@
+styleGuide=Style Guide
+typography=Typography
+titles=Titles
+h1=This is an h1
+h2=This is an h2
+h3=This is an h3
+h4=This is an h4
diff --git a/js/about/entry.js b/js/about/entry.js
@@ -45,6 +45,9 @@ switch (getBaseUrl(getSourceAboutUrl(window.location.href))) {
   case 'about:history':
     element = require('./history')
     break
+  case 'about:style':
+    element = require('./style')
+    break
   case 'about:autofill':
     element = require('./autofill')
 }

diff --git a/js/about/style.js b/js/about/style.js
@@ -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/. */
+
+const React = require('react')
+const ImmutableComponent = require('../components/immutableComponent')
+
+// Stylesheets go here
+
+class AboutStyle extends ImmutableComponent {
+  render () {
+    return <div>
+      <h1 className='typography' data-l10n-id='typography' />
+      <h1 data-l10n-id='h1' />
+      <h2 data-l10n-id='h2' />
+      <h3 data-l10n-id='h3' />
+      <h4 data-l10n-id='h4' />
+    </div>
+  }
+}
+
+module.exports = <AboutStyle />
diff --git a/js/lib/appUrlUtil.js b/js/lib/appUrlUtil.js
@@ -66,7 +66,8 @@ module.exports.aboutUrls = new Immutable.Map({
   'about:passwords': module.exports.getAppUrl('about-passwords.html'),
   'about:flash': module.exports.getAppUrl('about-flash.html'),
   'about:error': module.exports.getAppUrl('about-error.html'),
-  'about:autofill': module.exports.getAppUrl('about-autofill.html')
+  'about:autofill': module.exports.getAppUrl('about-autofill.html'),
+  'about:style': module.exports.getAppUrl('about-style.html')
 })
 
 module.exports.isIntermediateAboutPage = (location) =>

diff --git a/test/about/styleTest.js b/test/about/styleTest.js
@@ -0,0 +1,24 @@
+/* global describe, it, before */
+
+const Brave = require('../lib/brave')
+const {urlInput} = require('../lib/selectors')
+const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
+
+describe('about:style', function () {
+  Brave.beforeAll(this)
+  before(function * () {
+    const url = getTargetAboutUrl('about:style')
+    yield this.app.client
+      .waitForUrl(Brave.newTabUrl)
+      .waitForBrowserWindow()
+      .waitForVisible(urlInput)
+      .waitForExist('.tab[data-frame-key="1"]')
+      .tabByIndex(0)
+      .loadUrl(url)
+  })
+
+  it('displays the title', function * () {
+    yield this.app.client
+      .getText('.typography').should.eventually.be.equal('Typography')
+  })
+})