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

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

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

@@ -1,79 +0,0 @@
-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(config, ["showTime"], 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

@@ -1,27 +0,0 @@
-import React from "react";
-import { generateStory } from "../../Fixture";
-import { withStore } from "../../../../storybook";
-import { AuthorWithTime } from "./index";
-import Readme from "./README.md";
-
-const story = generateStory();
-const config = {
-  localizationConfig: {
-    localizedTimeToRead: "মিনিট পড়া"
-  }
-};
-
-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" />)
-  .add("Author with Localization Time", () => <AuthorWithTime story={story} config={config} />);

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

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

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

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

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

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

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

package/src/components/Atoms/CaptionAttribution/caption-attribution.test.js

@@ -1,29 +0,0 @@
-import React from "react";
-import { mount, shallow } from "enzyme";
-import { CaptionAttribution } from "./index";
-import { generateStory, generateStoryElementData } from "../../Fixture";
-
-describe("Caption Attribution Component", () => {
-  it("Should display the Caption and Attribution of Image element", () => {
-    const element = generateStoryElementData("image");
-    const wrapper = mount(<CaptionAttribution element={element} story="" />);
-    expect(wrapper.find({ "data-test-id": "caption" }).prop("className")).toMatch(/caption/);
-    // the below test is to check if the attribution is present
-    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/attribution/);
-    // the below test is to check if the caption is present
-    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/wrapper/);
-  });
-
-  it("Should display the Caption and Attribution of Story", () => {
-    const story = generateStory();
-    const wrapper = mount(<CaptionAttribution story={story} element="" />);
-    expect(wrapper.find({ "data-test-id": "caption" }).prop("className")).toMatch(/caption/);
-    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/attribution/);
-    expect(wrapper.find({ "data-test-id": "attribution" }).prop("className")).toMatch(/wrapper/);
-  });
-
-  test("Should not render the Caption and Attribution if the data is null", () => {
-    const component = shallow(<CaptionAttribution story="" element="" />);
-    expect(component.contains(<CaptionAttribution story="" element="" />)).toBe(false);
-  });
-});

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

@@ -1,40 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./caption-attribution.m.css";
-import { getTextColor, shapeStory } from "../../../utils/utils";
-import { useStateValue } from "../../SharedContext";
-
-export const CaptionAttribution = ({ story, element, config = {} }) => {
-  if (!(story || element)) return null;
-  const configData = useStateValue() || {};
-  const textColor = getTextColor(configData.theme);
-
-  const { "hero-image-caption": heroImageCaption = "", "hero-image-attribution": heroImageAttribution = "" } =
-    story || {};
-  const { title = "", "image-attribution": imageAttribution = "" } = element || {};
-
-  const caption = heroImageCaption || title;
-  const attribution = heroImageAttribution || imageAttribution;
-  const updateStyle = caption ? "wrapper" : "";
-  return (
-    <div data-test-id="caption" className="arr--caption-attribution" styleName={`caption ${textColor}`}>
-      <span dangerouslySetInnerHTML={{ __html: caption }} />
-      {attribution && (
-        <span
-          data-test-id="attribution"
-          styleName={`attribution ${textColor} ${updateStyle}`}
-          dangerouslySetInnerHTML={{ __html: attribution }}
-        />
-      )}
-    </div>
-  );
-};
-
-CaptionAttribution.propTypes = {
-  config: PropTypes.shape({ theme: PropTypes.string }),
-  story: shapeStory,
-  element: PropTypes.shape({
-    "image-attribution": PropTypes.string,
-    title: PropTypes.string
-  })
-};

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

@@ -1,40 +0,0 @@
-import React from "react";
-import { CaptionAttribution } from "./index";
-import Readme from "./README.md";
-import { withStore } from "../../../../storybook";
-import { color } from "@storybook/addon-knobs";
-import { generateStory, generateStoryElementData } from "../../Fixture";
-
-const story = generateStory();
-const element = generateStoryElementData("image");
-withStore("Atoms/Caption Attribution", Readme)
-  .add("Hero Image", () => {
-    const config = {
-      theme: color("BG Color", "#ffffff")
-    };
-    return <CaptionAttribution story={story} config={config} />;
-  })
-  .add("Image Element", () => {
-    const config = {
-      theme: color("BG Color", "#ffffff")
-    };
-    return <CaptionAttribution element={element} config={config} />;
-  })
-  .add("Caption", () => {
-    const config = {
-      theme: color("BG Color", "#ffffff")
-    };
-    const data = {
-      title: "Caption"
-    };
-    return <CaptionAttribution element={data} config={config} />;
-  })
-  .add("Attribution", () => {
-    const config = {
-      theme: color("BG Color", "#ffffff")
-    };
-    const data = {
-      "image-attribution": "Attribution"
-    };
-    return <CaptionAttribution element={data} config={config} />;
-  });

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

@@ -1,11 +0,0 @@
-# CollectionName
-
-Displays the collection name, usually for a Row, and links it to a collection or section page accordingly.
-
-## Usage 
-
-```jsx
-<CollectionName collection={collection} collectionNameTemplate="borderBottom">
-```
-
-<!-- PROPS -->

package/src/components/Atoms/CollectionName/collection-name.m.css

@@ -1,94 +0,0 @@
-@custom-media --viewport-medium (width >= 768px);
-
-.collection {
-  font-size: var(--arrow-fs-m);
-  margin-bottom: var(--arrow-spacing-m);
-  font-weight: var(--arrow-fw-bold);
-  @media (--viewport-medium) {
-    font-size: var(--arrow-fs-l);
-    margin-bottom: var(--arrow-spacing-l);
-  }
-}
-
-.collection-borderLeft {
-  display: flex;
-  align-items: baseline;
-
-  .border-left {
-    margin-right: var(--arrow-spacing-xs);
-    min-width: 5px;
-    width: 5px;
-    overflow: hidden;
-  }
-
-  .border-left::before {
-    content: "I";
-    font-family: var(--arrow-sans-serif);
-  }
-}
-
-.collection-borderBottomFull {
-  display: inline-block;
-}
-
-.collection-borderBottom {
-  display: block;
-}
-.collection-crossLine {
-  display: flex;
-  align-items: center;
-}
-.collection-crossLine:before {
-  content: " ";
-  position: relative;
-  flex: 1 1 auto;
-  border-top: 1px solid var(--arrow-c-mono5);
-  margin-right: var(--arrow-spacing-l);
-}
-.collection-crossLine:after {
-  content: " ";
-  position: relative;
-  flex: 1 1 auto;
-  border-top: 1px solid var(--arrow-c-mono5);
-  margin-left: var(--arrow-spacing-l);
-}
-
-html[dir="rtl"] {
-  .collection-borderLeft {
-    .border-left {
-      margin-right: 0;
-      margin-left: var(--arrow-spacing-xs);
-    }
-  }
-
-  .collection-crossLine:before {
-    margin-right: 0;
-    margin-left: var(--arrow-spacing-l);
-  }
-  .collection-crossLine:after {
-    margin-left: 0;
-    margin-right: var(--arrow-spacing-l);
-  }
-}
-
-.border-bottom {
-  width: 20px;
-  height: 4px;
-  margin-top: var(--arrow-spacing-xxs);
-}
-
-.collection-crossLine .border-bottom {
-  visibility: hidden;
-}
-.dark a,
-.dark h3,
-.dark h2,
-.dark h5 {
-  color: var(--arrow-c-mono2);
-}
-.light a,
-.light h3,
-.light h2,
-.light h5 {
-  color: var(--arrow-c-invert-mono2);
-}

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

@@ -1,143 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { PropTypes } from "prop-types";
-import { Link } from "@quintype/components";
-import { useStateValue } from "../../SharedContext";
-import get from "lodash.get";
-import { getTextColor, getSlug, rgbToHex, clientWidth } from "../../../utils/utils";
-
-import "./collection-name.m.css";
-
-export const CollectionNameBase = ({
-  collectionNameBorderColor = "",
-  collection,
-  config,
-  collectionNameTemplate,
-  headerLevel,
-  customCollectionName = "",
-  navigate = true
-}) => {
-  const collectionTitle = useStateValue() || {};
-  const showRowTitle = get(collectionTitle, ["showRowTitle"], true);
-  const supportedTemplates = ["borderLeft", "borderBottom", "crossLine", "borderBottomFull"];
-  const templateStyle = supportedTemplates.includes(collectionNameTemplate)
-    ? ` collection-${collectionNameTemplate}`
-    : "";
-  const slug = (navigate && collection && getSlug(collection, config)) || "";
-  const collectionName = customCollectionName || collection.name || "";
-  const textColor = getTextColor(collectionTitle.theme);
-  const HeaderTag = "h" + headerLevel;
-  const CollectionNameBorderColor = rgbToHex(collectionNameBorderColor);
-
-  const borderBottomFullStyle = templateStyle.includes("collection-borderBottomFull")
-    ? `4px solid ${CollectionNameBorderColor}`
-    : "";
-
-  const borderBottomStyle = () => {
-    return templateStyle.includes("collection-borderBottom") &&
-      !templateStyle.includes("collection-borderBottomFull") ? (
-      <div
-        styleName="border-bottom"
-        style={{
-          borderBottom: `4px solid ${CollectionNameBorderColor}`
-        }}></div>
-    ) : (
-      ""
-    );
-  };
-
-  const isMobile = clientWidth("mobile");
-
-  const getBorderHeight = () => {
-    if (isMobile) {
-      switch (headerLevel) {
-        case "1":
-          return "32px";
-        case "2":
-          return "24px";
-        case "3":
-          return "20px";
-        case "4":
-          return "18px";
-        case "5":
-          return "16px";
-        case "6":
-          return "16px";
-        default:
-          return "20px";
-      }
-    }
-    switch (headerLevel) {
-      case "1":
-        return "40px";
-      case "2":
-        return "32px";
-      case "3":
-        return "24px";
-      case "4":
-        return "20px";
-      case "5":
-        return "18px";
-      case "6":
-        return "16px";
-      default:
-        return "24px";
-    }
-  };
-  return (
-    <>
-      {showRowTitle && collectionName && (
-        <div
-          className={`arr--collection-name arrow-component ${templateStyle}`}
-          styleName={`collection ${textColor} ${templateStyle}`}
-          style={{
-            borderBottom: borderBottomFullStyle
-          }}
-          data-test-id="collection-name">
-          {templateStyle.includes("collection-borderLeft") && (
-            <span
-              styleName="border-left"
-              className="arr-collection-name-border-left"
-              style={{ color: CollectionNameBorderColor, fontSize: getBorderHeight() }}></span>
-          )}
-          {slug && !slug.includes(undefined) ? (
-            <Link href={slug} aria-label="collection-name">
-              <HeaderTag>{collectionName}</HeaderTag>
-            </Link>
-          ) : (
-            <HeaderTag>{collectionName}</HeaderTag>
-          )}
-          {borderBottomStyle()}
-        </div>
-      )}
-    </>
-  );
-};
-
-CollectionNameBase.propTypes = {
-  /** Collection name border color */
-  collectionNameBorderColor: PropTypes.string,
-  /** The Collection Object from the API response */
-  collection: PropTypes.object,
-  /** The publisher config from the API response */
-  config: PropTypes.object,
-  /** The style template for the component  */
-  collectionNameTemplate: PropTypes.oneOf(["", "borderLeft", "borderBottom", "crossLine", "borderBottomFull"]),
-  /** Header tags ranging h1-h6, where h[headerLevel] */
-  headerLevel: PropTypes.string,
-  customCollectionName: PropTypes.string,
-  navigate: PropTypes.bool
-};
-
-CollectionNameBase.defaultProps = {
-  collectionNameTemplate: "",
-  headerLevel: "3"
-};
-
-function mapStateToProps(state) {
-  return {
-    config: get(state, ["qt", "config"], {})
-  };
-}
-
-export const CollectionName = connect(mapStateToProps)(CollectionNameBase);

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

@@ -1,52 +0,0 @@
-import React from "react";
-
-import { CollectionName } from "./index.js";
-import { withStore, optionalSelect } from "../../../../storybook";
-
-import { generateCollection } from "../../Fixture";
-import { color } from "@storybook/addon-knobs";
-
-import Readme from "./README.md";
-const collection = generateCollection();
-
-const collectionTemplates = {
-  default: "default",
-  borderBottom: "borderBottom",
-  borderLeft: "borderLeft",
-  crossLine: "crossLine",
-  borderBottomFull: "borderBottomFull"
-};
-
-withStore(
-  "Atoms/collection Title",
-  {
-    qt: {
-      config: {
-        sections: [
-          {
-            "domain-slug": null,
-            slug: "health",
-            name: "Health",
-            "section-url": "https://ace-web.qtstage.io/health",
-            id: 11181,
-            "parent-id": null,
-            "display-name": "Health",
-            collection: {
-              slug: "health",
-              name: "Health",
-              id: 15603
-            },
-            data: null
-          }
-        ]
-      }
-    }
-  },
-  Readme
-).add("default", () => (
-  <CollectionName
-    collection={collection}
-    collectionNameTemplate={optionalSelect("templates", collectionTemplates)}
-    collectionNameBorderColor={color("color for border", "#333")}
-  />
-));