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

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

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import get from "lodash.get";
+import { withElementWrapper } from "../withElementWrapper";
+import { updateContentLinks, shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
+import "./text.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+const TextBase = ({ element = {}, opts = {}, css = {}, story = {}, config = {}, ...restProps }) => {
+  const content = element.text;
+  if (!content) return null;
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  const { textColor } = css;
+  const { isExternalLink = true } = opts;
+  const text = (isExternalLink && updateContentLinks(content)) || content;
+  const isPromotionalMessage = get(element, ["metadata", "promotional-message"], false);
+  const updatedStyle = isPromotionalMessage ? "promotionalMessage" : "textElement";
+
+  return (
+    <div
+      className="arrow-component arr--text-element"
+      styleName={`${updatedStyle} ${textInvertColor}`}
+      style={!isPromotionalMessage && textColor ? { color: textColor } : {}}
+      data-test-id={isPromotionalMessage ? "promotional-message" : "text"}
+      dangerouslySetInnerHTML={{ __html: text }}
+      {...restProps}
+    />
+  );
+};
+
+TextBase.propTypes = {
+  element: PropTypes.shape({ text: PropTypes.string }),
+  opts: PropTypes.shape({ isExternalLink: PropTypes.bool }),
+  css: PropTypes.shape({ hyperlinkColor: PropTypes.string, textColor: PropTypes.string }),
+  story: shapeStory,
+  config: shapeConfig
+};
+
+export const Text = withElementWrapper(TextBase);

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Text } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+import { boolean, color } from "@storybook/addon-knobs";
+
+const element = generateStoryElementData("text");
+
+withStore("Atoms/Story Elements/Text", {}, Readme)
+  .add("Default", () => (
+    <Text
+      element={element}
+      opts={{ isExternalLink: boolean("External Link", true) }}
+      css={{ hyperlinkColor: color("Hyperlink Color", "#ff214b"), textColor: color("Text Color", "#000") }}
+    />
+  ))
+  .add("Promotional Message", () => {
+    const promotionalMessage = { ...element, metadata: { "promotional-message": true } };
+    return (
+      <Text
+        element={promotionalMessage}
+        opts={{ isExternalLink: boolean("External Link", true) }}
+        css={{ hyperlinkColor: color("Hyperlink Color", "#ff214b") }}
+      />
+    );
+  })
+  .add("Custom", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    return <Text element={element} render={customTemplate} />;
+  });

package/src/components/Atoms/StoryElements/Text/text.m.css

@@ -0,0 +1,88 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.promotionalMessage p {
+  font-size: var(--arrow-fs-tiny);
+  padding-bottom: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-xs);
+    padding-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.textElement p,
+.dark {
+  line-height: var(--arrow-lh-5);
+  font-size: var(--arrow-fs-s);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.promotionalMessage a {
+  color: var(--textElementHyperlinkColor);
+}
+
+.textElement a {
+  color: var(--textElementHyperlinkColor);
+  border-bottom: 1px solid var(--textElementHyperlinkColor);
+  transition: border 0.3s ease;
+}
+
+.textElement.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.promotionalMessage a:hover {
+  color: var(--arrow-c-brand1);
+  border-bottom: 1px solid;
+  padding-bottom: 3px;
+  transition: all 0.3s ease 0s;
+}
+
+.promotionalMessage.dark p {
+  color: var(--arrow-c-mono4);
+}
+.promotionalMessage.light p {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.textElement ul,
+.textElement ol {
+  list-style: initial;
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-xl) 0 var(--arrow-spacing-l);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-xl) 0 var(--arrow-spacing-xl);
+  }
+}
+
+.textElement ol {
+  list-style: auto;
+}
+
+.textElement li {
+  font-size: var(--arrow-fs-m);
+  margin-bottom: 15px;
+}
+
+.textElement ul li p,
+.textElement ol li p {
+  margin-bottom: unset;
+}
+
+.textElement :global .cta-anchor {
+  background-color: var(--arrow-c-brand1);
+  color: var(--arrow-c-light);
+  border-radius: var(--arrow-spacing-xxs);
+  box-shadow: 0 var(--arrow-spacing-xxs) var(--arrow-spacing-xs) 0 var(--arrow-c-mono6);
+  font-size: var(--arrow-fs-s);
+  padding: var(--arrow-spacing-s) var(--arrow-spacing-m);
+  display: block;
+  text-align: center;
+
+  @media (min-width: mobile) {
+    display: inline-block;
+    font-size: var(--arrow-fs-m);
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-l);
+  }
+}

package/src/components/Atoms/StoryElements/Text/text.test.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { Text } from "./index";
+import { generateStoryElementData } from "../../../Fixture";
+
+const element = generateStoryElementData("text");
+
+describe("Text Story Element", () => {
+  it("should render default template", () => {
+    const wrapper = mount(<Text element={element} />);
+    expect(wrapper.find({ "data-test-id": "text" }).prop("className")).toMatch(/text-element/);
+  });
+
+  it("should render promotional message when it is enabled", () => {
+    const promotionalMessage = { ...element, metadata: { "promotional-message": true } };
+    const wrapper = mount(<Text element={promotionalMessage} />);
+    expect(wrapper.find({ "data-test-id": "promotional-message" }).prop("className")).toMatch(/promotionalMessage/);
+  });
+
+  it("should render default template with external link", () => {
+    const wrapper = shallow(<Text opts={{ isExternalLink: true }} element={element} />);
+    expect(wrapper.html()).toBe(
+      "<div data-test-id=\"text\" class=\"arrow-component arr--text-element text-m_textElement__e3QEt text-m_dark__1TC18 \"><p><a aria-label='content' target='_blank' href=\"https://www.theguardian.com/technology/virtual-reality\">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a aria-label='content' target='_blank' href=\"https://www.theguardian.com/film/stevenspielberg\">Steven Spielberg</a> 2019s <a aria-label='content' target='_blank' href=\"https://www.theguardian.com/film/ready-player-one\">Ready Player One</a>.</p></div>"
+    );
+  });
+
+  it("should render default template without external link", () => {
+    const wrapper = shallow(<Text opts={{ isExternalLink: false }} element={element} />);
+    expect(wrapper.html()).toBe(
+      '<div data-test-id="text" class="arrow-component arr--text-element text-m_textElement__e3QEt text-m_dark__1TC18 "><p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p></div>'
+    );
+  });
+
+  it("should render custom template", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    const wrapper = shallow(<Text element={element} render={customTemplate} />);
+    expect(wrapper.html()).toBe(
+      '<h3><p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p></h3>'
+    );
+  });
+});

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

@@ -0,0 +1,9 @@
+# Video Story Element
+
+Video story element is a simple component used to display a video story.
+
+## Usage
+
+```jsx
+<Video element={element} />
+```

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { StoryElement } from "@quintype/components";
+import get from "lodash.get";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { getTextColor, shapeStory, shapeConfig } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
+import "./video.m.css";
+
+const Videobase = ({ element, story = {}, config = {}, loadIframeOnClick = false, ...restProps }) => {
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  const style =
+    !loadIframeOnClick && (element.subtype === "dailymotion-video" || element.type === "youtube-video")
+      ? "container wrapper"
+      : "container";
+  const enableRoundedCorners = useSelector((state) =>
+    get(state, ["qt", "config", "pagebuilder-config", "general", "enableRoundedCorners"], false)
+  );
+  const roundedCorners = enableRoundedCorners ? "rounded-corners" : "";
+
+  const renderElement = () => {
+    if (element.subtype === "brightcove-video") {
+      const policyKey = useSelector((state) => get(state, ["qt", "config", "brightcove", "policy-key"], ""));
+      return <StoryElement element={element} loadIframeOnClick={loadIframeOnClick} policyKey={policyKey} />;
+    } else {
+      return <StoryElement element={element} loadIframeOnClick={loadIframeOnClick} />;
+    }
+  };
+
+  return (
+    <div styleName={`${style} ${textInvertColor} ${roundedCorners}`} {...restProps} data-test-id="video">
+      {renderElement()}
+    </div>
+  );
+};
+
+Videobase.propTypes = {
+  element: PropTypes.object,
+  story: shapeStory,
+  config: shapeConfig,
+  loadIframeOnClick: PropTypes.bool
+};
+
+export const Video = withElementWrapper(Videobase);

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Video } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+
+const elementYoutube = generateStoryElementData("youtube-video");
+const elementDailyMotion = generateStoryElementData("dailymotion-video");
+const elementTwitter = generateStoryElementData("tweet");
+withStore(
+  "Atoms/Story Elements/Video",
+
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .add("Default with youtube video", () => <Video element={elementYoutube} loadIframeOnClick={true} />)
+  .add("Dailymotion video", () => <Video element={elementDailyMotion} loadIframeOnClick={true} />)
+  .add("Twitter video", () => <Video element={elementTwitter} />);

package/src/components/Atoms/StoryElements/Video/video.m.css

@@ -0,0 +1,142 @@
+.rounded-corners :global {
+  .brightcove-poster-fallback,
+  .youtube-thumbnail,
+  .dailymotion-thumbnail,
+  .dailymotion-player-wrapper,
+  .dailymotion-player-root,
+  .video-js,
+  iframe,
+  img {
+    border-radius: var(--arrow-spacing-s);
+  }
+}
+
+.container {
+  :global {
+    .youtube-playBtn {
+      position: absolute;
+      background-color: transparent;
+      padding: 0;
+      height: 48px;
+      width: 70px;
+      top: 50%;
+      left: 50%;
+      border: none;
+      cursor: pointer;
+      z-index: var(--z-index-1);
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    .thumbnail-wrapper {
+      position: relative;
+      padding-top: 56.25%;
+      height: 100%;
+      width: 100%;
+
+      img,
+      iframe {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      iframe {
+        z-index: var(--z-index-9);
+      }
+
+      img {
+        object-fit: cover;
+      }
+    }
+
+    .story-element-jsembed .thumbnail-wrapper img {
+      width: 100%;
+    }
+
+    .brightcove-playBtn,
+    .dailymotion-playBtn {
+      background-color: var(--arrow-c-invert-mono5);
+      border-radius: 50%;
+      font-size: 0;
+      height: 64px;
+      padding: 0;
+      width: 64px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border: none;
+      cursor: pointer;
+      z-index: var(--z-index-1);
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    .brightcove-playBtn:hover,
+    .dailymotion-playBtn:hover {
+      background-color: var(--arrow-c-brand1);
+    }
+
+    .brightcove-playBtn::after,
+    .dailymotion-playBtn::after {
+      position: relative;
+      content: "";
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 12px 0 12px 18px;
+      border-color: transparent transparent transparent var(--arrow-c-invert-mono3);
+      margin: 0 auto;
+      left: 3px;
+    }
+
+    .jw-player {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .jw-player-container {
+      position: relative;
+      width: 100%;
+      padding-top: 56.25%;
+    }
+  }
+}
+
+.wrapper,
+.container :global(.brightcove-wrapper) {
+  position: relative;
+  padding-top: 56.25%;
+}
+
+.wrapper :global(.story-element-youtube-video) > div,
+.wrapper :global(.story-element-external-file-brightcove-video) > div,
+.wrapper :global(.story-element-jsembed-dailymotion-video) > div {
+  background-color: #f0f0f0;
+  padding-top: 56.25%;
+}
+
+.wrapper :global(.story-element-jsembed-dailymotion-video),
+.wrapper :global(.story-element-youtube-video) iframe,
+.container :global(.brightcove-poster),
+.container :global(.brightcove-poster-fallback),
+.container :global(.brightcove-player),
+.container :global(.brightcove-player .video-js) {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.container.dark :global(.brightcove-poster-fallback) {
+  background-color: black;
+}
+
+.container.light :global(.brightcove-poster-fallback) {
+  background-color: #363636;
+}

package/src/components/Atoms/StoryElements/Video/video.test.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { Video } from ".";
+import { generateStoryElementData } from "../../../Fixture";
+import { StoryElement } from "@quintype/components";
+
+jest.mock("react-redux", () => ({
+  ...jest.requireActual("react-redux"),
+  useSelector: jest.fn()
+}));
+
+const element = generateStoryElementData("youtube-video");
+
+describe("Video Story Element", () => {
+  it("should render with correct elements", () => {
+    const wrapper = shallow(<Video element={element} />).dive();
+    expect(wrapper.find(StoryElement).length).toEqual(1);
+  });
+});

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

@@ -0,0 +1,18 @@
+# Image Gallery Element
+
+Displays the image gallery story element of the story
+
+## Usage
+
+#### Default Image story element
+
+```jsx
+ <ImageGallery element={element}  />);
+```
+#### template (with 6 images and rest count on the last image for desktop and 4 images for mobile and rest count on last image) Image story element
+
+```jsx
+ <ImageGallery element={element} template="template-2" />);
+```
+
+<!-- PROPS -->

package/src/components/Atoms/StoryElements/imageGallery/image-gallery.m.css

@@ -0,0 +1,52 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: var(--arrow-spacing-xs);
+  }
+}
+
+.image-gallery figure,
+.image-gallery .image {
+  padding-top: 100%;
+}
+
+.image-gallery figure.image {
+  position: relative;
+  cursor: pointer;
+}
+
+.image img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+}
+
+.template-2 .left-images {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  font-size: var(--arrow-fs-l);
+  color: var(--arrow-c-light);
+}
+.left-images::before {
+  content: "+";
+}
+
+.hyperlink-gallery-image {
+  position: relative;
+}

package/src/components/Atoms/StoryElements/imageGallery/image-gallery.test.js

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

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

@@ -0,0 +1,79 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { ResponsiveLazyImg } from "../../ResponsiveImg";
+import { withElementWrapper } from "../withElementWrapper";
+import { FullScreenImages } from "../../../Molecules/FullScreenImages";
+import get from "lodash.get";
+
+import { shapeStory, shapeConfig, clientWidth } from "../../../../utils/utils";
+import "./image-gallery.m.css";
+import { HyperLink } from "../../Hyperlink";
+import { imgGallerySizes, imgGalleryWidths } from "../../../../utils/img-size-utils";
+
+const ImageGalleryBase = ({ element, template = "", opts = {}, story = {}, config = {}, ...restProps }) => {
+  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"], false));
+  if (!element) return null;
+  const isMobile = clientWidth("mobile");
+  const imageArr = element["story-elements"];
+  const imageBaseOnTemp = template === "template-2" && imageArr.length;
+  const renderImageDesktop = imageBaseOnTemp > 6 ? imageArr.slice(0, 6) : imageArr;
+  const renderMobile = imageBaseOnTemp > 4 ? imageArr.slice(0, 4) : imageArr;
+  const renderImage = isMobile ? renderMobile : renderImageDesktop;
+  const classes = template === "template-2" ? "template-2" : "";
+  const hyperlinkClass = (hyperlink) => (hyperlink ? "hyperlink-gallery-image" : "");
+
+  const ImageGalleryImagesTemplate = ({ onClickHandler }) => {
+    const images = renderImage.map((image, index) => (
+      <div key={index} styleName={hyperlinkClass(image["hyperlink"])}>
+        <figure
+          key={index}
+          data-text-id={`image-${index}`}
+          styleName={`image ${classes}`}
+          onClick={() => onClickHandler && onClickHandler(index)}>
+          <ResponsiveLazyImg
+            slug={image["image-s3-key"]}
+            metadata={image["image-metadata"]}
+            alt={image["alt-text"] || image["title"]}
+            aspectRatio={[1, 1]}
+            defaultWidth={640}
+            widths={imgGalleryWidths}
+            sizes={imgGallerySizes}
+            imgParams={{ auto: ["format", "compress"] }}
+            isBotRequest={isBotRequest}
+            className={"arr-image-placeholder"}
+          />
+        </figure>
+        {image["hyperlink"] && <HyperLink hyperLink={image["hyperlink"]} />}
+      </div>
+    ));
+
+    return (
+      <div
+        styleName="image-gallery"
+        className=" arrow-component arr--image-element"
+        {...restProps}
+        data-test-id="image-gallery">
+        {images}
+      </div>
+    );
+  };
+
+  ImageGalleryImagesTemplate.propTypes = {
+    onClickHandler: PropTypes.func
+  };
+
+  return <FullScreenImages template={ImageGalleryImagesTemplate} element={element} />;
+};
+
+ImageGalleryBase.propTypes = {
+  element: PropTypes.shape({
+    "story-elements": PropTypes.array
+  }),
+  opts: PropTypes.shape({ imageWidths: PropTypes.array }),
+  story: shapeStory,
+  config: shapeConfig,
+  template: PropTypes.string
+};
+
+export const ImageGallery = withElementWrapper(ImageGalleryBase);

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { ImageGallery } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+
+const element = generateStoryElementData("image-gallery");
+const imgaeGalleryTemplate = {
+  default: "",
+  template2: "template-2"
+};
+
+withStore(
+  "Atoms/Story Elements/Image gallery",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+).add("Default", () => <ImageGallery element={element} template={optionalSelect("templates", imgaeGalleryTemplate)} />);

package/src/components/Atoms/StoryElements/withElementWrapper.js

@@ -0,0 +1,13 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const withElementWrapper = (StoryElement) => (props) => {
+  const { element, render, ...restProps } = props;
+  if (!element) return null;
+  if (render && typeof render === "function") return render(props);
+  return <StoryElement {...restProps} element={element} />;
+};
+
+withElementWrapper.propTypes = {
+  StoryElement: PropTypes.element
+};