@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1-version-upgrade.2

package/src/components/Atoms/AuthorCard/README.md

@@ -1,55 +0,0 @@
-# Author Card
-
-Displays the author details as a card for the story page
-
-### Use as a component
-
-#### default template
-
-```jsx
-<AuthorCard story={story} />
-```
-
-#### Author card with right align template
-
-```jsx
-<AuthorCard story={story} template="rightAligned" />
-```
-
-#### Author card with center align template
-
-```jsx
-<AuthorCard story={story} template="centerAligned" />
-```
-
-#### Author card with default align template
-
-```jsx
-<AuthorCard story={story} template="default" />
-```
-
-#### Author card with left align template
-
-```jsx
-<AuthorCard story={story} template="leftAligned" />
-```
-
-#### Author card with options
-
-```jsx
-<AuthorCard
-story={story}
-template="default"
-opts={
-  hideImage: true,
-  hideBio: true,
-  showLabels: false,
-  showGuestAuthorName: false,
-  showGuestAuthorImage: false,
-  localizedAuthorLabel: "Author",
-  localizedGuestAuthorLabel: "Guest Author"
-}
-/>
-```
-
-<!-- PROPS -->

package/src/components/Atoms/AuthorCard/author-card.m.css

@@ -1,224 +0,0 @@
-@value viewports: "../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-
-.author-card-wrapper {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.author-card-wrapper.centerAligned {
-  display: block;
-  text-align: center;
-}
-
-.author-image-wrapper {
-  display: flex;
-  align-items: center;
-}
-
-.default .author-image-wrapper a {
-  margin: 0 var(--arrow-spacing-s) 0 0;
-}
-
-.default .author-image-wrapper a:last-child {
-  margin: 0 var(--arrow-spacing-xs) 0 0;
-}
-
-.default .author-card-label {
-  font-size: var(--arrow-fs-xs);
-  line-height: var(--arrow-lh-1);
-  margin-right: var(--arrow-spacing-xxs);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-s);
-  }
-}
-
-.guest-author-wrapper {
-  margin-top: var(--arrow-spacing-xs);
-}
-
-.centerAligned .author-image-wrapper {
-  justify-content: center;
-  margin-right: 0;
-  margin-bottom: var(--arrow-spacing-m);
-}
-
-.author-image {
-  margin-left: -100px;
-  overflow: hidden;
-}
-
-.leftAligned .author-image {
-  margin-left: -64px;
-  overflow: hidden;
-  @media (min-width: mobile) {
-    margin-left: -100px;
-  }
-}
-
-.author-image figure {
-  margin: 0;
-}
-
-.author-image img {
-  border-radius: 50%;
-  height: 72px;
-  width: 72px;
-  @media (min-width: mobile) {
-    height: 124px;
-    width: 124px;
-  }
-}
-
-.multi-author-image img {
-  border: solid 2px var(--arrow-c-light);
-}
-
-.default .author-image,
-.default .author-image img {
-  height: 32px;
-  width: 32px;
-}
-
-.default .multi-author-image {
-  margin-left: -24px;
-  border-width: 1px;
-}
-
-.author-image.first-author-image {
-  margin-left: 0;
-}
-
-.author-details-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: var(--arrow-spacing-xs) var(--arrow-spacing-xs) var(--arrow-spacing-xs) 0;
-  margin-left: var(--arrow-spacing-m);
-  @media (min-width: mobile) {
-    margin-left: var(--arrow-spacing-l);
-  }
-}
-
-.default .author-details-wrapper {
-  margin-left: var(--arrow-spacing-s);
-}
-
-.leftAligned {
-  align-items: center;
-}
-
-.leftAligned .author-image-wrapper {
-  margin-bottom: unset;
-}
-
-.leftAligned .author-details-wrapper {
-  margin-left: var(--arrow-spacing-m);
-  @media (min-width: mobile) {
-    margin-left: var(--arrow-spacing-l);
-  }
-}
-
-.centerAligned .author-details-wrapper {
-  align-items: center;
-  margin-left: 0;
-}
-
-.author-name-share {
-  align-items: center;
-  font-size: var(--arrow-fs-xs);
-  line-height: var(--arrow-lh-1);
-  justify-content: center;
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-s);
-  }
-}
-
-.default .author-name-share.single-author,
-.leftAligned .author-name-share.single-author {
-  display: flex;
-}
-
-.twitter-wrapper {
-  margin: 0 0 0 var(--arrow-spacing-xs);
-}
-
-html[dir="rtl"] {
-  .default .multi-author-image {
-    margin-right: -24px;
-    margin-left: unset;
-  }
-
-  .default .author-card-label {
-    margin-right: unset;
-    margin-left: var(--arrow-spacing-xxs);
-  }
-
-  .author-image {
-    margin-right: -100px;
-    margin-left: unset;
-  }
-
-  .default .author-image-wrapper a {
-    margin: 0 0 0 var(--arrow-spacing-s);
-  }
-  .default .author-image-wrapper a:last-child {
-    margin: 0 0 0 var(--arrow-spacing-xs);
-  }
-
-  .leftAligned .author-image-wrapper a {
-    margin-left: var(--arrow-spacing-m);
-  }
-  .leftAligned .author-image.multi-author-image {
-    margin-right: -64px;
-    margin-left: unset;
-  }
-
-  .leftAligned .author-image.first-author-image,
-  .author-image.first-author-image {
-    margin-right: 0;
-  }
-
-  .author-name-share span {
-    display: inline-block;
-  }
-
-  .twitter-wrapper {
-    margin: 0 var(--arrow-spacing-xs) 0 0;
-  }
-}
-
-.multiple-author-style {
-  font-size: var(--arrow-fs-xs);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-s);
-  }
-}
-
-.author-bio {
-  font-style: italic;
-  line-height: var(--arrow-lh-5);
-  color: var(--arrow-c-m);
-  font-size: var(--arrow-fs-tiny);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-xs);
-  }
-}
-
-.dark {
-  color: var(--arrow-c-mono2);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono2);
-}
-
-.centerAligned .author-image-wrapper a {
-  margin-left: var(--arrow-spacing-l);
-  margin-right: var(--arrow-spacing-l);
-}
-
-.leftAligned .author-image-wrapper a {
-  margin-right: var(--arrow-spacing-m);
-}

package/src/components/Atoms/AuthorCard/author-card.test.js

@@ -1,97 +0,0 @@
-import * as React from "react";
-import { mount } from "enzyme";
-import expect from "expect";
-import { generateStory, generateStore } from "../../Fixture/index";
-import { AuthorCard } from "./index";
-import { Provider } from "react-redux";
-import { Twitter } from "../../Svgs/SocialIcons/plain/twitter";
-
-const story = generateStory();
-
-const singleAuthorStory = {
-  ...story,
-  authors: [
-    {
-      id: 123981,
-      name: "Ravigopal Kesari",
-      slug: "ravigopal-kesari",
-      social: {
-        twitter: {
-          url: "https://www.twitter.com/sabqorg",
-          handle: "elonmusk"
-        }
-      },
-      "avatar-url":
-        "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
-      "avatar-s3-key": null,
-      "twitter-handle": null,
-      bio:
-        "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
-      "contributor-role": {
-        id: 873,
-        name: "Author"
-      }
-    }
-  ]
-};
-
-describe("default author card", () => {
-  it("Should render leftAligned template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={story} template="leftAligned" />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "author-card-left-aligned" }).prop("className")).toMatch(/leftAligned/);
-  });
-  it("Should render default template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={story} template="default" />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "author-card-default" })).toHaveLength(2);
-  });
-  it("Should render centerAligned template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={story} template="centerAligned" />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "author-card-center-aligned" }).prop("className")).toMatch(/centerAligned/);
-  });
-  it("Should render author card without image", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={story} template="centerAligned" opts={{ showImage: false }} />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "author-image" }).length).toEqual(0);
-  });
-  it("Should render author card without author bio", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={singleAuthorStory} template="centerAligned" opts={{ showBio: false }} />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "author-bio" }).length).toEqual(0);
-  });
-
-  it("Should not render twitter icon when template is centerAligned", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={singleAuthorStory} template="centerAligned" opts={{ showBio: false }} />
-      </Provider>
-    );
-    expect(wrapper.contains(<Twitter />)).toEqual(false);
-  });
-
-  it("Should render twitter icon when template is not centerAligned", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={singleAuthorStory} template="leftAligned" opts={{ showBio: false }} />
-      </Provider>
-    );
-    expect(wrapper.contains(<Twitter color="#000" />)).toEqual(true);
-  });
-});

package/src/components/Atoms/AuthorCard/index.js

@@ -1,312 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import kebabCase from "lodash.kebabcase";
-import { Link } from "@quintype/components";
-import { Twitter } from "../../Svgs/SocialIcons/plain/twitter";
-import "./author-card.m.css";
-import { useStateValue } from "../../SharedContext";
-import { getTextColor, getAuthorTwitterUrl } from "../../../utils/utils";
-import { ResponsiveLazyImg } from "../ResponsiveImg";
-import { useSelector } from "react-redux";
-import get from "lodash.get";
-import { storyAuthorImgWidths, storyAuthorImgSize } from "../../../utils/img-size-utils";
-
-const authorImage = (author, isBotRequest, sizes = "", widths = [48, 120, 250]) => {
-  const { "avatar-url": avatarUrl, "avatar-s3-key": avatarS3Key, name: authorName } = author;
-
-  if (!avatarUrl && !avatarS3Key) {
-    return null;
-  }
-  return (
-    <figure data-test-id="author-image" className="arr--author-image">
-      {avatarS3Key ? (
-        <ResponsiveLazyImg
-          slug={avatarS3Key}
-          aspectRatio={[1, 1]}
-          defaultWidth={48}
-          widths={widths}
-          imgParams={{ auto: ["format", "compress"] }}
-          alt={authorName}
-          isBotRequest={isBotRequest}
-          sizes={sizes}
-        />
-      ) : (
-        <img src={avatarUrl} alt={authorName} />
-      )}
-    </figure>
-  );
-};
-
-const AuthorsImage = ({ authors, mountAt = "", isBotRequest, sizes, widths }) => {
-  const isSingleAuthor = authors.length === 1;
-
-  const authorsWithImages = authors.filter((author) => author["avatar-url"] || author["avatar-s3-key"]);
-  return (
-    <div data-test-id="author-image" styleName="author-image-wrapper" className="arr-author-image">
-      {authorsWithImages.map((author, index) => {
-        return (
-          <React.Fragment key={author.id}>
-            <Link href={`${mountAt}/author/` + author.slug} key={`author-image-${index}`} aria-label="author-image">
-              <div
-                styleName={`author-image ${!index ? "first-author-image" : ""} ${
-                  !isSingleAuthor ? "multi-author-image" : ""
-                }`}>
-                {authorImage(author, isBotRequest, sizes, widths)}
-              </div>
-            </Link>
-          </React.Fragment>
-        );
-      })}
-    </div>
-  );
-};
-
-AuthorsImage.propTypes = {
-  authors: PropTypes.array,
-  mountAt: PropTypes.string,
-  isBotRequest: PropTypes.bool
-};
-
-const AuthorTwitter = ({ twitterUrl, textColor }) => {
-  return (
-    <>
-      {twitterUrl && (
-        <a href={twitterUrl} target="_blank" rel="noopener noreferrer">
-          <Twitter color={textColor === "dark" ? "#000" : "#fff"} />
-        </a>
-      )}
-    </>
-  );
-};
-
-AuthorTwitter.propTypes = {
-  twitterUrl: PropTypes.string,
-  textColor: PropTypes.string
-};
-
-const AuthorBio = ({ author, textColor }) => {
-  return (
-    <div data-test-id="author-info" styleName="author-details-wrapper">
-      <p styleName={`author-bio ${textColor}`}>{author.bio}</p>
-    </div>
-  );
-};
-
-AuthorBio.propTypes = {
-  author: PropTypes.object,
-  textColor: PropTypes.string
-};
-
-const AuthorsName = ({ authors, mountAt = "", textColor, showTwitter = false }) => {
-  const isSingleAuthor = authors.length === 1;
-  let twitterUrl = "";
-  if (isSingleAuthor) {
-    twitterUrl = getAuthorTwitterUrl(authors[0]);
-  }
-  const singleAuthorStyle = isSingleAuthor ? "single-author" : "";
-
-  return (
-    <div
-      data-test-id="author-name"
-      styleName={["author-name-share", singleAuthorStyle].join(" ")}
-      className="arr-name-share">
-      {authors.map((author, index) => {
-        const spaceHolder = `,\xa0`;
-        return (
-          <>
-            {index !== 0 && (authors.length > 1 ? spaceHolder : "")}
-            <span key={author.id}>
-              <Link
-                href={`${mountAt}/author/` + author.slug}
-                aria-label="author-name"
-                styleName={`multiple-author-style ${textColor}`}>
-                {author.name}
-              </Link>
-            </span>
-          </>
-        );
-      })}
-      {isSingleAuthor && showTwitter && (
-        <div styleName="twitter-wrapper">
-          <AuthorTwitter twitterUrl={twitterUrl} textColor={textColor} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-AuthorsName.propTypes = {
-  authors: PropTypes.array,
-  mountAt: PropTypes.string,
-  textColor: PropTypes.string,
-  showTwitter: PropTypes.boolean
-};
-
-const DefaultTemplate = ({
-  authors,
-  clazzName = "",
-  opts = {},
-  mountAt = "",
-  textColor,
-  isBotRequest,
-  sizes,
-  widths
-}) => {
-  const mainAuthors = [];
-  const guestAuthors = [];
-  const template = "default";
-
-  const {
-    showImage = true,
-    showName = true,
-    showLabels = false,
-    showGuestAuthorName = false,
-    showGuestAuthorImage = false,
-    localizedAuthorLabel,
-    localizedGuestAuthorLabel
-  } = opts;
-
-  const finalAuthorLabel = localizedAuthorLabel || "Author";
-  const finalGuestAuthorLabel = localizedGuestAuthorLabel || "Guest Author";
-
-  authors.forEach((author) => {
-    if (!author["contributor-role"] || author["contributor-role"].name === "Author") {
-      mainAuthors.push(author);
-    } else if (author["contributor-role"].name === "Guest Author") {
-      guestAuthors.push(author);
-    }
-  });
-
-  const isGuestAuthorsPresent = guestAuthors.length > 0;
-  return (
-    <>
-      <div data-test-id={`author-card-${kebabCase(template)}`} className={`${!showImage ? "author-card-wrapper" : ""}`}>
-        <div styleName={`author-card-wrapper ${template}`} className={clazzName}>
-          {showLabels && mainAuthors.length > 0 && (showName || showImage) && (
-            <span styleName={`${textColor} author-card-label`}>{`${finalAuthorLabel}:`}</span>
-          )}
-          {showImage && (
-            <AuthorsImage
-              authors={mainAuthors}
-              mountAt={mountAt}
-              isBotRequest={isBotRequest}
-              sizes={sizes}
-              widths={widths}
-            />
-          )}
-          {showName && <AuthorsName authors={mainAuthors} mountAt={mountAt} textColor={textColor} showTwitter={true} />}
-        </div>
-      </div>
-      <div
-        data-test-id={`author-card-${kebabCase(template)}`}
-        className={`${!showGuestAuthorImage ? "author-card-wrapper" : ""}`}>
-        <div
-          styleName={`author-card-wrapper ${template} ${isGuestAuthorsPresent ? "guest-author-wrapper" : ""}`}
-          className={clazzName}>
-          {showLabels && isGuestAuthorsPresent && (showGuestAuthorName || showGuestAuthorImage) && (
-            <span styleName={`${textColor} author-card-label`}>{`${finalGuestAuthorLabel}:`}</span>
-          )}
-          {showGuestAuthorImage && (
-            <AuthorsImage
-              authors={guestAuthors}
-              mountAt={mountAt}
-              isBotRequest={isBotRequest}
-              sizes={sizes}
-              widths={widths}
-            />
-          )}
-          {showGuestAuthorName && (
-            <AuthorsName authors={guestAuthors} mountAt={mountAt} textColor={textColor} showTwitter={true} />
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
-
-DefaultTemplate.propTypes = {
-  opts: PropTypes.shape({
-    showImage: PropTypes.bool,
-    showBio: PropTypes.bool,
-    showName: PropTypes.bool,
-    showLabels: PropTypes.bool,
-    showGuestAuthorName: PropTypes.bool,
-    showGuestAuthorImage: PropTypes.bool,
-    localizedAuthorLabel: PropTypes.string,
-    localizedGuestAuthorLabel: PropTypes.string
-  }),
-  mountAt: PropTypes.string,
-  clazzName: PropTypes.string,
-  textColor: PropTypes.string,
-  authors: PropTypes.array,
-  isBotRequest: PropTypes.bool
-};
-
-export const AuthorCard = ({ story = {}, template = "default", clazzName = "", opts = {}, mountAt = "" }) => {
-  const configData = useStateValue() || {};
-  const { authors = [] } = story;
-
-  const { showBio = false, showImage = true, showName = true } = opts;
-
-  const textColor = getTextColor(configData.theme);
-
-  const isSingleAuthor = authors.length === 1; // have to remove
-  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"]));
-  if (template === "default")
-    return (
-      <DefaultTemplate
-        authors={authors}
-        clazzName={clazzName}
-        opts={opts}
-        mountAt={mountAt}
-        textColor={textColor}
-        isBotRequest={isBotRequest}
-        sizes={storyAuthorImgSize["default"]}
-        widths={storyAuthorImgWidths}
-      />
-    );
-
-  return (
-    <div
-      data-test-id={`author-card-${kebabCase(template)}`}
-      className={clazzName}
-      styleName={`author-card-wrapper ${template}`}>
-      {showImage && (
-        <AuthorsImage
-          authors={authors}
-          mountAt={mountAt}
-          sizes={storyAuthorImgSize[template]}
-          widths={storyAuthorImgWidths}
-        />
-      )}
-      {showName && (
-        <AuthorsName
-          authors={authors}
-          mountAt={mountAt}
-          textColor={textColor}
-          showTwitter={template !== "centerAligned"}
-        />
-      )}
-      {showBio && isSingleAuthor && <AuthorBio author={authors[0]} textColor={textColor} />}
-    </div>
-  );
-};
-
-AuthorCard.propTypes = {
-  story: PropTypes.shape({
-    authors: PropTypes.array
-  }),
-  template: PropTypes.string,
-  opts: PropTypes.shape({
-    showImage: PropTypes.bool,
-    showBio: PropTypes.bool,
-    showName: PropTypes.bool,
-    showLabels: PropTypes.bool,
-    showGuestAuthorName: PropTypes.bool,
-    showGuestAuthorImage: PropTypes.bool,
-    localizedAuthorLabel: PropTypes.string,
-    localizedGuestAuthorLabel: PropTypes.string
-  }),
-  mountAt: PropTypes.string,
-  clazzName: PropTypes.string
-};