@quintype/arrow 3.15.1-perf.3 → 3.15.1-perf.7

package/esm/components/Molecules/SocialShareTemplate/index.js

@@ -0,0 +1,164 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { socialShareData } from "./social-share-data";
+import { SocialSharePopup } from "../../Atoms/SocialSharePopup";
+import "./social-share-template.m.css";
+import { CloseIcon } from "../../Svgs/close-icon";
+import { ShareIcon } from "../../Svgs/share-icon";
+import { getTextColor } from "../../../utils/utils";
+import { camelCase } from "lodash";
+var _styleModuleImportMap = {
+  "./social-share-template.m.css": {
+    "desktop-view": "social-share-template-m_desktop-view__3TmkO",
+    "tablet-view": "social-share-template-m_tablet-view__kATzi",
+    "wrapper": "social-share-template-m_wrapper__1wXin",
+    "horizontal": "social-share-template-m_horizontal__1c9Kt",
+    "vertical": "social-share-template-m_vertical__VU5JY",
+    "light": "social-share-template-m_light__3-V_k",
+    "dark": "social-share-template-m_dark__1lmTM",
+    "icon": "social-share-template-m_icon__1Mnu5",
+    "open": "social-share-template-m_open__3xObA",
+    "popup-wrapper": "social-share-template-m_popup-wrapper__1Zv3e",
+    "popup-open": "social-share-template-m_popup-open__21UNo",
+    "overlay": "social-share-template-m_overlay__1nBp-",
+    "tablet-view-popup": "social-share-template-m_tablet-view-popup__1hXU9"
+  }
+};
+
+var ShareItem = function ShareItem(_ref) {
+  var name = _ref.name,
+      url = _ref.url,
+      icon = _ref.icon,
+      dataTestId = _ref.dataTestId;
+  return url ? /*#__PURE__*/React.createElement("li", {
+    "data-testid": dataTestId,
+    className: "social-share-template-m_icon__1Mnu5"
+  }, /*#__PURE__*/React.createElement("a", {
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "data-share-icon": name,
+    "aria-label": "share-icon"
+  }, icon)) : null;
+};
+
+ShareItem.propTypes = {
+  name: PropTypes.string,
+  url: PropTypes.string,
+  icon: PropTypes.node,
+  dataTestId: PropTypes.string
+};
+
+function getActionIcon(open, color) {
+  if (!open) return /*#__PURE__*/React.createElement(ShareIcon, {
+    color: color
+  });
+  return /*#__PURE__*/React.createElement(CloseIcon, {
+    color: color
+  });
+}
+
+export var SocialShareTemplate = function SocialShareTemplate(props) {
+  var _props$fbUrl = props.fbUrl,
+      fbUrl = _props$fbUrl === void 0 ? "" : _props$fbUrl,
+      _props$twitterUrl = props.twitterUrl,
+      twitterUrl = _props$twitterUrl === void 0 ? "" : _props$twitterUrl,
+      _props$linkedinUrl = props.linkedinUrl,
+      linkedinUrl = _props$linkedinUrl === void 0 ? "" : _props$linkedinUrl,
+      _props$whatsappUrl = props.whatsappUrl,
+      whatsappUrl = _props$whatsappUrl === void 0 ? "" : _props$whatsappUrl,
+      _props$vertical = props.vertical,
+      vertical = _props$vertical === void 0 ? false : _props$vertical,
+      theme = props.theme,
+      _props$iconType = props.iconType,
+      iconType = _props$iconType === void 0 ? "plain-color-svg" : _props$iconType,
+      _props$open = props.open,
+      open = _props$open === void 0 ? false : _props$open;
+  if (!fbUrl && !twitterUrl && !linkedinUrl && !whatsappUrl) return null;
+  var iconShade = getTextColor(theme);
+  var iconColor = iconShade === "dark" ? "#000000" : "#ffffff";
+  var options = {
+    fbUrl: fbUrl,
+    twitterUrl: twitterUrl,
+    linkedinUrl: linkedinUrl,
+    whatsappUrl: whatsappUrl,
+    iconColor: iconColor,
+    iconType: iconType
+  };
+  var iconsList = socialShareData(options);
+
+  var _useState = useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var verticalShare = vertical ? "vertical" : "horizontal";
+  useEffect(function () {
+    return setIsOpen(open);
+  }, [open]);
+
+  var shareIcon = function shareIcon() {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "social-share-template-m_icon__1Mnu5",
+      key: "horizontal-0"
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: clickHandler
+    }, getActionIcon(isOpen, iconColor)));
+  };
+
+  var clickHandler = function clickHandler() {
+    setIsOpen(!isOpen);
+  };
+
+  var popUpWrapper = function popUpWrapper() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "social-share-template-m_tablet-view__kATzi"
+    }, !isOpen && /*#__PURE__*/React.createElement("ul", {
+      className: _getClassName("wrapper ".concat(isOpen ? "open" : ""), _styleModuleImportMap)
+    }, shareIcon()), isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "social-share-template-m_overlay__1nBp-",
+      onClick: clickHandler
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "arr--popup " + _getClassName("popup-wrapper ".concat(isOpen ? "popup-open" : ""), _styleModuleImportMap)
+    }, /*#__PURE__*/React.createElement(SocialSharePopup, {
+      fbUrl: fbUrl,
+      twitterUrl: twitterUrl,
+      linkedinUrl: linkedinUrl,
+      whatsappUrl: whatsappUrl,
+      iconType: iconType,
+      theme: theme,
+      closePopup: function closePopup() {
+        setIsOpen(false);
+      }
+    })))));
+  };
+
+  var popupStyle = !isOpen && vertical ? "tablet-view-popup" : "";
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": verticalShare,
+    className: "arr--share " + _getClassName("".concat(iconShade, " ").concat(verticalShare, " ").concat(popupStyle), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "social-share-template-m_desktop-view__3TmkO"
+  }, /*#__PURE__*/React.createElement("ul", {
+    "data-test-id": camelCase(iconType),
+    className: "desktop-share-wrapper " + _getClassName("wrapper ".concat(isOpen ? "open" : ""), _styleModuleImportMap)
+  }, shareIcon(), iconsList.map(function (iconData, index) {
+    return /*#__PURE__*/React.createElement(ShareItem, _extends({}, iconData, {
+      key: iconData.name,
+      dataTestId: "card-share-".concat(index)
+    }));
+  }))), popUpWrapper());
+};
+SocialShareTemplate.propTypes = {
+  fbUrl: PropTypes.string,
+  twitterUrl: PropTypes.string,
+  linkedinUrl: PropTypes.string,
+  whatsappUrl: PropTypes.string,
+  vertical: PropTypes.bool,
+  theme: PropTypes.string,
+  iconType: PropTypes.string,
+  open: PropTypes["boolean"]
+};

package/esm/components/Molecules/SocialShareTemplate/social-share-data.js

@@ -0,0 +1,90 @@
+import React from "react";
+import { Twitter } from "../../Svgs/SocialIcons/twitter";
+import { Facebook } from "../../Svgs/SocialIcons/facebook";
+import { LinkedIn } from "../../Svgs/SocialIcons/linkedin";
+import { WhatsApp } from "../../Svgs/SocialIcons/whatsapp";
+
+var getSocialIcons = function getSocialIcons(color, iconType) {
+  switch (iconType) {
+    case "plain-color-svg":
+      return {
+        facebook: /*#__PURE__*/React.createElement(Facebook, {
+          key: iconType
+        }),
+        twitter: /*#__PURE__*/React.createElement(Twitter, {
+          key: iconType
+        }),
+        linkedin: /*#__PURE__*/React.createElement(LinkedIn, {
+          key: iconType
+        }),
+        whatsapp: /*#__PURE__*/React.createElement(WhatsApp, {
+          key: iconType
+        })
+      };
+
+    default:
+      return {
+        facebook: /*#__PURE__*/React.createElement(Facebook, {
+          color: color,
+          key: iconType
+        }),
+        twitter: /*#__PURE__*/React.createElement(Twitter, {
+          color: color,
+          key: iconType
+        }),
+        linkedin: /*#__PURE__*/React.createElement(LinkedIn, {
+          color: color,
+          key: iconType
+        }),
+        whatsapp: /*#__PURE__*/React.createElement(WhatsApp, {
+          color: color,
+          key: iconType
+        })
+      };
+  }
+};
+
+export var socialShareData = function socialShareData(_ref) {
+  var fbUrl = _ref.fbUrl,
+      twitterUrl = _ref.twitterUrl,
+      linkedinUrl = _ref.linkedinUrl,
+      whatsappUrl = _ref.whatsappUrl,
+      iconColor = _ref.iconColor,
+      _ref$iconType = _ref.iconType,
+      iconType = _ref$iconType === void 0 ? "plain-svg" : _ref$iconType;
+  var socialIcons = getSocialIcons(iconColor, iconType);
+
+  var getOptions = function getOptions() {
+    return [{
+      name: "facebook",
+      url: fbUrl,
+      icon: socialIcons["facebook"],
+      text: "Facebook",
+      bgColor: "#4e71a8",
+      alt: "fb icon"
+    }, {
+      name: "twitter",
+      url: twitterUrl,
+      icon: socialIcons["twitter"],
+      text: "Twitter",
+      bgColor: "#1db7eb",
+      alt: "twitter icon"
+    }, {
+      name: "linkedin",
+      url: linkedinUrl,
+      icon: socialIcons["linkedin"],
+      text: "LinkedIn",
+      bgColor: "#0077B5",
+      alt: "linkedin icon"
+    }, {
+      name: "whatsapp",
+      url: whatsappUrl,
+      icon: socialIcons["whatsapp"],
+      text: "Whatsapp",
+      bgColor: "#25d366",
+      alt: "whatsapp share"
+    }];
+  };
+
+  return getOptions();
+};

package/esm/components/Molecules/SocialShareTemplate/social-share-template.m.css

@@ -0,0 +1,174 @@
+@import "../../../../assets/stylesheets/mixins.scss";
+
+.desktop-view {
+  display: none;
+  @include desktop {
+    display: flex;
+  }
+}
+
+.tablet-view {
+  @include desktop {
+    display: none;
+  }
+}
+.wrapper {
+  list-style: none;
+  align-items: center;
+  transition: all 0.3s;
+  z-index: var(--z-index-1);
+  flex-direction: row-reverse;
+  overflow: hidden;
+}
+
+.horizontal .wrapper {
+  display: flex;
+  max-width: var(--arrow-fs-big);
+  @include desktop {
+    max-width: 120px;
+  }
+}
+
+.vertical .wrapper {
+  flex-direction: column;
+  border-radius: 50%;
+  max-height: var(--arrow-fs-big);
+  @include desktop {
+    position: inherit;
+    right: var(--arrow-spacing-l);
+    border-radius: unset;
+    max-height: 132px;
+  }
+}
+
+.light.vertical .wrapper {
+  background-color: var(--arrow-c-dark);
+  box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.17);
+  @include desktop {
+    background-color: inherit;
+    box-shadow: unset;
+  }
+}
+
+.dark.vertical .wrapper {
+  background-color: var(--arrow-c-light);
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.17);
+  @include desktop {
+    background-color: inherit;
+    box-shadow: unset;
+  }
+}
+
+.icon {
+  padding: var(--arrow-spacing-xs);
+}
+
+.wrapper.open {
+  @include desktop {
+    border-radius: var(--arrow-spacing-xxs);
+  }
+}
+
+.light .wrapper.open {
+  @include desktop {
+    border: solid 0.6px var(--arrow-c-invert-mono7);
+  }
+}
+
+.dark .wrapper.open {
+  @include desktop {
+    border: solid 0.6px var(--arrow-c-mono7);
+  }
+}
+
+.horizontal .wrapper.open {
+  @include desktop {
+    max-width: 240px;
+  }
+}
+
+.vertical .wrapper.open {
+  @include desktop {
+    max-height: 240px;
+  }
+}
+
+.icon:hover {
+  @include tablet {
+    background-color: var(--arrow-c-mono7);
+    border-radius: 50%;
+  }
+}
+
+.popup-wrapper {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  @include tablet {
+    position: absolute;
+    width: 328px;
+  }
+}
+
+.popup-wrapper.popup-open {
+  @include mobile {
+    transition: transform 0.6s;
+  }
+  @include tablet {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%, -50%);
+  }
+}
+
+html[dir="rtl"] {
+  .popup-wrapper.popup-open {
+    @include tablet {
+      right: 50%;
+      transform: translate(50%, -50%);
+      -ms-transform: translateX(50%) translateY(-50%);
+      -webkit-transform: translate(50%, -50%);
+    }
+  }
+}
+
+.overlay {
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1100;
+  overflow-y: scroll;
+  position: fixed;
+  @include desktop {
+    position: initial;
+  }
+}
+
+.light .overlay {
+  background-color: rgba(13, 13, 13, 0.77);
+}
+
+.dark .overlay {
+  background-color: rgba(255, 255, 255, 0.77);
+}
+
+.tablet-view-popup:global(.arr--share) {
+  position: sticky;
+  position: -webkit-sticky;
+  bottom: 56px;
+  height: 0;
+  text-align: center;
+  @include tablet {
+    right: 24px;
+    @include desktop {
+      bottom: unset;
+      height: unset;
+      text-align: unset;
+    }
+  }
+}

package/esm/components/Molecules/SocialShareTemplate/social-share-template.test.js

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { shallow } from "enzyme";
+import { SocialShareTemplate } from "./index";
+describe("Social Share Template", function () {
+  it("Should render horizontal social share template", 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"
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(SocialShareTemplate, data));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("Should render vertical social share template", 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",
+      vertical: true
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(SocialShareTemplate, data));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("Should not render social share template if url is not passed", function () {
+    var data = {
+      fbUrl: "",
+      twitterUrl: "",
+      linkedinUrl: "",
+      whatsappUrl: "",
+      theme: "#ffff",
+      iconType: "plain-svg",
+      vertical: true
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(SocialShareTemplate, 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",
+      vertical: true
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(SocialShareTemplate, 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
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(SocialShareTemplate, 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
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(SocialShareTemplate, 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
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(SocialShareTemplate, 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
+    };
+    var wrapper = shallow( /*#__PURE__*/React.createElement(SocialShareTemplate, data));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/esm/components/Molecules/SocialShareTemplate/stories.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { SocialShareTemplate } from "./index";
+import Readme from "./README.md";
+import { boolean as _boolean } from "@storybook/addon-knobs";
+withStore("Molecules/Social Share Template", {}, Readme).add("Horizontal", function () {
+  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"
+  };
+  return /*#__PURE__*/React.createElement(SocialShareTemplate, _extends({}, props, {
+    open: _boolean("open", false)
+  }));
+}).add("Vertical", function () {
+  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",
+    vertical: true
+  };
+  return /*#__PURE__*/React.createElement(SocialShareTemplate, _extends({}, props, {
+    open: _boolean("open", false)
+  }));
+});

package/esm/components/Molecules/StoryCard/README.md

@@ -0,0 +1,75 @@
+# StoryCard
+
+The _StoryCard_ component is a basic [molecule](https://bradfrost.com/blog/post/atomic-web-design/#molecules) used to represent a story within a Row.
+
+The _StoryCard_ can be composible based on it's children(Atoms) or using StoryCardContent component(molecule).
+
+## Usage
+
+### Default Story Card
+
+```jsx
+<StoryCard story={story} />
+```
+
+### Horizontal Story Card
+
+```jsx
+<StoryCard story={story} isHorizontal />
+```
+
+### Story Card w/ Image & Headline
+
+```jsx
+<StoryCard story={story}>
+  <HeroImage story={story} />
+  <Headline story={story} />
+</StoryCard>
+```
+
+### Story Card w/ Image & Timestamp
+
+```jsx
+<StoryCard story={story}>
+  <Headline story={story} />
+  <TimeStamp story={story} />
+</StoryCard>
+```
+
+### Story Card w/ Headline, Author & Subheadline
+
+```jsx
+<StoryCard story={story}>
+  <Headline story={story} />
+  <Author story={story} />
+  <Subheadline story={story} />
+</StoryCard>
+```
+
+### Story Card w/ Image, Headline, Author+Timestamp & Subheadline
+
+```jsx
+<StoryCard story={story}>
+  <HeroImage story={story} />
+  <Headline story={story} />
+  <AuthorWithTime story={story} />
+  <Subheadline story={story} />
+</StoryCard>
+```
+
+### Story Card using Story content
+
+```jsx
+<StoryCard story={story}>
+  <HeroImage story={story} />
+  <StorycardContent story={story} />
+</StoryCard>
+```
+
+### Story Card using aspect ratio
+
+```jsx
+<StoryCard story={story} aspectRatio={[4, 3]} />
+```
+
+<!-- PROPS -->

package/esm/components/Molecules/StoryCard/READMEBGIMAGE.md

@@ -0,0 +1,25 @@
+# StoryCard with background image
+
+The _StoryCard_ component with background image used to represent a story within a Row.
+
+The _StoryCard_ can be composible based on it's children(Atoms, molecule).
+
+### Story Card with background image
+
+```jsx
+<StoryCard story={story} useImageAsBackground>
+  <HeroImage story={story} />
+  <StorycardContent story={story} />
+</StoryCard>
+```
+
+### Story Card with background image and overlap with content
+
+```jsx
+<StoryCard story={story} bgImgContentOverlap>
+  <HeroImage story={story} />
+  <StorycardContent story={story} />
+</StoryCard>
+```
+
+<!-- PROPS -->