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

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

@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import PropTypes from "prop-types";
+import get from "lodash.get";
+import { collectionToStories } from "@quintype/components";
+
+import { CollectionName } from "../../Atoms/CollectionName";
+import { getTextColor } from "../../../utils/utils";
+import { StateProvider } from "../../SharedContext";
+import { Loading } from "../../Svgs/Loading/loading";
+import { Headline } from "../../Atoms/Headline";
+
+import "./listicles.m.css";
+
+const Listicles = ({ collection, config = {} }) => {
+  const [subCollectionStories, handleApiData] = useState([]);
+  const [cachedStories, updateCachedStories] = useState({});
+  const [active, handleActive] = useState(0);
+  const [loading, handleLoading] = useState(true);
+
+  const memoizeStories = (id, data) => {
+    updateCachedStories((cachedStories) => ({ ...cachedStories, [id]: data }));
+  };
+
+  async function fetchSubCollectionData(id = filteredCollectionids[0]) {
+    handleLoading(true);
+    try {
+      let data = {};
+      if (!(id in cachedStories)) {
+        let res = await axios.get(`/api/v1/collections/${id}?limit=9`);
+        data = res.data;
+      } else data = cachedStories[id];
+      memoizeStories(id, data);
+
+      const childCollectionItems = collectionToStories(data);
+      handleLoading(false);
+      handleApiData(childCollectionItems);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("API call failed", error);
+    }
+  }
+
+  useEffect((id) => {
+    fetchSubCollectionData(id);
+  }, []);
+
+  const getFilteredCollection = get(collection, ["items"], []).filter(
+    (collections) => collections.type === "collection"
+  );
+
+  if (getFilteredCollection.length < 1) {
+    return null;
+  }
+
+  const {
+    collectionNameBorderColor = "",
+    theme = "",
+    collectionNameTemplate = "",
+    slotConfig = null,
+    localizedNumbers = null
+  } = config;
+
+  const filteredCollectionids = getFilteredCollection.map((subCol) => subCol.id);
+
+  const items = subCollectionStories.slice(0, 9);
+  const textColor = getTextColor(theme);
+
+  const openChildCollectionItems = (event, index, slug) => {
+    event.stopPropagation();
+    fetchSubCollectionData(slug);
+    let activeIndex = active === index ? 0 : index;
+    handleActive(activeIndex);
+  };
+
+  const getCustomStyleName = textColor === "light" ? "light-wrapper" : "";
+
+  const generateOpinions = () => {
+    if (slotConfig) {
+      return (
+        <div styleName="six-opinions-container">
+          {getOpinions(6)}
+          <div>{slotConfig()}</div>
+        </div>
+      );
+    }
+
+    return getOpinions();
+  };
+
+  const getOpinions = (numberOfStories = 9) => {
+    return (
+      <div styleName="opinions-wrapper">
+        {items.slice(0, numberOfStories).map((story, index) => (
+          <div styleName="opinion-wrapper" key={index}>
+            {localizedNumbers && localizedNumbers.length > 0 ? (
+              <div styleName="opinion-counter">{localizedNumbers[index]}</div>
+            ) : (
+              <div styleName="opinion-counter">{index + 1}</div>
+            )}
+            <Headline story={story} />
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className="full-width-with-padding arrow-component"
+      data-test-id="collection-filter"
+      style={{ backgroundColor: theme || "initial" }}>
+      <div styleName={`wrapper ${getCustomStyleName}`}>
+        <CollectionName
+          collection={collection}
+          collectionNameTemplate={collectionNameTemplate}
+          collectionNameBorderColor={collectionNameBorderColor}
+        />
+        <div styleName="child-collections" className="child-collections">
+          {getFilteredCollection.map((subCollections, index) => {
+            return (
+              <div
+                key={index}
+                className={index === active ? "open-subchild" : ""}
+                styleName={`child-collection-wrapper ${index === active ? "open-subchild" : ""}`}>
+                <div
+                  styleName={`child-collection ${textColor}`}
+                  onClick={(event) => openChildCollectionItems(event, index, subCollections.id)}>
+                  {subCollections.name}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div>{loading ? <Loading /> : generateOpinions()}</div>
+      </div>
+    </div>
+  );
+};
+
+export default StateProvider(Listicles);
+
+Listicles.propTypes = {
+  /**  collection is the array of objects which is returning by API  */
+  collection: PropTypes.object.isRequired,
+  /** The config for the Row */
+  config: PropTypes.shape({
+    //   background color of the row
+    theme: PropTypes.string,
+    // configure ad slot widget and story
+    slotConfig: PropTypes.func,
+    collectionNameTemplate: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string
+  })
+};
+
+Listicles.defaultProps = {
+  theme: "#ffffff",
+  slotConfig: "story",
+  border: ""
+};

package/src/components/Rows/Listicles/listicles.m.css

@@ -0,0 +1,149 @@
+@custom-media --viewport-medium (width >= 768px);
+@custom-media --viewport-desktop (width > 1024px);
+
+.wrapper {
+  padding: 0 var(--arrow-spacing-s);
+  margin-bottom: var(--arrow-spacing-m);
+
+  @media (--viewport-medium) {
+    padding: unset;
+  }
+}
+
+.child-collections {
+  display: flex;
+  font-size: var(--arrow-fs-xs);
+  margin-bottom: var(--arrow-spacing-l);
+  scroll-snap-type: x mandatory;
+  overflow: scroll;
+  scrollbar-width: none;
+  border-bottom: 1px solid var(--dark-border);
+}
+
+.child-collections::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.child-collection.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.child-collection.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.child-collection {
+  margin: 0 var(--arrow-spacing-s) var(--arrow-spacing-s);
+  cursor: pointer;
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+}
+
+.child-collection-wrapper {
+  display: flex;
+  scroll-snap-align: start;
+}
+
+.child-collection.dark:hover,
+.open-subchild > .child-collection.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.child-collection.light:hover,
+.open-subchild > .child-collection.light {
+  color: var(--arrow-c-invert-mono1);
+}
+
+.open-subchild {
+  border-bottom: var(--arrow-spacing-xxs) solid var(--arrow-c-brand1);
+}
+
+.opinion-counter {
+  font-size: var(--arrow-fs-huge);
+  color: var(--arrow-c-mono5);
+  margin-right: var(--arrow-spacing-l);
+  position: relative;
+  top: -2px;
+}
+
+.light-wrapper {
+  :global {
+    .arr--collection-name h3,
+    .arr--headline h6 {
+      color: var(--arrow-c-invert-mono1);
+    }
+  }
+
+  .opinion-counter {
+    color: var(--arrow-c-invert-mono4);
+  }
+
+  .child-collections {
+    border-bottom: 1px solid var(--light-border);
+  }
+}
+
+html[dir="rtl"] {
+  .opinion-counter {
+    margin-left: var(--arrow-spacing-l);
+    margin-right: 0;
+  }
+}
+
+.opinions-wrapper {
+  display: grid;
+  grid-column-gap: var(--arrow-spacing-s);
+  grid-row-gap: var(--arrow-spacing-l);
+  margin-bottom: var(--arrow-spacing-l);
+
+  @media (--viewport-medium) {
+    grid-template-columns: repeat(2, 1fr);
+    margin-bottom: 0;
+  }
+
+  @media (--viewport-desktop) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.six-opinions-container {
+  display: grid;
+
+  @media (--viewport-medium) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (--viewport-desktop) {
+    grid-template-columns: 2fr 1fr;
+  }
+
+  .opinions-wrapper {
+    display: grid;
+
+    @media (--viewport-medium) {
+      grid-template-columns: 1fr;
+
+      h6 {
+        margin-bottom: 0;
+      }
+    }
+    @media (--viewport-desktop) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+.opinion-wrapper {
+  display: flex;
+  margin: 0 var(--arrow-spacing-s);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { color, boolean } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, collectionNameTemplates } from "../../../../storybook";
+import Listicles 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(5);
+
+const defaultvalue = "#ffffff";
+const collectionNameDefaultValue = "#3a9fdd";
+
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+withStore(
+  "Rows/Listicles",
+  {
+    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),
+      theme: color("color", defaultvalue),
+      collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+      slotConfig: configurableSlot,
+      showRowTitle: boolean("Row title", true)
+    };
+
+    mock.onGet(API_REQUEST).reply(200, nestedCollection);
+
+    return <Listicles collection={collection} config={contextConfig} />;
+  })
+  .add("with localized numbers", () => {
+    const contextConfig = {
+      collectionNameBorderColor: color("Collection Name Border Color", collectionNameDefaultValue),
+      theme: color("color", defaultvalue),
+      collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+      slotConfig: configurableSlot,
+      showRowTitle: boolean("Row title", true),
+      localizedNumbers: ["১", "২", "৩", "৪", "৫", "৬", "৭", "৮", "৯"]
+    };
+
+    mock.onGet(API_REQUEST).reply(200, nestedCollection);
+
+    return <Listicles collection={collection} config={contextConfig} />;
+  });

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

@@ -0,0 +1,21 @@
+# MagazineEditions
+
+Magazine Editions is used to represent the issues of a magazine.
+
+## Usage
+
+Import the MagazineEditions and pass magazine collection, props and the config.
+
+```jsx
+import { MagazineEditions } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+};
+<MagazineEditions collection={magazineCollection} config={contextConfig} >
+
+```

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

@@ -0,0 +1,96 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useDispatch, useSelector } from "react-redux";
+import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
+import { CollectionName } from "../../Atoms/CollectionName";
+import {
+  generateNavigateSlug,
+  getTextColor,
+  getTimeStamp,
+  navigateTo,
+  timestampToFormat,
+  getTimeStampConfig
+} from "../../../utils/utils";
+import "./magazine-editions.m.css";
+import { StateProvider } from "../../SharedContext";
+import get from "lodash/get";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+
+const MagazineEditions = ({ collection = [], config = {}, onClick, limit, showLoadmore = false }) => {
+  if (!collection.length) return null;
+  const {
+    theme = "",
+    collectionNameTemplate = "",
+    showRowTitle = true,
+    rowTitle = "Other Issues",
+    editionNameFormat = "magazineDate",
+    template = "NavigateToPage"
+  } = config;
+  const textColor = getTextColor(theme);
+  let issues = collection.map((issue) => issue.collection) || [];
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const dispatch = useDispatch();
+  const url = generateNavigateSlug(collection, { ...qtConfig, ...config });
+  const timeStampConfig = getTimeStampConfig(qtConfig);
+
+  return (
+    <div
+      className="full-width-with-padding arrow-component arr-magazine-issues"
+      style={{ backgroundColor: theme || "initial" }}
+      data-test-id="editions">
+      <div styleName={`container ${textColor}`}>
+        {showRowTitle && (
+          <CollectionName
+            collection={issues}
+            collectionNameTemplate={collectionNameTemplate}
+            customCollectionName={rowTitle}
+            navigate={false}
+          />
+        )}
+        <div styleName="issues">
+          {issues.slice(0, limit).map((issue, index) => {
+            const { name, "created-at": createdAt, "collection-date": issueDate } = issue;
+            const date = issueDate || createdAt;
+
+            return (
+              <div key={index} data-test-id={`current-issue-${index}`}>
+                <MagazineCoverImageCard collection={issue} config={{ ...config, isArchivePage: false }} />
+                <div styleName="date" data-test-id="issue-label">
+                  {editionNameFormat === "magazineTitle"
+                    ? name
+                    : getTimeStamp({ date, formatter: timestampToFormat, config: timeStampConfig })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        {showLoadmore && (
+          <LoadmoreButton
+            onClick={onClick}
+            template={template}
+            config={config}
+            qtConfig={qtConfig}
+            navigate={() => navigateTo(dispatch, url)}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+MagazineEditions.propTypes = {
+  collection: PropTypes.array,
+  config: PropTypes.shape({
+    rowTitle: PropTypes.string,
+    collectionNameTemplate: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string,
+    theme: PropTypes.string,
+    editionNameFormat: PropTypes.string,
+    showRowTitle: PropTypes.bool
+  }),
+  onClick: PropTypes.func,
+  limit: PropTypes.number,
+  showLoadmore: PropTypes.bool
+};
+
+export default StateProvider(MagazineEditions);

package/src/components/Rows/MagazineEditions/magazine-editions.m.css

@@ -0,0 +1,50 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.container {
+  margin: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    margin: var(--arrow-spacing-l);
+    @media (min-width: tablet) {
+      margin: 0;
+    }
+  }
+}
+
+.issues {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: var(--arrow-spacing-l);
+  grid-row-gap: var(--arrow-spacing-l);
+  @media (min-width: mobile) {
+    grid-template-columns: repeat(4, 1fr);
+    @media (min-width: tablet) {
+      grid-column-gap: 70px;
+    }
+  }
+}
+
+.date {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--arrow-spacing-s);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-2);
+  font-size: var(--arrow-fs-xs);
+  @media (min-width: mobile) {
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+
+.info {
+  text-align: center;
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/src/components/Rows/MagazineEditions/magazine-editions.test.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { mount, shallow } from "enzyme";
+import MagazineEditions from ".";
+import { generateStore, generateMagazineIssues } from "../../Fixture";
+import { Provider } from "react-redux";
+
+const magazineCollection = generateMagazineIssues();
+
+describe("MagazineEditions component", () => {
+  it("Should render template with array of collections", () => {
+    const contextConfig = {
+      collectionNameBorderColor: "",
+      theme: "",
+      collectionNameTemplate: "",
+      footerButton: "",
+      editionsTitle: "",
+      enableEditionsTitle: true,
+      title: ""
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <MagazineEditions collection={magazineCollection} config={contextConfig} />
+        );
+      </Provider>
+    );
+    expect(wrapper.find(MagazineEditions)).toHaveLength(1);
+  });
+
+  it("Should render `no editions message` if there are no editions", () => {
+    const wrapper = shallow(<MagazineEditions />);
+    expect(wrapper.find(MagazineEditions)).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { generateMagazineIssues } from "../../Fixture";
+import MagazineEditions from "./index";
+import Readme from "./README.md";
+import { color, text, boolean } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, collectionNameTemplates } from "../../../../storybook";
+
+const magazineCollection = generateMagazineIssues();
+
+const footerButton = {
+  SubsequentLoadCount: "SubsequentLoadCount",
+  CustomUrlPath: "CustomUrlPath"
+};
+
+const collectionNameDefaultValue = "#3a9fdd";
+const collectionNameBorderColorLabel = "Collection Name Border Color";
+
+withStore(
+  "Rows/Magazine Editions",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+).add("Magazine Editions", () => {
+  const contextConfig = {
+    theme: color("Background Color", "#ffffff"),
+    showRowTitle: boolean("Show Row Title", true),
+    title: text("Magazine Row title", "Magazine Editions"),
+    collectionNameTemplate: optionalSelect("Collection row Templates", collectionNameTemplates),
+    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+    buttonText: text("Footer text", "Read More"),
+    footerButton: optionalSelect("Button Settings", footerButton),
+    customUrlPath: text("Custom URL", ""),
+    enableEditionsTitle: boolean("Show Editions Title", true),
+    editionsTitle: text("Editions Title", "Magazine Title"),
+    showButton: boolean("Show Button", true),
+    initialLoadCount: text("Initial Load Count", 4)
+  };
+  return <MagazineEditions collection={magazineCollection} config={contextConfig} showLoadmore={true} />;
+});

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

@@ -0,0 +1,21 @@
+# MagazineHeaderCard
+
+Magazine Header Card is used to display the brief content of the magazine.
+
+## Usage
+
+Import the MagazineHeaderCard and pass collection as props and the config.
+
+```jsx
+import { MagazineHeaderCard } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+const contextConfig = {
+  theme: #333333;
+};
+<MagazineHeaderCard collection={collection} config={contextConfig}>
+
+```