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

package/esm/components/Molecules/KeyEvents/index.js

@@ -0,0 +1,152 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React, { useState } from "react";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import { ClockIcon } from "../../Svgs/clock-icon";
+import { getTextColor, getTimeStamp, timestampToFormat } from "../../../utils/utils";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import { StateProvider } from "../../SharedContext";
+import "./key-events.m.css";
+import { useSelector } from "react-redux";
+var _styleModuleImportMap = {
+  "./key-events.m.css": {
+    "container": "key-events-m_container__1slhR",
+    "event-title": "key-events-m_event-title__u9bt3",
+    "cards-wrapper": "key-events-m_cards-wrapper__3f8aB",
+    "time-wrapper": "key-events-m_time-wrapper__2poXn",
+    "dark": "key-events-m_dark__hrnAr",
+    "light": "key-events-m_light__2gE0a",
+    "borderNone": "key-events-m_borderNone__2tNUK",
+    "fade-out": "key-events-m_fade-out__11jv_"
+  }
+};
+
+var KeyEventCards = function KeyEventCards(props) {
+  var config = props.config,
+      index = props.index,
+      cardLength = props.cardLength,
+      _props$card = props.card,
+      card = _props$card === void 0 ? {} : _props$card,
+      slug = props.slug,
+      loadCards = props.loadCards,
+      showLoadMore = props.showLoadMore;
+  var cardAddedAt = card["card-added-at"],
+      _card$storyElements = card["story-elements"],
+      storyElements = _card$storyElements === void 0 ? [] : _card$storyElements,
+      id = card.id;
+  var theme = config.theme,
+      _config$mountAt = config.mountAt,
+      mountAt = _config$mountAt === void 0 ? "" : _config$mountAt;
+  var textColor = getTextColor(theme);
+  var dark = "#333";
+  var light = "#fff";
+  var updateColor = textColor === "dark" ? dark : light;
+  var lastElement = index === cardLength - 1;
+  var borderLeft = lastElement ? "borderNone" : "";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _getClassName("time-wrapper ".concat(textColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement(ClockIcon, {
+    color: updateColor
+  }), getTimeStamp(cardAddedAt, timestampToFormat, {
+    showTime: true,
+    isTimeFirst: true
+  })), /*#__PURE__*/React.createElement("a", {
+    href: "".concat(mountAt, "/").concat(slug, "#").concat(id),
+    "aria-label": "event-title"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _getClassName("event-title ".concat(textColor, " ").concat(borderLeft), _styleModuleImportMap)
+  }, storyElements.map(function (element, index) {
+    return element.type === "title" && /*#__PURE__*/React.createElement("h3", {
+      key: index
+    }, element.text);
+  }), showLoadMore && lastElement && loadCards && /*#__PURE__*/React.createElement("div", {
+    className: "key-events-m_fade-out__11jv_",
+    style: {
+      backgroundImage: "linear-gradient(to bottom, transparent, ".concat(theme, ")")
+    }
+  }))));
+};
+
+KeyEventCards.propTypes = {
+  card: PropTypes.shape({
+    "card-added-at": PropTypes.number,
+    "story-elements": PropTypes.array,
+    id: PropTypes.string
+  }),
+  config: PropTypes.object,
+  slug: PropTypes.string,
+  story: PropTypes.object,
+  elements: PropTypes.array,
+  index: PropTypes.number,
+  cardLength: PropTypes.number,
+  loadCards: PropTypes.bool,
+  showLoadMore: PropTypes.bool
+};
+export var KeyEventsBase = function KeyEventsBase(_ref) {
+  var _ref$story = _ref.story,
+      story = _ref$story === void 0 ? {} : _ref$story,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$showLoadMore = _ref.showLoadMore,
+      showLoadMore = _ref$showLoadMore === void 0 ? true : _ref$showLoadMore;
+  var cards = get(story, ["cards"], []);
+  var theme = config.theme,
+      _config$initialLoadCo = config.initialLoadCount,
+      initialLoadCount = _config$initialLoadCo === void 0 ? 4 : _config$initialLoadCo;
+  var textColor = getTextColor(theme);
+
+  var _useState = useState(initialLoadCount),
+      _useState2 = _slicedToArray(_useState, 2),
+      initialCount = _useState2[0],
+      updatedCount = _useState2[1];
+
+  var cardsWithKeyEvents = cards.filter(function (card) {
+    return get(card.metadata, ["attributes", "key-event"]);
+  });
+  var lastElement = cardsWithKeyEvents.length > initialCount;
+  var qtConfig = useSelector(function (state) {
+    return get(state, ["qt", "config"], {});
+  });
+
+  var onClick = function onClick() {
+    updatedCount(initialCount + initialLoadCount);
+  };
+
+  if (cardsWithKeyEvents.length < 1) {
+    return null;
+  }
+
+  var showAllCards = !showLoadMore ? cardsWithKeyEvents.slice(0, 4) : cardsWithKeyEvents.slice(0, initialCount);
+  var keyEvents = showAllCards.map(function (card, index, source) {
+    return /*#__PURE__*/React.createElement(KeyEventCards, {
+      cardLength: source.length,
+      card: card,
+      key: card.id,
+      slug: story.slug,
+      config: config,
+      index: index,
+      loadCards: lastElement,
+      showLoadMore: showLoadMore
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: theme
+    },
+    className: "arrow-component " + _getClassName("container ".concat(textColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("h3", null, "Key Events"), /*#__PURE__*/React.createElement("div", {
+    className: "key-events-m_cards-wrapper__3f8aB"
+  }, keyEvents), showLoadMore && lastElement && /*#__PURE__*/React.createElement(LoadmoreButton, {
+    onClick: onClick,
+    template: "SubsequentLoadCount",
+    config: config,
+    qtConfig: qtConfig
+  }));
+};
+KeyEventsBase.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.object,
+  showLoadMore: PropTypes.bool
+};
+export var KeyEvents = StateProvider(KeyEventsBase);

package/esm/components/Molecules/KeyEvents/key-events.m.css

@@ -0,0 +1,89 @@
+.container {
+  border-bottom: 1px solid var(--arrow-c-mono5);
+}
+
+.event-title > h3 {
+  font-size: var(--arrow-fs-xs);
+}
+
+.container:global(.arrow-component) > h3 {
+  font-size: var(--arrow-fs-m);
+  padding: var(--arrow-spacing-xs);
+}
+
+.cards-wrapper {
+  margin-top: var(--arrow-spacing-s);
+}
+
+.time-wrapper {
+  display: flex;
+  align-items: center;
+  font-size: var(--arrow-fs-tiny);
+  svg {
+    margin-right: var(--arrow-spacing-xxs);
+  }
+}
+
+.event-title {
+  position: relative;
+  padding: 0 14px 28px;
+  margin-left: var(--arrow-spacing-s);
+}
+
+.event-title.dark {
+  border-left: 1px solid var(--arrow-c-mono5);
+}
+
+.event-title.light {
+  border-left: 1px solid var(--arrow-c-invert-mono5);
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.light.borderNone,
+.dark.borderNone {
+  border-left: none;
+}
+
+.fade-out {
+  position: absolute;
+  top: -20px;
+  height: 100%;
+  width: 100%;
+  background-image: inherit;
+  pointer-events: none;
+}
+
+.container.light {
+  border-bottom: 1px solid var(--arrow-c-invert-mono5);
+}
+
+html[dir="rtl"] {
+  .time-wrapper {
+    direction: ltr;
+    flex-direction: row-reverse;
+    svg {
+      margin-right: 0;
+      margin-left: var(--arrow-spacing-xxs);
+    }
+  }
+
+  .event-title.dark,
+  .event-title.light {
+    border-right: 1px solid var(--arrow-c-mono5);
+    border-left: none;
+    margin-left: 0;
+    margin-right: var(--arrow-spacing-s);
+  }
+
+  .light.borderNone,
+  .dark.borderNone {
+    border-right: none;
+  }
+}

package/esm/components/Molecules/KeyEvents/stories.js

@@ -0,0 +1,25 @@
+import React from "react";
+import Readme from "./README.md";
+import { withStore } from "../../../../storybook";
+import { generateStory } from "../../Fixture";
+import { KeyEventsBase } from "./index";
+import { color, text } from "@storybook/addon-knobs";
+var story = generateStory("live-blog");
+withStore("Molecules/Key Events", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).add("Key Events", function () {
+  var config = {
+    theme: color("Color", "#ffffff"),
+    initialLoadCount: text("Initial Load Count", 4),
+    buttonText: text("Button text", "Load More")
+  };
+  return /*#__PURE__*/React.createElement(KeyEventsBase, {
+    story: story,
+    config: config
+  });
+});

package/esm/components/Molecules/PageIntroductionCard/README.md

@@ -0,0 +1,25 @@
+# Page Introduction Card
+
+Page Introduction card is used to display the page information which consists of Page Title and Page Description.
+
+## Usage
+
+```jsx
+import { PageIntroductionCard } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+
+const config = {
+  pageTitle: "Page Title",
+  pageDescription: "This is the description of the page",
+  theme: #333333;,
+  showButton = false,
+  enableBorder = false,
+}
+
+<PageIntroductionCard config={config} />
+
+```

package/esm/components/Molecules/PageIntroductionCard/index.js

@@ -0,0 +1,77 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./page-intro-card.m.css": {
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "tablet": "992px",
+    "author-page-wrapper": "page-intro-card-m_author-page-wrapper__2HiAv",
+    "pageTitle": "page-intro-card-m_pageTitle__2qQNj",
+    "borderBottom": "page-intro-card-m_borderBottom__2E6t3",
+    "pageDescription": "page-intro-card-m_pageDescription__Wzub7",
+    "dark": "page-intro-card-m_dark__1ebnF",
+    "light": "page-intro-card-m_light__s5xeQ"
+  }
+};
+
+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 { useDispatch, useSelector } from "react-redux";
+import { get, upperCase } from "lodash";
+import { getTextColor, navigateTo, generateNavigateSlug } from "../../../utils/utils";
+import "./page-intro-card.m.css";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+export var PageIntroductionCard = function PageIntroductionCard(_ref) {
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var _config$pageTitle = config.pageTitle,
+      pageTitle = _config$pageTitle === void 0 ? "" : _config$pageTitle,
+      _config$pageDescripti = config.pageDescription,
+      pageDescription = _config$pageDescripti === void 0 ? "" : _config$pageDescripti,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "#131922" : _config$theme,
+      _config$showButton = config.showButton,
+      showButton = _config$showButton === void 0 ? false : _config$showButton,
+      _config$enableBorder = config.enableBorder,
+      enableBorder = _config$enableBorder === void 0 ? false : _config$enableBorder,
+      customUrlPath = config.customUrlPath;
+  var textColor = getTextColor(theme);
+  var borderBottom = enableBorder ? "borderBottom" : "";
+  var dispatch = useDispatch();
+  var qtConfig = useSelector(function (state) {
+    return get(state, ["qt", "config"], {});
+  });
+  var url = generateNavigateSlug({}, _objectSpread(_objectSpread({}, qtConfig), {}, {
+    config: config
+  }), customUrlPath);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arrow-component full-width-with-padding page-intro-card-m_author-page-wrapper__2HiAv",
+    style: {
+      background: theme
+    }
+  }, /*#__PURE__*/React.createElement("h2", {
+    "data-test-id": "page-title",
+    className: _getClassName("pageTitle ".concat(textColor, " ").concat(borderBottom), _styleModuleImportMap)
+  }, upperCase(pageTitle)), /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "page-description",
+    className: _getClassName("pageDescription ".concat(textColor), _styleModuleImportMap)
+  }, pageDescription), showButton && /*#__PURE__*/React.createElement(LoadmoreButton, {
+    template: "customUrlPath",
+    config: config,
+    navigate: function navigate() {
+      return navigateTo(dispatch, url);
+    },
+    qtConfig: qtConfig
+  }));
+};
+PageIntroductionCard.propTypes = {
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    pageTitle: PropTypes.string,
+    pageDescription: PropTypes.string
+  })
+};

package/esm/components/Molecules/PageIntroductionCard/page-intro-card.m.css

@@ -0,0 +1,61 @@
+@value viewports: "../../../stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.author-page-wrapper:global(.full-width-with-padding) {
+  text-align: center;
+  padding-top: 40px;
+  padding-bottom: 32px;
+  @media (min-width: mobile) {
+    padding-top: 48px;
+    padding-bottom: 48px;
+    @media (min-width: tablet) {
+      padding-right: 302px;
+      padding-left: 301px;
+      padding-top: 60px;
+    }
+  }
+}
+
+.pageTitle {
+  font-size: var(--arrow-fs-l);
+  color: var(--arrow-c-mono2);
+  padding-bottom: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-huge);
+  }
+}
+
+.borderBottom {
+  position: relative;
+  text-align: center;
+  padding-bottom: 34px;
+}
+
+.borderBottom:after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  width: 52px;
+  margin: 0 0 0 -26px;
+  bottom: 24px;
+  border-bottom: 5px solid;
+}
+
+.pageDescription {
+  margin: 0 auto var(--arrow-spacing-l) 0;
+  font-size: var(--arrow-fs-xs);
+  line-height: var(--arrow-lh-5);
+  color: var(--arrow-c-mono2);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-s);
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}

package/esm/components/Molecules/PageIntroductionCard/stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { PageIntroductionCard } from "./index.js";
+import { color } from "@storybook/addon-knobs";
+import Readme from "./README.md";
+withStore("Molecules/Page Intro Card", Readme).add("Default", function () {
+  var config = {
+    pageTitle: "Page Title",
+    pageDescription: "This is the page description",
+    theme: color("Color", "#131922"),
+    enableBorder: true,
+    showButton: true
+  };
+  return /*#__PURE__*/React.createElement(PageIntroductionCard, {
+    config: config
+  });
+});

package/esm/components/Molecules/PortraitStoryCard/README.md

@@ -0,0 +1,10 @@
+# Portrait Story Card
+
+The _PortraitStoryCard_ component is a basic [molecule](https://bradfrost.com/blog/post/atomic-web-design/#molecules) used to represent a story in portrait view within a Row.
+
+
+## Usage
+
+
+```jsx
+<PortraitStoryCard story={story} config={contextConfig}  />

package/esm/components/Molecules/PortraitStoryCard/index.js

@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { StoryCard } from "../StoryCard";
+import { StorycardContent } from "../StorycardContent";
+import { HeroImage } from "../../Atoms/HeroImage";
+import { isEmpty } from "../../../utils/utils";
+import { StateProvider } from "../../SharedContext";
+import "./portrait-story-card.m.css";
+export 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
+};
+export var PortraitStoryCard = StateProvider(PortraitStoryCardBase);

package/esm/components/Molecules/PortraitStoryCard/portrait-story-card.m.css

@@ -0,0 +1,38 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.wrapper {
+  :global {
+    .arr--story-card > div:nth-child(2) {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding: var(--arrow-spacing-xs);
+
+      @media (--viewport-medium) {
+        padding: var(--arrow-spacing-m);
+      }
+    }
+    .arr--headline > a > h6,
+    .author-name,
+    .arr--content-wrapper time,
+    .arr--read-time,
+    .section-tag {
+      color: var(--arrow-c-light);
+    }
+
+    .arr--hero-image {
+      margin-bottom: 0;
+    }
+
+    .arr--hero-image figure::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(0deg, var(--arrow-c-mono3), transparent 70%, transparent);
+    }
+  }
+}

package/esm/components/Molecules/PortraitStoryCard/stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import Readme from "./README.md";
+import { generateStory } from "../../Fixture";
+import { PortraitStoryCardBase } from "./index";
+import { withStore } from "../../../../storybook";
+var story = generateStory();
+withStore("molecules/Portrait Story Card ", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      mountAt: "/sub-directory"
+    }
+  }
+}, Readme).addDecorator(function (story) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "320px"
+    }
+  }, story());
+}).add("Default", function () {
+  return /*#__PURE__*/React.createElement(PortraitStoryCardBase, {
+    story: story
+  });
+});

package/esm/components/Molecules/SliderHorizontalCard/README.md

@@ -0,0 +1,14 @@
+# SliderHorizontalCard(Row/Organisms)
+
+The _SliderHorizontalCard_ component is a basic [molecule](https://bradfrost.com/blog/post/atomic-web-design/#organisms) used to represent a molecule with atoms.
+
+Horizontal Slider Card is a horozontal card with same width for image and content.
+## Usage
+
+### Default SliderHorizontalCard
+
+```jsx
+<SliderHorizontalCard collection={collection} config={contextConfig} />
+```
+
+<!-- PROPS -->

package/esm/components/Molecules/SliderHorizontalCard/index.js

@@ -0,0 +1,69 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import { Headline } from "../../Atoms/Headline/index";
+import { Subheadline } from "../../Atoms/Subheadline/index";
+import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
+import { HeroImage } from "../../Atoms/HeroImage/index";
+import { SectionTag } from "../../Atoms/SectionTag/index";
+import { getTextColor, isEmpty } from "../../../utils/utils";
+import PropTypes from "prop-types";
+import "./slider-horizontal-card.m.css";
+var _styleModuleImportMap = {
+  "./slider-horizontal-card.m.css": {
+    "horizontal": "slider-horizontal-card-m_horizontal__93KuC",
+    "content": "slider-horizontal-card-m_content__1EUZE",
+    "border": "slider-horizontal-card-m_border__2Mfp4"
+  }
+};
+export var SliderHorizontalCard = function SliderHorizontalCard(_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,
+      headerLevel = _ref.headerLevel,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "" : _ref$borderColor,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  if (!story || isEmpty(story)) return /*#__PURE__*/React.createElement("div", null);
+  var borderStyle = border === "full" ? "border" : "";
+  var textColor = getTextColor(theme);
+  var _config$localizationC = config.localizationConfig,
+      localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    },
+    className: _getClassName("horizontal ".concat(borderStyle), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement(HeroImage, {
+    config: config,
+    story: story,
+    aspectRatio: [[4, 3], [16, 9]]
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "arr--content slider-horizontal-card-m_content__1EUZE"
+  }, /*#__PURE__*/React.createElement(SectionTag, {
+    story: story,
+    borderColor: borderColor
+  }), /*#__PURE__*/React.createElement(Headline, {
+    story: story,
+    headerLevel: headerLevel,
+    premiumStoryIconConfig: config
+  }), /*#__PURE__*/React.createElement(Subheadline, {
+    story: story
+  }), /*#__PURE__*/React.createElement(AuthorWithTime, {
+    config: localizationConfig,
+    story: story,
+    isBottom: true,
+    prefix: "By"
+  })));
+};
+SliderHorizontalCard.propTypes = {
+  story: PropTypes.object.isRequired,
+  border: PropTypes.string,
+  theme: PropTypes.string,
+  headerLevel: PropTypes.string,
+  borderColor: PropTypes.string,
+  config: PropTypes.object
+};