@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1-version-upgrade.2

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

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

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

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

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

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

@@ -1,50 +0,0 @@
-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);
-  });
-});