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

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

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { LiveBlogStoryTemplates } from "./templates";
+import { StateProvider } from "../../../SharedContext";
+import "./live-blog.m.css";
+
+const LiveBlogStoryTemplate = ({
+  story = {},
+  config = {},
+  storyElementsConfig,
+  adComponent,
+  widgetComp,
+  firstChild,
+  secondChild
+}) => {
+  const { theme = "", templateType = "default", verticalShare = "" } = config;
+  const containerClass = templateType !== "hero-overlay" ? "container" : "";
+
+  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 }}
+      styleName={`${containerClass} ${verticalShare} wrapper`}>
+      <LiveBlogStoryTemplates
+        templateType={templateType}
+        story={story}
+        storyElementsConfig={storyElementsConfig}
+        config={config}
+        adComponent={adComponent}
+        widgetComp={widgetComp}
+        firstChild={firstChild}
+        secondChild={secondChild}
+      />
+    </div>
+  );
+};
+
+LiveBlogStoryTemplate.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string
+  }),
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  storyElementsConfig: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func
+};
+
+export default StateProvider(LiveBlogStoryTemplate);

package/src/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css

@@ -0,0 +1,326 @@
+@import "../../../../../assets/stylesheets/mixins.scss";
+
+.header-details {
+  margin-top: var(--arrow-spacing-l);
+  @include tablet {
+    margin-top: var(--arrow-spacing-xl);
+  }
+}
+
+.header-details :global(.arr--sub-headline) {
+  font-size: var(--arrow-fs-s);
+  font-style: italic;
+  @include tablet {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.wrapper :global(.gap-32) {
+  margin-top: var(--arrow-spacing-l);
+  @include tablet {
+    margin-top: var(--arrow-spacing-xl);
+  }
+}
+
+.container :global(.story-element-title) {
+  line-height: var(--arrow-lh-2);
+}
+
+.container :global(.arr--caption-attribution) {
+  margin: var(--arrow-spacing-xs) 0;
+}
+
+.live-headline {
+  display: flex;
+  align-items: center;
+}
+
+.time-wrapper {
+  display: flex;
+  align-items: center;
+  font-size: var(--arrow-fs-tiny);
+  svg {
+    margin-right: var(--arrow-spacing-xxs);
+  }
+}
+
+.card-share {
+  display: flex;
+  justify-content: space-between;
+}
+
+.live-icon {
+  border-radius: 50%;
+  margin-right: var(--arrow-fs-xs);
+  animation: blink 1s linear infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.timestamp-social-share {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--arrow-fs-l);
+  @include tablet {
+    margin-bottom: 40px;
+  }
+}
+
+.header-wrapper {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: container-start / 10;
+  }
+}
+
+.grid-col-full {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: grid-start / grid-end;
+  }
+}
+
+.grid-container {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: container-start/container-end;
+    margin: var(--arrow-spacing-xl) 0 0;
+  }
+}
+
+.top-space {
+  @include tablet {
+    margin-top: var(--arrow-spacing-xl);
+  }
+}
+
+.grid-col-9-15 {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 9/15;
+    margin: var(--arrow-spacing-xl) 0 0;
+  }
+}
+
+.grid-col-2-9 {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: container-start / 9;
+    margin-bottom: var(--arrow-spacing-xl);
+  }
+}
+
+.sideway {
+  align-self: center;
+}
+
+.grid-col-9-14 {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 9 / 14;
+    grid-row: 1 / auto;
+    margin-top: var(--arrow-spacing-xl);
+  }
+}
+
+.grid-col-4-12 {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 4 / 12;
+  }
+}
+
+.side-column {
+  grid-column: 1/5;
+  @include tablet {
+    margin-top: 40px;
+    grid-column: 10 / container-end;
+    grid-row: 2 / auto;
+    @include desktop {
+      margin-top: 60px;
+    }
+  }
+}
+
+.story-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--arrow-spacing-l);
+  @include tablet {
+    margin-bottom: var(--arrow-spacing-xl);
+  }
+}
+
+.headline-space {
+  margin: 0 0 var(--arrow-spacing-l);
+  @include tablet {
+    margin: 0 0 var(--arrow-spacing-xl);
+  }
+}
+
+.grid-col-9-15 > :global(.arr--caption-attribution) {
+  @include tablet {
+    margin: var(--arrow-spacing-xs) 0;
+  }
+}
+
+.overlay-hero {
+  grid-column: 1/5;
+  grid-row: 1/2;
+  margin-top: var(--arrow-spacing-s);
+  @include tablet {
+    grid-column: container-start/container-end;
+    margin-top: var(--arrow-spacing-xl);
+  }
+}
+
+.overlay-hero > :global(.arr--hero-image) img {
+  -webkit-filter: blur(4px);
+  filter: blur(4px);
+  opacity: 0.5;
+}
+
+.overlay-grid {
+  align-self: center;
+  z-index: var(--z-index-9);
+  grid-row: 1/2;
+  grid-column: 1/5;
+  padding: 0 36px;
+  @include tablet {
+    grid-column: 4/12;
+    padding: 0;
+  }
+}
+
+.key-events {
+  margin: var(--arrow-fs-l) 0 36px;
+}
+
+.share-cards.dark {
+  border-bottom: 1px solid var(--arrow-c-mono5);
+  margin-bottom: var(--arrow-spacing-m);
+}
+
+.share-cards.light {
+  border-bottom: 1px solid var(--arrow-c-invert-mono5);
+  margin-bottom: var(--arrow-spacing-m);
+}
+
+.time-wrapper.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.time-wrapper.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.space-32 > * {
+  margin-top: var(--arrow-spacing-l);
+}
+
+.sticky :global(.arr--share) {
+  grid-column: 4/5;
+  justify-self: flex-end;
+  @include tablet {
+    grid-column: 9 / grid-end;
+    @include desktop {
+      position: sticky;
+      position: -webkit-sticky;
+      grid-column: 3/4;
+      grid-row: 2/3;
+      align-self: flex-start;
+      margin-top: var(--arrow-spacing-xs);
+      top: 120px;
+    }
+  }
+}
+
+.card-share :global(.desktop-share-wrapper) {
+  max-width: 42px;
+}
+
+.sticky:global(.default) {
+  :global(.arr--share) {
+    @include tablet {
+      grid-column: 9/10;
+      @include desktop {
+        grid-column: grid-start/container-start;
+      }
+    }
+  }
+}
+
+.sticky:global(.headline-priority) {
+  :global(.arr--share) {
+    @include tablet {
+      grid-column: 8/9;
+      @include desktop {
+        grid-column: grid-start/container-start;
+      }
+    }
+  }
+}
+
+.sticky:global(.headline-hero-priority) {
+  :global(.arr--share) {
+    @include desktop {
+      grid-row: 3/4;
+    }
+  }
+}
+
+.sticky .index-2 {
+  z-index: 2;
+  @include desktop {
+    z-index: unset;
+  }
+}
+
+.grid-row-1-2 {
+  @include desktop {
+    grid-row: 1/2;
+  }
+}
+
+.grid-row-2-3 {
+  @include desktop {
+    grid-row: 2/3;
+  }
+}
+
+.grid-row-3-4 {
+  @include desktop {
+    grid-row: 3/4;
+  }
+}
+
+.grid-row-1-6 {
+  @include tablet {
+    grid-row: 1/6;
+  }
+}
+
+.tablet-index-2 {
+  @include tablet {
+    z-index: 2;
+  }
+}
+
+html[dir="rtl"] {
+  .time-wrapper {
+    direction: ltr;
+    flex-direction: row-reverse;
+  }
+}

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

@@ -0,0 +1,120 @@
+import { boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { optionalSelect, withStore } from "../../../../../storybook";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { generateCollection, generateStory } from "../../../Fixture";
+import { slotData } from "../../../Fixture/slot-config";
+import LiveBlog from "./index";
+import Readme from "./README.md";
+
+const story = generateStory("live-blog");
+const collection = generateCollection({ stories: 4 });
+
+const storyElementsConfig = {
+  summary: {},
+  blurb: {},
+  blockquote: {},
+  quote: {},
+  "also-read": {},
+  "q-and-a": {},
+  question: {},
+  answer: {}
+};
+
+const label = "BG Color";
+const defaultvalue = "#ffffff";
+
+const authorTemplate = {
+  default: "default",
+  leftAligned: "leftAligned",
+  centerAligned: "centerAligned"
+};
+
+const iconTypeOptions = {
+  "Circular Color Svg": "circular-color-svg",
+  "Circular Plain Svg": "circular-plain-svg",
+  "Plain Svg": "plain-svg",
+  "Plain Color Svg": "plain-color-svg",
+  "Square Svg": "square-svg"
+};
+
+const shareType = {
+  "Vertical Share": "sticky",
+  "Horizontal Share": ""
+};
+
+const templateTypes = {
+  default: "default",
+  "Hero Overlay": "hero-overlay",
+  "Headline Sideway": "headline-sideway",
+  "Hero Priority": "hero-priority",
+  "Headline Priority": "headline-priority",
+  "Headline Hero Priority": "headline-hero-priority"
+};
+
+const configurableSlot = () => {
+  return <AdPlaceholder height="250px" width="300px" />;
+};
+
+withStore(
+  "Rows/Story Templates/Live Blog Story Template",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+).add("Default", () => {
+  const templateConfig = {
+    shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
+    verticalShare: optionalSelect("Share Type", shareType),
+    theme: color(label, defaultvalue),
+    noOfVisibleCards: -1,
+    initialLoadCount: text("Initial key events count", 4),
+    showSection: boolean("Show Section Tag", true),
+    templateType: optionalSelect("Template", templateTypes),
+    buttonText: text("Key Events Button text", "Load More"),
+    publishedDetails: {
+      enablePublishedTime: boolean("Show Published Time", true),
+      enableUpdatedTime: boolean("Show Updated Time", false),
+      showReadTime: boolean("Read time", false)
+    },
+    authorDetails: {
+      template: optionalSelect("Author templates", authorTemplate),
+      opts: {
+        showBio: boolean("Author Bio", false),
+        showImage: boolean("Author Image", false),
+        showName: boolean("Author Name", true)
+      }
+    },
+    premiumStoryIconConfig: {
+      iconColor: "#F7B500",
+      iconType: "star",
+      enablePremiumStoryIcon: true
+    },
+    asideCollection: {
+      data: collection,
+      config: {
+        title: text("Aside Collection Title", "Trending"),
+        theme: color(label, defaultvalue),
+        showAuthor: boolean("Show Author", true),
+        showTime: boolean("Show Timestamp", true)
+      },
+      slots: slotData
+    }
+  };
+  return (
+    <LiveBlog
+      story={story}
+      config={templateConfig}
+      storyElementsConfig={storyElementsConfig}
+      adComponent={configurableSlot}
+      widgetComp={configurableSlot}
+      firstChild={<AdPlaceholder height="250px" width="300px" />}
+      secondChild={<AdPlaceholder height="250px" width="300px" />}
+    />
+  );
+});