@quintype/arrow 3.20.0-perf-v2.0 → 3.20.0

package/src/components/Molecules/StoryElementCard/index.js

@@ -1,359 +0,0 @@
-import React from "react";
-import get from "lodash.get";
-import { Text } from "../../Atoms/StoryElements/Text";
-import { Blurb } from "../../Atoms/StoryElements/Blurb";
-import "./story-element-card.m.css";
-import { Summary } from "../../Atoms/StoryElements/Summary";
-import { BlockQuote } from "../../Atoms/StoryElements/BlockQuote";
-import { BigFact } from "../../Atoms/StoryElements/BigFact";
-import { AlsoRead } from "../../Atoms/StoryElements/AlsoRead";
-import { Image } from "../../Atoms/StoryElements/Image";
-import PropTypes from "prop-types";
-import { QuestionAnswer } from "../../Atoms/StoryElements/QuestionAnswer";
-import { ImageGallery } from "../../Atoms/StoryElements/imageGallery";
-import { StoryElement } from "../../Atoms/StoryElements/StoryElement";
-import { Video } from "../../Atoms/StoryElements/Video";
-import { Quote } from "../../Atoms/StoryElements/Quote";
-import { Reference } from "../../Atoms/StoryElements/Reference";
-import { CaptionAttribution } from "../../Atoms/CaptionAttribution";
-import { Attachment } from "../../Atoms/StoryElements/Attachment";
-import { SocialShare } from "@quintype/components";
-import { SocialShareTemplate } from "../../Molecules/SocialShareTemplate";
-import { facebookMobileVideoResizeFix, getTextColor } from "../../../utils/utils";
-import { ImageSlideshow } from "../../Atoms/StoryElements/ImageSlideshow";
-
-const getElementType = (element) => element["subtype"] || element["type"] || "";
-const getElement = (story, element, config = {}, AdComponent, WidgetComp, index, cardId) => {
-  const {
-    text = {},
-    summary = {},
-    blurb = {},
-    blockquote = {},
-    quote = {},
-    "also-read": alsoRead = {},
-    "q-and-a": qaElement = {},
-    question: questionElement = {},
-    answer: answerElement = {},
-    references = {}
-  } = config;
-
-  let elementType = getElementType(element);
-
-  if (elementType === "image-gallery") {
-    elementType = element.metadata["type"];
-  }
-
-  const storyElementId = get(element, ["id"]);
-
-  switch (elementType) {
-    case "ad":
-      return <AdComponent {...element} id={`ad-${index}_${cardId}`} />;
-
-    case "widget":
-      return <WidgetComp widgetCode={element.config.customCode} id={`widget-${index}_${cardId}`} />;
-
-    case "text":
-    case "cta":
-      const { css: { textColor: textElementColor = "#000", hyperlinkColor = "#2f81cd" } = {} } = text;
-      return <Text element={element} css={{ textColor: textElementColor, hyperlinkColor: hyperlinkColor }} />;
-
-    case "summary":
-      const {
-        template: summaryTemplate = "",
-        css: { headerBgColor = "" } = {},
-        opts: { headline = "", hideHeadline = false } = {}
-      } = summary;
-      return (
-        <Summary
-          element={element}
-          template={summaryTemplate}
-          opts={{
-            headline: headline || "Summary",
-            hideHeadline: hideHeadline
-          }}
-          css={{ headerBgColor: headerBgColor || "" }}
-        />
-      );
-
-    case "blurb":
-      const { template: blurbTemplate = "default", css: { borderColor = "#2f81cd" } = {} } = blurb;
-      return <Blurb element={element} template={blurbTemplate} css={{ borderColor: borderColor }} />;
-
-    case "blockquote":
-      const {
-        template: blockQuoteTemplate = "default",
-        css: { iconType = "edgeIcon", blockQuoteColor = "#2f81cd", backgroundShade = "" } = {}
-      } = blockquote;
-      return (
-        <BlockQuote
-          element={element}
-          template={blockQuoteTemplate}
-          css={{
-            iconType: iconType,
-            blockQuoteColor: blockQuoteColor,
-            backgroundShade: backgroundShade
-          }}
-        />
-      );
-
-    case "quote":
-      const { template: quoteTemplate = "borderNone", css: { borderColor: quoteBorderColor = "#2f81cd" } = {} } = quote;
-      return <Quote element={element} template={quoteTemplate} css={{ borderColor: quoteBorderColor }} />;
-
-    case "bigfact":
-      return <BigFact element={element} />;
-
-    case "also-read":
-      const {
-        template: alsoReadTemplate = "default",
-        css: { textColor = "#000" } = {},
-        opts: { title = "" } = {}
-      } = alsoRead;
-      return (
-        <AlsoRead
-          story={story}
-          element={element}
-          template={alsoReadTemplate}
-          css={{ textColor: textColor }}
-          opts={{ title }}
-        />
-      );
-
-    case "image":
-      return <Image element={element} />;
-
-    case "q-and-a":
-      const {
-        template: qaTemplate = "default",
-        css: { iconColor = "" } = {},
-        opts: { defaultIconType = "edge" } = {}
-      } = qaElement;
-      return (
-        <QuestionAnswer
-          element={element}
-          opts={{
-            type: "q-and-a",
-            defaultIconType: defaultIconType
-          }}
-          template={qaTemplate}
-          css={{
-            iconColor: iconColor
-          }}
-        />
-      );
-
-    case "question":
-      const {
-        template: questionTemplate = "default",
-        css: { questionIconColor = "" } = {},
-        opts: { defaultQuestionIconType = "edge" } = {}
-      } = questionElement;
-      return (
-        <QuestionAnswer
-          element={element}
-          opts={{
-            type: "question",
-            defaultIconType: defaultQuestionIconType
-          }}
-          template={questionTemplate}
-          css={{
-            iconColor: questionIconColor
-          }}
-        />
-      );
-
-    case "answer":
-      const {
-        template: answerTemplate = "default",
-        css: { answerIconColor = "" } = {},
-        opts: { defaultAnswerIconType = "edge" } = {}
-      } = answerElement;
-      return (
-        <QuestionAnswer
-          element={element}
-          opts={{
-            type: "answer",
-            defaultIconType: defaultAnswerIconType
-          }}
-          template={answerTemplate}
-          css={{
-            iconColor: answerIconColor
-          }}
-        />
-      );
-
-    case "gallery":
-      return (
-        <div className="content-style" id={`image-gallery-${storyElementId}`}>
-          <ImageGallery element={element} />
-        </div>
-      );
-
-    case "slideshow":
-      return (
-        <div className="content-style" id={`image-slideshow-${storyElementId}`}>
-          <ImageSlideshow element={element} />
-        </div>
-      );
-
-    case "youtube-video":
-    case "dailymotion-video":
-      return (
-        <div className="content-style" id={`video-${storyElementId}`}>
-          <Video element={element} story={story} loadIframeOnClick={true} />
-        </div>
-      );
-    case "attachment":
-      return <Attachment element={element} />;
-    case "tweet":
-    case "jsembed":
-      return (
-        <div className="content-style" id={`jsembed-${storyElementId}`}>
-          <StoryElement element={element} />
-        </div>
-      );
-    case "references":
-      const { opts: { showHeadline = true, headlineText = "" } = {} } = references;
-      return (
-        <Reference
-          element={element}
-          opts={{
-            showHeadline: showHeadline,
-            headlineText: headlineText
-          }}
-        />
-      );
-    default:
-      return (
-        <div className="content-style" id={`element-${storyElementId}`}>
-          <StoryElement element={element} story={story} />
-        </div>
-      );
-  }
-};
-
-const MainImageWrapper = ({ imageElement, story, children, config, card }) => {
-  return (
-    <>
-      <div style={{ backgroundColor: config.theme }}>
-        <Image element={imageElement} caption={false} />
-        <div styleName="image-share">
-          <CaptionAttribution element={imageElement} config={config} />
-          <SocialShare
-            template={SocialShareTemplate}
-            title={story.headline}
-            theme={config.theme}
-            fullUrl={encodeURI(`${get(story, ["url"], "")}?cardId=${get(card, ["id"], -1)}`)}
-          />
-        </div>
-      </div>
-    </>
-  );
-};
-
-MainImageWrapper.propTypes = {
-  story: PropTypes.object,
-  imageElement: PropTypes.object,
-  config: PropTypes.object,
-  children: PropTypes.node,
-  card: PropTypes.shape({
-    id: PropTypes.string
-  })
-};
-
-export const StoryElementCard = ({
-  story,
-  card,
-  heroVideoElementId = -1,
-  config,
-  isLive,
-  theme,
-  adComponent,
-  widgetComp
-}) => {
-  const textColor = getTextColor(theme);
-  const isLiveBlog = isLive ? "live-blog" : "";
-  let shouldRunFBMobileVideoFix = true;
-
-  return (
-    <div className="arr--story-page-card-wrapper">
-      {get(card, ["story-elements"], []).map((element, index) => {
-        if (element.id === heroVideoElementId) return false;
-        if (element.subtype && element.subtype === "facebook-post" && shouldRunFBMobileVideoFix) {
-          facebookMobileVideoResizeFix();
-          shouldRunFBMobileVideoFix = false;
-        }
-        const tableStyle = element && element.subtype === "table" ? "table" : "";
-        const cardId = get(card, ["id"], "");
-        return (
-          <div
-            key={element.id}
-            className="arr--element-container"
-            styleName={`element-container ${isLiveBlog} ${tableStyle} ${textColor}`}>
-            {getElement(story, element, config, adComponent, widgetComp, index, cardId)}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-StoryElementCard.propTypes = {
-  story: PropTypes.object,
-  card: PropTypes.array,
-  heroVideoElementId: PropTypes.number,
-  config: PropTypes.object,
-  isLive: PropTypes.bool,
-  theme: PropTypes.string,
-  adComponent: PropTypes.func,
-  widgetComp: PropTypes.func
-};
-
-export const PhotoStoryElement = ({ card = {}, config, story, adComponent, widgetComp }) => {
-  let shouldRunFBMobileVideoFix = true;
-  return (
-    <div styleName="story-card">
-      {get(card, ["story-elements"], []).map((element, index) => {
-        const cardId = get(card, ["id"], "");
-        if (element.type === "image") {
-          return <MainImageWrapper imageElement={element} story={story} config={config} card={card} />;
-        } else {
-          if (element.subtype && element.subtype === "facebook-post" && shouldRunFBMobileVideoFix) {
-            facebookMobileVideoResizeFix();
-            shouldRunFBMobileVideoFix = false;
-          }
-          return (
-            <div styleName="element-container" key={index}>
-              {getElement(story, element, config, adComponent, widgetComp, index, cardId)}
-            </div>
-          );
-        }
-      })}
-    </div>
-  );
-};
-
-PhotoStoryElement.propTypes = {
-  story: PropTypes.object,
-  card: PropTypes.object,
-  config: PropTypes.object,
-  adComponent: PropTypes.func,
-  widgetComp: PropTypes.func
-};
-
-export const SlotAfterStory = ({ id = "", element = {}, AdComponent, WidgetComp }) => {
-  switch (element.type) {
-    case "ad":
-      return <AdComponent {...element} id={`ad-after-story-${id}`} />;
-    case "widget":
-      return <WidgetComp widgetCode={element.config.customCode} id={`widget-after-story-${id}`} />;
-    default:
-      return null;
-  }
-};
-
-SlotAfterStory.propTypes = {
-  id: PropTypes.string,
-  element: PropTypes.object,
-  AdComponent: PropTypes.func,
-  WidgetComp: PropTypes.func
-};

package/src/components/Molecules/StoryElementCard/stories.js

@@ -1,27 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import Readme from "./README.md";
-import { StoryElementCard } from "./index";
-import { color } from "@storybook/addon-knobs";
-
-const story = generateStory();
-const { cards } = story;
-
-withStore(
-  "Molecules/Story Element Card",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-).add("Default", () => {
-  const config = {
-    theme: color("Background Color", "#fff")
-  };
-  return <StoryElementCard story={story} card={cards[0]} config={config} />;
-});

package/src/components/Molecules/StoryElementCard/story-element-card.m.css

@@ -1,78 +0,0 @@
-@import "../../../../assets/stylesheets/mixins.scss";
-
-.element-container {
-  margin: var(--arrow-spacing-l) 0;
-  @include tablet {
-    margin: var(--arrow-spacing-xl) 0;
-  }
-}
-
-.live-blog {
-  margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-l);
-  @include tablet {
-    margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-xl);
-  }
-}
-
-.image-share {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--arrow-spacing-xs) 0 var(--arrow-spacing-l);
-}
-.image-share :global(.arr--caption-attribution) {
-  margin: unset;
-}
-
-.image-share :global(.desktop-share-wrapper) {
-  @include desktop {
-    max-width: 42px;
-  }
-}
-
-.story-card {
-  border-bottom: 1px solid var(--arrow-c-mono5);
-  margin-bottom: var(--arrow-spacing-xl);
-}
-
-.element-container :global(.story-element-jsembed) iframe {
-  max-width: 100%;
-}
-
-.element-container :global(.story-element-jsembed) img {
-  width: fit-content;
-}
-
-.element-container :global(.story-element-jsembed-dailymotion-video) iframe {
-  width: 100%;
-  height: 100%;
-}
-
-:global(.story-element-jsembed.story-element-jsembed-facebook-post *) {
-  @include mobile {
-    max-width: 100%;
-    position: relative;
-  }
-}
-
-:global(.story-element-jsembed.story-element-jsembed-facebook-post) {
-  @include mobile {
-    max-width: calc(100vw - var(--arrow-spacing-l));
-  }
-}
-
-.table :global(.story-element-data-table) {
-  max-width: calc(100vw - 24px);
-  @include tablet {
-    max-width: calc(calc(calc(1024px / 12) * 8) - 24px);
-    @include desktop {
-      max-width: calc(calc(calc(1025px / 12) * 8) - 24px);
-    }
-  }
-}
-
-.dark {
-  color: var(--arrow-c-mono2);
-}
-.light {
-  color: var(--arrow-c-invert-mono2);
-}

package/src/components/Molecules/StorycardContent/README.md

@@ -1,34 +0,0 @@
-# StoryCard Content
-
-The _StoryCardContent_ component is a basic [molecule] used to represent a storyCard content within a Row.
-
-The _StoryCardContent_ can be composible based on it's children(Atoms).
-
-## Usage
-
-### Default Story Card
-
-```jsx
-<StoryCardContent story={story} />
-```
-
-### Story Card with Headline and Timestamp
-
-```jsx
-<StorycardContent story={story}>
-  <Headline story={story} />
-  <AuthorWithTime story={story} />
-</StorycardContent>
-```
-
-### Story Card with Headline, Author with Timestamp and Subheadline
-
-```jsx
-<StorycardContent story={story}>
-  <Headline story={story} />
-  <Subheadline story={story} />
-  <AuthorWithTime story={story} />
-</StorycardContent>
-```
-
-<!-- PROPS -->

package/src/components/Molecules/StorycardContent/index.js

@@ -1,76 +0,0 @@
-import React from "react";
-import { Headline } from "../../Atoms/Headline";
-import { SectionTag } from "../../Atoms/SectionTag";
-import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
-import { getTextColor, rgbToHex } from "../../../utils/utils";
-
-import PropTypes from "prop-types";
-
-import "./storycardContent.m.css";
-
-export const StorycardContent = ({
-  story,
-  children,
-  theme,
-  border,
-  isHorizontalMobile,
-  headerLevel,
-  borderColor,
-  config
-}) => {
-  const textColor = getTextColor(theme);
-  const borderOptions = ["full"];
-  const SectionTagborderColor = rgbToHex(borderColor);
-  const borderTemplate = borderOptions.includes(border) ? `border-${border}` : "";
-  const horizontalCard = isHorizontalMobile ? "horizontal-content-wrapper" : "";
-  return (
-    <div
-      className="arr--content-wrapper"
-      data-test-id="story-card-content"
-      styleName={`wrapper ${borderTemplate} ${horizontalCard}`}
-      style={{ backgroundColor: theme, color: textColor }}>
-      {children || (
-        <DefaultStoryCardContent
-          story={story}
-          headerLevel={headerLevel}
-          isHorizontalMobile={isHorizontalMobile}
-          borderColor={SectionTagborderColor}
-          config={config}
-        />
-      )}
-    </div>
-  );
-};
-
-const DefaultStoryCardContent = ({ story, headerLevel, borderColor, config = {} }) => {
-  const SectionTagborderColor = rgbToHex(borderColor);
-  const { localizationConfig = {} } = config;
-  return (
-    <div>
-      <SectionTag story={story} borderColor={SectionTagborderColor} />
-      <Headline story={story} headerLevel={headerLevel} premiumStoryIconConfig={config} />
-      <AuthorWithTime config={localizationConfig} story={story} />
-    </div>
-  );
-};
-
-DefaultStoryCardContent.propTypes = {
-  story: PropTypes.object.isRequired,
-  border: PropTypes.string,
-  theme: PropTypes.string,
-  isHorizontalMobile: PropTypes.bool,
-  headerLevel: PropTypes.string,
-  borderColor: PropTypes.string,
-  config: PropTypes.object
-};
-
-StorycardContent.propTypes = {
-  story: PropTypes.object.isRequired,
-  children: PropTypes.node,
-  theme: PropTypes.string,
-  border: PropTypes.string,
-  isHorizontalMobile: PropTypes.bool,
-  headerLevel: PropTypes.string,
-  borderColor: PropTypes.string,
-  config: PropTypes.object
-};

package/src/components/Molecules/StorycardContent/stories.js

@@ -1,39 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { StorycardContent } from "./index";
-import Readme from "./README.md";
-
-import { Headline } from "../../Atoms/Headline/index";
-import { Subheadline } from "../../Atoms/Subheadline/index";
-import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
-
-const story = generateStory();
-
-withStore(
-  "Molecules/StoryCard Content",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-)
-  .addDecorator((story) => <div style={{ maxWidth: "480px" }}>{story()}</div>)
-  .add("default", () => <StorycardContent story={story} />)
-  .add("Story Card with Headline and Timestamp", () => (
-    <StorycardContent story={story}>
-      <Headline story={story} />
-      <AuthorWithTime story={story} />
-    </StorycardContent>
-  ))
-  .add("Story Card with Headline, Author with Timestamp and Subheadline ", () => (
-    <StorycardContent story={story}>
-      <Headline story={story} />
-      <Subheadline story={story} />
-      <AuthorWithTime story={story} />
-    </StorycardContent>
-  ));

package/src/components/Molecules/StorycardContent/storycardContent.m.css

@@ -1,21 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.wrapper {
-  flex-basis: 70%;
-  @media (--viewport-medium) {
-    flex-basis: 100%;
-  }
-}
-.horizontal-content-wrapper.border-full {
-  padding: 16px 16px 16px 0;
-  @media (--viewport-medium) {
-    padding: 0 16px 16px 16px;
-  }
-}
-
-.border-full {
-  padding: 12px 0 0 0;
-  @media (--viewport-medium) {
-    padding: 0 16px 16px 16px;
-  }
-}

package/src/components/Rows/AlternateCollectionFilter/README.md

@@ -1,38 +0,0 @@
-# Alternate Collection Filter
-
-The _AlternateCollectionFilter_ component is a collection of collections in a tabbed interface.
-
-## Usage
-
-### Import
-
-```jsx
-import { AlternateCollectionFilter } from "@quintype/arrow";
-```
-
-### Setting the Row context
-
-```jsx
-const contextConfig = {
-  theme: "#ffffff",
-  border: "",
-  collectionNameTemplate: "default",
-  sectionTagTemplate: "solid",
-  showSection: true,
-  showAuthor: true,
-  showTime: true,
-  slotConfig: [{ type: "story", component: () => <CustomAdOrWidget /> }],
-  showRowTitle: true,
-  showFooterButton: true,
-  buttonText: "Load More",
-  footerSlotConfig: { footerSlot: () => <CustomFooterSlot /> }
-};
-```
-
-### Use as a component
-
-```jsx
-<AlternateCollectionFilter collection={collection} config={contextConfig} />
-```
-
-<!-- PROPS -->