@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

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

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

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

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

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

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

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

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

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

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