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

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

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

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

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

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

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

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

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

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

package/src/components/Atoms/AuthorWithTimestamp/author-with-timestamp.m.css

@@ -0,0 +1,42 @@
+@custom-media --viewport-medium (width >= 768px);
+
+.author-time-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  color: var(--arrow-c-mono2);
+}
+
+.author-image {
+  border-radius: 100%;
+  width: var(--arrow-spacing-l);
+  height: var(--arrow-spacing-l);
+  margin-right: var(--arrow-spacing-xs);
+}
+
+.dot {
+  position: relative;
+  margin-right: var(--arrow-spacing-xs);
+  top: -6px;
+}
+.bottom-fix {
+  margin-top: auto;
+}
+.dash {
+  position: relative;
+  margin-right: var(--arrow-spacing-xs);
+  top: -1px;
+  @media (--viewport-medium) {
+    top: -3px;
+  }
+}
+
+html[dir="rtl"] {
+  .dot {
+    margin-left: var(--arrow-spacing-xs);
+  }
+
+  .dash {
+    padding-left: var(--arrow-spacing-xs);
+  }
+}

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

@@ -0,0 +1,79 @@
+import React from "react";
+import get from "lodash.get";
+import { TimeStamp } from "../TimeStamp";
+import PropTypes from "prop-types";
+import { Author } from "../Author";
+import { Dot } from "../Dot/dot";
+import { Divider } from "../Divider/";
+import { useStateValue } from "../../SharedContext";
+
+import "./author-with-timestamp.m.css";
+import { getTextColor } from "../../../utils/utils";
+import { ReadTime } from "../ReadTime";
+
+export const AuthorWithTime = ({ story, separator, isBottom, hideAuthorImage, prefix, config = {}, isLightTheme }) => {
+  const configState = useStateValue() || {};
+  const isAuthor = get(config, ["showAuthor"], get(configState, ["showAuthor"], true));
+  const isTime = get(configState, ["showTime"], true);
+  const isReadTime = get(configState, ["showReadTime"], true);
+  const isBottomClasses = isBottom ? "bottom-fix" : "";
+  const seperatorStyle = separator === "dot" ? "dot" : "dash";
+  const textColor = isLightTheme ? "light" : getTextColor(configState.theme);
+
+  const getSeparator = () => {
+    if (separator === "divider") {
+      return <Divider color={textColor} />;
+    }
+    return <Dot color={textColor} />;
+  };
+
+  const getTimeStamp = () => {
+    if (!isTime) return null;
+    return (
+      <>
+        {isAuthor && (
+          <span className="arr-separator" styleName={`${seperatorStyle}`}>
+            {getSeparator()}
+          </span>
+        )}
+        <TimeStamp story={story} config={config} />
+        {isReadTime && <ReadTime story={story} opts={config} isLightTheme={isLightTheme} />}
+      </>
+    );
+  };
+
+  return (
+    <div className="arr--author-time" styleName={`author-time-wrapper ${isBottomClasses}`}>
+      {isAuthor ? (
+        <>
+          <Author story={story} isBottom hideAuthorImage={hideAuthorImage} prefix={prefix} />
+          {getTimeStamp()}
+        </>
+      ) : (
+        getTimeStamp()
+      )}
+    </div>
+  );
+};
+
+AuthorWithTime.propTypes = {
+  story: PropTypes.object,
+  /** Style of separator between the Author & Timestamp */
+  separator: PropTypes.oneOf(["dot", "divider"]),
+  /** hide the author image */
+  hideAuthorImage: PropTypes.bool,
+  // fix author and time at the end
+  isBottom: PropTypes.bool,
+  // fix prefix before the author name
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isLightTheme: PropTypes.bool
+};
+
+AuthorWithTime.defaultProps = {
+  separator: "dot",
+  isBottom: false,
+  hideAuthorImage: true,
+  prefix: "",
+  isLightTheme: false
+};

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { AuthorWithTime } from "./index";
+import Readme from "./README.md";
+
+const story = generateStory();
+
+withStore(
+  "Atoms/Author With Time Stamp",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .add("default", () => <AuthorWithTime story={story} />)
+  .add("Author without Divider and Time", () => <AuthorWithTime story={story} separator="divider" />);

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

@@ -0,0 +1,9 @@
+# Bullet Point
+
+Component to add a bullet point to a story card.
+
+## Usage
+
+```jsx
+<BulletPoint bulletValue={bulletValue} />
+```

package/src/components/Atoms/BulletPoint/bullet-point.m.css

@@ -0,0 +1,14 @@
+.bullet {
+  margin-right: var(--arrow-spacing-l);
+  font-size: var(--arrow-fs-huge);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-3);
+}
+
+.dark {
+  color: var(--arrow-c-mono6);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono6);
+}

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

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useStateValue } from "../../SharedContext";
+import { getTextColor } from "../../../utils/utils";
+import "./bullet-point.m.css";
+
+export const BulletPoint = ({ bulletValue = "" }) => {
+  const configData = useStateValue() || {};
+  const textColor = getTextColor(configData.theme);
+  return (
+    <div className="arrow-component arr--bullet-point">
+      <span styleName={`bullet ${textColor}`}>{bulletValue}</span>
+    </div>
+  );
+};
+
+BulletPoint.propTypes = {
+  bulletValue: PropTypes.string
+};

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { BulletPoint } from "./index";
+import Readme from "./README.md";
+
+withStore("Atoms/Bullet Point", {}, Readme).add("Default", () => <BulletPoint bulletValue={"1"} />);

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

@@ -0,0 +1,15 @@
+# CaptionAttribution
+
+Displays the Caption and Attribution of Hero Image or Image Element of the Story.
+
+## Usage
+
+```jsx
+<CaptionAttribution story={story} config={{ theme: "ffff" }} />
+```
+
+```jsx
+<CaptionAttribution element={element} config={{ theme: "ffff" }} />
+```
+
+<!-- PROPS -->

package/src/components/Atoms/CaptionAttribution/caption-attribution.m.css

@@ -0,0 +1,40 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.caption {
+  font-size: 12px;
+  font-family: var(--arrow-typeface-secondary);
+  margin: var(--arrow-spacing-xs) 0;
+  line-height: var(--arrow-lh-5);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-tiny);
+  }
+}
+
+.wrapper {
+  padding-left: var(--arrow-spacing-s);
+}
+
+.caption.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.attribution.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.caption.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.attribution.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+html[dir="rtl"] {
+  .wrapper {
+    padding-left: 0;
+    padding-right: var(--arrow-spacing-s);
+    display: inline-block;
+  }
+}