@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

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

@@ -0,0 +1,287 @@
+import { SocialShare } from "@quintype/components";
+import React from "react";
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { StateProvider } from "../../../SharedContext";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import "./listicle-story.m.css";
+import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import AsideCollection from "../../AsideCollection";
+
+const ListicleStoryTemplate = ({
+  story = {},
+  config = {},
+  storyElementsConfig,
+  adComponent,
+  widgetComp = () => {},
+  firstChild,
+  secondChild
+}) => {
+  const {
+    theme = "",
+    noOfVisibleCards = -1,
+    publishedDetails = {},
+    templateType = "",
+    authorDetails = {
+      template: "default"
+    },
+    asideCollection = {},
+    showSection,
+    sectionTagSettings,
+    premiumStoryIconConfig = {}
+  } = config;
+  const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  const { "bullet-type": storyBulletType = "" } = story;
+  const storyId = get(story, ["id"], "");
+
+  // Content Blocks
+  const HeroImageBlock = (settings) => {
+    const { widths = [320, 480, 768, 1024, 1140], aspectRatio = [[16, 9]] } = settings;
+    return (
+      <HeroImage
+        defaultWidth={320}
+        story={story}
+        widths={widths}
+        aspectRatio={aspectRatio}
+        defaultFallback={false}
+        isStoryPageImage
+      />
+    );
+  };
+  const CaptionAttributionBlock = () => (
+    <div styleName="caption-attribution-block">
+      <CaptionAttribution story={story} />
+    </div>
+  );
+  const HeadlineBlock = () => (
+    <div styleName="headline-block">
+      <div styleName="section-tag">{showSection && <SectionTag story={story} {...sectionTagSettings} />}</div>
+      <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
+      <Subheadline story={story} showFullContent />
+    </div>
+  );
+
+  const AuthourBlock = () => (
+    <>
+      <AuthorCard story={story} {...authorDetails} />
+      <div styleName="timestamp-social-share">
+        <PublishDetails story={story} opts={publishedDetails} />
+        <div id={`story-share-${storyId}`} className="content-style">
+          <SocialShare
+            template={SocialShareTemplate}
+            theme={theme}
+            fullUrl={encodeURI(story.url)}
+            title={story.headline}
+            shareIconId={`share-icon-story-share-${storyId}`}
+          />
+        </div>
+      </div>
+    </>
+  );
+  const BodyBlock = () => (
+    <div styleName="body-block">
+      {visibledCards.map((card, index) => {
+        return (
+          <React.Fragment key={card.id}>
+            {storyBulletType === "bullets" ? (
+              <div styleName="bullet-style-dash" />
+            ) : (
+              <div styleName="bullet-style-number">{index + 1}.</div>
+            )}
+            <StoryElementCard
+              story={story}
+              card={card}
+              key={card.id}
+              config={storyElementsConfig}
+              adComponent={adComponent}
+              widgetComp={widgetComp}
+            />
+          </React.Fragment>
+        );
+      })}
+      {firstChild}
+      <div styleName="story-tags">
+        <StoryTags tags={story.tags} />
+        <SlotAfterStory
+          id={story.id}
+          element={story.customSlotAfterStory}
+          AdComponent={adComponent}
+          WidgetComp={widgetComp}
+        />
+      </div>
+      {secondChild}
+    </div>
+  );
+  const SideColumnBlock = () =>
+    asideCollection && (
+      <AsideCollection
+        {...asideCollection}
+        adComponent={adComponent}
+        widgetComp={widgetComp}
+        sticky={true}
+        storyId={storyId}
+        opts={publishedDetails}
+      />
+    );
+
+  // Templates
+  const DefaultTemplate = () => (
+    <>
+      <HeroImageBlock aspectRatio={[[16, 9], [16, 6]]} />
+      <div styleName="grid-container">
+        <div styleName="full-grid">
+          <CaptionAttributionBlock />
+        </div>
+        <div data-type-column="left" styleName="left-column">
+          <HeadlineBlock />
+          <AuthourBlock />
+          <BodyBlock />
+        </div>
+        <div data-type-column="right" styleName="right-column">
+          <SideColumnBlock />
+        </div>
+      </div>
+    </>
+  );
+  const HeroPriority = () => (
+    <div styleName="hero-priority-template">
+      <div styleName="grid-container">
+        <div styleName="full-grid">
+          <HeroImageBlock />
+        </div>
+        <div styleName="center-column">
+          <CaptionAttributionBlock />
+          <HeadlineBlock />
+          <AuthourBlock />
+          <BodyBlock />
+        </div>
+      </div>
+    </div>
+  );
+  const HeadlinePriority = () => (
+    <div styleName="headline-priority-template">
+      <div styleName="grid-container">
+        <div styleName="headline-priority-grid">
+          <HeadlineBlock />
+        </div>
+        <div styleName="left-column">
+          <HeroImageBlock />
+          <CaptionAttributionBlock />
+          <AuthourBlock />
+          <BodyBlock />
+        </div>
+        <div styleName="right-column">
+          <SideColumnBlock />
+        </div>
+      </div>
+    </div>
+  );
+  const HeadlineHeroPriority = () => (
+    <div styleName="headline-hero-priority-template">
+      <div styleName="grid-container">
+        <div styleName="center-column">
+          <HeadlineBlock />
+        </div>
+        <div styleName="full-grid">
+          <HeroImageBlock />
+        </div>
+        <div styleName="center-column">
+          <CaptionAttributionBlock />
+          <AuthourBlock />
+          <BodyBlock />
+        </div>
+      </div>
+    </div>
+  );
+  const HeroOverlay = () => (
+    <div styleName="hero-overlay-template">
+      <div styleName="grid-container">
+        <div styleName="full-grid hero-faded-relative">
+          <div styleName="hero-faded-wrapper">
+            <div styleName="headline-content-holder">
+              <HeadlineBlock />
+            </div>
+          </div>
+          <HeroImageBlock aspectRatio={[[2, 3], [16, 9]]} />
+        </div>
+      </div>
+      <div styleName="grid-container">
+        <div styleName="center-column">
+          <CaptionAttributionBlock />
+          <AuthourBlock />
+          <BodyBlock />
+        </div>
+      </div>
+    </div>
+  );
+  const HeadlineSideway = () => (
+    <div styleName="headline-sideway-template">
+      <div styleName="sideway-grid">
+        <div styleName="sideway-headline">
+          <HeadlineBlock />
+        </div>
+        <div styleName="sideway-hero">
+          <HeroImageBlock aspectRatio={[[16, 9], [4, 3]]} />
+          <CaptionAttributionBlock />
+        </div>
+      </div>
+      <div styleName="grid-container">
+        <div styleName="center-column">
+          <AuthourBlock />
+          <BodyBlock />
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderTemplate = () => {
+    switch (templateType) {
+      case "hero-priority":
+        return <HeroPriority />;
+      case "headline-priority":
+        return <HeadlinePriority />;
+      case "headline-hero-priority":
+        return <HeadlineHeroPriority />;
+      case "hero-overlay":
+        return <HeroOverlay />;
+      case "headline-sideway":
+        return <HeadlineSideway />;
+      default:
+        return <DefaultTemplate />;
+    }
+  };
+  const dataTestId = templateType ? `listicle-story-${templateType}` : "listicle-story";
+  return (
+    <div
+      data-test-id={dataTestId}
+      className="arrow-component arr--content-wrapper arr--listicle-story-template-wrapper"
+      style={{ backgroundColor: theme }}>
+      {renderTemplate()}
+    </div>
+  );
+};
+
+ListicleStoryTemplate.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    authorCard: PropTypes.object,
+    asideCollection: PropTypes.object
+  }),
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  storyElementsConfig: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  premiumStoryIconConfig: PropTypes.object
+};
+
+export default StateProvider(ListicleStoryTemplate);

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

@@ -0,0 +1,229 @@
+@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;
+  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 :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 var(--arrow-spacing-l);
+}
+
+.bullet-style-number {
+  font-size: var(--arrow-fs-l);
+  font-weight: var(--arrow-fw-semi-bold);
+  color: var(--arrow-c-brand1);
+  @include tablet {
+    font-size: var(--arrow-fs-huge);
+  }
+}
+
+.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 calc(-1 * var(--arrow-spacing-l));
+      }
+    }
+  }
+}
+
+.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;
+  }
+}
+
+.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);
+  }
+}

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/stories.js

@@ -0,0 +1,117 @@
+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 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 = {
+    templateType: optionalSelect("Template Options", storyTemplates),
+    // templateType: "headline-sideway",
+    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)
+      }
+    },
+    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>
+```