@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

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

@@ -0,0 +1,136 @@
+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);
+};
+
+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);
+
+  // 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

@@ -0,0 +1,27 @@
+.wrapper {
+  position: relative;
+}
+
+.carousel {
+  display: flex;
+  overflow: auto;
+  scroll-snap-type: x mandatory;
+  -ms-overflow-style: none;
+  justify-content: space-between;
+
+  > 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,61 @@
+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, rgbToHex } from "../../../utils/utils";
+import "./section.m.css";
+
+export const SectionTag = ({ story, template = "", borderColor = "", isLightTheme }) => {
+  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 colorToApplyContrast = template === "solid" || templateFromRowContext === "solid" ? borderColor : config.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">
+      <div
+        data-test-id="sectionTag"
+        className="section-tag arrow-component"
+        styleName={`${textColor} ${templateStyle}`}
+        style={{
+          backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
+        }}>
+        {templateStyle.includes("section-borderLeft") && (
+          <span styleName="border-left" style={{ color: sectionTagBorderColor }}></span>
+        )}
+        {section["display-name"] || section["name"]}
+        <div
+          styleName="border-bottom"
+          style={{ backgroundColor: `${template === "solid" ? "" : sectionTagBorderColor}` }}></div>
+      </div>
+    </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
+};
+
+SectionTag.defaultProps = {
+  template: "",
+  isLightTheme: false
+};

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

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

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

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