@quintype/arrow 3.15.1-perf.5 → 3.15.1-perf.7

package/esm/components/Rows/AuthorIntroductionCard/author-intro.test.js

@@ -0,0 +1,148 @@
+import React from "react";
+import { mount } from "enzyme";
+import { AuthorIntroductionCard } from ".";
+import { generateStore, authorData } from "../../Fixture";
+import { Provider } from "react-redux";
+describe("Author Intro component", function () {
+  it("Should render default template with border, author bio and social-links enabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(7);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(1);
+  });
+  it("Should render default template with border, author bio and social-links disabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(0);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(0);
+  });
+  it("Should render square template with border, author bio and social-links enabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig,
+      template: "square"
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(7);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(1);
+  });
+  it("Should render square template with border, author bio and social-links disabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig,
+      template: "square"
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(0);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(0);
+  });
+  it("Should render small cirlce template with border, author bio and social-links enabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true,
+      borderSupport: true
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig,
+      template: "smallCircle"
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/small-circle/);
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/border/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(7);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(1);
+  });
+  it("Should render small cirlce template with border, author bio and social-links disabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false,
+      borderSupport: false
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig,
+      template: "smallCircle"
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/small-circle/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(0);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(0);
+  });
+});

package/esm/components/Rows/AuthorIntroductionCard/index.js

@@ -0,0 +1,157 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { getTextColor, sharePageUrl, clientWidth } from "../../../utils/utils";
+import AuthorImage from "../../Atoms/AuthorImage";
+import { SocialShareTemplate } from "../../Molecules/SocialShareTemplate/index";
+import { SocialShare } from "@quintype/components";
+import "./author-intro.m.css";
+import { Facebook } from "../../Svgs/SocialIcons/facebook";
+import { Youtube } from "../../Svgs/SocialIcons/youtube";
+import { Twitter } from "../../Svgs/SocialIcons/twitter";
+import { LinkedIn } from "../../Svgs/SocialIcons/linkedin";
+import { Instagram } from "../../Svgs/SocialIcons/instagram";
+import { WhatsApp } from "../../Svgs/SocialIcons/whatsapp";
+import { Pinterest } from "../../Svgs/SocialIcons/pinterest";
+var _styleModuleImportMap = {
+  "./author-intro.m.css": {
+    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "tablet": "992px",
+    "connect": "author-intro-m_connect__15zIX",
+    "social-share": "author-intro-m_social-share__f5EpE",
+    "share-icon": "author-intro-m_share-icon__3gke5",
+    "default": "author-intro-m_default__1rQ_v",
+    "author-image": "author-intro-m_author-image__2jRxy",
+    "author-name": "author-intro-m_author-name__1L60a",
+    "author-description": "author-intro-m_author-description__2CTEw",
+    "wrapper": "author-intro-m_wrapper__2Bi-s",
+    "introduction-card": "author-intro-m_introduction-card__1kdGt",
+    "social-wrapper": "author-intro-m_social-wrapper__1F9jD",
+    "linkWrapper": "author-intro-m_linkWrapper__Au0nU",
+    "social-connect-wrapper": "author-intro-m_social-connect-wrapper__2B0QA",
+    "dark": "author-intro-m_dark__ALdDb",
+    "light": "author-intro-m_light__2SfeE",
+    "small-circle": "author-intro-m_small-circle__jyG1s",
+    "border": "author-intro-m_border__3Tii9",
+    "fade-out": "author-intro-m_fade-out__1EBqd"
+  }
+};
+export var AuthorIntroductionCard = function AuthorIntroductionCard(_ref) {
+  var _ref$data = _ref.data,
+      data = _ref$data === void 0 ? {} : _ref$data,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "" : _ref$template;
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$enableBio = config.enableBio,
+      enableBio = _config$enableBio === void 0 ? true : _config$enableBio,
+      _config$enableSocialL = config.enableSocialLinks,
+      enableSocialLinks = _config$enableSocialL === void 0 ? true : _config$enableSocialL,
+      _config$borderSupport = config.borderSupport,
+      borderSupport = _config$borderSupport === void 0 ? true : _config$borderSupport;
+  var textColor = getTextColor(theme);
+  var name = data.name,
+      bio = data.bio,
+      social = data.social;
+  var isSmallCircle = template === "smallCircle";
+  var authorCardStyle = isSmallCircle ? "small-circle" : "default";
+  var isMobile = clientWidth("mobile");
+  var isFullWidth = !isSmallCircle ? "full-width-with-padding" : "";
+  var supportBorder = isSmallCircle && borderSupport ? "border" : "";
+
+  var getIcon = function getIcon(item) {
+    switch (item) {
+      case "twitter":
+        return /*#__PURE__*/React.createElement(Twitter, null);
+
+      case "facebook":
+        return /*#__PURE__*/React.createElement(Facebook, null);
+
+      case "youtube":
+        return /*#__PURE__*/React.createElement(Youtube, null);
+
+      case "linkedin":
+        return /*#__PURE__*/React.createElement(LinkedIn, null);
+
+      case "whatsapp":
+        return /*#__PURE__*/React.createElement(WhatsApp, {
+          color: "#4AC959"
+        });
+
+      case "instagram":
+        return /*#__PURE__*/React.createElement(Instagram, null);
+
+      case "pinterest":
+        return /*#__PURE__*/React.createElement(Pinterest, null);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-intro",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    },
+    className: ("".concat(isFullWidth, " arrow-component arr--author-intro-card") ? "".concat(isFullWidth, " arrow-component arr--author-intro-card") + " " : "") + _getClassName("".concat(authorCardStyle, " ").concat(supportBorder, " ").concat(textColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arrow-author-intro-wrapper " + _getClassName("wrapper ".concat(textColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arrow-author-introduction-card author-intro-m_introduction-card__1kdGt"
+  }, isSmallCircle && isMobile ? null : /*#__PURE__*/React.createElement("h2", {
+    className: _getClassName("author-name ".concat(textColor), _styleModuleImportMap)
+  }, name), enableBio && bio && /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-bio",
+    className: _getClassName("author-description ".concat(textColor), _styleModuleImportMap)
+  }, bio, isSmallCircle && /*#__PURE__*/React.createElement("div", {
+    className: "author-intro-m_fade-out__1EBqd",
+    style: {
+      backgroundImage: "linear-gradient(to right, transparent, ".concat(theme, ")")
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "author-intro-m_social-wrapper__1F9jD"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "author-intro-m_social-connect-wrapper__2B0QA"
+  }, enableSocialLinks && social && /*#__PURE__*/React.createElement(React.Fragment, null, template !== "smallCircle" && /*#__PURE__*/React.createElement("div", {
+    className: _getClassName("connect ".concat(textColor), _styleModuleImportMap)
+  }, "Connect :"), Object.entries(social).map(function (item, index) {
+    return item.length > 0 && item[1] ? // can add Social Networks without the url so adding an additional check below
+    item[1].url ? /*#__PURE__*/React.createElement("a", {
+      "data-test-id": "social-link",
+      href: item[1].url,
+      key: "".concat(item, "-").concat(index),
+      rel: "noopener noreferrer",
+      target: "_blank",
+      className: "author-intro-m_social-share__f5EpE"
+    }, getIcon(item[0])) : null : null;
+  }))), !isSmallCircle && /*#__PURE__*/React.createElement(SocialShare, {
+    template: SocialShareTemplate,
+    fullUrl: sharePageUrl,
+    title: name,
+    theme: theme,
+    iconType: "plain-svg"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "arrow-author-image author-intro-m_author-image__2jRxy"
+  }, /*#__PURE__*/React.createElement(AuthorImage, {
+    author: data,
+    template: template
+  }), isSmallCircle && isMobile && /*#__PURE__*/React.createElement("h2", {
+    className: _getClassName("author-name ".concat(textColor), _styleModuleImportMap)
+  }, name))));
+};
+AuthorIntroductionCard.propTypes = {
+  data: PropTypes.shape({
+    name: PropTypes.string,
+    bio: PropTypes.string,
+    social: PropTypes.object
+  }),
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    enableBio: PropTypes.bool,
+    enableSocialLinks: PropTypes.bool,
+    borderSupport: PropTypes.bool
+  }),
+  template: PropTypes.string
+};

package/esm/components/Rows/AuthorIntroductionCard/stories.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { AuthorIntroductionCard } from "./index";
+import { color, boolean as _boolean } from "@storybook/addon-knobs";
+import { authorData } from "../../Fixture";
+import Readme from "./README.md";
+withStore("Rows/Author Introduction Card ", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("Default", function () {
+  var contextConfig = {
+    theme: color("Color", "#ffffff"),
+    enableBio: _boolean("Enable Bio", true),
+    enableSocialLinks: _boolean("Enable Social Links", true)
+  };
+  return /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+    data: authorData,
+    config: contextConfig
+  });
+}).add("Square", function () {
+  var contextConfig = {
+    theme: color("Color", "#ffffff"),
+    enableBio: _boolean("Enable Bio", true),
+    enableSocialLinks: _boolean("Enable Social Links", true)
+  };
+  return /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+    data: authorData,
+    config: contextConfig,
+    template: "square"
+  });
+}).add("Small Circle", function () {
+  var contextConfig = {
+    theme: color("Color", "#ffffff"),
+    enableBio: _boolean("Enable Bio", true),
+    enableSocialLinks: _boolean("Enable Social Links", true),
+    borderSupport: _boolean("With Border", true)
+  };
+  return /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+    data: authorData,
+    config: contextConfig,
+    template: "smallCircle"
+  });
+});

package/esm/components/Rows/AuthorsList/README.md

@@ -0,0 +1,24 @@
+# Authors List
+
+Authors List is used to display the authors information which consists of name, bio with author image and social connect of the author.
+
+## Usage
+
+Import the AuthorsList and pass authorDetails as data and config.
+
+```jsx
+import { AuthorsList } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+const config = {
+  enableBio: boolean("Enable Bio", true),
+  buttonText: text("Footer text", "Load More"),
+  theme: color("color", "#ffffff")
+  enableSocialLinks: boolean("Enable Social Links", true)
+};
+limit = 9;
+<AuthorsList config={config} data={data} getMoreData={getMoreData} limit={limit} hideLoadmore={false} />;
+```

package/esm/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/esm/components/Rows/AuthorsList/authors-list.m.css

@@ -0,0 +1,22 @@
+@value viewports: "../../../../assets/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/esm/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/esm/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/esm/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 -->