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

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

@@ -0,0 +1,294 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./photo.m.css": {
+    "grid-col-full": "photo-m_grid-col-full__yzPY9",
+    "grid-container": "photo-m_grid-container__2cJOz",
+    "grid-col-2-10": "photo-m_grid-col-2-10__1QP-r",
+    "grid-col-10-14": "photo-m_grid-col-10-14__3gyc8",
+    "grid-col-4-12": "photo-m_grid-col-4-12__3ehij",
+    "grid-col-2-9": "photo-m_grid-col-2-9__14W_g",
+    "grid-col-9-14": "photo-m_grid-col-9-14__2_eSL",
+    "story-details": "photo-m_story-details__3buHY",
+    "side-space": "photo-m_side-space__1SyqF",
+    "header-details": "photo-m_header-details__1PGwK",
+    "space-12": "photo-m_space-12__1P16k",
+    "story-tags": "photo-m_story-tags__1tUOs",
+    "sticky": "photo-m_sticky__t5M02",
+    "index-2": "photo-m_index-2__m7dSF",
+    "tablet-index-2": "photo-m_tablet-index-2__K4P3M",
+    "fullBleed": "photo-m_fullBleed__2OPfb",
+    "space-32": "photo-m_space-32__36jfg"
+  }
+};
+
+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 { SocialShare } from "@quintype/components";
+import PropTypes from "prop-types";
+import React from "react";
+import { get, kebabCase } from "lodash";
+import { useSelector } from "react-redux";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { PhotoStoryElement, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StateProvider } from "../../../SharedContext";
+import { AsideCollection } from "../../AsideCollection";
+import "./photo.m.css";
+export var PhotoStoryBase = function PhotoStoryBase(_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,
+      widgetComp = _ref.widgetComp,
+      adComponent = _ref.adComponent,
+      firstChild = _ref.firstChild,
+      secondChild = _ref.secondChild;
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$asideCollecti = config.asideCollection,
+      asideCollection = _config$asideCollecti === void 0 ? {} : _config$asideCollecti,
+      _config$templateType = config.templateType,
+      templateType = _config$templateType === void 0 ? "default" : _config$templateType,
+      _config$noOfVisibleCa = config.noOfVisibleCards,
+      noOfVisibleCards = _config$noOfVisibleCa === void 0 ? -1 : _config$noOfVisibleCa,
+      _config$publishedDeta = config.publishedDetails,
+      publishedDetails = _config$publishedDeta === void 0 ? {} : _config$publishedDeta,
+      _config$verticalShare = config.verticalShare,
+      verticalShare = _config$verticalShare === void 0 ? "" : _config$verticalShare,
+      _config$shareIconType = config.shareIconType,
+      shareIconType = _config$shareIconType === void 0 ? "plain-color-svg" : _config$shareIconType,
+      _config$authorDetails = config.authorDetails,
+      authorDetails = _config$authorDetails === void 0 ? {
+    template: "default"
+  } : _config$authorDetails,
+      _config$imageRender = config.imageRender,
+      imageRender = _config$imageRender === void 0 ? "fullBleed" : _config$imageRender,
+      _config$premiumStoryI = config.premiumStoryIconConfig,
+      premiumStoryIconConfig = _config$premiumStoryI === void 0 ? {} : _config$premiumStoryI;
+  var isFullBleed = imageRender === "fullBleed";
+  var visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  var storyId = get(story, ["id"], "");
+  var timezone = useSelector(function (state) {
+    return get(state, ["qt", "data", "timezone"], null);
+  });
+
+  var HeaderCard = function HeaderCard() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_grid-col-2-10__1QP-r photo-m_header-details__1PGwK"
+    }, /*#__PURE__*/React.createElement(SectionTag, {
+      story: story
+    }), /*#__PURE__*/React.createElement(StoryHeadline, {
+      story: story,
+      premiumStoryIconConfig: premiumStoryIconConfig
+    }), /*#__PURE__*/React.createElement(Subheadline, {
+      story: story,
+      showFullContent: true
+    }));
+  };
+
+  var SocialShareComponent = function SocialShareComponent() {
+    return /*#__PURE__*/React.createElement("div", {
+      id: "story-share-".concat(storyId),
+      className: "content-style"
+    }, /*#__PURE__*/React.createElement(SocialShare, {
+      template: SocialShareTemplate,
+      fullUrl: encodeURI(story.url),
+      title: story.headline,
+      theme: theme,
+      vertical: !!verticalShare,
+      iconType: shareIconType,
+      shareIconId: "share-icon-story-share-".concat(storyId)
+    }));
+  };
+
+  var StoryData = function StoryData() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, authorDetails && /*#__PURE__*/React.createElement(AuthorCard, {
+      clazzName: "gap-32",
+      story: story,
+      template: authorDetails.template,
+      opts: authorDetails.opts
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_story-details__3buHY"
+    }, /*#__PURE__*/React.createElement(PublishDetails, {
+      story: story,
+      opts: publishedDetails,
+      template: "story",
+      timezone: timezone
+    }), !verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null)), visibledCards.map(function (card) {
+      return /*#__PURE__*/React.createElement(PhotoStoryElement, {
+        story: story,
+        card: card,
+        key: get(card, ["id"], ""),
+        config: _objectSpread(_objectSpread({}, storyElementsConfig), {}, {
+          theme: theme
+        }),
+        adComponent: adComponent,
+        widgetComp: widgetComp
+      });
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_space-32__36jfg"
+    }, firstChild, /*#__PURE__*/React.createElement(StoryTags, {
+      tags: story.tags
+    }), /*#__PURE__*/React.createElement(SlotAfterStory, {
+      id: story.id,
+      element: story.customSlotAfterStory,
+      AdComponent: adComponent,
+      WidgetComp: widgetComp
+    }), secondChild));
+  };
+
+  var renderImages = function renderImages(imageRender) {
+    switch (imageRender) {
+      case "fullBleed":
+        return "grid-col-full";
+
+      case "container":
+        return "grid-container";
+
+      default:
+        return "grid-col-full";
+    }
+  };
+
+  var DefaultTemplate = function DefaultTemplate(_ref2) {
+    var story = _ref2.story;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      "data-test-id": "hero-image",
+      className: _getClassName("".concat(renderImages(imageRender), " index-2"), _styleModuleImportMap)
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[16, 9], [8, 3]],
+      defaultFallback: false,
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_grid-col-2-10__1QP-r photo-m_space-12__1P16k"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(HeaderCard, null), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_grid-col-10-14__3gyc8 photo-m_space-12__1P16k"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({}, asideCollection, {
+      widgetComp: widgetComp,
+      adComponent: adComponent,
+      sticky: true,
+      storyId: storyId,
+      opts: publishedDetails
+    }))));
+  };
+
+  var HeroPriority = function HeroPriority(_ref3) {
+    var story = _ref3.story;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      "data-test-id": "hero-image",
+      className: _getClassName("".concat(renderImages(imageRender), " index-2"), _styleModuleImportMap)
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[16, 9]],
+      defaultFallback: false,
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_grid-col-4-12__3ehij photo-m_space-12__1P16k"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(HeaderCard, null), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_grid-container__2cJOz photo-m_space-12__1P16k photo-m_tablet-index-2__K4P3M"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({
+      horizontal: true
+    }, asideCollection, {
+      widgetComp: widgetComp,
+      adComponent: adComponent,
+      storyId: storyId,
+      opts: publishedDetails
+    }))));
+  };
+
+  var HeadlinePriority = function HeadlinePriority(_ref4) {
+    var story = _ref4.story;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_grid-container__2cJOz photo-m_side-space__1SyqF"
+    }, /*#__PURE__*/React.createElement(HeaderCard, null)), /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_grid-col-2-9__14W_g photo-m_side-space__1SyqF photo-m_index-2__m7dSF"
+    }, /*#__PURE__*/React.createElement(HeroImage, {
+      story: story,
+      aspectRatio: [[16, 9]],
+      defaultFallback: false,
+      isStoryPageImage: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_grid-col-2-9__14W_g photo-m_side-space__1SyqF"
+    }, /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: story,
+      config: config
+    }), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "photo-m_grid-col-9-14__2_eSL"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({}, asideCollection, {
+      widgetComp: widgetComp,
+      adComponent: adComponent,
+      sticky: true,
+      storyId: storyId,
+      opts: publishedDetails
+    }))));
+  };
+
+  var PhotoStoryTemplate = function PhotoStoryTemplate(_ref5) {
+    var templateType = _ref5.templateType;
+
+    switch (templateType) {
+      case "hero-priority-center":
+        return /*#__PURE__*/React.createElement(HeroPriority, {
+          story: story
+        });
+
+      case "headline-priority":
+        return /*#__PURE__*/React.createElement(HeadlinePriority, {
+          story: story
+        });
+
+      default:
+        return /*#__PURE__*/React.createElement(DefaultTemplate, {
+          story: story
+        });
+    }
+  };
+
+  PhotoStoryTemplate.propTypes = {
+    templateType: PropTypes.string
+  };
+  PhotoStoryTemplate.propTypes = {
+    templateType: PropTypes.string
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "photo-story-".concat(templateType, "-").concat(kebabCase(imageRender)),
+    style: {
+      backgroundColor: theme
+    },
+    className: ("arrow-component arr-story-grid arr--content-wrapper arr--photo-story-template-wrapper ".concat(templateType, " ") ? "arrow-component arr-story-grid arr--content-wrapper arr--photo-story-template-wrapper ".concat(templateType, " ") + " " : "") + _getClassName("".concat(verticalShare, " ").concat(isFullBleed ? "fullBleed" : ""), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement(PhotoStoryTemplate, {
+    templateType: templateType
+  }));
+};
+PhotoStoryBase.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    asideCollection: PropTypes.object
+  }),
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  storyElementsConfig: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func
+};
+export var PhotoStoryTemplate = StateProvider(PhotoStoryBase);

package/esm/components/Rows/StoryTemplates/PhotoStoryTemplates/photo-story.test.js

@@ -0,0 +1,163 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 * as React from "react";
+import { mount } from "enzyme";
+import { generateStory, generateCollection, generateStore } from "../../../Fixture";
+import { PhotoStoryBase } from "./index";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { Provider } from "react-redux";
+import { mockIntersectionObserver } from "../../../../utils/testing-utils";
+var story = generateStory("photo-story");
+var collection = generateCollection({
+  stories: 4
+});
+
+var configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "250px",
+    width: "300px"
+  });
+};
+
+var child = /*#__PURE__*/React.createElement("div", null, "children");
+var storyElementsConfig = {
+  summary: {},
+  blurb: {},
+  blockquote: {},
+  quote: {},
+  "also-read": {},
+  "q-and-a": {},
+  question: {},
+  answer: {}
+};
+var templateConfig = {
+  theme: "#ffffff",
+  noOfVisibleCards: -1,
+  publishedDetails: {
+    enablePublishedTime: true,
+    enableUpdatedTime: false,
+    showReadTime: true
+  },
+  asideCollection: {
+    data: collection,
+    config: {
+      collectionNameBorderColor: "#3a9fdd",
+      title: "Trending",
+      theme: "#ffffff",
+      adSlot: [{
+        type: "ad",
+        component: configurableSlot
+      }]
+    }
+  }
+};
+beforeEach(function () {
+  mockIntersectionObserver();
+});
+describe("photo Story Templates", function () {
+  it("Should render photo story template with image full-bleed", function () {
+    var config = Object.assign({
+      imageRender: "fullBleed"
+    }, templateConfig);
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(PhotoStoryBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "hero-image"
+    }).prop("className")).toMatch(/grid-col-full/);
+  });
+  it("Should render photo story template with image with in container", function () {
+    var config = Object.assign({
+      imageRender: "container"
+    }, templateConfig);
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(PhotoStoryBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "hero-image"
+    }).prop("className")).toMatch(/grid-containe/);
+  });
+  it("Should render hero priority center align template", function () {
+    var config = _objectSpread(_objectSpread({}, templateConfig), {}, {
+      templateType: "hero-priority-center",
+      imageRender: "container"
+    });
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(PhotoStoryBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "photo-story-hero-priority-center-container"
+    }).prop("className")).toMatch(/hero-priority-center/);
+  });
+  it("Should render hero priority left align template", function () {
+    var config = _objectSpread(_objectSpread({}, templateConfig), {}, {
+      templateType: "default",
+      imageRender: "container"
+    });
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(PhotoStoryBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "photo-story-default-container"
+    }).prop("className")).toMatch(/default/);
+  });
+  it("Should render headline priority template", function () {
+    var config = _objectSpread(_objectSpread({}, templateConfig), {}, {
+      templateType: "headline-priority",
+      imageRender: "container"
+    });
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(PhotoStoryBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "photo-story-headline-priority-container"
+    }).prop("className")).toMatch(/headline-priority/);
+  });
+});

package/esm/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css

@@ -0,0 +1,175 @@
+@import "../../../../../assets/stylesheets/mixins.scss";
+
+.grid-col-full {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: grid-start / grid-end;
+  }
+}
+.grid-container {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: container-start / container-end;
+  }
+}
+
+.grid-col-2-10 {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: container-start / 9;
+    @include desktop {
+      grid-column: container-start / 10;
+    }
+  }
+}
+.grid-col-10-14 {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 9 / container-end;
+    grid-row: 2 / auto;
+    @include desktop {
+      grid-column: 10 / container-end;
+    }
+  }
+}
+.grid-col-4-12 {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 4 / 12;
+  }
+}
+.grid-col-2-9 {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: container-start / 9;
+  }
+}
+
+.grid-col-9-14 {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 9 / 14;
+    grid-row: 2 / 6;
+  }
+}
+.story-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--arrow-spacing-l);
+  @include tablet {
+    margin-bottom: var(--arrow-spacing-xl);
+  }
+}
+.side-space {
+  margin-top: var(--arrow-spacing-m);
+  @include tablet {
+    margin-top: var(--arrow-spacing-l);
+  }
+}
+:global(.gap-32) {
+  margin-top: var(--arrow-spacing-l);
+  @include tablet {
+    margin-top: var(--arrow-spacing-xl);
+  }
+}
+
+.header-details {
+  :global(.arr--sub-headline) {
+    font-size: var(--arrow-fs-s);
+    font-style: italic;
+    @include tablet {
+      font-size: var(--arrow-fs-m);
+    }
+  }
+  .space-12 {
+    margin-top: var(--arrow-spacing-m);
+    @include tablet {
+      margin-top: var(--arrow-spacing-xl);
+    }
+  }
+}
+
+.story-tags {
+  margin: var(--arrow-spacing-l) 0;
+}
+
+.sticky :global(.arr--share) {
+  grid-column: 4/5;
+  justify-self: flex-end;
+  @include tablet {
+    grid-column: 8/9;
+    @include desktop {
+      position: sticky;
+      position: -webkit-sticky;
+      grid-column: grid-start/container-start;
+      grid-row: 2/3;
+      align-self: flex-start;
+      margin-top: var(--arrow-spacing-xs);
+      top: 120px;
+    }
+  }
+}
+
+.sticky:global(.hero-priority-center) {
+  :global(.arr--share) {
+    @include tablet {
+      grid-column: 9 / grid-end;
+      @include desktop {
+        grid-column: 3/4;
+      }
+    }
+  }
+}
+
+.sticky .index-2 {
+  z-index: 2;
+  @include desktop {
+    z-index: unset;
+  }
+}
+
+.tablet-index-2 {
+  @include tablet {
+    z-index: 2;
+  }
+}
+
+.fullBleed {
+  margin: unset;
+}
+
+.fullBleed:global(.headline-priority) .side-space.index-2 {
+  @include mobile {
+    margin: var(--arrow-spacing-m) 0 0;
+  }
+}
+
+.fullBleed:global(.headline-priority) .grid-container,
+.fullBleed:global(.headline-priority) .grid-col-9-14 {
+  @include mobile {
+    margin: 0 var(--arrow-spacing-s);
+  }
+}
+
+.fullBleed:global(.headline-priority) .side-space {
+  @include mobile {
+    margin: var(--arrow-spacing-m) var(--arrow-spacing-s) 0;
+  }
+}
+
+.fullBleed .space-12 {
+  @include mobile {
+    margin: 0 var(--arrow-spacing-s) 0;
+  }
+}
+
+.space-12 .header-details {
+  @include mobile {
+    margin-top: var(--arrow-spacing-xl);
+  }
+}
+
+.space-32 > * {
+  margin-top: var(--arrow-spacing-l);
+}