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

package/src/components/Rows/FourTabbedBigStorySlider/four-tabbed-big-story-slider.m.css

@@ -1,265 +0,0 @@
-@value viewports: "../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-@value desktop from viewports;
-
-@custom-media --viewport-mobile (width < 768px);
-@custom-media --viewport-desktop (width > 1024px);
-
-@media (--viewport-mobile) {
-  .four-tabbed-big-story-slider {
-    padding: 0 var(--arrow-spacing-s);
-  }
-  .story-card-content {
-    display: none;
-  }
-}
-
-.four-tabbed-big-story-slider {
-  :global {
-    .author-name,
-    .arr--publish-time,
-    .arr--read-time,
-    .section-tag {
-      color: var(--arrow-c-invert-mono1);
-    }
-
-    .arr-author-name {
-      margin-top: 0;
-      position: relative;
-      top: -4px;
-      margin-bottom: 0;
-    }
-
-    .arr--responsive-hero-image .story-icon,
-    .arr--fallback-hero-image .story-icon {
-      height: 64px;
-      width: 64px;
-      position: absolute;
-      bottom: 10px;
-      left: 10px;
-      z-index: var(--z-index-1);
-      @media (--viewport-mobile) {
-        height: 24px;
-        width: 24px;
-      }
-    }
-
-    .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;
-      }
-    }
-
-    .arr--author-time {
-      min-height: 16px;
-    }
-
-    .arr--publish-time {
-      position: relative;
-      top: -4px;
-      margin-bottom: 0;
-
-      div {
-        margin-bottom: 0;
-      }
-    }
-
-    .arr--read-time {
-      position: relative;
-      top: -4px;
-
-      span {
-        padding-bottom: 0;
-      }
-    }
-
-    .arr--read-time,
-    .arr-separator {
-      svg {
-        fill: var(--arrow-c-invert-mono1);
-      }
-
-      div {
-        position: relative;
-        top: -2px;
-      }
-    }
-
-    .arr--story-card > div:nth-child(2) {
-      left: 0;
-      right: 0;
-      bottom: 0;
-      padding: 0 var(--arrow-spacing-96) var(--arrow-spacing-48);
-    }
-
-    .arr--story-card > a > figure::after {
-      background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent 75%, transparent);
-    }
-
-    .arr-separator {
-      top: -11px;
-      padding: 0 1px;
-      height: 3px;
-    }
-
-    .arr--button {
-      margin: var(--arrow-spacing-l) auto;
-    }
-
-    .arr--hero-image {
-      margin-bottom: 0;
-    }
-
-    .arr--sub-headline {
-      color: var(--arrow-c-light);
-      font-size: var(--arrow-fs-m);
-      line-height: var(--arrow-lh-4);
-    }
-  }
-}
-
-.light-wrapper {
-  :global {
-    .arr--collection-name h3 {
-      color: var(--arrow-c-invert-mono1);
-    }
-  }
-  .stories-wrapper::-webkit-scrollbar {
-    background-color: var(--arrow-c-invert-mono6);
-  }
-
-  .stories-wrapper::-webkit-scrollbar-thumb {
-    background-color: var(--arrow-c-invert-mono7);
-  }
-}
-
-.no-button-wrapper {
-  margin-top: var(--arrow-spacing-l);
-}
-
-.stories-wrapper {
-  display: flex;
-  overflow-x: scroll;
-  scrollbar-width: none;
-}
-
-.stories-wrapper::-webkit-scrollbar {
-  background-color: var(--arrow-c-invert-mono5);
-}
-
-.stories-wrapper::-webkit-scrollbar-thumb {
-  background-color: var(--arrow-c-mono7);
-  border-radius: var(--arrow-spacing-xs);
-}
-
-.story-headline-container {
-  display: flex;
-  scroll-snap-align: start;
-  padding: var(--arrow-spacing-l);
-  border-right: 1px solid var(--arrow-c-invert-mono8);
-  min-width: 80%;
-  cursor: pointer;
-  position: relative;
-
-  h6 {
-    margin-bottom: 0;
-  }
-
-  @media (min-width: mobile) {
-    min-width: 44%;
-  }
-  @media (min-width: desktop) {
-    min-width: 30%;
-  }
-}
-
-.story.dark:hover,
-.active-story > .story.dark {
-  color: var(--arrow-c-mono2);
-}
-
-.story.light:hover,
-.active-story > .story.light {
-  color: var(--arrow-c-invert-mono2);
-}
-
-.dark-headline-container {
-  background-color: var(--arrow-c-accent5);
-
-  h6 {
-    opacity: 0.64;
-    color: var(--arrow-c-mono1);
-  }
-}
-
-.active-dark-headline-container {
-  background-color: var(--arrow-c-accent6);
-  h6 {
-    opacity: 1;
-  }
-}
-
-.light-headline-container {
-  background-color: var(--arrow-c-invert-mono7);
-  border-color: var(--arrow-c-invert-mono9);
-
-  h6 {
-    opacity: 0.64;
-    color: var(--arrow-c-invert-mono1);
-  }
-}
-
-.active-light-headline-container {
-  background-color: var(--arrow-c-invert-mono6);
-
-  h6 {
-    opacity: 1;
-  }
-}
-
-.story-card-content {
-  h6 {
-    line-height: var(--arrow-lh-2);
-    font-size: var(--arrow-fs-big);
-    color: var(--arrow-c-light);
-  }
-}
-
-@media only screen and (max-width: desktop) {
-  .four-tabbed-big-story-slider {
-    :global {
-      .section-tag {
-        margin-bottom: var(--arrow-spacing-m);
-      }
-
-      .arr--story-card h6 {
-        display: none;
-      }
-    }
-  }
-}
-
-@media (--viewport-desktop) {
-  .four-tabbed-big-story-slider {
-    :global {
-      .arr--author-time {
-        margin-bottom: 8px;
-      }
-    }
-  }
-}

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

@@ -1,158 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { useDispatch, useSelector } from "react-redux";
-import get from "lodash/get";
-
-import { collectionToStories, Link } from "@quintype/components";
-import { StateProvider } from "../../SharedContext";
-import {
-  generateNavigateSlug,
-  getStoryUrl,
-  getTextColor,
-  isExternalStory,
-  navigateTo,
-  rgbToHex
-} from "../../../utils/utils";
-import { CollectionName } from "../../Atoms/CollectionName";
-import { LoadmoreButton } from "../../Atoms/Loadmore";
-import { StoryCard } from "../../Molecules/StoryCard";
-import { HeroImage } from "../../Atoms/HeroImage";
-import { StorycardContent } from "../../../components/Molecules/StorycardContent";
-import { SectionTag } from "../../Atoms/SectionTag";
-import { Headline } from "../../Atoms/Headline";
-import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
-import { Subheadline } from "../../Atoms/Subheadline";
-
-import "./four-tabbed-big-story-slider.m.css";
-
-export const FourTabbedBigStorySlider = ({ collection, config = {} }) => {
-  const items = collectionToStories(collection);
-  if (items.length < 1) {
-    return null;
-  }
-  const {
-    collectionNameBorderColor = "",
-    theme = "",
-    collectionNameTemplate = "",
-    footerSlotConfig = {},
-    footerButton = "",
-    borderColor = "",
-    showSubheadline = true,
-    showButton = true
-  } = config;
-  const { footerSlot } = footerSlotConfig;
-  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
-  const url = generateNavigateSlug(collection, qtConfig);
-
-  const [currentStory, updateCurrentStory] = useState(items[0]);
-  const [active, handleActive] = useState(0);
-
-  const footerSlotComp = footerSlot ? footerSlot() : null;
-  const textColor = getTextColor(theme);
-  const dispatch = useDispatch();
-
-  const updateActiveTab = (story, index) => {
-    updateCurrentStory(story);
-    handleActive(index);
-  };
-
-  const getActiveIndexStylename = (isActive) => {
-    if (isActive) {
-      return `active-story active-${textColor}-headline-container`;
-    } else return "";
-  };
-
-  const getCustomStyleName = textColor === "light" ? "light-wrapper" : "";
-
-  return (
-    <div
-      className="full-width-with-padding arrow-component"
-      data-test-id="two-col-three-stories"
-      style={{ backgroundColor: theme, color: textColor }}>
-      <div styleName={`four-tabbed-big-story-slider ${getCustomStyleName}`}>
-        <CollectionName
-          collection={collection}
-          collectionNameTemplate={collectionNameTemplate}
-          collectionNameBorderColor={collectionNameBorderColor}
-        />
-        <StoryCard story={currentStory} useImageAsBackground>
-          <HeroImage config={config} story={currentStory} aspectRatio={[[16, 9]]} />
-          <div styleName="story-card-content">
-            <StorycardContent story={currentStory}>
-              <DefaultStoryCardContent
-                story={currentStory}
-                config={config}
-                borderColor={borderColor}
-                showSubheadline={showSubheadline}
-              />
-            </StorycardContent>
-          </div>
-        </StoryCard>
-        <div styleName="stories-wrapper" className="stories-wrapper-ftbss">
-          {items.map((story, index) => (
-            <div
-              styleName={`story-headline-container ${textColor}-headline-container ${getActiveIndexStylename(
-                index === active
-              )}`}
-              onClick={() => updateActiveTab(story, index)}
-              key={story.id}
-              className={`story-headline-container ${getActiveIndexStylename(index === active)}`}>
-              <Headline story={story} premiumStoryIconConfig={config} isLink={false} />
-            </div>
-          ))}
-        </div>
-        <LoadmoreButton
-          template={footerButton}
-          collection={collection}
-          config={config}
-          navigate={() => navigateTo(dispatch, url)}
-          qtConfig={qtConfig}
-        />
-        <div styleName={`${showButton ? "" : "no-button-wrapper"}`}>{footerSlotComp}</div>
-      </div>
-    </div>
-  );
-};
-
-const DefaultStoryCardContent = ({ story, config = {}, borderColor, showSubheadline }) => {
-  const SectionTagborderColor = rgbToHex(borderColor);
-  const { localizationConfig = {} } = config;
-  return (
-    <div>
-      <SectionTag story={story} borderColor={SectionTagborderColor} isLightTheme />
-      <Headline story={story} premiumStoryIconConfig={config} />
-      <AuthorWithTime config={localizationConfig} story={story} isLightTheme />
-      {showSubheadline && (
-        <Link
-          href={getStoryUrl(story, `/${story.slug}`)}
-          externalLink={isExternalStory(story)}
-          aria-label="sub-headline">
-          <Subheadline story={story} />
-        </Link>
-      )}
-    </div>
-  );
-};
-
-export default StateProvider(FourTabbedBigStorySlider);
-
-FourTabbedBigStorySlider.propTypes = {
-  /**  collection is the array of objects which is returning by API  */
-  collection: PropTypes.object.isRequired,
-  /** The config for the Row */
-  config: PropTypes.shape({
-    borderColor: PropTypes.string,
-    theme: PropTypes.string,
-    border: PropTypes.string,
-    footerButton: PropTypes.string,
-    collectionNameTemplate: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string
-  })
-};
-
-DefaultStoryCardContent.propTypes = {
-  story: PropTypes.object.isRequired,
-  config: PropTypes.object,
-  borderColor: PropTypes.string,
-  showSubheadline: PropTypes.bool
-};

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

@@ -1,63 +0,0 @@
-import React from "react";
-import { color, boolean, text } from "@storybook/addon-knobs";
-import {
-  withStore,
-  optionalSelect,
-  sectionTagTemplates,
-  collectionNameTemplates,
-  footerButton
-} from "../../../../storybook";
-import FourTabbedBigStorySlider from "./index";
-import Readme from "./README.md";
-import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
-
-import { generateCollection } from "../../Fixture";
-
-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 footerSlot = () => {
-  return <AdPlaceholder />;
-};
-
-withStore(
-  "Rows/Four Tabbed Big Story Slider ",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-)
-  .addDecorator((story) => <div style={{ maxWidth: "1000px", margin: "auto" }}>{story()}</div>)
-  .add("Default", () => {
-    const contextConfig = {
-      theme: color(label, defaultvalue),
-      showRowTitle: boolean("Row title", true),
-      collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
-      collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
-      sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
-      borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
-      showSection: boolean("section disable", true),
-      showAuthor: boolean("Author disable", true),
-      showTime: boolean("Timestamp disable", true),
-      footerButton: optionalSelect("Footer Button", footerButton),
-      buttonText: text("Footer text", "Read More"),
-      footerSlotConfig: { footerSlot: footerSlot },
-      showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
-      showSubheadline: boolean("Show subheadline", true)
-    };
-
-    return <FourTabbedBigStorySlider collection={collection} config={contextConfig} />;
-  });

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

@@ -1,46 +0,0 @@
-# Full Screen Slider
-
-The _FullScreenSlider_ component is a slider Row which shows 1 story at a time on desktop and mobile.
-
-## Usage
-
-### Import
-
-```jsx
-import { FullScreenSlider } from "@quintype/arrow";
-```
-
-### Setting the Row context
-
-```jsx
-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)
-};
-```
-
-### Use as a component
-
-```jsx
-<FullScreenSlider collection={collection} config={contextConfig} />
-```
-
-<!-- PROPS -->

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

@@ -1,155 +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: unset;
-}
-
-.container-width,
-.container-width :global(.arr--collection-name) {
-  max-width: 1140px;
-  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) {
-  @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 {
-  :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);
-    }
-  }
-}