@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.8

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { generateMagazineIssues } from "../../Fixture";
+import { MagazineEditionsBase } from "./index";
+import Readme from "./README.md";
+import { color, text, boolean as _boolean } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, collectionNameTemplates } from "../../../../storybook";
+var magazineCollection = generateMagazineIssues();
+var footerButton = {
+  SubsequentLoadCount: "SubsequentLoadCount",
+  CustomUrlPath: "CustomUrlPath"
+};
+var collectionNameDefaultValue = "#3a9fdd";
+var collectionNameBorderColorLabel = "Collection Name Border Color";
+withStore("Rows/Magazine Editions", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).add("Magazine Editions", function () {
+  var 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 /*#__PURE__*/React.createElement(MagazineEditionsBase, {
+    collection: magazineCollection,
+    config: contextConfig,
+    showLoadmore: true
+  });
+});

package/esm/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}>
+
+```

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

@@ -0,0 +1,117 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./magazine-cards.m.css": {
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "tablet": "992px",
+    "magazine-header": "magazine-cards-m_magazine-header__2pSI3",
+    "content": "magazine-cards-m_content__16_KC",
+    "time": "magazine-cards-m_time__3DIrk",
+    "story-cards": "magazine-cards-m_story-cards__1mNHC",
+    "widget": "magazine-cards-m_widget__2aE9g",
+    "intro-button": "magazine-cards-m_intro-button__3J5c6",
+    "widget-button": "magazine-cards-m_widget-button__3P7F7",
+    "summary": "magazine-cards-m_summary__2jUgG",
+    "dark": "magazine-cards-m_dark__3CSmK",
+    "light": "magazine-cards-m_light__33r9r"
+  }
+};
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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 PropTypes from "prop-types";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { generateNavigateSlug, getTextColor, getTimeStamp, navigateTo, timestampToFormat } from "../../../utils/utils";
+import "./magazine-cards.m.css";
+import { StateProvider } from "../../SharedContext";
+import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
+import { useDispatch, useSelector } from "react-redux";
+import { get, upperCase } from "lodash";
+export var MagazineHeaderCardBase = function MagazineHeaderCardBase(_ref) {
+  var _ref$collection = _ref.collection,
+      collection = _ref$collection === void 0 ? {} : _ref$collection,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var createdAt = collection["created-at"],
+      issueDate = collection["collection-date"],
+      summary = collection.summary;
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$customUrlPath = config.customUrlPath,
+      customUrlPath = _config$customUrlPath === void 0 ? "" : _config$customUrlPath,
+      _config$magazineTitle = config.magazineTitle,
+      magazineTitle = _config$magazineTitle === void 0 ? "" : _config$magazineTitle,
+      _config$magazinePageU = config.magazinePageUrl,
+      magazinePageUrl = _config$magazinePageU === void 0 ? "" : _config$magazinePageU,
+      _config$magazineSlug = config.magazineSlug,
+      magazineSlug = _config$magazineSlug === void 0 ? "" : _config$magazineSlug;
+  var textColor = getTextColor(theme);
+  var dispatch = useDispatch();
+  var qtConfig = useSelector(function (state) {
+    return get(state, ["qt", "config"], {});
+  });
+  var url = generateNavigateSlug(collection, qtConfig, customUrlPath);
+  var date = issueDate || createdAt;
+  var timeStampConfig = {
+    isUpperCase: true,
+    disableMeridiem: true
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "full-width-with-padding arrow-component",
+    style: {
+      backgroundColor: theme
+    },
+    "data-test-id": "magazine-header-card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arr-magazine-card magazine-cards-m_magazine-header__2pSI3 magazine-cards-m_intro-button__3J5c6"
+  }, /*#__PURE__*/React.createElement(MagazineCoverImageCard, {
+    collection: collection,
+    config: _objectSpread(_objectSpread({}, config), {}, {
+      magazineSlug: magazineSlug
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "magazine-cards-m_content__16_KC"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "title-time",
+    className: _getClassName("time ".concat(textColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("a", {
+    href: magazinePageUrl,
+    "data-test-id": "magazine-title",
+    "aria-label": "magazine-title"
+  }, upperCase(magazineTitle)), "\xA0 | \xA0", getTimeStamp(date, timestampToFormat, timeStampConfig)), /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    headerLevel: "2",
+    navigate: false
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "magazine-summary",
+    className: _getClassName("summary ".concat(textColor), _styleModuleImportMap)
+  }, summary), /*#__PURE__*/React.createElement(LoadmoreButton, {
+    collection: collection,
+    template: "customUrlPath",
+    config: config,
+    navigate: function navigate() {
+      return navigateTo(dispatch, url);
+    },
+    qtConfig: qtConfig
+  }))));
+};
+MagazineHeaderCardBase.propTypes = {
+  collection: PropTypes.shape({
+    "created-at": PropTypes.number,
+    summary: PropTypes.string,
+    items: PropTypes.array
+  }),
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    footerButton: PropTypes.string,
+    magazineTitle: PropTypes.string,
+    magazinePageUrl: PropTypes.string,
+    customUrlPath: PropTypes.string
+  })
+};
+export var MagazineHeaderCard = StateProvider(MagazineHeaderCardBase);

package/esm/components/Rows/MagazineHeaderCard/magazine-cards.m.css

@@ -0,0 +1,106 @@
+@value viewports: "../../../stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.magazine-header {
+  display: grid;
+  grid-gap: var(--arrow-fs-l);
+  margin: 0 var(--arrow-fs-xs);
+  @media (min-width: mobile) {
+    grid-template-columns: 1fr 3fr;
+  }
+  @media (min-width: tablet) {
+    margin: 0 0 var(--arrow-spacing-xs);
+    grid-row-gap: 0;
+    grid-column-gap: 48px;
+  }
+}
+
+.content {
+  text-align: center;
+  @media (min-width: mobile) {
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+.time {
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-1);
+}
+
+.magazine-header :global(.arr--collection-name) {
+  margin: var(--arrow-spacing-xs) 0;
+}
+
+.story-cards {
+  display: grid;
+  grid-gap: var(--arrow-fs-xs);
+  grid-template-columns: 1fr;
+  @media (min-width: mobile) {
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--arrow-spacing-l);
+  }
+  :global(.arr--story-card) {
+    display: grid;
+    grid-template-columns: 1fr 4fr;
+  }
+}
+
+.widget {
+  margin-top: var(--arrow-spacing-xl);
+  @media (min-width: mobile) {
+    grid-column: 1/3;
+    margin-top: var(--arrow-spacing-l);
+  }
+}
+
+.intro-button :global(.arr--button) {
+  @media (min-width: mobile) {
+    margin: var(--arrow-spacing-l) 0 0;
+  }
+}
+
+.widget-button :global(.arr--button) {
+  @media (min-width: tablet) {
+    margin: var(--arrow-spacing-l) 0 0;
+  }
+}
+
+.summary {
+  font-size: var(--arrow-fs-xs);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-s);
+  }
+}
+
+.summary.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.summary.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+html[dir="rtl"] {
+  .time {
+    direction: ltr;
+    text-align: right;
+  }
+
+  .intro-button :global(.arr--button) {
+    @media (min-width: mobile) {
+      margin: var(--arrow-spacing-l) 0 0;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { generateCollection } from "../../Fixture";
+import { MagazineHeaderCardBase } from "./index";
+import Readme from "./README.md";
+import { boolean as _boolean, color, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect } from "../../../../storybook";
+var collection = generateCollection({
+  stories: 4
+});
+var footerButton = {
+  NavigateToPage: "NavigateToPage",
+  CustomUrlPath: "CustomUrlPath"
+};
+withStore("Rows/Magazine Header Card", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).add("Magazine header card", function () {
+  var contextConfig = {
+    theme: color("Color", "#ffffff"),
+    showButton: _boolean("Show button", true),
+    buttonText: text("Button text", "Subscribe"),
+    footerButton: optionalSelect("Button Settings", footerButton),
+    customUrlPath: text("Custom URL", ""),
+    magazineTitle: "Fortune"
+  };
+  return /*#__PURE__*/React.createElement(MagazineHeaderCardBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});

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

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

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

@@ -0,0 +1,177 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "../MagazineHeaderCard/magazine-cards.m.css": {
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "tablet": "992px",
+    "magazine-header": "magazine-cards-m_magazine-header__2pSI3",
+    "content": "magazine-cards-m_content__16_KC",
+    "time": "magazine-cards-m_time__3DIrk",
+    "story-cards": "magazine-cards-m_story-cards__1mNHC",
+    "widget": "magazine-cards-m_widget__2aE9g",
+    "intro-button": "magazine-cards-m_intro-button__3J5c6",
+    "widget-button": "magazine-cards-m_widget-button__3P7F7",
+    "summary": "magazine-cards-m_summary__2jUgG",
+    "dark": "magazine-cards-m_dark__3CSmK",
+    "light": "magazine-cards-m_light__33r9r"
+  }
+};
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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 PropTypes from "prop-types";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { getTextColor, getTimeStamp, clientWidth, generateNavigateSlug, navigateTo, timestampToFormat } from "../../../utils/utils";
+import "../MagazineHeaderCard/magazine-cards.m.css";
+import { StateProvider } from "../../SharedContext";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { Headline } from "../../Atoms/Headline";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
+import { useDispatch, useSelector } from "react-redux";
+import { get } from "lodash";
+export var MagazineWidgetBase = function MagazineWidgetBase(_ref) {
+  var _ref$collection = _ref.collection,
+      collection = _ref$collection === void 0 ? {} : _ref$collection,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var createdAt = collection["created-at"],
+      issueDate = collection["collection-date"],
+      summary = collection.summary,
+      items = collection.items,
+      _collection$metadata = collection.metadata,
+      metadata = _collection$metadata === void 0 ? {} : _collection$metadata;
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$footerButton = config.footerButton,
+      footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
+      border = config.border,
+      _config$localizationC = config.localizationConfig,
+      localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC,
+      _config$navigate = config.navigate,
+      navigate = _config$navigate === void 0 ? true : _config$navigate,
+      _config$magazineSlug = config.magazineSlug,
+      magazineSlug = _config$magazineSlug === void 0 ? "" : _config$magazineSlug;
+  var textColor = getTextColor(theme);
+  var dispatch = useDispatch();
+  var qtConfig = useSelector(function (state) {
+    return get(state, ["qt", "config"], {});
+  });
+  var updatedMagazineSlug = magazineSlug || get(metadata, ["entities", "collectionEntities", "magazine", 0, "slug"], "");
+
+  var updatedConfig = _objectSpread(_objectSpread({}, config), {}, {
+    magazineSlug: updatedMagazineSlug
+  });
+
+  var url = generateNavigateSlug(collection, _objectSpread(_objectSpread({}, qtConfig), updatedConfig));
+  var sliceValue = 4;
+  var isTablet = clientWidth("tablet");
+  var timeStampConfig = {
+    isUpperCase: true,
+    disableMeridiem: true
+  };
+  var date = issueDate || createdAt;
+
+  var storyCards = function storyCards(items) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "magazine-cards-m_story-cards__1mNHC"
+    }, items.slice(0, sliceValue).map(function (storyItems, index) {
+      var story = storyItems.story;
+      var isMobile = clientWidth("mobile");
+
+      var borderBottom = function borderBottom() {
+        var lastStoryIndex = 3;
+        var lastTwoStoriesIndex = [2, 3];
+
+        if (isMobile && !lastStoryIndex === index) {
+          return "bottom";
+        }
+
+        if (!lastTwoStoriesIndex.includes(index)) {
+          return "bottom";
+        }
+      };
+
+      var borderSettings = border === "borderBottom" ? borderBottom() : "";
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StoryCard, {
+        story: story,
+        border: borderSettings,
+        isHorizontal: true,
+        config: config
+      }, /*#__PURE__*/React.createElement(HeroImage, {
+        story: story,
+        isHorizontal: true,
+        aspectRatio: [[4, 3]]
+      }), /*#__PURE__*/React.createElement(StorycardContent, {
+        story: story,
+        config: config
+      }, /*#__PURE__*/React.createElement(Headline, {
+        story: story,
+        premiumStoryIconConfig: config
+      }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+        config: localizationConfig,
+        story: story,
+        prefix: "By"
+      }))));
+    }));
+  };
+
+  var bottomCard = function bottomCard() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "magazine-cards-m_widget__2aE9g"
+    }, storyCards(items), /*#__PURE__*/React.createElement(LoadmoreButton, {
+      collection: collection,
+      template: footerButton,
+      config: updatedConfig,
+      navigate: function navigate() {
+        return navigateTo(dispatch, url);
+      },
+      qtConfig: qtConfig
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "full-width-with-padding arrow-component",
+    style: {
+      backgroundColor: theme
+    },
+    "data-test-id": "magazine-widget"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arr-magazine-widget magazine-cards-m_magazine-header__2pSI3 magazine-cards-m_widget-button__3P7F7"
+  }, /*#__PURE__*/React.createElement(MagazineCoverImageCard, {
+    collection: collection,
+    config: updatedConfig
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "magazine-cards-m_content__16_KC"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "widget-date",
+    className: _getClassName("time ".concat(textColor), _styleModuleImportMap)
+  }, getTimeStamp(date, timestampToFormat, timeStampConfig)), /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    config: config,
+    navigate: navigate
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "widget-summary",
+    className: _getClassName("summary ".concat(textColor), _styleModuleImportMap)
+  }, summary), !isTablet && bottomCard()), isTablet && bottomCard()));
+};
+MagazineWidgetBase.propTypes = {
+  collection: PropTypes.shape({
+    "created-at": PropTypes.number,
+    summary: PropTypes.string,
+    items: PropTypes.array
+  }),
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    footerButton: PropTypes.string,
+    border: PropTypes.string
+  })
+};
+export var MagazineWidget = StateProvider(MagazineWidgetBase);

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { generateCollection } from "../../Fixture";
+import { MagazineWidgetBase } from "./index";
+import Readme from "./README.md";
+import { boolean as _boolean, color, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect } from "../../../../storybook";
+var collection = generateCollection({
+  stories: 4
+});
+var footerButton = {
+  NavigateToPage: "NavigateToPage",
+  CustomUrlPath: "CustomUrlPath"
+};
+var border = {
+  "default": "borderNone",
+  borderBottom: "borderBottom"
+};
+withStore("Rows/Magazine Widget", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).add("Magazine Widget", function () {
+  var contextConfig = {
+    theme: color("Color", "#ffffff"),
+    showButton: _boolean("Show button", true),
+    buttonText: text("Button text", "Subscribe"),
+    footerButton: optionalSelect("Button Settings", footerButton),
+    customUrlPath: text("Custom URL", ""),
+    showAuthor: _boolean("Show Author", true),
+    showTime: _boolean("Show Time", true),
+    border: optionalSelect("Border settings", border)
+  };
+  return /*#__PURE__*/React.createElement(MagazineWidgetBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});

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

@@ -0,0 +1,48 @@
+# One Column Story List
+
+The _OneColStoryList_ component is a basic [row](https://bradfrost.com/blog/post/atomic-web-design/#organisms) with a list of storycards.
+
+## Usage
+
+### Import
+```jsx
+import { OneColStoryList } from "@quintype/arrow"
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+  theme: "#ffffff",
+  collectionNameTemplate: "default",
+  sectionTagTemplate: "default",
+  border: "bottom",
+  showSection: true,
+  showAuthor: true,
+  showTime: true,
+  slotConfig: [{ type: "ad", component: () => <CustomAdOrWidget /> }],
+  showFooterButton: true,
+  buttonText: "Load More",
+  showRowTitle: true,
+  footerSlotConfig: { footerSlot: () => <CustomFooterComponent /> }
+};
+```
+
+### Use as a component
+
+#### Default Usage
+```jsx
+<OneColStoryList story={story} theme="#ffffff" />
+```
+
+#### OneColStoryList with border bottom
+
+```jsx
+<OneColStoryList story={story} border="bottom" theme="#ffffff"/>
+```
+
+#### OneColStoryList with full border
+
+```jsx
+<OneColStoryList story={story} border="full" theme="#ffffff">
+```