@quintype/arrow 3.20.0-perf-v2.0 → 3.20.0

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

@@ -1,168 +0,0 @@
-import { Link, ResponsiveHeroImage } from "@quintype/components";
-import get from "lodash.get";
-import PropTypes from "prop-types";
-import React from "react";
-import { useSelector } from "react-redux";
-import { clientWidth, isExternalStory, getStoryUrl } from "../../../utils/utils";
-import { useStateValue } from "../../SharedContext";
-import { FallbackImage } from "../FallbackImage";
-import { HyperLink } from "../Hyperlink";
-import "./hero-image.m.css";
-
-export const HeroImage = ({
-  story,
-  FullBleed,
-  aspectRatio,
-  defaultWidth,
-  widths,
-  isHorizontal,
-  isHorizontalMobile,
-  isHorizontalWithImageLast,
-  defaultFallback,
-  isStoryPageImage,
-  config
-}) => {
-  const { fallbackImageUrl = "" } = useStateValue() || {};
-  const { StoryTemplateIcon = () => null } = config;
-
-  const showImagePlaceholder = useSelector((state) => get(state, ["qt", "config", "showPlaceholder"]));
-  const getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
-
-  const fullBleed = FullBleed ? "" : "with-padding";
-
-  let heroImageClass = "hero-image";
-  if (isHorizontal) heroImageClass = "right-padding";
-  else if (isHorizontalWithImageLast) heroImageClass = "left-padding";
-
-  const heroImageMobClasses = isHorizontalMobile ? "right-padding-mob" : "";
-
-  const getPadding = (aspectRatio) => {
-    const [height, width] = aspectRatio;
-    if (height > 0 && width > 0) {
-      const padding = (width / height) * 100;
-      return padding;
-    }
-    return 0;
-  };
-
-  const [mobileAspectRatio, desktopAspectRatio = mobileAspectRatio] = aspectRatio;
-  const isMobile = clientWidth("mobile");
-
-  const imageAspectRatio = isMobile ? mobileAspectRatio : desktopAspectRatio;
-  const imagePadding = isMobile ? getPadding(mobileAspectRatio) : getPadding(desktopAspectRatio);
-  const slug =
-    get(story, ["hero-image-s3-key"]) ||
-    get(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
-  const hyperLink = get(story, ["hero-image-hyperlink"], "");
-
-  const fallbackImage = () => {
-    if (!slug) {
-      if (fallbackImageUrl && !isStoryPageImage) {
-        return (
-          <figure
-            styleName={`image ${getPlaceholderStyleName}`}
-            className="arr--responsive-hero-image"
-            style={{
-              paddingTop: imagePadding + `%`
-            }}>
-            <img className="qt-image" data-src={`${fallbackImageUrl}`} alt="image-fallback"></img>
-          </figure>
-        );
-      }
-
-      return (
-        <>
-          {defaultFallback ? (
-            <div
-              styleName={`image ${getPlaceholderStyleName}`}
-              className="arr--fallback-hero-image"
-              data-test-id="arr--fallback-hero-image"
-              style={{
-                paddingTop: imagePadding + `%`
-              }}>
-              <StoryTemplateIcon storyTemplate={story["story-template"]} />
-              <FallbackImage />
-            </div>
-          ) : null}
-        </>
-      );
-    }
-    return (
-      <>
-        <figure
-          styleName={`image ${getPlaceholderStyleName}`}
-          className="arr--responsive-hero-image"
-          style={{ paddingTop: imagePadding + `%` }}>
-          <StoryTemplateIcon storyTemplate={story["story-template"]} />
-          <ResponsiveHeroImage
-            story={story}
-            aspectRatio={imageAspectRatio}
-            defaultWidth={defaultWidth}
-            widths={widths}
-            imgParams={{ auto: ["format", "compress"], fit: "max" }}
-          />
-        </figure>
-        {isStoryPageImage && hyperLink && <HyperLink hyperLink={hyperLink} />}
-      </>
-    );
-  };
-
-  return (
-    story &&
-    (isStoryPageImage ? (
-      <div
-        className="arr--hero-image"
-        data-test-id="arr--hero-image"
-        styleName={`${heroImageClass} ${fullBleed} ${heroImageMobClasses}`}>
-        {fallbackImage()}
-      </div>
-    ) : (
-      <Link
-        className="arr--hero-image"
-        data-test-id="arr--hero-image"
-        href={getStoryUrl(story, `/${story.slug}`)}
-        externalLink={isExternalStory(story)}
-        styleName={`${heroImageClass} ${fullBleed} ${heroImageMobClasses}`}
-        aria-label="fallback-hero-image">
-        {fallbackImage()}
-      </Link>
-    ))
-  );
-};
-
-HeroImage.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes.object.isRequired,
-  /** Removes the Hero Image padding for the image to bleed over the margin */
-  FullBleed: PropTypes.bool,
-  /** The default width for the image, in case the browser does not support srcset */
-  defaultWidth: PropTypes.number,
-  /** The list of available widths */
-  widths: PropTypes.array,
-  // fatch the correct hero image
-  aspectRatio: PropTypes.array,
-
-  //  Hints for the browser to choose the best size
-  /** This prop is responsible for adding padding-right of the image and remove padding bottom of the image  */
-  isHorizontal: PropTypes.bool,
-  /** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
-  isHorizontalMobile: PropTypes.bool,
-  // this prop is responsive for rendering fallback image on story page
-  defaultFallback: PropTypes.bool,
-  isHorizontalWithImageLast: PropTypes.bool,
-  isStoryPageImage: PropTypes.bool,
-  config: PropTypes.object
-};
-
-HeroImage.defaultProps = {
-  FullBleed: true,
-  aspectRatio: [[1, 1], [16, 9]],
-  defaultWidth: 480,
-  widths: [250, 480, 640],
-  isHorizontal: false,
-  isHorizontalMobile: false,
-  defaultFallback: true,
-  isStoryPageImage: false,
-  isHorizontalWithImageLast: false,
-  config: {}
-};

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,24 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-export const LoadMoreTarget = ({ collection, componentName, offset, limit }) => {
-  return (
-    <div
-      id={`ELM-${collection.id}`}
-      data-collection-slug={collection["slug"]}
-      data-component-name={componentName}
-      data-collection-offset={offset}
-      data-collection-limit={limit}
-    />
-  );
-};
-
-LoadMoreTarget.propTypes = {
-  collection: PropTypes.shape({
-    id: PropTypes.string,
-    slug: PropTypes.string
-  }),
-  componentName: PropTypes.string,
-  offset: PropTypes.number,
-  limit: PropTypes.number
-};

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,41 +0,0 @@
-import React from "react";
-import { LinkBase } from "@quintype/components";
-import PropTypes from "prop-types";
-import { getTextColor, generateNavigateSlug } from "../../../utils/utils";
-import "./load-more.m.css";
-
-export const LoadmoreButton = ({
-  config = {},
-  collection,
-  template = "SubsequentLoadCount",
-  onClick,
-  navigate,
-  qtConfig
-}) => {
-  const { showButton = true, buttonText = "Read More", theme = "", customUrlPath = "" } = config;
-  if (!showButton) return null;
-
-  const textColor = getTextColor(theme);
-  const slug = customUrlPath ? `/${customUrlPath}` : generateNavigateSlug(collection, { ...qtConfig, ...config });
-
-  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,61 +0,0 @@
-import React from "react";
-import { LazyLoadImages, ResponsiveImage, Link } from "@quintype/components";
-import PropTypes from "prop-types";
-import get from "lodash.get";
-import { getSlug } from "../../../utils/utils";
-import "./magazine-cover-image.m.css";
-import { FallbackImage } from "../FallbackImage";
-
-export const MagazineCoverImageCard = ({ collection, config = {} }) => {
-  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 slug = magazineSlug && collection && getSlug(collection, config);
-
-  return (
-    <div className="arr--magazine-cover-img" styleName="cover-image">
-      {covers3Key || coverUrl ? (
-        <figure styleName="image">
-          {covers3Key ? (
-            <Link href={slug} aria-label="magazine-cover-image">
-              <LazyLoadImages>
-                <ResponsiveImage
-                  slug={covers3Key}
-                  aspectRatio={[1, 2]}
-                  metadata={{ coverImageMetaData }}
-                  defaultWidth={400}
-                  imgParams={{ auto: ["format", "compress"] }}
-                  alt={imgAltText}
-                />
-              </LazyLoadImages>
-            </Link>
-          ) : (
-            <img src={coverUrl} alt="cover-image" loading="lazy" />
-          )}
-        </figure>
-      ) : (
-        <div styleName="fallback-img">
-          <FallbackImage slug={slug} />
-        </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
-  })
-};

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,66 +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";
-
-export const PublishDetails = ({ story, opts = {}, template = "", timezone = null }) => {
-  const [direction, setDirection] = useState("ltr");
-  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, "updated-at": updatedAt } = story;
-  const { enableUpdatedTime, enablePublishedTime, showReadTime, localizedPublishedOn, localizedUpdatedOn } = opts;
-  const time = lastPublish || firstPublishAt;
-  const textColor = getTextColor(config.theme);
-  const timeStampProps =
-    direction === "rtl"
-      ? { ...opts, direction: direction, isTimeFirst: true, showTime: true }
-      : { ...opts, direction: direction, showTime: true };
-
-  return (
-    <div data-test-id="timeStamp" className="arrow-component arr-publish-details" styleName={`timeStamp ${textColor}`}>
-      <div data-test-id="publishDetails" styleName={`publish-details ${textColor}`}>
-        {enablePublishedTime && (
-          <>
-            {localizedPublishedOn || "Published on"} :&nbsp;
-            <div styleName="date">{getTimeStamp(time, timestampToFormat, timeStampProps, template, timezone)}</div>
-            {showReadTime && <ReadTime story={story} opts={opts} />}
-          </>
-        )}
-      </div>
-      {enableUpdatedTime && (
-        <div data-test-id="updateDetails" styleName={`update-details ${textColor}`}>
-          {localizedUpdatedOn || "Updated on"} :&nbsp;
-          <div styleName="date">{getTimeStamp(updatedAt, timestampToFormat, timeStampProps, template, timezone)}</div>
-          {showReadTime && <ReadTime story={story} opts={opts} />}
-        </div>
-      )}
-    </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
-  })
-};