@quintype/arrow 3.15.1-perf.1 → 3.15.1-perf.10

package/components/Rows/AuthorIntroductionCard/author-intro.m.css

@@ -0,0 +1,278 @@
+@value viewports: "../../../stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.connect {
+  font-size: var(--arrow-spacing-m);
+  line-height: var(--arrow-lh-5);
+  color: var(--arrow-c-mono4);
+  align-self: center;
+  margin-bottom: var(--arrow-spacing-xxs);
+}
+
+.social-share {
+  flex: 1;
+  padding: var(--arrow-spacing-xs);
+}
+
+.share-icon {
+  display: flex;
+  align-items: flex-end;
+  margin-right: var(--arrow-spacing-l);
+}
+
+.default .author-image {
+  align-self: center;
+  @media (min-width: mobile) {
+    grid-column: 8/12;
+  }
+}
+
+.default .author-name {
+  color: var(--arrow-c-mono2);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-5);
+  align-self: center;
+  margin: var(--arrow-spacing-xs) 0 var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    line-height: var(--arrow-lh-2);
+    align-self: flex-start;
+  }
+}
+
+.default .author-description {
+  margin: var(--arrow-spacing-s) 0;
+  color: var(--arrow-c-mono4);
+  font-size: var(--arrow-spacing-m);
+  line-height: var(--arrow-lh-5);
+  white-space: pre-line;
+}
+
+.default .wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+  padding: 0 var(--arrow-spacing-s) var(--arrow-spacing-m) var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    display: grid;
+    grid-gap: var(--arrow-fs-l);
+    grid-template-columns: repeat(12, 1fr);
+    padding: 0 0 var(--arrow-fs-xxl) 0;
+  }
+}
+
+.default .introduction-card {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  flex-direction: column;
+  @media (min-width: mobile) {
+    grid-column: 2/8;
+  }
+  @media (min-width: tablet) {
+    grid-column: 2/7;
+  }
+}
+
+.default .social-wrapper {
+  margin-top: var(--arrow-spacing-xs);
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: mobile) {
+    align-items: center;
+  }
+  @media (min-width: tablet) {
+    margin-top: unset;
+    position: relative;
+    align-items: unset;
+  }
+}
+
+.default .connect {
+  @media (min-width: tablet) {
+    margin-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.default .linkWrapper {
+  display: flex;
+}
+
+.default .social-connect-wrapper {
+  @media (min-width: mobile) {
+    display: flex;
+  }
+  @media (min-width: tablet) {
+    margin-top: var(--arrow-spacing-xs);
+    display: block;
+  }
+}
+
+.default :global(.desktop-share-wrapper) {
+  @media (min-width: tablet) {
+    position: absolute;
+    right: 0;
+    max-width: 42px;
+  }
+}
+
+.default .social-wrapper > :nth-child(2) {
+  margin-top: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    margin-top: unset;
+  }
+}
+
+.default .social-connect-wrapper > :nth-child(2) {
+  margin-left: unset;
+  @media (min-width: mobile) {
+    margin-left: var(--arrow-spacing-xs);
+  }
+  @media (min-width: tablet) {
+    margin-left: unset;
+  }
+}
+
+.default .wrapper.dark {
+  border-bottom: 1px solid var(--dark-border);
+}
+
+.default .wrapper.light {
+  border-bottom: 1px solid var(--light-border);
+}
+
+.small-circle {
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+    height: 100%;
+    @media (min-width: tablet) {
+      padding: var(--arrow-spacing-xl);
+    }
+  }
+}
+
+.small-circle.border {
+  border-radius: 3px;
+  padding: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-l) var(--arrow-spacing-s);
+  }
+  @media (min-width: tablet) {
+    padding: var(--arrow-spacing-xl);
+  }
+}
+
+.small-circle.border.dark {
+  border: solid 1px var(--dark-border);
+}
+
+.small-circle.border.light {
+  border: solid 1px var(--light-border);
+}
+
+.small-circle .wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.small-circle .introduction-card {
+  @media (min-width: mobile) {
+    text-align: center;
+  }
+}
+
+.small-circle .author-image {
+  display: flex;
+  align-items: center;
+  @media (min-width: mobile) {
+    justify-content: center;
+    align-items: unset;
+  }
+}
+
+.small-circle .social-wrapper {
+  @media (min-width: mobile) {
+    justify-content: center;
+  }
+}
+
+.small-circle .author-name {
+  color: var(--arrow-c-mono2);
+  font-size: var(--arrow-fs-s);
+  line-height: var(--arrow-lh-3);
+  font-weight: var(--arrow-fw-bold);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+
+.small-circle .author-image > div {
+  margin-right: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    margin-right: unset;
+  }
+}
+
+.small-circle .author-description,
+.small-circle .connect {
+  font-size: var(--arrow-fs-tiny);
+  line-height: var(--arrow-lh-5);
+  color: var(--arrow-c-mono4);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-tiny);
+  }
+}
+
+.small-circle .author-description {
+  position: relative;
+  max-height: 63px;
+  overflow: hidden;
+  margin-top: var(--arrow-spacing-xs);
+}
+
+.small-circle .fade-out {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 90%;
+  height: 21px;
+  background-image: inherit;
+}
+
+.small-circle .social-connect-wrapper {
+  margin-top: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    margin-top: var(--arrow-spacing-xs);
+  }
+}
+
+.small-circle.border .social-connect-wrapper {
+  margin-top: var(--arrow-spacing-xs);
+}
+
+.default .dark,
+.small-circle .dark {
+  color: var(--arrow-c-mono2);
+}
+
+.default .light,
+.small-circle .light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.default .social-connect-wrapper > :nth-child(2),
+.small-circle .social-connect-wrapper > :nth-child(1) {
+  padding-left: unset;
+}
+
+.small-circle .social-share {
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-xs) var(--arrow-spacing-xs);
+}
+
+html[dir="rtl"] {
+  .default :global(.desktop-share-wrapper) {
+    @media (min-width: tablet) {
+      position: static;
+    }
+  }
+}

package/components/Rows/AuthorIntroductionCard/author-intro.test.js

@@ -0,0 +1,148 @@
+import React from "react";
+import { mount } from "enzyme";
+import { AuthorIntroductionCard } from ".";
+import { generateStore, authorData } from "../../Fixture";
+import { Provider } from "react-redux";
+describe("Author Intro component", function () {
+  it("Should render default template with border, author bio and social-links enabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(7);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(1);
+  });
+  it("Should render default template with border, author bio and social-links disabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(0);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(0);
+  });
+  it("Should render square template with border, author bio and social-links enabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig,
+      template: "square"
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(7);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(1);
+  });
+  it("Should render square template with border, author bio and social-links disabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig,
+      template: "square"
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(0);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(0);
+  });
+  it("Should render small cirlce template with border, author bio and social-links enabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true,
+      borderSupport: true
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig,
+      template: "smallCircle"
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/small-circle/);
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/border/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(7);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(1);
+  });
+  it("Should render small cirlce template with border, author bio and social-links disabled", function () {
+    var contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false,
+      borderSupport: false
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+      data: authorData,
+      config: contextConfig,
+      template: "smallCircle"
+    }), ";"));
+    expect(wrapper.find({
+      "data-test-id": "author-intro"
+    }).prop("className")).toMatch(/small-circle/);
+    expect(wrapper.find({
+      "data-test-id": "social-link"
+    }).length).toBe(0);
+    expect(wrapper.find({
+      "data-test-id": "author-bio"
+    }).length).toBe(0);
+  });
+});

package/components/Rows/AuthorIntroductionCard/index.js

@@ -0,0 +1,157 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import { getTextColor, sharePageUrl, clientWidth } from "../../../utils/utils";
+import AuthorImage from "../../Atoms/AuthorImage";
+import { SocialShareTemplate } from "../../Molecules/SocialShareTemplate/index";
+import { SocialShare } from "@quintype/components";
+import "./author-intro.m.css";
+import { Facebook } from "../../Svgs/SocialIcons/facebook";
+import { Youtube } from "../../Svgs/SocialIcons/youtube";
+import { Twitter } from "../../Svgs/SocialIcons/twitter";
+import { LinkedIn } from "../../Svgs/SocialIcons/linkedin";
+import { Instagram } from "../../Svgs/SocialIcons/instagram";
+import { WhatsApp } from "../../Svgs/SocialIcons/whatsapp";
+import { Pinterest } from "../../Svgs/SocialIcons/pinterest";
+var _styleModuleImportMap = {
+  "./author-intro.m.css": {
+    "viewports": "\"../../../stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "tablet": "992px",
+    "connect": "author-intro-m_connect__15zIX",
+    "social-share": "author-intro-m_social-share__f5EpE",
+    "share-icon": "author-intro-m_share-icon__3gke5",
+    "default": "author-intro-m_default__1rQ_v",
+    "author-image": "author-intro-m_author-image__2jRxy",
+    "author-name": "author-intro-m_author-name__1L60a",
+    "author-description": "author-intro-m_author-description__2CTEw",
+    "wrapper": "author-intro-m_wrapper__2Bi-s",
+    "introduction-card": "author-intro-m_introduction-card__1kdGt",
+    "social-wrapper": "author-intro-m_social-wrapper__1F9jD",
+    "linkWrapper": "author-intro-m_linkWrapper__Au0nU",
+    "social-connect-wrapper": "author-intro-m_social-connect-wrapper__2B0QA",
+    "dark": "author-intro-m_dark__ALdDb",
+    "light": "author-intro-m_light__2SfeE",
+    "small-circle": "author-intro-m_small-circle__jyG1s",
+    "border": "author-intro-m_border__3Tii9",
+    "fade-out": "author-intro-m_fade-out__1EBqd"
+  }
+};
+export var AuthorIntroductionCard = function AuthorIntroductionCard(_ref) {
+  var _ref$data = _ref.data,
+      data = _ref$data === void 0 ? {} : _ref$data,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "" : _ref$template;
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$enableBio = config.enableBio,
+      enableBio = _config$enableBio === void 0 ? true : _config$enableBio,
+      _config$enableSocialL = config.enableSocialLinks,
+      enableSocialLinks = _config$enableSocialL === void 0 ? true : _config$enableSocialL,
+      _config$borderSupport = config.borderSupport,
+      borderSupport = _config$borderSupport === void 0 ? true : _config$borderSupport;
+  var textColor = getTextColor(theme);
+  var name = data.name,
+      bio = data.bio,
+      social = data.social;
+  var isSmallCircle = template === "smallCircle";
+  var authorCardStyle = isSmallCircle ? "small-circle" : "default";
+  var isMobile = clientWidth("mobile");
+  var isFullWidth = !isSmallCircle ? "full-width-with-padding" : "";
+  var supportBorder = isSmallCircle && borderSupport ? "border" : "";
+
+  var getIcon = function getIcon(item) {
+    switch (item) {
+      case "twitter":
+        return /*#__PURE__*/React.createElement(Twitter, null);
+
+      case "facebook":
+        return /*#__PURE__*/React.createElement(Facebook, null);
+
+      case "youtube":
+        return /*#__PURE__*/React.createElement(Youtube, null);
+
+      case "linkedin":
+        return /*#__PURE__*/React.createElement(LinkedIn, null);
+
+      case "whatsapp":
+        return /*#__PURE__*/React.createElement(WhatsApp, {
+          color: "#4AC959"
+        });
+
+      case "instagram":
+        return /*#__PURE__*/React.createElement(Instagram, null);
+
+      case "pinterest":
+        return /*#__PURE__*/React.createElement(Pinterest, null);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-intro",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    },
+    className: ("".concat(isFullWidth, " arrow-component arr--author-intro-card") ? "".concat(isFullWidth, " arrow-component arr--author-intro-card") + " " : "") + _getClassName("".concat(authorCardStyle, " ").concat(supportBorder, " ").concat(textColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arrow-author-intro-wrapper " + _getClassName("wrapper ".concat(textColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arrow-author-introduction-card author-intro-m_introduction-card__1kdGt"
+  }, isSmallCircle && isMobile ? null : /*#__PURE__*/React.createElement("h2", {
+    className: _getClassName("author-name ".concat(textColor), _styleModuleImportMap)
+  }, name), enableBio && bio && /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-bio",
+    className: _getClassName("author-description ".concat(textColor), _styleModuleImportMap)
+  }, bio, isSmallCircle && /*#__PURE__*/React.createElement("div", {
+    className: "author-intro-m_fade-out__1EBqd",
+    style: {
+      backgroundImage: "linear-gradient(to right, transparent, ".concat(theme, ")")
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "author-intro-m_social-wrapper__1F9jD"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "author-intro-m_social-connect-wrapper__2B0QA"
+  }, enableSocialLinks && social && /*#__PURE__*/React.createElement(React.Fragment, null, template !== "smallCircle" && /*#__PURE__*/React.createElement("div", {
+    className: _getClassName("connect ".concat(textColor), _styleModuleImportMap)
+  }, "Connect :"), Object.entries(social).map(function (item, index) {
+    return item.length > 0 && item[1] ? // can add Social Networks without the url so adding an additional check below
+    item[1].url ? /*#__PURE__*/React.createElement("a", {
+      "data-test-id": "social-link",
+      href: item[1].url,
+      key: "".concat(item, "-").concat(index),
+      rel: "noopener noreferrer",
+      target: "_blank",
+      className: "author-intro-m_social-share__f5EpE"
+    }, getIcon(item[0])) : null : null;
+  }))), !isSmallCircle && /*#__PURE__*/React.createElement(SocialShare, {
+    template: SocialShareTemplate,
+    fullUrl: sharePageUrl,
+    title: name,
+    theme: theme,
+    iconType: "plain-svg"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "arrow-author-image author-intro-m_author-image__2jRxy"
+  }, /*#__PURE__*/React.createElement(AuthorImage, {
+    author: data,
+    template: template
+  }), isSmallCircle && isMobile && /*#__PURE__*/React.createElement("h2", {
+    className: _getClassName("author-name ".concat(textColor), _styleModuleImportMap)
+  }, name))));
+};
+AuthorIntroductionCard.propTypes = {
+  data: PropTypes.shape({
+    name: PropTypes.string,
+    bio: PropTypes.string,
+    social: PropTypes.object
+  }),
+  config: PropTypes.shape({
+    theme: PropTypes.string,
+    enableBio: PropTypes.bool,
+    enableSocialLinks: PropTypes.bool,
+    borderSupport: PropTypes.bool
+  }),
+  template: PropTypes.string
+};

package/components/Rows/AuthorIntroductionCard/stories.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import { AuthorIntroductionCard } from "./index";
+import { color, boolean as _boolean } from "@storybook/addon-knobs";
+import { authorData } from "../../Fixture";
+import Readme from "./README.md";
+withStore("Rows/Author Introduction Card ", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("Default", function () {
+  var contextConfig = {
+    theme: color("Color", "#ffffff"),
+    enableBio: _boolean("Enable Bio", true),
+    enableSocialLinks: _boolean("Enable Social Links", true)
+  };
+  return /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+    data: authorData,
+    config: contextConfig
+  });
+}).add("Square", function () {
+  var contextConfig = {
+    theme: color("Color", "#ffffff"),
+    enableBio: _boolean("Enable Bio", true),
+    enableSocialLinks: _boolean("Enable Social Links", true)
+  };
+  return /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+    data: authorData,
+    config: contextConfig,
+    template: "square"
+  });
+}).add("Small Circle", function () {
+  var contextConfig = {
+    theme: color("Color", "#ffffff"),
+    enableBio: _boolean("Enable Bio", true),
+    enableSocialLinks: _boolean("Enable Social Links", true),
+    borderSupport: _boolean("With Border", true)
+  };
+  return /*#__PURE__*/React.createElement(AuthorIntroductionCard, {
+    data: authorData,
+    config: contextConfig,
+    template: "smallCircle"
+  });
+});

package/components/Rows/AuthorsList/README.md

@@ -0,0 +1,24 @@
+# Authors List
+
+Authors List is used to display the authors information which consists of name, bio with author image and social connect of the author.
+
+## Usage
+
+Import the AuthorsList and pass authorDetails as data and config.
+
+```jsx
+import { AuthorsList } from "@quintype/arrow";
+```
+
+### Use as a component
+
+```jsx
+const config = {
+  enableBio: boolean("Enable Bio", true),
+  buttonText: text("Footer text", "Load More"),
+  theme: color("color", "#ffffff")
+  enableSocialLinks: boolean("Enable Social Links", true)
+};
+limit = 9;
+<AuthorsList config={config} data={data} getMoreData={getMoreData} limit={limit} hideLoadmore={false} />;
+```