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

package/components/Rows/OneColStoryList/one-col-story-list.m.css

@@ -0,0 +1,81 @@
+@custom-media --viewport-medium (width >= 768px);
+@custom-media --viewport-small (width < 768px);
+
+.one-col-story-list-wrapper {
+  padding: 0 var(--arrow-spacing-s);
+  @media (--viewport-medium) {
+    padding: 0;
+  }
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 44px;
+  }
+}
+.one-col-first-story {
+  grid-column: 1/3;
+  grid-row: 1/2;
+  order: -1;
+}
+.one-col-border-full {
+  margin-bottom: var(--arrow-spacing-m);
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}
+.one-col-border-bottom {
+  padding-top: var(--arrow-spacing-m);
+}
+.one-col-border-default {
+  margin-bottom: var(--arrow-spacing-m);
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}
+.one-col-story-list {
+  grid-column: 1/3;
+  grid-row: 2/3;
+}
+.one-col-ads {
+  grid-row: 1/9;
+  order: -1;
+  padding-bottom: var(--arrow-spacing-m);
+}
+.footer-ad-wrapper {
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.footer-wrapper {
+  grid-row: 1/2;
+  grid-column: 1/3;
+}
+.ad-wrapper {
+  grid-row: 2/3;
+  grid-column: 1/4;
+}
+.ad-wrapper :global(.arr--ad-wrapper) {
+  justify-content: left;
+}
+.story-card-content-wrapper {
+  padding: 12px 8px 12px 0;
+  @media (--viewport-medium) {
+    padding: 16px 16px 16px 0;
+  }
+}
+
+.one-col-story-list-wrapper :global(.arr--sub-headline) {
+  @media (--viewport-small) {
+    display: none;
+  }
+}
+
+.one-col-story-list-wrapper :global(.arr--button) {
+  margin: 0 auto var(--arrow-spacing-xs) auto;
+}

package/components/Rows/OneColStoryList/stories.js

@@ -0,0 +1,78 @@
+import { OneColStoryListBase } from "./index";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates } from "../../../../storybook";
+import React from "react";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import { generateCollection } from "../../Fixture/";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+var label = "color";
+var defaultvalue = "#ffffff";
+var collectionNameDefaultValue = "#3a9fdd";
+var collectionNameBorderColorLabel = "Collection Name Border Color";
+var sectionTagBorderColor = "Section Tag Border Color";
+var sectionTagDefaultvalue = "#3a9fdd";
+var collection = generateCollection({
+  stories: 10
+});
+var borderOptions = {
+  "No Value": "",
+  bottom: "bottom",
+  full: "full"
+};
+var footerButton = {
+  SubsequentLoadCount: "SubsequentLoadCount",
+  NavigateToPage: "NavigateToPage"
+};
+
+var configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "600px",
+    width: "300px"
+  });
+};
+
+var footerSlot = function footerSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, null);
+};
+
+withStore("Rows/One Col Story List ", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "1000px",
+      margin: "auto"
+    }
+  }, story());
+}).add("Default", function () {
+  var contextConfig = {
+    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+    borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+    theme: color(label, defaultvalue),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+    border: optionalSelect("Border Level", borderOptions),
+    showSection: _boolean("Section disable", true),
+    showAuthor: _boolean("Author disable", true),
+    showTime: _boolean("Timestamp disable", true),
+    slotConfig: [{
+      type: "ad",
+      component: configurableSlot
+    }],
+    footerButton: optionalSelect("Footer Button", footerButton),
+    buttonText: text("Footer text", "Read More"),
+    showRowTitle: _boolean("Row title", true),
+    footerSlotConfig: {
+      footerSlot: footerSlot
+    },
+    showButton: _boolean("Show button", true),
+    showReadTime: _boolean("Read time", true)
+  };
+  return /*#__PURE__*/React.createElement(OneColStoryListBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});

package/components/Rows/OpinionCollection/README.md

@@ -0,0 +1,36 @@
+# Opinion Collection
+
+## Usage
+
+### Import
+
+```jsx
+import { OpinionCollection } from "@quintype/arrow";
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+  theme: "#ffffff",
+  showSection: true,
+  showAuthor: false,
+  showTime: true,
+  showFooterButton: true,
+  buttonText: "Load More",
+  showRowTitle: true
+  border: "",
+  collectionNameTemplate: "default",
+  sectionTagTemplate: "default",
+  slotConfig: [{ type: "ad", component: () => <AdOrWidgetComponent /> }],
+  footerSlotConfig: { footerSlot: () => <CustomFooterComponent /> }
+};
+```
+
+### Use as a component
+
+```jsx
+<OpinionCollection collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

package/{atoms/ExtendedLoadMore/index-6daa674c.js → components/Rows/OpinionCollection/index.js}

@@ -1,100 +1,8 @@
-import { C as CollectionName, b as Author, H as Headline, A as AuthorWithTime, S as StateProvider, _ as _defineProperty, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-aa8b8ab8.js';
-import { _ as _getClassName, a as get_1, g as getTextColor, l as getSlot, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
-import { Link, ResponsiveImage, collectionToStories } from '@quintype/components';
-import 'react-dom';
-import 'react-timeago';
-import 'date-fns-tz';
-
-var UserFallbackIcon = function UserFallbackIcon(_ref) {
-  var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 120 : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 120 : _ref$height;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 120 120",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M93.28 108.98c-1.055-17.675-15.47-31.678-33.098-31.678-17.708 0-32.173 14.129-33.11 31.916 9.415 6.311 20.741 9.993 32.927 9.993 12.338 0 23.795-3.774 33.28-10.23l.001-.001zM58.584 73.283c9.928 0 17.977-8.275 17.977-18.483 0-10.209-8.049-18.484-17.977-18.484-9.929 0-17.977 8.275-17.977 18.484 0 10.208 8.048 18.483 17.977 18.483zM60 120C26.863 120 0 93.137 0 60S26.863 0 60 0s60 26.863 60 60-26.863 60-60 60z",
-    fill: "#DADADA",
-    fillRule: "nonzero"
-  }));
-};
-UserFallbackIcon.propTypes = {
-  width: PropTypes.object,
-  height: PropTypes.object
-};
-
-var _styleModuleImportMap$1 = {
-  "./author-image.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
-    "mobile": "768px",
-    "tablet": "992px",
-    "image-container": "author-image-m_image-container__19WNd",
-    "author-image": "author-image-m_author-image__D8GMB",
-    "square": "author-image-m_square__bjK7M",
-    "small-circle": "author-image-m_small-circle__DbQMN",
-    "smaller-circle": "author-image-m_smaller-circle__2yMOZ"
-  }
-};
-
-var authorWithImage = function authorWithImage(author, templateStyle) {
-  var avatarUrl = author["avatar-url"],
-      avatarS3Key = author["avatar-s3-key"],
-      name = author.name;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "author-image",
-    className: "arr--author-image " + _getClassName("author-image ".concat(templateStyle), _styleModuleImportMap$1)
-  }, /*#__PURE__*/React.createElement("figure", {
-    className: "author-image-m_image-container__19WNd"
-  }, avatarS3Key ? /*#__PURE__*/React.createElement(ResponsiveImage, {
-    slug: avatarS3Key,
-    alt: name,
-    defaultWidth: 250,
-    widths: [250, 480],
-    aspectRatio: [[1, 1], [1, 1]],
-    sizes: "98vw",
-    imgParams: {
-      auto: ["format", "compress"]
-    }
-  }) : avatarUrl ? /*#__PURE__*/React.createElement("img", {
-    src: avatarUrl
-  }) : /*#__PURE__*/React.createElement(UserFallbackIcon, null)));
-};
-
-var AuthorImage = function AuthorImage(_ref) {
-  var _ref$author = _ref.author,
-      author = _ref$author === void 0 ? {} : _ref$author,
-      _ref$template = _ref.template,
-      template = _ref$template === void 0 ? "" : _ref$template,
-      _ref$config = _ref.config,
-      config = _ref$config === void 0 ? {} : _ref$config;
-  var slug = author.slug;
-  var mountAt = config.mountAt || "";
-  var templateStyle = "";
-  if (template === "smallerCircle") templateStyle = "smaller-circle";else if (template === "smallCircle") templateStyle = "small-circle";else if (template === "square") templateStyle = "square";
-  if (slug) return /*#__PURE__*/React.createElement(Link, {
-    href: "".concat(mountAt, "/author/") + slug
-  }, authorWithImage(author, templateStyle));else return authorWithImage(author, templateStyle);
-};
-
-AuthorImage.propTypes = {
-  author: PropTypes.shape({
-    "avatar-url": PropTypes.string,
-    "avatar-s3-key": PropTypes.string,
-    name: PropTypes.string,
-    slug: PropTypes.string
-  }),
-  template: PropTypes.string
-};
-
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
 var _styleModuleImportMap = {
   "./opinion-collection.m.css": {
-    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
     "mobile": "768px",
     "desktop": "1025px",
     "opinion-collection": "opinion-collection-m_opinion-collection__1Bc7h",
@@ -115,6 +23,23 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import { collectionToStories } from "@quintype/components";
+import { Author } from "../../Atoms/Author";
+import { Headline } from "../../Atoms/Headline";
+import AuthorImage from "../../Atoms/AuthorImage";
+import { LoadMoreTarget } from "../../Atoms/LoadMoreTarget";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { StateProvider } from "../../SharedContext";
+import { ProgressiveHydration } from "../../../hydration-component";
+import { generateNavigateSlug, getSlot, getTextColor, navigateTo } from "../../../utils/utils";
+import "./opinion-collection.m.css";
+
 var loadMore = function loadMore(_ref) {
   var isLoading = _ref.isLoading,
       renderStories = _ref.renderStories,
@@ -127,7 +52,7 @@ var loadMore = function loadMore(_ref) {
   getMoreStories(offset, limit);
 };
 
-var OpinionCollectionBase = function OpinionCollectionBase(_ref2) {
+export var OpinionCollectionBase = function OpinionCollectionBase(_ref2) {
   var collection = _ref2.collection,
       config = _ref2.config,
       getMoreStories = _ref2.getMoreStories,
@@ -150,7 +75,7 @@ var OpinionCollectionBase = function OpinionCollectionBase(_ref2) {
       _config$subsequentLoa = config.subsequentLoadCount,
       subsequentLoadCount = _config$subsequentLoa === void 0 ? 3 : _config$subsequentLoa;
 
-  var _get = get_1(slotConfig, [0], {}),
+  var _get = get(slotConfig, [0], {}),
       _get$type = _get.type,
       type = _get$type === void 0 ? "story" : _get$type,
       _get$component = _get.component,
@@ -158,7 +83,7 @@ var OpinionCollectionBase = function OpinionCollectionBase(_ref2) {
 
   var dispatch = useDispatch();
   var qtConfig = useSelector(function (state) {
-    return get_1(state, ["qt", "config"], {});
+    return get(state, ["qt", "config"], {});
   });
   if (!stories.length) return null;
   var textColor = getTextColor(theme);
@@ -194,7 +119,7 @@ var OpinionCollectionBase = function OpinionCollectionBase(_ref2) {
   };
 
   var getAuthorCard = function getAuthorCard(story) {
-    var authorData = get_1(story, ["authors", "0"]);
+    var authorData = get(story, ["authors", "0"]);
     return /*#__PURE__*/React.createElement("div", {
       "data-test-id": "story-card"
     }, /*#__PURE__*/React.createElement(Author, {
@@ -277,6 +202,4 @@ OpinionCollectionBase.defaultProps = {
   config: {},
   hideFirstCard: false
 };
-var OpinionCollection = StateProvider(OpinionCollectionBase);
-
-export { OpinionCollection, OpinionCollectionBase };
+export var OpinionCollection = StateProvider(OpinionCollectionBase);

package/components/Rows/OpinionCollection/opinion-collection.m.css

@@ -0,0 +1,226 @@
+@value viewports: "../../../stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value desktop from viewports;
+
+.opinion-collection {
+  padding: 0 var(--arrow-spacing-s);
+  @media (min-width: desktop) {
+    padding: 0;
+  }
+}
+
+.content-wrapper {
+  @media (min-width: mobile) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: var(--arrow-spacing-s);
+  }
+  @media (min-width: desktop) {
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: var(--arrow-spacing-l);
+  }
+}
+
+.custom-grid {
+  @media (min-width: mobile) {
+    grid-template-columns: 1fr;
+  }
+  @media (min-width: desktop) {
+    grid-template-columns: 2fr 1fr;
+    align-items: center;
+  }
+}
+
+.wrapper-with-ads {
+  @media (min-width: mobile) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: var(--arrow-spacing-s);
+  }
+  @media (min-width: desktop) {
+    grid-column-gap: var(--arrow-spacing-l);
+  }
+}
+
+.ad-slot {
+  @media only screen and (max-width: desktop) {
+    margin: var(--arrow-spacing-l) 0;
+  }
+}
+
+.headline-author {
+  display: flex;
+  :last-child {
+    margin-left: auto;
+  }
+  :global(.arr--headline) {
+    flex-basis: 80%;
+  }
+}
+
+.content-wrapper > div,
+.wrapper-with-ads > div {
+  padding: 0 0 8px 0;
+  @media (min-width: desktop) {
+    padding: 0 var(--arrow-spacing-l) var(--arrow-spacing-m) 0;
+  }
+}
+
+.custom-grid > div {
+  padding: 0;
+}
+
+.content-wrapper.border.light > div,
+.content-wrapper.border.light .wrapper-with-ads > div {
+  @media (min-width: mobile) {
+    border-right: 1px solid var(--light-border);
+  }
+}
+
+.content-wrapper.border.dark > div,
+.content-wrapper.border.dark .wrapper-with-ads > div {
+  @media (min-width: mobile) {
+    border-right: 1px solid var(--dark-border);
+  }
+}
+
+.custom-grid.border.light > div,
+.custom-grid.border.dark > div {
+  border-right: none;
+}
+
+.content-wrapper :global(.author-name) {
+  color: var(--arrow-c-brand1);
+  font-size: var(--arrow-spacing-m);
+}
+
+.content-wrapper.border.light,
+.content-wrapper.border.light .wrapper-with-ads {
+  :global(.arr--author-time) {
+    border-bottom: 1px solid var(--light-border);
+    padding-bottom: var(--arrow-spacing-m);
+  }
+}
+
+.content-wrapper.border.dark,
+.content-wrapper.border.dark .wrapper-with-ads {
+  :global(.arr--author-time) {
+    border-bottom: 1px solid var(--dark-border);
+    padding-bottom: var(--arrow-spacing-m);
+  }
+}
+
+.content-wrapper.border,
+.content-wrapper.border .wrapper-with-ads {
+  div:nth-last-child(-n + 1) {
+    :global(.arr--author-time) {
+      border-bottom: none;
+    }
+  }
+  @media (min-width: mobile) {
+    div:nth-last-child(-n + 2) {
+      :global(.arr--author-time) {
+        border-bottom: none;
+      }
+    }
+  }
+  @media (min-width: desktop) {
+    div:nth-last-child(-n + 3) {
+      :global(.arr--author-time) {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.content-wrapper.border.light .count-3 {
+  @media (min-width: desktop) {
+    div:nth-last-child(-n + 3) {
+      :global(.arr--author-time) {
+        border-bottom: 1px solid var(--light-border);
+      }
+    }
+  }
+}
+
+.content-wrapper.border.dark .count-3 {
+  @media (min-width: desktop) {
+    div:first-child {
+      :global(.arr--author-time) {
+        border-bottom: 1px solid var(--dark-border);
+      }
+    }
+  }
+}
+
+.content-wrapper.border.light .wrapper-with-ads {
+  @media (min-width: desktop) {
+    div:nth-child(2) {
+      :global(.arr--author-time) {
+        border-bottom: 1px solid var(--light-border);
+      }
+    }
+  }
+}
+
+.content-wrapper.border.dark .wrapper-with-ads {
+  @media (min-width: desktop) {
+    div:nth-child(2) {
+      :global(.arr--author-time) {
+        border-bottom: 1px solid var(--dark-border);
+      }
+    }
+  }
+}
+
+.content-wrapper.custom-grid.border.dark .count-3,
+.content-wrapper.border.dark .count-3,
+.content-wrapper.custom-grid.border.dark .count-2,
+.content-wrapper.border.dark .count-2 {
+  @media (min-width: desktop) {
+    div:nth-child(2) {
+      :global(.arr--author-time) {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.content-wrapper.border.light > div:nth-child(2n),
+.content-wrapper.border.light .wrapper-with-ads > div:nth-child(2n) {
+  @media (min-width: mobile) {
+    border-right: none;
+  }
+  @media (min-width: desktop) {
+    border-right: 1px solid var(--light-border);
+  }
+}
+
+.content-wrapper.border.dark > div:nth-child(2n),
+.content-wrapper.border.dark .wrapper-with-ads > div:nth-child(2n) {
+  @media (min-width: mobile) {
+    border-right: none;
+  }
+  @media (min-width: desktop) {
+    border-right: 1px solid var(--dark-border);
+  }
+}
+
+.custom-grid.border.dark > div:nth-child(2n),
+.custom-grid.border.light > div:nth-child(2n) {
+  @media (min-width: desktop) {
+    border-right: none;
+  }
+}
+
+.content-wrapper.border.light > div:nth-child(3n) {
+  @media (min-width: desktop) {
+    border-right: none;
+  }
+}
+
+.content-wrapper.border.dark > div:nth-child(3n) {
+  @media (min-width: desktop) {
+    border-right: none;
+  }
+}

package/components/Rows/OpinionCollection/stories.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, collectionNameTemplates } from "../../../../storybook";
+import { OpinionCollectionBase } from "./index";
+import Readme from "./README.md";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import { generateCollection } from "../../Fixture";
+var collection = generateCollection({
+  stories: 6
+});
+var label = "BG Color";
+var defaultvalue = "#ffffff";
+var collectionNameDefaultValue = "#3a9fdd";
+var collectionNameBorderColorLabel = "Collection Name Border Color";
+var border = {
+  "default": "fullBorder",
+  noBorder: "noBorder"
+};
+
+var configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "250px",
+    width: "300px"
+  });
+};
+
+withStore("Rows/Opinion Collection", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "1000px",
+      margin: "auto"
+    }
+  }, story());
+}).add("Default", function () {
+  var contextConfig = {
+    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+    theme: color(label, defaultvalue),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    showAuthor: _boolean("Show Author", true),
+    showTime: _boolean("Timestamp", true),
+    showButton: _boolean("Show button", true),
+    buttonText: text("Button text", "Read More"),
+    showRowTitle: _boolean("Row title", true),
+    showReadTime: _boolean("Read time", true),
+    border: optionalSelect("Border settings", border)
+  };
+  return /*#__PURE__*/React.createElement(OpinionCollectionBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});
+withStore("Rows/Opinion Collection", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "1000px",
+      margin: "auto"
+    }
+  }, story());
+}).add("With AD", function () {
+  var contextConfig = {
+    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+    theme: color(label, defaultvalue),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    showAuthor: _boolean("Show Author", true),
+    showTime: _boolean("Timestamp", true),
+    showButton: _boolean("Show button", true),
+    buttonText: text("Button text", "Read More"),
+    showRowTitle: _boolean("Row title", true),
+    showReadTime: _boolean("Read time", true),
+    border: optionalSelect("Border settings", border),
+    slotConfig: [{
+      type: "ad",
+      component: configurableSlot
+    }]
+  };
+  return /*#__PURE__*/React.createElement(OpinionCollectionBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});