@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1

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

@@ -1,56 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { StateProvider } from "../../../SharedContext";
-import "./event-story.m.css";
-import { StoryTemplate } from "./template";
-import { getTextColor } from "../../../../utils/utils";
-
-const EventStoryTemplate = ({
-  story = {},
-  config = {},
-  storyElementsConfig,
-  adComponent,
-  widgetComp,
-  enableDarkMode,
-  loadRelatedStories
-}) => {
-  const { theme = "", socialShareStyle = "fixed" } = config;
-  const stickyStyle = socialShareStyle === "sticky" ? "sticky" : "";
-  const textColor = getTextColor(theme);
-
-  return (
-    <div
-      data-test-id='event-story'
-      className='arrow-component arr-story-grid arr--content-wrapper arr--event-story-template-wrapper'
-      styleName={`${stickyStyle} ${textColor} wrapper`}
-      style={{ backgroundColor: theme || "initial" }}>
-      <StoryTemplate
-        story={story}
-        config={config}
-        storyElementsConfig={storyElementsConfig}
-        adComponent={adComponent}
-        widgetComp={widgetComp}
-        enableDarkMode={enableDarkMode}
-        loadRelatedStories={loadRelatedStories}
-        textColor={textColor}
-      />
-    </div>
-  );
-};
-
-EventStoryTemplate.propTypes = {
-  story: PropTypes.object,
-  config: PropTypes.shape({
-    templateType: PropTypes.string,
-    authorCard: PropTypes.object,
-    asideCollection: PropTypes.object
-  }),
-  storyElementsConfig: PropTypes.object,
-  adComponent: PropTypes.func,
-  widgetComp: PropTypes.func,
-  enableDarkMode: PropTypes.bool,
-  mountAt: PropTypes.string,
-  loadRelatedStories: PropTypes.func
-};
-
-export default StateProvider(EventStoryTemplate);

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

@@ -1,78 +0,0 @@
-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 EventStoryTemplate from "./index";
-import { slotData } from "../../../Fixture/slot-config";
-
-const story = generateStory("text-story");
-const label = "BG Color";
-const defaultvalue = "#ffffff";
-const collection = generateCollection({ stories: 4 });
-
-const configurableSlot = () => {
-  return <AdPlaceholder height='250px' width='300px' />;
-};
-
-const socialShareStyle = {
-  "Vertical Share": "sticky",
-  "Fixed Share": "fixed"
-};
-
-const sectionTagTemplates = {
-  Default: "",
-  "Border Bottom Small": "borderBottomSml",
-  Solid: "solid",
-  "Border Left": "borderLeft"
-};
-
-withStore("Rows/Story Templates/Event Story Template", {
-  qt: {
-    config: {
-      "cdn-image": "thumbor-stg.assettype.com",
-      mountAt: "/sub-directory"
-    }
-  }
-}).add("Default", () => {
-  const templateConfig = {
-    socialShareStyle: optionalSelect("Social Share Style", socialShareStyle),
-    theme: color(label, defaultvalue),
-    noOfVisibleCards: -1,
-    showSection: boolean("Show Section Tag", true),
-    sectionTagSettings: {
-      template: optionalSelect("Section Template", sectionTagTemplates) || "borderBottomSml",
-      borderColor: color("Section Tag Border Color", "#ff214b")
-    },
-    asideCollection: {
-      data: collection,
-      config: {
-        collectionNameBorderColor: color("Aside Collection Name Border Color", "#3a9fdd"),
-        title: text("Aside Collection Title", "Trending"),
-        theme: color("BG Color", "#ffffff")
-      },
-      slots: slotData
-    }
-  };
-
-  const storyElementsConfig = {
-    summary: {},
-    blurb: {},
-    blockquote: {},
-    quote: {},
-    "also-read": {},
-    "q-and-a": {},
-    question: {},
-    answer: {},
-    references: {}
-  };
-  return (
-    <EventStoryTemplate
-      story={story}
-      config={templateConfig}
-      storyElementsConfig={storyElementsConfig}
-      adComponent={configurableSlot}
-      widgetComp={configurableSlot}
-    />
-  );
-});

package/src/components/Rows/StoryTemplates/EventStoryTemplates/template.js

@@ -1,169 +0,0 @@
-import React from "react";
-import { useSelector } from "react-redux";
-import get from "lodash.get";
-import PropTypes from "prop-types";
-import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
-import { SocialShare } from "@quintype/components";
-import { SectionTag } from "../../../Atoms/SectionTag";
-import { StoryHeadline } from "../../../Atoms/StoryHeadline";
-import { Subheadline } from "../../../Atoms/Subheadline";
-import AsideCollection from "../../AsideCollection";
-import { HeroImage } from "../../../Atoms/HeroImage";
-import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
-import { roundedCornerClass } from "../../../../constants";
-import "./event-story.m.css";
-import { BackArrow } from "../../../Svgs/back-arrow";
-import { CustomAttributes } from "./CustomAttributes";
-
-export const StoryTemplate = ({
-  story = {},
-  config = {},
-  storyElementsConfig,
-  isFullWidthImage,
-  widgetComp,
-  adComponent,
-  enableDarkMode,
-  loadRelatedStories,
-  textColor
-}) => {
-  const {
-    theme = "",
-    asideCollection = {},
-    socialShareStyle = "fixed",
-    fixedShareLayout = "partialShareIcons"
-  } = config;
-  const storyId = get(story, ["id"], "");
-
-  const generalPbConfig = useSelector((state) => get(state, ["qt", "config", "pagebuilder-config", "general"], {}));
-  const enableRoundedCorners = get(generalPbConfig, ["enableRoundedCorners"], false);
-  const roundedCorners = enableRoundedCorners ? roundedCornerClass : "";
-  const { color: sectionTagColor, darkColor: sectionTagDarkColor, template } = get(
-    generalPbConfig,
-    ["rows", "sectionTag"],
-    {}
-  );
-
-  const sectionTagSettings = {
-    template: template,
-    borderColor: enableDarkMode ? sectionTagDarkColor : sectionTagColor
-  };
-
-  const AsideCollectionCard = () => {
-    return (
-      <div className={roundedCorners} styleName="aside-collection tablet-index-2">
-        <AsideCollection
-          horizontal={true}
-          {...asideCollection}
-          config={{ ...asideCollection.config, title: "Related Events" }}
-          opts={{
-            enablePublishedTime: false,
-            enableUpdatedTime: false,
-            showReadTime: false,
-            enableSectionTag: false,
-            enableAuthorWithTime: false
-          }}
-          loadRelatedStories={loadRelatedStories}
-          story={story}
-        />
-      </div>
-    );
-  };
-
-  const SocialShareComponent = () => {
-    return (
-      <div
-        id={`story-share-${storyId}`}
-        className={socialShareStyle === "sticky" ? "arr--share-sticky-wrapper" : "content-style"}>
-        <SocialShare
-          template={SocialShareTemplate}
-          fullUrl={encodeURI(story.url)}
-          title={story.headline}
-          theme={theme}
-          socialShareStyle={socialShareStyle}
-          shareIconId={`share-icon-story-share-${storyId}`}
-          fixedShareLayout={fixedShareLayout}
-          id={story.id}
-          enableDarkMode={enableDarkMode}
-        />
-      </div>
-    );
-  };
-
-  const StoryData = () =>
-    story.cards.map((card) => (
-      <StoryElementCard
-        story={story}
-        card={card}
-        key={get(card, ["id"], "")}
-        config={storyElementsConfig}
-        adComponent={adComponent}
-        widgetComp={widgetComp}
-        enableDarkMode={enableDarkMode}
-      />
-    ));
-
-  const AllEvents = () => {
-    const iconColor = textColor === "dark" ? "#000" : "#fff";
-    return (
-      <a href="/events" styleName="events-listing">
-        <BackArrow color={iconColor} bgColor={theme} />
-        <span>All Events</span>
-      </a>
-    );
-  };
-
-  return (
-    <>
-      <AllEvents />
-      <div styleName="header-details">
-        <div styleName="section-tag">
-          <SectionTag story={story} {...sectionTagSettings} />
-        </div>
-        <StoryHeadline story={story} />
-        <Subheadline story={story} showFullContent />
-        <SocialShareComponent />
-      </div>
-      <div styleName="custom-data">
-        <CustomAttributes story={story} mode={textColor} enableDarkMode={enableDarkMode} />
-      </div>
-      <div styleName="body-details index-2" className={roundedCorners}>
-        <HeroImage
-          story={story}
-          widths={[480, 640, 768, 1024, 1200]}
-          sizes="(max-width: 768px) 100vw, 75vw"
-          FullBleed={false}
-          aspectRatio={[[16, 9]]}
-          defaultFallback={false}
-          isStoryPageImage
-          isFullWidthImage={isFullWidthImage}
-        />
-        <StoryData />
-      </div>
-      <div styleName="separator" />
-      <AsideCollectionCard />
-      <div styleName="slot-after-story">
-        <SlotAfterStory
-          id={story.id}
-          element={story.customSlotAfterStory}
-          AdComponent={adComponent}
-          WidgetComp={widgetComp}
-        />
-      </div>
-    </>
-  );
-};
-
-StoryTemplate.propTypes = {
-  story: PropTypes.object,
-  config: PropTypes.shape({
-    authorDetails: PropTypes.object,
-    asideCollection: PropTypes.object
-  }),
-  isFullWidthImage: PropTypes.bool,
-  storyElementsConfig: PropTypes.object,
-  widgetComp: PropTypes.func,
-  adComponent: PropTypes.func,
-  enableDarkMode: PropTypes.bool,
-  textColor: PropTypes.string,
-  loadRelatedStories: PropTypes.func
-};

package/src/components/Rows/StoryTemplates/ListicleStoryTemplates/README.md

@@ -1,19 +0,0 @@
-# Listicle Story Template
-
-Listicle story template is a basic component used to represent a Listicle story.
-
-## Usage
-
-## Default template
-
-```jsx
-<ListicleStoryTemplate story={story} templateConfig={templateConfig} storyElementsConfig={storyElementsConfig} />
-```
-
-## Template with Children components
-
-```jsx
-<ListicleStoryTemplate story={story} templateConfig={templateConfig} storyElementsConfig={storyElementsConfig}>
-  <ChildrenComponent />
-</ListicleStoryTemplate>
-```