@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

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

@@ -0,0 +1,334 @@
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+@value desktop 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;
+  width: 164px;
+  height: 164px;
+  @media (min-width: mobile) {
+    grid-column: 8/12;
+    width: 224px;
+    height: 224px;
+  }
+  @media (min-width: tablet) {
+    width: 364px;
+    height: 364px;
+  }
+}
+
+.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);
+  min-height: 291px; /* Added to fix cls issue */
+  @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;
+    min-height: 401px; /* Added to fix cls issue */
+  }
+}
+
+.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);
+  text-transform: capitalize;
+  margin-left: var(--arrow-spacing-l);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    margin-top: var(--arrow-spacing-m);
+    margin-left: 0;
+  }
+}
+
+.default .introduction-card {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  flex-direction: column;
+  .author-name {
+    text-transform: capitalize;
+    min-height: 28px; /* Added to fix cls issues */
+  }
+  @media (min-width: mobile) {
+    grid-column: 2/8;
+    .author-name {
+      min-height: 40px; /* Added to fix cls issues */
+    }
+  }
+  @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) {
+    margin: auto;
+    width: 160px;
+    height: 160px;
+    justify-content: center;
+  }
+}
+
+.small-circle .social-wrapper {
+  @media (min-width: mobile) {
+    justify-content: center;
+  }
+}
+
+.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="ltr"] {
+  .social-wrapper :global(.arr--share) {
+    position: fixed;
+    right: 16px;
+    bottom: 64px;
+    @media (min-width: desktop) {
+      left: 0;
+      right: unset;
+      top: 120px;
+      bottom: unset;
+    }
+  }
+}
+
+html[dir="rtl"] {
+  .default :global(.desktop-share-wrapper) {
+    @media (min-width: tablet) {
+      position: static;
+    }
+  }
+
+  .small-circle .author-name {
+    margin-right: var(--arrow-spacing-l);
+    @media (min-width: mobile) {
+      margin-right: 0;
+    }
+  }
+
+  .social-wrapper :global(.arr--share) {
+    position: fixed;
+    left: 16px;
+    bottom: 64px;
+    @media (min-width: desktop) {
+      right: 0;
+      left: unset;
+      top: 120px;
+      bottom: unset;
+    }
+  }
+}

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

@@ -0,0 +1,106 @@
+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", () => {
+  it("Should render default template with border, author bio and social-links enabled", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} />;
+      </Provider>
+    );
+    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", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} />;
+      </Provider>
+    );
+    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", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} template="square" />;
+      </Provider>
+    );
+    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", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} template="square" />;
+      </Provider>
+    );
+    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", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: true,
+      enableSocialLinks: true,
+      borderSupport: true
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} template="smallCircle" />;
+      </Provider>
+    );
+    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", () => {
+    const contextConfig = {
+      theme: "#ffffff",
+      enableBio: false,
+      enableSocialLinks: false,
+      borderSupport: false
+    };
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorIntroductionCard data={authorData} config={contextConfig} template="smallCircle" />;
+      </Provider>
+    );
+    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/src/components/Rows/AuthorIntroductionCard/index.js

@@ -0,0 +1,126 @@
+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/plain/facebook";
+import { Youtube } from "../../Svgs/SocialIcons/plain/youtube";
+import { Twitter } from "../../Svgs/SocialIcons/plain/twitter";
+import { LinkedIn } from "../../Svgs/SocialIcons/plain/linkedin";
+import { Instagram } from "../../Svgs/SocialIcons/plain/instagram";
+import { WhatsApp } from "../../Svgs/SocialIcons/plain/whatsapp";
+import { Pinterest } from "../../Svgs/SocialIcons/plain/pinterest";
+
+const AuthorIntroductionCard = ({ data = {}, config = {}, template = "" }) => {
+  const { theme = "", enableBio = true, enableSocialLinks = true, borderSupport = true, customConnect = "" } = config;
+  const textColor = getTextColor(theme);
+  const { name, bio, social } = data;
+  const isSmallCircle = template === "smallCircle";
+  const authorCardStyle = isSmallCircle ? "small-circle" : "default";
+  const isMobile = clientWidth("mobile");
+  const isFullWidth = !isSmallCircle ? "full-width-with-padding" : "";
+  const supportBorder = isSmallCircle && borderSupport ? "border" : "";
+
+  const getIcon = (item) => {
+    switch (item) {
+      case "twitter":
+        return <Twitter color={textColor === "dark" ? "#000" : "#fff"} />;
+      case "facebook":
+        return <Facebook />;
+      case "youtube":
+        return <Youtube />;
+      case "linkedin":
+        return <LinkedIn />;
+      case "whatsapp":
+        return <WhatsApp color="#4AC959" />;
+      case "instagram":
+        return <Instagram />;
+      case "pinterest":
+        return <Pinterest />;
+    }
+  };
+
+  return (
+    <div
+      data-test-id="author-intro"
+      className={`${isFullWidth} arrow-component arr--author-intro-card`}
+      styleName={`${authorCardStyle} ${supportBorder} ${textColor}`}
+      style={{ backgroundColor: theme || "initial" }}>
+      <div styleName={`wrapper ${textColor}`} className="arrow-author-intro-wrapper">
+        <div styleName="introduction-card" className="arrow-author-introduction-card">
+          {isSmallCircle && isMobile ? null : <h1 styleName={`author-name ${textColor}`}>{name}</h1>}
+          {enableBio && bio && (
+            <div data-test-id="author-bio" styleName={`author-description ${textColor}`}>
+              {bio}
+              {isSmallCircle && (
+                <div
+                  styleName="fade-out"
+                  style={{
+                    backgroundImage: `linear-gradient(to right, transparent, ${theme})` || "initial"
+                  }}></div>
+              )}
+            </div>
+          )}
+          <div styleName="social-wrapper">
+            <div styleName="social-connect-wrapper">
+              {enableSocialLinks && social && (
+                <>
+                  {template !== "smallCircle" && (
+                    <div styleName={`connect ${textColor}`}>{customConnect || "Connect"}:</div>
+                  )}
+                  {Object.entries(social).map((item, index) =>
+                    item.length > 0 && item[1] ? (
+                      // can add Social Networks without the url so adding an additional check below
+                      item[1].url ? (
+                        <span>
+                          <a
+                            data-test-id="social-link"
+                            href={item[1].url}
+                            key={`${item}-${index}`}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                            styleName="social-share">
+                            {getIcon(item[0])}
+                          </a>
+                        </span>
+                      ) : null
+                    ) : null
+                  )}
+                </>
+              )}
+            </div>
+            {!isSmallCircle && (
+              <SocialShare
+                template={SocialShareTemplate}
+                fullUrl={sharePageUrl}
+                title={name}
+                theme={theme}
+                socialShareStyle="sticky"
+                displayDefaultIcons
+              />
+            )}
+          </div>
+        </div>
+        <div styleName="author-image" className="arrow-author-image">
+          <AuthorImage author={data} template={template} />
+          {isSmallCircle && isMobile && <h1 styleName={`author-name ${textColor}`}>{name}</h1>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+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,
+    customConnect: PropTypes.string
+  }),
+  template: PropTypes.string
+};
+export default AuthorIntroductionCard;

package/src/components/Rows/AuthorIntroductionCard/stories.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { withStore } from "../../../../storybook";
+import AuthorIntroductionCard from "./index";
+import { color, 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", () => {
+    const contextConfig = {
+      theme: color("Color", "#ffffff"),
+      enableBio: boolean("Enable Bio", true),
+      enableSocialLinks: boolean("Enable Social Links", true)
+    };
+    return <AuthorIntroductionCard data={authorData} config={contextConfig} />;
+  })
+  .add("Square", () => {
+    const contextConfig = {
+      theme: color("Color", "#ffffff"),
+      enableBio: boolean("Enable Bio", true),
+      enableSocialLinks: boolean("Enable Social Links", true)
+    };
+    return <AuthorIntroductionCard data={authorData} config={contextConfig} template="square" />;
+  })
+  .add("Small Circle", () => {
+    const contextConfig = {
+      theme: color("Color", "#ffffff"),
+      enableBio: boolean("Enable Bio", true),
+      enableSocialLinks: boolean("Enable Social Links", true),
+      borderSupport: boolean("With Border", true)
+    };
+    return <AuthorIntroductionCard data={authorData} config={contextConfig} template="smallCircle" />;
+  });

package/src/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} />;
+```

package/src/components/Rows/AuthorsList/author-list.test.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { mount } from "enzyme";
+import { LoadmoreButton } from "../../Atoms/Loadmore";
+import AuthorsList from ".";
+import { generateStore, authorData } from "../../Fixture";
+import { Provider } from "react-redux";
+
+const getMoreData = () => {
+  console.log("load more data");
+};
+
+const AuthorsData = Array(8).fill(authorData);
+
+describe("Authors List component", () => {
+  it("Should render authors list component if data is present", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorsList data={AuthorsData} config={{}} getMoreData={getMoreData} hideLoadmore={false} limit={9} />;
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "authors-list" }).prop("className")).toMatch(/arr--authors-list/);
+  });
+
+  it("Should not render authors list component if data is absent", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorsList data={[]} config={{}} getMoreData={getMoreData} hideLoadmore={false} limit={9} />;
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "authors-list" }).length).toBe(0);
+  });
+
+  it("Should render Authors List component with Load More disabled", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorsList data={AuthorsData} config={{}} getMoreData={getMoreData} hideLoadmore={true} limit={9} />; );
+      </Provider>
+    );
+    expect(wrapper.find(LoadmoreButton).length).toEqual(0);
+  });
+
+  it("Should render Authors List component with Load More enabled", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AuthorsList data={AuthorsData} config={{}} getMoreData={getMoreData} hideLoadmore={false} limit={9} />; );
+      </Provider>
+    );
+    expect(wrapper.find(LoadmoreButton).length).toEqual(1);
+  });
+});