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

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

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

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

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

@@ -1,74 +0,0 @@
-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: ""
-};

package/src/components/Atoms/SectionTag/section.m.css

@@ -1,53 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.section {
-  margin-bottom: var(--arrow-spacing-xxs);
-  @media (--viewport-medium) {
-    margin-bottom: var(--arrow-spacing-xs);
-  }
-}
-.section-borderBottomSml .border-bottom {
-  width: 20px;
-  height: 2px;
-  margin-top: var(--arrow-spacing-xxs);
-}
-
-.section-borderLeft {
-  display: flex;
-  align-items: baseline;
-
-  .border-left {
-    margin-right: var(--arrow-spacing-xs);
-    min-width: 3px;
-    max-width: 3px;
-    overflow: hidden;
-  }
-
-  .border-left::before {
-    content: "I";
-    font-family: var(--arrow-sans-serif);
-  }
-}
-
-html[dir="rtl"] {
-  .border-left {
-    margin-left: var(--arrow-spacing-xs);
-    margin-right: 0;
-  }
-}
-
-.section-solid {
-  color: var(--arrow-c-light);
-  align-self: self-start;
-  display: inline-flex;
-  padding: var(--arrow-spacing-xxs) var(--arrow-spacing-s);
-  @media (--viewport-medium) {
-    padding: var(--arrow-spacing-xs) var(--arrow-spacing-m);
-  }
-}
-.dark {
-  color: var(--arrow-c-mono2);
-}
-.light {
-  color: var(--arrow-c-invert-mono2);
-}

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

@@ -1,26 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { SectionTag } from "./index";
-import { withStore, optionalSelect } from "../../../../storybook";
-import Readme from "./README.md";
-import { color } from "@storybook/addon-knobs";
-
-const story = generateStory();
-
-const defaultvalue = "#3a9fdd";
-const sectionTagBorderColor = "Section Tag Border Color";
-
-const templateStyles = {
-  Default: "",
-  Solid: "solid",
-  "Border Bottom Small": "borderBottomSml",
-  "Border Left": "borderLeft"
-};
-
-withStore("Atoms/SectionTag", {}, Readme).add("Default", () => (
-  <SectionTag
-    story={story}
-    template={optionalSelect("Section Template", templateStyles)}
-    borderColor={color(sectionTagBorderColor, defaultvalue)}
-  />
-));

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

@@ -1,25 +0,0 @@
-# Social Share Popup
-
-This is the Box which shows up with a list of social share fields
-
-## Usage
-
-```jsx
-const props = {
-  fbUrl: "https://www.facebook.com",
-  fullUrl:
-    "https://ace-web.qtstage.io/anything/recent-stories/newsready-player-one-review-spielberg-spins-a-dizzying-vr-yarn",
-  iconType: "plain-svg",
-  linkedinUrl: "https://www.linkedin.com",
-  mailtoUrl:
-    "mailto:?subject=Ready%20Player%20One%20review%20%E2%80%93%20Spielberg%C2%A0&body=https%3A%2F%2Face-web.qtstage.io%2Fanything%2Frecent-stories%2Fnews%2Fready-player-one-review-spielberg-spins-a-dizzying-vr-yarn",
-  publisherUrl: undefined,
-  theme: "#ffffff",
-  title: "Ready Player One review – Spielberg ",
-  twitterUrl: "https://twitter.com"
-};
-
-<SocialSharePopup {...props} />;
-```
-
-<!-- PROPS -->

package/src/components/Atoms/SocialSharePopup/__snapshots__/social-share-popup.test.js.snap

@@ -1,259 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Social Share Template Should not render facebook icon if url not passed 1`] = `
-<div
-  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
->
-  <div
-    className="social-share-popup-m_triangle__14z72"
-  />
-  <div
-    className="social-share-popup-m_top-bar__174Um"
-  >
-    <span
-      className="social-share-popup-m_share-text__19E-F"
-      data-testid="share-label"
-    >
-      Share
-    </span>
-    <span
-      className="social-share-popup-m_close__3k-Hj"
-      data-testid="popup-close"
-      onClick=""
-    >
-      <CloseIcon
-        color="#000000"
-      />
-    </span>
-  </div>
-  <ul
-    className="social-share-popup-m_share-icon-wrapper__23U3C"
-  >
-    <PopupSocialShareItem
-      icon={
-        <Facebook
-          bgColor="#000000"
-          color="#ffffff"
-        />
-      }
-      iconName="facebook"
-      url=""
-    />
-  </ul>
-</div>
-`;
-
-exports[`Social Share Template Should not render linkedin icon if url not passed 1`] = `
-<div
-  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
->
-  <div
-    className="social-share-popup-m_triangle__14z72"
-  />
-  <div
-    className="social-share-popup-m_top-bar__174Um"
-  >
-    <span
-      className="social-share-popup-m_share-text__19E-F"
-      data-testid="share-label"
-    >
-      Share
-    </span>
-    <span
-      className="social-share-popup-m_close__3k-Hj"
-      data-testid="popup-close"
-      onClick=""
-    >
-      <CloseIcon
-        color="#000000"
-      />
-    </span>
-  </div>
-  <ul
-    className="social-share-popup-m_share-icon-wrapper__23U3C"
-  >
-    <PopupSocialShareItem
-      icon={
-        <Facebook
-          bgColor="#000000"
-          color="#ffffff"
-        />
-      }
-      iconName="facebook"
-      url="https://twitter.com/"
-    />
-  </ul>
-</div>
-`;
-
-exports[`Social Share Template Should not render twitter icon if url not passed 1`] = `
-<div
-  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
->
-  <div
-    className="social-share-popup-m_triangle__14z72"
-  />
-  <div
-    className="social-share-popup-m_top-bar__174Um"
-  >
-    <span
-      className="social-share-popup-m_share-text__19E-F"
-      data-testid="share-label"
-    >
-      Share
-    </span>
-    <span
-      className="social-share-popup-m_close__3k-Hj"
-      data-testid="popup-close"
-      onClick=""
-    >
-      <CloseIcon
-        color="#000000"
-      />
-    </span>
-  </div>
-  <ul
-    className="social-share-popup-m_share-icon-wrapper__23U3C"
-  >
-    <PopupSocialShareItem
-      icon={
-        <Facebook
-          bgColor="#000000"
-          color="#ffffff"
-        />
-      }
-      iconName="facebook"
-      url="https://twitter.com/"
-    />
-  </ul>
-</div>
-`;
-
-exports[`Social Share Template Should not render whatsapp icon if url not passed 1`] = `
-<div
-  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
->
-  <div
-    className="social-share-popup-m_triangle__14z72"
-  />
-  <div
-    className="social-share-popup-m_top-bar__174Um"
-  >
-    <span
-      className="social-share-popup-m_share-text__19E-F"
-      data-testid="share-label"
-    >
-      Share
-    </span>
-    <span
-      className="social-share-popup-m_close__3k-Hj"
-      data-testid="popup-close"
-      onClick=""
-    >
-      <CloseIcon
-        color="#000000"
-      />
-    </span>
-  </div>
-  <ul
-    className="social-share-popup-m_share-icon-wrapper__23U3C"
-  >
-    <PopupSocialShareItem
-      icon={
-        <Facebook
-          bgColor="#000000"
-          color="#ffffff"
-        />
-      }
-      iconName="facebook"
-      url="https://twitter.com/"
-    />
-  </ul>
-</div>
-`;
-
-exports[`Social Share Template Should render social share popup 1`] = `
-<div
-  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
->
-  <div
-    className="social-share-popup-m_triangle__14z72"
-  />
-  <div
-    className="social-share-popup-m_top-bar__174Um"
-  >
-    <span
-      className="social-share-popup-m_share-text__19E-F"
-      data-testid="share-label"
-    >
-      Share
-    </span>
-    <span
-      className="social-share-popup-m_close__3k-Hj"
-      data-testid="popup-close"
-      onClick=""
-    >
-      <CloseIcon
-        color="#000000"
-      />
-    </span>
-  </div>
-  <ul
-    className="social-share-popup-m_share-icon-wrapper__23U3C"
-  >
-    <PopupSocialShareItem
-      icon={
-        <Facebook
-          bgColor="#000000"
-          color="#ffffff"
-        />
-      }
-      iconName="facebook"
-      url="https://www.facebook.com"
-    />
-  </ul>
-</div>
-`;
-
-exports[`Social Share Template Should render template if theme and icon is not passed 1`] = `
-<div
-  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
->
-  <div
-    className="social-share-popup-m_triangle__14z72"
-  />
-  <div
-    className="social-share-popup-m_top-bar__174Um"
-  >
-    <span
-      className="social-share-popup-m_share-text__19E-F"
-      data-testid="share-label"
-    >
-      Share
-    </span>
-    <span
-      className="social-share-popup-m_close__3k-Hj"
-      data-testid="popup-close"
-      onClick=""
-    >
-      <CloseIcon
-        color="#000000"
-      />
-    </span>
-  </div>
-  <ul
-    className="social-share-popup-m_share-icon-wrapper__23U3C"
-  >
-    <PopupSocialShareItem
-      icon={
-        <Facebook
-          bgColor="#000000"
-          color="#ffffff"
-        />
-      }
-      iconName="facebook"
-      url="https://twitter.com/"
-    />
-  </ul>
-</div>
-`;