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

package/src/components/Atoms/Author/author.m.css

@@ -0,0 +1,62 @@
+@custom-media --viewport-medium (width >=768px);
+
+.author {
+  display: flex;
+  align-items: center;
+  color: var(--arrow-c-mono4);
+}
+
+.author-image {
+  border-radius: 100%;
+  width: var(--arrow-spacing-l);
+  height: var(--arrow-spacing-l);
+  margin-right: var(--arrow-spacing-xs);
+  overflow: hidden;
+}
+
+.author-image figure,
+.author-image img {
+  /* width & height need to be explicitly set for improving CLS */
+  height: 100%;
+  width: 100%;
+}
+
+.author-name {
+  margin: auto var(--arrow-spacing-xs) auto 0;
+  word-break: break-all;
+}
+
+.prefix {
+  margin: auto var(--arrow-spacing-xxs) auto 0;
+}
+
+.rtl-image {
+  display: none;
+}
+
+html[dir="rtl"] {
+  .author-name {
+    margin-right: 0;
+  }
+
+  .prefix {
+    margin-right: 0;
+    margin-left: var(--arrow-spacing-xxs);
+  }
+
+  .ltr-image {
+    display: none;
+  }
+
+  .rtl-image {
+    display: block;
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono4);
+}

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

@@ -0,0 +1,112 @@
+import React from "react";
+import { useSelector, connect } from "react-redux";
+import PropTypes from "prop-types";
+import get from "lodash.get";
+import { useStateValue } from "../../SharedContext";
+import { Link } from "@quintype/components";
+import { getTextColor, getTheme } from "../../../utils/utils";
+import { ResponsiveLazyImg } from "../ResponsiveImg";
+
+import "./author.m.css";
+
+const AuthorBase = ({
+  story,
+  hideAuthorImage,
+  isBottom,
+  prefix = "",
+  config = {},
+  layout,
+  enableDarkModePreview = false
+}) => {
+  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 isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"]));
+  const theme = getTheme(configData, layout, enableDarkModePreview);
+  const textColor = getTextColor(theme);
+  const mountAt = get(config, ["mountAt"], "");
+
+  const authorImage = (dir) => {
+    if (!avatarUrl && !avatarS3Key) {
+      return null;
+    }
+    return (
+      <div styleName={`author-image ${dir}-image`} data-test-id="author-image" className="arr--author-image">
+        <figure>
+          {avatarS3Key ? (
+            <ResponsiveLazyImg
+              slug={avatarS3Key}
+              aspectRatio={[1, 1]}
+              defaultWidth={400}
+              imgParams={{ auto: ["format", "compress"] }}
+              alt={authorName}
+              isBotRequest={isBotRequest}
+            />
+          ) : (
+            <img src={avatarUrl} alt={authorName} />
+          )}
+        </figure>
+      </div>
+    );
+  };
+  const isPrefix = (dir) => {
+    if (prefix) {
+      return (
+        <div className="arr-author-prefix" styleName={`prefix ${textColor}`}>
+          {prefix}
+        </div>
+      );
+    }
+    return !hideAuthorImage && authorImage(dir);
+  };
+  return (
+    <>
+      {isAuthor && (
+        <Link
+          className="author-name arr-author-name arrow-component"
+          href={`${mountAt}/author/` + slug}
+          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"]}
+          </div>
+          {!prefix && isPrefix("rtl")}
+        </Link>
+      )}
+    </>
+  );
+};
+
+function mapStateToProps(state) {
+  return {
+    config: get(state, ["qt", "config"], {})
+  };
+}
+
+export const Author = connect(mapStateToProps)(AuthorBase);
+
+AuthorBase.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+  /** Hide Author Avatar Image */
+  hideAuthorImage: PropTypes.bool,
+  // fix Author bottom of the storyCard
+  isBottom: PropTypes.bool,
+  // fix prefix before the author name
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  layout: PropTypes.string,
+  enableDarkModePreview: PropTypes.bool
+};
+
+AuthorBase.defaultProps = {
+  hideAuthorImage: false,
+  isBottom: false,
+  prefix: "",
+  layout: ""
+};

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { Author } from "./index";
+import Readme from "./README.md";
+
+const story = generateStory();
+
+withStore(
+  "Atoms/Author",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+)
+  .add("With Author Image", () => <Author story={story} />)
+  .add("With Prefix", () => <Author story={story} prefix="By" />)
+  .add("Without Author Image", () => <Author story={story} hideAuthorImage />);

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

@@ -0,0 +1,55 @@
+# 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

@@ -0,0 +1,224 @@
+@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

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