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

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

@@ -0,0 +1,174 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ResponsiveImage, LazyLoadImages, ResponsiveHeroImage } from "@quintype/components";
+import { useSelector } from "react-redux";
+import get from "lodash.get";
+
+export function ResponsiveLazyImg({
+  slug = "",
+  metadata,
+  aspectRatio = [],
+  defaultWidth = "",
+  widths,
+  imgParams = {},
+  alt = "",
+  className,
+  styleName,
+  story,
+  isResponsiveHeroImg = false,
+  isBotRequest = false,
+  isStoryPageImage = false,
+  sizes,
+  priority
+}) {
+  const lazyLoadImageMargin = useSelector((state) => get(state, ["qt", "lazyLoadImageMargin"], false));
+
+  // 1. ssr images for bots
+  // 2. madrid loads below fold images lazily, To prevent this happening to custom publishers we use the  lazyLoadImageMargin prop which madrid passes
+  if (isBotRequest || !lazyLoadImageMargin) {
+    if (isResponsiveHeroImg) {
+      return (
+        <ResponsiveHeroImage
+          story={story}
+          aspectRatio={aspectRatio}
+          defaultWidth={defaultWidth}
+          widths={widths}
+          imgParams={imgParams}
+          alt={alt}
+          className={className}
+          width="100%"
+          height="100%"
+          sizes={sizes}
+        />
+      );
+    }
+    return (
+      <ResponsiveImage
+        slug={slug}
+        aspectRatio={aspectRatio}
+        defaultWidth={defaultWidth}
+        imgParams={imgParams}
+        alt={alt}
+        metadata={metadata}
+        widths={widths}
+        className={className}
+        sizes={sizes}
+        styleName={styleName}
+        width="100%"
+        height="100%"
+      />
+    );
+  }
+
+  // 1. For LCP improvements on story pages we ssr and preload the hero image
+  if (isStoryPageImage) {
+    return (
+      <ResponsiveHeroImage
+        story={story}
+        aspectRatio={aspectRatio}
+        defaultWidth={defaultWidth}
+        widths={widths}
+        sizes={sizes}
+        imgParams={imgParams}
+        alt={alt}
+        className={className}
+        priority={true}
+      />
+    );
+  }
+
+  // Images on landing page row components.
+  if (isResponsiveHeroImg) {
+    if (priority) {
+      // priority is given to the first collections LCP contributing image for ssr and preload
+      return (
+        <ResponsiveHeroImage
+          story={story}
+          aspectRatio={aspectRatio}
+          defaultWidth={defaultWidth}
+          widths={widths}
+          imgParams={imgParams}
+          alt={alt}
+          className={className}
+          width="100%"
+          height="100%"
+          sizes={sizes}
+          priority={priority}
+        />
+      );
+    }
+    return (
+      <LazyLoadImages margin={lazyLoadImageMargin}>
+        <ResponsiveHeroImage
+          story={story}
+          aspectRatio={aspectRatio}
+          defaultWidth={defaultWidth}
+          widths={widths}
+          imgParams={imgParams}
+          alt={alt}
+          className={className}
+          width="100%"
+          height="100%"
+          sizes={sizes}
+        />
+      </LazyLoadImages>
+    );
+  }
+
+  if (priority) {
+    return (
+      <ResponsiveImage
+        slug={slug}
+        aspectRatio={aspectRatio}
+        defaultWidth={defaultWidth}
+        imgParams={imgParams}
+        alt={alt}
+        metadata={metadata}
+        widths={widths}
+        className={className}
+        styleName={styleName}
+        width="100%"
+        height="100%"
+        sizes={sizes}
+        priority={priority}
+      />
+    );
+  }
+
+  return (
+    <LazyLoadImages margin={lazyLoadImageMargin}>
+      <ResponsiveImage
+        slug={slug}
+        aspectRatio={aspectRatio}
+        defaultWidth={defaultWidth}
+        imgParams={imgParams}
+        alt={alt}
+        metadata={metadata}
+        widths={widths}
+        className={className}
+        styleName={styleName}
+        width="100%"
+        height="100%"
+        sizes={sizes}
+      />
+    </LazyLoadImages>
+  );
+}
+
+ResponsiveLazyImg.propTypes = {
+  slug: PropTypes.string,
+  metadata: PropTypes.any,
+  aspectRatio: PropTypes.array,
+  defaultWidth: PropTypes.string,
+  widths: PropTypes.any,
+  sizes: PropTypes.string,
+  imgParams: PropTypes.object,
+  alt: PropTypes.string,
+  className: PropTypes.string,
+  styleName: PropTypes.string,
+  story: PropTypes.object,
+  isResponsiveHeroImg: PropTypes.bool,
+  isBotRequest: PropTypes.bool,
+  isStoryPageImage: PropTypes.bool,
+  priority: PropTypes.bool
+};

package/src/components/Atoms/ScrollSnap/SliderArrow/index.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { number, string, func } from "prop-types";
+
+import { getTextColor } from "../../../../utils/utils";
+import { LeftArrow } from "../../../Svgs/left-arrow";
+import { RightArrow } from "../../../Svgs/right-arrow";
+import { useStateValue } from "../../../SharedContext";
+
+import "./slider-arrow.m.css";
+
+export const SliderArrow = ({
+  selectedIndex,
+  previousClick,
+  nextClick,
+  noOfItems,
+  perView,
+  languageDirection,
+  sliderArrowStyles
+}) => {
+  if (noOfItems < 1) {
+    return null;
+  }
+
+  const config = useStateValue() || {};
+  const textColor = getTextColor(config.theme);
+
+  const rightArrowView = () => {
+    if (selectedIndex >= noOfItems - perView) return false;
+    return true;
+  };
+
+  const getLeftArrowClassName = languageDirection === "rtl" ? "left-arrow-rtl" : "left-arrow-ltr";
+  const getRightArrowClassName = languageDirection === "rtl" ? "right-arrow-rtl" : "right-arrow-ltr";
+  return (
+    <>
+      {selectedIndex !== 0 ? (
+        <button
+          onClick={previousClick}
+          style={sliderArrowStyles}
+          styleName={`arrow left-arrow-${textColor} ${getLeftArrowClassName}`}
+          className={`left-arrow ${getLeftArrowClassName}`}>
+          <LeftArrow color={textColor === "dark" ? "#fff" : "#333"} />
+        </button>
+      ) : null}
+
+      {selectedIndex < noOfItems - 1 && rightArrowView() ? (
+        <button
+          onClick={nextClick}
+          style={sliderArrowStyles}
+          styleName={`arrow right-arrow-${textColor} ${getRightArrowClassName}`}
+          className={`right-arrow ${getRightArrowClassName}`}>
+          <RightArrow color={textColor === "dark" ? "#fff" : "#333"} />
+        </button>
+      ) : null}
+    </>
+  );
+};
+
+SliderArrow.propTypes = {
+  noOfItems: number,
+  perView: number,
+  slideIndicator: string,
+  previousClick: func,
+  nextClick: func,
+  selectedIndex: number,
+  languageDirection: string
+};

package/src/components/Atoms/ScrollSnap/SliderArrow/slider-arrow.m.css

@@ -0,0 +1,45 @@
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  background-color: var(--arrow-c-light);
+  opacity: 0.8;
+  padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+  border: none;
+  border-radius: 0;
+  @media only screen and (max-width: 767px) {
+    top: calc(25% + 40px);
+  }
+}
+
+.left-arrow-dark,
+.right-arrow-dark {
+  background-color: var(--arrow-c-dark);
+}
+.left-arrow-light,
+.right-arrow-light {
+  background-color: var(--arrow-c-light);
+}
+
+.left-arrow-ltr {
+  left: 0;
+}
+
+.right-arrow-ltr {
+  right: 0;
+}
+
+.left-arrow-rtl {
+  right: 0;
+  left: unset;
+}
+.left-arrow-rtl svg,
+.right-arrow-rtl svg {
+  transform: rotate(180deg);
+}
+
+.right-arrow-rtl {
+  left: 0;
+  right: unset;
+}

package/src/components/Atoms/ScrollSnap/SliderIndicator/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { array, number, string, func } from "prop-types";
+
+import { getTextColor } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
+
+import "./slider-indicator.m.css";
+
+export const SliderIndicator = ({ indicatorItems, indicatorClick, selectedIndex, indicatorType }) => {
+  if (indicatorItems.length < 1) {
+    return null;
+  }
+
+  const config = useStateValue() || {};
+  const textColor = getTextColor(config.theme);
+
+  return (
+    <ul styleName="indicators" className="slider-indicators">
+      {indicatorItems.map((_, index) => (
+        <li
+          key={`slider-${index}`}
+          styleName="indicator"
+          className="indicator"
+          onClick={(e) => indicatorClick(e, index)}>
+          <button
+            styleName={`indicator-button indicator-${indicatorType} indicator-${indicatorType}-${textColor}`}
+            className={`indicator-button indicator-${indicatorType}`}
+            aria-pressed={selectedIndex === index ? "true" : "false"}></button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+SliderIndicator.propTypes = {
+  indicatorItems: array,
+  perView: number,
+  indicatorType: string,
+  indicatorClick: func,
+  selectedIndex: number
+};

package/src/components/Atoms/ScrollSnap/SliderIndicator/slider-indicator.m.css

@@ -0,0 +1,71 @@
+.indicators {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  list-style: none;
+  font-family: var(--arrow-typeface-secondary);
+  cursor: pointer;
+  line-height: 0;
+}
+
+.indicator {
+  margin: var(--arrow-spacing-xs) 0;
+  padding: 4px;
+}
+
+.indicator-button {
+  background: none;
+  border: none;
+  overflow: hidden;
+  padding: var(--arrow-spacing-s) var(--arrow-spacing-xxs);
+  cursor: pointer;
+}
+
+.indicator-dots {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--arrow-c-dark);
+  border: 1px solid var(--arrow-c-dark);
+  padding: 0;
+  opacity: 0.25;
+}
+
+.indicator-dots-dark[aria-pressed="true"] {
+  background-color: var(--arrow-c-dark);
+  opacity: 1;
+}
+
+.indicator-dots-light {
+  background-color: var(--arrow-c-light);
+  border-color: var(--arrow-c-light);
+}
+
+.indicator-dots-light[aria-pressed="true"] {
+  background-color: var(--arrow-c-light);
+  opacity: 1;
+}
+
+.indicator-dashes {
+  display: inline-block;
+  width: var(--arrow-spacing-s);
+  height: 2px;
+  padding: 0;
+}
+.indicator-dashes-dark {
+  opacity: 0.25;
+  background-color: var(--arrow-c-dark);
+}
+.indicator-dashes-light {
+  opacity: 0.25;
+  background-color: var(--arrow-c-light);
+}
+
+.indicator-dashes-dark[aria-pressed="true"] {
+  background-color: var(--arrow-c-dark);
+  opacity: 1;
+}
+.indicator-dashes-light[aria-pressed="true"] {
+  background-color: var(--arrow-c-light);
+  opacity: 1;
+}

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

@@ -0,0 +1,179 @@
+import React, { useEffect, useState, useRef } from "react";
+import { useSelector } from "react-redux";
+import { array, number, bool, string } from "prop-types";
+import get from "lodash/get";
+
+import { SliderArrow } from "./SliderArrow";
+import { SliderIndicator } from "./SliderIndicator";
+
+import "./scroll-snap.m.css";
+
+const smoothScroll = (node, topOrLeft, horizontal) => {
+  node.scrollTo({
+    [horizontal ? "left" : "top"]: topOrLeft,
+    behavior: "smooth"
+  });
+};
+
+const updateItemSelection = (index, languageDirection, scroller, noOfItems) => {
+  const getScrollValue = Math.floor(scroller.current.scrollWidth * (index / noOfItems));
+  const scrollValue = languageDirection === "rtl" ? getScrollValue * -1 : getScrollValue;
+  smoothScroll(scroller.current, scrollValue, true);
+};
+
+const setIndicatorValue = (func, ms) => {
+  let timeout;
+
+  return () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      timeout = null;
+      func();
+    }, ms);
+  };
+};
+
+export const ScrollSnap = ({
+  children,
+  isArrow,
+  interval,
+  isInfinite,
+  pauseOnHover,
+  perView,
+  slideIndicator,
+  sliderArrowStyles = {}
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [autoScroll, setAutoScroll] = useState(false);
+  const languageDirection = useSelector((state) => get(state, ["qt", "config", "language", "direction"], "ltr"));
+  const noOfItems = children ? children.length : 0;
+  const scroller = useRef(null);
+
+  const numberOfIndicatorsToShow = children.length - (perView - 1);
+  const indicatorItems = children.slice(0, numberOfIndicatorsToShow);
+
+  useEffect(() => {
+    if (scroller.current) {
+      scroller.current.addEventListener(
+        "scroll",
+        setIndicatorValue(() => {
+          const value = Math.round((scroller.current.scrollLeft / scroller.current.scrollWidth) * noOfItems);
+          setSelectedIndex(Math.abs(value));
+        }, 150)
+      );
+
+      // For Default Selection if selectedIndex is not 0 then manually select it
+      if (selectedIndex !== 0) {
+        updateItemSelection(selectedIndex);
+      }
+    }
+
+    return () => {
+      scroller.current.removeEventListener("scroll", setIndicatorValue);
+    };
+  }, []);
+
+  // Infinite scroll
+  useEffect(() => {
+    if (isInfinite && !autoScroll) {
+      const timer = setInterval(() => {
+        infiniteScroll();
+      }, interval);
+
+      return () => {
+        clearInterval(timer);
+      };
+    }
+  }, [isInfinite, autoScroll]);
+
+  const infiniteScroll = () => {
+    setSelectedIndex((value) => {
+      const newIndex = value === noOfItems - perView ? 0 : value + 1;
+      updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+      return newIndex;
+    });
+  };
+
+  const pauseAutoPlay = () => {
+    pauseOnHover && setAutoScroll(!autoScroll);
+  };
+
+  const indicatorClick = (e, newIndex) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedIndex(newIndex);
+    updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+  };
+
+  const nextClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (selectedIndex < noOfItems) {
+      const newIndex = selectedIndex + 1;
+      setSelectedIndex(newIndex);
+      updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+    }
+  };
+
+  const previousClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const newIndex = selectedIndex - 1;
+    setSelectedIndex(newIndex);
+    updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+  };
+
+  return (
+    <div className="scroll-snap-container">
+      <div
+        styleName="wrapper"
+        className="scroll-snap-wrapper"
+        onMouseEnter={pauseAutoPlay}
+        onMouseLeave={pauseAutoPlay}>
+        <div ref={scroller} styleName="carousel" className="scroll-snap-carousel">
+          {children}
+        </div>
+        {isArrow && (
+          <SliderArrow
+            sliderArrowStyles={sliderArrowStyles}
+            noOfItems={noOfItems}
+            perView={perView}
+            previousClick={previousClick}
+            nextClick={nextClick}
+            selectedIndex={selectedIndex}
+            languageDirection={languageDirection}
+          />
+        )}
+      </div>
+
+      {children.length > perView && slideIndicator !== "none" && (
+        <SliderIndicator
+          indicatorItems={indicatorItems}
+          indicatorClick={indicatorClick}
+          selectedIndex={selectedIndex}
+          indicatorType={slideIndicator}
+        />
+      )}
+    </div>
+  );
+};
+
+ScrollSnap.defaultProps = {
+  isArrow: true,
+  isInfinite: false,
+  interval: 4000,
+  pauseOnHover: true,
+  perView: 1,
+  slideIndicator: "dots"
+};
+
+ScrollSnap.propTypes = {
+  children: array.isRequired,
+  isArrow: bool,
+  isInfinite: bool,
+  interval: number,
+  pauseOnHover: bool,
+  perView: number,
+  slideIndicator: string
+};

package/src/components/Atoms/ScrollSnap/scroll-snap.m.css

@@ -0,0 +1,26 @@
+.wrapper {
+  position: relative;
+}
+
+.carousel {
+  display: flex;
+  overflow: auto;
+  scroll-snap-type: x mandatory;
+  -ms-overflow-style: none;
+
+  > div {
+    scroll-snap-align: start;
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+.carousel::-webkit-scrollbar {
+  display: none;
+}
+
+.carousel::-moz-scrollbar {
+  overflow: -moz-scrollbars-none;
+}

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

@@ -0,0 +1,11 @@
+# SectionTag
+Component to display the section name for the story card.
+
+## Usage 
+```jsx
+<SectionTag story={story} />
+```
+```jsx
+<SectionTag story={story} template="borderLeft" />
+```
+<!-- PROPS -->

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

@@ -0,0 +1,74 @@
+import React from "react";
+import get from "lodash.get";
+import { Link } from "@quintype/components";
+import { useStateValue } from "../../SharedContext";
+import PropTypes from "prop-types";
+import { getTextColor, getTheme, rgbToHex } from "../../../utils/utils";
+import "./section.m.css";
+
+export const SectionTag = ({
+  story,
+  template = "",
+  borderColor = "",
+  isLightTheme,
+  layout,
+  enableDarkModePreview = false
+}) => {
+  const config = useStateValue() || {};
+  const isSection = get(config, ["showSection"], true);
+  const templateFromRowContext = get(config, ["sectionTagTemplate"]);
+  const section = get(story, ["sections", 0], "");
+  const supportedTemplates = ["borderBottomSml", "borderLeft", "solid"];
+  const getUrl = section ? section["section-url"] : "/";
+  const theme = getTheme(config, layout, enableDarkModePreview);
+  const colorToApplyContrast = template === "solid" || templateFromRowContext === "solid" ? borderColor : theme;
+  const textColor = isLightTheme ? "light" : getTextColor(colorToApplyContrast);
+
+  const sectionTagBorderColor = rgbToHex(borderColor);
+  let templateStyle = supportedTemplates.includes(template) ? `section section-${template}` : "section";
+  if (templateFromRowContext) {
+    templateStyle = supportedTemplates.includes(templateFromRowContext)
+      ? `section section-${templateFromRowContext}`
+      : "section";
+  }
+
+  if (!isSection) return null;
+  return (
+    <Link href={getUrl} className="arrow-component arr--section-name" aria-label="section-name">
+      <span
+        data-test-id="sectionTag"
+        className="section-tag arrow-component"
+        styleName={`${textColor} ${templateStyle}`}
+        style={{
+          backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : "initial"
+        }}>
+        {templateStyle.includes("section-borderLeft") && (
+          <span styleName="border-left" style={{ color: sectionTagBorderColor || "initial" }}></span>
+        )}
+        {section["display-name"] || section["name"]}
+        <div
+          styleName="border-bottom"
+          style={{
+            backgroundColor: template !== "solid" && sectionTagBorderColor ? sectionTagBorderColor : "initial"
+          }}></div>
+      </span>
+    </Link>
+  );
+};
+SectionTag.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+  /** The style template for section tag */
+  template: PropTypes.oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
+  borderColor: PropTypes.string,
+  solidBorderColor: PropTypes.string,
+  isLightTheme: PropTypes.bool,
+  layout: PropTypes.string,
+  enableDarkModePreview: PropTypes.bool
+};
+
+SectionTag.defaultProps = {
+  template: "",
+  isLightTheme: false,
+  layout: ""
+};