@quintype/arrow 3.15.1-perf.3 → 3.15.1-perf.7

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { mount, shallow } from "enzyme";
+import { CaptionAttribution } from "./index";
+import { generateStory, generateStoryElementData } from "../../Fixture";
+describe("Caption Attribution Component", function () {
+  it("Should display the Caption and Attribution of Image element", function () {
+    var element = generateStoryElementData("image");
+    var wrapper = mount( /*#__PURE__*/React.createElement(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", function () {
+    var story = generateStory();
+    var wrapper = mount( /*#__PURE__*/React.createElement(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", function () {
+    var component = shallow( /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: "",
+      element: ""
+    }));
+    expect(component.contains( /*#__PURE__*/React.createElement(CaptionAttribution, {
+      story: "",
+      element: ""
+    }))).toBe(false);
+  });
+});

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

@@ -0,0 +1,66 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import "./caption-attribution.m.css";
+import { getTextColor, shapeStory } from "../../../utils/utils";
+import { useStateValue } from "../../SharedContext";
+var _styleModuleImportMap = {
+  "./caption-attribution.m.css": {
+    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "caption": "caption-attribution-m_caption__BM5NN",
+    "wrapper": "caption-attribution-m_wrapper__oHBX7",
+    "dark": "caption-attribution-m_dark__uER8u",
+    "attribution": "caption-attribution-m_attribution__279W9",
+    "light": "caption-attribution-m_light__19OWp"
+  }
+};
+export var CaptionAttribution = function CaptionAttribution(_ref) {
+  var story = _ref.story,
+      element = _ref.element,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  if (!(story || element)) return null;
+  var configData = useStateValue() || {};
+  var textColor = getTextColor(configData.theme);
+
+  var _ref2 = story || {},
+      _ref2$heroImageCapt = _ref2["hero-image-caption"],
+      heroImageCaption = _ref2$heroImageCapt === void 0 ? "" : _ref2$heroImageCapt,
+      _ref2$heroImageAttr = _ref2["hero-image-attribution"],
+      heroImageAttribution = _ref2$heroImageAttr === void 0 ? "" : _ref2$heroImageAttr;
+
+  var _ref3 = element || {},
+      _ref3$title = _ref3.title,
+      title = _ref3$title === void 0 ? "" : _ref3$title,
+      _ref3$imageAttributi = _ref3["image-attribution"],
+      imageAttribution = _ref3$imageAttributi === void 0 ? "" : _ref3$imageAttributi;
+
+  var caption = heroImageCaption || title;
+  var attribution = heroImageAttribution || imageAttribution;
+  var updateStyle = caption ? "wrapper" : "";
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "caption",
+    className: "arr--caption-attribution " + _getClassName("caption ".concat(textColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: caption
+    }
+  }), attribution && /*#__PURE__*/React.createElement("span", {
+    "data-test-id": "attribution",
+    dangerouslySetInnerHTML: {
+      __html: attribution
+    },
+    className: _getClassName("attribution ".concat(textColor, " ").concat(updateStyle), _styleModuleImportMap)
+  }));
+};
+CaptionAttribution.propTypes = {
+  config: PropTypes.shape({
+    theme: PropTypes.string
+  }),
+  story: shapeStory,
+  element: PropTypes.shape({
+    "image-attribution": PropTypes.string,
+    title: PropTypes.string
+  })
+};

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

@@ -0,0 +1,47 @@
+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";
+var story = generateStory();
+var element = generateStoryElementData("image");
+withStore("Atoms/Caption Attribution", Readme).add("Hero Image", function () {
+  var config = {
+    theme: color("BG Color", "#ffffff")
+  };
+  return /*#__PURE__*/React.createElement(CaptionAttribution, {
+    story: story,
+    config: config
+  });
+}).add("Image Element", function () {
+  var config = {
+    theme: color("BG Color", "#ffffff")
+  };
+  return /*#__PURE__*/React.createElement(CaptionAttribution, {
+    element: element,
+    config: config
+  });
+}).add("Caption", function () {
+  var config = {
+    theme: color("BG Color", "#ffffff")
+  };
+  var data = {
+    title: "Caption"
+  };
+  return /*#__PURE__*/React.createElement(CaptionAttribution, {
+    element: data,
+    config: config
+  });
+}).add("Attribution", function () {
+  var config = {
+    theme: color("BG Color", "#ffffff")
+  };
+  var data = {
+    "image-attribution": "Attribution"
+  };
+  return /*#__PURE__*/React.createElement(CaptionAttribution, {
+    element: data,
+    config: config
+  });
+});

package/esm/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/esm/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/esm/components/Atoms/CollectionName/index.js

@@ -0,0 +1,152 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+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";
+import { getTextColor, getSlug, rgbToHex, clientWidth } from "../../../utils/utils";
+import "./collection-name.m.css";
+var _styleModuleImportMap = {
+  "./collection-name.m.css": {
+    "collection": "collection-name-m_collection__JD6sx",
+    "collection-borderLeft": "collection-name-m_collection-borderLeft__3Dznk",
+    "border-left": "collection-name-m_border-left__3_pYw",
+    "collection-borderBottomFull": "collection-name-m_collection-borderBottomFull__Dkq3K",
+    "collection-borderBottom": "collection-name-m_collection-borderBottom__2rdQM",
+    "collection-crossLine": "collection-name-m_collection-crossLine__1sIpN",
+    "border-bottom": "collection-name-m_border-bottom__1MnlV",
+    "dark": "collection-name-m_dark__nMe5H",
+    "light": "collection-name-m_light__1vFDN"
+  }
+};
+export var CollectionNameBase = function CollectionNameBase(_ref) {
+  var _ref$collectionNameBo = _ref.collectionNameBorderColor,
+      collectionNameBorderColor = _ref$collectionNameBo === void 0 ? "" : _ref$collectionNameBo,
+      collection = _ref.collection,
+      config = _ref.config,
+      collectionNameTemplate = _ref.collectionNameTemplate,
+      headerLevel = _ref.headerLevel,
+      _ref$customCollection = _ref.customCollectionName,
+      customCollectionName = _ref$customCollection === void 0 ? "" : _ref$customCollection,
+      _ref$navigate = _ref.navigate,
+      navigate = _ref$navigate === void 0 ? true : _ref$navigate;
+  var collectionTitle = useStateValue() || {};
+  var showRowTitle = get(collectionTitle, ["showRowTitle"], true);
+  var supportedTemplates = ["borderLeft", "borderBottom", "crossLine", "borderBottomFull"];
+  var templateStyle = supportedTemplates.includes(collectionNameTemplate) ? " collection-".concat(collectionNameTemplate) : "";
+  var slug = navigate && collection && getSlug(collection, config) || "";
+  var collectionName = customCollectionName || collection.name || "";
+  var textColor = getTextColor(collectionTitle.theme);
+  var HeaderTag = "h" + headerLevel;
+  var CollectionNameBorderColor = rgbToHex(collectionNameBorderColor);
+  var borderBottomFullStyle = templateStyle.includes("collection-borderBottomFull") ? "4px solid ".concat(CollectionNameBorderColor) : "";
+
+  var borderBottomStyle = function borderBottomStyle() {
+    return templateStyle.includes("collection-borderBottom") && !templateStyle.includes("collection-borderBottomFull") ? /*#__PURE__*/React.createElement("div", {
+      className: "collection-name-m_border-bottom__1MnlV",
+      style: {
+        borderBottom: "4px solid ".concat(CollectionNameBorderColor)
+      }
+    }) : "";
+  };
+
+  var isMobile = clientWidth("mobile");
+
+  var getBorderHeight = function 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 /*#__PURE__*/React.createElement(React.Fragment, null, showRowTitle && collectionName && /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderBottom: borderBottomFullStyle
+    },
+    "data-test-id": "collection-name",
+    className: ("arr--collection-name arrow-component ".concat(templateStyle) ? "arr--collection-name arrow-component ".concat(templateStyle) + " " : "") + _getClassName("collection ".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap)
+  }, templateStyle.includes("collection-borderLeft") && /*#__PURE__*/React.createElement("span", {
+    className: "arr-collection-name-border-left collection-name-m_border-left__3_pYw",
+    style: {
+      color: CollectionNameBorderColor,
+      fontSize: getBorderHeight()
+    }
+  }), slug && !slug.includes(undefined) ? /*#__PURE__*/React.createElement(Link, {
+    href: slug,
+    "aria-label": "collection-name"
+  }, /*#__PURE__*/React.createElement(HeaderTag, null, collectionName)) : /*#__PURE__*/React.createElement(HeaderTag, null, collectionName), borderBottomStyle()));
+};
+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 var CollectionName = connect(mapStateToProps)(CollectionNameBase);

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

@@ -0,0 +1,41 @@
+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";
+var collection = generateCollection();
+var 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", function () {
+  return /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: optionalSelect("templates", collectionTemplates),
+    collectionNameBorderColor: color("color for border", "#333")
+  });
+});

package/esm/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/esm/components/Atoms/Divider/divider.m.css

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { Divider } from ".";
+describe("Divider", function () {
+  it("should render", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Divider, null));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,34 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import "./divider.m.css";
+var _styleModuleImportMap = {
+  "./divider.m.css": {
+    "dark": "divider-m_dark__26FRi",
+    "light": "divider-m_light__w-7sy"
+  }
+};
+export var Divider = function Divider(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "1" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "10" : _ref$height,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "light" : _ref$color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _getClassName(color, _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "inherit",
+    d: "M0 0h1v10H0z"
+  })));
+};
+Divider.propTypes = {
+  /** height , width and color of the dot icon */
+  color: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string
+};

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

@@ -0,0 +1,39 @@
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+import React from "react";
+import PropTypes from "prop-types";
+import "./dot.m.css";
+var _styleModuleImportMap = {
+  "./dot.m.css": {
+    "dark": "dot-m_dark__1Njxl",
+    "light": "dot-m_light__27IA3"
+  }
+};
+export var Dot = function Dot(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "3px" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "3px" : _ref$height,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "light" : _ref$color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _getClassName(color, _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 3 3"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "87",
+    cy: "9",
+    r: "1",
+    fill: "inherit",
+    fillRule: "nonzero",
+    transform: "translate(-86 -8)"
+  })));
+};
+Dot.propTypes = {
+  /** height , width and color of the dot icon */
+  color: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string
+};

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

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

package/esm/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/esm/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/esm/components/Atoms/ExtendedLoadMore/extended-load-more.test.js

@@ -0,0 +1,14 @@
+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", function () {
+  it("Should render extended load more button", function () {
+    /* Useless test */
+    var wrapper = renderer.create( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(ExtendedLoadMore, null))).toJSON();
+    expect(wrapper).toMatchSnapshot();
+  });
+});