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

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

@@ -0,0 +1,164 @@
+import _toArray from "@babel/runtime/helpers/toArray";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { collectionToStories } from "@quintype/components";
+import { StateProvider } from "../../SharedContext";
+import { generateNavigateSlug, getTextColor, navigateTo, rgbToHex } from "../../../utils/utils";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { Headline } from "../../Atoms/Headline";
+import { SectionTag } from "../../Atoms/SectionTag";
+import { Subheadline } from "../../Atoms/Subheadline";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { useDispatch, useSelector } from "react-redux";
+import { get } from "lodash";
+import "./two-col-four-story-highlight.m.css";
+var _styleModuleImportMap = {
+  "./two-col-four-story-highlight.m.css": {
+    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "desktop": "1025px",
+    "componentWrapper": "two-col-four-story-highlight-m_componentWrapper__1MNn3",
+    "bulletCardWrapper": "two-col-four-story-highlight-m_bulletCardWrapper__2GVby",
+    "bullet": "two-col-four-story-highlight-m_bullet__2WeXf",
+    "dark": "two-col-four-story-highlight-m_dark__1Lqym",
+    "light": "two-col-four-story-highlight-m_light__IKs4n",
+    "bulletStyle": "two-col-four-story-highlight-m_bulletStyle__1QfgG",
+    "highlightWrapper": "two-col-four-story-highlight-m_highlightWrapper__1FXMf",
+    "coverCardWrapper": "two-col-four-story-highlight-m_coverCardWrapper__1vnU8",
+    "storyHighlightWrapper": "two-col-four-story-highlight-m_storyHighlightWrapper__1Jl9S"
+  }
+};
+export var TwoColFourStoryHighlightBase = function TwoColFourStoryHighlightBase(_ref) {
+  var collection = _ref.collection,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var items = collectionToStories(collection);
+
+  if (!items.length) {
+    return null;
+  }
+
+  var _config$showBorder = config.showBorder,
+      showBorder = _config$showBorder === void 0 ? true : _config$showBorder,
+      _config$borderColor = config.borderColor,
+      borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
+      _config$collectionNam = config.collectionNameBorderColor,
+      collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$collectionNam2 = config.collectionNameTemplate,
+      collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
+      _config$showBullet = config.showBullet,
+      showBullet = _config$showBullet === void 0 ? true : _config$showBullet,
+      _config$customBulletC = config.customBulletColor,
+      customBulletColor = _config$customBulletC === void 0 ? "" : _config$customBulletC,
+      _config$localizationC = config.localizationConfig,
+      localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC,
+      _config$bulletColorTy = config.bulletColorType,
+      bulletColorType = _config$bulletColorTy === void 0 ? "default" : _config$bulletColorTy;
+  var textColor = getTextColor(theme);
+
+  var _items = _toArray(items),
+      firstStory = _items[0],
+      restStories = _items.slice(1);
+
+  var dispatch = useDispatch();
+  var qtConfig = useSelector(function (state) {
+    return get(state, ["qt", "config"], {});
+  });
+  var url = generateNavigateSlug(collection, qtConfig);
+  var SectionTagBorderColor = rgbToHex(borderColor);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "two-col-four-story-highlight",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    },
+    className: "full-width-with-padding arrow-component arr--two-col-four-story-highlight " + _getClassName("componentWrapper ".concat(showBullet ? "bulletStyle" : ""), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "two-col-four-story-highlight-m_highlightWrapper__1FXMf"
+  }, /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: collectionNameTemplate,
+    collectionNameBorderColor: collectionNameBorderColor
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "two-col-four-story-highlight-m_storyHighlightWrapper__1Jl9S"
+  }, restStories.slice(0, 3).map(function (story, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "two-col-four-story-highlight-m_bulletCardWrapper__2GVby",
+      key: index
+    }, showBullet && /*#__PURE__*/React.createElement("span", {
+      "data-test-id": "bullet",
+      style: {
+        color: customBulletColor
+      },
+      className: _getClassName("bullet ".concat(bulletColorType === "default" ? textColor : ""), _styleModuleImportMap)
+    }), /*#__PURE__*/React.createElement(StoryCard, {
+      story: story,
+      bgImgContentOverlap: true,
+      config: config,
+      border: showBorder ? "bottom" : "",
+      theme: theme
+    }, /*#__PURE__*/React.createElement(StorycardContent, {
+      story: story,
+      borderColor: SectionTagBorderColor
+    })));
+  })), /*#__PURE__*/React.createElement(LoadmoreButton, {
+    template: "NavigateToPage",
+    collection: collection,
+    config: config,
+    navigate: function navigate() {
+      return navigateTo(dispatch, url);
+    },
+    qtConfig: qtConfig
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "two-col-four-story-highlight-m_coverCardWrapper__1vnU8"
+  }, /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: collectionNameTemplate,
+    collectionNameBorderColor: collectionNameBorderColor
+  }), /*#__PURE__*/React.createElement(StoryCard, {
+    story: firstStory,
+    bgImgContentOverlap: true,
+    config: config,
+    border: showBorder ? "full" : "",
+    theme: theme
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    story: firstStory
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    }
+  }, /*#__PURE__*/React.createElement(SectionTag, {
+    story: firstStory,
+    borderColor: SectionTagBorderColor
+  }), /*#__PURE__*/React.createElement(Headline, {
+    story: firstStory,
+    headerLevel: 4,
+    premiumStoryIconConfig: config
+  }), /*#__PURE__*/React.createElement(Subheadline, {
+    story: firstStory
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    config: localizationConfig,
+    story: firstStory
+  })))));
+};
+TwoColFourStoryHighlightBase.propTypes = {
+  collection: PropTypes.object.isRequired,
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    showBorder: PropTypes.bool,
+    collectionNameTemplate: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string,
+    borderColor: PropTypes.string,
+    showBullet: PropTypes.bool,
+    localizationConfig: PropTypes.object
+  })
+};
+export var TwoColFourStoryHighlight = StateProvider(TwoColFourStoryHighlightBase);

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates } from "../../../../storybook";
+import { TwoColFourStoryHighlightBase } from "./index";
+import Readme from "./README.md";
+import { generateCollection } from "../../Fixture";
+var collection = generateCollection({
+  stories: 4
+});
+var bulletColorTypeTemplates = {
+  "default": "Default",
+  custom: "Custom"
+};
+withStore("Rows/Two Col Four Story Highlight ", {
+  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("Collection Name Border Color", "#3a9fdd"),
+    borderColor: color("Section Tag Border Color", "#3a9fdd"),
+    theme: color("color", "#ffffff"),
+    showBorder: _boolean("Show Border", true),
+    collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+    sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+    showSection: _boolean("Show Section", true),
+    showAuthor: _boolean("Show Author", true),
+    showTime: _boolean("Show Time", true),
+    buttonText: text("Footer text", "Read More"),
+    showRowTitle: _boolean("Row title", true),
+    showButton: _boolean("Show button", true),
+    showReadTime: _boolean("Read time", true),
+    showBullet: _boolean("Show Bullet", true),
+    customBulletColor: color("Bullet Color", ""),
+    bulletColorType: optionalSelect("Bullet Color Type", bulletColorTypeTemplates)
+  };
+  return /*#__PURE__*/React.createElement(TwoColFourStoryHighlightBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});

package/esm/components/Rows/TwoColFourStoryHighlight/two-col-four-story-highlight.m.css

@@ -0,0 +1,116 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value desktop from viewports;
+
+.componentWrapper:global(.arrow-component.full-width-with-padding) {
+  display: flex;
+  flex-direction: column-reverse;
+  @media (min-width: mobile) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: var(--arrow-spacing-l);
+  }
+  @media (min-width: mobile) and (max-width: desktop) {
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-s) var(--arrow-spacing-xs) var(--arrow-spacing-s);
+  }
+}
+
+.bulletCardWrapper {
+  display: flex;
+  margin-bottom: var(--arrow-spacing-m);
+}
+
+.componentWrapper :global(.arr--button) {
+  margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-xs);
+}
+
+.bullet {
+  position: relative;
+  width: var(--arrow-spacing-s);
+  margin-right: var(--arrow-spacing-s);
+  margin-left: 0;
+}
+
+.bullet:before,
+.bullet.dark:before {
+  content: "";
+  border-style: solid;
+  border-width: var(--arrow-spacing-xxs) var(--arrow-spacing-xxs) var(--arrow-spacing-xxs) var(--arrow-spacing-xs);
+  border-color: transparent transparent transparent var(--arrow-c-mono2);
+  position: absolute;
+  top: var(--arrow-spacing-xxs);
+}
+
+.bullet.light:before {
+  border-color: transparent transparent transparent var(--arrow-c-invert-mono2);
+}
+
+.bullet:before {
+  border-color: transparent transparent transparent currentColor;
+}
+
+.bulletStyle :global(.arr--button) {
+  margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-xs) 22px;
+}
+
+.highlightWrapper :global(.arr--collection-name) {
+  @media (max-width: mobile) {
+    display: none;
+  }
+}
+
+.coverCardWrapper :global(.arr--collection-name) {
+  @media (min-width: mobile) {
+    display: none;
+  }
+
+  @media (max-width: mobile) {
+    padding: 0 var(--arrow-spacing-s);
+  }
+}
+
+.coverCardWrapper {
+  @media (max-width: mobile) {
+    margin-bottom: var(--arrow-spacing-l);
+  }
+}
+
+.storyHighlightWrapper :global(.arr--story-card) {
+  width: 100%;
+}
+
+.highlightWrapper{
+  @media (max-width: mobile) {
+    padding: 0 var(--arrow-spacing-s) var(--arrow-spacing-m) var(--arrow-spacing-s);
+  }
+}
+
+.coverCardWrapper :global(.arr--story-card) > :nth-child(2) {
+  @media (max-width: mobile) {
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-s);
+  }
+}
+
+.storyHighlightWrapper > :last-child :global(.arr--story-card) {
+  border-bottom: none;
+  @media (min-width: mobile) {
+    padding-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+html[dir="rtl"] {
+  .bullet {
+    transform: rotate(180deg);
+    margin-left: var(--arrow-spacing-s);
+    margin-right: 0;
+  }
+
+  .bullet::before {
+    top: unset;
+    bottom: var(--arrow-spacing-xxs);
+  }
+
+  .bulletStyle :global(.arr--button) {
+    margin: var(--arrow-spacing-m) 22px var(--arrow-spacing-xs) 0;
+  }
+}

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

@@ -0,0 +1,37 @@
+# Two Col Seven Stories
+
+The _TwoColSevenStories_ component is a [row](https://bradfrost.com/blog/post/atomic-web-design/#organisms) with seven StoryCards. The last two cards combined is a configurable slot which can be replaced by an AD.
+
+## Usage
+
+### Import
+
+```jsx
+import { TwoColSevenStories } from "@quintype/arrow";
+```
+
+### Setting the Row context
+
+```jsx
+const contextConfig = {
+  theme: "#ffffff",
+  border: "",
+  collectionNameTemplate: "default",
+  sectionTagTemplate: "default",
+  showSection: true,
+  showAuthor: true,
+  showTime: true,
+  showFooterButton: true,
+  buttonText: "LoadMore",
+  showRowTitle: true,
+  footerSlotConfig: { footerSlot: () => <CustomFooterComponent /> }
+};
+```
+
+### Use as a component
+
+```jsx
+<TwoColSevenStories collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

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

@@ -0,0 +1,193 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { collectionToStories } from "@quintype/components";
+import { CollectionName } from "../../Atoms/CollectionName";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { StorycardContent } from "../../Molecules/StorycardContent";
+import { StoryCard } from "../../Molecules/StoryCard";
+import { StateProvider } from "../../SharedContext";
+import { generateNavigateSlug, getTextColor, navigateTo, getSlot, rgbToHex } from "../../../utils/utils";
+import { Headline } from "../../Atoms/Headline";
+import { Subheadline } from "../../Atoms/Subheadline";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { SectionTag } from "../../Atoms/SectionTag";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import "./two-col-seven-stories.m.css";
+import { useDispatch, useSelector } from "react-redux";
+import { get } from "lodash";
+var _styleModuleImportMap = {
+  "./two-col-seven-stories.m.css": {
+    "two-col-seven-story": "two-col-seven-stories-m_two-col-seven-story__Uqk1n",
+    "wrapper": "two-col-seven-stories-m_wrapper__21m9m",
+    "divider": "two-col-seven-stories-m_divider__ptHXc",
+    "dark": "two-col-seven-stories-m_dark__1Rpas",
+    "light": "two-col-seven-stories-m_light__2r8sA",
+    "first-card": "two-col-seven-stories-m_first-card__qcm7t",
+    "storycard": "two-col-seven-stories-m_storycard__2ed9q",
+    "border-full": "two-col-seven-stories-m_border-full__el1DX",
+    "other-cards": "two-col-seven-stories-m_other-cards__Y37uk",
+    "ad-wrapper": "two-col-seven-stories-m_ad-wrapper__z3iIX",
+    "blink": "two-col-seven-stories-m_blink__2Y25W"
+  }
+};
+export var TwoColSevenStoriesBase = function TwoColSevenStoriesBase(_ref) {
+  var collection = _ref.collection,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var items = collectionToStories(collection);
+  var _config$border = config.border,
+      border = _config$border === void 0 ? "" : _config$border,
+      _config$borderColor = config.borderColor,
+      borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
+      _config$collectionNam = config.collectionNameBorderColor,
+      collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$collectionNam2 = config.collectionNameTemplate,
+      collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
+      _config$footerButton = config.footerButton,
+      footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
+      _config$slotConfig = config.slotConfig,
+      slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig;
+
+  if (items.length < 1) {
+    return null;
+  }
+
+  var dispatch = useDispatch();
+  var qtConfig = useSelector(function (state) {
+    return get(state, ["qt", "config"], {});
+  });
+  var url = generateNavigateSlug(collection, qtConfig);
+
+  var _get = get(slotConfig, [0], {}),
+      _get$type = _get.type,
+      type = _get$type === void 0 ? "story" : _get$type,
+      component = _get.component;
+
+  var isAdWidgetEnabled = type === "ad" || type === "widget";
+  var adWidgetSlot = isAdWidgetEnabled ? getSlot(type, component) : null;
+  var textColor = getTextColor(theme);
+  var sectionTagBorderColor = rgbToHex(borderColor);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "full-width-with-padding arrow-component",
+    "data-test-id": "two-col-seven-stories",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "two-col-seven-stories-m_two-col-seven-story__Uqk1n"
+  }, /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: collectionNameTemplate,
+    collectionNameBorderColor: collectionNameBorderColor
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "two-col-seven-stories-m_wrapper__21m9m"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "first-card two-col-seven-stories-m_first-card__qcm7t"
+  }, /*#__PURE__*/React.createElement(StoryCard, {
+    story: items[0],
+    theme: theme,
+    border: border,
+    bgImgContentOverlap: true,
+    headerLevel: "2",
+    aspectRatio: [[16, 9], [16, 9]],
+    config: config
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    config: config,
+    story: items[0],
+    aspectRatio: [[16, 9], [16, 9]]
+  }), /*#__PURE__*/React.createElement(StorycardContent, {
+    story: items[0],
+    headerLevel: "3",
+    config: config
+  }, /*#__PURE__*/React.createElement(SectionTag, {
+    story: items[0],
+    borderColor: sectionTagBorderColor
+  }), /*#__PURE__*/React.createElement(Headline, {
+    premiumStoryIconConfig: config,
+    story: items[0],
+    headerLevel: 2
+  }), /*#__PURE__*/React.createElement(Subheadline, {
+    story: items[0]
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    story: items[0]
+  })))), /*#__PURE__*/React.createElement("span", {
+    className: ("divider ".concat(textColor) ? "divider ".concat(textColor) + " " : "") + _getClassName("divider ".concat(textColor), _styleModuleImportMap)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "other-cards two-col-seven-stories-m_other-cards__Y37uk"
+  }, items.slice(1, 5).map(function (story, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index
+    }, /*#__PURE__*/React.createElement(StoryCard, {
+      story: story,
+      border: border,
+      theme: theme,
+      config: config
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      config: config,
+      story: story,
+      aspectRatio: [[16, 9], [16, 9]]
+    }), /*#__PURE__*/React.createElement(StorycardContent, {
+      theme: theme,
+      border: border,
+      story: story,
+      isHorizontalMobile: true,
+      borderColor: borderColor,
+      config: config,
+      separator: "dot"
+    })));
+  }), adWidgetSlot ? /*#__PURE__*/React.createElement("div", {
+    className: "two-col-seven-stories-m_ad-wrapper__z3iIX"
+  }, adWidgetSlot) : items.slice(5, 7).map(function (story, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index
+    }, /*#__PURE__*/React.createElement(StoryCard, {
+      story: story,
+      border: border,
+      theme: theme,
+      config: config
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      config: config,
+      story: story,
+      aspectRatio: [[16, 9], [16, 9]]
+    }), /*#__PURE__*/React.createElement(StorycardContent, {
+      theme: theme,
+      border: border,
+      story: story,
+      isHorizontalMobile: true,
+      borderColor: borderColor,
+      config: config,
+      separator: "dot"
+    })));
+  }))), /*#__PURE__*/React.createElement(LoadmoreButton, {
+    template: footerButton,
+    collection: collection,
+    config: config,
+    navigate: function navigate() {
+      return navigateTo(dispatch, url);
+    },
+    qtConfig: qtConfig
+  })));
+};
+TwoColSevenStoriesBase.propTypes = {
+  /**  collection is the array of objects which is returning by API  */
+  collection: PropTypes.object.isRequired,
+
+  /** The config for the Row */
+  config: PropTypes.shape({
+    borderColor: PropTypes.string,
+    theme: PropTypes.string,
+    border: PropTypes.string,
+    footerButton: PropTypes.string,
+    collectionNameTemplate: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string
+  })
+};
+TwoColSevenStoriesBase.defaultProps = {
+  theme: "#ffffff",
+  border: ""
+};
+export var TwoColSevenStories = StateProvider(TwoColSevenStoriesBase);

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

@@ -0,0 +1,102 @@
+import React from "react";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+import { withStore, optionalSelect, sectionTagTemplates, collectionNameTemplates, footerButton } from "../../../../storybook";
+import { TwoColSevenStoriesBase } from "./index";
+import Readme from "./README.md";
+import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
+import { generateCollection } from "../../Fixture";
+var collection = generateCollection({
+  stories: 10
+});
+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 configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "250px",
+    width: "300px"
+  });
+};
+
+var borderTemplate = {
+  "default": "",
+  border: "full"
+};
+withStore("Rows/Two Col Seven 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", true),
+    showAuthor: _boolean("Author disable", true),
+    showTime: _boolean("Timestamp disable", true),
+    footerButton: optionalSelect("Footer Button", footerButton),
+    buttonText: text("Footer text", "Read More"),
+    showRowTitle: _boolean("Row title", true),
+    showButton: _boolean("Show button", true),
+    showReadTime: _boolean("Read time", true)
+  };
+  return /*#__PURE__*/React.createElement(TwoColSevenStoriesBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});
+withStore("Rows/Two Col Seven 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("With AD", 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),
+    footerButton: optionalSelect("Footer Button", footerButton),
+    buttonText: text("Footer text", "Read More"),
+    showRowTitle: _boolean("Row title", true),
+    showButton: _boolean("Show button", true),
+    showReadTime: _boolean("Read time", true),
+    slotConfig: [{
+      type: "ad",
+      component: configurableSlot
+    }]
+  };
+  return /*#__PURE__*/React.createElement(TwoColSevenStoriesBase, {
+    collection: collection,
+    config: contextConfig
+  });
+});