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

package/src/components/Atoms/StoryElements/Blurb/index.js

@@ -1,50 +0,0 @@
-import React from "react";
-import get from "lodash/get";
-import { useSelector } from "react-redux";
-import PropTypes from "prop-types";
-import { withElementWrapper } from "../withElementWrapper";
-import { updateContentLinks, shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
-import "./blurb.m.css";
-import { useStateValue } from "../../../SharedContext";
-
-const BlurbBase = ({ element, template = "", opts = {}, css = {}, story = {}, config = {}, render, ...restProps }) => {
-  const { borderColor } = css;
-  const languageDirection = useSelector((state) => get(state, ["qt", "config", "language", "direction"], "ltr"));
-  const content = element.text;
-  if (!content) return null;
-  const initBorderDirection =
-    template === "withBorder"
-      ? { border: `2px solid ${borderColor || "unset"}` }
-      : languageDirection === "rtl"
-      ? { borderRight: `2px solid ${borderColor || "unset"}` }
-      : { borderLeft: `2px solid ${borderColor || "unset"}` };
-
-  const { isExternalLink = true } = opts;
-  let text = (isExternalLink && updateContentLinks(content)) || content;
-  const templateStyle = template ? `blurb-${template}` : "blurb";
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(configData.theme);
-  return (
-    <div
-      className="arrow-component arr-custom-style arr--blurb-element"
-      styleName={`${templateStyle} ${textInvertColor}`}
-      data-test-id="blurb"
-      style={initBorderDirection}
-      dangerouslySetInnerHTML={{ __html: text }}
-      {...restProps}
-    />
-  );
-};
-
-BlurbBase.propTypes = {
-  element: PropTypes.shape({ text: PropTypes.string }),
-  /** templates can be either default or withBorder */
-  template: PropTypes.string,
-  opts: PropTypes.shape({ isExternalLink: PropTypes.bool }),
-  story: shapeStory,
-  config: shapeConfig,
-  render: PropTypes.func,
-  css: PropTypes.object
-};
-
-export const Blurb = withElementWrapper(BlurbBase);

package/src/components/Atoms/StoryElements/Blurb/stories.js

@@ -1,28 +0,0 @@
-import React from "react";
-import { withStore, optionalSelect } from "../../../../../storybook";
-import { generateStoryElementData } from "../../../Fixture";
-import Readme from "./README.md";
-import { Blurb } from "./index";
-import { color, boolean } from "@storybook/addon-knobs";
-
-const templateStyle = {
-  Default: "default",
-  "Blurb with Border": "withBorder"
-};
-
-const element = generateStoryElementData("blurb");
-
-withStore("Atoms/Story Elements/Blurb", {}, Readme)
-  .add("Default", () => (
-    <Blurb
-      element={element}
-      template={optionalSelect("Template Options", templateStyle)}
-      css={{ borderColor: color("Color", "#ff214b") }}
-      opts={{ isExternalLink: boolean("External Link", true) }}
-    />
-  ))
-  .add("Custom", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-    return <Blurb element={element} render={customTemplate} />;
-  });

package/src/components/Atoms/StoryElements/Image/README.md

@@ -1,13 +0,0 @@
-# Image Story Element
-
-Displays the image story element of the story
-
-## Usage
-
-#### Default Image story element
-
-```jsx
-<Image element={element} />
-```
-
-<!-- PROPS -->

package/src/components/Atoms/StoryElements/Image/image.m.css

@@ -1,21 +0,0 @@
-.element {
-  position: relative;
-}
-
-.loading {
-  position: fixed;
-  left: 0;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  /* To match it with lightbox overlay, hardcoding this value */
-  background: rgba(0, 0, 0, 0.85);
-  display: flex;
-  color: var(--arrow-c-light);
-  justify-content: center;
-  align-items: center;
-}
-
-.image-template {
-  position: relative;
-}

package/src/components/Atoms/StoryElements/Image/image.test.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-import { Provider } from "react-redux";
-import { Image } from ".";
-import { generateStoryElementData, generateStore } from "../../../Fixture";
-import { FullScreenImages } from "../../../Molecules/FullScreenImages";
-const element = generateStoryElementData("image");
-
-describe("Image Story Element", () => {
-  it("should render with correct elements", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <Image element={element} />
-      </Provider>
-    );
-    expect(wrapper.find("figure").length).toEqual(1);
-    expect(wrapper.find("CaptionAttribution").length).toEqual(1);
-    expect(wrapper.find(FullScreenImages).length).toEqual(1);
-  });
-});

package/src/components/Atoms/StoryElements/Image/index.js

@@ -1,76 +0,0 @@
-import React from "react";
-import PropTypes, { string } from "prop-types";
-import { withElementWrapper } from "../withElementWrapper";
-import { roundedCornerClass } from "../../../../constants";
-import "./image.m.css";
-import { shapeStory, shapeConfig } from "../../../../utils/utils";
-import { FullScreenImages } from "../../../Molecules/FullScreenImages";
-import { useStateValue } from "../../../SharedContext";
-import { useSelector } from "react-redux";
-import { ResponsiveLazyImg } from "../../ResponsiveImg";
-import get from "lodash.get";
-
-import { CaptionAttribution } from "../../CaptionAttribution";
-import { HyperLink } from "../../Hyperlink";
-import { imgElementSizes, imgElementWidths } from "../../../../utils/img-size-utils";
-
-const ImageBase = ({ element, opts = {}, story = {}, config = {}, caption = true, ...restProps }) => {
-  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"], false));
-  if (!element) return null;
-  const configData = useStateValue() || {};
-
-  const enableRoundedCorners = useSelector((state) =>
-    get(state, ["qt", "config", "pagebuilder-config", "general", "enableRoundedCorners"], false)
-  );
-
-  const roundedCorners = enableRoundedCorners ? roundedCornerClass : "";
-
-  const ImageTemplate = ({ onClick, sizes }) => (
-    <div styleName="image-template">
-      <figure styleName="element" className={`${roundedCorners}`} onClick={() => onClick()}>
-        <ResponsiveLazyImg
-          slug={element["image-s3-key"]}
-          metadata={element["image-metadata"]}
-          alt={element["alt-text"] || element["title"]}
-          aspectRatio={null}
-          defaultWidth={640}
-          widths={opts.imageWidths || imgElementWidths}
-          sizes={sizes || imgElementSizes} // for story card images
-          imgParams={{ auto: ["format", "compress"] }}
-          className={"arr-image-placeholder"}
-          isBotRequest={isBotRequest}
-        />
-      </figure>
-      {element["hyperlink"] && <HyperLink hyperLink={element["hyperlink"]} />}
-    </div>
-  );
-
-  ImageTemplate.propTypes = {
-    onClick: PropTypes.func,
-    sizes: string
-  };
-
-  return (
-    <div className="arrow-component arr--image-element" {...restProps} data-test-id="image-element">
-      <FullScreenImages template={ImageTemplate} element={element} imageSlug={element["image-s3-key"]} story={story} />
-      {caption && <CaptionAttribution element={element} config={configData} />}
-    </div>
-  );
-};
-
-ImageBase.propTypes = {
-  element: PropTypes.shape({
-    "image-s3-key": PropTypes.string,
-    "image-metadata": PropTypes.object,
-    "image-attribution": PropTypes.string,
-    "alt-text": PropTypes.string,
-    title: PropTypes.string,
-    hyperlink: PropTypes.string
-  }),
-  caption: PropTypes.bool,
-  opts: PropTypes.shape({ imageWidths: PropTypes.array }),
-  story: shapeStory,
-  config: shapeConfig
-};
-
-export const Image = withElementWrapper(ImageBase);

package/src/components/Atoms/StoryElements/Image/stories.js

@@ -1,25 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../../storybook";
-import { Image } from "./index";
-import Readme from "./README.md";
-import { generateStoryElementData } from "../../../Fixture";
-
-const element = generateStoryElementData("image");
-
-withStore(
-  "Atoms/Story Elements/Image",
-  {
-    qt: {
-      config: {
-        "cdn-image": "gumlet.assettype.com"
-      }
-    }
-  },
-  Readme
-)
-  .add("Default", () => <Image element={element} />)
-  .add("Custom", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <p>{element.title}</p>;
-    return <Image element={element} render={customTemplate} />;
-  });

package/src/components/Atoms/StoryElements/ImageSlideshow/README.md

@@ -1,13 +0,0 @@
-# ImageSlideshow
-
-Displays the image slideshow/carousel story element.
-
-## Usage
-
-#### Default ImageSlideshow element
-
-```jsx
- <ImageSlideshow element={element}  />);
-```
-
-<!-- PROPS -->

package/src/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css

@@ -1,63 +0,0 @@
-@import "../../../../../assets/stylesheets/mixins.scss";
-
-.slide {
-  position: relative;
-}
-
-.slideshow {
-  @include mobile {
-    width: 90vw;
-    margin: 0 auto;
-  }
-}
-
-.captionAttributionWrapper {
-  line-height: initial;
-  max-height: 100px;
-  overflow-y: scroll;
-  padding: 10px;
-  background: rgba(99, 104, 112, 0.1);
-  border: 1px solid rgba(100, 100, 100, 0.08);
-}
-
-.caption,
-.attribution {
-  font-size: 12px !important;
-}
-
-.separator {
-  display: inline-block;
-  width: 10px;
-}
-
-.caption.dark {
-  color: #333;
-}
-
-.caption.light {
-  color: var(--arrow-c-invert-mono2);
-}
-
-.attribution.dark {
-  color: #797979;
-}
-
-.attribution.light {
-  color: var(--arrow-c-light);
-}
-
-.slideshow figure {
-  padding-top: 56.65%;
-  position: relative;
-  margin: 0;
-}
-
-.image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 100%;
-  object-fit: cover;
-}

package/src/components/Atoms/StoryElements/ImageSlideshow/index.js

@@ -1,101 +0,0 @@
-import get from "lodash.get";
-import PropTypes from "prop-types";
-import React, { useEffect, useRef, useState } from "react";
-import { useSelector } from "react-redux";
-import { ResponsiveLazyImg } from "../../ResponsiveImg";
-import { shapeStory, getTextColor } from "../../../../utils/utils";
-import { FullScreenImages } from "../../../Molecules/FullScreenImages";
-import { withElementWrapper } from "../withElementWrapper";
-import { ScrollSnap } from "../../ScrollSnap";
-import "./image-slideshow.m.css";
-import { HyperLink } from "../../Hyperlink";
-import { useStateValue } from "../../../SharedContext";
-import { imgSlideShowSizes, imgSlideShowWidths } from "../../../../utils/img-size-utils";
-
-const ImageSlideshowBase = (props) => {
-  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"], false));
-  if (!props.element) return null;
-
-  const config = useStateValue() || {};
-  const textColor = getTextColor(config.theme);
-
-  const Slide = (image, index, onClickHandler) => {
-    const {
-      id,
-      "image-s3-key": imageS3Key,
-      metadata,
-      title,
-      hyperlink = "",
-      "alt-text": altText,
-      "image-attribution": attribution = ""
-    } = image;
-
-    return (
-      <div styleName="slide" key={id}>
-        <figure key={id} onClick={() => onClickHandler(index)}>
-          <ResponsiveLazyImg
-            slug={imageS3Key}
-            metadata={metadata}
-            aspectRatio={[16, 9]}
-            defaultWidth={480}
-            widths={imgSlideShowWidths}
-            sizes={imgSlideShowSizes}
-            imgParams={{ auto: ["format", "compress"] }}
-            styleName="image"
-            alt={altText || title}
-            isBotRequest={isBotRequest}
-          />
-          {hyperlink && <HyperLink hyperLink={hyperlink} />}
-        </figure>
-        {(title || attribution) && (
-          <div styleName="captionAttributionWrapper">
-            {title && <span styleName={`caption ${textColor}`} dangerouslySetInnerHTML={{ __html: title }} />}
-            {title && attribution && <span styleName="separator" />}
-            {attribution && (
-              <span styleName={`attribution ${textColor}`} dangerouslySetInnerHTML={{ __html: attribution }} />
-            )}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const ImageSlideshowTemplate = ({ onClickHandler }) => {
-    const [containerWidth, setContainerWidth] = useState(0);
-    const storyElements = get(props, ["element", "story-elements"], []);
-    const scrollContainerRef = useRef(null);
-    useEffect(() => {
-      if (scrollContainerRef.current) {
-        const _width = (9 / 16) * scrollContainerRef.current.offsetWidth;
-        setContainerWidth(_width);
-      }
-    }, [scrollContainerRef]);
-
-    return (
-      <div
-        ref={scrollContainerRef}
-        className="arr--image-slideshow-element"
-        styleName="slideshow"
-        data-test-id="image-slideshow">
-        <ScrollSnap slideIndicator={"none"} sliderArrowStyles={{ top: `${Math.round(containerWidth / 2)}px` }}>
-          {storyElements.map((image, index) => Slide(image, index, onClickHandler))}
-        </ScrollSnap>
-      </div>
-    );
-  };
-
-  ImageSlideshowTemplate.propTypes = {
-    onClickHandler: PropTypes.func
-  };
-
-  return <FullScreenImages template={ImageSlideshowTemplate} element={props.element} />;
-};
-
-ImageSlideshowBase.propTypes = {
-  element: PropTypes.shape({
-    "story-elements": PropTypes.array
-  }),
-  story: shapeStory
-};
-
-export const ImageSlideshow = withElementWrapper(ImageSlideshowBase);

package/src/components/Atoms/StoryElements/ImageSlideshow/stories.js

@@ -1,34 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../../storybook";
-import { generateStoryElementData } from "../../../Fixture";
-import { ImageSlideshow } from "./index";
-import Readme from "./README.md";
-
-const element = generateStoryElementData("image-gallery");
-
-withStore(
-  "Atoms/Story Elements/Image Slideshow",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-).add("Default", () => <ImageSlideshow element={element} />);
-
-withStore(
-  "Atoms/Story Elements/Image Slideshow",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        language: {
-          direction: "rtl"
-        }
-      }
-    }
-  },
-  Readme
-).add("Support Rtl", () => <ImageSlideshow element={element} />);

package/src/components/Atoms/StoryElements/QuestionAnswer/README.md

@@ -1,56 +0,0 @@
-# Question & Answer / Question / Answer
-
-Displays the question & answer/ question/ answer story element of the story
-
-## Usage
-
-#### Question & Answer/ Question/ Answer story element with default template
-
-```jsx
-const opts = { type: "q-and-a / question / answer" };
-
-<QuestionAnswer element={element} template="default" opts={opts} />;
-```
-
-#### Question & Answer/ Question/ Answer story element with author image
-
-```jsx
-const opts = { type: "q-and-a / question / answer" };
-
-<QuestionAnswer element={element} template="withAuthorImage" opts={opts} />;
-```
-
-#### Question & Answer/ Question/ Answer story element with external links opening in new tab
-
-```jsx
-const opts = { isExternalLink: true, type: "q-and-a / question / answer" };
-
-<QuestionAnswer element={element} template="default" opts={opts} />;
-```
-
-#### Question & Answer/ Question/ Answer story element with icon type for default template
-
-```jsx
-const opts = { defaultIconType: "curve", type: "q-and-a / question / answer" };
-
-<QuestionAnswer element={element} template="default" opts={opts} />;
-```
-
-#### Question & Answer/ Question/ Answer story element with icon color
-
-```jsx
-const opts = { type: "q-and-a / question / answer" };
-const css = {iconColor: "#ffff"}
-
-<QuestionAnswer element={element} template="default" opts={opts} css={css}/>;
-```
-
-#### Replace default question & answer/ question/ answer element template with custom template passed using render
-
-```jsx
-const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-
-<QuestionAnswer element={element} render={customTemplate} />;
-```
-
-<!-- PROPS -->

package/src/components/Atoms/StoryElements/QuestionAnswer/index.js

@@ -1,150 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import get from "lodash.get";
-import { shapeConfig, shapeStory, updateContentLinks, getTextColor } from "../../../../utils/utils";
-import { withElementWrapper } from "../withElementWrapper";
-import "./question-answer.m.css";
-import { useStateValue } from "../../../SharedContext";
-import { UserFallbackIcon } from "../../../Svgs/user-fallback-icon";
-
-const supportedTemplates = (type, element) => {
-  switch (type) {
-    case "q-and-a":
-      const { question: qaQuestion, answer: qaAnswer } = get(element, ["metadata"]);
-      const qaQuestionAttribution = get(element, ["metadata", "interviewer", "avatar-url"]);
-      const qaAnswerAttribution = get(element, ["metadata", "interviewee", "avatar-url"]);
-      return {
-        question: qaQuestion,
-        answer: qaAnswer,
-        questionAttribution: qaQuestionAttribution,
-        answerAttribution: qaAnswerAttribution
-      };
-    case "question":
-      const qQuestion = get(element, ["text"]);
-      const qAttribution = get(element, ["metadata", "interviewer", "avatar-url"]);
-      return {
-        question: qQuestion,
-        questionAttribution: qAttribution
-      };
-    case "answer":
-      const aAnswer = get(element, ["text"]);
-      const aAttribution = get(element, ["metadata", "interviewee", "avatar-url"]);
-      return {
-        answer: aAnswer,
-        answerAttribution: aAttribution
-      };
-  }
-};
-
-const QuestionAnswerBase = ({
-  element,
-  template,
-  css = {},
-  story = {},
-  config = {},
-  opts = {},
-  render,
-  ...restProps
-}) => {
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(configData.theme);
-  if (!element) return null;
-  const { type, defaultIconType, isExternalLink = true } = opts;
-  const { iconColor } = css;
-  const { question, answer, questionAttribution, answerAttribution } = supportedTemplates(type, element);
-
-  const theme = getTextColor(iconColor);
-  const questionData = question && ((isExternalLink && updateContentLinks(question)) || question);
-  const answerData = answer && ((isExternalLink && updateContentLinks(answer)) || answer);
-  const isAuthorImageTemplate = template === "withAuthorImage";
-  const templateStyle = isAuthorImageTemplate ? "qa-withAuthorImage" : "qa-default";
-  const iconType = defaultIconType === "curve" ? "curveIcon" : "edgeIcon";
-  const iconColorStyle = iconColor ? { backgroundColor: iconColor } : {};
-
-  function getFallBackAttributionImage() {
-    return (
-      <div styleName="fallbackAttribution">
-        <span styleName="fallbackImage">
-          <UserFallbackIcon />
-        </span>
-      </div>
-    );
-  }
-
-  const supportQuestionElement = isAuthorImageTemplate ? (
-    questionAttribution ? (
-      <>
-        <div styleName="labelAttribution">
-          <img src={questionAttribution} loading="lazy" alt="question" />
-        </div>
-        <span styleName="hidden"></span>
-      </>
-    ) : (
-      getFallBackAttributionImage()
-    )
-  ) : (
-    <div styleName={`${iconType} ${theme}`} data-test-id={iconType} style={iconColorStyle}>
-      Q
-    </div>
-  );
-
-  // EMPTY SPAN FOR EXTRA SPACE
-
-  const supportAnswerElement = isAuthorImageTemplate ? (
-    answerAttribution ? (
-      <>
-        <div styleName="labelAttribution">
-          <img src={answerAttribution} loading="lazy" alt="answer" />
-        </div>
-        <span styleName="hidden"></span>
-      </>
-    ) : (
-      getFallBackAttributionImage()
-    )
-  ) : (
-    <div styleName={`${iconType} ${theme}`} data-test-id={iconType} style={iconColorStyle}>
-      A
-    </div>
-  );
-
-  return (
-    <div
-      className="arrow-component arr-custom-style arr--qa-element"
-      data-test-id="question-answer"
-      styleName={templateStyle}
-      {...restProps}>
-      {type !== "answer" && (
-        <div styleName="q-element" data-test-id="question">
-          {supportQuestionElement}
-          <div styleName={`content ${textInvertColor}`} dangerouslySetInnerHTML={{ __html: questionData }} />
-        </div>
-      )}
-      {type !== "question" && (
-        <div styleName="a-element" data-test-id="answer">
-          {supportAnswerElement}
-          <div styleName={`content ${textInvertColor}`} dangerouslySetInnerHTML={{ __html: answerData }} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-QuestionAnswerBase.propTypes = {
-  element: PropTypes.shape({
-    metadata: PropTypes.shape({
-      interviewer: PropTypes.shape({ "avatar-url": PropTypes.string }),
-      interviewee: PropTypes.shape({ "avatar-url": PropTypes.string }),
-      question: PropTypes.string,
-      answer: PropTypes.string
-    }),
-    text: PropTypes.string
-  }),
-  opts: PropTypes.shape({ type: PropTypes.string, defaultIconType: PropTypes.string, isExternalLink: PropTypes.bool }),
-  template: PropTypes.string,
-  css: PropTypes.object,
-  config: shapeConfig,
-  story: shapeStory,
-  render: PropTypes.func
-};
-
-export const QuestionAnswer = withElementWrapper(QuestionAnswerBase);