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

package/esm/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js

@@ -0,0 +1,330 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import { SocialShare } from "@quintype/components";
+import React from "react";
+import { useSelector } from "react-redux";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { StateProvider } from "../../../SharedContext";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import "./listicle-story.m.css";
+import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { AsideCollection } from "../../AsideCollection";
+var _styleModuleImportMap = {
+  "./listicle-story.m.css": {
+    "headline-block": "listicle-story-m_headline-block__2zouc",
+    "section-tag": "listicle-story-m_section-tag__3U7ij",
+    "caption-attribution-block": "listicle-story-m_caption-attribution-block__1HlXc",
+    "body-block": "listicle-story-m_body-block__1vkh2",
+    "timestamp-social-share": "listicle-story-m_timestamp-social-share__1QaP8",
+    "bullet-style-number": "listicle-story-m_bullet-style-number__Pu-qB",
+    "bullet-style-dash": "listicle-story-m_bullet-style-dash__3w8Xk",
+    "story-tags": "listicle-story-m_story-tags__3wgXG",
+    "grid-container": "listicle-story-m_grid-container__3QPf4",
+    "full-grid": "listicle-story-m_full-grid__1JW4I",
+    "left-column": "listicle-story-m_left-column__7wBoP",
+    "right-column": "listicle-story-m_right-column__mZg2Z",
+    "center-column": "listicle-story-m_center-column__2JfyN",
+    "hero-faded-relative": "listicle-story-m_hero-faded-relative__3yRRc",
+    "hero-faded-wrapper": "listicle-story-m_hero-faded-wrapper__1ydbl",
+    "headline-content-holder": "listicle-story-m_headline-content-holder__14Z-H",
+    "numbered-bullet-style": "listicle-story-m_numbered-bullet-style__wkMhw",
+    "sideway-grid": "listicle-story-m_sideway-grid__1_W8y",
+    "sideway-headline": "listicle-story-m_sideway-headline__3zISp",
+    "sideway-hero": "listicle-story-m_sideway-hero__358H3",
+    "headline-priority-grid": "listicle-story-m_headline-priority-grid__1KLB7",
+    "hero-priority-template": "listicle-story-m_hero-priority-template__1D9lF",
+    "headline-priority-template": "listicle-story-m_headline-priority-template__2Dkhi",
+    "headline-hero-priority-template": "listicle-story-m_headline-hero-priority-template__3ZEnh",
+    "hero-overlay-template": "listicle-story-m_hero-overlay-template__SeVui",
+    "headline-sideway-template": "listicle-story-m_headline-sideway-template__1kjin"
+  }
+};
+export var ListicleStoryTemplateBase = function ListicleStoryTemplateBase(_ref) {
+  var _ref$story = _ref.story,
+      story = _ref$story === void 0 ? {} : _ref$story,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      storyElementsConfig = _ref.storyElementsConfig,
+      adComponent = _ref.adComponent,
+      _ref$widgetComp = _ref.widgetComp,
+      widgetComp = _ref$widgetComp === void 0 ? function () {} : _ref$widgetComp,
+      firstChild = _ref.firstChild,
+      secondChild = _ref.secondChild;
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$noOfVisibleCa = config.noOfVisibleCards,
+      noOfVisibleCards = _config$noOfVisibleCa === void 0 ? -1 : _config$noOfVisibleCa,
+      _config$publishedDeta = config.publishedDetails,
+      publishedDetails = _config$publishedDeta === void 0 ? {} : _config$publishedDeta,
+      _config$templateType = config.templateType,
+      templateType = _config$templateType === void 0 ? "" : _config$templateType,
+      _config$authorDetails = config.authorDetails,
+      authorDetails = _config$authorDetails === void 0 ? {
+    template: "default"
+  } : _config$authorDetails,
+      _config$asideCollecti = config.asideCollection,
+      asideCollection = _config$asideCollecti === void 0 ? {} : _config$asideCollecti,
+      showSection = config.showSection,
+      sectionTagSettings = config.sectionTagSettings,
+      _config$premiumStoryI = config.premiumStoryIconConfig,
+      premiumStoryIconConfig = _config$premiumStoryI === void 0 ? {} : _config$premiumStoryI;
+  var visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  var _story$bulletType = story["bullet-type"],
+      storyBulletType = _story$bulletType === void 0 ? "" : _story$bulletType;
+  var storyId = get(story, ["id"], "");
+  var isNumberedBullet = storyBulletType !== "bullets";
+  var timezone = useSelector(function (state) {
+    return get(state, ["qt", "data", "timezone"], null);
+  }); // Content Blocks
+
+  var HeroImageBlock = function HeroImageBlock(settings) {
+    var _settings$widths = settings.widths,
+        widths = _settings$widths === void 0 ? [320, 480, 768, 1024, 1140] : _settings$widths,
+        _settings$aspectRatio = settings.aspectRatio,
+        aspectRatio = _settings$aspectRatio === void 0 ? [[16, 9]] : _settings$aspectRatio;
+    return /*#__PURE__*/React.createElement(HeroImage, {
+      defaultWidth: 320,
+      story: story,
+      widths: widths,
+      aspectRatio: aspectRatio,
+      defaultFallback: false,
+      isStoryPageImage: true
+    });
+  };
+
+  var CaptionAttributionBlock = function CaptionAttributionBlock() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_caption-attribution-block__1HlXc"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story
+    }));
+  };
+
+  var HeadlineBlock = function HeadlineBlock() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_headline-block__2zouc"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_section-tag__3U7ij"
+    }, showSection && /*#__PURE__*/React.createElement(SectionTag, _extends({
+      story: story
+    }, sectionTagSettings))), /*#__PURE__*/React.createElement(StoryHeadline, {
+      story: story,
+      premiumStoryIconConfig: premiumStoryIconConfig
+    }), /*#__PURE__*/React.createElement(Subheadline, {
+      story: story,
+      showFullContent: true
+    }));
+  };
+
+  var AuthourBlock = function AuthourBlock() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AuthorCard, _extends({
+      story: story
+    }, authorDetails)), /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_timestamp-social-share__1QaP8"
+    }, /*#__PURE__*/React.createElement(PublishDetails, {
+      story: story,
+      opts: publishedDetails,
+      template: "story",
+      timezone: timezone
+    }), /*#__PURE__*/React.createElement("div", {
+      id: "story-share-".concat(storyId),
+      className: "content-style"
+    }, /*#__PURE__*/React.createElement(SocialShare, {
+      template: SocialShareTemplate,
+      theme: theme,
+      fullUrl: encodeURI(story.url),
+      title: story.headline,
+      shareIconId: "share-icon-story-share-".concat(storyId)
+    }))));
+  };
+
+  var BodyBlock = function BodyBlock() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: _getClassName("body-block ".concat(isNumberedBullet ? "numbered-bullet-style" : ""), _styleModuleImportMap)
+    }, visibledCards.map(function (card, index) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: card.id
+      }, !isNumberedBullet ? /*#__PURE__*/React.createElement("div", {
+        className: "listicle-story-m_bullet-style-dash__3w8Xk"
+      }) : /*#__PURE__*/React.createElement("div", {
+        className: "listicle-story-m_bullet-style-number__Pu-qB"
+      }, index + 1, "."), /*#__PURE__*/React.createElement(StoryElementCard, {
+        story: story,
+        card: card,
+        key: card.id,
+        config: storyElementsConfig,
+        adComponent: adComponent,
+        widgetComp: widgetComp
+      }));
+    }), firstChild, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_story-tags__3wgXG"
+    }, /*#__PURE__*/React.createElement(StoryTags, {
+      tags: story.tags
+    }), /*#__PURE__*/React.createElement(SlotAfterStory, {
+      id: story.id,
+      element: story.customSlotAfterStory,
+      AdComponent: adComponent,
+      WidgetComp: widgetComp
+    })), secondChild);
+  };
+
+  var SideColumnBlock = function SideColumnBlock() {
+    return asideCollection && /*#__PURE__*/React.createElement(AsideCollection, _extends({}, asideCollection, {
+      adComponent: adComponent,
+      widgetComp: widgetComp,
+      sticky: true,
+      storyId: storyId,
+      opts: publishedDetails
+    }));
+  }; // Templates
+
+
+  var DefaultTemplate = function DefaultTemplate() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeroImageBlock, {
+      aspectRatio: [[16, 9], [16, 6]]
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_grid-container__3QPf4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_full-grid__1JW4I"
+    }, /*#__PURE__*/React.createElement(CaptionAttributionBlock, null)), /*#__PURE__*/React.createElement("div", {
+      "data-type-column": "left",
+      className: "listicle-story-m_left-column__7wBoP"
+    }, /*#__PURE__*/React.createElement(HeadlineBlock, null), /*#__PURE__*/React.createElement(AuthourBlock, null), /*#__PURE__*/React.createElement(BodyBlock, null)), /*#__PURE__*/React.createElement("div", {
+      "data-type-column": "right",
+      className: "listicle-story-m_right-column__mZg2Z"
+    }, /*#__PURE__*/React.createElement(SideColumnBlock, null))));
+  };
+
+  var HeroPriority = function HeroPriority() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_hero-priority-template__1D9lF"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_grid-container__3QPf4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_full-grid__1JW4I"
+    }, /*#__PURE__*/React.createElement(HeroImageBlock, null)), /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_center-column__2JfyN"
+    }, /*#__PURE__*/React.createElement(CaptionAttributionBlock, null), /*#__PURE__*/React.createElement(HeadlineBlock, null), /*#__PURE__*/React.createElement(AuthourBlock, null), /*#__PURE__*/React.createElement(BodyBlock, null))));
+  };
+
+  var HeadlinePriority = function HeadlinePriority() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_headline-priority-template__2Dkhi"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_grid-container__3QPf4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_headline-priority-grid__1KLB7"
+    }, /*#__PURE__*/React.createElement(HeadlineBlock, null)), /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_left-column__7wBoP"
+    }, /*#__PURE__*/React.createElement(HeroImageBlock, null), /*#__PURE__*/React.createElement(CaptionAttributionBlock, null), /*#__PURE__*/React.createElement(AuthourBlock, null), /*#__PURE__*/React.createElement(BodyBlock, null)), /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_right-column__mZg2Z"
+    }, /*#__PURE__*/React.createElement(SideColumnBlock, null))));
+  };
+
+  var HeadlineHeroPriority = function HeadlineHeroPriority() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_headline-hero-priority-template__3ZEnh"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_grid-container__3QPf4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_center-column__2JfyN"
+    }, /*#__PURE__*/React.createElement(HeadlineBlock, null)), /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_full-grid__1JW4I"
+    }, /*#__PURE__*/React.createElement(HeroImageBlock, null)), /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_center-column__2JfyN"
+    }, /*#__PURE__*/React.createElement(CaptionAttributionBlock, null), /*#__PURE__*/React.createElement(AuthourBlock, null), /*#__PURE__*/React.createElement(BodyBlock, null))));
+  };
+
+  var HeroOverlay = function HeroOverlay() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_hero-overlay-template__SeVui"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_grid-container__3QPf4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_full-grid__1JW4I listicle-story-m_hero-faded-relative__3yRRc"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_hero-faded-wrapper__1ydbl"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_headline-content-holder__14Z-H"
+    }, /*#__PURE__*/React.createElement(HeadlineBlock, null))), /*#__PURE__*/React.createElement(HeroImageBlock, {
+      aspectRatio: [[2, 3], [16, 9]]
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_grid-container__3QPf4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_center-column__2JfyN"
+    }, /*#__PURE__*/React.createElement(CaptionAttributionBlock, null), /*#__PURE__*/React.createElement(AuthourBlock, null), /*#__PURE__*/React.createElement(BodyBlock, null))));
+  };
+
+  var HeadlineSideway = function HeadlineSideway() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_headline-sideway-template__1kjin"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_sideway-grid__1_W8y"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_sideway-headline__3zISp"
+    }, /*#__PURE__*/React.createElement(HeadlineBlock, null)), /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_sideway-hero__358H3"
+    }, /*#__PURE__*/React.createElement(HeroImageBlock, {
+      aspectRatio: [[16, 9], [4, 3]]
+    }), /*#__PURE__*/React.createElement(CaptionAttributionBlock, null))), /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_grid-container__3QPf4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "listicle-story-m_center-column__2JfyN"
+    }, /*#__PURE__*/React.createElement(AuthourBlock, null), /*#__PURE__*/React.createElement(BodyBlock, null))));
+  };
+
+  var renderTemplate = function renderTemplate() {
+    switch (templateType) {
+      case "hero-priority":
+        return /*#__PURE__*/React.createElement(HeroPriority, null);
+
+      case "headline-priority":
+        return /*#__PURE__*/React.createElement(HeadlinePriority, null);
+
+      case "headline-hero-priority":
+        return /*#__PURE__*/React.createElement(HeadlineHeroPriority, null);
+
+      case "hero-overlay":
+        return /*#__PURE__*/React.createElement(HeroOverlay, null);
+
+      case "headline-sideway":
+        return /*#__PURE__*/React.createElement(HeadlineSideway, null);
+
+      default:
+        return /*#__PURE__*/React.createElement(DefaultTemplate, null);
+    }
+  };
+
+  var dataTestId = templateType ? "listicle-story-".concat(templateType) : "listicle-story";
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": dataTestId,
+    className: "arrow-component arr--content-wrapper arr--listicle-story-template-wrapper",
+    style: {
+      backgroundColor: theme
+    }
+  }, renderTemplate());
+};
+ListicleStoryTemplateBase.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    authorCard: PropTypes.object,
+    asideCollection: PropTypes.object
+  }),
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  storyElementsConfig: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  premiumStoryIconConfig: PropTypes.object
+};
+export var ListicleStoryTemplate = StateProvider(ListicleStoryTemplateBase);

package/esm/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css

@@ -0,0 +1,249 @@
+@import "../../../../../assets/stylesheets/mixins.scss";
+:root {
+  --grid-container-width: 1140px;
+  --fluid-grid-container-width: 1440px;
+}
+
+/*  Generinc style */
+.headline-block :global(.arr--story-headline) {
+  font-size: var(--arrow-fs-28);
+  line-height: normal;
+  @include tablet {
+    font-size: var(--arrow-fs-big);
+    line-height: var(--arrow-lh-2);
+  }
+}
+
+.headline-block :global(.arr--sub-headline) {
+  font-size: var(--arrow-fs-s);
+  font-style: italic;
+  margin: var(--arrow-spacing-xs) 0 var(--arrow-spacing-l);
+  @include tablet {
+    font-size: var(--arrow-fs-m);
+    margin-bottom: var(--arrow-spacing-xl);
+  }
+}
+
+.section-tag {
+  margin-bottom: var(--arrow-spacing-s);
+}
+.caption-attribution-block {
+  margin-bottom: var(--arrow-spacing-l);
+  @include tablet {
+    margin-bottom: var(--arrow-spacing-xl);
+  }
+}
+
+.body-block :global(.arr--element-container) {
+  margin-top: var(--arrow-spacing-s);
+  @include tablet {
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+
+.body-block :global(.story-element-title) {
+  line-height: var(--arrow-lh-2);
+}
+
+.timestamp-social-share {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: var(--arrow-spacing-xxs) 0 var(--arrow-spacing-l);
+}
+
+.bullet-style-number {
+  font-size: var(--arrow-fs-l);
+  font-weight: var(--arrow-fw-bold);
+  color: var(--arrow-c-brand1);
+  @include tablet {
+    font-size: var(--arrow-fs-huge);
+    font-weight: var(--arrow-fw-semi-bold);
+  }
+}
+
+.bullet-style-dash {
+  content: "";
+  width: 24px;
+  height: 8px;
+  background-color: var(--arrow-c-brand1);
+  @include tablet {
+    height: 12px;
+  }
+}
+
+.story-tags > * {
+  margin: var(--arrow-spacing-l) 0;
+}
+
+/* Layout */
+.grid-container {
+  max-width: var(--grid-container-width);
+  padding: 0 var(--arrow-spacing-s);
+  margin: 0 auto;
+  @include tablet {
+    display: grid;
+    grid-column-gap: 24px;
+    grid-template-columns: repeat(12, 1fr);
+    padding: 0 var(--arrow-spacing-l);
+
+    .full-grid {
+      grid-column: 1 / 13;
+      @include desktop {
+        margin: 0 -24px;
+      }
+    }
+  }
+}
+
+.left-column {
+  @include tablet {
+    grid-column: 1 / 8;
+  }
+
+  @include desktop {
+    grid-column: 1 / 9;
+  }
+}
+
+.right-column {
+  @include tablet {
+    grid-column: 8 / 13;
+  }
+
+  @include desktop {
+    grid-column: 9 / 13;
+  }
+}
+
+.right-column :global(.aside-collection-ad-slot:first-child) {
+  margin-top: 0;
+}
+
+.center-column {
+  @include tablet {
+    grid-column: 3 / 11;
+  }
+}
+
+/* Template specific */
+.hero-faded-relative {
+  position: relative;
+}
+.hero-faded-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: var(--z-index-1);
+  background: rgb(0 0 0 / 0.5);
+
+  display: flex;
+  align-items: center;
+
+  @include tablet {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+.hero-faded-wrapper .headline-content-holder {
+  padding: 0 24px;
+
+  @include tablet {
+    grid-column: 2 / 12;
+  }
+  @include desktop {
+    grid-column: 3 / 11;
+  }
+}
+
+.numbered-bullet-style :global(.arr--story-page-card-wrapper) > :last-child {
+  margin-bottom: var(--arrow-spacing-xl);
+}
+
+.hero-faded-wrapper .headline-content-holder :global(.arr--story-headline),
+.hero-faded-wrapper .headline-content-holder :global(.arr--sub-headline),
+.hero-faded-wrapper .headline-content-holder :global(.arr--section-name .section-tag) {
+  color: var(--arrow-c-light);
+}
+
+.sideway-grid {
+  padding: 0 var(--arrow-spacing-s);
+  @include tablet {
+    display: grid;
+    max-width: var(--fluid-grid-container-width);
+    margin: 0 auto var(--arrow-spacing-l);
+    padding: 0 0 0 24px;
+    grid-template-columns: repeat(12, 1fr);
+    grid-column-gap: 24px;
+  }
+
+  @include desktop {
+    padding: 0;
+  }
+}
+
+.sideway-headline {
+  @include tablet {
+    grid-column: 1 / 6;
+    display: flex;
+    align-items: center;
+  }
+  @include desktop {
+    grid-column: 2 / 7;
+  }
+}
+
+.sideway-hero {
+  @include tablet {
+    grid-column: 6 / 13;
+
+    .caption-attribution-block {
+      margin-bottom: 0;
+    }
+  }
+  @include desktop {
+    grid-column: 7 / 13;
+  }
+}
+
+.headline-priority-grid {
+  @include tablet {
+    grid-column: 1 / 13;
+  }
+
+  @include desktop {
+    grid-column: 1 / 9;
+  }
+}
+
+.hero-priority-template,
+.headline-priority-template,
+.headline-hero-priority-template,
+.hero-overlay-template,
+.headline-sideway-template {
+  margin-top: var(--arrow-spacing-s);
+  @include tablet {
+    margin-top: var(--arrow-spacing-l);
+  }
+  @include desktop {
+    margin-top: var(--arrow-spacing-xl);
+  }
+}
+
+.numbered-bullet-style :global(.arr--story-page-card-wrapper) > * {
+  margin-top: var(--arrow-spacing-xs);
+  margin-bottom: var(--arrow-spacing-s);
+  @include tablet {
+    margin-bottom: var(--arrow-spacing-20);
+    @include desktop {
+      margin-top: var(--arrow-spacing-xxs);
+    }
+  }
+}
+
+.numbered-bullet-style :global(.story-element-title) h2 {
+  padding: 0;
+}

package/esm/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.test.js

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { shallow } from "enzyme";
+import { generateStory } from "../../../Fixture";
+import { ListicleStoryTemplate } from "./index";
+import { mockIntersectionObserver } from "../../../../utils/testing-utils";
+var story = generateStory("listicle-story");
+var storyElementsConfig = {
+  summary: {},
+  blurb: {},
+  blockquote: {},
+  quote: {},
+  "also-read": {},
+  "q-and-a": {},
+  question: {},
+  answer: {},
+  references: {}
+};
+beforeEach(function () {
+  mockIntersectionObserver();
+});
+describe("Listicle Story Templates", function () {
+  it("Should render listicle story template with section tag", function () {
+    var templateConfig = {
+      templateType: "default",
+      showSection: true
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(ListicleStoryTemplate, {
+      story: story,
+      config: templateConfig,
+      storyElementsConfig: storyElementsConfig
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("Should render listicle story template without section tag", function () {
+    var templateConfig = {
+      templateType: "default",
+      showSection: false
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(ListicleStoryTemplate, {
+      story: story,
+      config: templateConfig,
+      storyElementsConfig: storyElementsConfig
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});