feat: automate to update arrow

.circleci/config.yml

@@ -39,21 +39,6 @@ jobs:
     environment:
       BK_ENVIRONMENT: production 231
 
-  lint_js:
-    docker:
-      - image: circleci/node:12.13.0
-    steps:
-      - checkout
-      - run: npm install
-      - run: npm run lint:js:ci
-  lint_css:
-    docker:
-      - image: circleci/node:12.13.0
-    steps:
-      - checkout
-      - run: npm install
-      - run: npm run lint:css:ci
-
   stg_lighthouse_task:
     docker:
       - image: circleci/node:12.13.0-browsers
@@ -80,11 +65,6 @@ jobs:
           npx @lhci/[email protected] autorun
 workflows:
   version: 2
-  build_and_test:
-    jobs:
-      - lint_js
-      - lint_css
-
   stg_lighthouse_test:
     jobs:
       - build:

.vscode/settings.json

@@ -11,5 +11,8 @@
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "cSpell.words": [
+    "lightbox"
+  ]
 }

app/isomorphic/arrow/components/Atoms/AdPlaceholder/index.js

@@ -16,10 +16,10 @@ AdPlaceholder.propTypes = {
   // height of ad
   height: PropTypes.string,
   // width of ad
-  width: PropTypes.string,
+  width: PropTypes.string
 };
 
 AdPlaceholder.defaultProps = {
   width: "720px",
-  height: "90px",
+  height: "90px"
 };

app/isomorphic/arrow/components/Atoms/Author/author.m.css

@@ -4,7 +4,6 @@
   display: flex;
   align-items: center;
   color: var(--arrow-c-mono4);
-  margin-bottom: var(--arrow-spacing-xs);
 }
 
 .author-image {
@@ -24,10 +23,7 @@
 
 .author-name {
   margin: auto var(--arrow-spacing-xs) auto 0;
-}
-
-.bottom-fix {
-  margin-top: auto;
+  word-break: break-all;
 }
 
 .prefix {
@@ -60,6 +56,7 @@ html[dir="rtl"] {
 .dark {
   color: var(--arrow-c-mono4);
 }
+
 .light {
   color: var(--arrow-c-invert-mono4);
 }

app/isomorphic/arrow/components/Atoms/Author/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { useStateValue } from "../../SharedContext";
 import { ResponsiveImage, Link } from "@quintype/components";
 import { getTextColor } from "../../../utils/utils";
@@ -11,13 +11,11 @@ import "./author.m.css";
 const AuthorBase = ({ story, hideAuthorImage, isBottom, prefix = "", config = {} }) => {
   const configData = useStateValue() || {};
   const isAuthor = get(configData, ["showAuthor"], true);
-  const {
-    "avatar-url": avatarUrl,
-    "avatar-s3-key": avatarS3Key,
-    name: authorName,
-    slug,
-  } = get(story, ["authors", "0"], "");
-  const isBottomClasses = isBottom ? "bottom-fix" : "";
+  const { "avatar-url": avatarUrl, "avatar-s3-key": avatarS3Key, name: authorName, slug } = get(
+    story,
+    ["authors", "0"],
+    ""
+  );
   const textColor = getTextColor(configData.theme);
   const mountAt = get(config, ["mountAt"], "");
 
@@ -26,18 +24,18 @@ const AuthorBase = ({ story, hideAuthorImage, isBottom, prefix = "", config = {}
       return null;
     }
     return (
-      <div styleName={`author-image ${dir}-image`} data-test-id="author-image">
+      <div styleName={`author-image ${dir}-image`} data-test-id="author-image" className="arr--author-image">
         <figure>
           {avatarS3Key ? (
             <ResponsiveImage
               slug={avatarS3Key}
-              aspect-ratio={[1, 1]}
+              aspectRatio={[1, 1]}
               defaultWidth={400}
               imgParams={{ auto: ["format", "compress"] }}
               alt={authorName}
             />
           ) : (
-            <img src={avatarUrl} />
+            <img src={avatarUrl} alt={authorName} />
           )}
         </figure>
       </div>
@@ -59,9 +57,8 @@ const AuthorBase = ({ story, hideAuthorImage, isBottom, prefix = "", config = {}
         <Link
           className="author-name arr-author-name arrow-component"
           href={`${mountAt}/author/` + slug}
-          styleName={`author ${isBottomClasses}`}
-          aria-label="author-name"
-        >
+          styleName="author"
+          aria-label="author-name">
           {isPrefix("ltr")}
           <div className="author-name" styleName={`author-name ${textColor}`} data-test-id="author-name">
             {authorName || story["author-name"]}
@@ -75,7 +72,7 @@ const AuthorBase = ({ story, hideAuthorImage, isBottom, prefix = "", config = {}
 
 function mapStateToProps(state) {
   return {
-    config: get(state, ["qt", "config"], {}),
+    config: get(state, ["qt", "config"], {})
   };
 }
 
@@ -90,11 +87,11 @@ AuthorBase.propTypes = {
   isBottom: PropTypes.bool,
   // fix prefix before the author name
   prefix: PropTypes.string,
-  config: PropTypes.object,
+  config: PropTypes.object
 };
 
 AuthorBase.defaultProps = {
   hideAuthorImage: false,
   isBottom: false,
-  prefix: "",
+  prefix: ""
 };

app/isomorphic/arrow/components/Atoms/Author/stories.js

@@ -12,9 +12,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )

app/isomorphic/arrow/components/Atoms/AuthorCard/README.md

@@ -4,11 +4,10 @@ Displays the author details as a card for the story page
 
 ### Use as a component
 
-
-####  default template
+#### default template
 
 ```jsx
- <AuthorCard story={story}/>
+<AuthorCard story={story} />
 ```
 
 #### Author card with right align template
@@ -26,22 +25,31 @@ Displays the author details as a card for the story page
 #### Author card with default align template
 
 ```jsx
-<AuthorCard story={story}  template="default" />
+<AuthorCard story={story} template="default" />
 ```
 
 #### Author card with left align template
 
 ```jsx
-<AuthorCard story={story}  template="leftAligned" />
+<AuthorCard story={story} template="leftAligned" />
 ```
+
 #### Author card with options
 
 ```jsx
-<AuthorCard story={story}  template="default" opts={hideImage: true, hideBio: true}/>
+<AuthorCard
+story={story}
+template="default"
+opts={
+  hideImage: true,
+  hideBio: true,
+  showLabels: false,
+  showGuestAuthorName: false,
+  showGuestAuthorImage: false,
+  localizedAuthorLabel: "Author",
+  localizedGuestAuthorLabel: "Guest Author"
+}
+/>
 ```
 
-
 <!-- PROPS -->
-
-
-