Bug 1746026 - Adding ArticleList component r=thecount

Differential Revision: https://phabricator.services.mozilla.com/D136520

browser/components/pocket/content/panels/css/main.scss

@@ -5,4 +5,7 @@
 @import "./home";
 @import "./styleguide";
 
+// Components
+
+@import "../js/components/ArticleList/ArticleList";
 @import "../js/components/Header/Header";

browser/components/pocket/content/panels/css/styleguide.scss

@@ -7,4 +7,9 @@
   .stp_superheader {
     margin: 0;
   }
+
+  .stp_styleguide_h4 {
+    border-bottom: 1px solid #ccc;
+    margin: 20px 0;
+  }
 }

browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx

@@ -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 React from "react";
+
+function ArticleList(props) {
+  return (
+    <ul className="stp_article_list">
+      {props.articles.map(article => (
+        <li className="stp_article_list_item">
+          <a className="stp_article_list_link" href={article.url}>
+            <img
+              className="stp_article_list_thumb"
+              src={article.thumbnail}
+              alt={article.alt}
+            />
+            <div className="stp_article_list_meta">
+              <header className="stp_article_list_header">
+                {article.title}
+              </header>
+              <p className="stp_article_list_publisher">{article.publisher}</p>
+            </div>
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default ArticleList;

browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss

@@ -0,0 +1,40 @@
+.stp_article_list {
+  padding: 0;
+  list-style: none;
+
+  .stp_article_list_link {
+    display: flex;
+    border-radius: 4px;
+    padding: 8px;
+
+    &:hover {
+      text-decoration: none;
+      background-color: #ECECEE;
+    }
+  }
+
+  .stp_article_list_thumb {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    margin-inline-end: 8px;
+  }
+
+  .stp_article_list_header {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 0.85em;
+    line-height: 1.27em;
+    color: #15141A;
+    margin: 4px 0px;
+  }
+
+  .stp_article_list_publisher {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 0.85em;
+    line-height: 1.27em;
+    color: #52525E;
+    margin: 4px 0px;
+  }
+}

browser/components/pocket/content/panels/js/main.bundle.js

@@ -2,7 +2,7 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 672:
+/***/ 318:
 /***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
 
 
@@ -920,17 +920,48 @@ SavedOverlay.prototype = {
 
 };
 /* harmony default export */ const saved_overlay = (SavedOverlay);
+;// CONCATENATED MODULE: ./content/panels/js/components/ArticleList/ArticleList.jsx
+/* 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/. */
+
+
+function ArticleList(props) {
+  return /*#__PURE__*/react.createElement("ul", {
+    className: "stp_article_list"
+  }, props.articles.map(article => /*#__PURE__*/react.createElement("li", {
+    className: "stp_article_list_item"
+  }, /*#__PURE__*/react.createElement("a", {
+    className: "stp_article_list_link",
+    href: article.url
+  }, /*#__PURE__*/react.createElement("img", {
+    className: "stp_article_list_thumb",
+    src: article.thumbnail,
+    alt: article.alt
+  }), /*#__PURE__*/react.createElement("div", {
+    className: "stp_article_list_meta"
+  }, /*#__PURE__*/react.createElement("header", {
+    className: "stp_article_list_header"
+  }, article.title), /*#__PURE__*/react.createElement("p", {
+    className: "stp_article_list_publisher"
+  }, article.publisher))))));
+}
+
+/* harmony default export */ const ArticleList_ArticleList = (ArticleList);
 ;// CONCATENATED MODULE: ./content/panels/js/style-guide/overlay.js
 
 
 
 
+
 var StyleGuideOverlay = function (options) {};
 
 StyleGuideOverlay.prototype = {
   create() {
     // TODO: Wrap popular topics component in JSX to work without needing an explicit container hierarchy for styling
-    react_dom.render( /*#__PURE__*/react.createElement(PopularTopics_PopularTopics, {
+    react_dom.render( /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("h3", null, "JSX Components:"), /*#__PURE__*/react.createElement("h4", {
+      className: "stp_styleguide_h4"
+    }, "PopularTopics"), /*#__PURE__*/react.createElement(PopularTopics_PopularTopics, {
       pockethost: `getpocket.com`,
       utmsource: `styleguide`,
       topics: [{
@@ -946,7 +977,29 @@ StyleGuideOverlay.prototype = {
         title: "Science",
         topic: "science"
       }]
-    }), document.querySelector(`#stp_style_guide_components`));
+    }), /*#__PURE__*/react.createElement("h4", {
+      className: "stp_styleguide_h4"
+    }, "ArticleList"), /*#__PURE__*/react.createElement(ArticleList_ArticleList, {
+      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",
+        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",
+        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"
+      }]
+    })), document.querySelector(`#stp_style_guide_components`));
   }
 
 };
@@ -1198,7 +1251,7 @@ window.pktPanelMessaging = messages;
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [736], () => (__webpack_require__(672)))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, [736], () => (__webpack_require__(318)))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()

browser/components/pocket/content/panels/js/style-guide/overlay.js

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import ArticleList from "../components/ArticleList/ArticleList";
 import PopularTopics from "../components/PopularTopics/PopularTopics";
 
 var StyleGuideOverlay = function(options) {};
@@ -8,16 +9,49 @@ StyleGuideOverlay.prototype = {
   create() {
     // TODO: Wrap popular topics component in JSX to work without needing an explicit container hierarchy for styling
     ReactDOM.render(
-      <PopularTopics
+      <div>
-        pockethost={`getpocket.com`}
+        <h3>JSX Components:</h3>
-        utmsource={`styleguide`}
+        <h4 className="stp_styleguide_h4">PopularTopics</h4>
-        topics={[
+        <PopularTopics
-          { title: "Self Improvement", topic: "self-improvement" },
+          pockethost={`getpocket.com`}
-          { title: "Food", topic: "food" },
+          utmsource={`styleguide`}
-          { title: "Entertainment", topic: "entertainment" },
+          topics={[
-          { title: "Science", topic: "science" },
+            { 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
+          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",
+              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",
+              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",
+            },
+          ]}
+        />
+      </div>,
       document.querySelector(`#stp_style_guide_components`)
     );
   },

browser/components/pocket/content/panels/style-guide.html

@@ -2,7 +2,7 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'" />
+        <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'; img-src https://img-getpocket.cdn.mozilla.net;" />
         <base href="chrome://pocket/content/panels/">
         <link rel="localization" href="browser/branding/brandings.ftl" />
         <link rel="localization" href="browser/aboutPocket.ftl" />
@@ -13,12 +13,12 @@
         <script src="js/vendor/jquery-2.1.1.min.js"></script>
         <script src="js/vendor/handlebars.runtime.js"></script>
         <script src="js/tmpl.js"></script>
+        <script src="js/vendor.bundle.js"></script>
         <script src="js/main.bundle.js"></script>
         <script src="js/style-guide/entry.js"></script>
 
         <div id="stp_style_guide">
-            <p class="stp_superheader"><strong>Save To Pocket</strong></p>
+            <h1>Save To Pocket:<br/> Style Guide</h1>
-            <h1>Style Guide</h1>
             <div id="stp_style_guide_components"></div>
         </div>
     </body>