@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1-version-upgrade.2

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

@@ -1,340 +0,0 @@
-@import "../../../../assets/stylesheets/mixins.scss";
-
-.fixed {
-  margin: 6px 0;
-  @include desktop {
-    margin: var(--arrow-spacing-s) 0;
-  }
-}
-
-.max-icon {
-  max-width: 200px;
-  overflow: hidden;
-}
-
-.min-max-icon {
-  max-width: 80px;
-  overflow: hidden;
-  @include desktop {
-    max-width: 200px;
-  }
-}
-
-.partial-icons-wrapper {
-  display: flex;
-  align-items: center;
-}
-
-.partial-icons-wrapper .icon-wrapper {
-  display: flex;
-  height: 40px;
-}
-
-.icon {
-  list-style-type: none;
-  width: 40px;
-  height: 40px;
-  padding: var(--arrow-spacing-xxs);
-}
-
-.dark .mobile-share,
-.dark .desktop-share {
-  background-color: #ededed;
-}
-
-.light .mobile-share,
-.light .desktop-share {
-  background-color: #ffffff26;
-}
-
-.share-icon,
-.mobile-share,
-.desktop-share {
-  width: var(--arrow-spacing-xl);
-  height: var(--arrow-spacing-xl);
-}
-
-.mobile-sticky-share {
-  width: var(--arrow-spacing-48);
-  height: var(--arrow-spacing-48);
-  border-radius: 50%;
-}
-
-.circular-icon .mobile-share,
-.circular-icon .desktop-share,
-.circular-icon .share-icon {
-  border-radius: 50%;
-}
-
-.square-icon .mobile-share,
-.square-icon .desktop-share,
-.square-icon .share-icon {
-  border-radius: 2px;
-}
-
-.mobile-share {
-  margin: 0 var(--arrow-spacing-xxs);
-  @include desktop {
-    display: none;
-  }
-}
-
-.desktop-share {
-  display: none;
-  @include desktop {
-    position: relative;
-    display: block;
-  }
-}
-
-.popup-overlay {
-  content: "";
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: 1100;
-  background-color: hsla(0, 0%, 100%, 0.77);
-  @include desktop {
-    z-index: 98;
-    background-color: unset;
-  }
-}
-
-.copylink {
-  position: relative;
-}
-
-.share-button {
-  height: 20px;
-}
-
-.light .popup-overlay {
-  background-color: hsla(0, 0%, 5%, 0.77);
-  @include desktop {
-    background-color: unset;
-  }
-}
-
-.light .mobile-share .popup-wrapper {
-  background-color: rgb(13 13 13 / 77%);
-  @include desktop {
-    background-color: unset;
-  }
-}
-
-.share-button-wrapper {
-  display: flex;
-  align-items: center;
-  padding: var(--arrow-spacing-xxs) 14px var(--arrow-spacing-xxs) 6px;
-  border-radius: var(--arrow-spacing-xxs);
-  border: 0.5px solid rgba(0, 0, 0, 0.22);
-  background-color: #bc346d;
-  display: inline-flex;
-  color: #fff;
-  font-weight: var(--arrow-fw-semi-bold);
-  position: relative;
-}
-
-.mobile-share > svg,
-.desktop-share > svg,
-.share-button > svg,
-.mobile-sticky-share > svg,
-.share-icon > svg,
-.share-button-wrapper > span,
-.icon:hover {
-  cursor: pointer;
-}
-
-.mobile-sticky-share {
-  background-color-color: #bc346d;
-  border-radius: 50%;
-  @include desktop {
-    display: none;
-  }
-}
-
-.sticky {
-  position: sticky;
-  position: -webkit-sticky;
-  top: 90%;
-  right: var(--arrow-spacing-m);
-  z-index: 11;
-  align-self: flex-start;
-  margin-top: var(--arrow-spacing-xs);
-  @include desktop {
-    top: 30%;
-    right: unset;
-    left: 0;
-    text-align: center;
-    z-index: 99;
-  }
-}
-
-.sticky .icon-wrapper {
-  display: none;
-  @include desktop {
-    display: block;
-  }
-}
-
-.sticky .icon {
-  width: var(--arrow-spacing-48);
-  height: var(--arrow-spacing-48);
-  padding: var(--arrow-spacing-xs);
-}
-
-.share-icon {
-  position: relative;
-}
-
-.dark .share-icon {
-  background-color: #ededed;
-}
-
-.light .share-icon {
-  background-color: #ffffff26;
-}
-
-.sticky:global(.arr--share) {
-  background-color: unset !important;
-}
-
-.share-icon1,
-.share-icon2,
-.share-icon3,
-.share-icon4 {
-  padding: 6px;
-}
-
-.mobile-sticky-share {
-  padding: var(--arrow-spacing-xs);
-}
-
-.share-button.share-icon1,
-.share-button.share-icon2,
-.share-button.share-icon3,
-.share-button.share-icon4 {
-  padding: 0;
-}
-
-html[dir="ltr"] {
-  .mobile-share,
-  .desktop-share,
-  .share-icon,
-  .mobile-sticky-share {
-    margin-left: var(--arrow-spacing-xxs);
-  }
-
-  .share-button-wrapper .popup-wrapper {
-    @include desktop {
-      top: 56px;
-      left: 14px;
-    }
-  }
-
-  .share-button {
-    padding-right: var(--arrow-spacing-xxs);
-  }
-
-  .share-button.share-icon3 {
-    padding-right: 6px;
-  }
-
-  .fixed.partial-icons-wrapper :global(.basic-popup-wrapper) {
-    @include desktop {
-      left: -75% !important;
-    }
-  }
-
-  .margin-24 {
-    margin-right: var(--arrow-spacing-l);
-  }
-}
-
-html[dir="rtl"] {
-  .sticky {
-    right: unset;
-    left: var(--arrow-spacing-m);
-    @include desktop {
-      right: 0;
-      left: unset;
-    }
-  }
-
-  .mobile-share,
-  .desktop-share,
-  .share-icon,
-  .mobile-sticky-share {
-    margin-right: var(--arrow-spacing-xxs);
-  }
-
-  .share-button-wrapper .popup-wrapper {
-    @include desktop {
-      top: 56px;
-      right: 14px;
-    }
-  }
-
-  .share-button-wrapper {
-    padding: var(--arrow-spacing-xxs) 6px var(--arrow-spacing-xxs) 14px;
-  }
-
-  .share-button {
-    padding-left: var(--arrow-spacing-xxs);
-  }
-
-  .share-button.share-icon3 {
-    padding-left: 6px;
-  }
-
-  .fixed.partial-icons-wrapper :global(.basic-popup-wrapper) {
-    @include desktop {
-      right: -75% !important;
-    }
-  }
-
-  .mobile-share > svg,
-  .desktop-share > svg,
-  .share-button > svg,
-  .mobile-sticky-share > svg,
-  .share-icon > svg {
-    transform: scaleX(-1);
-  }
-
-  .margin-24 {
-    margin-left: var(--arrow-spacing-l);
-  }
-}
-
-.icon :global(.copied-msg) {
-  position: fixed;
-  padding: 5px;
-  border-radius: 3px;
-  pointer-events: none;
-  transform: translate(-50%, -100%);
-  z-index: 1000;
-}
-
-.icon :global(.copied-msg.hidden) {
-  display: none;
-}
-
-.dark .icon :global(.copied-msg) {
-  background-color: #333;
-  color: white;
-}
-
-.light .icon :global(.copied-msg) {
-  background-color: #333;
-  color: white;
-}
-
-/* to disable the scroll behind overlay in mobile */
-:global(.lock-scroll) {
-  overflow: hidden;
-  @include desktop {
-    overflow: auto;
-  }
-}

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

@@ -1,147 +0,0 @@
-import * as React from "react";
-import { shallow } from "enzyme";
-import { SocialShareTemplate } from "./index";
-import { Provider } from "react-redux";
-import { generateStore } from "../../Fixture/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(
-      <Provider store={generateStore}>
-        <SocialShareTemplate {...data} />
-      </Provider>
-    );
-    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",
-      socialShareStyle: "sticky"
-    };
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <SocialShareTemplate {...data} />
-      </Provider>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("Should not render social share template if url is not passed", () => {
-    const data = {
-      fbUrl: "",
-      twitterUrl: "",
-      linkedinUrl: "",
-      whatsappUrl: "",
-      fullUrl: "",
-      theme: "#ffff",
-      iconType: "plain-svg"
-    };
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <SocialShareTemplate {...data} />
-      </Provider>
-    );
-    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"
-    };
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <SocialShareTemplate {...data} />
-      </Provider>
-    );
-    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"
-    };
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <SocialShareTemplate {...data} />
-      </Provider>
-    );
-    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"
-    };
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <SocialShareTemplate {...data} />
-      </Provider>
-    );
-    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"
-    };
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <SocialShareTemplate {...data} />
-      </Provider>
-    );
-    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/",
-      fullUrl: "https://twitter.com/",
-      mailtoUrl: "https://twitter.com/",
-      theme: "",
-      iconType: "plain-svg"
-    };
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <SocialShareTemplate {...data} />
-      </Provider>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-});

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

@@ -1,45 +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",
-      whatsappUrl: "https://www.facebook.com",
-      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",
-      socialShareStyle: "fixed",
-      displayDefaultIcons: true
-    };
-    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",
-      whatsappUrl: "https://www.facebook.com",
-      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",
-      socialShareStyle: "sticky",
-      displayDefaultIcons: 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 -->