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

package/src/components/Atoms/SectionTag/section.m.css

@@ -0,0 +1,53 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.section {
+  margin-bottom: var(--arrow-spacing-xxs);
+  @media (--viewport-medium) {
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+.section-borderBottomSml .border-bottom {
+  width: 20px;
+  height: 2px;
+  margin-top: var(--arrow-spacing-xxs);
+}
+
+.section-borderLeft {
+  display: flex;
+  align-items: baseline;
+
+  .border-left {
+    margin-right: var(--arrow-spacing-xs);
+    min-width: 3px;
+    max-width: 3px;
+    overflow: hidden;
+  }
+
+  .border-left::before {
+    content: "I";
+    font-family: var(--arrow-sans-serif);
+  }
+}
+
+html[dir="rtl"] {
+  .border-left {
+    margin-left: var(--arrow-spacing-xs);
+    margin-right: 0;
+  }
+}
+
+.section-solid {
+  color: var(--arrow-c-light);
+  align-self: self-start;
+  display: inline-flex;
+  padding: var(--arrow-spacing-xxs) var(--arrow-spacing-s);
+  @media (--viewport-medium) {
+    padding: var(--arrow-spacing-xs) var(--arrow-spacing-m);
+  }
+}
+.dark {
+  color: var(--arrow-c-mono2);
+}
+.light {
+  color: var(--arrow-c-invert-mono2);
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { SectionTag } from "./index";
+import { withStore, optionalSelect } from "../../../../storybook";
+import Readme from "./README.md";
+import { color } from "@storybook/addon-knobs";
+
+const story = generateStory();
+
+const defaultvalue = "#3a9fdd";
+const sectionTagBorderColor = "Section Tag Border Color";
+
+const templateStyles = {
+  Default: "",
+  Solid: "solid",
+  "Border Bottom Small": "borderBottomSml",
+  "Border Left": "borderLeft"
+};
+
+withStore("Atoms/SectionTag", {}, Readme).add("Default", () => (
+  <SectionTag
+    story={story}
+    template={optionalSelect("Section Template", templateStyles)}
+    borderColor={color(sectionTagBorderColor, defaultvalue)}
+  />
+));

package/src/components/Atoms/SocialSharePopup/README.md

@@ -0,0 +1,25 @@
+# Social Share Popup
+
+This is the Box which shows up with a list of social share fields
+
+## Usage
+
+```jsx
+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"
+};
+
+<SocialSharePopup {...props} />;
+```
+
+<!-- PROPS -->

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

@@ -0,0 +1,259 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Social Share Template Should not render facebook icon if url not passed 1`] = `
+<div
+  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
+>
+  <div
+    className="social-share-popup-m_triangle__14z72"
+  />
+  <div
+    className="social-share-popup-m_top-bar__174Um"
+  >
+    <span
+      className="social-share-popup-m_share-text__19E-F"
+      data-testid="share-label"
+    >
+      Share
+    </span>
+    <span
+      className="social-share-popup-m_close__3k-Hj"
+      data-testid="popup-close"
+      onClick=""
+    >
+      <CloseIcon
+        color="#000000"
+      />
+    </span>
+  </div>
+  <ul
+    className="social-share-popup-m_share-icon-wrapper__23U3C"
+  >
+    <PopupSocialShareItem
+      icon={
+        <Facebook
+          bgColor="#000000"
+          color="#ffffff"
+        />
+      }
+      iconName="facebook"
+      url=""
+    />
+  </ul>
+</div>
+`;
+
+exports[`Social Share Template Should not render linkedin icon if url not passed 1`] = `
+<div
+  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
+>
+  <div
+    className="social-share-popup-m_triangle__14z72"
+  />
+  <div
+    className="social-share-popup-m_top-bar__174Um"
+  >
+    <span
+      className="social-share-popup-m_share-text__19E-F"
+      data-testid="share-label"
+    >
+      Share
+    </span>
+    <span
+      className="social-share-popup-m_close__3k-Hj"
+      data-testid="popup-close"
+      onClick=""
+    >
+      <CloseIcon
+        color="#000000"
+      />
+    </span>
+  </div>
+  <ul
+    className="social-share-popup-m_share-icon-wrapper__23U3C"
+  >
+    <PopupSocialShareItem
+      icon={
+        <Facebook
+          bgColor="#000000"
+          color="#ffffff"
+        />
+      }
+      iconName="facebook"
+      url="https://twitter.com/"
+    />
+  </ul>
+</div>
+`;
+
+exports[`Social Share Template Should not render twitter icon if url not passed 1`] = `
+<div
+  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
+>
+  <div
+    className="social-share-popup-m_triangle__14z72"
+  />
+  <div
+    className="social-share-popup-m_top-bar__174Um"
+  >
+    <span
+      className="social-share-popup-m_share-text__19E-F"
+      data-testid="share-label"
+    >
+      Share
+    </span>
+    <span
+      className="social-share-popup-m_close__3k-Hj"
+      data-testid="popup-close"
+      onClick=""
+    >
+      <CloseIcon
+        color="#000000"
+      />
+    </span>
+  </div>
+  <ul
+    className="social-share-popup-m_share-icon-wrapper__23U3C"
+  >
+    <PopupSocialShareItem
+      icon={
+        <Facebook
+          bgColor="#000000"
+          color="#ffffff"
+        />
+      }
+      iconName="facebook"
+      url="https://twitter.com/"
+    />
+  </ul>
+</div>
+`;
+
+exports[`Social Share Template Should not render whatsapp icon if url not passed 1`] = `
+<div
+  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
+>
+  <div
+    className="social-share-popup-m_triangle__14z72"
+  />
+  <div
+    className="social-share-popup-m_top-bar__174Um"
+  >
+    <span
+      className="social-share-popup-m_share-text__19E-F"
+      data-testid="share-label"
+    >
+      Share
+    </span>
+    <span
+      className="social-share-popup-m_close__3k-Hj"
+      data-testid="popup-close"
+      onClick=""
+    >
+      <CloseIcon
+        color="#000000"
+      />
+    </span>
+  </div>
+  <ul
+    className="social-share-popup-m_share-icon-wrapper__23U3C"
+  >
+    <PopupSocialShareItem
+      icon={
+        <Facebook
+          bgColor="#000000"
+          color="#ffffff"
+        />
+      }
+      iconName="facebook"
+      url="https://twitter.com/"
+    />
+  </ul>
+</div>
+`;
+
+exports[`Social Share Template Should render social share popup 1`] = `
+<div
+  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
+>
+  <div
+    className="social-share-popup-m_triangle__14z72"
+  />
+  <div
+    className="social-share-popup-m_top-bar__174Um"
+  >
+    <span
+      className="social-share-popup-m_share-text__19E-F"
+      data-testid="share-label"
+    >
+      Share
+    </span>
+    <span
+      className="social-share-popup-m_close__3k-Hj"
+      data-testid="popup-close"
+      onClick=""
+    >
+      <CloseIcon
+        color="#000000"
+      />
+    </span>
+  </div>
+  <ul
+    className="social-share-popup-m_share-icon-wrapper__23U3C"
+  >
+    <PopupSocialShareItem
+      icon={
+        <Facebook
+          bgColor="#000000"
+          color="#ffffff"
+        />
+      }
+      iconName="facebook"
+      url="https://www.facebook.com"
+    />
+  </ul>
+</div>
+`;
+
+exports[`Social Share Template Should render template if theme and icon is not passed 1`] = `
+<div
+  className="basic-popup-wrapper social-share-popup-m_basic-popup-wrapper__34h5Q social-share-popup-m_dark__26Igp social-share-popup-m_content-width-2__mid1m"
+>
+  <div
+    className="social-share-popup-m_triangle__14z72"
+  />
+  <div
+    className="social-share-popup-m_top-bar__174Um"
+  >
+    <span
+      className="social-share-popup-m_share-text__19E-F"
+      data-testid="share-label"
+    >
+      Share
+    </span>
+    <span
+      className="social-share-popup-m_close__3k-Hj"
+      data-testid="popup-close"
+      onClick=""
+    >
+      <CloseIcon
+        color="#000000"
+      />
+    </span>
+  </div>
+  <ul
+    className="social-share-popup-m_share-icon-wrapper__23U3C"
+  >
+    <PopupSocialShareItem
+      icon={
+        <Facebook
+          bgColor="#000000"
+          color="#ffffff"
+        />
+      }
+      iconName="facebook"
+      url="https://twitter.com/"
+    />
+  </ul>
+</div>
+`;

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

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