@quintype/arrow 3.20.0-perf-v2.0 → 3.20.0

package/src/components/Atoms/PublishDetail/publish-details.m.css

@@ -1,47 +0,0 @@
-@value viewports: "../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-
-.timeStamp {
-  font-size: var(--arrow-fs-tiny);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-xs);
-  }
-}
-
-.timeStamp.dark {
-  color: var(--arrow-c-mono4);
-}
-
-.timeStamp.light {
-  color: var(--arrow-c-invert-mono4);
-}
-
-.publish-details {
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-}
-
-.update-details {
-  display: flex;
-  margin-top: var(--arrow-spacing-xs);
-}
-.dot-indicator {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--arrow-spacing-xs);
-}
-
-.timeStamp :global(.arr--read-time) {
-  font-size: var(--arrow-fs-tiny);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-xs);
-  }
-}
-
-.date.dark {
-  color: var(--arrow-c-mono2);
-}
-.date.light {
-  color: var(--arrow-c-invert-mono2);
-}

package/src/components/Atoms/PublishDetail/publish-details.test.js

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { mount } from "enzyme";
-import expect from "expect";
-import { generateStory } from "../../Fixture/index";
-import { PublishDetails } from "./index";
-
-const story = generateStory();
-
-describe("default author card", () => {
-  it("Should render default publish details componen", () => {
-    const wrapper = mount(<PublishDetails story={story} />);
-    expect(wrapper.find({ "data-test-id": "timeStamp" }).prop("className")).toMatch(/timeStamp/);
-  });
-  it("Should render without updated time", () => {
-    const wrapper = mount(<PublishDetails story={story} opts={{ enableUpdatedTime: false }} />);
-    expect(wrapper.find({ "data-test-id": "update-details" }).length).toEqual(0);
-  });
-  it("Should render without read time", () => {
-    const wrapper = mount(<PublishDetails story={story} opts={{ showReadTime: false }} />);
-    expect(wrapper.find({ "data-test-id": "read-time" }).length).toEqual(0);
-  });
-});

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

@@ -1,22 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { PublishDetails } from "./index";
-import { boolean, text } from "@storybook/addon-knobs";
-import Readme from "./README.md";
-
-const story = generateStory();
-
-withStore("Atoms/Publish Details", {}, Readme).add("Default", () => (
-  <PublishDetails
-    story={story}
-    opts={{
-      showReadTime: boolean("Show read Time", true),
-      enableUpdatedTime: boolean("Enable Update Time", true),
-      enablePublishedTime: boolean("Enable Published Time", true),
-      localizedPublishedOn: text("Localise Published On", "ಪ್ರಕಟಿಸಲಾಗಿದೆ"),
-      localizedUpdatedOn: text("Localise Updated On", "ನವೀಕರಿಸಲಾಗಿದೆ"),
-      timeFormat: "12hours"
-    }}
-  />
-));

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

@@ -1,13 +0,0 @@
-# Read Time
-
-Component to display the read time for the story card.
-
-## Usage
-
-```jsx
-<ReadTime story={story} />
-```
-
-```jsx
-<ReadTime story={story} opts={{ showReadTime: true }} />
-```

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

@@ -1,52 +0,0 @@
-import get from "lodash.get";
-import React from "react";
-import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
-import { getTextColor } from "../../../utils/utils";
-import { useStateValue } from "../../SharedContext";
-import "./read-time.m.css";
-import { Dot } from "../Dot/dot";
-
-export const ReadTime = ({ story, opts = {}, isLightTheme = false }) => {
-  const config = useStateValue() || {};
-  const showReadTime = get(config, ["showReadTime"]) || get(opts, ["showReadTime"], true);
-  const readTime = get(story, ["read-time"], 0);
-  const textColor = isLightTheme ? "light" : getTextColor(config.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";
-
-  if (!showReadTime || !readTime) return null;
-
-  const timeToRead =
-    get(opts, ["localizedTimeToRead"]) || get(opts, ["localizationConfig", "localizedTimeToRead"]) || "min read";
-
-  return (
-    <>
-      <div
-        className="arrow-component arr--read-time"
-        styleName={`read-time-wrapper ${textColor}`}
-        data-test-id="read-time">
-        <span styleName="dot-indicator" className="read-time-indicator">
-          <Dot color={textColor} />
-        </span>
-        <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
-};

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);
-  line-height: var(--arrow-lh-2);
-}
-
-.dot-indicator {
-  padding: 0 var(--arrow-spacing-xs) var(--arrow-spacing-xs);
-}
-
-.dark {
-  color: var(--arrow-c-mono4);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono4);
-}
-
-html[dir="rtl"] {
-  .read-time-wrapper {
-    margin-right: var(--arrow-spacing-xs);
-  }
-}

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 }} />
-      </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/ScrollSnap/SliderArrow/index.js

@@ -1,57 +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 }) => {
-  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}
-          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}
-          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;
-}

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

@@ -1,169 +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 }) => {
-  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
-            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 -->