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

package/src/components/Atoms/SocialSharePopup/index.js

@@ -1,122 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./social-share-popup.m.css";
-import { CloseIcon } from "../../Svgs/close-icon";
-import { socialShareData } from "../../Molecules/SocialShareTemplate/social-share-data";
-import { getTextColor } from "../../../utils/utils";
-import { copyToClipboard } from "../../../utils/copy-link";
-
-const PopupSocialShareItem = ({ iconName, url, icon }) => {
-  if (!url) return null;
-  if (iconName === "copylink") {
-    return (
-      <li styleName="icon-wrapper" data-testid={`popup-${iconName}`}>
-        <a
-          onClick={() => copyToClipboard(url)}
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="copylink-social-icon">
-          {icon}
-          <div className="copied-msg hidden">Copied</div>
-        </a>
-      </li>
-    );
-  }
-  return (
-    <li styleName="icon-wrapper" data-testid={`popup-${iconName}`}>
-      <a href={url} target="_blank" rel="noopener noreferrer" aria-label={`${iconName}-social-icon`}>
-        {icon}
-      </a>
-    </li>
-  );
-};
-
-PopupSocialShareItem.propTypes = {
-  iconName: PropTypes.string,
-  url: PropTypes.string,
-  icon: PropTypes.element
-};
-
-export const SocialSharePopup = ({
-  fbUrl = "",
-  twitterUrl = "",
-  linkedinUrl = "",
-  whatsappUrl = "",
-  mailtoUrl = "",
-  redditUrl = "",
-  fullUrl = "",
-  theme,
-  closePopup = "",
-  iconType = "plain-color-svg",
-  customShare = "",
-  socialShareIconsOrder,
-  dataTestId,
-  customPopupStyle
-}) => {
-  const textColor = getTextColor(theme);
-  const iconColor = textColor === "dark" ? "#000000" : "#ffffff";
-  const iconBgColor = textColor === "dark" ? "#ffffff" : "#000000";
-  const options = {
-    fbUrl,
-    twitterUrl,
-    linkedinUrl,
-    whatsappUrl,
-    mailtoUrl,
-    redditUrl,
-    fullUrl,
-    iconColor,
-    iconBgColor,
-    iconType,
-    socialShareIconsOrder
-  };
-  const popupItemsList = socialShareData(options);
-  const getWidthStyle = () => {
-    if (socialShareIconsOrder?.length >= 6) {
-      return "content-width-6";
-    } else if (socialShareIconsOrder?.length <= 2) {
-      return "content-width-2";
-    } else {
-      return `content-width-${socialShareIconsOrder?.length}`;
-    }
-  };
-
-  const widthStyle = getWidthStyle();
-
-  return (
-    <div
-      styleName={`${customPopupStyle ? "custom-popup-wrapper" : "basic-popup-wrapper"} ${textColor} ${widthStyle}`}
-      className={customPopupStyle ? "custom-popup-wrapper" : "basic-popup-wrapper"}
-      data-testid={dataTestId}>
-      <div styleName="triangle" />
-      <div styleName="top-bar">
-        <span styleName="share-text" data-testid="share-label">
-          {customShare || "Share"}
-        </span>
-        <span styleName="close" data-testid="popup-close" onClick={closePopup}>
-          <CloseIcon color={iconColor} />
-        </span>
-      </div>
-      <ul styleName="share-icon-wrapper">
-        {popupItemsList.map(({ name, url, icon }) => (
-          <PopupSocialShareItem iconName={name} url={url} icon={icon} />
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-SocialSharePopup.propTypes = {
-  fbUrl: PropTypes.string,
-  twitterUrl: PropTypes.string,
-  linkedinUrl: PropTypes.string,
-  whatsappUrl: PropTypes.string,
-  fullUrl: PropTypes.string,
-  primaryColor: PropTypes.string,
-  closePopup: PropTypes.func,
-  theme: PropTypes.string,
-  iconType: PropTypes.string,
-  customShare: PropTypes.string,
-  socialShareIconsOrder: PropTypes.array,
-  mailtoUrl: PropTypes.string,
-  redditUrl: PropTypes.string
-};

package/src/components/Atoms/SocialSharePopup/social-share-popup.m.css

@@ -1,287 +0,0 @@
-@import "../../../../assets/stylesheets/mixins.scss";
-
-.custom-popup-wrapper,
-.basic-popup-wrapper {
-  padding: var(--arrow-spacing-m) var(--arrow-spacing-m) 40px;
-  border-radius: var(--arrow-spacing-xs) var(--arrow-spacing-xs) 0 0;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1101;
-  @include desktop {
-    padding: 14px 14px var(--arrow-spacing-s);
-    width: 274px;
-    border-radius: var(--arrow-spacing-m);
-    position: absolute;
-    top: 56px;
-    right: unset;
-    bottom: unset;
-    z-index: 99;
-  }
-}
-
-.custom-popup-wrapper {
-  @include desktop {
-    top: 54px;
-    left: unset;
-  }
-}
-
-.content-width-2 {
-  @include desktop {
-    width: 124px;
-  }
-}
-
-.content-width-3 {
-  @include desktop {
-    width: 174px;
-  }
-}
-
-.content-width-4 {
-  @include desktop {
-    width: 224px;
-  }
-}
-
-.content-width-5 {
-  @include desktop {
-    width: 274px;
-  }
-}
-
-.content-width-6 {
-  @include desktop {
-    width: 324px;
-  }
-}
-
-.dark.custom-popup-wrapper,
-.dark.basic-popup-wrapper {
-  background-color: var(--arrow-c-light);
-  box-shadow: 0px -2px 18px 0px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.light.custom-popup-wrapper,
-.light.basic-popup-wrapper {
-  background-color: var(--arrow-c-dark);
-  box-shadow: 0px -2px 18px 0px rgba(0, 0, 0, 0.14);
-  border: 1px solid rgba(0, 0, 0, 0.14);
-}
-
-.top-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--arrow-spacing-xs);
-}
-
-.close {
-  cursor: pointer;
-  padding: var(--arrow-spacing-xxs) 0 var(--arrow-spacing-xxs) var(--arrow-spacing-xxs);
-}
-
-.share-text {
-  font-size: var(--arrow-fs-s);
-  font-weight: var(--arrow-fw-semi-bold);
-}
-
-.dark .share-text {
-  color: #000000;
-}
-
-.light .share-text {
-  color: #ffffff;
-}
-
-.share-icon-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.icon-wrapper {
-  list-style-type: none;
-  cursor: pointer;
-  padding: 6px;
-  margin: 6px var(--arrow-spacing-xs) 0 0;
-  border-radius: 2px;
-  width: 44px;
-  height: 44px;
-  flex-shrink: 0;
-  @include desktop {
-    margin: 6px 0 0 6px;
-  }
-}
-
-.dark .icon-wrapper {
-  background-color: var(--arrow-c-accent5);
-}
-
-.light .icon-wrapper {
-  background-color: #ffffff12;
-}
-
-.dark.custom-popup-wrapper::before,
-.dark.basic-popup-wrapper::before {
-  color: var(--arrow-c-light);
-}
-
-.light.custom-popup-wrapper::before,
-.light.basic-popup-wrapper::before {
-  color: var(--arrow-c-dark);
-}
-
-.triangle {
-  @include desktop {
-    position: absolute;
-    width: 16px;
-    height: 14px;
-    background-color: rgba(0, 0, 0, 0.1);
-    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-    top: -13px;
-    z-index: 9;
-  }
-}
-
-.triangle::after {
-  @include desktop {
-    content: "";
-    position: absolute;
-    top: 2px;
-    width: 14px;
-    height: 12px;
-    background-color: var(--arrow-c-light);
-    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-    box-sizing: border-box;
-    z-index: -1;
-  }
-}
-
-.light .triangle {
-  background-color: rgba(0, 0, 0, 0.14);
-}
-
-.light .triangle::after {
-  background-color: var(--arrow-c-dark);
-}
-
-html[dir="ltr"] {
-  .basic-popup-wrapper .triangle {
-    @include desktop {
-      left: 32px;
-    }
-  }
-  .basic-popup-wrapper .triangle::after {
-    @include desktop {
-      left: 1px;
-    }
-  }
-
-  .basic-popup-wrapper {
-    @include desktop {
-      left: 0%;
-    }
-  }
-
-  .custom-popup-wrapper .triangle {
-    @include desktop {
-      right: 14px;
-    }
-  }
-  .custom-popup-wrapper .triangle::after {
-    @include desktop {
-      right: 1px;
-    }
-  }
-
-  .custom-popup-wrapper {
-    @include desktop {
-      right: 0;
-    }
-  }
-
-  .share-icon-wrapper :nth-child(1),
-  .share-icon-wrapper :nth-child(7) {
-    @include desktop {
-      margin-left: 0;
-    }
-  }
-}
-
-html[dir="rtl"] {
-  .basic-popup-wrapper .triangle {
-    @include desktop {
-      right: 32px;
-    }
-  }
-
-  .basic-popup-wrapper .triangle::after {
-    @include desktop {
-      right: 1px;
-    }
-  }
-
-  .icon-wrapper {
-    margin: 6px 6px 0 0;
-  }
-
-  .basic-popup-wrapper {
-    @include desktop {
-      right: 0%;
-    }
-  }
-
-  .custom-popup-wrapper .triangle {
-    @include desktop {
-      left: 14px;
-    }
-  }
-
-  .custom-popup-wrapper .triangle::after {
-    @include desktop {
-      left: 1px;
-    }
-  }
-
-  .custom-popup-wrapper {
-    @include desktop {
-      left: 0;
-    }
-  }
-
-  .share-icon-wrapper :nth-child(1),
-  .share-icon-wrapper :nth-child(7) {
-    @include desktop {
-      margin-right: 0;
-    }
-  }
-}
-
-.icon-wrapper :global(.copied-msg) {
-  position: absolute;
-  padding: 5px;
-  border-radius: 3px;
-  pointer-events: none;
-  transform: translate(-50%, -100%);
-  white-space: nowrap;
-  z-index: 1000;
-}
-
-.icon-wrapper :global(.copied-msg.hidden) {
-  display: none;
-}
-
-.dark .icon-wrapper :global(.copied-msg) {
-  background-color: #333;
-  color: white;
-}
-
-.light .icon-wrapper :global(.copied-msg) {
-  background-color: #333;
-  color: white;
-}

package/src/components/Atoms/SocialSharePopup/social-share-popup.test.js

@@ -1,101 +0,0 @@
-import * as React from "react";
-import { shallow } from "enzyme";
-import { SocialSharePopup } from "./index";
-
-describe("Social Share Template", () => {
-  it("Should render social share popup", () => {
-    const data = {
-      fbUrl: "https://www.facebook.com",
-      twitterUrl: "https://twitter.com/",
-      linkedinUrl: "https://twitter.com/",
-      whatsappUrl: "https://twitter.com/",
-      redditUrl: "https://www.reddit.com/",
-      theme: "#ffff",
-      iconType: "plain-svg",
-      closePopup: "",
-      socialShareIconsOrder: ["facebook"]
-    };
-    const wrapper = shallow(<SocialSharePopup {...data} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("Should not render facebook icon if url not passed", () => {
-    const data = {
-      fbUrl: "",
-      twitterUrl: "https://twitter.com/",
-      linkedinUrl: "https://twitter.com/",
-      whatsappUrl: "https://twitter.com/",
-      redditUrl: "https://www.reddit.com/",
-      theme: "#ffff",
-      iconType: "plain-svg",
-      closePopup: "",
-      socialShareIconsOrder: ["facebook"]
-    };
-    const wrapper = shallow(<SocialSharePopup {...data} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("Should not render twitter icon if url not passed", () => {
-    const data = {
-      fbUrl: "https://twitter.com/",
-      twitterUrl: "",
-      linkedinUrl: "https://twitter.com/",
-      whatsappUrl: "https://twitter.com/",
-      theme: "#ffff",
-      iconType: "plain-svg",
-      vertical: true,
-      closePopup: "",
-      socialShareIconsOrder: ["facebook"]
-    };
-    const wrapper = shallow(<SocialSharePopup {...data} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("Should not render whatsapp icon if url not passed", () => {
-    const data = {
-      fbUrl: "https://twitter.com/",
-      twitterUrl: "https://twitter.com/",
-      linkedinUrl: "https://twitter.com/",
-      whatsappUrl: "",
-      theme: "#ffff",
-      iconType: "plain-svg",
-      vertical: true,
-      closePopup: "",
-      socialShareIconsOrder: ["facebook"]
-    };
-    const wrapper = shallow(<SocialSharePopup {...data} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("Should not render linkedin icon if url not passed", () => {
-    const data = {
-      fbUrl: "https://twitter.com/",
-      twitterUrl: "https://twitter.com/",
-      linkedinUrl: "",
-      whatsappUrl: "https://twitter.com/",
-      theme: "#ffff",
-      iconType: "plain-svg",
-      vertical: true,
-      closePopup: "",
-      socialShareIconsOrder: ["facebook"]
-    };
-    const wrapper = shallow(<SocialSharePopup {...data} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("Should render template if theme and icon is not passed", () => {
-    const data = {
-      fbUrl: "https://twitter.com/",
-      twitterUrl: "https://twitter.com/",
-      linkedinUrl: "https://twitter.com/",
-      whatsappUrl: "https://twitter.com/",
-      theme: "",
-      iconType: "plain-svg",
-      vertical: true,
-      closePopup: "",
-      socialShareIconsOrder: ["facebook"]
-    };
-    const wrapper = shallow(<SocialSharePopup {...data} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

package/src/components/Atoms/SocialSharePopup/stories.js

@@ -1,19 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../storybook";
-import { SocialSharePopup } from "./index";
-import Readme from "./README.md";
-
-const props = {
-  fbUrl: "https://www.facebook.com",
-  fullUrl:
-    "https://ace-web.qtstage.io/anything/recent-stories/newsready-player-one-review-spielberg-spins-a-dizzying-vr-yarn",
-  iconType: "plain-svg",
-  linkedinUrl: "https://www.linkedin.com",
-  mailtoUrl:
-    "mailto:?subject=Ready%20Player%20One%20review%20%E2%80%93%20Spielberg%C2%A0&body=https%3A%2F%2Face-web.qtstage.io%2Fanything%2Frecent-stories%2Fnews%2Fready-player-one-review-spielberg-spins-a-dizzying-vr-yarn",
-  publisherUrl: undefined,
-  theme: "#ffffff",
-  title: "Ready Player One review – Spielberg ",
-  twitterUrl: "https://twitter.com"
-};
-withStore("Atoms/Social Share Popup", {}, Readme).add("default", () => <SocialSharePopup {...props} />);

package/src/components/Atoms/SponsoredLabel/index.js

@@ -1,52 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { getTextColor } from "../../../utils/utils";
-import { useSelector } from "react-redux";
-import get from "lodash.get";
-import "./sponsored-lable.m.css";
-
-export function SponsoredLabel({ story, sponsoredStoryConfig, isStoryPage }) {
-  const storyMetaData = get(story, ["metadata"], {});
-  const isSponsoredStory = storyMetaData.hasOwnProperty("sponsored-by");
-  if (!isSponsoredStory) return null;
-
-  const storySponsoredBy = get(storyMetaData, ["sponsored-by"], "");
-  const enableDarkMode = useSelector((state) => get(state, ["header", "isDarkModeEnabled"], false));
-  const {
-    sponsoredStoryPageLabel,
-    sponsoredLabelColor,
-    sponsoredLabelDarkColor,
-    sponsoredStoryRowLabel
-  } = sponsoredStoryConfig;
-
-  const sponsoredBy = sponsoredStoryPageLabel || `Sponsored by`;
-  const storyPageLabel = sponsoredBy + `: ${storySponsoredBy}`;
-  const storyRowLabel = sponsoredStoryRowLabel || "Sponsored";
-
-  const labelText = isStoryPage ? storyPageLabel : storyRowLabel;
-  const labelStyle = isStoryPage ? "story-label" : "card-label";
-
-  const lightBgColor = sponsoredLabelColor || "#E6E6E6";
-  const darkBgColor = sponsoredLabelDarkColor || "#404040";
-  const labelBgColor = enableDarkMode ? darkBgColor : lightBgColor;
-  const textColor = getTextColor(labelBgColor) === "light" ? "#ffffff" : "#000000";
-
-  return (
-    <div
-      style={{ background: labelBgColor, color: textColor }}
-      styleName={`sponsored-label ${labelStyle}`}
-      data-test-id={isStoryPage ? "sponsored-tag" : "sponsored-tag-cards"}>
-      {labelText}
-    </div>
-  );
-}
-
-SponsoredLabel.propTypes = {
-  story: PropTypes.object,
-  sponsoredStoryConfig: PropTypes.object,
-  isStoryPage: PropTypes.bool
-};
-
-SponsoredLabel.defaultProps = {
-  isStoryPage: false
-};

package/src/components/Atoms/SponsoredLabel/sponsored-lable.m.css

@@ -1,17 +0,0 @@
-.sponsored-label {
-  display: flex;
-  align-items: center;
-  border-radius: var(--arrow-spacing-xxs);
-  padding: 2px var(--arrow-spacing-xxs);
-  font-size: var(--arrow-fs-tiny);
-  font-weight: 450;
-  max-width: fit-content;
-}
-
-.story-label {
-  margin: var(--arrow-spacing-xxs) 0 12px 0;
-}
-
-.card-label {
-  margin: var(--arrow-spacing-xxs) 0;
-}