@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,150 @@
+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);