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

package/esm/components/Rows/StoryTemplates/TextStoryTemplates/text-story.m.css

@@ -0,0 +1,449 @@
+@import "../../../../stylesheets/mixins.scss";
+
+.header-details {
+  margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-xs) 0;
+  @include tablet {
+    margin: var(--arrow-fs-huge) 0;
+  }
+}
+
+.header-details :global(.arr--sub-headline) {
+  font-size: var(--arrow-fs-s);
+  font-style: italic;
+  @include tablet {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.timestamp-social-share {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--arrow-spacing-s);
+  @include tablet {
+    margin-top: 0;
+  }
+}
+.story-tags > * {
+  margin: var(--arrow-spacing-m) 0;
+  @include tablet {
+    margin: var(--arrow-spacing-l) 0;
+  }
+}
+
+.hero-image :global(.arr--hero-image) {
+  padding: 0;
+}
+
+.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.hero-vertical-priority,
+.headline-hero-priority,
+.hero-priority-center,
+.headline-overlay-priority {
+  .story-content-inner-wrapper {
+    grid-column: 1/5;
+    @include tablet {
+      grid-column: 4/ 12;
+    }
+  }
+  .aside-collection {
+    grid-column: 1/5;
+    @include tablet {
+      grid-column: container-start / container-end;
+    }
+  }
+}
+
+.default :global(.section-tag) {
+  margin-bottom: var(--arrow-spacing-xs);
+}
+
+.default .story-details,
+.default .aside-collection {
+  margin: 0 var(--arrow-spacing-s);
+  @include tablet {
+    margin: unset;
+  }
+}
+
+.sticky :global(.arr--share) {
+  grid-column: 4/5;
+  justify-self: flex-end;
+  @include tablet {
+    /*  grid column value is to make the vertical share sticky */
+    grid-column: 9 / grid-end;
+    @include desktop {
+      position: sticky;
+      position: -webkit-sticky;
+      top: 120px;
+      grid-column: 3/ 4;
+      grid-row: 2/3;
+      align-self: flex-start;
+      margin-top: var(--arrow-spacing-xs);
+    }
+  }
+}
+
+.default .hero-image {
+  @include tablet {
+    grid-column: gutter-1-start/ gutter-2-end;
+  }
+}
+
+.headline-overlay-priority > .hero-image {
+  background-color: var(--arrow-c-dark);
+  overflow: hidden;
+  grid-row: 1 / 2;
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 2 / 14;
+  }
+}
+
+.headline-overlay-priority .header-details {
+  align-self: center;
+  grid-row: 1/2;
+  grid-column: 1/5;
+  padding: 0 var(--arrow-fs-l);
+  z-index: 2;
+  @include tablet {
+    grid-column: 3 / 13;
+    @include desktop {
+      grid-column: 4 / 12;
+    }
+  }
+  :global(.section-tag) {
+    color: var(--arrow-c-invert-mono4);
+  }
+  :global(.arr--sub-headline),
+  :global(.arr--story-headline) {
+    color: var(--arrow-c-invert-mono1);
+  }
+}
+
+.headline-hero-priority.sticky {
+  :global(.arr--share) {
+    @include desktop {
+      grid-row: 3/4;
+    }
+  }
+}
+
+.default.sticky,
+.headline-priority.sticky {
+  :global(.arr--share) {
+    @include desktop {
+      grid-column: grid-start / container-start;
+      grid-row: 2/3;
+    }
+  }
+}
+
+.hero-vertical-priority.container :global(.section-tag) {
+  padding: var(--arrow-spacing-xxs) 0 var(--arrow-spacing-xs);
+  @include tablet {
+    padding: unset;
+  }
+}
+
+.hero-vertical-priority.container :global(.arr--caption-attribution) {
+  margin: 0 0 var(--arrow-spacing-xs);
+}
+
+.hero-vertical-priority.fullBleed :global(.section-tag) {
+  padding-bottom: var(--arrow-spacing-xs);
+  @include tablet {
+    padding-bottom: unset;
+  }
+}
+
+.fullBleed.hero-vertical-priority :global(.arr--caption-attribution) {
+  @include mobile {
+    margin: var(--arrow-spacing-xs) var(--arrow-spacing-s);
+  }
+}
+
+.hero-vertical-priority.headline-first.sticky :global(.arr--share) {
+  @include desktop {
+    grid-row: 3/4;
+  }
+}
+
+.text-story-side-column {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 9 / 14;
+    grid-row: 2/3;
+    @include desktop {
+      grid-column: 10 / 14;
+    }
+  }
+}
+
+.headline-priority {
+  .header-details {
+    grid-column: 1/5;
+    @include tablet {
+      grid-column: 2 / 14;
+      @include desktop {
+        grid-column: 2 / 10;
+      }
+    }
+  }
+  .story-content-inner-wrapper {
+    grid-column: 1/5;
+    @include tablet {
+      grid-column: 2 / 9;
+      @include desktop {
+        grid-column: 2 / 10;
+      }
+    }
+  }
+  .text-story-side-column {
+    @include tablet {
+      grid-row: 2/6;
+    }
+  }
+}
+
+.default.fullBleed .hero-image,
+.headline-hero-priority.fullBleed .hero-image,
+.hero-priority-center.fullBleed .hero-image {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: grid-start/ grid-end;
+  }
+}
+
+.default .story-content-inner-wrapper {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 2 / 9;
+    @include desktop-lg {
+      grid-column: 2 / 10;
+    }
+  }
+}
+
+.default .text-story-side-column {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 9 / 14;
+    @include desktop-lg {
+      grid-column: 10 / 14;
+    }
+  }
+}
+
+.fullBleed .story-content-inner-wrapper,
+.fullBleed.hero-vertical-priority .aside-collection,
+.fullBleed.headline-hero-priority .aside-collection .fullBleed.hero-priority-center .aside-collection,
+.fullBleed .text-story-side-column {
+  @include mobile {
+    margin: 0 var(--arrow-spacing-s);
+  }
+}
+
+.fullBleed.hero-vertical-priority .header-details {
+  margin: var(--arrow-spacing-m) var(--arrow-spacing-s) var(--arrow-spacing-xs);
+  @include tablet {
+    margin: var(--arrow-fs-huge) 0;
+  }
+}
+
+.default.container {
+  .hero-image :global(.arr--hero-image) {
+    margin-top: var(--arrow-spacing-s);
+    @include tablet {
+      grid-column: 2 / 14;
+      margin-top: unset;
+    }
+  }
+}
+
+.hero-vertical-priority.image-first .header-details {
+  padding-bottom: 20px;
+  @include tablet {
+    padding-bottom: unset;
+  }
+}
+
+.hero-vertical-priority.image-first .image-wrapper {
+  grid-row: 1/2;
+  @include tablet {
+    grid-row: unset;
+    grid-column: 8 / 14;
+    margin-bottom: var(--arrow-spacing-l);
+    @include desktop-lg {
+      grid-column: 8 / 13;
+    }
+  }
+}
+
+.hero-priority-center.container .hero-image,
+.headline-hero-priority.container .hero-image,
+.default.container .hero-image {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 2 / 14;
+    margin-top: var(--arrow-spacing-xs);
+    @include desktop-lg {
+      margin-top: var(--arrow-spacing-m);
+    }
+  }
+}
+
+.hero-vertical-priority.fullBleed.headline-first .hero-image {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 7 / grid-end;
+    @include desktop {
+      grid-column: 8 / grid-end;
+    }
+  }
+}
+.hero-vertical-priority.fullBleed.headline-first :global(.arr--caption-attribution) {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 7 / grid-end;
+    @include desktop {
+      grid-column: 8 / grid-end;
+      grid-row: 2/3;
+    }
+  }
+}
+
+.hero-vertical-priority.fullBleed.headline-first .header-details {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 2 / 7;
+    align-self: center;
+    @include desktop {
+      grid-column: 2 / 8;
+    }
+  }
+}
+
+.hero-vertical-priority.container.headline-first .header-details {
+  grid-column: 1/5;
+  @include tablet {
+    align-self: center;
+    grid-column: 2 / 8;
+    @include desktop {
+      grid-column: 3 / 8;
+    }
+  }
+}
+
+.hero-vertical-priority.container.headline-first .hero-image,
+.hero-vertical-priority.container.headline-first :global(.arr--caption-attribution) {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 8 / 14;
+    @include desktop {
+      grid-column: 8 / 13;
+    }
+  }
+}
+
+.hero-vertical-priority.fullBleed.image-first .hero-image {
+  grid-column: 1/5;
+  @include tablet {
+    grid-row: 1 / 2;
+    grid-column: grid-start / 9;
+    @include desktop {
+      grid-column: grid-start / 8;
+    }
+  }
+}
+
+.hero-vertical-priority.fullBleed.image-first :global(.arr--caption-attribution) {
+  grid-column: 1/5;
+  @include tablet {
+    grid-row: 1 / 2;
+    grid-column: grid-start / 9;
+    @include desktop {
+      grid-column: grid-start / 8;
+    }
+  }
+}
+
+.hero-vertical-priority.fullBleed.image-first .header-details {
+  grid-column: 1/5;
+  @include tablet {
+    align-self: center;
+    grid-column: 9 / 14;
+    @include desktop {
+      grid-column: 8 / 14;
+    }
+  }
+}
+
+.hero-vertical-priority.container.image-first .header-details {
+  grid-column: 1/5;
+  @include tablet {
+    align-self: center;
+    grid-column: 8 / 14;
+    @include desktop {
+      grid-column: 8 / 13;
+    }
+  }
+}
+
+.hero-vertical-priority.container.image-first .hero-image,
+.hero-vertical-priority.container.image-first :global(.arr--caption-attribution) {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 2 / 8;
+    grid-row: 1 / 2;
+    @include desktop {
+      grid-column: 3 / 8;
+    }
+  }
+
+  :global(.section-tag) {
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.hero-vertical-priority.container .story-content-wrapper {
+  display: grid;
+}
+
+.headline-overlay-priority > .hero-image figure {
+  opacity: 0.5;
+}
+.headline-overlay-priority > .hero-image img {
+  -webkit-filter: blur(4px);
+  filter: blur(4px);
+}
+
+.gap-16 {
+  margin-top: var(--arrow-spacing-m);
+}
+
+.sticky .index-2 {
+  @include tablet {
+    z-index: 2;
+    @include desktop {
+      z-index: unset;
+    }
+  }
+}
+
+.tablet-index-2 {
+  @include tablet {
+    z-index: 2;
+  }
+}
+
+.fullBleed:global(.arr-story-grid) {
+  margin: unset;
+}

package/esm/components/Rows/StoryTemplates/TextStoryTemplates/text-story.test.js

@@ -0,0 +1,242 @@
+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 { TextStoryTemplateBase } from "./index";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { Provider } from "react-redux";
+import { mockIntersectionObserver } from "../../../../utils/testing-utils";
+var story = generateStory();
+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",
+  sort: "image-first",
+  noOfVisibleCards: -1,
+  publishedDetails: {
+    enablePublishedTime: true,
+    enableUpdatedTime: false,
+    showReadTime: true
+  },
+  asideCollection: {
+    data: collection,
+    config: {
+      collectionNameBorderColor: "#3a9fdd",
+      title: "Trending",
+      theme: "#ffffff",
+      adSlot: [{
+        type: "ad",
+        component: configurableSlot
+      }]
+    }
+  },
+  authorDetails: {
+    template: "default",
+    opts: {
+      showBio: false,
+      showImage: true,
+      showName: true
+    }
+  }
+};
+beforeEach(function () {
+  mockIntersectionObserver();
+});
+describe("Text Story Templates", function () {
+  it("Should render text story template with image full-bleed", function () {
+    var config = _objectSpread(_objectSpread({}, templateConfig), {}, {
+      imageRender: "fullBleed"
+    });
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(TextStoryTemplateBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "text-story-default-full-bleed"
+    }).prop("className")).toMatch(/fullBleed/);
+  });
+  it("Should render text story template with in container image", function () {
+    var config = _objectSpread(_objectSpread({}, templateConfig), {}, {
+      templateType: "hero-priority-center",
+      imageRender: "container"
+    });
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(TextStoryTemplateBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "text-story-hero-priority-center-container"
+    }).prop("className")).toMatch(/container/);
+  });
+  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(TextStoryTemplateBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "text-story-hero-priority-center-container"
+    }).prop("className")).toMatch(/hero-priority-center/);
+    expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
+  });
+  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(TextStoryTemplateBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "text-story-default-container"
+    }).prop("className")).toMatch(/default/);
+    expect(wrapper.find("SideColumn").length).toEqual(1);
+  });
+  it("Should render headline hero priority template", function () {
+    var config = _objectSpread(_objectSpread({}, templateConfig), {}, {
+      templateType: "headline-hero-priority",
+      imageRender: "container"
+    });
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(TextStoryTemplateBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "text-story-headline-hero-priority-container"
+    }).prop("className")).toMatch(/headline-hero-priority/);
+    expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
+  });
+  it("Should render hero vertical priority template", function () {
+    var config = _objectSpread(_objectSpread({}, templateConfig), {}, {
+      templateType: "hero-vertical-priority",
+      imageRender: "container"
+    });
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(TextStoryTemplateBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "text-story-hero-vertical-priority-container"
+    }).prop("className")).toMatch(/hero-vertical-priority/);
+    expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
+  });
+  it("Should render headline priority template", function () {
+    var config = _objectSpread(_objectSpread({}, templateConfig), {}, {
+      templateType: "headline-priority"
+    });
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(TextStoryTemplateBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "text-story-headline-priority"
+    }).prop("className")).toMatch(/headline-priority/);
+    expect(wrapper.find("SideColumn").length).toEqual(1);
+  });
+  it("Should render headline overlay priority template", function () {
+    var config = _objectSpread(_objectSpread({}, templateConfig), {}, {
+      templateType: "headline-overlay-priority"
+    });
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(TextStoryTemplateBase, {
+      story: story,
+      config: config,
+      storyElementsConfig: storyElementsConfig,
+      firstChild: child,
+      secondChild: child,
+      adComponent: configurableSlot,
+      widgetComp: configurableSlot
+    })));
+    expect(wrapper.find({
+      "data-test-id": "text-story-headline-overlay-priority"
+    }).prop("className")).toMatch(/headline-overlay-priority/);
+    expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
+  });
+});

package/esm/components/Rows/StoryTemplates/VideoStoryTemplates/README.md

@@ -0,0 +1,31 @@
+# Video Story Template
+
+Video story template is a basic component used to represent a video story.
+
+## Usage
+
+## Default Video Story
+
+```jsx
+<VideoStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Hero priority Video Story
+
+```jsx
+<VideoStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Headline priority Video Story
+
+```jsx
+<VideoStoryTemplate story={story} templateConfig={templateConfig} />
+```
+
+## Template with Children
+
+```jsx
+<VideoStoryTemplate story={story} templateConfig={templateConfig}>
+  <Children />
+</VideoStoryTemplate>
+```