@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.8

package/esm/components/Rows/StoryTemplates/VideoStoryTemplates/index.js

@@ -0,0 +1,239 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import { SocialShare } from "@quintype/components";
+import PropTypes from "prop-types";
+import React from "react";
+import { useSelector } from "react-redux";
+import { get } from "lodash";
+import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { Subheadline } from "../../../Atoms/Subheadline";
+import { Video } from "../../../Atoms/StoryElements/Video";
+import { AsideCollection } from "../../AsideCollection";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { StoryTags } from "../../../Atoms/StoryTags";
+import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StateProvider } from "../../../SharedContext";
+import "./video-story.m.css";
+var _styleModuleImportMap = {
+  "./video-story.m.css": {
+    "default": "video-story-m_default__Y0gcI",
+    "hero-priority": "video-story-m_hero-priority__LzhJF",
+    "headline-priority": "video-story-m_headline-priority__1-0tX",
+    "adSlot": "video-story-m_adSlot__3RzTR",
+    "hero-video": "video-story-m_hero-video__1rumO",
+    "header-details": "video-story-m_header-details__1MgWw",
+    "story-details": "video-story-m_story-details__2KI1H",
+    "timestamp-social-share": "video-story-m_timestamp-social-share__1Vma8",
+    "author": "video-story-m_author__3AscN",
+    "story-tags": "video-story-m_story-tags__1OnlS",
+    "aside-collection": "video-story-m_aside-collection__3ecnd",
+    "sticky": "video-story-m_sticky__2RJZt",
+    "story-content-wrapper": "video-story-m_story-content-wrapper__g87mo",
+    "video-story-side-column": "video-story-m_video-story-side-column__155nW",
+    "index-2": "video-story-m_index-2__32Kzt",
+    "tablet-index-2": "video-story-m_tablet-index-2__2sPXB"
+  }
+};
+export var VideoStoryTemplateBase = function VideoStoryTemplateBase(_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,
+      widgetComp = _ref.widgetComp,
+      adComponent = _ref.adComponent,
+      firstChild = _ref.firstChild,
+      secondChild = _ref.secondChild;
+  var heroVideo = story.cards.flatMap(function (card) {
+    return card["story-elements"];
+  }).find(function (_ref2) {
+    var type = _ref2.type,
+        subtype = _ref2.subtype;
+    return type === "youtube-video" || type === "jsembed" && subtype === "dailymotion-video";
+  }) || {};
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$authorCard = config.authorCard,
+      authorCard = _config$authorCard === void 0 ? {} : _config$authorCard,
+      _config$authorDetails = config.authorDetails,
+      authorDetails = _config$authorDetails === void 0 ? {} : _config$authorDetails,
+      _config$asideCollecti = config.asideCollection,
+      asideCollection = _config$asideCollecti === void 0 ? {} : _config$asideCollecti,
+      _config$templateType = config.templateType,
+      templateType = _config$templateType === void 0 ? "" : _config$templateType,
+      _config$noOfVisibleCa = config.noOfVisibleCards,
+      noOfVisibleCards = _config$noOfVisibleCa === void 0 ? 0 : _config$noOfVisibleCa,
+      _config$publishedDeta = config.publishedDetails,
+      publishedDetails = _config$publishedDeta === void 0 ? {} : _config$publishedDeta,
+      _config$verticalShare = config.verticalShare,
+      verticalShare = _config$verticalShare === void 0 ? "" : _config$verticalShare,
+      _config$shareIconType = config.shareIconType,
+      shareIconType = _config$shareIconType === void 0 ? "plain-color-svg" : _config$shareIconType,
+      _config$premiumStoryI = config.premiumStoryIconConfig,
+      premiumStoryIconConfig = _config$premiumStoryI === void 0 ? {} : _config$premiumStoryI;
+  var visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
+  var storyId = get(story, ["id"], "");
+  var timezone = useSelector(function (state) {
+    return get(state, ["qt", "data", "timezone"], null);
+  });
+
+  var HeroVideo = function HeroVideo() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_hero-video__1rumO video-story-m_index-2__32Kzt",
+      id: "video-".concat(get(heroVideo, ["id"]))
+    }, /*#__PURE__*/React.createElement(Video, {
+      element: heroVideo,
+      loadIframeOnClick: true
+    }));
+  };
+
+  var SocialShareComponent = function SocialShareComponent() {
+    return /*#__PURE__*/React.createElement("div", {
+      id: "story-share-".concat(storyId),
+      className: "content-style"
+    }, /*#__PURE__*/React.createElement(SocialShare, {
+      template: SocialShareTemplate,
+      fullUrl: encodeURI(story.url),
+      title: story.headline,
+      theme: theme,
+      vertical: !!verticalShare,
+      iconType: shareIconType,
+      shareIconId: "share-icon-story-share-".concat(storyId)
+    }));
+  };
+
+  var HeaderCard = function HeaderCard() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_header-details__1MgWw"
+    }, /*#__PURE__*/React.createElement(SectionTag, {
+      story: story
+    }), /*#__PURE__*/React.createElement(StoryHeadline, {
+      story: story,
+      premiumStoryIconConfig: premiumStoryIconConfig
+    }), /*#__PURE__*/React.createElement(Subheadline, {
+      story: story,
+      showFullContent: true
+    }));
+  };
+
+  var StoryData = function StoryData() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_story-details__2KI1H"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_author__3AscN"
+    }, authorCard && /*#__PURE__*/React.createElement(AuthorCard, {
+      story: story,
+      template: authorDetails.template,
+      opts: authorDetails.opts
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_timestamp-social-share__1Vma8"
+    }, /*#__PURE__*/React.createElement(PublishDetails, {
+      story: story,
+      opts: publishedDetails,
+      template: "story",
+      timezone: timezone
+    }), !verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null)), visibledCards.map(function (card) {
+      return /*#__PURE__*/React.createElement(StoryElementCard, {
+        heroVideoElementId: heroVideo.id,
+        story: story,
+        card: card,
+        key: get(card, ["id"], ""),
+        config: storyElementsConfig,
+        adComponent: adComponent,
+        widgetComp: widgetComp
+      });
+    }), firstChild, /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_story-tags__1OnlS"
+    }, /*#__PURE__*/React.createElement(StoryTags, {
+      tags: story.tags
+    }), /*#__PURE__*/React.createElement(SlotAfterStory, {
+      id: story.id,
+      element: story.customSlotAfterStory,
+      AdComponent: adComponent,
+      WidgetComp: widgetComp
+    })), secondChild);
+  };
+
+  var SideColumn = function SideColumn() {
+    return asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_video-story-side-column__155nW"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({}, asideCollection, {
+      widgetComp: widgetComp,
+      adComponent: adComponent,
+      sticky: true,
+      storyId: storyId,
+      opts: publishedDetails
+    })));
+  };
+
+  var heroPriorityTemplate = function heroPriorityTemplate() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeroVideo, null), /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_story-content-wrapper__g87mo"
+    }, /*#__PURE__*/React.createElement(HeaderCard, null), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), asideCollection && /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_aside-collection__3ecnd video-story-m_tablet-index-2__2sPXB"
+    }, /*#__PURE__*/React.createElement(AsideCollection, _extends({
+      horizontal: true
+    }, asideCollection, {
+      widgetComp: widgetComp,
+      adComponent: adComponent,
+      storyId: storyId,
+      opts: publishedDetails
+    }))));
+  };
+
+  var headlinePriorityTemplate = function headlinePriorityTemplate() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_story-content-wrapper__g87mo"
+    }, /*#__PURE__*/React.createElement(HeaderCard, null)), /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_story-content-wrapper__g87mo video-story-m_index-2__32Kzt"
+    }, /*#__PURE__*/React.createElement(HeroVideo, null)), /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_story-content-wrapper__g87mo"
+    }, /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), /*#__PURE__*/React.createElement(SideColumn, null));
+  };
+
+  var defaultTemplate = function defaultTemplate() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeroVideo, null), /*#__PURE__*/React.createElement("div", {
+      className: "video-story-m_story-content-wrapper__g87mo"
+    }, /*#__PURE__*/React.createElement(HeaderCard, null), /*#__PURE__*/React.createElement(StoryData, null)), verticalShare && /*#__PURE__*/React.createElement(SocialShareComponent, null), /*#__PURE__*/React.createElement(SideColumn, null));
+  };
+
+  var getStoryTemplate = function getStoryTemplate(templateType) {
+    switch (templateType) {
+      case "hero-priority":
+        return heroPriorityTemplate();
+
+      case "headline-priority":
+        return headlinePriorityTemplate();
+
+      default:
+        return defaultTemplate();
+    }
+  };
+
+  var templateClass = templateType && templateType !== "default" ? templateType : "default";
+  var dataTestId = templateType ? "video-story-".concat(templateType) : "video-story";
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": dataTestId,
+    style: {
+      backgroundColor: theme
+    },
+    className: "arrow-component arr--content-wrapper arr-story-grid arr--video-story-template-wrapper " + _getClassName("".concat(templateClass, " ").concat(verticalShare), _styleModuleImportMap)
+  }, getStoryTemplate(templateType));
+};
+VideoStoryTemplateBase.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
+};
+export var VideoStoryTemplate = StateProvider(VideoStoryTemplateBase);

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

@@ -0,0 +1,214 @@
+import { boolean as _boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { AdPlaceholder } from "../../../Atoms/AdPlaceholder";
+import { generateCollection, generateStory } from "../../../Fixture";
+import { slotData } from "../../../Fixture/slot-config";
+import { VideoStoryTemplateBase } from "./index";
+import Readme from "./README.md";
+var story = generateStory();
+var collection = generateCollection({
+  stories: 4
+});
+var collectionNameDefaultValue = "#3a9fdd";
+var collectionNameBorderColorLabel = "Aside Collection Name Border Color";
+var shareType = {
+  "Vertical Share": "sticky",
+  "Horizontal Share": ""
+};
+var label = "BG Color";
+var defaultvalue = "#ffffff";
+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 configurableSlot = function configurableSlot() {
+  return /*#__PURE__*/React.createElement(AdPlaceholder, {
+    height: "250px",
+    width: "300px"
+  });
+};
+
+withStore("Rows/Story Templates/Video 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,
+    showSection: _boolean("Show Section Tag", true),
+    publishedDetails: {
+      enablePublishedTime: _boolean("Show Published Time", true),
+      enableUpdatedTime: _boolean("Show Updated Time", false),
+      showReadTime: _boolean("Read time", true)
+    },
+    premiumStoryIconConfig: {
+      iconColor: "#F7B500",
+      iconType: "star",
+      enablePremiumStoryIcon: true
+    },
+    asideCollection: {
+      data: collection,
+      config: {
+        collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+        title: text("Aside Collection Title", "Trending"),
+        theme: color(label, defaultvalue),
+        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(VideoStoryTemplateBase, {
+    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"
+    })
+  });
+}).add("Hero Priority", function () {
+  var templateConfig = {
+    shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
+    verticalShare: optionalSelect("Share Type", shareType),
+    theme: color(label, defaultvalue),
+    noOfVisibleCards: -1,
+    templateType: "hero-priority",
+    showSection: _boolean("Show Section Tag", true),
+    publishedDetails: {
+      enablePublishedTime: _boolean("Show Published Time", true),
+      enableUpdatedTime: _boolean("Show Updated Time", false),
+      showReadTime: _boolean("Read time", true)
+    },
+    premiumStoryIconConfig: {
+      iconColor: "#F7B500",
+      iconType: "star",
+      enablePremiumStoryIcon: true
+    },
+    asideCollection: {
+      data: collection,
+      config: {
+        collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+        title: text("Aside Collection Title", "Trending"),
+        theme: color(label, defaultvalue),
+        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(VideoStoryTemplateBase, {
+    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"
+    })
+  });
+}).add("Headline Priority", function () {
+  var templateConfig = {
+    shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
+    verticalShare: optionalSelect("Share Type", shareType),
+    theme: color(label, defaultvalue),
+    noOfVisibleCards: -1,
+    templateType: "headline-priority",
+    showSection: _boolean("Show Section Tag", true),
+    publishedDetails: {
+      enablePublishedTime: _boolean("Show Published Time", true),
+      enableUpdatedTime: _boolean("Show Updated Time", false),
+      showReadTime: _boolean("Read time", true)
+    },
+    premiumStoryIconConfig: {
+      iconColor: "#F7B500",
+      iconType: "star",
+      enablePremiumStoryIcon: true
+    },
+    asideCollection: {
+      data: collection,
+      config: {
+        collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+        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(VideoStoryTemplateBase, {
+    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"
+    })
+  });
+});

package/esm/components/Rows/StoryTemplates/VideoStoryTemplates/video-story.m.css

@@ -0,0 +1,195 @@
+@import "../../../../stylesheets/mixins.scss";
+
+.default,
+.hero-priority,
+.headline-priority {
+  @include tablet {
+    margin: var(--arrow-spacing-l);
+    @include desktop {
+      margin: 40px 0;
+    }
+  }
+}
+
+.adSlot {
+  margin-top: var(--arrow-spacing-xl);
+}
+
+.hero-video {
+  iframe {
+    width: 100%;
+    height: 190px;
+    @include tablet {
+      height: 540px;
+      @include desktop {
+        height: 640px;
+      }
+    }
+  }
+}
+
+.header-details :global(.arr--sub-headline) {
+  font-size: var(--arrow-fs-s);
+  font-style: italic;
+  @include tablet {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.header-details :global(.section-tag) {
+  margin: var(--arrow-fs-m) 0 var(--arrow-fs-tiny);
+}
+
+.headline-priority {
+  .header-details {
+    margin-bottom: var(--arrow-spacing-xl);
+  }
+  .hero-video {
+    iframe {
+      @include tablet {
+        height: 278px;
+      }
+      @include desktop {
+        height: 423px;
+      }
+    }
+  }
+  :global .aside-collection-ad-slot {
+    margin: 0 0 var(--arrow-spacing-l);
+  }
+}
+
+.story-details :global(.arr-author-name) {
+  margin-top: var(--arrow-fs-l);
+  margin-bottom: var(--arrow-spacing-s);
+  @include tablet {
+    margin-top: 0;
+  }
+}
+
+.timestamp-social-share {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--arrow-spacing-s);
+  @include tablet {
+    margin-top: 0;
+  }
+}
+
+.author {
+  margin-top: var(--arrow-spacing-l);
+  @include tablet {
+    margin-top: var(--arrow-spacing-xl);
+  }
+}
+
+.story-tags > * {
+  margin: var(--arrow-spacing-l) 0;
+}
+
+.hero-priority .aside-collection,
+.default .hero-video,
+.hero-priority .hero-video {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: container-start / container-end;
+  }
+}
+
+.sticky :global(.arr--share) {
+  grid-column: 4/5;
+  justify-self: flex-end;
+  @include desktop {
+    position: sticky;
+    position: -webkit-sticky;
+    align-self: flex-start;
+    margin-top: var(--arrow-spacing-xs);
+    top: 120px;
+  }
+}
+
+.header-details :global(.arr--headline h6) {
+  font-size: 28px;
+  @include tablet {
+    font-size: var(--arrow-fs-big);
+  }
+}
+
+.sticky.default :global(.arr--share) {
+  @include tablet {
+    grid-column: 8/9;
+    grid-row: 2/3;
+    @include desktop {
+      grid-column: grid-start / container-start;
+    }
+  }
+}
+
+.sticky.headline-priority :global(.arr--share) {
+  @include tablet {
+    grid-column: 8/9;
+    @include desktop {
+      grid-row: 2/3;
+      grid-column: grid-start / container-start;
+    }
+  }
+}
+
+.sticky.hero-priority {
+  :global(.arr--share) {
+    @include tablet {
+      grid-column: 9 / grid-end;
+      @include desktop {
+        grid-column: 3/4;
+        grid-row: 2/3;
+      }
+    }
+  }
+}
+
+.story-content-wrapper {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: container-start / 9;
+    @include desktop {
+      grid-column: container-start / 10;
+    }
+  }
+}
+
+.video-story-side-column {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 9 / container-end;
+    @include tablet {
+      grid-column: 10 / container-end;
+    }
+  }
+}
+
+.hero-priority .story-content-wrapper {
+  grid-column: 1/5;
+  @include tablet {
+    grid-column: 4/12;
+  }
+}
+
+.sticky .index-2 {
+  z-index: 2;
+  @include desktop {
+    z-index: unset;
+  }
+}
+
+.headline-priority .video-story-side-column {
+  @include tablet {
+    grid-row: 1/6;
+  }
+}
+
+.tablet-index-2 {
+  @include tablet {
+    z-index: 2;
+  }
+}

package/esm/components/Rows/TagIntroductionCard/README.md

@@ -0,0 +1,11 @@
+# tag page introduction card
+
+## Usage
+
+# introduction card is responsible for showing tag description and tag name
+
+```jsx
+<TagIntroductionCard props={data} config={contextConfig} />
+```
+
+<!-- PROPS -->