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

package/src/components/Rows/FullScreenSlider/full-screen-slider.m.css

@@ -1,162 +0,0 @@
-@custom-media --viewport-small (width < 768px);
-@custom-media --viewport-medium (width >= 768px);
-
-.full-screen-slider.container-width {
-  padding: 0 12px;
-  @media (--viewport-medium) {
-    padding: unset;
-  }
-}
-.full-width :global(.arr--story-content) {
-  padding: 0 12px;
-  @media (--viewport-medium) {
-    padding: unset;
-  }
-}
-
-.full-screen-slider-wrapper:global(.arrow-component.full-width-with-padding.full-width) {
-  padding: var(--arrow-spacing-m) 0 0 0;
-}
-
-.container-width,
-.container-width :global(.arr--collection-name),
-.full-width :global(.arr--collection-name) {
-  max-width: 1172px;
-  margin: 0 auto;
-}
-.wrapper {
-  position: relative;
-  margin: var(--arrow-spacing-xs) 0;
-  @media (--viewport-medium) {
-    margin: var(--arrow-spacing-m) 0;
-  }
-}
-
-.full-screen-slider :global(.arr--section-name) div,
-.full-screen-slider :global(.arr--headline) h1,
-.full-screen-slider :global(.arr-author-name),
-.full-screen-slider :global(.arr--publish-time),
-.full-screen-slider :global(.arr--sub-headline),
-.full-screen-slider :global(.author-name),
-.full-screen-slider :global(.arr-separator),
-.full-screen-slider :global(.arr-author-prefix),
-.full-screen-slider :global(.arr--read-time),
-.full-screen-slider :global(.arr--dot),
-.full-screen-slider :global(.arr--divider) {
-  @media (--viewport-medium) {
-    color: var(--arrow-c-light);
-    fill: var(--arrow-c-light);
-  }
-}
-.content-align :global(.arr--author-time) {
-  justify-content: center;
-}
-
-.content-align {
-  text-align: center;
-}
-
-.full-screen-slider :global(.arr--headline) h2 {
-  font-size: var(--arrow-fs-l);
-  @media (--viewport-medium) {
-    font-size: var(--arrow-fs-huge);
-  }
-}
-
-.full-screen-slider-wrapper :global(.arr--story-content .arr--headline h1) {
-  text-transform: none;
-}
-
-.full-screen-slider {
-  :global .left-arrow {
-    @media (--viewport-medium) {
-      background-color: var(--arrow-c-light);
-    }
-  }
-
-  @media (--viewport-medium) {
-    :global .right-arrow-rtl,
-    :global .left-arrow-ltr {
-      transform: translate(125px, -50%);
-    }
-    :global .left-arrow-rtl,
-    :global .right-arrow-ltr {
-      transform: translate(-125px, -50%);
-    }
-  }
-
-  @media (--viewport-small) {
-    :global .scroll-snap-container .arr--responsive-hero-image .story-icon,
-    :global .scroll-snap-container .arr--fallback-hero-image .story-icon {
-      height: 24px;
-      width: 24px;
-      position: absolute;
-      bottom: 10px;
-      left: 10px;
-      z-index: var(--z-index-1);
-    }
-  }
-
-  @media (--viewport-medium) {
-    :global .scroll-snap-container .arr--responsive-hero-image .story-icon,
-    :global .scroll-snap-container .arr--fallback-hero-image .story-icon {
-      height: 64px;
-      width: 64px;
-      position: absolute;
-      bottom: 10px;
-      left: 10px;
-      z-index: var(--z-index-1);
-    }
-  }
-  :global .live-icon {
-    animation: blink 1.5s linear infinite;
-    vertical-align: middle;
-    height: 24px;
-    width: 24px;
-  }
-
-  @keyframes blink {
-    0% {
-      opacity: 0;
-    }
-
-    50% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-    }
-  }
-
-  :global .right-arrow {
-    @media (--viewport-medium) {
-      background-color: var(--arrow-c-light);
-    }
-  }
-
-  @media (--viewport-medium) {
-    :global .left-arrow path,
-    :global .right-arrow path {
-      stroke: var(--arrow-c-dark);
-    }
-    :global .slider-indicators {
-      position: absolute;
-      bottom: var(--arrow-spacing-m);
-    }
-    :global .indicator-dots {
-      background-color: var(--arrow-c-light);
-      border-color: var(--arrow-c-light);
-    }
-
-    :global .indicator-dots[aria-pressed="true"],
-    :global .indicator-dashes [aria-pressed="true"] {
-      background-color: var(--arrow-c-light);
-      border-color: var(--arrow-c-light);
-    }
-
-    :global .indicator-dashes {
-      background-color: var(--arrow-c-light);
-    }
-  }
-}

package/src/components/Rows/FullScreenSlider/index.js

@@ -1,122 +0,0 @@
-import React from "react";
-import { useDispatch, useSelector } from "react-redux";
-import get from "lodash/get";
-
-import { CollectionName } from "../../Atoms/CollectionName";
-import { LoadmoreButton } from "../../Atoms/Loadmore";
-import { StoryCard } from "../../Molecules/StoryCard";
-import { collectionToStories } from "@quintype/components";
-import PropTypes from "prop-types";
-import { getNumberOfStoriesToShow, generateNavigateSlug, navigateTo } from "../../../utils/utils";
-import { StateProvider } from "../../SharedContext";
-import { ScrollSnap } from "../../Atoms/ScrollSnap";
-
-import "./full-screen-slider.m.css";
-
-const FullScreenSlider = ({ collection = {}, config = {} }) => {
-  const items = collectionToStories(collection);
-  if (items.length < 1) {
-    return null;
-  }
-
-  const {
-    collectionNameBorderColor = "",
-    borderColor = "",
-    theme = "",
-    collectionNameTemplate = "",
-    isFullWidth = false,
-    numberOfStoriesToShow = 1,
-    contentAlignment = "",
-    footerButton = "",
-    footerSlotConfig = {},
-    navigationArrows = true,
-    slideIndicator = "none",
-    isInfinite = false,
-    aspectRatio = [[16, 9]],
-    customCollectionName
-  } = config;
-  const { footerSlot } = footerSlotConfig;
-  const containerStyle = isFullWidth ? "full-width" : "container-width";
-  const alignment = contentAlignment === "center" ? "content-align" : "";
-
-  const dispatch = useDispatch();
-  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
-  const url = generateNavigateSlug(collection, qtConfig);
-
-  const showNumberOfStoriesToShow = getNumberOfStoriesToShow(numberOfStoriesToShow);
-  const footerSlotComp = footerSlot ? footerSlot() : null;
-  const imageAspectRatio = aspectRatio || [[16, 9]];
-  return (
-    <div
-      className={`arrow-component full-width-with-padding ${containerStyle}`}
-      data-test-id="full-screen-slider"
-      styleName="full-screen-slider-wrapper"
-      style={{ backgroundColor: theme || "initial" }}>
-      <div styleName={`full-screen-slider ${containerStyle}`}>
-        <div styleName={containerStyle}>
-          <CollectionName
-            customCollectionName={customCollectionName}
-            styleName={`${containerStyle}`}
-            collection={collection}
-            collectionNameTemplate={collectionNameTemplate}
-            collectionNameBorderColor={collectionNameBorderColor}
-          />
-        </div>
-        <div styleName={`wrapper ${containerStyle} ${alignment}`}>
-          <ScrollSnap isArrow={navigationArrows} slideIndicator={slideIndicator} isInfinite={isInfinite}>
-            {items.slice(0, showNumberOfStoriesToShow).map((story, index) => {
-              return (
-                <StoryCard
-                  key={index}
-                  story={story}
-                  useImageAsBackground
-                  aspectRatio={imageAspectRatio}
-                  headerLevel={"1"}
-                  borderColor={borderColor}
-                  config={config}
-                  widths={[250, 480, 640, 1200]}
-                  disableRoundedCorners={isFullWidth}
-                  isFullWidthImage={isFullWidth}
-                />
-              );
-            })}
-          </ScrollSnap>
-        </div>
-        <LoadmoreButton
-          collection={collection}
-          template={footerButton}
-          config={config}
-          navigate={() => navigateTo(dispatch, url)}
-          qtConfig={qtConfig}
-        />
-        {footerSlotComp}
-      </div>
-    </div>
-  );
-};
-
-FullScreenSlider.propTypes = {
-  /**  collection is the array of objects which is returning by API  */
-  collection: PropTypes.object.isRequired,
-  /** The config for the Row */
-  config: PropTypes.shape({
-    // section tag border color
-    borderColor: PropTypes.string,
-    // backgroundColor and text color based on theme
-    theme: PropTypes.string,
-    // row title style
-    collectionTemplate: PropTypes.string,
-    // width of the slider
-    isFullWidth: PropTypes.bool,
-    // no of slides in slider
-    numberOfStoriesToShow: PropTypes.number,
-    // content alignment
-    contentAlignment: PropTypes.string,
-    footerButton: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-    // aspect ratio of the image
-    aspectRatio: PropTypes.array
-  })
-};
-
-export default StateProvider(FullScreenSlider);

package/src/components/Rows/FullScreenSlider/stories.js

@@ -1,115 +0,0 @@
-import { color, boolean, number } from "@storybook/addon-knobs";
-import {
-  withStore,
-  optionalSelect,
-  sectionTagTemplates,
-  collectionNameTemplates,
-  footerButton
-} from "../../../../storybook";
-import FullScreenSlider from "./index";
-import { generateCollection } from "../../Fixture/";
-import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
-import React from "react";
-import Readme from "./README.md";
-
-const collection = generateCollection({ stories: 8 });
-
-const label = "color";
-const defaultvalue = "#ffffff";
-
-const collectionNameDefaultValue = "#3a9fdd";
-const collectionNameBorderColorLabel = "Collection Name Border Color";
-
-const sectionTagBorderColor = "Section Tag Border Color";
-const sectionTagDefaultvalue = "#3a9fdd";
-
-const navigationStyle = {
-  defaultvalue: "none",
-  dots: "dots",
-  dashes: "dashes"
-};
-const contentAlignment = {
-  defaultvalue: "left",
-  center: "center"
-};
-
-const footerSlot = () => {
-  return <AdPlaceholder />;
-};
-
-withStore(
-  "Rows/Full Screen Slider ",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-).add("Default", () => {
-  const contextConfig = {
-    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
-    borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
-    theme: color(label, defaultvalue),
-    collectionNameTemplate: optionalSelect("Collection Templates", collectionNameTemplates),
-    sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
-    showSection: boolean("section disable", true),
-    showAuthor: boolean("Author disable", true),
-    showRowTitle: boolean("Row Title disable", true),
-    showTime: boolean("Timestamp disable", true),
-    showSubheadline: boolean("subheadline enable ", false),
-    isFullWidth: boolean("isFullWidth", false),
-    numberOfStoriesToShow: number("Number of slide to show", 8),
-    isInfinite: boolean("Autoplay", false),
-    slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
-    navigationArrows: boolean("Arrows enable", true),
-    contentAlignment: optionalSelect("content alignment", contentAlignment),
-    footerButton: optionalSelect("Footer Button", footerButton),
-    footerSlotConfig: { footerSlot: footerSlot },
-    showButton: boolean("Show button", true),
-    showReadTime: boolean("Read time", true)
-  };
-  return <FullScreenSlider collection={collection} config={contextConfig} />;
-});
-
-withStore(
-  "Rows/Full Screen Slider",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        language: {
-          direction: "rtl"
-        }
-      }
-    }
-  },
-  Readme
-)
-  .addDecorator((story) => <div style={{ maxWidth: "1000px", margin: "auto", direction: "rtl" }}>{story()}</div>)
-  .add("Support Rtl ", () => {
-    const contextConfig = {
-      collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
-      borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
-      theme: color(label, defaultvalue),
-      collectionNameTemplate: optionalSelect("Collection Templates", collectionNameTemplates),
-      sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
-      showSection: boolean("section disable", true),
-      showAuthor: boolean("Author disable", true),
-      showRowTitle: boolean("Row Title disable", true),
-      showTime: boolean("Timestamp disable", true),
-      showSubheadline: boolean("subheadline enable ", false),
-      isFullWidth: boolean("isFullWidth", false),
-      numberOfStoriesToShow: number("Number of slide to show", 8),
-      isInfinite: boolean("Autoplay", false),
-      slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
-      navigationArrows: boolean("Arrows enable", true),
-      contentAlignment: optionalSelect("content alignment", contentAlignment),
-      footerButton: optionalSelect("Footer Button", footerButton),
-      footerSlotConfig: { footerSlot: footerSlot },
-      showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true)
-    };
-    return <FullScreenSlider collection={collection} config={contextConfig} />;
-  });

package/src/components/Rows/HalfScreenSlider/README.md

@@ -1,43 +0,0 @@
-# Half Screen Slider
-
-The _HalfScreenSlider_ component is a slider Row which shows 1 story at a time on desktop and mobile. It is a variation of the Full Screen Slider with a different story card.
-
-## Usage
-
-### Import
-
-```jsx
-import { HalfScreenSlider } from "@quintype/arrow";
-```
-
-### Setting the Row context
-
-```jsx
-const contextConfig = {
-  collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
-  borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
-  theme: color(label, defaultvalue),
-  border: optionalSelect("Border", borderTemplate),
-  showSection: boolean("section disable", true),
-  showAuthor: boolean("Author disable", true),
-  showTime: boolean("Timestamp disable", true),
-  showRowTitle: boolean("Row title", true),
-  footerButton: optionalSelect("Footer Button", footerButton),
-  collectionNameTemplate: optionalSelect("Collection row Templates", collectionNameTemplates),
-  sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
-  buttonText: text("Footer text"),
-  slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
-  navigationArrows: boolean("Arrows enable", true),
-  isInfinite: boolean("Autoplay", false),
-  numberOfStoriesToShow: number("Number of slide to show", 3),
-  footerSlotConfig: { footerSlot: footerSlot },
-  showButton: boolean("Show button", true),
-  showReadTime: boolean("Read time", true)
-};
-```
-
-```jsx
-<HalfScreenSlider collection={collection} config={contextConfig} />
-```
-
-<!-- PROPS -->

package/src/components/Rows/HalfScreenSlider/half-screen-slider.m.css

@@ -1,80 +0,0 @@
-@custom-media --viewport-small (width < 768px);
-@custom-media --viewport-medium (width >= 768px);
-
-.half-screen-slider {
-  padding: var(--arrow-spacing-s) var(--arrow-spacing-s) 0;
-  @media (--viewport-medium) {
-    padding: 0;
-  }
-}
-.wrapper {
-  margin: var(--arrow-spacing-xs) 0;
-  @media (--viewport-medium) {
-    margin: var(--arrow-spacing-m) 0;
-  }
-
-  @media (--viewport-small) {
-    :global .scroll-snap-container .arr--responsive-hero-image .story-icon,
-    :global .scroll-snap-container .arr--fallback-hero-image .story-icon {
-      height: 24px;
-      width: 24px;
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      z-index: var(--z-index-1);
-    }
-  }
-  @media (--viewport-medium) {
-    :global .scroll-snap-container .arr--responsive-hero-image .story-icon,
-    :global .scroll-snap-container .arr--fallback-hero-image .story-icon {
-      height: 64px;
-      width: 64px;
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      z-index: var(--z-index-1);
-    }
-  }
-
-  :global .live-icon {
-    animation: blink 1.5s linear infinite;
-    vertical-align: middle;
-    height: 24px;
-    width: 24px;
-  }
-
-  @keyframes blink {
-    0% {
-      opacity: 0;
-    }
-
-    50% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-    }
-  }
-}
-
-.border.dark {
-  border: 1px solid var(--dark-border);
-}
-
-.border.light {
-  border: 1px solid var(--light-border);
-}
-
-.half-screen-slider :global(.arr--content) {
-  padding-bottom: var(--arrow-spacing-m);
-  @media (--viewport-medium) {
-    padding-bottom: unset;
-  }
-}
-.half-screen-slider .border :global(.arr--content) {
-  padding: var(--arrow-spacing-m) var(--arrow-spacing-m) var(--arrow-spacing-xl) var(--arrow-spacing-m);
-  @media (--viewport-medium) {
-    padding: unset;
-  }
-}

package/src/components/Rows/HalfScreenSlider/index.js

@@ -1,112 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { useDispatch, useSelector } from "react-redux";
-import get from "lodash.get";
-
-import { collectionToStories } from "@quintype/components";
-import { CollectionName } from "../../Atoms/CollectionName";
-import { LoadmoreButton } from "../../Atoms/Loadmore";
-import { SliderHorizontalCard } from "../../Molecules/SliderHorizontalCard";
-import { StateProvider } from "../../SharedContext";
-import { getTextColor, getNumberOfStoriesToShow, generateNavigateSlug, navigateTo } from "../../../utils/utils";
-import { ScrollSnap } from "../../Atoms/ScrollSnap";
-import { roundedCornerClass } from "../../../constants";
-
-import "./half-screen-slider.m.css";
-
-const HalfScreenSlider = ({ collection, config = {} }) => {
-  const items = collectionToStories(collection);
-  if (items.length < 1) {
-    return null;
-  }
-  const dispatch = useDispatch();
-  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
-  const {
-    collectionNameBorderColor = "",
-    borderColor = "",
-    theme = "",
-    border = "",
-    numberOfStoriesToShow = 1,
-    collectionNameTemplate,
-    footerButton = "",
-    footerSlotConfig = {},
-    navigationArrows = true,
-    slideIndicator = "none",
-    isInfinite = false,
-    customCollectionName
-  } = config;
-  const { footerSlot } = footerSlotConfig;
-  const textColor = getTextColor(theme);
-  const isBorderEnable = border === "full" ? "border" : "";
-
-  const footerSlotComp = footerSlot ? footerSlot() : null;
-  const showNumberOfStoriesToShow = getNumberOfStoriesToShow(numberOfStoriesToShow);
-
-  const url = generateNavigateSlug(collection, qtConfig);
-
-  const enableRoundedCorners = useSelector((state) =>
-    get(qtConfig, ["pagebuilder-config", "general", "enableRoundedCorners"], false)
-  );
-  const roundedCorners = isBorderEnable && enableRoundedCorners ? roundedCornerClass : "";
-
-  return (
-    <div
-      className="full-width-with-padding arrow-component"
-      data-test-id="half-screen-slider"
-      style={{ backgroundColor: theme || "initial" }}>
-      <div styleName="half-screen-slider">
-        <CollectionName
-          customCollectionName={customCollectionName}
-          collection={collection}
-          collectionNameTemplate={collectionNameTemplate}
-          collectionNameBorderColor={collectionNameBorderColor}
-        />
-        <div className={roundedCorners} styleName={`wrapper ${isBorderEnable} ${textColor}`}>
-          <ScrollSnap isArrow={navigationArrows} slideIndicator={slideIndicator} isInfinite={isInfinite}>
-            {items.slice(0, showNumberOfStoriesToShow).map((story, index) => {
-              return (
-                <SliderHorizontalCard
-                  headerLevel="2"
-                  key={index}
-                  story={story}
-                  isHorizontal
-                  borderColor={borderColor}
-                  config={config}
-                />
-              );
-            })}
-          </ScrollSnap>
-        </div>
-      </div>
-      <LoadmoreButton
-        template={footerButton}
-        collection={collection}
-        config={config}
-        navigate={() => navigateTo(dispatch, url)}
-        qtConfig={qtConfig}
-      />
-      {footerSlotComp}
-    </div>
-  );
-};
-export default StateProvider(HalfScreenSlider);
-HalfScreenSlider.propTypes = {
-  footerButton: PropTypes.string,
-  /**  collection is the array of objects which is returning by API  */
-  collection: PropTypes.object.isRequired,
-  // config is the configuration of the row
-  config: PropTypes.object.isRequired,
-  // border around the storycard
-  border: PropTypes.string,
-  // speed of the slider(ms)
-  autoplaySpeed: PropTypes.number,
-  // no of slides in slider
-  numberOfStoriesToShow: PropTypes.number,
-  // background and text color configuration
-  theme: PropTypes.string,
-  // style of the row title
-  collectionTemplate: PropTypes.string,
-  collectionNameBorderColor: PropTypes.string,
-  // section tag border color
-  borderColor: PropTypes.string
-};