@quintype/arrow 3.15.1-perf.1 → 3.15.1-perf.10

package/components/Rows/AuthorsList/author-list.test.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { mount } from "enzyme";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { AuthorsListBase } from ".";
+import { generateStore, authorData } from "../../Fixture";
+import { Provider } from "react-redux";
+
+var getMoreData = function getMoreData() {
+  return null;
+};
+
+var AuthorsData = Array(8).fill(authorData);
+describe("Authors List component", function () {
+  it("Should render authors list component if data is present", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorsListBase, {
+      data: AuthorsData,
+      config: {},
+      getMoreData: getMoreData,
+      hideLoadmore: false,
+      limit: 9
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "authors-list"
+    }).prop("className")).toMatch(/arr--authors-list/);
+  });
+  it("Should not render authors list component if data is absent", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorsListBase, {
+      data: [],
+      config: {},
+      getMoreData: getMoreData,
+      hideLoadmore: false,
+      limit: 9
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "authors-list"
+    }).length).toBe(0);
+  });
+  it("Should render Authors List component with Load More disabled", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorsListBase, {
+      data: AuthorsData,
+      config: {},
+      getMoreData: getMoreData,
+      hideLoadmore: true,
+      limit: 9
+    }), "; );"));
+    expect(wrapper.find(LoadmoreButton).length).toEqual(0);
+  });
+  it("Should render Authors List component with Load More enabled", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorsListBase, {
+      data: AuthorsData,
+      config: {},
+      getMoreData: getMoreData,
+      hideLoadmore: false,
+      limit: 9
+    }), "; );"));
+    expect(wrapper.find(LoadmoreButton).length).toEqual(1);
+  });
+});

package/components/Rows/AuthorsList/authors-list.m.css

@@ -0,0 +1,22 @@
+@value viewports: "../../../stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.wrapper {
+  margin: 0 var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: var(--arrow-spacing-l);
+    margin: 0 var(--arrow-spacing-l);
+  }
+  @media (min-width: tablet) {
+    margin: 0;
+  }
+}
+
+.linkWrapper :global(.arr--author-intro-card) {
+  margin-bottom: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    margin-bottom: unset;
+  }
+}

package/components/Rows/AuthorsList/index.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { Link } from "@quintype/components";
+import PropTypes from "prop-types";
+import { getTextColor } from "../../../utils/utils";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { AuthorIntroductionCard } from "../AuthorIntroductionCard";
+import { StateProvider } from "../../SharedContext";
+import "./authors-list.m.css";
+import { useSelector } from "react-redux";
+import { get } from "lodash";
+export var AuthorsListBase = function AuthorsListBase(_ref) {
+  var _ref$data = _ref.data,
+      data = _ref$data === void 0 ? [] : _ref$data,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      getMoreData = _ref.getMoreData,
+      _ref$hideLoadmore = _ref.hideLoadmore,
+      hideLoadmore = _ref$hideLoadmore === void 0 ? false : _ref$hideLoadmore,
+      limit = _ref.limit;
+  if (data.length < 1) return null;
+  var theme = config.theme;
+  var textColor = getTextColor(theme);
+  var mountAt = config.mountAt || "";
+  var qtConfig = useSelector(function (state) {
+    return get(state, ["qt", "config"], {});
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "authors-list",
+    className: "full-width-with-padding arrow-component arr--authors-list",
+    style: {
+      background: theme,
+      color: textColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "authors-list-m_wrapper__6y3He"
+  }, data.slice(0, limit).map(function (author, index) {
+    return /*#__PURE__*/React.createElement(Link, {
+      href: "".concat(mountAt, "/author/") + author.slug,
+      key: "author-list-".concat(index),
+      className: "authors-list-m_linkWrapper__1ZhOs",
+      "aria-label": "author"
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: author,
+      config: config,
+      template: "smallCircle"
+    }));
+  })), !hideLoadmore && /*#__PURE__*/React.createElement(LoadmoreButton, {
+    onClick: getMoreData,
+    template: "SubsequentLoadCount",
+    config: config,
+    qtConfig: qtConfig
+  }));
+};
+AuthorsListBase.propTypes = {
+  data: PropTypes.array,
+  config: PropTypes.shape({
+    enableBio: PropTypes.bool,
+    theme: PropTypes.string
+  }),
+  getMoreData: PropTypes.object.isRequired,
+  limit: PropTypes.number,
+  hideLoadmore: PropTypes.bool
+};
+export var AuthorsList = StateProvider(AuthorsListBase);

package/components/Rows/AuthorsList/stories.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { AuthorsListBase } from "./index";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import { authorData } from "../../Fixture";
+import Readme from "./README.md";
+var AuthorsData = Array(8).fill(authorData);
+AuthorsData.push({
+  slug: "parvathi-mohan-2",
+  name: "Lucy Douglas",
+  social: {
+    twitter: {
+      url: "https://twitter.com/Reena00659364",
+      handle: "Twitter"
+    },
+    youtube: {
+      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+      handle: "Youtube"
+    },
+    facebook: {
+      url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
+      handle: "Facebook"
+    }
+  },
+  bio: "",
+  id: 94985,
+  "avatar-url": "",
+  "avatar-s3-key": "",
+  "twitter-handle": "quintype_inc",
+  stats: {
+    contributions: null
+  },
+  metadata: {}
+});
+
+var getMoreData = function getMoreData() {
+  return null;
+};
+
+withStore("Rows/Author List", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).add("Default", function () {
+  var config = {
+    enableBio: _boolean("Enable Bio", true),
+    buttonText: text("Footer text", "Load More"),
+    theme: color("color", "#ffffff"),
+    enableSocialLinks: _boolean("Enable Social Links", true),
+    borderSupport: _boolean("With Border", true)
+  };
+  return /*#__PURE__*/React.createElement(AuthorsListBase, {
+    data: AuthorsData,
+    config: config,
+    getMoreData: getMoreData,
+    hideLoadmore: false,
+    limit: 9
+  });
+});

package/components/Rows/CollectionFilter/README.md

@@ -0,0 +1,39 @@
+# Collection Filter
+
+The _CollectionFilter_ component is a collection of collections in a tabbed interface.
+
+The last 3 stories can be replaced with an Ad/Widget based on the slotConfig.
+
+## Usage
+
+### Import 
+```jsx
+import { CollectionFilter } from "@quintype/arrow";
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+  theme: "#ffffff",
+  border: "",
+  collectionNameTemplate: "default",
+  sectionTagTemplate: "solid",
+  showSection: true,
+  showAuthor: true,
+  showTime: true,
+  slotConfig: [{ type: "story", component: () => <CustomAdOrWidget /> }],
+  showRowTitle: true,
+  showFooterButton: true,
+  buttonText: "Load More",
+  footerSlotConfig: { footerSlot: () => <CustomFooterSlot /> }
+};
+```
+
+### Use as a component
+
+```jsx
+<CollectionFilter collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

package/components/Rows/CollectionFilter/collection-filter.m.css

@@ -0,0 +1,213 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.navigator {
+  visibility: hidden;
+  position: relative;
+  @media (--viewport-medium) {
+    width: 18px;
+  }
+}
+.wrapper {
+  padding: 0 12px;
+  @media (--viewport-medium) {
+    padding: unset;
+  }
+}
+.collection-filter {
+  margin: var(--arrow-spacing-xs) 0;
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: 2fr 1px 10fr;
+    grid-column-gap: var(--arrow-spacing-l);
+    margin: var(--arrow-spacing-m) 0;
+  }
+}
+
+.divider.dark {
+  @media (--viewport-medium) {
+    border-left: 1px solid var(--dark-border);
+  }
+}
+
+.divider.light {
+  @media (--viewport-medium) {
+    border-left: 1px solid var(--light-border);
+  }
+}
+
+.subCollection-wrapper {
+  position: relative;
+  min-height: 100px;
+}
+.subCollection-stories {
+  @media (--viewport-medium) {
+    display: flex;
+    align-items: flex-start;
+  }
+}
+.cards {
+  display: block;
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--arrow-spacing-l);
+    flex-basis: 66%;
+  }
+}
+.last-column {
+  display: block;
+  @media (--viewport-medium) {
+    display: flex;
+    flex-direction: column;
+    margin-left: var(--arrow-spacing-l);
+    flex-basis: 34%;
+  }
+}
+
+.last-column .card {
+  margin-bottom: var(--arrow-spacing-l);
+}
+.cards .card {
+  margin-bottom: var(--arrow-spacing-l);
+  @media (--viewport-medium) {
+    margin-bottom: unset;
+  }
+}
+.card-wrapper {
+  @media (--viewport-medium) {
+    display: flex;
+    align-items: flex-start;
+  }
+}
+.child-collections {
+  display: flex;
+  font-size: var(--arrow-fs-xs);
+  margin-bottom: 16px;
+  scroll-snap-type: x mandatory;
+  overflow: scroll;
+  scrollbar-width: none;
+  @media (--viewport-medium) {
+    display: block;
+    font-size: var(--arrow-fs-s);
+    line-height: var(--arrow-lh-2);
+    overflow: none;
+  }
+}
+
+.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 11px 12px 11px;
+  cursor: pointer;
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+  @media (--viewport-medium) {
+    font-size: var(--arrow-fs-s);
+    margin: 0 0 var(--arrow-spacing-l) 0;
+  }
+}
+
+.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-mono2);
+}
+
+.open-subchild {
+  border-bottom: 2px solid var(--arrow-c-brand1);
+  @media (--viewport-medium) {
+    border-bottom: unset;
+  }
+}
+
+.open-subchild > .navigator {
+  @media (--viewport-medium) {
+    visibility: visible;
+    width: 24px;
+    transition: width 0.35s ease-in-out;
+    animation: fadein 2s;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* tringle design */
+.navigator:before {
+  @media (--viewport-medium) {
+    content: "";
+    border-style: solid;
+    border-width: 4px 4px 4px 8px;
+    border-color: transparent transparent transparent var(--arrow-c-mono2);
+    position: absolute;
+    right: 0;
+    top: 8px;
+  }
+}
+
+.navigator.dark:before {
+  @media (--viewport-medium) {
+    border-color: transparent transparent transparent var(--arrow-c-mono2);
+  }
+}
+
+.navigator.light:before {
+  @media (--viewport-medium) {
+    border-color: transparent transparent transparent var(--arrow-c-invert-mono2);
+  }
+}
+
+.collection-filter .subCollection-stories {
+  animation-name: fadeIn;
+  animation-fill-mode: both;
+  animation-duration: 1s;
+  animation-delay: 1s;
+}
+
+html[dir="rtl"] {
+  .last-column {
+    @media (--viewport-medium) {
+      margin-right: var(--arrow-spacing-l);
+      margin-left: 0;
+    }
+  }
+
+  .open-subchild > .navigator {
+    height: var(--arrow-spacing-l);
+    transform: rotate(-180deg);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}