@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1-version-upgrade.2

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

@@ -1,285 +0,0 @@
-@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;
-  padding-right: 2px;
-  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 {
-  margin-top: 6px;
-  @include desktop {
-    margin-top: var(--arrow-spacing-s);
-  }
-}
-
-.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 8px;
-  @include desktop {
-    margin-bottom: var(--arrow-spacing-s);
-  }
-}
-
-.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;
-      }
-    }
-  }
-}
-
-.horizontal-aside-collection {
-  @include tablet {
-    grid-column: 2/12;
-  }
-}
-
-.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;
-}
-
-.share {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.sticky:global(.arr--listicle-story-template-wrapper) {
-  position: relative;
-}
-
-.left-column :global(.story-element-data-table) {
-  @include tablet {
-    max-width: 48vw;
-  }
-  @include tablet-lg {
-    max-width: 100%;
-  }
-}

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

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

package/src/components/Rows/StoryTemplates/ListicleStoryTemplates/listicleUtils.js

@@ -1,16 +0,0 @@
-import get from "lodash.get";
-
-export function getTitleElementsIndex(card) {
-  const cardElements = get(card, ["story-elements"], []);
-  return cardElements.findIndex((element) => element.type === "title");
-}
-
-export function isIntroCardPresent(cards) {
-  return cards.some((card) => card["card-type"] === "introduction");
-}
-
-export function getFirstDescriptionElementsIndex(card) {
-  // element index to place non inline bullets, when cards title is absent
-  const cardElements = get(card, ["story-elements"], []);
-  return cardElements.findIndex((element) => element.type !== "ad" && element.type !== "widget");
-}

package/src/components/Rows/StoryTemplates/ListicleStoryTemplates/stories.js

@@ -1,125 +0,0 @@
-import { boolean, color, text } from "@storybook/addon-knobs";
-import React from "react";
-import ListicleStoryTemplate from ".";
-import { optionalSelect, withStore } from "../../../../../storybook";
-import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
-import { generateCollection, generateStory } from "../../../Fixture";
-import { slotData } from "../../../Fixture/slot-config";
-import Readme from "./README.md";
-
-const story = generateStory("listicle-story");
-const collection = generateCollection({ stories: 4 });
-const label = "BG Color";
-const defaultvalue = "#ffffff";
-
-const configurableSlot = () => {
-  return <AdPlaceholder height="250px" width="300px" />;
-};
-
-const socialShareStyle = {
-  "Vertical Share": "sticky",
-  "Fixed Share": "fixed"
-};
-
-const storyTemplates = {
-  Default: "default",
-  "Hero Priority": "hero-priority",
-  "Headline Priority": "headline-priority",
-  "Headline Hero Priority": "headline-hero-priority",
-  "Hero Overlay": "hero-overlay",
-  "Headline Sideway": "headline-sideway"
-};
-
-const sectionTagTemplates = {
-  Default: "",
-  "Border Bottom Small": "borderBottomSml",
-  Solid: "solid",
-  "Border Left": "borderLeft"
-};
-
-const authorTemplates = {
-  default: "default",
-  leftAligned: "leftAligned",
-  centerAligned: "centerAligned"
-};
-
-withStore(
-  "Rows/Story Templates/Listicle Story Template",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-).add("Default", () => {
-  const templateConfig = {
-    socialShareStyle: optionalSelect("Social Share Style", socialShareStyle),
-    templateType: optionalSelect("Template Options", storyTemplates),
-    theme: color(label, defaultvalue),
-    noOfVisibleCards: -1,
-    showSection: boolean("Show Section Tag", true),
-    publishedDetails: {
-      showReadTime: boolean("Read time", true),
-      enablePublishedTime: boolean("Show Published Time", true),
-      enableUpdatedTime: boolean("Show Updated Time", false)
-    },
-    authorDetails: {
-      template: optionalSelect("Author Templates", authorTemplates) || "default",
-      opts: {
-        showBio: boolean("Author Bio", false),
-        showImage: boolean("Author Image", true),
-        showName: boolean("Author Name", true),
-        showLabels: boolean("show labels", true),
-        showGuestAuthorName: boolean("show guest author name", false),
-        showGuestAuthorImage: boolean("show guest author image", false)
-      }
-    },
-    sectionTagSettings: {
-      template: optionalSelect("Section Template", sectionTagTemplates) || "borderBottomSml",
-      borderColor: color("Section Tag Border Color", "#ff214b")
-    },
-    premiumStoryIconConfig: {
-      iconColor: "#F7B500",
-      iconType: "star",
-      enablePremiumStoryIcon: true
-    },
-    asideCollection: {
-      data: collection,
-      config: {
-        collectionNameBorderColor: color("Aside Collection Name Border Color", "#3a9fdd"),
-        title: text("Aside Collection Title", "Trending"),
-        theme: color(label, defaultvalue),
-        adSlot: [{ type: "ad", component: configurableSlot }],
-        showAuthor: boolean("Author", true),
-        showTime: boolean("Timestamp", true)
-      },
-      slots: slotData
-    }
-  };
-
-  const storyElementsConfig = {
-    summary: {},
-    blurb: {},
-    blockquote: {},
-    quote: {},
-    "also-read": {},
-    "q-and-a": {},
-    question: {},
-    answer: {},
-    references: {}
-  };
-  return (
-    <ListicleStoryTemplate
-      story={story}
-      config={templateConfig}
-      storyElementsConfig={storyElementsConfig}
-      firstChild={<AdPlaceholder height="250px" width="300px" />}
-      secondChild={<AdPlaceholder height="250px" width="300px" />}
-      adComponent={configurableSlot}
-      widgetComp={configurableSlot}
-    />
-  );
-});

package/src/components/Rows/StoryTemplates/LiveBlogStoryTemplates/README.md

@@ -1,25 +0,0 @@
-# LiveBlog Story Template
-
-LiveBlog story template is a basic component used to represent a LiveBlog story.
-
-## Usage
-
-## Default template
-
-```jsx
-<LiveBlog story={story} templateConfig={templateConfig} templateType="default" />
-```
-
-## Hero Priority
-
-```jsx
-<LiveBlog story={story} templateConfig={templateConfig} templateType="hero-priority" />
-```
-
-## Template with Children
-
-```jsx
-<LiveBlog story={story} templateConfig={templateConfig}>
-  <Children />
-</LiveBlog>
-```

package/src/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js

@@ -1,74 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
-import get from "lodash.get";
-import { LiveBlogStoryTemplates } from "./templates";
-import { StateProvider } from "../../../SharedContext";
-import "./live-blog.m.css";
-
-const LiveBlogStoryTemplate = ({
-  storyAccess = null,
-  story = {},
-  config = {},
-  storyElementsConfig,
-  adComponent,
-  widgetComp,
-  firstChild,
-  secondChild,
-  enableDarkMode,
-  loadRelatedStories,
-  visibleCardsRender = null,
-  meteringIndicator
-}) => {
-  const { theme = "", templateType = "default", socialShareStyle = "fixed" } = config;
-  const stickyStyle = socialShareStyle === "sticky" ? "sticky" : "";
-  const containerClass = templateType !== "hero-overlay" ? "container" : "";
-  const qtState = useSelector((state) => get(state, ["qt"], {}));
-  const timezone = get(qtState, ["data", "timezone"], null);
-  const mountAt = get(qtState, ["config", "mountAt"], "");
-
-  return (
-    <div
-      data-test-id={`live-blog-${templateType}`}
-      className={`arrow-component arr--content-wrapper arr-story-grid arr--live-blog-story-template-wrapper ${templateType}`}
-      style={{ backgroundColor: theme || "initial" }}
-      styleName={`${containerClass} wrapper ${stickyStyle}`}>
-      <LiveBlogStoryTemplates
-        storyAccess={storyAccess}
-        templateType={templateType}
-        story={story}
-        storyElementsConfig={storyElementsConfig}
-        config={config}
-        adComponent={adComponent}
-        widgetComp={widgetComp}
-        firstChild={firstChild}
-        secondChild={secondChild}
-        timezone={timezone}
-        enableDarkMode={enableDarkMode}
-        mountAt={mountAt}
-        loadRelatedStories={loadRelatedStories}
-        visibleCardsRender={visibleCardsRender}
-        meteringIndicator={meteringIndicator}
-      />
-    </div>
-  );
-};
-
-LiveBlogStoryTemplate.propTypes = {
-  story: PropTypes.object,
-  storyAccess: PropTypes.object,
-  config: PropTypes.shape({
-    templateType: PropTypes.string
-  }),
-  firstChild: PropTypes.node,
-  secondChild: PropTypes.node,
-  storyElementsConfig: PropTypes.object,
-  adComponent: PropTypes.func,
-  widgetComp: PropTypes.func,
-  enableDarkMode: PropTypes.bool,
-  loadRelatedStories: PropTypes.func,
-  visibleCardsRender: PropTypes.func | undefined,
-  meteringIndicator: PropTypes.node | undefined
-};
-
-export default StateProvider(LiveBlogStoryTemplate);