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

package/src/components/Atoms/HeroImage/hero-image.m.css

@@ -0,0 +1,99 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.hero-image {
+  margin-bottom: var(--arrow-spacing-xs);
+  padding-right: 0;
+  flex-grow: 1;
+  position: relative;
+}
+
+.right-padding {
+  margin-bottom: 0;
+  padding-right: var(--arrow-spacing-s);
+  flex-grow: 1;
+}
+
+.left-padding {
+  margin-bottom: 0;
+  padding-left: var(--arrow-spacing-s);
+  flex-grow: 1;
+}
+
+.right-padding-mob {
+  margin-bottom: 0;
+  padding-right: var(--arrow-spacing-s);
+  flex-grow: 1;
+  flex-basis: 30%;
+  @media (--viewport-medium) {
+    padding-right: 0;
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.placeholder {
+  background-color: lightgray;
+}
+
+.hero-image-mob {
+  margin-bottom: var(--arrow-spacing-xs);
+  padding-right: 0;
+  flex-grow: 1;
+  @media (--viewport-medium) {
+    /* margin-bottom: 0; */
+  }
+}
+.with-padding {
+  padding: 16px 16px 0 16px;
+}
+
+.image {
+  position: relative;
+}
+.image img {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+}
+
+.image-wrapper {
+  position: relative;
+}
+
+.icon-wrapper {
+  position: absolute;
+  top: var(--arrow-spacing-xxs);
+  right: var(--arrow-spacing-xxs);
+  width: 95%;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.icon-wrapper svg {
+  max-width: var(--arrow-fs-xxl);
+  min-width: var(--arrow-spacing-20);
+}
+
+html[dir="rtl"] {
+  .right-padding,
+  .right-padding-mob {
+    padding-right: 0;
+    padding-left: var(--arrow-spacing-s);
+  }
+
+  .right-padding-mob {
+    @media (--viewport-medium) {
+      padding-left: 0;
+    }
+  }
+
+  .icon-wrapper {
+    position: absolute;
+    top: 4px;
+    right: 0;
+    left: 4px;
+    width: unset;
+  }
+}

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

@@ -0,0 +1,293 @@
+import { Link } 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,
+  removeHtmlTags,
+  isFallbackImgShown,
+  shouldShowAltImg
+} from "../../../utils/utils";
+import { useStateValue } from "../../SharedContext";
+import { FallbackImage } from "../FallbackImage";
+import { HyperLink } from "../Hyperlink";
+import { StoryDemarcationIcon } from "../StoryDemarcationIcon";
+import { roundedCornerClass } from "../../../constants";
+import { ResponsiveLazyImg } from "../ResponsiveImg";
+import "./hero-image.m.css";
+
+export const HeroImage = ({
+  story,
+  FullBleed,
+  aspectRatio,
+  defaultWidth,
+  widths,
+  isHorizontal,
+  isHorizontalMobile,
+  isHorizontalWithImageLast,
+  defaultFallback,
+  isStoryPageImage,
+  config,
+  queryParam = {},
+  initialAltImage,
+  isFullWidthImage,
+  isCircularImage = false,
+  sizes,
+  priority
+}) => {
+  const { fallbackImageUrl = "" } = useStateValue() || {};
+  const { StoryTemplateIcon = () => null } = config;
+
+  const showImagePlaceholder = useSelector((state) => get(state, ["qt", "config", "showPlaceholder"]));
+  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"], false));
+  const getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
+  const { infiniteScrollType, infiniteScrollStyle } = useSelector((state) =>
+    get(state, ["qt", "config", "pagebuilder-config", "infiniteScroll"], "disabled")
+  );
+
+  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 altImageSlug = get(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
+  const heroImageSlug = get(story, ["hero-image-s3-key"]);
+  const slug = altImageSlug || heroImageSlug;
+
+  const hyperLink = get(story, ["hero-image-hyperlink"], "");
+  const imageCaption = get(story, ["hero-image-caption"], "");
+  const heroImageAltText = get(story, ["hero-image-alt-text"], "");
+  const alternateImageCaption = get(story, ["alternative", "home", "default", "hero-image", "hero-image-caption"], "");
+  const alternateHeroImageAltText = get(
+    story,
+    ["alternative", "home", "default", "hero-image", "hero-image-alt-text"],
+    ""
+  );
+
+  const imageAltText =
+    removeHtmlTags(alternateHeroImageAltText) ||
+    removeHtmlTags(alternateImageCaption) ||
+    get(story, ["alternative", "home", "default", "headline"], "") ||
+    removeHtmlTags(heroImageAltText) ||
+    removeHtmlTags(imageCaption) ||
+    get(story, ["headline"], "");
+
+  const storyPageImageAltText =
+    removeHtmlTags(heroImageAltText) || removeHtmlTags(imageCaption) || get(story, ["headline"], "");
+  const rowsConfig = useSelector((state) => get(state, ["qt", "config", "pagebuilder-config", "general", "rows"], {}));
+  const enableRoundedCorners = useSelector((state) =>
+    get(state, ["qt", "config", "pagebuilder-config", "general", "enableRoundedCorners"], false)
+  );
+
+  const enableDarkMode = useSelector((state) => get(state, ["header", "isDarkModeEnabled"], false));
+
+  const roundedCorners = enableRoundedCorners && !isFullWidthImage && !isCircularImage ? roundedCornerClass : "";
+
+  const storyTemplate = story?.["story-template"];
+
+  function fallBackImage() {
+    const showFallBackImg = isFallbackImgShown(isStoryPageImage, story, infiniteScrollType, infiniteScrollStyle);
+    if (!showFallBackImg) return null;
+    if (fallbackImageUrl) {
+      return (
+        <div styleName="image-wrapper">
+          <figure
+            styleName={`image ${getPlaceholderStyleName}`}
+            className="arr--responsive-hero-image"
+            style={{
+              paddingTop: imagePadding + `%`
+            }}>
+            <img className="qt-image" src={fallbackImageUrl} data-src={fallbackImageUrl} alt="image-fallback" />
+          </figure>
+          <div styleName="icon-wrapper">
+            {!isStoryPageImage && !isCircularImage && (
+              <StoryDemarcationIcon
+                storyTemplate={storyTemplate}
+                rowsConfig={rowsConfig}
+                enableDarkMode={enableDarkMode}
+              />
+            )}
+          </div>
+        </div>
+      );
+    }
+    return (
+      <>
+        {defaultFallback ? (
+          <div
+            styleName={`image ${getPlaceholderStyleName} image-wrapper`}
+            className="arr--fallback-hero-image"
+            data-test-id="arr--fallback-hero-image"
+            style={{
+              paddingTop: imagePadding + `%`
+            }}>
+            <StoryTemplateIcon storyTemplate={story["story-template"]} />
+            <FallbackImage roundedCorners={roundedCorners} />
+            <div styleName="icon-wrapper">
+              {!isStoryPageImage && !isCircularImage && (
+                <StoryDemarcationIcon
+                  storyTemplate={storyTemplate}
+                  rowsConfig={rowsConfig}
+                  enableDarkMode={enableDarkMode}
+                />
+              )}
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+
+  function getHeroImage(isBotRequest) {
+    if (!slug) return fallBackImage();
+    const showAltImage = shouldShowAltImg(infiniteScrollType, infiniteScrollStyle, story);
+    if (showAltImage) initialAltImage = true;
+    if (!heroImageSlug && isStoryPageImage) {
+      return null;
+    }
+
+    return (
+      <>
+        <div styleName="image-wrapper">
+          <figure
+            styleName={`image ${getPlaceholderStyleName}`}
+            className={`arr--responsive-hero-image ${roundedCorners}`}
+            style={{ paddingTop: imagePadding + `%` }}>
+            <StoryTemplateIcon storyTemplate={story["story-template"]} />
+            {initialAltImage ? (
+              <ResponsiveLazyImg
+                slug={slug}
+                metadata={story["hero-image-metadata"]}
+                alt={isStoryPageImage ? storyPageImageAltText : imageAltText}
+                aspectRatio={imageAspectRatio}
+                defaultWidth={defaultWidth}
+                widths={widths}
+                imgParams={{ auto: ["format", "compress"], fit: "max" }}
+                className={"arr-image-placeholder"}
+                isBotRequest={isBotRequest}
+                isStoryPageImage={isStoryPageImage}
+                sizes={sizes}
+                priority={priority}
+              />
+            ) : (
+              <ResponsiveLazyImg
+                story={story}
+                aspectRatio={imageAspectRatio}
+                defaultWidth={defaultWidth}
+                widths={widths}
+                imgParams={{ auto: ["format", "compress"], fit: "max" }}
+                alt={isStoryPageImage ? storyPageImageAltText : imageAltText}
+                className={"arr-image-placeholder"}
+                isResponsiveHeroImg={true}
+                isBotRequest={isBotRequest}
+                isStoryPageImage={isStoryPageImage}
+                sizes={sizes}
+                priority={priority}
+              />
+            )}
+          </figure>
+          <div styleName="icon-wrapper">
+            {!isStoryPageImage && !isCircularImage && (
+              <StoryDemarcationIcon
+                storyTemplate={storyTemplate}
+                rowsConfig={rowsConfig}
+                enableDarkMode={enableDarkMode}
+              />
+            )}
+          </div>
+        </div>
+        {isStoryPageImage && hyperLink && <HyperLink hyperLink={hyperLink} />}
+      </>
+    );
+  }
+
+  return (
+    story &&
+    (isStoryPageImage ? (
+      <div
+        className={`arr--hero-image ${roundedCorners}`}
+        data-test-id="arr--hero-image"
+        styleName={`${heroImageClass} ${fullBleed} ${heroImageMobClasses} `}>
+        {getHeroImage(isBotRequest)}
+      </div>
+    ) : (
+      <Link
+        className={`arr--hero-image ${roundedCorners}`}
+        data-test-id="arr--hero-image"
+        href={getStoryUrl(story, `/${story.slug}`, queryParam)}
+        externalLink={isExternalStory(story)}
+        styleName={`${heroImageClass} ${fullBleed} ${heroImageMobClasses}`}
+        aria-label="fallback-hero-image">
+        {getHeroImage(isBotRequest)}
+      </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,
+  sizes: PropTypes.string,
+  // fetch 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,
+  queryParam: PropTypes.shape({
+    utmContent: PropTypes.string
+  }),
+  initialAltImage: PropTypes.bool,
+  isFullWidthImage: PropTypes.bool,
+  isCircularImage: PropTypes.bool
+};
+
+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: {},
+  initialAltImage: false,
+  isFullWidthImage: false,
+  isCircularImage: false
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+# 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} >
+
+```