2 files changed, 151 insertions, 0 deletions
diff --git a/browser/components/pocket/content/panels/js/style-guide/entry.js b/browser/components/pocket/content/panels/js/style-guide/entry.js
new file mode 100644
index 0000000000..56ecbc0aef
--- /dev/null
+++ b/browser/components/pocket/content/panels/js/style-guide/entry.js
@@ -0,0 +1,45 @@
+/* global PKT_PANEL:false */
+
+function onDOMLoaded() {
+  if (!window.thePKT_PANEL) {
+    var thePKT_PANEL = new PKT_PANEL();
+    /* global thePKT_PANEL */
+    window.thePKT_PANEL = thePKT_PANEL;
+    thePKT_PANEL.initStyleGuide();
+  }
+  window.thePKT_PANEL.overlay.create();
+
+  setupDarkModeUI();
+}
+
+function setupDarkModeUI() {
+  let isDarkModeEnabled = window?.matchMedia(
+    `(prefers-color-scheme: dark)`
+  ).matches;
+  let elDarkModeToggle = document.querySelector(`#dark_mode_toggle input`);
+  let elBody = document.querySelector(`body`);
+
+  function setTheme() {
+    if (isDarkModeEnabled) {
+      elBody.classList.add(`theme_dark`);
+      elDarkModeToggle.checked = true;
+    } else {
+      elBody.classList.remove(`theme_dark`);
+      elDarkModeToggle.checked = false;
+    }
+  }
+
+  setTheme();
+
+  elDarkModeToggle.addEventListener(`click`, function (e) {
+    e.preventDefault;
+    isDarkModeEnabled = !isDarkModeEnabled;
+    setTheme();
+  });
+}
+
+if (document.readyState != `loading`) {
+  onDOMLoaded();
+} else {
+  document.addEventListener(`DOMContentLoaded`, onDOMLoaded);
+}
diff --git a/browser/components/pocket/content/panels/js/style-guide/overlay.js b/browser/components/pocket/content/panels/js/style-guide/overlay.js
new file mode 100644
index 0000000000..056711b870
--- /dev/null
+++ b/browser/components/pocket/content/panels/js/style-guide/overlay.js
@@ -0,0 +1,106 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Header from "../components/Header/Header";
+import ArticleList from "../components/ArticleList/ArticleList";
+import Button from "../components/Button/Button";
+import PopularTopics from "../components/PopularTopics/PopularTopics";
+import TagPicker from "../components/TagPicker/TagPicker";
+
+var StyleGuideOverlay = function (options) {};
+
+StyleGuideOverlay.prototype = {
+  create() {
+    // TODO: Wrap popular topics component in JSX to work without needing an explicit container hierarchy for styling
+    ReactDOM.render(
+      <div>
+        <h3>JSX Components:</h3>
+        <h4 className="stp_styleguide_h4">Buttons</h4>
+        <h5 className="stp_styleguide_h5">text</h5>
+        <Button style="text" url="https://example.org" source="styleguide">
+          Text Button
+        </Button>
+        <h5 className="stp_styleguide_h5">primary</h5>
+        <Button style="primary" url="https://example.org" source="styleguide">
+          Primary Button
+        </Button>
+        <h5 className="stp_styleguide_h5">secondary</h5>
+        <Button style="secondary" url="https://example.org" source="styleguide">
+          Secondary Button
+        </Button>
+        <h5 className="stp_styleguide_h5">primary wide</h5>
+        <span className="stp_button_wide">
+          <Button style="primary" url="https://example.org" source="styleguide">
+            Primary Wide Button
+          </Button>
+        </span>
+        <h5 className="stp_styleguide_h5">secondary wide</h5>
+        <span className="stp_button_wide">
+          <Button
+            style="secondary"
+            url="https://example.org"
+            source="styleguide"
+          >
+            Secondary Wide Button
+          </Button>
+        </span>
+        <h4 className="stp_styleguide_h4">Header</h4>
+        <Header>
+          <Button style="primary" url="https://example.org" source="styleguide">
+            View My List
+          </Button>
+        </Header>
+        <h4 className="stp_styleguide_h4">PopularTopics</h4>
+        <PopularTopics
+          pockethost={`getpocket.com`}
+          source={`styleguide`}
+          utmParams={`utm_source=styleguide`}
+          topics={[
+            { title: "Self Improvement", topic: "self-improvement" },
+            { title: "Food", topic: "food" },
+            { title: "Entertainment", topic: "entertainment" },
+            { title: "Science", topic: "science" },
+          ]}
+        />
+        <h4 className="stp_styleguide_h4">ArticleList</h4>
+        <ArticleList
+          source={`styleguide`}
+          articles={[
+            {
+              title: "Article Title",
+              publisher: "Publisher",
+              thumbnail:
+                "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
+              url: "https://example.org",
+              alt: "Alt Text",
+            },
+            {
+              title: "Article Title (No Publisher)",
+              thumbnail:
+                "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
+              url: "https://example.org",
+              alt: "Alt Text",
+            },
+            {
+              title: "Article Title (No Thumbnail)",
+              publisher: "Publisher",
+              url: "https://example.org",
+              alt: "Alt Text",
+            },
+          ]}
+        />
+        <h4 className="stp_styleguide_h4">TagPicker</h4>
+        <TagPicker tags={[`futurism`, `politics`, `mozilla`]} />
+        <h3>Typography:</h3>
+        <h2 className="header_large">.header_large</h2>
+        <h3 className="header_medium">.header_medium</h3>
+        <p>paragraph</p>
+        <h3>Native Elements:</h3>
+        <h4 className="stp_styleguide_h4">Horizontal Rule</h4>
+        <hr />
+      </div>,
+      document.querySelector(`#stp_style_guide_components`)
+    );
+  },
+};
+
+export default StyleGuideOverlay;