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

package/src/components/Rows/FourColTwelveStory/four-col-twelve-story.m.css

@@ -0,0 +1,71 @@
+@custom-media --viewport-medium (width >= 992px);
+@custom-media --viewport-tab (width >= 768px);
+
+.columns-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  @media (--viewport-medium) {
+    grid-template-columns: repeat(4, 1fr);
+    grid-column-gap: var(--arrow-spacing-l);
+  }
+
+  :global .arr--story-card {
+    margin-bottom: var(--arrow-spacing-m);
+  }
+}
+
+.small-card-content-container {
+  margin-left: var(--arrow-spacing-xs);
+  @media (--viewport-medium) {
+    margin-left: var(--arrow-spacing-s);
+  }
+}
+
+html[dir="rtl"] {
+  .small-card-content-container {
+    margin-left: 0;
+    margin-right: var(--arrow-spacing-xs);
+    @media (--viewport-medium) {
+      margin-right: var(--arrow-spacing-s);
+    }
+  }
+
+  .arrow-icon {
+    transform: rotate(-180deg);
+  }
+
+  .ltr-icon {
+    display: none;
+  }
+}
+
+.other-news-container {
+  display: flex;
+  align-items: center;
+}
+
+.other-news-text {
+  margin-right: 6px;
+  font-size: var(--arrow-fs-xs);
+  font-weight: bold;
+  color: var(--arrow-c-mono1);
+}
+
+.other-news-link {
+  display: flex;
+  justify-content: flex-end;
+  margin: var(--arrow-spacing-l) 0;
+}
+
+.collection-name-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.other-news-top-container {
+  margin-bottom: var(--arrow-spacing-m);
+  @media (--viewport-tab) {
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}

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

@@ -0,0 +1,176 @@
+import React from "react";
+import PropTypes from "prop-types";
+import get from "lodash.get";
+import { collectionToStories, Link } from "@quintype/components";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { SectionTag } from "../../Atoms/SectionTag";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { Headline } from "../../Atoms/Headline";
+import { getTextColor, getSlug } from "../../../utils/utils";
+import { StateProvider } from "../../SharedContext";
+import { StoryCard } from "../../Molecules/StoryCard/index";
+import "./four-col-twelve-story.m.css";
+
+function OtherNewsLinkComp({ slug, textColor, Icon, text }) {
+  return (
+    <Link href={slug} aria-label="arrow-icon">
+      <div styleName="other-news-container">
+        <div
+          styleName="other-news-text"
+          style={{
+            color: textColor
+          }}>
+          {text}
+        </div>
+        <div styleName="arrow-icon">
+          <Icon />
+        </div>
+      </div>
+    </Link>
+  );
+}
+const SingleCol3Story = ({ collection, border, collectionNameTemplate, otherTextData, slug, theme, config = {} }) => {
+  const items = collectionToStories(collection);
+  if (items.length < 1) {
+    return null;
+  }
+  const [firstStory, ...rest] = items || [];
+  let text;
+  let Icon;
+  let textColor;
+  let contentPosition = "top";
+  const { localizationConfig = {} } = config;
+
+  if (otherTextData) {
+    text = otherTextData.text;
+    Icon = otherTextData.Icon;
+    textColor = otherTextData.textColor;
+    contentPosition = otherTextData.contentPosition || contentPosition;
+  }
+
+  return (
+    <div>
+      <div styleName="collection-name-container">
+        <CollectionName collection={collection} headerLevel="4" collectionNameTemplate={collectionNameTemplate} />
+        {contentPosition === "top" && text && Icon && (
+          <div styleName="other-news-top-container">
+            <OtherNewsLinkComp textColor={textColor} Icon={Icon} slug={slug} text={text} />
+          </div>
+        )}
+      </div>
+      <div className="first-card">
+        <StoryCard story={firstStory} border={border} theme={theme} config={config}>
+          <HeroImage story={firstStory} aspectRatio={[[16, 9], [16, 9]]} />
+          <SectionTag story={firstStory} />
+          <Headline story={firstStory} headerLevel="4" premiumStoryIconConfig={config} />
+          <AuthorWithTime config={localizationConfig} story={firstStory} />
+        </StoryCard>
+      </div>
+
+      <div className="second-card">
+        {rest.slice(0, 2).map((story, index) => {
+          return (
+            <StoryCard key={index} story={story} isHorizontal theme={theme} border={border}>
+              <HeroImage story={story} aspectRatio={[[4, 3], [4, 3]]} />
+              <div styleName="small-card-content-container" className="small-card-container">
+                <Headline story={story} premiumStoryIconConfig={config} />
+                <AuthorWithTime config={localizationConfig} story={story} />
+              </div>
+            </StoryCard>
+          );
+        })}
+      </div>
+      {contentPosition === "bottom" && text && Icon && (
+        <div styleName="other-news-link">
+          <OtherNewsLinkComp textColor={textColor} Icon={Icon} slug={slug} text={text} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const FourColTwelveStory = ({ collection = {}, publisherConfig = {}, config = {}, otherTextData }) => {
+  const { theme = "", border = "", footerSlotConfig = {}, collectionNameTemplate = "" } = config;
+  const { footerSlot } = footerSlotConfig;
+  const footerSlotComp = footerSlot ? footerSlot() : null;
+
+  const getFilteredCollection = get(collection, ["items"], []).filter(
+    (collections) => collections.type === "collection"
+  );
+
+  // if number of collection is less than 4 return null
+  if (getFilteredCollection.length < 4) return null;
+
+  const textColor = getTextColor(theme);
+
+  return (
+    <div
+      className="full-width-with-padding arrow-component"
+      data-test-id="four-col-twelve-stories"
+      style={{ backgroundColor: theme, color: textColor }}>
+      <div styleName="columns-container">
+        {getFilteredCollection.slice(0, 4).map((collection, index) => {
+          const slugName = getSlug(collection, publisherConfig);
+          return (
+            <SingleCol3Story
+              border={border}
+              collection={collection}
+              collectionNameTemplate={collectionNameTemplate}
+              key={index}
+              slug={slugName}
+              otherTextData={otherTextData}
+              theme={theme}
+            />
+          );
+        })}
+      </div>
+      {footerSlotComp}
+    </div>
+  );
+};
+
+FourColTwelveStory.propTypes = {
+  collection: PropTypes.object.isRequired,
+  publisherConfig: PropTypes.object,
+  otherTextData: PropTypes.shape({
+    text: PropTypes.string,
+    Icon: PropTypes.func,
+    textColor: PropTypes.string
+  }),
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    border: PropTypes.string,
+    showSection: PropTypes.bool,
+    showSubheadline: PropTypes.bool,
+    showAuthor: PropTypes.bool,
+    showTime: PropTypes.bool,
+    showRowTitle: PropTypes.bool,
+    collectionNameTemplate: PropTypes.string
+  })
+};
+
+SingleCol3Story.propTypes = {
+  collection: PropTypes.object.isRequired,
+  border: PropTypes.string,
+  collectionNameTemplate: PropTypes.string,
+  slug: PropTypes.string,
+  theme: PropTypes.string,
+  otherTextData: PropTypes.shape({
+    text: PropTypes.string,
+    Icon: PropTypes.func,
+    textColor: PropTypes.string,
+    // can be either 'top' or 'bottom'
+    contentPosition: PropTypes.string
+  }),
+  config: PropTypes.object
+};
+
+OtherNewsLinkComp.propTypes = {
+  slug: PropTypes.string,
+  textColor: PropTypes.string,
+  Icon: PropTypes.func,
+  text: PropTypes.string
+};
+
+export default StateProvider(FourColTwelveStory);

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

@@ -0,0 +1,117 @@
+import React from "react";
+import { color, boolean } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, collectionNameTemplates } from "../../../../storybook";
+import FourColTwelveStory from "./index";
+import Readme from "././README.md";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import Carat from "../../Svgs/caret-right.svg";
+
+import { generateCollections } from "../../Fixture";
+
+const collection = generateCollections(4);
+
+const label = "color";
+const defaultvalue = "#ffffff";
+
+const borderOptions = {
+  "No Value": "",
+  bottom: "bottom"
+};
+
+const otherTextPositionOptions = {
+  top: "top",
+  bottom: "bottom"
+};
+
+const footerSlot = () => {
+  return <AdPlaceholder />;
+};
+
+const IconComp = (_) => (
+  <img
+    src={Carat}
+    style={{
+      width: "18px"
+    }}
+    alt="caret"
+  />
+);
+
+withStore(
+  "Rows/Four Col 12 Stories",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        sections: [
+          {
+            "domain-slug": null,
+            slug: "collection-slug",
+            name: "Health",
+            "section-url": "https://ace-web.qtstage.io/collection-slug",
+            id: 11181,
+            "parent-id": null,
+            "display-name": "Health",
+            collection: {
+              slug: "health",
+              name: "Health",
+              id: 15603
+            },
+            data: null
+          }
+        ]
+      }
+    }
+  },
+  Readme
+)
+  .addDecorator((story) => <div style={{ maxWidth: "1000px", margin: "auto" }}>{story()}</div>)
+  .add("Default", () => {
+    const otherTextData = {
+      text: "hello",
+      textColor: color(" text color", "#345678"),
+      contentPosition: optionalSelect("Other text Position", otherTextPositionOptions),
+      Icon: IconComp
+    };
+
+    const publisherConfig = {
+      sections: [
+        {
+          "domain-slug": null,
+          slug: "collection-slug",
+          name: "Health",
+          "section-url": "https://ace-web.qtstage.io/collection-slug",
+          id: 11181,
+          "parent-id": null,
+          "display-name": "Health",
+          collection: {
+            slug: "health",
+            name: "Health",
+            id: 15603
+          },
+          data: null
+        }
+      ]
+    };
+
+    const contextConfig = {
+      theme: color(label, defaultvalue),
+      border: optionalSelect("Border Level", borderOptions),
+      footerSlotConfig: { footerSlot: footerSlot },
+      showSection: boolean("Section disable", true),
+      showAuthor: boolean("Author disable", true),
+      showTime: boolean("Timestamp disable", true),
+      showRowTitle: boolean("Row title", true),
+      collectionNameTemplate: optionalSelect("Collection row Templates", collectionNameTemplates),
+      showSubheadline: boolean("Subheadline", true),
+      showReadTime: boolean("Read time", true)
+    };
+    return (
+      <FourColTwelveStory
+        collection={collection}
+        config={contextConfig}
+        otherTextData={otherTextData}
+        publisherConfig={publisherConfig}
+      />
+    );
+  });

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

@@ -0,0 +1,45 @@
+# Four Story Slider
+
+The _FourStorySlider_ component is a slider Row which shows 4 stories at a time on the Desktop and 1 at a time on mobile.
+
+## Usage
+
+### Import
+
+```jsx
+import { FourStorySlider } 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),
+  collectionNameTemplate: optionalSelect("Collection Name 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),
+  footerButton: optionalSelect("Footer Button", footerButton),
+  buttonText: text("Footer text", "Read More"),
+  numberOfStoriesToShow: number("Number of slide to show", 10),
+  navigationArrows: boolean("Arrows enable", true),
+  isInfinite: boolean("Autoplay", false),
+  slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
+  footerSlotConfig: { footerSlot: footerSlot },
+  showButton: boolean("Show button", true),
+  showReadTime: boolean("Read time", true)
+};
+```
+
+### Use as a component
+
+```jsx
+<FourStorySlider collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

package/src/components/Rows/FourStorySlider/four-story-slider.m.css

@@ -0,0 +1,45 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.four-story-slider-wrapper {
+  padding: 0 var(--arrow-spacing-s);
+  @media (--viewport-medium) {
+    padding: 0;
+  }
+  .story-grid {
+    :global .arr--story-card {
+      margin-bottom: var(--arrow-fs-xs);
+    }
+  }
+
+  @media (--viewport-medium) {
+    .story-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-gap: var(--arrow-fs-xs);
+    }
+  }
+
+  @media (--viewport-medium) {
+    :global .scroll-snap-carousel {
+      > div {
+        width: 33%;
+        margin: 0 1%;
+      }
+    }
+
+    :global .scroll-snap-carousel:nth-child(1) {
+      > div {
+        margin-left: 0;
+      }
+    }
+  }
+
+  @media (min-width: 992px) {
+    :global .scroll-snap-carousel {
+      > div {
+        width: 24%;
+        margin: 0 2%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import get from "lodash/get";
+import { collectionToStories } from "@quintype/components";
+
+import { CollectionName } from "../../Atoms/CollectionName";
+import { StateProvider } from "../../SharedContext";
+import { getTextColor, getNumberOfStoriesToShow, navigateTo, generateNavigateSlug } from "../../../utils/utils";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import PropTypes from "prop-types";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { ScrollSnap } from "../../Atoms/ScrollSnap";
+
+import "./four-story-slider.m.css";
+
+const FourStorySlider = ({ collection, config = {} }) => {
+  const {
+    collectionNameBorderColor = "",
+    borderColor = "",
+    theme = "",
+    border = "",
+    collectionNameTemplate = "",
+    numberOfStoriesToShow = 0,
+    footerButton = "",
+    footerSlotConfig = {},
+    navigationArrows = true,
+    slideIndicator = "none",
+    isInfinite = false
+  } = config;
+  const { footerSlot } = footerSlotConfig;
+  const items = collectionToStories(collection);
+  if (items.length < 1) {
+    return null;
+  }
+
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const url = generateNavigateSlug(collection, qtConfig);
+  const [perView, setPerView] = useState(1);
+
+  const showNumberOfStoriesToShow = getNumberOfStoriesToShow(numberOfStoriesToShow);
+  const textColor = getTextColor(theme);
+  const footerSlotComp = footerSlot ? footerSlot() : null;
+
+  useEffect(() => {
+    const deviceWidth = get(global, ["innerWidth"], 480);
+    if (deviceWidth > 992) setPerView(4);
+    else if (deviceWidth > 764) setPerView(3);
+    else setPerView(1);
+  }, []);
+
+  const getItems = () => {
+    return items.slice(0, showNumberOfStoriesToShow).map((story, index) => {
+      return (
+        <StoryCard story={story} theme={theme} border={border} key={index} config={config}>
+          <HeroImage story={story} aspectRatio={[[16, 9]]} />
+          <StorycardContent story={story} border={border} borderColor={borderColor} config={config} />
+        </StoryCard>
+      );
+    });
+  };
+
+  return (
+    <div
+      className="full-width-with-padding arrow-component"
+      data-test-id="four-story-slider"
+      style={{ backgroundColor: theme, color: textColor }}>
+      <div styleName="four-story-slider-wrapper">
+        <CollectionName
+          collection={collection}
+          collectionNameTemplate={collectionNameTemplate}
+          collectionNameBorderColor={collectionNameBorderColor}
+        />
+        {items.length > 4 ? (
+          <ScrollSnap
+            isArrow={navigationArrows}
+            perView={perView}
+            slideIndicator={slideIndicator}
+            isInfinite={isInfinite}>
+            {getItems()}
+          </ScrollSnap>
+        ) : (
+          <div styleName="story-grid">{getItems()}</div>
+        )}
+        <LoadmoreButton
+          collection={collection}
+          template={footerButton}
+          config={config}
+          navigate={() => navigateTo(dispatch, url)}
+          qtConfig={qtConfig}
+        />
+        {footerSlotComp}
+      </div>
+    </div>
+  );
+};
+
+FourStorySlider.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,
+    //   background color of the row
+    theme: PropTypes.string,
+    border: PropTypes.string,
+    footerButton: PropTypes.string,
+    // configure ad slot widget and story
+    collectionNameTemplate: PropTypes.string,
+    autoplaySpeed: PropTypes.number,
+    // speed of the slider(ms)
+    numberOfStoriesToShow: PropTypes.number,
+    // no of slides in slider
+    collectionNameBorderColor: PropTypes.string
+  })
+};
+
+FourStorySlider.defaultProps = {
+  theme: "#ffffff",
+  slotConfig: "story",
+  border: ""
+};
+
+export default StateProvider(FourStorySlider);

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

@@ -0,0 +1,117 @@
+import React from "react";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates } from "../../../../storybook";
+import FourStorySlider from "./index";
+import { generateCollection } from "../../Fixture/";
+import { color, boolean, text, number } from "@storybook/addon-knobs";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import Readme from "./README.md";
+
+const collection = generateCollection({ stories: 13 });
+
+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 borderTemplate = {
+  default: " ",
+  border: "full"
+};
+const footerButton = {
+  NavigateToPage: "NavigateToPage",
+  SubsequentLoadCount: "SubsequentLoadCount"
+};
+const footerSlot = () => {
+  return <AdPlaceholder />;
+};
+
+withStore(
+  "Rows/Four Story Slider ",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        language: {
+          direction: "ltr"
+        }
+      }
+    }
+  },
+  Readme
+)
+  .addDecorator((story) => <div style={{ maxWidth: "1172px", margin: "auto" }}>{story()}</div>)
+  .add("Default", () => {
+    const contextConfig = {
+      collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+      borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+      theme: color(label, defaultvalue),
+      border: optionalSelect("Border", borderTemplate),
+      collectionNameTemplate: optionalSelect("Collection Name 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),
+      footerButton: optionalSelect("Footer Button", footerButton),
+      buttonText: text("Footer text", "Read More"),
+      numberOfStoriesToShow: number("Number of slide to show", 10),
+      navigationArrows: boolean("Arrows enable", true),
+      isInfinite: boolean("Autoplay", false),
+      slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
+      footerSlotConfig: { footerSlot: footerSlot },
+      showButton: boolean("Show button", true),
+      showReadTime: boolean("Read time", true)
+    };
+
+    return <FourStorySlider collection={collection} config={contextConfig} />;
+  });
+
+withStore(
+  "Rows/Four Story 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),
+      border: optionalSelect("Border", borderTemplate),
+      collectionNameTemplate: optionalSelect("Collection Name 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),
+      footerButton: optionalSelect("Footer Button", footerButton),
+      buttonText: text("Footer text", "Read More"),
+      numberOfStoriesToShow: number("Number of slide to show", 10),
+      navigationArrows: boolean("Arrows enable", true),
+      isInfinite: boolean("Autoplay", false),
+      slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
+      footerSlotConfig: { footerSlot: footerSlot },
+      showButton: boolean("Show button", true),
+      showReadTime: boolean("Read time", true)
+    };
+
+    return <FourStorySlider collection={collection} config={contextConfig} />;
+  });