feat: ppdsc 388 newskit sharebar (newsuk#2339)

lili2311 · Oct 16, 2019 · e54dadf · e54dadf
1 parent be6d68d
commit e54dadf
Show file tree

Hide file tree

Showing 40 changed files with 1,048 additions and 382 deletions.
diff --git a/package.json b/package.json
@@ -159,7 +159,7 @@
   },
   "dependencies": {
     "@babel/runtime-corejs2": "7.4.4",
-    "newskit": "0.0.0-70b3f4d2c",
+    "newskit": "0.1.0-alpha-15",
     "react-art": "16.6.3",
     "react-native": "0.59.10",
     "react-native-device-info": "2.3.2",

diff --git a/packages/article-extras/__tests__/shared.web.js b/packages/article-extras/__tests__/shared.web.js
@@ -1,5 +1,7 @@
 import React from "react";
 import TestRenderer from "react-test-renderer";
+import { ThemeProvider } from "newskit";
+import { newskitTheme } from "@times-components/utils";
 import {
   addSerializers,
   compose,
@@ -61,16 +63,18 @@ export default () => {
               newskit: true
             }}
           >
-            <ArticleExtras
-              analyticsStream={() => {}}
-              articleId="dummy-article-id"
-              commentsEnabled
-              registerNode={() => {}}
-              relatedArticleSlice={relatedArticleSlice}
-              relatedArticlesVisible
-              spotAccountId="dummy-spot-id"
-              topics={topics}
-            />
+            <ThemeProvider theme={newskitTheme}>
+              <ArticleExtras
+                analyticsStream={() => {}}
+                articleId="dummy-article-id"
+                commentsEnabled
+                registerNode={() => {}}
+                relatedArticleSlice={relatedArticleSlice}
+                relatedArticlesVisible
+                spotAccountId="dummy-spot-id"
+                topics={topics}
+              />
+            </ThemeProvider>
           </ContextProviderWithDefaults>
         );
 

diff --git a/packages/article-extras/__tests__/web/__snapshots__/article-extras.web.test.js.snap b/packages/article-extras/__tests__/web/__snapshots__/article-extras.web.test.js.snap
@@ -37,39 +37,34 @@ Array [
         <li>
           <a
             href="/topic/football"
-            size="medium"
           >
             Football
           </a>
         </li>
         <li>
           <a
             href="/topic/manchester-united"
-            size="medium"
           >
             Manchester United FC
           </a>
         </li>
         <li>
           <a
             href="/topic/chelsea"
-            size="medium"
           >
             Chelsea FC
           </a>
         </li>
         <li>
           <a
             href="/topic/arsenal"
-            size="medium"
           >
             Arsenal
           </a>
         </li>
         <li>
           <a
             href="/topic/rugby-union"
-            size="medium"
           >
             Rugby Union
           </a>

diff --git a/packages/article-extras/package.json b/packages/article-extras/package.json
@@ -68,7 +68,7 @@
     "@times-components/save-and-share-bar": "0.7.40",
     "@times-components/styleguide": "3.28.55",
     "@times-components/user-state": "0.0.34",
-    "newskit": "0.0.0-70b3f4d2c",
+    "@times-components/utils": "5.0.2",
     "prop-types": "15.7.2",
     "styled-components": "4.3.2"
   },
@@ -77,6 +77,7 @@
     "react-dom": "16.9.0"
   },
   "peerDependencies": {
+    "newskit": "0.1.0-alpha-15",
     "react": ">=16.9",
     "react-dom": ">=16.9",
     "react-native": ">=0.59",

diff --git a/packages/article-extras/src/article-topics/index.web.js b/packages/article-extras/src/article-topics/index.web.js
@@ -1,44 +1,31 @@
-import React from "react";
+/* eslint-disable react/require-default-props */
+import React, { useContext } from "react";
 import ArticleTopics from "@times-components/article-topics";
 import Context from "@times-components/context";
 import PropTypes from "prop-types";
-import {
-  ThemeProvider,
-  TagList,
-  TagSize,
-  lightTheme,
-  BorderRadiusShape
-} from "newskit";
+import { TagList, TagSize, BorderRadiusShape } from "newskit";
 import TopicsContainer from "./styles/responsive";
 import styles from "./styles";
 
-const ShowTopics = ({ topics }) => {
+const ShowTopics = ({ topics = null }) => {
+  const { newskit, makeTopicUrl } = useContext(Context);
+
   if (topics && topics.length > 0) {
     return (
       <TopicsContainer>
         <nav data-cy="topic-tags">
-          <Context.Consumer>
-            {({ newskit, makeTopicUrl }) => {
-              if (newskit) {
-                return (
-                  <ThemeProvider theme={lightTheme}>
-                    <TagList
-                      size={TagSize.Medium}
-                      shape={BorderRadiusShape.Squares}
-                      tagData={topics.map(topic => ({
-                        label: topic.name,
-                        href: makeTopicUrl(topic)
-                      }))}
-                    />
-                  </ThemeProvider>
-                );
-              }
-
-              return (
-                <ArticleTopics style={styles.topicsContainer} topics={topics} />
-              );
-            }}
-          </Context.Consumer>
+          {newskit ? (
+            <TagList
+              size={TagSize.Medium}
+              shape={BorderRadiusShape.Squares}
+              tagData={topics.map(topic => ({
+                label: topic.name,
+                href: makeTopicUrl(topic)
+              }))}
+            />
+          ) : (
+            <ArticleTopics style={styles.topicsContainer} topics={topics} />
+          )}
         </nav>
       </TopicsContainer>
     );
@@ -56,8 +43,4 @@ ShowTopics.propTypes = {
   )
 };
 
-ShowTopics.defaultProps = {
-  topics: null
-};
-
 export default ShowTopics;
diff --git a/packages/utils/__tests__/props.test.js → packages/icons/__tests__/clean.test.js b/packages/utils/__tests__/props.test.js → packages/icons/__tests__/clean.test.js
@@ -1,4 +1,4 @@
-import { clean } from "..";
+import { clean } from "../src/clean";
 
 describe("clean", () => {
   it("should remove undefined props", () => {

diff --git a/packages/icons/__tests__/jest.config.js b/packages/icons/__tests__/jest.config.js
@@ -0,0 +1,3 @@
+const jestConfigurator = require("@times-components/jest-configurator").default;
+
+module.exports = jestConfigurator(null, __dirname);
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -10,6 +10,7 @@
     "depcheck": "depcheck --ignores='@babel/*,babel-*,depcheck,eslint,jest,prettier,react-art,webpack*' --ignore-bin-package=false --skip-missing",
     "lint": "eslint . && yarn prettier:diff && yarn depcheck",
     "test:android": "jest --config='./__tests__/android/jest.config.js'",
+    "test": "jest --config='./__tests__/jest.config.js'",
     "test:ios": "jest --config='./__tests__/ios/jest.config.js'",
     "test:web": "jest --config='./__tests__/web/jest.config.js'",
     "test:all": "yarn test:android --coverage && yarn test:ios --coverage && yarn test:web --coverage",
@@ -65,7 +66,7 @@
   "dependencies": {
     "@times-components/styleguide": "3.28.55",
     "@times-components/svgs": "2.7.26",
-    "@times-components/utils": "5.0.2",
+    "lodash.omitby": "4.6.0",
     "prop-types": "15.7.2"
   },
   "resolutions": {

diff --git a/packages/icons/src/clean.js b/packages/icons/src/clean.js
@@ -0,0 +1,5 @@
+/* eslint-disable import/prefer-default-export */
+import omitBy from "lodash.omitby";
+
+export const clean = obj =>
+  omitBy(obj, x => x === undefined || Number.isNaN(x));
diff --git a/packages/icons/src/icons/close.js b/packages/icons/src/icons/close.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Svg, { Path } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
 import PropTypes from "prop-types";
+import { clean } from "../clean";
 
 const IconClose = ({ height, width }) => (
   <Svg

diff --git a/packages/icons/src/icons/copy-link.js b/packages/icons/src/icons/copy-link.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { colours } from "@times-components/styleguide";
 import Svg, { Path } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
+import { clean } from "../clean";
 import propTypes from "./prop-types";
 
 const IconCopyLink = ({

diff --git a/packages/icons/src/icons/email.js b/packages/icons/src/icons/email.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { colours } from "@times-components/styleguide";
 import Svg, { G, Path } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
+import { clean } from "../clean";
 import propTypes from "./prop-types";
 
 const viewBox = "0 0 22 16";

diff --git a/packages/icons/src/icons/facebook.js b/packages/icons/src/icons/facebook.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { colours } from "@times-components/styleguide";
 import Svg, { G, Path } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
+import { clean } from "../clean";
 import propTypes from "./prop-types";
 
 const viewBox = "14 10 10.592460632324219 20.397258758544922";

diff --git a/packages/icons/src/icons/save-bookmark.js b/packages/icons/src/icons/save-bookmark.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { colours } from "@times-components/styleguide";
 import Svg, { Path } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
+import { clean } from "../clean";
 import propTypes from "./prop-types";
 
 const IconSaveBookmark = ({

diff --git a/packages/icons/src/icons/star.js b/packages/icons/src/icons/star.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { colours } from "@times-components/styleguide";
 import Svg, { Path } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
+import { clean } from "../clean";
 import propTypes from "./prop-types";
 
 const IconStar = ({

diff --git a/packages/icons/src/icons/thesundaytimes-logo.js b/packages/icons/src/icons/thesundaytimes-logo.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { colours } from "@times-components/styleguide";
 import Svg, { Path } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
+import { clean } from "../clean";
 import propTypes from "./prop-types";
 
 const TheSTLogo = ({

diff --git a/packages/icons/src/icons/thetimes-logo.js b/packages/icons/src/icons/thetimes-logo.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { colours } from "@times-components/styleguide";
 import Svg, { Path } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
+import { clean } from "../clean";
 import propTypes from "./prop-types";
 
 const TheTimesLogo = ({

diff --git a/packages/icons/src/icons/twitter.js b/packages/icons/src/icons/twitter.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { colours } from "@times-components/styleguide";
 import Svg, { Path } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
+import { clean } from "../clean";
 import propTypes from "./prop-types";
 
 const ratio = 75 / 60;

diff --git a/packages/icons/src/icons/video-360-player.js b/packages/icons/src/icons/video-360-player.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { colours } from "@times-components/styleguide";
 import Svg, { Path } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
+import { clean } from "../clean";
 import propTypes from "./prop-types";
 
 const ratio = 108 / 100;

diff --git a/packages/icons/src/icons/video.js b/packages/icons/src/icons/video.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { colours } from "@times-components/styleguide";
 import Svg, { Rect, Polygon } from "@times-components/svgs";
-import { clean } from "@times-components/utils";
+import { clean } from "../clean";
 import propTypes from "./prop-types";
 
 const viewBox = "0 0 68 40";