@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

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

@@ -0,0 +1,496 @@
+@import "../../../../../assets/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;
+  padding-right: 2px;
+
+  @include tablet {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.timestamp-publish-details {
+  margin: var(--arrow-spacing-s) 0 6px;
+  @include tablet {
+    margin: 0 0 var(--arrow-spacing-s);
+  }
+}
+
+.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;
+  }
+}
+
+.fullBleed.sticky :global(.arr--share) {
+  margin-right: var(--arrow-spacing-m);
+}
+
+.default .hero-image {
+  @include tablet {
+    grid-column: gutter-1-start/ gutter-2-end;
+  }
+}
+
+.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);
+  }
+}
+
+.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 .arr--story--headline-h1) {
+    color: var(--arrow-c-invert-mono1);
+  }
+}
+
+.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;
+  }
+}
+
+.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;
+}
+
+.headline-overlay-priority {
+  margin-top: var(--arrow-spacing-xs);
+
+  @include tablet {
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+
+.hero-vertical-priority {
+  @include tablet {
+    margin-top: var(--arrow-spacing-m) !important;
+  }
+}
+
+.share {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.default :global(.story-element-data-table),
+.headline-priority :global(.story-element-data-table) {
+  @include tablet {
+    max-width: 40vw;
+  }
+  @include tablet-lg {
+    max-width: 100%;
+  }
+}

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

@@ -0,0 +1,222 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { generateStory, generateCollection, generateStore } from "../../../Fixture";
+import TextStoryTemplate from "./index";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { Provider } from "react-redux";
+import { mockIntersectionObserver } from "../../../../utils/testing-utils";
+
+const story = generateStory();
+const collection = generateCollection({ stories: 4 });
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+const child = <div>children</div>;
+
+const storyElementsConfig = {
+  summary: {},
+  blurb: {},
+  blockquote: {},
+  quote: {},
+  "also-read": {},
+  "q-and-a": {},
+  question: {},
+  answer: {}
+};
+
+const 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(() => {
+  mockIntersectionObserver();
+});
+
+describe("Text Story Templates", () => {
+  it("Should render text story template with image full-bleed", () => {
+    const config = { ...templateConfig, imageRender: "fullBleed" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <TextStoryTemplate
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    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", () => {
+    const config = { ...templateConfig, templateType: "hero-priority-center", imageRender: "container" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <TextStoryTemplate
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "text-story-hero-priority-center-container" }).prop("className")).toMatch(
+      /container/
+    );
+  });
+
+  it("Should render hero priority center align template", () => {
+    const config = { ...templateConfig, templateType: "hero-priority-center", imageRender: "container" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <TextStoryTemplate
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    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", () => {
+    const config = { ...templateConfig, templateType: "default", imageRender: "container" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <TextStoryTemplate
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    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", () => {
+    const config = { ...templateConfig, templateType: "headline-hero-priority", imageRender: "container" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <TextStoryTemplate
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    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", () => {
+    const config = { ...templateConfig, templateType: "hero-vertical-priority", imageRender: "container" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <TextStoryTemplate
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    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", () => {
+    const config = { ...templateConfig, templateType: "headline-priority" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <TextStoryTemplate
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    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", () => {
+    const config = { ...templateConfig, templateType: "headline-overlay-priority" };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <TextStoryTemplate
+          story={story}
+          config={config}
+          storyElementsConfig={storyElementsConfig}
+          firstChild={child}
+          secondChild={child}
+          adComponent={configurableSlot}
+          widgetComp={configurableSlot}
+        />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "text-story-headline-overlay-priority" }).prop("className")).toMatch(
+      /headline-overlay-priority/
+    );
+    expect(wrapper.find("AsideCollectionCard").length).toEqual(1);
+  });
+});