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

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

@@ -1,109 +0,0 @@
-@import "../../../../assets/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/src/components/Atoms/SocialSharePopup/social-share-popup.test.js

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

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

@@ -1,19 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../storybook";
-import { SocialSharePopup } from "./index";
-import Readme from "./README.md";
-
-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"
-};
-withStore("Atoms/Social Share Popup", {}, Readme).add("default", () => <SocialSharePopup {...props} />);

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

@@ -1,49 +0,0 @@
-# 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/src/components/Atoms/StoryElements/AlsoRead/also-read.m.css

@@ -1,135 +0,0 @@
-@value viewports: "../../../../../assets/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/src/components/Atoms/StoryElements/AlsoRead/also-read.test.js

@@ -1,83 +0,0 @@
-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";
-
-const element = generateStoryElementData("also-read");
-const story = generateStory();
-
-describe("Alsoread Story Element", () => {
-  it("Should render default template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AlsoRead story={story} element={element} template="default" />
-      </Provider>
-    );
-    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-default/);
-  });
-
-  it("Should render image right align template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AlsoRead story={story} element={element} template="imageRightAlign" />
-      </Provider>
-    );
-    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-imageRightAlign/);
-  });
-
-  it("Should render text left align template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AlsoRead story={story} element={element} template="textLeftAlign" />
-      </Provider>
-    );
-    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-textLeftAlign/);
-  });
-
-  it("Should render default template with fallback image", () => {
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <AlsoRead element={element} template="default" css={{ textColor: "#3333" }} />
-      </Provider>
-    );
-    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", () => {
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <AlsoRead story={story} element={element} template="default" css={{ textColor: "#3333" }} />
-      </Provider>
-    );
-    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", () => {
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <AlsoRead story={story} element={element} template="textLeftAlign" opts={{ title: "Also-Read" }} />
-      </Provider>
-    );
-    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", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-    const wrapper = shallow(
-      <Provider store={generateStore}>
-        <AlsoRead element={element} render={customTemplate} />
-      </Provider>
-    );
-    expect(wrapper.html()).toBe("<h3>How is the coronavirus impacting people with disabilities?</h3>");
-  });
-});

package/src/components/Atoms/StoryElements/AlsoRead/index.js

@@ -1,117 +0,0 @@
-import React from "react";
-import get from "lodash.get";
-import { LazyLoadImages, Link, ResponsiveImage } from "@quintype/components";
-import { withElementWrapper } from "../withElementWrapper";
-import PropTypes from "prop-types";
-import { FallbackImage } from "../../FallbackImage";
-import { clientWidth, isEmpty, shapeConfig, getTextColor } from "../../../../utils/utils";
-import { useStateValue } from "../../../SharedContext";
-import "./also-read.m.css";
-
-const DisplayImage = ({ story, linkedImage, template, isRightAlign }) => {
-  const isLeftAlign = template === "textLeftAlign";
-  const isMobile = clientWidth("mobile");
-  const rightAlignAspectRatio = isRightAlign && isMobile ? [4, 3] : [16, 9];
-  const imageAspectRatio = isLeftAlign ? [16, 9] : rightAlignAspectRatio;
-  const alternateText = story["hero-image-caption"] || story["headline"];
-
-  return (
-    <div styleName="card-image-wrapper">
-      {!isEmpty(linkedImage) ? (
-        <figure styleName="card-image">
-          <LazyLoadImages>
-            <ResponsiveImage
-              slug={linkedImage}
-              aspect-ratio={imageAspectRatio}
-              defaultWidth={480}
-              widths={[250, 480, 640]}
-              imgParams={{ auto: ["format", "compress"] }}
-              alt={alternateText}
-            />
-          </LazyLoadImages>
-        </figure>
-      ) : (
-        <div styleName="image" className="arr--fallback-also-read">
-          <FallbackImage />
-        </div>
-      )}
-    </div>
-  );
-};
-
-DisplayImage.propTypes = {
-  story: PropTypes.shape({ "hero-image-caption": PropTypes.string, headline: PropTypes.string }),
-  linkedImage: PropTypes.string,
-  template: PropTypes.string,
-  isRightAlign: PropTypes.bool
-};
-
-const AlsoReadBase = ({
-  story = {},
-  element,
-  template = "",
-  opts = {},
-  css = {},
-  config = {},
-  render,
-  ...restProps
-}) => {
-  const content = element.text;
-  if (!content) return null;
-
-  const linkedStories = get(story, ["linked-stories"], {});
-  const linkedStoryId = get(element, ["metadata", "linked-story-id"]);
-  const linkedStorySlug = get(linkedStories, [linkedStoryId, "url"]);
-  const linkedImage = get(linkedStories, [linkedStoryId, "hero-image-s3-key"], "");
-  const storyUrl = linkedStorySlug && linkedStorySlug;
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(configData.theme);
-  const { title = "" } = opts;
-  const { textColor } = css;
-
-  const displayTitle = title || "Also Read";
-  const isDefault = template === "" || template === "default";
-  const isRightAlign = template === "imageRightAlign";
-  const templateStyle = template ? `alsoread-${template}` : "alsoread-default";
-
-  return (
-    <Link
-      className="arrow-component arr--also-read-element"
-      styleName={templateStyle}
-      data-test-id="also-read"
-      href={storyUrl}
-      aria-label="also-read"
-      {...restProps}>
-      {!isDefault && <div styleName={`default-text ${textInvertColor}`}>{displayTitle}</div>}
-      {isDefault && (
-        <DisplayImage story={story} linkedImage={linkedImage} template={template} isRightAlign={isRightAlign} />
-      )}
-      <div styleName="content-wrapper">
-        <div
-          styleName="headline"
-          style={textColor ? { color: textColor } : { color: textInvertColor }}
-          dangerouslySetInnerHTML={{ __html: content }}
-        />
-        {isRightAlign && <DisplayImage story={story} linkedImage={linkedImage} template={template} />}
-      </div>
-    </Link>
-  );
-};
-
-AlsoReadBase.propTypes = {
-  /**  template can be default, textLeftAlign or imageRightAlign */
-  template: PropTypes.string,
-  story: PropTypes.shape({ "linked-stories": PropTypes.object }),
-  element: PropTypes.shape({
-    text: PropTypes.string,
-    metadata: PropTypes.shape({
-      linkedStoryId: PropTypes.shape({ url: PropTypes.string, "hero-image-s3-key": PropTypes.string })
-    })
-  }),
-  opts: PropTypes.shape({ title: PropTypes.string }),
-  config: shapeConfig,
-  render: PropTypes.func,
-  css: PropTypes.object
-};
-
-export const AlsoRead = withElementWrapper(AlsoReadBase);

package/src/components/Atoms/StoryElements/AlsoRead/stories.js

@@ -1,40 +0,0 @@
-import React from "react";
-import { withStore, optionalSelect } from "../../../../../storybook";
-import { color, text } from "@storybook/addon-knobs";
-import { AlsoRead } from "./index";
-import { generateStoryElementData, generateStory } from "../../../Fixture";
-import Readme from "./README.md";
-
-const element = generateStoryElementData("also-read");
-const story = generateStory();
-const templateStyle = {
-  Default: "default",
-  "Image Right Align": "imageRightAlign",
-  "Text Left Align": "textLeftAlign"
-};
-
-withStore(
-  "Atoms/Story Elements/Also Read",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-)
-  .add("Default", () => (
-    <AlsoRead
-      story={story}
-      element={element}
-      template={optionalSelect("Template Options", templateStyle)}
-      css={{ textColor: color("Color", "#ff214b") }}
-      opts={{ title: text("Title", "Also read") }}
-    />
-  ))
-  .add("Custom", () => {
-    // eslint-disable-next-line react/prop-types
-    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-    return <AlsoRead element={element} render={customTemplate} />;
-  });

package/src/components/Atoms/StoryElements/Attachment/README.md

@@ -1,21 +0,0 @@
-# Attachment
-
-Component to display the attachment element.
-
-## Usage
-
-#### Attachment story element with default template
-
-```jsx
-<Attachment element={element} />
-```
-
-#### Replace default attachment element template with custom template passed using render
-
-```jsx
-const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element["file-name"] }} />;
-
-<Attachment element={element} />;
-```
-
-<!-- PROPS -->