@quintype/arrow 3.0.0-spike-skeleton-layout.21 → 3.0.0

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider should render 1`] = `
+<div
+  className="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

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

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

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

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./divider.m.css";
+
+export const Divider = ({ width = "1", height = "10", color = "light" }) => {
+  return (
+    <div 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

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./dot.m.css";
+
+export const Dot = ({ width = "3px", height = "3px", color = "light" }) => {
+  return (
+    <div 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

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

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

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

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

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

@@ -0,0 +1,112 @@
+/*
+ *  ************************************************************************
+ *  *  © [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"));
+    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, 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
+};