@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.8

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

@@ -0,0 +1,100 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+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";
+var _styleModuleImportMap = {
+  "./social-share-popup.m.css": {
+    "share-popup-wrapper": "social-share-popup-m_share-popup-wrapper__GEJqD",
+    "light": "social-share-popup-m_light__gQmxf",
+    "dark": "social-share-popup-m_dark__26Igp",
+    "share-popup": "social-share-popup-m_share-popup__QRt3l social-share-popup-m_share-popup-wrapper__GEJqD",
+    "social-wrapper": "social-share-popup-m_social-wrapper__1lPzr",
+    "social-icon-wrapper": "social-share-popup-m_social-icon-wrapper__36jyV",
+    "wrapper": "social-share-popup-m_wrapper__3Ytce",
+    "top-bar": "social-share-popup-m_top-bar__174Um",
+    "share-text": "social-share-popup-m_share-text__19E-F",
+    "close": "social-share-popup-m_close__3k-Hj",
+    "social-icon": "social-share-popup-m_social-icon__2a4nT",
+    "social-text": "social-share-popup-m_social-text__1QPXb"
+  }
+};
+
+var popupSocialShareItem = function popupSocialShareItem(url, icon, text, index) {
+  return url ? /*#__PURE__*/React.createElement("li", {
+    className: "social-share-popup-m_social-icon-wrapper__36jyV",
+    "data-testid": text,
+    key: "popup-item-".concat(index)
+  }, /*#__PURE__*/React.createElement("a", {
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "social-share-popup-m_social-wrapper__1lPzr",
+    "aria-label": "social-icon"
+  }, icon, /*#__PURE__*/React.createElement("span", {
+    className: "social-share-popup-m_social-text__1QPXb"
+  }, text))) : null;
+};
+
+export var SocialSharePopup = function SocialSharePopup(_ref) {
+  var _ref$fbUrl = _ref.fbUrl,
+      fbUrl = _ref$fbUrl === void 0 ? "" : _ref$fbUrl,
+      _ref$twitterUrl = _ref.twitterUrl,
+      twitterUrl = _ref$twitterUrl === void 0 ? "" : _ref$twitterUrl,
+      _ref$linkedinUrl = _ref.linkedinUrl,
+      linkedinUrl = _ref$linkedinUrl === void 0 ? "" : _ref$linkedinUrl,
+      _ref$whatsappUrl = _ref.whatsappUrl,
+      whatsappUrl = _ref$whatsappUrl === void 0 ? "" : _ref$whatsappUrl,
+      theme = _ref.theme,
+      _ref$closePopup = _ref.closePopup,
+      closePopup = _ref$closePopup === void 0 ? "" : _ref$closePopup,
+      _ref$iconType = _ref.iconType,
+      iconType = _ref$iconType === void 0 ? "plain-color-svg" : _ref$iconType;
+  var textColor = getTextColor(theme);
+  var iconColor = textColor === "dark" ? "#000000" : "#ffffff";
+  var options = {
+    fbUrl: fbUrl,
+    twitterUrl: twitterUrl,
+    linkedinUrl: linkedinUrl,
+    whatsappUrl: whatsappUrl,
+    iconColor: iconColor,
+    iconType: iconType
+  };
+  var popupItemsList = socialShareData(options);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _getClassName("share-popup-wrapper ".concat(textColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "social-share-popup-m_share-popup__QRt3l social-share-popup-m_share-popup-wrapper__GEJqD"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "social-share-popup-m_top-bar__174Um"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "social-share-popup-m_share-text__19E-F"
+  }, "Share via"), /*#__PURE__*/React.createElement("span", {
+    className: "social-share-popup-m_close__3k-Hj",
+    onClick: closePopup
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
+    color: iconColor
+  }))), /*#__PURE__*/React.createElement("ul", {
+    className: "social-share-popup-m_wrapper__3Ytce"
+  }, popupItemsList.map(function (_ref2, index) {
+    var url = _ref2.url,
+        icon = _ref2.icon,
+        text = _ref2.text,
+        bgColor = _ref2.bgColor,
+        alt = _ref2.alt;
+    return popupSocialShareItem(url, icon, text, bgColor, alt);
+  }))));
+};
+SocialSharePopup.propTypes = {
+  fbUrl: PropTypes.string,
+  twitterUrl: PropTypes.string,
+  linkedinUrl: PropTypes.string,
+  whatsappUrl: PropTypes.string,
+  grey: PropTypes.string,
+  primaryColor: PropTypes.string,
+  closePopup: PropTypes.bool,
+  theme: PropTypes.string,
+  iconType: PropTypes.string
+};

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

@@ -0,0 +1,109 @@
+@import "../../../stylesheets/mixins.scss";
+.share-popup-wrapper {
+  z-index: var(--zIndex-social-popup);
+}
+
+.light.share-popup-wrapper {
+  background-color: var(--arrow-c-dark);
+}
+
+.dark.share-popup-wrapper {
+  background-color: var(--arrow-c-light);
+}
+
+.share-popup {
+  composes: share-popup-wrapper;
+  padding: var(--arrow-spacing-l);
+}
+
+.social-wrapper {
+  display: flex;
+  flex-direction: row;
+  padding: var(--arrow-fs-tiny) 0;
+  align-items: center;
+}
+
+.dark .social-icon-wrapper {
+  border-bottom: 1px solid var(--arrow-c-mono7);
+}
+
+.light .social-icon-wrapper {
+  border-bottom: 1px solid var(--arrow-c-invert-mono7);
+}
+
+.wrapper {
+  list-style: none;
+}
+
+.dark .wrapper > :last-child,
+.light .wrapper > :last-child {
+  border-bottom: unset;
+}
+
+.light .share-popup {
+  @include tablet {
+    border: solid 1px var(--arrow-c-invert-mono7);
+  }
+}
+
+.dark .share-popup {
+  @include tablet {
+    border: solid 1px var(--arrow-c-mono7);
+  }
+}
+
+.top-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.share-text {
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-2);
+  margin-bottom: var(--arrow-spacing-s);
+}
+
+.close {
+  position: absolute;
+  top: var(--arrow-spacing-m);
+  right: var(--arrow-spacing-m);
+}
+
+.social-icon {
+  border-radius: 50%;
+  width: var(--arrow-fs-xl);
+  height: var(--arrow-fs-xl);
+  padding: var(--arrow-spacing-xxs);
+}
+
+.social-text {
+  padding-left: var(--arrow-fs-xs);
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-2);
+  color: var(--arrow-c-mono2);
+}
+
+.light .social-text,
+.light .share-text {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.dark .social-text,
+.dark .share-text {
+  color: var(--arrow-c-mono2);
+}
+
+html[dir="rtl"] {
+  .social-text {
+    padding-left: 0;
+    padding-right: var(--arrow-fs-xs);
+  }
+
+  .close {
+    left: var(--arrow-spacing-m);
+    right: initial;
+  }
+}

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

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

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { SocialSharePopup } from "./index";
+import Readme from "./README.md";
+var 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", function () {
+  return /*#__PURE__*/React.createElement(SocialSharePopup, props);
+});

package/esm/components/Atoms/StoryElements/AlsoRead/README.md

@@ -0,0 +1,49 @@
+# AlsoRead
+
+Component to display the also read element.
+
+## Usage
+
+#### AlsoRead story element with default template
+
+```jsx
+<AlsoRead story={story} element={element} template="default" />
+```
+
+#### AlsoRead story element with image right align template
+
+```jsx
+<AlsoRead story={story} element={element} template="imageRightAlign" />
+```
+
+#### AlsoRead story element with text left align template
+
+```jsx
+<AlsoRead element={element} template="textLeftAlign" />
+```
+
+#### AlsoRead story element with custom title
+
+```jsx
+const css = { title: "Headline" };
+
+<AlsoRead story={story} element={element} template="textLeftAlign" css={css} />;
+```
+
+#### AlsoRead story element with text color
+
+```jsx
+const css = { textcolor: "#333333" };
+
+<AlsoRead story={story} element={element} template="default" css={css} />;
+```
+
+#### Replace default also read element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+
+<AlsoRead element={element} render={customTemplate} />;
+```
+
+<!-- PROPS -->

package/esm/components/Atoms/StoryElements/AlsoRead/also-read.m.css

@@ -0,0 +1,135 @@
+@value viewports: "../../../../stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.card-image img {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}
+
+.default-text {
+  font-family: var(--arrow-typeface-secondary);
+}
+
+.alsoread-textLeftAlign .default-text,
+.alsoread-imageRightAlign .default-text {
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-3);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-s);
+  }
+}
+
+.headline {
+  line-height: var(--arrow-lh-3);
+  font-weight: var(--arrow-fw-bold);
+  font-family: var(--arrow-typeface-primary);
+}
+
+.alsoread-default .headline {
+  padding-top: var(--arrow-spacing-xs);
+  font-size: var(--arrow-fs-s);
+  color: var(--arrow-c-dark);
+  @media (min-width: mobile) {
+    padding-top: 0;
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.alsoread-textLeftAlign .headline {
+  margin-top: var(--arrow-spacing-xs);
+  font-size: var(--arrow-fs-m);
+  color: var(--arrow-c-brand1);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.alsoread-imageRightAlign .headline {
+  font-size: var(--arrow-fs-m);
+  margin-right: var(--arrow-spacing-m);
+  color: var(--arrow-c-dark);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.card-image-wrapper {
+  position: relative;
+}
+
+.alsoread-default .card-image-wrapper {
+  @media (min-width: mobile) {
+    flex-basis: 30%;
+    margin-right: var(--arrow-spacing-m);
+  }
+}
+
+.card-image {
+  display: block;
+  position: relative;
+}
+
+.alsoread-imageRightAlign .card-image,
+.alsoread-imageRightAlign .card-image-wrapper .image {
+  padding-top: 75%;
+  @media (min-width: mobile) {
+    padding-top: 56.25%;
+  }
+}
+
+.alsoread-default {
+  border: solid 1px var(--arrow-c-mono5);
+  display: block;
+  padding: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    display: flex;
+  }
+}
+
+.alsoread-imageRightAlign .content-wrapper {
+  display: flex;
+  margin-top: var(--arrow-spacing-xs);
+}
+
+.alsoread-default .content-wrapper {
+  @media (min-width: mobile) {
+    flex-basis: 70%;
+  }
+}
+
+.alsoread-default .card-image,
+.alsoread .card-image-wrapper .image,
+.alsoread-default .card-image-wrapper .image {
+  padding-top: 56.25%;
+}
+
+.card-image-wrapper .image div {
+  background: var(--arrow-c-mono6);
+}
+
+.alsoread-imageRightAlign .card-image-wrapper .image :global(.arr--fallback-image),
+.alsoread-imageRightAlign .card-image-wrapper .image,
+.alsoread-imageRightAlign .card-image-wrapper .card-image {
+  width: 100px;
+  height: 75px;
+  @media (min-width: mobile) {
+    width: 160px;
+    height: 90px;
+  }
+}
+html[dir="rtl"] {
+  .content-wrapper {
+    margin-right: var(--arrow-spacing-m);
+  }
+  .card-image-wrapper {
+    margin-right: 0;
+  }
+}
+.dark {
+  color: var(--arrow-c-mono1);
+}
+.light {
+  color: var(--arrow-c-invert-mono1);
+}

package/esm/components/Atoms/StoryElements/AlsoRead/also-read.test.js

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData, generateStory, generateStore } from "../../../Fixture";
+import { AlsoRead } from "./index";
+import { Provider } from "react-redux";
+import { Link } from "@quintype/components";
+var element = generateStoryElementData("also-read");
+var story = generateStory();
+describe("Alsoread Story Element", function () {
+  it("Should render default template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AlsoRead, {
+      story: story,
+      element: element,
+      template: "default"
+    })));
+    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-default/);
+  });
+  it("Should render image right align template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AlsoRead, {
+      story: story,
+      element: element,
+      template: "imageRightAlign"
+    })));
+    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-imageRightAlign/);
+  });
+  it("Should render text left align template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AlsoRead, {
+      story: story,
+      element: element,
+      template: "textLeftAlign"
+    })));
+    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-textLeftAlign/);
+  });
+  it("Should render default template with fallback image", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AlsoRead, {
+      element: element,
+      template: "default",
+      css: {
+        textColor: "#3333"
+      }
+    })));
+    expect(wrapper.html()).toBe('<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-default__3cYER "><div class="also-read-m_card-image-wrapper__3GFzu"><div class="arr--fallback-also-read also-read-m_image__2jdRP"><div class="arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"><figure class="arr--fallback-svg fallback-m_fallback-svg__tK9fL"><svg width="40" height="30" viewBox="0 0 102 76" version="1.1"><g id="demo-home-copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-377.000000, -314.000000)"><g id="Group-13" transform="translate(377.000000, 314.000000)"><path d="M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z" id="Combined-Shape" fill="#99B0CB" fill-rule="nonzero"></path><rect id="Rectangle-19" stroke="#99B0CB" stroke-width="3" x="1.5" y="1.5" width="99" height="73" rx="3"></rect></g></g></svg></figure></div></div></div><div class="also-read-m_content-wrapper__26AZX"><div class="also-read-m_headline__VzF-c" style="color:#3333">How is the coronavirus impacting people with disabilities?</div></div></a>');
+  });
+  it("Should render default template with text color", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AlsoRead, {
+      story: story,
+      element: element,
+      template: "default",
+      css: {
+        textColor: "#3333"
+      }
+    })));
+    expect(wrapper.html()).toBe('<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-default__3cYER " href="https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities"><div class="also-read-m_card-image-wrapper__3GFzu"><figure class="also-read-m_card-image__3CwAv"><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" aspect-ratio="16,9" alt="hero image caption" class="qt-image"/></figure></div><div class="also-read-m_content-wrapper__26AZX"><div class="also-read-m_headline__VzF-c" style="color:#3333">How is the coronavirus impacting people with disabilities?</div></div></a>');
+  });
+  it("Should render text left align template with custom title", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AlsoRead, {
+      story: story,
+      element: element,
+      template: "textLeftAlign",
+      opts: {
+        title: "Also-Read"
+      }
+    })));
+    expect(wrapper.html()).toBe('<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-textLeftAlign__S0Dxe " href="https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities"><div class="also-read-m_default-text__hp2dp also-read-m_dark__1pUib">Also-Read</div><div class="also-read-m_content-wrapper__26AZX"><div class="also-read-m_headline__VzF-c" style="color:dark">How is the coronavirus impacting people with disabilities?</div></div></a>');
+  });
+  it("Should render custom template", function () {
+    // eslint-disable-next-line react/prop-types
+    var customTemplate = function customTemplate(_ref) {
+      var element = _ref.element;
+      return /*#__PURE__*/React.createElement("h3", {
+        dangerouslySetInnerHTML: {
+          __html: element.text
+        }
+      });
+    };
+
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AlsoRead, {
+      element: element,
+      render: customTemplate
+    })));
+    expect(wrapper.html()).toBe("<h3>How is the coronavirus impacting people with disabilities?</h3>");
+  });
+});