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

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

@@ -0,0 +1,358 @@
+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":
+      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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,78 @@
+@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

@@ -0,0 +1,34 @@
+# 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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,21 @@
+@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

@@ -0,0 +1,38 @@
+# 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 -->