diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /browser/components/pocket/content/panels/js/style-guide | |
parent | Initial commit. (diff) | |
download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/pocket/content/panels/js/style-guide')
-rw-r--r-- | browser/components/pocket/content/panels/js/style-guide/entry.js | 45 | ||||
-rw-r--r-- | browser/components/pocket/content/panels/js/style-guide/overlay.js | 106 |
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; |