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

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

@@ -1,39 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { ImageFallbackIcon } from "../../Svgs/fallbackImage";
-import { Link } from "@quintype/components";
-
-import "./fallback.m.css";
-
-const imageFallback = (roundedCorners, fallBackImageUrl) => {
-  const imageClassName = roundedCorners ? `arr--fallback-image ${roundedCorners}` : "arr--fallback-image";
-
-  return (
-    <div styleName="image" className={imageClassName}>
-      <figure styleName="fallback-svg" className="arr--fallback-svg">
-        {fallBackImageUrl ? (
-          <img src={fallBackImageUrl} data-src={fallBackImageUrl} alt="image-fallback" />
-        ) : (
-          <ImageFallbackIcon />
-        )}
-      </figure>
-    </div>
-  );
-};
-
-export const FallbackImage = ({ slug, roundedCorners = "", fallBackImageUrl }) => {
-  if (slug) {
-    return (
-      <Link href={slug} aria-label="image-fallback">
-        {imageFallback(roundedCorners, fallBackImageUrl)}
-      </Link>
-    );
-  } else {
-    return imageFallback(roundedCorners, fallBackImageUrl);
-  }
-};
-
-FallbackImage.propTypes = {
-  slug: PropTypes.string,
-  roundedCorners: PropTypes.string
-};

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

@@ -1,7 +0,0 @@
-# Headline
-
-## Usage 
-```jsx
-<Headline story={story} headerLevel={1} />
-```
-<!-- PROPS -->

package/src/components/Atoms/Headline/headline.m.css

@@ -1,67 +0,0 @@
-@custom-media --viewport-medium (width >=768px);
-
-.wrapper {
-  margin-bottom: 6px;
-}
-
-.headline {
-  margin-bottom: var(--arrow-spacing-xxs);
-  color: var(--arrow-c-mono2);
-  font-weight: var(--arrow-fw-semi-bold);
-
-  @media (--viewport-medium) {
-    margin-bottom: var(--arrow-spacing-xs);
-  }
-}
-
-.wrapper .headline {
-  display: inline;
-  margin-bottom: var(--arrow-spacing-xs);
-}
-
-.dark {
-  color: var(--arrow-c-mono2);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono2);
-}
-
-.icon-wrapper {
-  display: inline-flex;
-  align-items: center;
-}
-
-.live-icon::before {
-  content: "\25C9";
-  position: relative;
-  font-size: var(--arrow-fs-s);
-  color: var(--arrow-c-accent3);
-  animation: blink 1s linear infinite;
-  margin-right: var(--arrow-spacing-xs);
-}
-
-@keyframes blink {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 0.5;
-  }
-
-  75% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-html[dir="rtl"] {
-  .live-icon::before {
-    margin-right: 0;
-    margin-left: var(--arrow-spacing-xs);
-  }
-}

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

@@ -1,112 +0,0 @@
-import React from "react";
-import { useSelector } from "react-redux";
-import PropTypes from "prop-types";
-import { Link } from "@quintype/components";
-import { useStateValue } from "../../SharedContext";
-import get from "lodash.get";
-import { getTextColor, isExternalStory, getStoryUrl, getTheme } from "../../../utils/utils";
-import { PremiumStoryIcon } from "../PremiumStoryIcon";
-
-import "./headline.m.css";
-
-export const Headline = ({
-  story,
-  headerLevel,
-  premiumStoryIconConfig = {},
-  isLink,
-  queryParam = {},
-  layout,
-  enableDarkModePreview = false
-}) => {
-  const configData = useStateValue() || {};
-  const {
-    darkIconColor = "#F7B500",
-    iconColor = "#F7B500",
-    iconStyle = "star",
-    enablePremiumStoryIcon = false
-  } = premiumStoryIconConfig;
-  const alternateHeadline = get(story, ["alternative", "home", "default", "headline"]);
-  const premiumStory = enablePremiumStoryIcon && get(story, ["access"]) === "subscription";
-  const headline = alternateHeadline || story.headline;
-  const HeaderTag = "h" + headerLevel;
-  const enableDarkMode = useSelector((state) => get(state, ["header", "isDarkModeEnabled"], false));
-
-  const positionHeadline = () => {
-    switch (parseInt(headerLevel)) {
-      case 1:
-        return "-2px";
-      case 2:
-        return "2px";
-      case 3:
-        return "4px";
-      case 4:
-        return "5px";
-      default:
-        return "6px";
-    }
-  };
-  const theme = getTheme(configData, layout, enableDarkModePreview);
-  const textColor = getTextColor(theme);
-  const newIconColor = enableDarkMode ? darkIconColor : iconColor;
-
-  const iconSize = "24px";
-  const getLiveIconConfig = useSelector((state) => get(state, ["qt", "data", "showLiveIcon"], false));
-  const showLiveIcon = get(premiumStoryIconConfig, ["showLiveIcon"], getLiveIconConfig);
-  const enableLiveIcon =
-    showLiveIcon && story["story-template"] === "live-blog" && !get(story, ["metadata", "is-closed"], false);
-  const liveIconStyle = premiumStory ? { position: "relative", top: positionHeadline() } : {};
-  const wrapperClass = premiumStory || enableLiveIcon ? "wrapper" : "";
-
-  return (
-    <div className="arrow-component arr--headline" styleName={wrapperClass} data-test-id="headline">
-      {(enableLiveIcon || premiumStory) && (
-        <span styleName="icon-wrapper">
-          {premiumStory && (
-            <PremiumStoryIcon
-              width={iconSize}
-              height={iconSize}
-              color={newIconColor}
-              iconType={iconStyle}
-              positionTop={positionHeadline()}
-            />
-          )}
-          {enableLiveIcon && <span style={liveIconStyle} styleName="live-icon"></span>}
-        </span>
-      )}
-      {isLink ? (
-        <Link
-          href={getStoryUrl(story, `/${story.slug}`, queryParam)}
-          externalLink={isExternalStory(story)}
-          aria-label="headline">
-          <HeaderTag styleName={`headline ${textColor}`}>{headline}</HeaderTag>
-        </Link>
-      ) : (
-        <HeaderTag styleName={`headline ${textColor}`}>{headline}</HeaderTag>
-      )}
-    </div>
-  );
-};
-
-Headline.propTypes = {
-  /** The Story Object from the API response */
-  story: PropTypes.object.isRequired,
-  /** Header tags ranging h1-h6, where h[headerLevel] */
-  headerLevel: PropTypes.string,
-  premiumStoryIconConfig: PropTypes.shape({
-    iconColor: PropTypes.string,
-    iconType: PropTypes.string,
-    enablePremiumStoryIcon: PropTypes.bool
-  }),
-  isLink: PropTypes.bool,
-  queryParam: PropTypes.shape({
-    utmContent: PropTypes.string
-  }),
-  layout: PropTypes.string,
-  enableDarkModePreview: PropTypes.bool
-};
-
-Headline.defaultProps = {
-  headerLevel: "6",
-  isLink: true,
-  layout: ""
-};

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

@@ -1,52 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { optionalSelect, withStore } from "../../../../storybook";
-
-import { Headline } from "./index";
-import Readme from "./README.md";
-import { boolean, color } from "@storybook/addon-knobs";
-
-const story = generateStory();
-
-const headerLevelOptions = {
-  "No Value": "",
-  h1: 1,
-  h2: 2,
-  h3: 3,
-  h4: 4,
-  h5: 5,
-  h6: 6
-};
-
-const iconType = {
-  Star: "star",
-  Crown: "crown",
-  Lock: "lock",
-  Key: "key"
-};
-
-withStore(
-  "Atoms/Headline",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-).add(
-  "default",
-  () => (
-    <Headline
-      story={story}
-      headerLevel={optionalSelect("Header level", headerLevelOptions)}
-      premiumStoryIconConfig={{
-        iconColor: color("Icon color", "#F7B500"),
-        iconStyle: optionalSelect("Icon Types", iconType),
-        enablePremiumStoryIcon: boolean("Enable Premium Icon", true)
-      }}
-    />
-  ),
-  Readme
-);

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

@@ -1,13 +0,0 @@
-# HeroImage
-Displays the Hero Image for a story with the help of the `ResponsiveHeroImage` component from the `@quintype/components` package.
-
-## Usage
-```jsx
-<HeroImage story={story} />
-```
-
-```jsx
-<HeroImage story={story} FullBleed={false} />
-```
-
-<!-- PROPS -->

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

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

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