@quintype/arrow 3.15.1-perf.5 → 3.15.1-perf.7

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

@@ -0,0 +1,119 @@
+import { boolean as _boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { ListicleStoryTemplateBase } 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";
+var story = generateStory("listicle-story");
+var collection = generateCollection({
+  stories: 4
+});
+var label = "BG Color";
+var defaultvalue = "#ffffff";
+
+var configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "250px",
+    width: "300px"
+  });
+};
+
+var 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"
+};
+var sectionTagTemplates = {
+  Default: "",
+  "Border Bottom Small": "borderBottomSml",
+  Solid: "solid",
+  "Border Left": "borderLeft"
+};
+var 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", function () {
+  var templateConfig = {
+    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)
+      }
+    },
+    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
+    }
+  };
+  var storyElementsConfig = {
+    summary: {},
+    blurb: {},
+    blockquote: {},
+    quote: {},
+    "also-read": {},
+    "q-and-a": {},
+    question: {},
+    answer: {},
+    references: {}
+  };
+  return /*#__PURE__*/React.createElement(ListicleStoryTemplateBase, {
+    story: story,
+    config: templateConfig,
+    storyElementsConfig: storyElementsConfig,
+    firstChild: /*#__PURE__*/React.createElement(AdPlaceholder, {
+      height: "250px",
+      width: "300px"
+    }),
+    secondChild: /*#__PURE__*/React.createElement(AdPlaceholder, {
+      height: "250px",
+      width: "300px"
+    }),
+    adComponent: configurableSlot,
+    widgetComp: configurableSlot
+  });
+});

package/esm/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/esm/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js

@@ -0,0 +1,97 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { get } from "lodash";
+import { LiveBlogStoryTemplates } from "./templates";
+import { StateProvider } from "../../../SharedContext";
+import "./live-blog.m.css";
+var _styleModuleImportMap = {
+  "./live-blog.m.css": {
+    "header-details": "live-blog-m_header-details__1VbwD",
+    "wrapper": "live-blog-m_wrapper__3kmc6",
+    "container": "live-blog-m_container__2Eru6",
+    "live-headline": "live-blog-m_live-headline__1Y1iT",
+    "time-wrapper": "live-blog-m_time-wrapper__Pv8u4",
+    "card-share": "live-blog-m_card-share__nvSEx",
+    "live-icon": "live-blog-m_live-icon__zzBV_",
+    "blink": "live-blog-m_blink__1USEE",
+    "timestamp-social-share": "live-blog-m_timestamp-social-share__2siNN",
+    "header-wrapper": "live-blog-m_header-wrapper__3rFRU",
+    "grid-col-full": "live-blog-m_grid-col-full__3iWHn",
+    "grid-container": "live-blog-m_grid-container__1b98H",
+    "top-space": "live-blog-m_top-space__2NpBq",
+    "grid-col-9-15": "live-blog-m_grid-col-9-15__MwtUq",
+    "grid-col-2-9": "live-blog-m_grid-col-2-9__IJ4Ok",
+    "sideway": "live-blog-m_sideway__1j2fD",
+    "grid-col-9-14": "live-blog-m_grid-col-9-14__2oCwT",
+    "grid-col-4-12": "live-blog-m_grid-col-4-12__XeqdX",
+    "side-column": "live-blog-m_side-column__Ss2sl",
+    "story-details": "live-blog-m_story-details__2uwo9",
+    "headline-space": "live-blog-m_headline-space__2Dhkq",
+    "overlay-hero": "live-blog-m_overlay-hero__30Yoo",
+    "overlay-grid": "live-blog-m_overlay-grid__1-XBm",
+    "key-events": "live-blog-m_key-events__2YDJ3",
+    "share-cards": "live-blog-m_share-cards__96lnW",
+    "dark": "live-blog-m_dark__1dgpM",
+    "light": "live-blog-m_light__3GyWj",
+    "space-32": "live-blog-m_space-32__3J4JJ",
+    "sticky": "live-blog-m_sticky__2c9ke",
+    "index-2": "live-blog-m_index-2__2f0tW",
+    "grid-row-1-2": "live-blog-m_grid-row-1-2__2t7wA",
+    "grid-row-2-3": "live-blog-m_grid-row-2-3__32fm_",
+    "grid-row-3-4": "live-blog-m_grid-row-3-4__2LIEm",
+    "grid-row-1-6": "live-blog-m_grid-row-1-6__3CH8o",
+    "tablet-index-2": "live-blog-m_tablet-index-2__2WqZJ"
+  }
+};
+export var LiveBlogStoryTemplateBase = function LiveBlogStoryTemplateBase(_ref) {
+  var _ref$story = _ref.story,
+      story = _ref$story === void 0 ? {} : _ref$story,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      storyElementsConfig = _ref.storyElementsConfig,
+      adComponent = _ref.adComponent,
+      widgetComp = _ref.widgetComp,
+      firstChild = _ref.firstChild,
+      secondChild = _ref.secondChild;
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$templateType = config.templateType,
+      templateType = _config$templateType === void 0 ? "default" : _config$templateType,
+      _config$verticalShare = config.verticalShare,
+      verticalShare = _config$verticalShare === void 0 ? "" : _config$verticalShare;
+  var containerClass = templateType !== "hero-overlay" ? "container" : "";
+  var timezone = useSelector(function (state) {
+    return get(state, ["qt", "data", "timezone"], null);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "live-blog-".concat(templateType),
+    style: {
+      backgroundColor: theme
+    },
+    className: ("arrow-component arr--content-wrapper arr-story-grid arr--live-blog-story-template-wrapper ".concat(templateType) ? "arrow-component arr--content-wrapper arr-story-grid arr--live-blog-story-template-wrapper ".concat(templateType) + " " : "") + _getClassName("".concat(containerClass, " ").concat(verticalShare, " wrapper"), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement(LiveBlogStoryTemplates, {
+    templateType: templateType,
+    story: story,
+    storyElementsConfig: storyElementsConfig,
+    config: config,
+    adComponent: adComponent,
+    widgetComp: widgetComp,
+    firstChild: firstChild,
+    secondChild: secondChild,
+    timezone: timezone
+  }));
+};
+LiveBlogStoryTemplateBase.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 var LiveBlogStoryTemplate = StateProvider(LiveBlogStoryTemplateBase);

package/esm/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/esm/components/Rows/StoryTemplates/LiveBlogStoryTemplates/stories.js

@@ -0,0 +1,118 @@
+import { boolean as _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 { LiveBlogStoryTemplateBase } from "./index";
+import Readme from "./README.md";
+var story = generateStory("live-blog");
+var collection = generateCollection({
+  stories: 4
+});
+var storyElementsConfig = {
+  summary: {},
+  blurb: {},
+  blockquote: {},
+  quote: {},
+  "also-read": {},
+  "q-and-a": {},
+  question: {},
+  answer: {}
+};
+var label = "BG Color";
+var defaultvalue = "#ffffff";
+var authorTemplate = {
+  "default": "default",
+  leftAligned: "leftAligned",
+  centerAligned: "centerAligned"
+};
+var 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"
+};
+var shareType = {
+  "Vertical Share": "sticky",
+  "Horizontal Share": ""
+};
+var 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"
+};
+
+var configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(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", function () {
+  var 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 /*#__PURE__*/React.createElement(LiveBlogStoryTemplateBase, {
+    story: story,
+    config: templateConfig,
+    storyElementsConfig: storyElementsConfig,
+    adComponent: configurableSlot,
+    widgetComp: configurableSlot,
+    firstChild: /*#__PURE__*/React.createElement(AdPlaceholder, {
+      height: "250px",
+      width: "300px"
+    }),
+    secondChild: /*#__PURE__*/React.createElement(AdPlaceholder, {
+      height: "250px",
+      width: "300px"
+    })
+  });
+});