@quintype/arrow 3.20.0-perf-v2.0 → 3.20.0

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

@@ -1,119 +0,0 @@
-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.camelcase";
-
-const ShareItem = ({ name, url, icon, dataTestId }) => {
-  return url ? (
-    <li data-testid={dataTestId} styleName="icon">
-      <a href={url} target="_blank" rel="noopener noreferrer" data-share-icon={name} aria-label="share-icon">
-        {icon}
-      </a>
-    </li>
-  ) : null;
-};
-ShareItem.propTypes = {
-  name: PropTypes.string,
-  url: PropTypes.string,
-  icon: PropTypes.node,
-  dataTestId: PropTypes.string
-};
-
-function getActionIcon(open, color) {
-  if (!open) return <ShareIcon color={color} />;
-  return <CloseIcon color={color} />;
-}
-
-export const SocialShareTemplate = (props) => {
-  const {
-    fbUrl = "",
-    twitterUrl = "",
-    linkedinUrl = "",
-    whatsappUrl = "",
-    vertical = false,
-    theme,
-    iconType = "plain-color-svg",
-    open = false
-  } = props;
-  if (!fbUrl && !twitterUrl && !linkedinUrl && !whatsappUrl) return null;
-  const iconShade = getTextColor(theme);
-  const iconColor = iconShade === "dark" ? "#000000" : "#ffffff";
-  const options = { fbUrl, twitterUrl, linkedinUrl, whatsappUrl, iconColor, iconType };
-  const iconsList = socialShareData(options);
-  const [isOpen, setIsOpen] = useState(open);
-  const verticalShare = vertical ? "vertical" : "horizontal";
-
-  useEffect(() => setIsOpen(open), [open]);
-
-  const shareIcon = () => {
-    return (
-      <li styleName="icon" key="horizontal-0">
-        <div onClick={clickHandler}>{getActionIcon(isOpen, iconColor)}</div>
-      </li>
-    );
-  };
-
-  const clickHandler = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const popUpWrapper = () => {
-    return (
-      <div styleName="tablet-view">
-        {!isOpen && <ul styleName={`wrapper ${isOpen ? "open" : ""}`}>{shareIcon()}</ul>}
-        {isOpen && (
-          <>
-            <div styleName="overlay" onClick={clickHandler}>
-              <div className="arr--popup" styleName={`popup-wrapper ${isOpen ? "popup-open" : ""}`}>
-                <SocialSharePopup
-                  fbUrl={fbUrl}
-                  twitterUrl={twitterUrl}
-                  linkedinUrl={linkedinUrl}
-                  whatsappUrl={whatsappUrl}
-                  iconType={iconType}
-                  theme={theme}
-                  closePopup={() => {
-                    setIsOpen(false);
-                  }}
-                />
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-    );
-  };
-  const popupStyle = !isOpen && vertical ? "tablet-view-popup" : "";
-  return (
-    <div data-test-id={verticalShare} className="arr--share" styleName={`${iconShade} ${verticalShare} ${popupStyle}`}>
-      <div styleName="desktop-view">
-        <ul
-          data-test-id={camelcase(iconType)}
-          className="desktop-share-wrapper"
-          styleName={`wrapper ${isOpen ? "open" : ""}`}>
-          {shareIcon()}
-          {iconsList.map((iconData, index) => (
-            <ShareItem {...iconData} key={iconData.name} dataTestId={`card-share-${index}`} />
-          ))}
-        </ul>
-      </div>
-      {popUpWrapper()}
-    </div>
-  );
-};
-
-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/src/components/Molecules/SocialShareTemplate/social-share-data.js

@@ -1,66 +0,0 @@
-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";
-
-const getSocialIcons = (color, iconType) => {
-  switch (iconType) {
-    case "plain-color-svg":
-      return {
-        facebook: <Facebook key={iconType} />,
-        twitter: <Twitter key={iconType} />,
-        linkedin: <LinkedIn key={iconType} />,
-        whatsapp: <WhatsApp key={iconType} />
-      };
-
-    default:
-      return {
-        facebook: <Facebook color={color} key={iconType} />,
-        twitter: <Twitter color={color} key={iconType} />,
-        linkedin: <LinkedIn color={color} key={iconType} />,
-        whatsapp: <WhatsApp color={color} key={iconType} />
-      };
-  }
-};
-
-export const socialShareData = ({ fbUrl, twitterUrl, linkedinUrl, whatsappUrl, iconColor, iconType = "plain-svg" }) => {
-  const socialIcons = getSocialIcons(iconColor, iconType);
-  const 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/src/components/Molecules/SocialShareTemplate/social-share-template.m.css

@@ -1,174 +0,0 @@
-@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/src/components/Molecules/SocialShareTemplate/social-share-template.test.js

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

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

@@ -1,40 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../storybook";
-import { SocialShareTemplate } from "./index";
-import Readme from "./README.md";
-import { boolean } from "@storybook/addon-knobs";
-
-withStore("Molecules/Social Share Template", {}, Readme)
-  .add("Horizontal", () => {
-    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"
-    };
-    return <SocialShareTemplate {...props} open={boolean("open", false)} />;
-  })
-  .add("Vertical", () => {
-    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",
-      vertical: true
-    };
-    return <SocialShareTemplate {...props} open={boolean("open", false)} />;
-  });

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

@@ -1,75 +0,0 @@
-# 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/src/components/Molecules/StoryCard/READMEBGIMAGE.md

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

package/src/components/Molecules/StoryCard/READMEBORDER.md

@@ -1,61 +0,0 @@
-# StoryCard
-
-The _StoryCard_ component with different kinds of borders and box shadow modules used to represent a story within a Row with borders.
-
-The _StoryCard_ can be composible based on it's children(Atoms).
-
-### Default Story Card with Full Border
-
-```jsx
-<StoryCard story={story} border="full" />
-```
-
-### Default Story Card with Border Bottom
-
-```jsx
-<StoryCard story={story} border="bottom" />
-```
-
-### Default Story Card with Box Shadow
-
-```jsx
-<StoryCard story={story} border="box" />
-```
-
-### StoryCard using StoryCardContent
-
-```jsx
-<StoryCard story={story} border="full">
-  <HeroImage story={story} />
-  <StorycardContent story={story}>
-    <Headline story={story} />
-    <AuthorWithTime story={story} />
-  </StorycardContent>
-</StoryCard>
-```
-
-### StoryCard using StoryCardContent border Box and fullBleed False
-
-```jsx
-<StoryCard story={story} border="box">
-  <HeroImage story={story} FullBleed={false} />
-  <StorycardContent story={story}>
-    <Headline story={story} />
-    <AuthorWithTime story={story} />
-  </StorycardContent>
-</StoryCard>
-```
-
-### Horizontal StoryCard using StoryCardContent border full
-
-```jsx
-<StoryCard story={story} border="full" isHorizontal>
-  <HeroImage story={story} />
-  <StorycardContent story={story}>
-    <Headline story={story} />
-    <AuthorWithTime story={story} />
-  </StorycardContent>
-</StoryCard>
-```
-
-<!-- PROPS -->