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

package/{atoms/ExtendedLoadMore/index-5a7900ba.js → components/Rows/FourColFiveStories/index.js}

@@ -1,18 +1,18 @@
-import { m as _arrayWithHoles, o as _iterableToArray, p as _unsupportedIterableToArray, q as _nonIterableRest, a as get_1, g as getTextColor, r as rgbToHex, l as getSlot, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
-import { H as HeroImage } from './index-6cb56d1a.js';
-import { C as CollectionName, S as StateProvider, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-aa8b8ab8.js';
-import { collectionToStories } from '@quintype/components';
-import { S as StorycardContent } from './index-f6e578e3.js';
-import 'react-timeago';
-import 'date-fns-tz';
-import 'react-dom';
-
-function _toArray(arr) {
-  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
-}
+import _toArray from "@babel/runtime/helpers/toArray";
+import React from "react";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import { useDispatch, useSelector } from "react-redux";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { StateProvider } from "../../SharedContext";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { collectionToStories } from "@quintype/components";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { generateNavigateSlug, getSlot, getTextColor, navigateTo, rgbToHex } from "../../../utils/utils";
+import { ProgressiveHydration } from "../../../hydration-component";
+import { LoadMoreTarget } from "../../Atoms/LoadMoreTarget";
+import "./four-col-five-stories.m.css";
 
 var loadMore = function loadMore(_ref) {
   var isLoading = _ref.isLoading,
@@ -26,7 +26,7 @@ var loadMore = function loadMore(_ref) {
   getMoreStories(offset, limit);
 };
 
-var FourColFiveStoriesBase = function FourColFiveStoriesBase(_ref2) {
+export var FourColFiveStoriesBase = function FourColFiveStoriesBase(_ref2) {
   var collection = _ref2.collection,
       config = _ref2.config,
       getMoreStories = _ref2.getMoreStories,
@@ -51,7 +51,7 @@ var FourColFiveStoriesBase = function FourColFiveStoriesBase(_ref2) {
       _config$subsequentLoa = config.subsequentLoadCount,
       subsequentLoadCount = _config$subsequentLoa === void 0 ? 4 : _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,
       component = _get.component;
@@ -61,7 +61,7 @@ var FourColFiveStoriesBase = function FourColFiveStoriesBase(_ref2) {
   var adWidgetSlot = type === "ad" || type === "widget" ? getSlot(type, component) : null;
   var dispatch = useDispatch();
   var qtConfig = useSelector(function (state) {
-    return get_1(state, ["qt", "config"], {});
+    return get(state, ["qt", "config"], {});
   });
 
   var _ref3 = stories || [],
@@ -87,7 +87,7 @@ var FourColFiveStoriesBase = function FourColFiveStoriesBase(_ref2) {
     return /*#__PURE__*/React.createElement("div", {
       className: "four-col-five-stories-m_card__2lzhH",
       "data-test-id": "story-card",
-      key: "four-col-five-story-".concat(index, "-").concat(get_1(story, ["id"], "0"))
+      key: "four-col-five-story-".concat(index, "-").concat(get(story, ["id"], "0"))
     }, storyCard(story));
   };
 
@@ -176,6 +176,4 @@ FourColFiveStoriesBase.defaultProps = {
   config: {},
   hideFirstCard: false
 };
-var FourColFiveStories = StateProvider(FourColFiveStoriesBase);
-
-export { FourColFiveStories, FourColFiveStoriesBase };
+export var FourColFiveStories = StateProvider(FourColFiveStoriesBase);

package/components/Rows/FourColFiveStories/stories.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import Readme from "./README.md";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates, footerButton } from "../../../../storybook";
+import { FourColFiveStoriesBase } from "./index";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import { generateCollection } from "../../Fixture";
+var collection = generateCollection({
+  stories: 5
+});
+var label = "BG Color";
+var defaultvalue = "#ffffff";
+var collectionNameDefaultValue = "#3a9fdd";
+var collectionNameBorderColorLabel = "Collection Name Border Color";
+var sectionTagBorderColor = "Section Tag Border Color";
+var sectionTagDefaultvalue = "#3a9fdd";
+
+var configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "250px",
+    width: "300px"
+  });
+};
+
+var border = {
+  "default": "fullBorder",
+  noBorder: "noBorder"
+};
+withStore("Rows/Four Col Five Stories ", {
+  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),
+    borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+    theme: color(label, defaultvalue),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+    slotConfig: [{
+      type: "story",
+      component: configurableSlot
+    }],
+    showSection: _boolean("Section tag", true),
+    showAuthor: _boolean("Author", true),
+    showTime: _boolean("Timestamp", true),
+    footerButton: optionalSelect("Footer Button", footerButton),
+    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(FourColFiveStoriesBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});

package/components/Rows/FourColGrid/README.md

@@ -0,0 +1,39 @@
+# Four Column Grid
+
+The _FourColGrid_ component is a basic four column storycard [row](https://bradfrost.com/blog/post/atomic-web-design/#organisms).
+
+Last story of the four column grid supports an ad/widget slot.
+
+## Usage
+
+### Import
+```jsx
+import { FourColGrid } from "@quintype/arrow"
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+  theme: "#ffffff",
+  border: "",
+  collectionNameTemplate: "default",
+  sectionTagTemplate: "default",
+  showSection: true,
+  showAuthor: true,
+  showTime: true,
+  slotConfig: [{ type: "story", component: () => <AdOrWidget /> }],
+  showRowTitle: true,
+  showFooterButton: true,
+  buttonText: "Load More",
+  footerSlotConfig: { footerSlot: () => <FooterComponent /> },
+  subsequentLoadCount: 8
+};
+```
+
+### Use as a component
+```jsx
+<FourColGrid collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

package/components/Rows/FourColGrid/four-col.m.css

@@ -0,0 +1,50 @@
+@custom-media --viewport-medium (width >= 768px);
+.four-col-grid {
+  padding: 0 var(--arrow-spacing-s);
+  @media (--viewport-medium) {
+    padding: 0;
+  }
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: var(--arrow-spacing-xs) 0 0;
+  @media (--viewport-medium) {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: var(--arrow-spacing-l);
+    margin: var(--arrow-spacing-m) 0;
+  }
+}
+.story-card-wrapper {
+  margin-bottom: var(--arrow-spacing-m);
+  @media (--viewport-medium) {
+    margin-bottom: 0;
+  }
+}
+.wrapper > :first-child,
+.ad {
+  order: -1;
+  @media (--viewport-medium) {
+    order: 0;
+  }
+}
+.ad {
+  margin-bottom: 16px;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex-basis: 70%;
+  @media (--viewport-medium) {
+    flex-basis: 100%;
+  }
+}
+
+.four-col-grid :global(.arr--story-card .arr--hero-image) {
+  flex-basis: 40%;
+}
+.four-col-grid :global(.arr--story-card .arr--content-wrapper) {
+  flex-basis: 60%;
+}

package/{atoms/ExtendedLoadMore/index-2d713010.js → components/Rows/FourColGrid/index.js}

@@ -1,15 +1,18 @@
-import React, { Fragment } from 'react';
-import { S as StoryCard } from './index-6f8c780e.js';
-import { S as StorycardContent } from './index-f6e578e3.js';
-import { H as HeroImage } from './index-6cb56d1a.js';
-import { g as getTextColor, a as get_1, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
-import { C as CollectionName, S as StateProvider, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-aa8b8ab8.js';
-import { collectionToStories } from '@quintype/components';
-import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
-import 'react-timeago';
-import 'date-fns-tz';
-import 'react-dom';
+import React, { Fragment } from "react";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { get } from "lodash";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { generateNavigateSlug, getTextColor, navigateTo } from "../../../utils/utils";
+import { collectionToStories } from "@quintype/components";
+import PropTypes from "prop-types";
+import { StateProvider } from "../../SharedContext";
+import "./four-col.m.css";
+import { ProgressiveHydration } from "../../../hydration-component";
+import { useDispatch, useSelector } from "react-redux";
+import { LoadMoreTarget } from "../../Atoms/LoadMoreTarget";
 
 var loadMore = function loadMore(_ref) {
   var isLoading = _ref.isLoading,
@@ -24,7 +27,7 @@ var loadMore = function loadMore(_ref) {
   getMoreStories(offset, limit);
 };
 
-var FourColGridBase = function FourColGridBase(_ref2) {
+export var FourColGridBase = function FourColGridBase(_ref2) {
   var collection = _ref2.collection,
       _ref2$config = _ref2.config,
       config = _ref2$config === void 0 ? {} : _ref2$config,
@@ -58,7 +61,7 @@ var FourColGridBase = function FourColGridBase(_ref2) {
   var textColor = getTextColor(theme);
   var dispatch = useDispatch();
   var qtConfig = useSelector(function (state) {
-    return get_1(state, ["qt", "config"], {});
+    return get(state, ["qt", "config"], {});
   });
 
   var getLoadMore = function getLoadMore(opts) {
@@ -107,7 +110,7 @@ var FourColGridBase = function FourColGridBase(_ref2) {
     className: "four-col-m_wrapper__1vOV7"
   }, storyItems.map(function (story, index) {
     return /*#__PURE__*/React.createElement(Fragment, {
-      key: "story-4col-".concat(index, "-").concat(get_1(story, ["id"], "0"))
+      key: "story-4col-".concat(index, "-").concat(get(story, ["id"], "0"))
     }, /*#__PURE__*/React.createElement("div", {
       className: "four-col-m_story-card-wrapper__1e8p0",
       key: "default-".concat(index)
@@ -161,6 +164,4 @@ FourColGridBase.defaultProps = {
   isLoadMoreVisible: true,
   isLoading: false
 };
-var FourColGrid = StateProvider(FourColGridBase);
-
-export { FourColGrid, FourColGridBase };
+export var FourColGrid = StateProvider(FourColGridBase);

package/components/Rows/FourColGrid/stories.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates } from "../../../../storybook";
+import { FourColGridBase } from "./index";
+import Readme from "./README.md";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import { generateCollection } from "../../Fixture";
+var collection = generateCollection({
+  stories: 8
+});
+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 borderTemplate = {
+  "default": "",
+  border: "full"
+};
+var footerButton = {
+  SubsequentLoadCount: "SubsequentLoadCount",
+  NavigateToPage: "NavigateToPage"
+};
+
+var footerSlot = function footerSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, null);
+};
+
+withStore("Rows/Four Col Grid ", {
+  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),
+    borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+    theme: color(label, 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),
+    subsequentLoadCount: text("Subsequent Load", 8)
+  };
+  return /*#__PURE__*/React.createElement(FourColGridBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});

package/components/Rows/FourColPortraitStories/README.md

@@ -0,0 +1,38 @@
+# Four Col Portrait Stories
+
+The _FourColPortraitStories_ component is a basic four column portrait storycard [row](https://bradfrost.com/blog/post/atomic-web-design/#organisms).
+
+## Usage
+
+### Import
+
+```jsx
+import { FourColPortraitStories } from "@quintype/arrow";
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+  theme: "#ffffff",
+  border: "",
+  collectionNameTemplate: "default",
+  sectionTagTemplate: "default",
+  showSection: true,
+  showAuthor: true,
+  showTime: true,
+  showRowTitle: true,
+  showFooterButton: true,
+  buttonText: "Load More",
+  footerSlotConfig: { footerSlot: () => <FooterComponent /> },
+  subsequentLoadCount: 8
+};
+```
+
+### Use as a component
+
+```jsx
+<FourColPortraitStories collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

package/components/Rows/FourColPortraitStories/four-col-portrait-stories.m.css

@@ -0,0 +1,45 @@
+@custom-media --viewport-medium (width > 1024px);
+.four-col-portrait {
+  padding: 0 var(--arrow-spacing-s);
+
+  @media (--viewport-medium) {
+    padding: 0;
+  }
+}
+
+.wrapper {
+  display: grid;
+  margin: var(--arrow-spacing-xs) 0 0;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: var(--arrow-spacing-s);
+
+  @media (--viewport-medium) {
+    grid-template-columns: repeat(4, 1fr);
+    margin: var(--arrow-spacing-m) 0;
+    grid-gap: var(--arrow-spacing-l);
+  }
+
+  :global {
+    .arr--headline > a > h6 {
+      font-size: var(--arrow-fs-tiny);
+      @media (--viewport-medium) {
+        font-size: var(--arrow-fs-xs);
+      }
+    }
+
+    .arr--content-wrapper time,
+    .arr--read-time,
+    .author-name {
+      font-size: 12px;
+      @media (--viewport-medium) {
+        font-size: var(--arrow-fs-tiny);
+      }
+    }
+  }
+
+  @media (max-width: 1024px) and (min-width: 768px) {
+    :global .arr--headline > a > h6 {
+      font-size: var(--arrow-fs-l);
+    }
+  }
+}

package/{atoms/ExtendedLoadMore/index-7eb05b3d.js → components/Rows/FourColPortraitStories/index.js}

@@ -1,60 +1,16 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { i as isEmpty, g as getTextColor, a as get_1, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
-import PropTypes from 'prop-types';
-import { collectionToStories } from '@quintype/components';
-import { S as StateProvider, C as CollectionName, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-aa8b8ab8.js';
-import { S as StoryCard } from './index-6f8c780e.js';
-import { S as StorycardContent } from './index-f6e578e3.js';
-import { H as HeroImage } from './index-6cb56d1a.js';
-import 'react-timeago';
-import 'date-fns-tz';
-import 'react-dom';
-
-var PortraitStoryCardBase = function PortraitStoryCardBase(_ref) {
-  var story = _ref.story,
-      _ref$border = _ref.border,
-      border = _ref$border === void 0 ? "" : _ref$border,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? "" : _ref$theme,
-      _ref$headerLevel = _ref.headerLevel,
-      headerLevel = _ref$headerLevel === void 0 ? "6" : _ref$headerLevel,
-      _ref$separator = _ref.separator,
-      separator = _ref$separator === void 0 ? "" : _ref$separator,
-      _ref$config = _ref.config,
-      config = _ref$config === void 0 ? {} : _ref$config,
-      _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "" : _ref$borderColor;
-  if (isEmpty(story)) return null;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "portrait-story-card-m_wrapper__3nche"
-  }, /*#__PURE__*/React.createElement(StoryCard, {
-    story: story,
-    border: border,
-    theme: theme,
-    config: config,
-    useImageAsBackground: true
-  }, /*#__PURE__*/React.createElement(HeroImage, {
-    story: story,
-    aspectRatio: [[9, 16]]
-  }), /*#__PURE__*/React.createElement(StorycardContent, {
-    story: story,
-    config: config,
-    separator: separator,
-    borderColor: borderColor,
-    headerLevel: headerLevel
-  })));
-};
-PortraitStoryCardBase.propTypes = {
-  border: PropTypes.string,
-  theme: PropTypes.string,
-  headerLevel: PropTypes.string,
-  separator: PropTypes.string,
-  borderColor: PropTypes.string,
-  config: PropTypes.object,
-  story: PropTypes.object
-};
-var PortraitStoryCard = StateProvider(PortraitStoryCardBase);
+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 { CollectionName } from "../../Atoms/CollectionName";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { generateNavigateSlug, getTextColor, navigateTo } from "../../../utils/utils";
+import { StateProvider } from "../../SharedContext";
+import { ProgressiveHydration } from "../../../hydration-component";
+import { LoadMoreTarget } from "../../Atoms/LoadMoreTarget";
+import { PortraitStoryCard } from "../../Molecules/PortraitStoryCard";
+import "./four-col-portrait-stories.m.css";
 
 var loadMore = function loadMore(_ref) {
   var isLoading = _ref.isLoading,
@@ -69,7 +25,7 @@ var loadMore = function loadMore(_ref) {
   getMoreStories(offset, limit);
 };
 
-var FourColPortraitStoriesBase = function FourColPortraitStoriesBase(_ref2) {
+export var FourColPortraitStoriesBase = function FourColPortraitStoriesBase(_ref2) {
   var collection = _ref2.collection,
       _ref2$config = _ref2.config,
       config = _ref2$config === void 0 ? {} : _ref2$config,
@@ -103,7 +59,7 @@ var FourColPortraitStoriesBase = function FourColPortraitStoriesBase(_ref2) {
   var textColor = getTextColor(theme);
   var dispatch = useDispatch();
   var qtConfig = useSelector(function (state) {
-    return get_1(state, ["qt", "config"], {});
+    return get(state, ["qt", "config"], {});
   });
 
   var getLoadMore = function getLoadMore(opts) {
@@ -194,6 +150,4 @@ FourColPortraitStoriesBase.defaultProps = {
   isLoadMoreVisible: true,
   isLoading: false
 };
-var FourColPortraitStories = StateProvider(FourColPortraitStoriesBase);
-
-export { FourColPortraitStories, FourColPortraitStoriesBase };
+export var FourColPortraitStories = StateProvider(FourColPortraitStoriesBase);

package/components/Rows/FourColPortraitStories/stories.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates } from "../../../../storybook";
+import { FourColPortraitStoriesBase } from "./index";
+import Readme from "./README.md";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import { generateCollection } from "../../Fixture";
+var collection = generateCollection({
+  stories: 8
+});
+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 borderTemplate = {
+  "default": "",
+  border: "full"
+};
+var footerButton = {
+  SubsequentLoadCount: "SubsequentLoadCount",
+  NavigateToPage: "NavigateToPage"
+};
+
+var footerSlot = function footerSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, null);
+};
+
+withStore("Rows/Four Col Portrait Stories ", {
+  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),
+    borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+    theme: color(label, defaultvalue),
+    border: optionalSelect("Border", borderTemplate),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+    showSection: _boolean("section disable", false),
+    showAuthor: _boolean("Author disable", false),
+    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", false),
+    subsequentLoadCount: text("Subsequent Load", 8)
+  };
+  return /*#__PURE__*/React.createElement(FourColPortraitStoriesBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});

package/components/Rows/FourColSixteenStories/README.md

@@ -0,0 +1,35 @@
+# Four Col Sixteen Stories
+
+The _FourColSixteenStories_ component accepts collection of collections.
+
+## Usage
+
+### Import
+```jsx
+import { FourColSixteenStories } from "@quintype/arrow"
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+  theme: "#ffffff",
+  collectionNameTemplate: "default",
+  sectionTagTemplate: "solid",
+  showSection: true,
+  showRowTitle: true,
+  showAuthor: true,
+  showTime: true,
+  showSubheadline: true,
+  withseparator: true,
+  showFooterButton: false,
+  buttonText: "Read More",
+};
+```
+
+### Use as a component
+```jsx
+<FourColSixteenStories collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->