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

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

@@ -1,496 +0,0 @@
-@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

@@ -1,222 +0,0 @@
-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);
-  });
-});