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

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

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

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

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

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

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

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

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

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

@@ -1,115 +0,0 @@
-import React from "react";
-import get from "lodash.get";
-import { TimeStamp } from "../TimeStamp";
-import PropTypes from "prop-types";
-import { Author } from "../Author";
-import { useStateValue } from "../../SharedContext";
-import { useSelector } from "react-redux";
-import "./author-with-timestamp.m.css";
-import { getTextColor, getSeparator, getTheme } from "../../../utils/utils";
-import { ReadTime } from "../ReadTime";
-import { SponsoredLabel } from "../SponsoredLabel";
-
-export const AuthorWithTime = ({
-  story,
-  separator,
-  isBottom,
-  hideAuthorImage,
-  prefix,
-  config = {},
-  isLightTheme,
-  collectionId,
-  layout,
-  enableDarkModePreview = false
-}) => {
-  const configState = useStateValue() || {};
-  const isAuthor = get(config, ["showAuthor"], get(configState, ["showAuthor"], true));
-  const isTime = get(config, ["showTime"], get(configState, ["showTime"], true));
-  const isReadTime = get(configState, ["showReadTime"], true);
-  const separatorStyle = separator === "dot" ? "dot" : "dash";
-  const theme = getTheme(configState, layout, enableDarkModePreview);
-  const textColor = isLightTheme ? "light" : getTextColor(theme);
-  const isSeparatorEnabled = isAuthor && (isTime || isReadTime);
-  const { localization = {}, sponsoredStoryConfig = {} } = useSelector((state) =>
-    get(state, ["qt", "config", "pagebuilder-config", "general"], {})
-  );
-  const { localizedElements = {}, enableLocalization = false } = localization;
-  const timeToRead = (enableLocalization && get(localizedElements, ["buttonLabels", "timeToRead"])) || "min read";
-
-  const getTimeStamp = () => {
-    return (
-      <>
-        {isSeparatorEnabled && (
-          <div className="arr-separator" styleName={separatorStyle}>
-            {getSeparator(separator, textColor)}
-          </div>
-        )}
-        {isTime &&
-          (collectionId ? (
-            <div id={`publish-time-${collectionId}-${story.id}`}>
-              <TimeStamp story={story} config={config} layout={layout} enableDarkModePreview={enableDarkModePreview} />
-            </div>
-          ) : (
-            <TimeStamp story={story} config={config} layout={layout} enableDarkModePreview={enableDarkModePreview} />
-          ))}
-        {isReadTime && (
-          <ReadTime
-            story={story}
-            opts={{ ...config, showDotIndicator: isTime, separator, localizedTimeToRead: timeToRead }}
-            isLightTheme={isLightTheme}
-            layout={layout}
-            enableDarkModePreview={enableDarkModePreview}
-          />
-        )}
-        <div styleName="space-8"></div>
-      </>
-    );
-  };
-
-  return (
-    <div className="arr--author-time" styleName="author-time-wrapper">
-      {isAuthor ? (
-        <>
-          <Author
-            story={story}
-            isBottom
-            hideAuthorImage={hideAuthorImage}
-            prefix={prefix}
-            layout={layout}
-            enableDarkModePreview={enableDarkModePreview}
-          />
-          {getTimeStamp()}
-        </>
-      ) : (
-        getTimeStamp()
-      )}
-      <SponsoredLabel story={story} sponsoredStoryConfig={sponsoredStoryConfig} />
-    </div>
-  );
-};
-
-AuthorWithTime.propTypes = {
-  story: PropTypes.object,
-  /** Style of separator between the Author & Timestamp */
-  separator: PropTypes.oneOf(["dot", "divider"]),
-  /** hide the author image */
-  hideAuthorImage: PropTypes.bool,
-  // fix author and time at the end
-  isBottom: PropTypes.bool,
-  // fix prefix before the author name
-  prefix: PropTypes.string,
-  config: PropTypes.object,
-  isLightTheme: PropTypes.bool,
-  collectionId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  layout: PropTypes.string,
-  enableDarkModePreview: PropTypes.bool
-};
-
-AuthorWithTime.defaultProps = {
-  separator: "dot",
-  isBottom: false,
-  hideAuthorImage: true,
-  prefix: "",
-  isLightTheme: false,
-  layout: ""
-};

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

@@ -1,27 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { AuthorWithTime } from "./index";
-import Readme from "./README.md";
-
-const story = generateStory();
-const config = {
-  localizationConfig: {
-    localizedTimeToRead: "মিনিট পড়া"
-  }
-};
-
-withStore(
-  "Atoms/Author With Time Stamp",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-)
-  .add("default", () => <AuthorWithTime story={story} />)
-  .add("Author without Divider and Time", () => <AuthorWithTime story={story} separator="divider" />)
-  .add("Author with Localization Time", () => <AuthorWithTime story={story} config={config} />);

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

@@ -1,9 +0,0 @@
-# Bullet Point
-
-Component to add a bullet point to a story card.
-
-## Usage
-
-```jsx
-<BulletPoint bulletValue={bulletValue} />
-```

package/src/components/Atoms/BulletPoint/bullet-point.m.css

@@ -1,25 +0,0 @@
-.bullet {
-  font-size: var(--arrow-fs-huge);
-  font-weight: var(--arrow-fw-bold);
-  line-height: var(--arrow-lh-3);
-}
-
-.dark {
-  color: var(--arrow-c-mono6);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono6);
-}
-
-html[dir="ltr"] {
-  .bullet {
-    margin-right: var(--arrow-spacing-l);
-  }
-}
-
-html[dir="rtl"] {
-  .bullet {
-    margin-left: var(--arrow-spacing-l);
-  }
-}

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

@@ -1,19 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { useStateValue } from "../../SharedContext";
-import { getTextColor } from "../../../utils/utils";
-import "./bullet-point.m.css";
-
-export const BulletPoint = ({ bulletValue = "" }) => {
-  const configData = useStateValue() || {};
-  const textColor = getTextColor(configData.theme);
-  return (
-    <div className="arrow-component arr--bullet-point">
-      <span styleName={`bullet ${textColor}`}>{bulletValue}</span>
-    </div>
-  );
-};
-
-BulletPoint.propTypes = {
-  bulletValue: PropTypes.string
-};

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

@@ -1,6 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../storybook";
-import { BulletPoint } from "./index";
-import Readme from "./README.md";
-
-withStore("Atoms/Bullet Point", {}, Readme).add("Default", () => <BulletPoint bulletValue={"1"} />);

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

@@ -1,15 +0,0 @@
-# CaptionAttribution
-
-Displays the Caption and Attribution of Hero Image or Image Element of the Story.
-
-## Usage
-
-```jsx
-<CaptionAttribution story={story} config={{ theme: "ffff" }} />
-```
-
-```jsx
-<CaptionAttribution element={element} config={{ theme: "ffff" }} />
-```
-
-<!-- PROPS -->

package/src/components/Atoms/CaptionAttribution/caption-attribution.m.css

@@ -1,40 +0,0 @@
-@value viewports: "../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-
-.caption {
-  font-size: 12px;
-  font-family: var(--arrow-typeface-secondary);
-  margin: var(--arrow-spacing-xs) 0;
-  line-height: var(--arrow-lh-5);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-tiny);
-  }
-}
-
-.wrapper {
-  padding-left: var(--arrow-spacing-s);
-}
-
-.caption.dark {
-  color: var(--arrow-c-mono2);
-}
-
-.attribution.dark {
-  color: var(--arrow-c-mono4);
-}
-
-.caption.light {
-  color: var(--arrow-c-invert-mono2);
-}
-
-.attribution.light {
-  color: var(--arrow-c-invert-mono4);
-}
-
-html[dir="rtl"] {
-  .wrapper {
-    padding-left: 0;
-    padding-right: var(--arrow-spacing-s);
-    display: inline-block;
-  }
-}

package/src/components/Atoms/CaptionAttribution/caption-attribution.test.js

@@ -1,29 +0,0 @@
-import React from "react";
-import { mount, shallow } from "enzyme";
-import { CaptionAttribution } from "./index";
-import { generateStory, generateStoryElementData } from "../../Fixture";
-
-describe("Caption Attribution Component", () => {
-  it("Should display the Caption and Attribution of Image element", () => {
-    const element = generateStoryElementData("image");
-    const wrapper = mount(<CaptionAttribution element={element} story="" />);
-    expect(wrapper.find({ "data-test-id": "caption" }).prop("className")).toMatch(/caption/);
-    // the below test is to check if the attribution is present
-    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/attribution/);
-    // the below test is to check if the caption is present
-    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/wrapper/);
-  });
-
-  it("Should display the Caption and Attribution of Story", () => {
-    const story = generateStory();
-    const wrapper = mount(<CaptionAttribution story={story} element="" />);
-    expect(wrapper.find({ "data-test-id": "caption" }).prop("className")).toMatch(/caption/);
-    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/attribution/);
-    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/wrapper/);
-  });
-
-  test("Should not render the Caption and Attribution if the data is null", () => {
-    const component = shallow(<CaptionAttribution story="" element="" />);
-    expect(component.contains(<CaptionAttribution story="" element="" />)).toBe(false);
-  });
-});