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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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