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

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

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

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

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

@@ -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/src/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 -->

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

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