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

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

@@ -1,22 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { HeroImage } from "./index";
-import Readme from "./README.md";
-
-import { withStore } from "../../../../storybook";
-
-const story = generateStory();
-
-withStore(
-  "Atoms/Hero Image",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-)
-  .add("Full Bleed Image", () => <HeroImage story={story} />)
-  .add("With Padding Image", () => <HeroImage story={story} FullBleed={false} aspectRatio={[[1, 1], [16, 9]]} />);

package/src/components/Atoms/Hyperlink/hyperlink.m.css

@@ -1,10 +0,0 @@
-.hyperlink-button {
-  position: absolute;
-  right: var(--arrow-spacing-xxs);
-  bottom: var(--arrow-spacing-xxs);
-  z-index: 10;
-}
-
-.hyperlink-button svg rect {
-  fill: var(--arrow-c-brand1);
-}

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

@@ -1,24 +0,0 @@
-import { Link } from "@quintype/components";
-import React from "react";
-import PropTypes from "prop-types";
-import { HyperLinkIcon } from "../../Svgs/hyperlink";
-import "./hyperlink.m.css";
-
-export const HyperLink = ({ hyperLink = "" }) => {
-  if (!hyperLink) return null;
-  return (
-    <Link
-      href={hyperLink}
-      aria-label="hyperlink-button"
-      className="arr--hyperlink-button"
-      target="_blank"
-      rel="noopener noreferrer"
-      styleName="hyperlink-button">
-      <HyperLinkIcon />
-    </Link>
-  );
-};
-
-HyperLink.propTypes = {
-  hyperLink: PropTypes.string
-};

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

@@ -1,30 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { getTextColor } from "../../../utils/utils";
-import "./load-more-target.m.css";
-
-export const LoadMoreTarget = ({ collection, componentName, offset, limit, theme = "" }) => {
-  const textColor = getTextColor(theme);
-  return (
-    <div
-      id={`ELM-${collection.id}`}
-      data-collection-slug={collection["slug"]}
-      data-component-name={componentName}
-      data-collection-offset={offset}
-      data-collection-limit={limit}
-      className={`elm-${componentName.toLowerCase()}`}
-      styleName={textColor}
-    />
-  );
-};
-
-LoadMoreTarget.propTypes = {
-  collection: PropTypes.shape({
-    id: PropTypes.string,
-    slug: PropTypes.string
-  }),
-  componentName: PropTypes.string,
-  offset: PropTypes.number,
-  limit: PropTypes.number,
-  theme: PropTypes.string
-};

package/src/components/Atoms/LoadMoreTarget/load-more-target.m.css

@@ -1,7 +0,0 @@
-.light :global(.arr--button) {
-  color: var(--arrow-c-invert-mono2);
-}
-
-.dark :global(.arr--button) {
-  color: var(--arrow-c-mono2);
-}

package/src/components/Atoms/Loadmore/__snapshots__/load-more.test.js.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Load more button Should render button and load items subsequently with SubsequentLoadCount as template property. 1`] = `
-<div
-  className="arr--button load-more-m_button__1mmf1 load-more-m_dark__3dfzb load-more-m_default__2_k4V"
-  data-test-id="load-more"
->
-  Read More
-</div>
-`;
-
-exports[`Load more button Should render button and navigate to the corresponding url with NavigateToPage as template property. 1`] = `
-<a
-  aria-label="load-more"
-  data-test-id="load-more"
-  href="/"
-  onClick={[Function]}
->
-  <div
-    className="arr--button load-more-m_button__1mmf1 load-more-m_dark__3dfzb load-more-m_default__2_k4V"
-  >
-    Read More
-  </div>
-</a>
-`;

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

@@ -1,54 +0,0 @@
-import React from "react";
-import { LinkBase } from "@quintype/components";
-import PropTypes from "prop-types";
-import { getTextColor, generateNavigateSlug, getPath } from "../../../utils/utils";
-import "./load-more.m.css";
-
-export const LoadmoreButton = ({
-  config = {},
-  collection,
-  template = "SubsequentLoadCount",
-  onClick,
-  navigate,
-  qtConfig
-}) => {
-  const { "sketches-host": sketchesHost } = config;
-  const { showButton = true, buttonText = "Read More", theme = "", customUrlPath = "" } = config;
-  if (!showButton) return null;
-
-  const textColor = getTextColor(theme);
-  const slug = customUrlPath
-    ? getPath(sketchesHost, `/${customUrlPath}`)
-    : generateNavigateSlug(collection, { ...qtConfig, ...config });
-
-  if (config?.onSubscriptionClick) {
-    return (
-      <div onClick={config?.onSubscriptionClick}>
-        <div className="arr--button" styleName={`button ${textColor} default`}>
-          {buttonText}
-        </div>
-      </div>
-    );
-  }
-
-  return template === "SubsequentLoadCount" ? (
-    <div className="arr--button" styleName={`button ${textColor} default`} onClick={onClick} data-test-id="load-more">
-      {buttonText}
-    </div>
-  ) : (
-    <LinkBase href={slug} navigateTo={navigate} data-test-id="load-more" aria-label="load-more">
-      <div className="arr--button" styleName={`button ${textColor} default`}>
-        {buttonText}
-      </div>
-    </LinkBase>
-  );
-};
-
-LoadmoreButton.propTypes = {
-  collection: PropTypes.object,
-  template: PropTypes.string,
-  config: PropTypes.object,
-  onClick: PropTypes.func,
-  navigate: PropTypes.func,
-  qtConfig: PropTypes.object
-};

package/src/components/Atoms/Loadmore/load-more.m.css

@@ -1,23 +0,0 @@
-.button {
-  padding: var(--arrow-spacing-xs) var(--arrow-spacing-l);
-  border: 1px solid;
-  display: flex;
-  margin: var(--arrow-spacing-m) auto var(--arrow-spacing-xs) auto;
-  font-size: var(--arrow-fs-xs);
-  border-radius: var(--arrow-spacing-xxs);
-  background-color: transparent;
-  width: fit-content;
-  cursor: pointer;
-}
-
-.default {
-  display: block;
-}
-
-.dark {
-  color: var(--arrow-c-mono2);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono2);
-}

package/src/components/Atoms/Loadmore/load-more.test.js

@@ -1,30 +0,0 @@
-import * as React from "react";
-import renderer from "react-test-renderer";
-import { LoadmoreButton } from "./index";
-import { Provider } from "react-redux";
-import { generateStore, generateCollection } from "../../Fixture";
-
-const collection = generateCollection();
-
-describe("Load more button", () => {
-  it("Should render button and load items subsequently with SubsequentLoadCount as template property.", () => {
-    const wrapper = renderer
-      .create(
-        <Provider store={generateStore}>
-          <LoadmoreButton template="SubsequentLoadCount" collection={collection} />
-        </Provider>
-      )
-      .toJSON();
-    expect(wrapper).toMatchSnapshot();
-  });
-  it("Should render button and navigate to the corresponding url with NavigateToPage as template property.", () => {
-    const wrapper = renderer
-      .create(
-        <Provider store={generateStore}>
-          <LoadmoreButton template="NavigateToPage" collection={collection} />
-        </Provider>
-      )
-      .toJSON();
-    expect(wrapper).toMatchSnapshot();
-  });
-});

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

@@ -1,17 +0,0 @@
-import React from "react";
-import { withStore, optionalSelect } from "../../../../storybook";
-import { LoadmoreButton } from "./index";
-import Readme from "./README.md";
-import { generateCollection } from "../../Fixture";
-
-const collection = generateCollection();
-
-const buttonOptions = {
-  NavigateToPage: "NavigateToPage",
-  SubsequentLoadCount: "SubsequentLoadCount",
-  CustomUrlPath: "CustomUrlPath"
-};
-
-withStore("Atoms/Button", {}, Readme).add("Buttons Options", () => (
-  <LoadmoreButton collection={collection} template={optionalSelect("Button Options", buttonOptions)} />
-));

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

@@ -1,21 +0,0 @@
-# MagazineCoverImage
-
-Magazine cover image is used to represent the cover of the magazine.
-
-## Usage
-
-Import the MagazineCoverImage and pass collection, props and the config.
-
-```jsx
-import { MagazineCoverImage } from "@quintype/arrow";
-```
-
-### Use as a component
-
-```jsx
-const contextConfig = {
-  theme: #333333;
-};
-<MagazineCoverImage collection={collection} config={contextConfig} >
-
-```

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

@@ -1,73 +0,0 @@
-import React from "react";
-import { Link } from "@quintype/components";
-import PropTypes from "prop-types";
-import get from "lodash.get";
-import { useSelector } from "react-redux";
-import { getSlug } from "../../../utils/utils";
-import "./magazine-cover-image.m.css";
-import { FallbackImage } from "../FallbackImage";
-import { ResponsiveLazyImg } from "../ResponsiveImg";
-import { roundedCornerClass } from "../../../constants";
-
-export const MagazineCoverImageCard = ({ collection, config = {}, collectionIndex }) => {
-  const imgAltText = get(collection, ["metadata", "magazine", "name"], "cover-image");
-  const coverImageData = get(collection, ["metadata", "cover-image"]) || {};
-  const { magazineSlug = "" } = config;
-  const {
-    "cover-image-url": coverUrl,
-    "cover-image-s3-key": covers3Key,
-    "cover-image-metadata": coverImageMetaData
-  } = coverImageData;
-
-  const isFirstCollection = collectionIndex === 0;
-  const slug = magazineSlug && collection && getSlug(collection, config);
-
-  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"], false));
-  const enableRoundedCorners = useSelector((state) =>
-    get(state, ["qt", "config", "pagebuilder-config", "general", "enableRoundedCorners"], false)
-  );
-
-  const roundedCorners = enableRoundedCorners ? roundedCornerClass : "";
-  return (
-    <div className="arr--magazine-cover-img" styleName="cover-image">
-      {covers3Key || coverUrl ? (
-        <figure styleName="image" className={`${roundedCorners}`}>
-          {covers3Key ? (
-            <Link href={slug} aria-label="magazine-cover-image">
-              <ResponsiveLazyImg
-                slug={covers3Key}
-                aspectRatio={[1, 2]}
-                metadata={{ coverImageMetaData }}
-                defaultWidth={400}
-                imgParams={{ auto: ["format", "compress"] }}
-                alt={imgAltText}
-                isBotRequest={isBotRequest}
-                className={"arr-image-placeholder"}
-                priority={isFirstCollection}
-              />
-            </Link>
-          ) : (
-            <img src={coverUrl} alt="cover-image" loading="lazy" fetchPriority={isFirstCollection && "high"} />
-          )}
-        </figure>
-      ) : (
-        <div styleName="fallback-img">
-          <FallbackImage slug={slug} roundedCorners={roundedCorners} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-MagazineCoverImageCard.propTypes = {
-  collection: PropTypes.shape({
-    "cover-image-url": PropTypes.string,
-    "cover-image-s3-key": PropTypes.string,
-    "cover-image-metadata": PropTypes.string,
-    slug: PropTypes.string
-  }),
-  config: PropTypes.shape({
-    magazineSlug: PropTypes.string
-  }),
-  collectionIndex: PropTypes.number
-};

package/src/components/Atoms/MagazineCoverImage/magazine-cover-image.m.css

@@ -1,24 +0,0 @@
-.cover-image {
-  position: relative;
-}
-
-.cover-image figure.image {
-  padding-top: 138%;
-}
-
-.image {
-  position: relative;
-}
-
-.image img {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-}
-
-.fallback-img {
-  padding-top: 138%;
-}

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

@@ -1,21 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../storybook";
-import { MagazineCoverImageCard } from "./index";
-import Readme from "./README.md";
-import { generateCollection } from "../../Fixture";
-import { config } from "@storybook/addon-actions";
-
-const collection = generateCollection({ stories: 4 });
-
-withStore(
-  "Atoms/Magazine CoverImage",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-).add("MagazineCoverImage", () => <MagazineCoverImageCard collection={collection} config={config} />);

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

@@ -1,27 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { CrownIcon } from "../../Svgs/crown";
-import { KeyIcon } from "../../Svgs/key";
-import { LockIcon } from "../../Svgs/lock";
-import { StarIcon } from "../../Svgs/star";
-
-export const PremiumStoryIcon = ({ width, height, color, iconType, positionTop }) => {
-  switch (iconType) {
-    case "crown":
-      return <CrownIcon width={width} height={height} color={color} positionTop={positionTop} />;
-    case "lock":
-      return <LockIcon width={width} height={height} color={color} positionTop={positionTop} />;
-    case "key":
-      return <KeyIcon width={width} height={height} color={color} positionTop={positionTop} />;
-    default:
-      return <StarIcon width={width} height={height} color={color} positionTop={positionTop} />;
-  }
-};
-
-PremiumStoryIcon.propTypes = {
-  width: PropTypes.string,
-  height: PropTypes.string,
-  color: PropTypes.string,
-  iconType: PropTypes.string,
-  positionTop: PropTypes.string
-};

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

@@ -1,15 +0,0 @@
-# Publish Details
-
-Component to display the publish details for the story card.
-
-## Usage
-
-```jsx
-<PublishDetails story={story} />
-```
-
-```jsx
-<PublishDetails story={story} opts={{ showReadTime: true, enableUpdatedTime: true, enablePublishedTime: false, localizedPublishedOn: "ಪ್ರಕಟಿಸಲಾಗಿದೆ", localizedUpdatedOn: "ನವೀಕರಿಸಲಾಗಿದೆ" }} />
-
-<!-- PROPS -->
-```

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

@@ -1,105 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-
-import { getTextColor, getTimeStamp, timestampToFormat } from "../../../utils/utils";
-import { ReadTime } from "../ReadTime";
-
-import "./publish-details.m.css";
-import { useStateValue } from "../../SharedContext";
-import { useSelector } from "react-redux";
-import get from "lodash.get";
-
-export const PublishDetails = ({ story, opts = {}, template = "", timezone = null }) => {
-  const [direction, setDirection] = useState("ltr");
-  // Hardcoding the language code or else the dates will be formatted based on language code
-  // Most of the publishers want dates to be formatted in english.
-  // TODO: Format numbers based on publisher preference
-
-  const languageCode = "en";
-  useEffect(() => {
-    const htmlElement = document.getElementsByTagName("HTML");
-    if (htmlElement && htmlElement.length > 0 && htmlElement[0].dir.toLocaleLowerCase() === "rtl") {
-      setDirection("rtl");
-    }
-  }, []);
-
-  const config = useStateValue() || {};
-  const { "first-published-at": firstPublishAt, "last-published-at": lastPublish } = story;
-  const {
-    enableUpdatedTime,
-    enablePublishedTime,
-    showReadTime,
-    localizedPublishedOn,
-    localizedUpdatedOn,
-    localizedMonths,
-    localizedMeridiem,
-    localizedTimeToRead,
-  } = opts;
-  const time = firstPublishAt || lastPublish;
-  const textColor = getTextColor(config.theme);
-  const timeStampProps = { ...opts, direction: direction, showTime: true };
-  const updatedStyle = direction === "rtl" && !localizedMonths && !localizedMeridiem ? "date wrapper" : "date";
-  const { localization = {} } = useSelector((state) => get(state, ["qt", "config", "pagebuilder-config", "general"], {}));
-  const { localizedElements = {},  enableLocalization = false } = localization;
-  const timeToRead =
-    get(opts, ["localizedTimeToRead"]) ||  (enableLocalization && get(localizedElements, ["buttonLabels", "timeToRead"])) || "min read";
-
-  return (
-    <div data-test-id="timeStamp" className="arrow-component arr--publish-details" styleName={`timeStamp ${textColor}`}>
-      {enablePublishedTime && (
-        <div data-test-id="publishDetails" styleName={`publish-details ${textColor}`}>
-          {localizedPublishedOn || "Published on"}:&nbsp;
-          <div styleName={updatedStyle}>
-            {getTimeStamp({
-              date: time,
-              formatter: timestampToFormat,
-              config: timeStampProps,
-              languageCode,
-              template,
-              timezone
-            })}
-          </div>
-          {!enableUpdatedTime && showReadTime && (
-            <ReadTime story={story} opts={{ ...opts, showDotIndicator: enablePublishedTime, localizedTimeToRead: timeToRead }} />
-          )}
-        </div>
-      )}
-      {enableUpdatedTime && (
-        <div data-test-id="updateDetails" styleName={`update-details ${textColor}`}>
-          {localizedUpdatedOn || "Updated on"}:&nbsp;
-          <div styleName={updatedStyle}>
-            {getTimeStamp({
-              date: lastPublish,
-              formatter: timestampToFormat,
-              config: timeStampProps,
-              languageCode,
-              template,
-              timezone
-            })}
-          </div>
-          {showReadTime && <ReadTime story={story} opts={{ ...opts, showDotIndicator: enableUpdatedTime, localizedTimeToRead: timeToRead }} />}
-        </div>
-      )}
-      {!enablePublishedTime && !enableUpdatedTime && showReadTime && (
-        <ReadTime story={story} opts={{ ...opts, showDotIndicator: enableUpdatedTime, localizedTimeToRead: timeToRead }} />
-      )}
-    </div>
-  );
-};
-
-PublishDetails.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes.shape({
-    "first-published-at": PropTypes.number,
-    "last-published-at": PropTypes.number,
-    "read-time": PropTypes.number,
-    "updated-at": PropTypes.number
-  }),
-  timezone: PropTypes.string,
-  template: PropTypes.string,
-  opts: PropTypes.shape({
-    showReadTime: PropTypes.bool,
-    enableUpdatedTime: PropTypes.bool,
-    enablePublishedTime: PropTypes.bool
-  })
-};

package/src/components/Atoms/PublishDetail/publish-details.m.css

@@ -1,53 +0,0 @@
-@value viewports: "../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-
-.timeStamp {
-  margin-top: var(--arrow-spacing-m);
-  font-size: var(--arrow-fs-tiny);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-xs);
-  }
-}
-
-.timeStamp.dark {
-  color: var(--arrow-c-mono4);
-}
-
-.timeStamp.light {
-  color: var(--arrow-c-invert-mono4);
-}
-
-.update-details,
-.publish-details {
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-}
-
-.update-details {
-  margin-top: var(--arrow-spacing-s);
-}
-
-.dot-indicator {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--arrow-spacing-xs);
-}
-
-.timeStamp :global(.arr--read-time) {
-  font-size: var(--arrow-fs-tiny);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-xs);
-  }
-}
-
-.date.dark {
-  color: var(--arrow-c-mono2);
-}
-.date.light {
-  color: var(--arrow-c-invert-mono2);
-}
-
-.wrapper {
-  direction: ltr;
-}

package/src/components/Atoms/PublishDetail/publish-details.test.js

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { mount } from "enzyme";
-import expect from "expect";
-import { generateStory, generateStore } from "../../Fixture/index";
-import { PublishDetails } from "./index";
-import { Provider } from "react-redux";
-
-const story = generateStory();
-
-describe("default author card", () => {
-  it("Should render default publish details componen", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <PublishDetails story={story} />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "timeStamp" }).prop("className")).toMatch(/timeStamp/);
-  });
-  it("Should render without updated time", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <PublishDetails story={story} opts={{ enableUpdatedTime: false }} />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "update-details" }).length).toEqual(0);
-  });
-  it("Should render without read time", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <PublishDetails story={story} opts={{ showReadTime: false }} />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "read-time" }).length).toEqual(0);
-  });
-});

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

@@ -1,22 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { PublishDetails } from "./index";
-import { boolean, text } from "@storybook/addon-knobs";
-import Readme from "./README.md";
-
-const story = generateStory();
-
-withStore("Atoms/Publish Details", {}, Readme).add("Default", () => (
-  <PublishDetails
-    story={story}
-    opts={{
-      showReadTime: boolean("Show read Time", true),
-      enableUpdatedTime: boolean("Enable Update Time", true),
-      enablePublishedTime: boolean("Enable Published Time", true),
-      localizedPublishedOn: text("Localise Published On", "ಪ್ರಕಟಿಸಲಾಗಿದೆ"),
-      localizedUpdatedOn: text("Localise Updated On", "ನವೀಕರಿಸಲಾಗಿದೆ"),
-      timeFormat: "12hours"
-    }}
-  />
-));

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

@@ -1,13 +0,0 @@
-# Read Time
-
-Component to display the read time for the story card.
-
-## Usage
-
-```jsx
-<ReadTime story={story} />
-```
-
-```jsx
-<ReadTime story={story} opts={{ showReadTime: true }} />
-```