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

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

@@ -1,59 +0,0 @@
-import get from "lodash.get";
-import React from "react";
-import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
-import { getTextColor, getSeparator, getTheme } from "../../../utils/utils";
-import { useStateValue } from "../../SharedContext";
-import "./read-time.m.css";
-
-export const ReadTime = ({ story, opts = {}, isLightTheme = false, layout, enableDarkModePreview = false }) => {
-  const config = useStateValue() || {};
-  const showReadTime = get(config, ["showReadTime"]) || get(opts, ["showReadTime"], true);
-  const readTime = get(story, ["read-time"], 0);
-
-  if (!showReadTime || !readTime) return null;
-  const { showDotIndicator = true } = opts;
-  const theme = getTheme(config, layout, enableDarkModePreview);
-  const textColor = isLightTheme ? "light" : getTextColor(theme);
-  const isLocalizedNumber = useSelector((state) => get(state, ["qt", "config", "isLocalizedNumber"], false));
-  const languageCode = isLocalizedNumber
-    ? useSelector((state) => get(state, ["qt", "config", "language", "ietf-code"], "en"))
-    : "en";
-
-  const { localization = {} } = useSelector((state) => get(state, ["qt", "config", "pagebuilder-config", "general"], {}));
-  const { localizedElements = {} } = localization;
-  const timeToRead =
-    get(opts, ["localizedTimeToRead"]) || get(opts, ["localizationConfig", "localizedTimeToRead"]) || get(localizedElements, ["buttonLabels", "timeToRead"]) || "min read";
-  const separator = get(opts, ["separator"], "");
-  const separatorStyle = separator === "divider" ? "dash" : "dot";
-  return (
-    <>
-      <div
-        className="arrow-component arr--read-time"
-        styleName={`read-time-wrapper ${textColor}`}
-        data-test-id="read-time">
-        {showDotIndicator && (
-          <div styleName={separatorStyle} className="read-time-indicator">
-            {getSeparator(separator, textColor)}
-          </div>
-        )}
-        <span>
-          {readTime.toLocaleString(`${languageCode}`)} {timeToRead}
-        </span>
-      </div>
-    </>
-  );
-};
-
-ReadTime.propTypes = {
-  story: PropTypes.shape({
-    "read-time": PropTypes.number
-  }),
-  opts: PropTypes.shape({
-    showReadTime: PropTypes.bool
-  }),
-  isLightTheme: PropTypes.bool,
-  languageCode: PropTypes.string,
-  layout: PropTypes.string,
-  enableDarkModePreview: PropTypes.bool
-};

package/src/components/Atoms/ReadTime/read-time.m.css

@@ -1,25 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.read-time-wrapper {
-  display: flex;
-  font-size: var(--arrow-fs-tiny);
-}
-
-.dot {
-  margin: 0 var(--arrow-spacing-xs);
-  top: -3px;
-  position: relative;
-}
-
-.dash {
-  position: relative;
-  margin: 0 var(--arrow-spacing-xs);
-}
-
-.dark {
-  color: var(--arrow-c-mono4);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono4);
-}

package/src/components/Atoms/ReadTime/read-time.test.js

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { mount } from "enzyme";
-import expect from "expect";
-import { generateStore, generateStory } from "../../Fixture/index";
-import { ReadTime } from "./index";
-import { Provider } from "react-redux";
-
-const story = generateStory();
-
-describe("Read time", () => {
-  it("Should render read time component", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <ReadTime story={story} opts={{ showReadTime: true }} />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "read-time" }).prop("className")).toMatch(/read-time-wrapper/);
-  });
-  it("Should not render read time if showReadTime is false", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <ReadTime opts={{ showReadTime: false, isLocalizedNumber: true, localizedTimeToRead: "read time" }} />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "read-time" }).length).toEqual(0);
-  });
-});

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

@@ -1,19 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { ReadTime } from "./index";
-import Readme from "./README.md";
-import { boolean } from "@storybook/addon-knobs";
-
-const story = generateStory();
-
-withStore("Atoms/Read Time", {}, Readme).add("default", () => {
-  return (
-    <ReadTime
-      story={story}
-      opts={{
-        showReadTime: boolean("Show Read Time", true)
-      }}
-    />
-  );
-});

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

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

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

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

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

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