@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

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

@@ -0,0 +1,312 @@
+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
+};

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

@@ -0,0 +1,164 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore, optionalSelect } from "../../../../storybook";
+import { AuthorCard } from "./index";
+import Readme from "./README.md";
+import { boolean } from "@storybook/addon-knobs";
+
+const authorTemplate = {
+  "No value": "",
+  default: "default",
+  leftAligned: "leftAligned",
+  centerAligned: "centerAligned"
+};
+
+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": "quintype_inc",
+      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"
+      }
+    }
+  ]
+};
+
+const multipleAuthorsStory = {
+  ...story,
+  authors: [
+    ...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": "quintype_inc",
+      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"
+      }
+    },
+    {
+      id: 123982,
+      name: "Gopal krishnan",
+      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": "quintype_inc",
+      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: 874,
+        name: "Author"
+      }
+    },
+    {
+      id: 123985,
+      name: "Virat Kohli",
+      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": "quintype_inc",
+      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: 879,
+        name: "Author"
+      }
+    }
+  ]
+};
+
+withStore(
+  "Atoms/Author Card",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .addDecorator((story) => <div style={{ maxWidth: "1000px", margin: "auto" }}>{story()}</div>)
+  .add("Default", () => (
+    <AuthorCard
+      story={story}
+      template={optionalSelect("Template Options", authorTemplate)}
+      opts={{
+        showBio: boolean("bio", false),
+        showImage: boolean("image", true),
+        showLabels: boolean("show labels", false),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
+      }}
+    />
+  ))
+  .add("single author template", () => (
+    <AuthorCard
+      story={singleAuthorStory}
+      template={optionalSelect("Template Options", authorTemplate)}
+      opts={{
+        showBio: boolean("bio", true),
+        showImage: boolean("image", true),
+        showLabels: boolean("show labels", true),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
+      }}
+    />
+  ))
+  .add("Multiple author template", () => (
+    <AuthorCard
+      story={multipleAuthorsStory}
+      template={optionalSelect("Template Options", authorTemplate)}
+      opts={{
+        showBio: boolean("bio", true),
+        showImage: boolean("image", true),
+        showLabels: boolean("show labels", true),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
+      }}
+    />
+  ));

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

@@ -0,0 +1,31 @@
+# Author Image
+
+Author image is a generic component which picks a specific author's image.
+
+## Usage
+
+Import the AuthorImage component and pass author details as props.
+
+```jsx
+import { AuthorImage } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+
+<AuthorImage author={authorDetails}>
+
+```
+
+```jsx
+
+<AuthorImage author={authorDetails} template="square">
+
+```
+
+```jsx
+
+<AuthorImage author={authorDetails} template="smallCircle">
+
+```

package/src/components/Atoms/AuthorImage/author-image.m.css

@@ -0,0 +1,53 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.image-container {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.author-image img,
+.author-image svg {
+  border-radius: 50%;
+  width: 160px;
+  height: 160px;
+  @media (min-width: mobile) {
+    position: relative;
+    width: 224px;
+    height: 224px;
+    @media (min-width: tablet) {
+      width: 364px;
+      height: 364px;
+    }
+  }
+}
+
+.square img {
+  border-radius: 0;
+}
+
+.small-circle.author-image img,
+.small-circle.author-image svg {
+  border-radius: 133.5px;
+  width: 40px;
+  height: 40px;
+  @media (min-width: mobile) {
+    width: 88px;
+    height: 88px;
+  }
+  @media (min-width: tablet) {
+    width: 120px;
+    height: 120px;
+  }
+}
+
+.smaller-circle.author-image img,
+.smaller-circle.author-image svg {
+  width: 64px;
+  height: 64px;
+}

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

@@ -0,0 +1,62 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "@quintype/components";
+import { UserFallbackIcon } from "../../Svgs/user-fallback-icon";
+import { ResponsiveLazyImg } from "../ResponsiveImg";
+import { useSelector } from "react-redux";
+import get from "lodash.get";
+import "./author-image.m.css";
+
+const authorWithImage = (author, templateStyle, isBotRequest) => {
+  const { "avatar-url": avatarUrl, "avatar-s3-key": avatarS3Key, name } = author;
+  return (
+    <div className="arr--author-image" styleName={`author-image ${templateStyle}`} data-test-id="author-image">
+      <figure styleName="image-container">
+        {avatarS3Key ? (
+          <ResponsiveLazyImg
+            slug={avatarS3Key}
+            alt={name}
+            defaultWidth={250}
+            widths={[250, 480]}
+            aspectRatio={[[1, 1], [1, 1]]}
+            imgParams={{ auto: ["format", "compress"] }}
+            width="100%"
+            height="100%"
+            isBotRequest={isBotRequest}
+          />
+        ) : avatarUrl ? (
+          <img src={avatarUrl} alt={name} width="100%" height="100%" />
+        ) : (
+          <UserFallbackIcon />
+        )}
+      </figure>
+    </div>
+  );
+};
+
+const AuthorImage = ({ author = {}, template = "", config = {} }) => {
+  const { slug } = author;
+  const mountAt = config.mountAt || "";
+  let templateStyle = "";
+  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"]));
+
+  if (template === "smallerCircle") templateStyle = "smaller-circle";
+  else if (template === "smallCircle") templateStyle = "small-circle";
+  else if (template === "square") templateStyle = "square";
+
+  if (slug) return <Link href={`${mountAt}/author/` + slug}>{authorWithImage(author, templateStyle)}</Link>;
+  else return authorWithImage(author, templateStyle, isBotRequest);
+};
+
+AuthorImage.propTypes = {
+  author: PropTypes.shape({
+    "avatar-url": PropTypes.string,
+    "avatar-s3-key": PropTypes.string,
+    name: PropTypes.string,
+    slug: PropTypes.string
+  }),
+  template: PropTypes.string,
+  config: PropTypes.object
+};
+
+export default AuthorImage;

package/src/components/Atoms/AuthorImage/stories.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import AuthorImage from "./index";
+import Readme from "./README.md";
+import { authorData } from "../../Fixture";
+
+withStore(
+  "Atoms/AuthorImage",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .add("Default", () => <AuthorImage author={authorData} />)
+  .add("Square Image", () => <AuthorImage author={authorData} template="square" />)
+  .add("Small Circle Image", () => <AuthorImage author={authorData} template="smallCircle" />);

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

@@ -0,0 +1,12 @@
+# AuthorWithTimestamp
+A combination of the Author and Timestamp atoms.
+
+## Usage
+
+```jsx
+<AuthorWithTime story={story} />
+```
+```jsx
+<AuthorWithTime story={story} separator="divider" />
+```
+<!-- PROPS -->

package/src/components/Atoms/AuthorWithTimestamp/author-with-timestamp.m.css

@@ -0,0 +1,40 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.author-time-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  color: var(--arrow-c-mono2);
+}
+
+.author-image {
+  border-radius: 100%;
+  width: var(--arrow-spacing-l);
+  height: var(--arrow-spacing-l);
+  margin-right: var(--arrow-spacing-xs);
+}
+
+.dot {
+  position: relative;
+  margin-right: var(--arrow-spacing-xs);
+  top: -3px;
+}
+
+.dash {
+  position: relative;
+  margin-right: var(--arrow-spacing-xs);
+}
+
+.space-8 {
+  margin-right: 8px;
+}
+
+html[dir="rtl"] {
+  .dot {
+    margin-left: var(--arrow-spacing-xs);
+  }
+
+  .dash {
+    padding-left: var(--arrow-spacing-xs);
+  }
+}