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

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,106 +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;
-  margin-right: var(--arrow-spacing-l);
-}
-.collection-crossLine:after {
-  content: " ";
-  position: relative;
-  flex: 1 1 auto;
-  margin-left: var(--arrow-spacing-l);
-}
-
-.dark.collection-crossLine:before {
-  border-top: 1px solid var(--arrow-c-mono5);
-}
-.light.collection-crossLine:before {
-  border-top: 1px solid var(--arrow-c-invert-mono2);
-}
-
-.dark.collection-crossLine:after {
-  border-top: 1px solid var(--arrow-c-mono5);
-}
-.light.collection-crossLine:after {
-  border-top: 1px solid var(--arrow-c-invert-mono2);
-}
-
-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,147 +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}`
-    : "none";
-
-  const borderBottomStyle = () => {
-    return templateStyle.includes("collection-borderBottom") &&
-      !templateStyle.includes("collection-borderBottomFull") ? (
-      <div
-        styleName="border-bottom"
-        style={{
-          borderBottom: CollectionNameBorderColor ? `4px solid ${CollectionNameBorderColor}` : "none"
-        }}></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 ${templateStyle} ${textColor}`}
-          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 || "initial",
-                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: "2"
-};
-
-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")}
-  />
-));

package/src/components/Atoms/Divider/__snapshots__/divider.test.js.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Divider should render 1`] = `
-<div
-  className="arr--divider divider-m_light__w-7sy"
->
-  <svg
-    height="10"
-    width="1"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0 0h1v10H0z"
-      fill="inherit"
-    />
-  </svg>
-</div>
-`;

package/src/components/Atoms/Divider/divider.m.css

@@ -1,6 +0,0 @@
-.dark {
-  fill: var(--arrow-c-mono4);
-}
-.light {
-  fill: var(--arrow-c-invert-mono4);
-}

package/src/components/Atoms/Divider/divider.test.js

@@ -1,10 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { Divider } from ".";
-
-describe("Divider", () => {
-  it("should render", () => {
-    const wrapper = shallow(<Divider />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

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

@@ -1,20 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./divider.m.css";
-
-export const Divider = ({ width = "1", height = "10", color = "light" }) => {
-  return (
-    <div className="arr--divider" styleName={color}>
-      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height}>
-        <path fill="inherit" d="M0 0h1v10H0z"></path>
-      </svg>
-    </div>
-  );
-};
-
-Divider.propTypes = {
-  /** height , width and color of the dot icon */
-  color: PropTypes.string,
-  width: PropTypes.string,
-  height: PropTypes.string
-};

package/src/components/Atoms/Dot/dot.js

@@ -1,20 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./dot.m.css";
-
-export const Dot = ({ width = "3px", height = "3px", color = "light" }) => {
-  return (
-    <div className="arr--dot" styleName={color}>
-      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 3 3">
-        <circle cx="87" cy="9" r="1" fill="inherit" fillRule="nonzero" transform="translate(-86 -8)" />
-      </svg>
-    </div>
-  );
-};
-
-Dot.propTypes = {
-  /** height , width and color of the dot icon */
-  color: PropTypes.string,
-  width: PropTypes.string,
-  height: PropTypes.string
-};

package/src/components/Atoms/Dot/dot.m.css

@@ -1,6 +0,0 @@
-.dark {
-  fill: var(--arrow-c-mono4);
-}
-.light {
-  fill: var(--arrow-c-invert-mono4);
-}

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

@@ -1,9 +0,0 @@
-# Extended Load More
-
-Used for performance gains whilst to help with selective hydration
-
-## Usage 
-
-```jsx
-renderComponent(ExtendedLoadMore, elementId, store, { config, componentName: layout });
-```

package/src/components/Atoms/ExtendedLoadMore/__snapshots__/extended-load-more.test.js.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Extended Load more button Should render extended load more button 1`] = `
-<div
-  className="arr--button load-more-m_button__1mmf1 load-more-m_dark__3dfzb load-more-m_default__2_k4V"
-  onClick={[Function]}
-  style={Object {}}
->
-  Read More
-</div>
-`;

package/src/components/Atoms/ExtendedLoadMore/extended-load-more.test.js

@@ -1,19 +0,0 @@
-import * as React from "react";
-import renderer from "react-test-renderer";
-import { ExtendedLoadMore } from "./index";
-import { Provider } from "react-redux";
-import { generateStore } from "../../Fixture";
-
-describe("Extended Load more button", () => {
-  it("Should render extended load more button", () => {
-    /* Useless test */
-    const wrapper = renderer
-      .create(
-        <Provider store={generateStore}>
-          <ExtendedLoadMore />
-        </Provider>
-      )
-      .toJSON();
-    expect(wrapper).toMatchSnapshot();
-  });
-});

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

@@ -1,114 +0,0 @@
-/*
- *  ************************************************************************
- *  *  © [2015 - 2020] Quintype Technologies India Private Limited
- *  *  All Rights Reserved.
- *  *************************************************************************
- */
-import get from "lodash/get";
-import PropTypes from "prop-types";
-import React, { lazy, Suspense, useState } from "react";
-import { getTextColor } from "../../../utils/utils";
-import "./../Loadmore/load-more.m.css";
-
-const getTemplate = (templateName) => {
-  switch (templateName) {
-    case "ArrowFourColGrid":
-      return lazy(() => import("../../Rows/FourColGrid"));
-    case "ArrowThreeColGrid":
-      return lazy(() => import("../../Rows/ThreeColGrid"));
-    case "ArrowOneColStoryList":
-      return lazy(() => import("../../Rows/OneColStoryList"));
-    case "ArrowFourColFiveStories":
-      return lazy(() => import("../../Rows/FourColFiveStories"));
-    case "ArrowOpinionCollection":
-      return lazy(() => import("../../Rows/OpinionCollection"));
-    case "ArrowSixColSixStories":
-      return lazy(() => import("../../Rows/SixColSixStories"));
-    case "ArrowThreeColFlexStories":
-      return lazy(() => import("../../Rows/ThreeColFlexStories"));
-    case "ArrowFourColPortraitStories":
-      return lazy(() => import("../../Rows/FourColPortraitStories"));
-    default:
-      return lazy(() => import("../../Rows/ThreeColGrid"));
-  }
-};
-
-export const ExtendedLoadMore = ({ config, componentName, WithArrowConfig, withSubsequentLoad }) => {
-  const showButton = get(config, ["showButton"], true);
-  const btnText = get(config, ["buttonText"], "Read More");
-  const theme = get(config, ["theme"], "");
-  const textColor = getTextColor(theme);
-
-  /* Open an array to maintain load-more initiated components to re-render */
-  const [components, setComponents] = useState([]);
-
-  const addComponent = async (event) => {
-    event.persist();
-    const collectionSlug = event.target.parentElement.getAttribute("data-collection-slug");
-    const offset = event.target.parentElement.getAttribute("data-collection-offset");
-    const limit = event.target.parentElement.getAttribute("data-collection-limit");
-
-    const Component = getTemplate(componentName);
-
-    const { items } = await (await fetch(
-      `/api/v1/collections/${collectionSlug}?item-type=story&offset=${offset}&limit=${limit}`
-    )).json();
-
-    if (items.length) {
-      const updatedOffset = parseInt(offset) + parseInt(limit);
-      event.target.parentElement.setAttribute("data-collection-offset", updatedOffset);
-    }
-
-    const updatedCompList = [
-      ...components,
-      {
-        // Passing a number below the initial collection length (which we will not know here)
-        // as the second parameter causes the Load More button to be rendered regardless of
-        // the value given to `isLoadMoreVisible`. Since this paramter will be ignored anyway,
-        // we pass in a number that is sufficiently always larger.
-        Component: WithArrowConfig(withSubsequentLoad(Component, limit || 10, true)),
-        props: {
-          collection: {
-            items
-          },
-          isLoadMoreVisible: false,
-          config
-        },
-        componentName
-      }
-    ];
-
-    setComponents(updatedCompList);
-  };
-
-  if (!showButton) return null;
-
-  /* TODO: !HACK! Remove this line post deployment */
-  const componentStyles = (componentName) => (componentName === "ArrowOneColStoryList" ? { marginLeft: 0 } : {});
-
-  return (
-    <>
-      {components.map(({ Component, props }, index) => (
-        <div style={{ maxWidth: 1172, margin: "auto" }} key={`extendedLoadMoreBase-key-${index}`}>
-          <Suspense fallback={<div>Loading...</div>}>
-            <Component {...props} />
-          </Suspense>
-        </div>
-      ))}
-      <div
-        className="arr--button"
-        styleName={`button ${textColor} default`}
-        style={componentStyles(componentName)}
-        onClick={addComponent}>
-        {btnText}
-      </div>
-    </>
-  );
-};
-
-ExtendedLoadMore.propTypes = {
-  componentName: PropTypes.string,
-  config: PropTypes.object,
-  WithArrowConfig: PropTypes.func,
-  withSubsequentLoad: PropTypes.func
-};

package/src/components/Atoms/FallbackImage/fallback.m.css

@@ -1,33 +0,0 @@
-.image-position {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-}
-
-.image {
-  composes: image-position;
-  background: var(--fallback-img);
-}
-
-.image::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent 50%, transparent); */
-}
-
-.fallback-svg svg {
-  object-fit: cover;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  height: 100%;
-}