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

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

@@ -1,23 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { Author } from "./index";
-import Readme from "./README.md";
-
-const story = generateStory();
-
-withStore(
-  "Atoms/Author",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory"
-      }
-    }
-  },
-  Readme
-)
-  .add("With Author Image", () => <Author story={story} />)
-  .add("With Prefix", () => <Author story={story} prefix="By" />)
-  .add("Without Author Image", () => <Author story={story} hideAuthorImage />);

package/src/components/Atoms/AuthorCard/README.md

@@ -1,47 +0,0 @@
-# Author Card
-
-Displays the author details as a card for the story page
-
-### Use as a component
-
-
-####  default template
-
-```jsx
- <AuthorCard story={story}/>
-```
-
-#### Author card with right align template
-
-```jsx
-<AuthorCard story={story} template="rightAligned" />
-```
-
-#### Author card with center align template
-
-```jsx
-<AuthorCard story={story} template="centerAligned" />
-```
-
-#### Author card with default align template
-
-```jsx
-<AuthorCard story={story}  template="default" />
-```
-
-#### Author card with left align template
-
-```jsx
-<AuthorCard story={story}  template="leftAligned" />
-```
-#### Author card with options
-
-```jsx
-<AuthorCard story={story}  template="default" opts={hideImage: true, hideBio: true}/>
-```
-
-
-<!-- PROPS -->
-
-
-

package/src/components/Atoms/AuthorCard/author-card.m.css

@@ -1,174 +0,0 @@
-@value viewports: "../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-
-.author-card-wrapper {
-  display: flex;
-}
-
-.author-card-wrapper.centerAligned {
-  display: block;
-  text-align: center;
-}
-
-.author-image-wrapper {
-  display: flex;
-  margin-right: var(--arrow-spacing-m);
-  margin-bottom: var(--arrow-spacing-s);
-  @media (min-width: mobile) {
-    margin-right: var(--arrow-spacing-l);
-  }
-}
-
-.default .author-image-wrapper {
-  margin: 0 12px 0 0;
-}
-
-.centerAligned .author-image-wrapper {
-  justify-content: center;
-  margin-right: 0;
-}
-
-.author-image {
-  margin-left: -100px;
-  overflow: hidden;
-}
-
-.author-image figure {
-  margin: 0;
-}
-
-.author-image img {
-  border-radius: 50%;
-  height: 72px;
-  width: 72px;
-  @media (min-width: mobile) {
-    height: 124px;
-    width: 124px;
-  }
-}
-
-.multi-author-image img {
-  border: solid 2px var(--arrow-c-light);
-}
-
-.default .author-image img {
-  height: 32px;
-  width: 32px;
-}
-
-.default .multi-author-image {
-  margin-left: -24px;
-  border-width: 1px;
-}
-
-.author-image.first-author-image {
-  margin-left: 0;
-}
-
-.author-details-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0;
-  margin-left: var(--arrow-spacing-m);
-  @media (min-width: mobile) {
-    padding: var(--arrow-spacing-xs) var(--arrow-spacing-xs) var(--arrow-spacing-xs) 0;
-    margin-left: var(--arrow-spacing-l);
-  }
-}
-
-.default .author-details-wrapper {
-  margin-left: var(--arrow-spacing-s);
-}
-
-.leftAligned .author-details-wrapper {
-  margin-left: var(--arrow-spacing-m);
-  @media (min-width: mobile) {
-    margin-left: var(--arrow-spacing-l);
-  }
-}
-
-.centerAligned .author-details-wrapper {
-  align-items: center;
-  margin-left: 0;
-}
-
-.author-name-share {
-  display: flex;
-  align-items: center;
-  font-size: var(--arrow-fs-xs);
-  line-height: var(--arrow-lh-1);
-  justify-content: center;
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-s);
-  }
-}
-
-html[dir="rtl"] {
-  .author-image-wrapper {
-    margin-left: var(--arrow-spacing-m);
-    margin-right: 0;
-    @media (min-width: mobile) {
-      margin-left: var(--arrow-spacing-l);
-    }
-  }
-
-  .leftAligned .author-details-wrapper {
-    margin-right: var(--arrow-spacing-m);
-    margin-left: 0;
-    @media (min-width: mobile) {
-      margin-right: var(--arrow-spacing-l);
-    }
-  }
-
-  .multi-author-image {
-    position: relative;
-    right: -100px;
-  }
-
-  .default .multi-author-image {
-    margin-left: -16px;
-    right: -12px;
-    @media (min-width: mobile) {
-      margin-left: -24px;
-      right: -12px;
-    }
-  }
-
-  .author-image.first-author-image {
-    position: static;
-  }
-
-  .centerAligned .author-image-wrapper {
-    margin-left: 0;
-  }
-}
-
-.multiple-author-style {
-  font-size: var(--arrow-fs-xs);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-s);
-  }
-}
-
-.dot-wrapper {
-  margin: 0 var(--arrow-spacing-xxs) 0 var(--arrow-spacing-xs);
-}
-
-.author-bio {
-  font-style: italic;
-  line-height: var(--arrow-lh-5);
-  color: var(--arrow-c-m);
-  font-size: var(--arrow-fs-tiny);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-xs);
-  }
-}
-
-.dark {
-  color: var(--arrow-c-mono2);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono2);
-}

package/src/components/Atoms/AuthorCard/author-card.test.js

@@ -1,72 +0,0 @@
-import * as React from "react";
-import { mount } from "enzyme";
-import expect from "expect";
-import { generateStory, generateStore } from "../../Fixture/index";
-import { AuthorCard } from "./index";
-import { Provider } from "react-redux";
-
-const story = generateStory();
-
-const singleAuthorStory = {
-  ...story,
-  authors: [
-    {
-      id: 123981,
-      name: "Ravigopal Kesari",
-      slug: "ravigopal-kesari",
-      "avatar-url":
-        "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
-      "avatar-s3-key": null,
-      "twitter-handle": null,
-      bio:
-        "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
-      "contributor-role": {
-        id: 873,
-        name: "Author"
-      }
-    }
-  ]
-};
-
-describe("default author card", () => {
-  it("Should render leftAligned template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={story} template="leftAligned" />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "author-card-left-aligned" }).prop("className")).toMatch(/leftAligned/);
-  });
-  it("Should render default template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={story} template="default" />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "author-card-default" }).prop("className")).toMatch(/default/);
-  });
-  it("Should render centerAligned template", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={story} template="centerAligned" />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "author-card-center-aligned" }).prop("className")).toMatch(/centerAligned/);
-  });
-  it("Should render author card without image", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={story} template="centerAligned" opts={{ showImage: false }} />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "author-image" }).length).toEqual(0);
-  });
-  it("Should render author card without author bio", () => {
-    const wrapper = mount(
-      <Provider store={generateStore}>
-        <AuthorCard story={singleAuthorStory} template="centerAligned" opts={{ showBio: false }} />
-      </Provider>
-    );
-    expect(wrapper.find({ "data-test-id": "author-bio" }).length).toEqual(0);
-  });
-});

package/src/components/Atoms/AuthorCard/index.js

@@ -1,115 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import kebabCase from "lodash.kebabcase";
-import { Dot } from "../Dot/dot";
-import { ResponsiveImage, Link } from "@quintype/components";
-import { Twitter } from "../../Svgs/SocialIcons/twitter";
-import "./author-card.m.css";
-import { useStateValue } from "../../SharedContext";
-import { getTextColor } from "../../../utils/utils";
-
-const authorImage = (author) => {
-  const { "avatar-url": avatarUrl, "avatar-s3-key": avatarS3Key, name: authorName } = author;
-  if (!avatarUrl && !avatarS3Key) {
-    return null;
-  }
-  return (
-    <figure data-test-id="author-image">
-      {avatarS3Key ? (
-        <ResponsiveImage
-          slug={avatarS3Key}
-          aspect-ratio={[1, 1]}
-          defaultWidth={48}
-          imgParams={{ auto: ["format", "compress"] }}
-          alt={authorName}
-        />
-      ) : (
-        <img src={avatarUrl} />
-      )}
-    </figure>
-  );
-};
-
-export const AuthorCard = ({ story = {}, template = "leftAligned", clazzName = "", opts = {}, mountAt = "" }) => {
-  const configData = useStateValue() || {};
-  const { authors = [] } = story;
-  const isSingleAuthor = authors.length === 1;
-  const { showBio = false, showImage = true, showName = true } = opts;
-  const textColor = getTextColor(configData.theme);
-  return (
-    <div
-      data-test-id={`author-card-${kebabCase(template)}`}
-      className={clazzName}
-      styleName={`author-card-wrapper ${template}`}>
-      {authors.map((author, index) => {
-        return (
-          <React.Fragment key={author.id}>
-            {showImage && (author["avatar-url"] || author["avatar-s3-key"]) && (
-              <div data-test-id="author-image" styleName="author-image-wrapper">
-                <Link href={`${mountAt}/author/` + author.slug} key={`author-image-${index}`} aria-label="author-image">
-                  <div
-                    styleName={`author-image ${!index ? "first-author-image" : ""} ${
-                      !isSingleAuthor ? "multi-author-image" : ""
-                    }`}>
-                    {authorImage(author)}
-                  </div>
-                </Link>
-              </div>
-            )}
-          </React.Fragment>
-        );
-      })}
-      {showName && (
-        <div data-test-id="author-name" styleName="author-name-share">
-          {authors.map((author, index) => {
-            const spaceHolder = `,\xa0`;
-            return (
-              <>
-                {index !== 0 && (authors.length > 1 ? spaceHolder : "")}
-                <Link href={`${mountAt}/author/` + author.slug} aria-label="author-name">
-                  <h5 styleName={`multiple-author-style ${textColor}`}>{author.name}</h5>
-                </Link>
-              </>
-            );
-          })}
-          {isSingleAuthor && template !== "centerAligned" && (
-            <>
-              {authors[0]["twitter-handle"] && (
-                <>
-                  <div styleName="dot-wrapper">
-                    <Dot color={textColor} />
-                  </div>
-                  <a
-                    href={"http://twitter.com/" + authors[0]["twitter-handle"]}
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    <Twitter />
-                  </a>
-                </>
-              )}
-            </>
-          )}
-        </div>
-      )}
-      <div data-test-id="author-info" styleName="author-details-wrapper">
-        {showBio && isSingleAuthor && template !== "default" && (
-          <p styleName={`author-bio ${textColor}`}>{authors[0].bio}</p>
-        )}
-      </div>
-    </div>
-  );
-};
-
-AuthorCard.propTypes = {
-  story: PropTypes.shape({
-    authors: PropTypes.array
-  }),
-  template: PropTypes.string,
-  opts: PropTypes.shape({
-    showImage: PropTypes.bool,
-    showBio: PropTypes.bool,
-    showName: PropTypes.bool
-  }),
-  mountAt: PropTypes.string,
-  clazzName: PropTypes.string
-};

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

@@ -1,69 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore, optionalSelect } from "../../../../storybook";
-import { AuthorCard } from "./index";
-import Readme from "./README.md";
-import { boolean } from "@storybook/addon-knobs";
-
-const authorTemplate = {
-  "No value": "",
-  default: "default",
-  leftAligned: "leftAligned",
-  centerAligned: "centerAligned"
-};
-
-const story = generateStory();
-
-const singleAuthorStory = {
-  ...story,
-  authors: [
-    {
-      id: 123981,
-      name: "Ravigopal Kesari",
-      slug: "ravigopal-kesari",
-      "avatar-url":
-        "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
-      "avatar-s3-key": null,
-      "twitter-handle": "quintype_inc",
-      bio:
-        "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
-      "contributor-role": {
-        id: 873,
-        name: "Author"
-      }
-    }
-  ]
-};
-
-withStore(
-  "Atoms/Author Card",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-)
-  .addDecorator((story) => <div style={{ maxWidth: "1000px", margin: "auto" }}>{story()}</div>)
-  .add("Default", () => (
-    <AuthorCard
-      story={story}
-      template={optionalSelect("Template Options", authorTemplate)}
-      opts={{
-        showBio: boolean("bio", false),
-        showImage: boolean("image", true)
-      }}
-    />
-  ))
-  .add("single author template", () => (
-    <AuthorCard
-      story={singleAuthorStory}
-      template={optionalSelect("Template Options", authorTemplate)}
-      opts={{
-        showBio: boolean("bio", true),
-        showImage: boolean("image", true)
-      }}
-    />
-  ));

package/src/components/Atoms/AuthorImage/README.md

@@ -1,31 +0,0 @@
-# Author Image
-
-Author image is a generic component which picks a specific author's image.
-
-## Usage
-
-Import the AuthorImage component and pass author details as props.
-
-```jsx
-import { AuthorImage } from "@quintype/arrow";
-```
-
-### Use as a component
-
-```jsx
-
-<AuthorImage author={authorDetails}>
-
-```
-
-```jsx
-
-<AuthorImage author={authorDetails} template="square">
-
-```
-
-```jsx
-
-<AuthorImage author={authorDetails} template="smallCircle">
-
-```

package/src/components/Atoms/AuthorImage/author-image.m.css

@@ -1,53 +0,0 @@
-@value viewports: "../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-@value tablet from viewports;
-
-.image-container {
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.author-image img,
-.author-image svg {
-  border-radius: 50%;
-  width: 160px;
-  height: 160px;
-  @media (min-width: mobile) {
-    position: relative;
-    width: 224px;
-    height: 224px;
-    @media (min-width: tablet) {
-      width: 364px;
-      height: 364px;
-    }
-  }
-}
-
-.square img {
-  border-radius: 0;
-}
-
-.small-circle.author-image img,
-.small-circle.author-image svg {
-  border-radius: 133.5px;
-  width: 40px;
-  height: 40px;
-  @media (min-width: mobile) {
-    width: 88px;
-    height: 88px;
-  }
-  @media (min-width: tablet) {
-    width: 120px;
-    height: 120px;
-  }
-}
-
-.smaller-circle.author-image img,
-.smaller-circle.author-image svg {
-  width: 64px;
-  height: 64px;
-}

package/src/components/Atoms/AuthorImage/index.js

@@ -1,55 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { ResponsiveImage, Link } from "@quintype/components";
-import { UserFallbackIcon } from "../../Svgs/user-fallback-icon";
-import "./author-image.m.css";
-
-const authorWithImage = (author, templateStyle) => {
-  const { "avatar-url": avatarUrl, "avatar-s3-key": avatarS3Key, name } = author;
-  return (
-    <div className="arr--author-image" styleName={`author-image ${templateStyle}`} data-test-id="author-image">
-      <figure styleName="image-container">
-        {avatarS3Key ? (
-          <ResponsiveImage
-            slug={avatarS3Key}
-            alt={name}
-            defaultWidth={250}
-            widths={[250, 480]}
-            aspectRatio={[[1, 1], [1, 1]]}
-            sizes={"98vw"}
-            imgParams={{ auto: ["format", "compress"] }}
-          />
-        ) : avatarUrl ? (
-          <img src={avatarUrl} />
-        ) : (
-          <UserFallbackIcon />
-        )}
-      </figure>
-    </div>
-  );
-};
-
-const AuthorImage = ({ author = {}, template = "", config = {} }) => {
-  const { slug } = author;
-  const mountAt = config.mountAt || "";
-  let templateStyle = "";
-
-  if (template === "smallerCircle") templateStyle = "smaller-circle";
-  else if (template === "smallCircle") templateStyle = "small-circle";
-  else if (template === "square") templateStyle = "square";
-
-  if (slug) return <Link href={`${mountAt}/author/` + slug}>{authorWithImage(author, templateStyle)}</Link>;
-  else return authorWithImage(author, templateStyle);
-};
-
-AuthorImage.propTypes = {
-  author: PropTypes.shape({
-    "avatar-url": PropTypes.string,
-    "avatar-s3-key": PropTypes.string,
-    name: PropTypes.string,
-    slug: PropTypes.string
-  }),
-  template: PropTypes.string
-};
-
-export default AuthorImage;

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

@@ -1,20 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../storybook";
-import AuthorImage from "./index";
-import Readme from "./README.md";
-import { authorData } from "../../Fixture";
-
-withStore(
-  "Atoms/AuthorImage",
-  {
-    qt: {
-      config: {
-        "cdn-image": "thumbor-stg.assettype.com"
-      }
-    }
-  },
-  Readme
-)
-  .add("Default", () => <AuthorImage author={authorData} />)
-  .add("Square Image", () => <AuthorImage author={authorData} template="square" />)
-  .add("Small Circle Image", () => <AuthorImage author={authorData} template="smallCircle" />);

package/src/components/Atoms/AuthorWithTimestamp/README.md

@@ -1,12 +0,0 @@
-# AuthorWithTimestamp
-A combination of the Author and Timestamp atoms.
-
-## Usage
-
-```jsx
-<AuthorWithTime story={story} />
-```
-```jsx
-<AuthorWithTime story={story} separator="divider" />
-```
-<!-- PROPS -->