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

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { color, boolean, text } from "@storybook/addon-knobs";
+import {
+  withStore,
+  optionalSelect,
+  sectionTagTemplates,
+  collectionNameTemplates,
+  footerButton
+} from "../../../../storybook";
+import AlternateCollectionFilter from "./index";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import Readme from "./README.md";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+
+import { generateCollections, generateCollection } from "../../Fixture";
+
+const mock = new MockAdapter(axios);
+
+const API_REQUEST = new RegExp(`/api/v1/collections/*`);
+
+const nestedCollection = generateCollection({ stories: 10 });
+
+const collection = generateCollections(15); // will have to reduce this number post testing
+
+const defaultvalue = "#ffffff";
+const collectionNameDefaultValue = "#3a9fdd";
+const sectionTagDefaultvalue = "#3a9fdd";
+
+const borderTemplate = {
+  default: "",
+  border: "full"
+};
+
+const footerSlot = () => {
+  return <AdPlaceholder />;
+};
+
+withStore(
+  "Rows/Alternate Collection Filter",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+)
+  .addDecorator((story) => <div style={{ maxWidth: "1000px", margin: "auto" }}>{story()}</div>)
+  .add("Default", () => {
+    const contextConfig = {
+      collectionNameBorderColor: color("Collection Name Border Color", collectionNameDefaultValue),
+      borderColor: color("Section Tag Border Color", sectionTagDefaultvalue),
+      theme: color("color", 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),
+      showTime: boolean("Timestamp disable", true),
+      showRowTitle: boolean("Row title", 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)
+    };
+
+    mock.onGet(API_REQUEST).reply(200, nestedCollection);
+
+    return <AlternateCollectionFilter collection={collection} config={contextConfig} />;
+  });

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

@@ -0,0 +1,27 @@
+### Aside Collection
+
+Aside collection is a template which is used to represent a collection of stories or an array of stories.
+
+It also accepts stories from a custom collection if a collection slug is passed.
+
+By default it'll render stories from related stories API.
+
+## Usage
+
+## To pass a collection with default collection name
+
+```jsx
+<AsideCollection data={collection} config={config} />
+```
+
+## To pass stories with customisable heading and horizontal style
+
+```jsx
+<AsideCollection data={stories} config={config} horizontal={true} />
+```
+
+## To make aside's last child sticky in tablet and desktop
+
+```jsx
+<AsideCollection data={stories} config={config} sticky={true} horizontal={false} />
+```

package/src/components/Rows/AsideCollection/aside-collection.m.css

@@ -0,0 +1,125 @@
+@import "../../../../assets/stylesheets/mixins.scss";
+
+.stories {
+  margin-top: var(--arrow-spacing-m);
+}
+.wrapper :global(.arr--collection-name) {
+  margin-bottom: var(--arrow-spacing-m);
+}
+.story {
+  display: flex;
+  margin-bottom: var(--arrow-spacing-m);
+}
+
+.story-hero-image {
+  margin-right: var(--arrow-spacing-xs);
+}
+
+.story-byline {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: var(--arrow-spacing-xs);
+}
+
+.info {
+  text-align: center;
+}
+
+.wrapper h3 {
+  font-size: var(--arrow-fs-m);
+}
+
+.ad-slot {
+  padding: var(--arrow-spacing-l) 0;
+  @include tablet {
+    padding: var(--arrow-spacing-xl) 0;
+  }
+}
+
+.story :global(.arr--story-card) {
+  width: 100%;
+}
+
+.horizontal-wrapper {
+  .stories {
+    @include tablet {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-gap: var(--arrow-spacing-l);
+    }
+  }
+
+  :global .arr--story-card {
+    @include tablet {
+      flex-direction: column;
+    }
+  }
+
+  .story-hero-image {
+    @include tablet {
+      min-width: 100%;
+      margin-bottom: 8px;
+      margin-right: var(--arrow-spacing-xs);
+    }
+  }
+
+  .story-byline {
+    @include tablet {
+      margin-top: 0;
+    }
+  }
+
+  .story {
+    @include tablet {
+      display: block;
+    }
+  }
+}
+
+html[dir="rtl"] {
+  .story-hero-image {
+    margin-right: 0;
+    margin-left: var(--arrow-spacing-xs);
+  }
+}
+
+.wrapper {
+  @include tablet {
+    height: 100%;
+  }
+}
+
+.sticky > :last-child {
+  @include tablet {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 125px;
+    margin-bottom: 64px;
+  }
+}
+
+.sticky.top-header-six > :last-child {
+  @include tablet {
+    top: 135px;
+    @include desktop {
+      top: 155px;
+    }
+  }
+}
+
+.sticky.top-header-five > :last-child {
+  @include tablet {
+    top: 55px;
+    @include desktop {
+      top: 120px;
+    }
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/src/components/Rows/AsideCollection/aside-collection.test.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { mount, shallow } from "enzyme";
+import AsideCollection from ".";
+import { generateCollection, generateStore, generateStory } from "../../Fixture";
+import { Provider } from "react-redux";
+
+const collection = generateCollection();
+const story = generateStory();
+const stories = [story, story, story];
+
+describe("Aside collection component", () => {
+  it("Should render default template with collection", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AsideCollection data={collection} />
+        );
+      </Provider>
+    );
+    expect(wrapper.find(AsideCollection)).toHaveLength(1);
+  });
+  it("Should render template with array of stories", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AsideCollection data={stories} />
+        );
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "aside-collection" }).prop("className")).toMatch(/aside-collection/);
+  });
+  it("Should render `no stories message` if there are no stories", () => {
+    const wrapper = shallow(<AsideCollection />);
+    expect(wrapper.find(AsideCollection)).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,247 @@
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { getCollectionData, getTextColor } from "../../../utils/utils";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { Headline } from "../../Atoms/Headline";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { SectionTag } from "../../Atoms/SectionTag";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { StateProvider } from "../../SharedContext";
+import KeyEvents from "../../Molecules/KeyEvents";
+import "./aside-collection.m.css";
+import { relatedStoriesWidths, relatedStoriesImgSize } from "../../../utils/img-size-utils";
+
+const StoryCollection = ({ data, slotData, horizontal, config, opts, loadRelatedStories = null, story }) => {
+  const { title = "", collectionSlug = "" } = slotData || config;
+  const { theme = "" } = config;
+  const heading = title || "Related Stories";
+  const isHorizontal = horizontal ? "horizontal-wrapper" : "";
+  const { enableSectionTag = true, enableAuthorWithTime = true } = opts || {};
+  const mountAtPrefix = get(config, ["mountAtPrefix"], get(config, ["sketches-host"]));
+  const [storyList, updateStoryList] = useState([]);
+  const [collectionData, updateCollectionData] = useState([]);
+
+  const pbRowsConfig = useSelector((state) =>
+    get(state, ["qt", "config", "pagebuilder-config", "general", "rows"], {})
+  );
+
+  const enableDarkModePreview = useSelector((state) =>
+    get(state, ["qt", "config", "pagebuilder-config", "enableDarkModePreview"], false)
+  );
+
+  const premiumStoryIconConfig = get(pbRowsConfig, ["premiumStoryIcon"], {});
+
+  const updateStoryListItems = async (slug) => {
+    const collectionDataResponse = await getCollectionData(slug, mountAtPrefix);
+    updateCollectionData(collectionDataResponse);
+    const storyItems = collectionDataResponse.items;
+    updateStoryList(storyItems);
+  };
+
+  useEffect(() => {
+    if (collectionSlug) {
+      updateStoryListItems(collectionSlug);
+    }
+  }, [collectionSlug]);
+
+  useEffect(() => {
+    if (!collectionSlug) {
+      if (!data && loadRelatedStories) {
+        loadRelatedStories(story, mountAtPrefix).then((response) => {
+          updateStoryList(response?.relatedStories);
+        });
+      } else if (data) {
+        const storyItems = data.items || data;
+        updateStoryList(storyItems);
+      } else {
+        updateStoryList([]);
+      }
+    }
+  }, [data, collectionSlug]);
+
+  const textColor = getTextColor(theme);
+
+  if (horizontal && !storyList?.length) return null;
+
+  return (
+    <>
+      <CollectionName customCollectionName={heading} textColor collection={collectionData} />
+      <div styleName="stories">
+        {storyList?.length ? (
+          storyList.slice(0, 4).map((item) => {
+            const story = item?.story || item;
+            return (
+              <div className="aside-story" styleName="story" key={story.id}>
+                <StoryCard story={story} isHorizontal theme={theme} config={config}>
+                  <div className="aside-hero-image" styleName="story-hero-image">
+                    <HeroImage
+                      widths={relatedStoriesWidths}
+                      sizes={relatedStoriesImgSize}
+                      story={story}
+                      aspectRatio={[[16, 9]]}
+                      queryParam={{ utm_source: "website", utm_medium: "related-stories" }}
+                      initialAltImage={true}
+                    />
+                  </div>
+                  <div>
+                    {isHorizontal && enableSectionTag && <SectionTag story={story} />}
+                    <Headline
+                      story={story}
+                      premiumStoryIconConfig={premiumStoryIconConfig}
+                      enableDarkModePreview={enableDarkModePreview}
+                      queryParam={{ utm_source: "website", utm_medium: "related-stories" }}
+                    />
+                    {enableAuthorWithTime && (
+                      <div styleName="story-byline">
+                        <AuthorWithTime config={{ ...opts, isRelatedCollection: true }} story={story} />
+                      </div>
+                    )}
+                  </div>
+                </StoryCard>
+              </div>
+            );
+          })
+        ) : (
+          <div data-test-id="no-stories" styleName={`info ${textColor}`}>
+            No stories found.
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+StoryCollection.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  config: PropTypes.object,
+  horizontal: PropTypes.bool,
+  slotData: PropTypes.object,
+  opts: PropTypes.object,
+  loadRelatedStories: PropTypes.func,
+  story: PropTypes.object
+};
+
+// memoized below AsideCollection to avoid widget and Ad re-renderings
+const AsideCollection = React.memo(
+  ({
+    data = {},
+    config = {},
+    horizontal = false,
+    slots = [],
+    sticky = false,
+    keyEventsData = {},
+    enableKeyEvents = false,
+    adComponent,
+    widgetComp,
+    opts = {},
+    loadRelatedStories,
+    story
+  }) => {
+    const { theme, stickyTopStyle } = config;
+    const isHorizontal = horizontal ? "horizontal-wrapper" : "";
+    if (horizontal) {
+      return (
+        <div
+          className="arrow-component arr--aside-collection"
+          styleName={`wrapper ${isHorizontal}`}
+          style={{ backgroundColor: theme || "initial" }}
+          data-test-id="aside-collection"
+          data-nosnippet
+          id={`aside-collection-${story?.id}`}>
+          <StoryCollection
+            data={data}
+            horizontal={horizontal}
+            config={config}
+            opts={opts}
+            theme1={theme}
+            loadRelatedStories={loadRelatedStories}
+            story={story}
+          />
+        </div>
+      );
+    }
+    const isSticky = sticky ? "sticky" : "";
+    const asideSlot = (type, slot, index) => {
+      const targetId = slot?.targetId ? `widget-${slot.targetId}-${story?.id}` : `widget-${index}_${story?.id}`;
+      switch (type) {
+        case "ad":
+          return (
+            <div styleName="ad-slot" className="aside-collection-ad-slot">
+              {adComponent({ ...slot, id: `ad-${index}_${story?.id}` })}
+            </div>
+          );
+        case "widget": {
+          const { placeholderHeight: widgetHeightMobile = "", widgetHeightDesktop = "" } = get(slot, ["aheadNext"], {});
+          return (
+            <div styleName="ad-slot" className="aside-collection-ad-slot">
+              {widgetComp({
+                ...slot,
+                id: targetId,
+                widgetHeightMobile: widgetHeightMobile,
+                widgetHeightDesktop: widgetHeightDesktop
+              })}
+            </div>
+          );
+        }
+        case "collection":
+          return (
+            <div id={`aside-collection-${index}_${story?.id}`}>
+              <StoryCollection
+                slotData={slot}
+                data={data}
+                horizontal={horizontal}
+                config={config}
+                opts={opts}
+                loadRelatedStories={loadRelatedStories}
+                story={story}
+              />
+            </div>
+          );
+      }
+    };
+
+    return (
+      <div
+        className="arrow-component arr--aside-collection"
+        styleName={["wrapper", isHorizontal, isSticky, stickyTopStyle].join(" ")}
+        style={{ backgroundColor: theme || "initial" }}
+        data-nosnippet
+        data-test-id="aside-collection">
+        {enableKeyEvents && (
+          <KeyEvents
+            story={keyEventsData.story}
+            showLoadMore={keyEventsData.showLoadMore}
+            config={keyEventsData.config}
+            publishedDetails={opts}
+          />
+        )}
+        {slots.map((slot, index) => asideSlot(slot.type, slot, index))}
+      </div>
+    );
+  }
+);
+
+AsideCollection.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  config: PropTypes.object,
+  opts: PropTypes.object,
+  horizontal: PropTypes.bool,
+  slots: PropTypes.array,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  sticky: PropTypes.bool,
+  story: PropTypes.object,
+  keyEventsData: PropTypes.shape({
+    story: PropTypes.object,
+    config: PropTypes.object,
+    showLoadMore: PropTypes.boolean
+  }),
+  enableKeyEvents: PropTypes.boolean,
+  loadRelatedStories: PropTypes.func
+};
+
+export default StateProvider(AsideCollection);
+export { StoryCollection };

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

@@ -0,0 +1,52 @@
+import { boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import AsideCollection from ".";
+import { collectionNameTemplates, optionalSelect, withStore } from "../../../../storybook";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import { generateStory } from "../../Fixture";
+import { slotData } from "../../Fixture/slot-config";
+import Readme from "./README.md";
+
+const story = generateStory();
+const stories = [story, story, story];
+const label = "Background color";
+const defaultvalue = "#ffffff";
+const collectionNameDefaultValue = "#3a9fdd";
+const collectionNameBorderColorLabel = "Collection Name Border Color";
+
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+withStore(
+  "Rows/Aside Collection",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+).add("Aside Collection template", () => {
+  const config = {
+    title: text("Title", "Recommended Stories"),
+    theme: color(label, defaultvalue),
+    showAuthor: boolean("Author", true),
+    showTime: boolean("Timestamp", true),
+    showReadTime: boolean("Read time", true),
+    showRowTitle: boolean("Collection name", true),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue)
+  };
+  return (
+    <AsideCollection
+      data={stories}
+      config={config}
+      adComp={configurableSlot}
+      widgetComp={configurableSlot}
+      slots={slotData}
+      sticky={true}
+    />
+  );
+});

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

@@ -0,0 +1,40 @@
+# Astrology Collection Filter
+
+The _AstrologyCollection_ component is a collection of collections in a tabbed interface.
+
+## Usage
+
+### Import
+
+```jsx
+import { AstrologyCollection } from "@quintype/arrow";
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+  collectionNameBorderColor: color("Collection Name Border Color", collectionNameDefaultValue),
+  borderColor: color("Section Tag Border Color", sectionTagDefaultvalue),
+  theme: color("color", defaultvalue),
+  border: optionalSelect("Border", borderTemplate),
+  collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+  showRowTitle: boolean("Row title", true),
+  footerButton: optionalSelect("Footer Button", footerButton),
+  buttonText: text("Footer text", "Read More"),
+  showButton: boolean("Show button", true),
+  slotConfig: [
+    {
+      type: "ad",
+      component: () => <CustomAdOrWidget />
+    }
+  ]
+};
+```
+
+### Use as a component
+
+```jsx
+<AstrologyCollection collection={collection} config={contextConfig} />
+```
+