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

package/esm/components/Atoms/ReadTime/index.js

@@ -0,0 +1,46 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import { get } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
+import { getTextColor } from "../../../utils/utils";
+import { useStateValue } from "../../SharedContext";
+import "./read-time.m.css";
+import { Dot } from "../Dot/dot";
+var _styleModuleImportMap = {
+  "./read-time.m.css": {
+    "read-time-wrapper": "read-time-m_read-time-wrapper__3GyC_",
+    "dot-indicator": "read-time-m_dot-indicator__3Sqh2",
+    "dark": "read-time-m_dark__3yRaK",
+    "light": "read-time-m_light__1GAZu"
+  }
+};
+export var ReadTime = function ReadTime(_ref) {
+  var story = _ref.story,
+      _ref$opts = _ref.opts,
+      opts = _ref$opts === void 0 ? {} : _ref$opts,
+      _ref$isLightTheme = _ref.isLightTheme,
+      isLightTheme = _ref$isLightTheme === void 0 ? false : _ref$isLightTheme;
+  var config = useStateValue() || {};
+  var showReadTime = get(config, ["showReadTime"]) || get(opts, ["showReadTime"], true);
+  var readTime = get(story, ["read-time"], 0);
+  var textColor = isLightTheme ? "light" : getTextColor(config.theme);
+  if (!showReadTime || !readTime) return null;
+  var timeToRead = get(opts, ["localizedTimeToRead"]) || "min read";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "read-time",
+    className: "arrow-component arr--read-time " + _getClassName("read-time-wrapper ".concat(textColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "read-time-indicator read-time-m_dot-indicator__3Sqh2"
+  }, /*#__PURE__*/React.createElement(Dot, {
+    color: textColor
+  })), /*#__PURE__*/React.createElement("span", null, readTime, " ", timeToRead)));
+};
+ReadTime.propTypes = {
+  story: PropTypes.shape({
+    "read-time": PropTypes.number
+  }),
+  opts: PropTypes.shape({
+    showReadTime: PropTypes.bool
+  }),
+  isLightTheme: PropTypes.bool
+};

package/esm/components/Atoms/ReadTime/read-time.m.css

@@ -0,0 +1,25 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.read-time-wrapper {
+  display: flex;
+  font-size: var(--arrow-fs-tiny);
+  line-height: var(--arrow-lh-2);
+}
+
+.dot-indicator {
+  padding: 0 var(--arrow-spacing-xs) var(--arrow-spacing-xs);
+}
+
+.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+html[dir="rtl"] {
+  .read-time-wrapper {
+    margin-right: var(--arrow-spacing-xs);
+  }
+}

package/esm/components/Atoms/ReadTime/read-time.test.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import expect from "expect";
+import { generateStory } from "../../Fixture/index";
+import { ReadTime } from "./index";
+var story = generateStory();
+describe("Read time", function () {
+  it("Should render read time component", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ReadTime, {
+      story: story,
+      opts: {
+        showReadTime: true
+      }
+    }));
+    expect(wrapper.find({
+      "data-test-id": "read-time"
+    }).prop("className")).toMatch(/read-time-wrapper/);
+  });
+  it("Should not render read time if showReadTime is false", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ReadTime, {
+      opts: {
+        showReadTime: false
+      }
+    }));
+    expect(wrapper.find({
+      "data-test-id": "read-time"
+    }).length).toEqual(0);
+  });
+});

package/esm/components/Atoms/ReadTime/stories.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { ReadTime } from "./index";
+import Readme from "./README.md";
+import { boolean as _boolean } from "@storybook/addon-knobs";
+var story = generateStory();
+withStore("Atoms/Read Time", {}, Readme).add("default", function () {
+  return /*#__PURE__*/React.createElement(ReadTime, {
+    story: story,
+    opts: {
+      showReadTime: _boolean("Show Read Time", true)
+    }
+  });
+});

package/esm/components/Atoms/ScrollSnap/SliderArrow/index.js

@@ -0,0 +1,64 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import { number, string, func } from "prop-types";
+import { getTextColor } from "../../../../utils/utils";
+import { LeftArrow } from "../../../Svgs/left-arrow";
+import { RightArrow } from "../../../Svgs/right-arrow";
+import { useStateValue } from "../../../SharedContext";
+import "./slider-arrow.m.css";
+var _styleModuleImportMap = {
+  "./slider-arrow.m.css": {
+    "arrow": "slider-arrow-m_arrow__1eBUU",
+    "left-arrow-dark": "slider-arrow-m_left-arrow-dark__3mTJS",
+    "right-arrow-dark": "slider-arrow-m_right-arrow-dark__3hWZe",
+    "left-arrow-light": "slider-arrow-m_left-arrow-light__2ipUK",
+    "right-arrow-light": "slider-arrow-m_right-arrow-light__3omMU",
+    "left-arrow-ltr": "slider-arrow-m_left-arrow-ltr__1ngNF",
+    "right-arrow-ltr": "slider-arrow-m_right-arrow-ltr__2svWX",
+    "left-arrow-rtl": "slider-arrow-m_left-arrow-rtl__2ynyn",
+    "right-arrow-rtl": "slider-arrow-m_right-arrow-rtl__1GjPz"
+  }
+};
+export var SliderArrow = function SliderArrow(_ref) {
+  var selectedIndex = _ref.selectedIndex,
+      previousClick = _ref.previousClick,
+      nextClick = _ref.nextClick,
+      noOfItems = _ref.noOfItems,
+      perView = _ref.perView,
+      languageDirection = _ref.languageDirection;
+
+  if (noOfItems < 1) {
+    return null;
+  }
+
+  var config = useStateValue() || {};
+  var textColor = getTextColor(config.theme);
+
+  var rightArrowView = function rightArrowView() {
+    if (selectedIndex >= noOfItems - perView) return false;
+    return true;
+  };
+
+  var getLeftArrowClassName = languageDirection === "rtl" ? "left-arrow-rtl" : "left-arrow-ltr";
+  var getRightArrowClassName = languageDirection === "rtl" ? "right-arrow-rtl" : "right-arrow-ltr";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, selectedIndex !== 0 ? /*#__PURE__*/React.createElement("button", {
+    onClick: previousClick,
+    className: ("left-arrow ".concat(getLeftArrowClassName) ? "left-arrow ".concat(getLeftArrowClassName) + " " : "") + _getClassName("arrow left-arrow-".concat(textColor, " ").concat(getLeftArrowClassName), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement(LeftArrow, {
+    color: textColor === "dark" ? "#fff" : "#333"
+  })) : null, selectedIndex < noOfItems - 1 && rightArrowView() ? /*#__PURE__*/React.createElement("button", {
+    onClick: nextClick,
+    className: ("right-arrow ".concat(getRightArrowClassName) ? "right-arrow ".concat(getRightArrowClassName) + " " : "") + _getClassName("arrow right-arrow-".concat(textColor, " ").concat(getRightArrowClassName), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement(RightArrow, {
+    color: textColor === "dark" ? "#fff" : "#333"
+  })) : null);
+};
+SliderArrow.propTypes = {
+  noOfItems: number,
+  perView: number,
+  slideIndicator: string,
+  previousClick: func,
+  nextClick: func,
+  selectedIndex: number,
+  languageDirection: string
+};

package/esm/components/Atoms/ScrollSnap/SliderArrow/slider-arrow.m.css

@@ -0,0 +1,45 @@
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  background-color: var(--arrow-c-light);
+  opacity: 0.8;
+  padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+  border: none;
+  border-radius: 0;
+  @media only screen and (max-width: 767px) {
+    top: calc(25% + 40px);
+  }
+}
+
+.left-arrow-dark,
+.right-arrow-dark {
+  background-color: var(--arrow-c-dark);
+}
+.left-arrow-light,
+.right-arrow-light {
+  background-color: var(--arrow-c-light);
+}
+
+.left-arrow-ltr {
+  left: 0;
+}
+
+.right-arrow-ltr {
+  right: 0;
+}
+
+.left-arrow-rtl {
+  right: 0;
+  left: unset;
+}
+.left-arrow-rtl svg,
+.right-arrow-rtl svg {
+  transform: rotate(180deg);
+}
+
+.right-arrow-rtl {
+  left: 0;
+  right: unset;
+}

package/esm/components/Atoms/ScrollSnap/SliderIndicator/index.js

@@ -0,0 +1,53 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import { array, number, string, func } from "prop-types";
+import { getTextColor } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
+import "./slider-indicator.m.css";
+var _styleModuleImportMap = {
+  "./slider-indicator.m.css": {
+    "indicators": "slider-indicator-m_indicators__3MNXc",
+    "indicator": "slider-indicator-m_indicator__gTv3x",
+    "indicator-button": "slider-indicator-m_indicator-button__1e82r",
+    "indicator-dots": "slider-indicator-m_indicator-dots__2TR3H",
+    "indicator-dots-dark": "slider-indicator-m_indicator-dots-dark__sGrev",
+    "indicator-dots-light": "slider-indicator-m_indicator-dots-light__2nPn-",
+    "indicator-dashes": "slider-indicator-m_indicator-dashes__DyNCE",
+    "indicator-dashes-dark": "slider-indicator-m_indicator-dashes-dark__VrqJI",
+    "indicator-dashes-light": "slider-indicator-m_indicator-dashes-light__34ESx"
+  }
+};
+export var SliderIndicator = function SliderIndicator(_ref) {
+  var indicatorItems = _ref.indicatorItems,
+      indicatorClick = _ref.indicatorClick,
+      selectedIndex = _ref.selectedIndex,
+      indicatorType = _ref.indicatorType;
+
+  if (indicatorItems.length < 1) {
+    return null;
+  }
+
+  var config = useStateValue() || {};
+  var textColor = getTextColor(config.theme);
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "slider-indicators slider-indicator-m_indicators__3MNXc"
+  }, indicatorItems.map(function (_, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: "slider-".concat(index),
+      className: "indicator slider-indicator-m_indicator__gTv3x",
+      onClick: function onClick(e) {
+        return indicatorClick(e, index);
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      "aria-pressed": selectedIndex === index ? "true" : "false",
+      className: ("indicator-button indicator-".concat(indicatorType) ? "indicator-button indicator-".concat(indicatorType) + " " : "") + _getClassName("indicator-button indicator-".concat(indicatorType, " indicator-").concat(indicatorType, "-").concat(textColor), _styleModuleImportMap)
+    }));
+  }));
+};
+SliderIndicator.propTypes = {
+  indicatorItems: array,
+  perView: number,
+  indicatorType: string,
+  indicatorClick: func,
+  selectedIndex: number
+};

package/esm/components/Atoms/ScrollSnap/SliderIndicator/slider-indicator.m.css

@@ -0,0 +1,71 @@
+.indicators {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  list-style: none;
+  font-family: var(--arrow-typeface-secondary);
+  cursor: pointer;
+  line-height: 0;
+}
+
+.indicator {
+  margin: var(--arrow-spacing-xs) 0;
+  padding: 4px;
+}
+
+.indicator-button {
+  background: none;
+  border: none;
+  overflow: hidden;
+  padding: var(--arrow-spacing-s) var(--arrow-spacing-xxs);
+  cursor: pointer;
+}
+
+.indicator-dots {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--arrow-c-dark);
+  border: 1px solid var(--arrow-c-dark);
+  padding: 0;
+  opacity: 0.25;
+}
+
+.indicator-dots-dark[aria-pressed="true"] {
+  background-color: var(--arrow-c-dark);
+  opacity: 1;
+}
+
+.indicator-dots-light {
+  background-color: var(--arrow-c-light);
+  border-color: var(--arrow-c-light);
+}
+
+.indicator-dots-light[aria-pressed="true"] {
+  background-color: var(--arrow-c-light);
+  opacity: 1;
+}
+
+.indicator-dashes {
+  display: inline-block;
+  width: var(--arrow-spacing-s);
+  height: 2px;
+  padding: 0;
+}
+.indicator-dashes-dark {
+  opacity: 0.25;
+  background-color: var(--arrow-c-dark);
+}
+.indicator-dashes-light {
+  opacity: 0.25;
+  background-color: var(--arrow-c-light);
+}
+
+.indicator-dashes-dark[aria-pressed="true"] {
+  background-color: var(--arrow-c-dark);
+  opacity: 1;
+}
+.indicator-dashes-light[aria-pressed="true"] {
+  background-color: var(--arrow-c-light);
+  opacity: 1;
+}

package/esm/components/Atoms/ScrollSnap/index.js

@@ -0,0 +1,165 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { useEffect, useState, useRef } from "react";
+import { useSelector } from "react-redux";
+import { array, number, bool, string } from "prop-types";
+import { get } from "lodash";
+import { SliderArrow } from "./SliderArrow";
+import { SliderIndicator } from "./SliderIndicator";
+import "./scroll-snap.m.css";
+
+var smoothScroll = function smoothScroll(node, topOrLeft, horizontal) {
+  var _node$scrollTo;
+
+  node.scrollTo((_node$scrollTo = {}, _defineProperty(_node$scrollTo, horizontal ? "left" : "top", topOrLeft), _defineProperty(_node$scrollTo, "behavior", "smooth"), _node$scrollTo));
+};
+
+var updateItemSelection = function updateItemSelection(index, languageDirection, scroller, noOfItems) {
+  var getScrollValue = Math.floor(scroller.current.scrollWidth * (index / noOfItems));
+  var scrollValue = languageDirection === "rtl" ? getScrollValue * -1 : getScrollValue;
+  smoothScroll(scroller.current, scrollValue, true);
+};
+
+var setIndicatorValue = function setIndicatorValue(func, ms) {
+  var timeout;
+  return function () {
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      timeout = null;
+      func();
+    }, ms);
+  };
+};
+
+export var ScrollSnap = function ScrollSnap(_ref) {
+  var children = _ref.children,
+      isArrow = _ref.isArrow,
+      interval = _ref.interval,
+      isInfinite = _ref.isInfinite,
+      pauseOnHover = _ref.pauseOnHover,
+      perView = _ref.perView,
+      slideIndicator = _ref.slideIndicator;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedIndex = _useState2[0],
+      setSelectedIndex = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      autoScroll = _useState4[0],
+      setAutoScroll = _useState4[1];
+
+  var languageDirection = useSelector(function (state) {
+    return get(state, ["qt", "config", "language", "direction"], "ltr");
+  });
+  var noOfItems = children ? children.length : 0;
+  var scroller = useRef(null);
+  var numberOfIndicatorsToShow = children.length - (perView - 1);
+  var indicatorItems = children.slice(0, numberOfIndicatorsToShow);
+  useEffect(function () {
+    if (scroller.current) {
+      scroller.current.addEventListener("scroll", setIndicatorValue(function () {
+        var value = Math.round(scroller.current.scrollLeft / scroller.current.scrollWidth * noOfItems);
+        setSelectedIndex(Math.abs(value));
+      }, 150)); // For Default Selection if selectedIndex is not 0 then manually select it
+
+      if (selectedIndex !== 0) {
+        updateItemSelection(selectedIndex);
+      }
+    }
+
+    return function () {
+      scroller.current.removeEventListener("scroll", setIndicatorValue);
+    };
+  }, []); // Infinite scroll
+
+  useEffect(function () {
+    if (isInfinite && !autoScroll) {
+      var timer = setInterval(function () {
+        infiniteScroll();
+      }, interval);
+      return function () {
+        clearInterval(timer);
+      };
+    }
+  }, [isInfinite, autoScroll]);
+
+  var infiniteScroll = function infiniteScroll() {
+    setSelectedIndex(function (value) {
+      var newIndex = value === noOfItems - perView ? 0 : value + 1;
+      updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+      return newIndex;
+    });
+  };
+
+  var pauseAutoPlay = function pauseAutoPlay() {
+    pauseOnHover && setAutoScroll(!autoScroll);
+  };
+
+  var indicatorClick = function indicatorClick(e, newIndex) {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedIndex(newIndex);
+    updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+  };
+
+  var nextClick = function nextClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (selectedIndex < noOfItems) {
+      var newIndex = selectedIndex + 1;
+      setSelectedIndex(newIndex);
+      updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+    }
+  };
+
+  var previousClick = function previousClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var newIndex = selectedIndex - 1;
+    setSelectedIndex(newIndex);
+    updateItemSelection(newIndex, languageDirection, scroller, noOfItems);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "scroll-snap-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "scroll-snap-wrapper scroll-snap-m_wrapper__1Rz9v",
+    onMouseEnter: pauseAutoPlay,
+    onMouseLeave: pauseAutoPlay
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: scroller,
+    className: "scroll-snap-carousel scroll-snap-m_carousel__2m3cg"
+  }, children), isArrow && /*#__PURE__*/React.createElement(SliderArrow, {
+    noOfItems: noOfItems,
+    perView: perView,
+    previousClick: previousClick,
+    nextClick: nextClick,
+    selectedIndex: selectedIndex,
+    languageDirection: languageDirection
+  })), children.length > perView && slideIndicator !== "none" && /*#__PURE__*/React.createElement(SliderIndicator, {
+    indicatorItems: indicatorItems,
+    indicatorClick: indicatorClick,
+    selectedIndex: selectedIndex,
+    indicatorType: slideIndicator
+  }));
+};
+ScrollSnap.defaultProps = {
+  isArrow: true,
+  isInfinite: false,
+  interval: 4000,
+  pauseOnHover: true,
+  perView: 1,
+  slideIndicator: "dots"
+};
+ScrollSnap.propTypes = {
+  children: array.isRequired,
+  isArrow: bool,
+  isInfinite: bool,
+  interval: number,
+  pauseOnHover: bool,
+  perView: number,
+  slideIndicator: string
+};

package/esm/components/Atoms/ScrollSnap/scroll-snap.m.css

@@ -0,0 +1,27 @@
+.wrapper {
+  position: relative;
+}
+
+.carousel {
+  display: flex;
+  overflow: auto;
+  scroll-snap-type: x mandatory;
+  -ms-overflow-style: none;
+  justify-content: space-between;
+
+  > div {
+    scroll-snap-align: start;
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+.carousel::-webkit-scrollbar {
+  display: none;
+}
+
+.carousel::-moz-scrollbar {
+  overflow: -moz-scrollbars-none;
+}

package/esm/components/Atoms/SectionTag/README.md

@@ -0,0 +1,11 @@
+# SectionTag
+Component to display the section name for the story card.
+
+## Usage 
+```jsx
+<SectionTag story={story} />
+```
+```jsx
+<SectionTag story={story} template="borderLeft" />
+```
+<!-- PROPS -->

package/esm/components/Atoms/SectionTag/index.js

@@ -0,0 +1,79 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import { get } from "lodash";
+import { Link } from "@quintype/components";
+import { useStateValue } from "../../SharedContext";
+import PropTypes from "prop-types";
+import { getTextColor, rgbToHex } from "../../../utils/utils";
+import "./section.m.css";
+var _styleModuleImportMap = {
+  "./section.m.css": {
+    "section": "section-m_section__2N4S3",
+    "section-borderBottomSml": "section-m_section-borderBottomSml__2GNbo",
+    "border-bottom": "section-m_border-bottom__3cRoD",
+    "section-borderLeft": "section-m_section-borderLeft__3hKVj",
+    "border-left": "section-m_border-left__2oUyp",
+    "section-solid": "section-m_section-solid__1vB1Q",
+    "dark": "section-m_dark__1r3C4",
+    "light": "section-m_light__306hW"
+  }
+};
+export var SectionTag = function SectionTag(_ref) {
+  var story = _ref.story,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "" : _ref$template,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "" : _ref$borderColor,
+      isLightTheme = _ref.isLightTheme;
+  var config = useStateValue() || {};
+  var isSection = get(config, ["showSection"], true);
+  var templateFromRowContext = get(config, ["sectionTagTemplate"]);
+  var section = get(story, ["sections", 0], "");
+  var supportedTemplates = ["borderBottomSml", "borderLeft", "solid"];
+  var getUrl = section ? section["section-url"] : "/";
+  var colorToApplyContrast = template === "solid" || templateFromRowContext === "solid" ? borderColor : config.theme;
+  var textColor = isLightTheme ? "light" : getTextColor(colorToApplyContrast);
+  var sectionTagBorderColor = rgbToHex(borderColor);
+  var templateStyle = supportedTemplates.includes(template) ? "section section-".concat(template) : "section";
+
+  if (templateFromRowContext) {
+    templateStyle = supportedTemplates.includes(templateFromRowContext) ? "section section-".concat(templateFromRowContext) : "section";
+  }
+
+  if (!isSection) return null;
+  return /*#__PURE__*/React.createElement(Link, {
+    href: getUrl,
+    className: "arrow-component arr--section-name",
+    "aria-label": "section-name"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "sectionTag",
+    style: {
+      backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
+    },
+    className: "section-tag arrow-component " + _getClassName("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap)
+  }, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React.createElement("span", {
+    className: "section-m_border-left__2oUyp",
+    style: {
+      color: sectionTagBorderColor
+    }
+  }), section["display-name"] || section["name"], /*#__PURE__*/React.createElement("div", {
+    className: "section-m_border-bottom__3cRoD",
+    style: {
+      backgroundColor: "".concat(template === "solid" ? "" : sectionTagBorderColor)
+    }
+  })));
+};
+SectionTag.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** The style template for section tag */
+  template: PropTypes.oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
+  borderColor: PropTypes.string,
+  solidBorderColor: PropTypes.string,
+  isLightTheme: PropTypes.bool
+};
+SectionTag.defaultProps = {
+  template: "",
+  isLightTheme: false
+};