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

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

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

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

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

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

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

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