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

package/esm/components/Atoms/StoryElements/Quote/index.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "template", "css", "story", "config", "render"];
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./quote.m.css": {
+    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "quote": "quote-m_quote__13tTt",
+    "text": "quote-m_text__2hXSE",
+    "quote-borderNone": "quote-m_quote-borderNone__2EuoK",
+    "quote-borderTopSmall": "quote-m_quote-borderTopSmall__2DN-3",
+    "quote-borderLeft": "quote-m_quote-borderLeft__3QaAY",
+    "dark": "quote-m_dark__1migZ",
+    "light": "quote-m_light__30NnM",
+    "attribution": "quote-m_attribution__20Y6O",
+    "line": "quote-m_line__3gtoE"
+  }
+};
+import React from "react";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import "./quote.m.css";
+import { shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
+
+var QuoteBase = function QuoteBase(_ref) {
+  var element = _ref.element,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "" : _ref$template,
+      _ref$css = _ref.css,
+      css = _ref$css === void 0 ? {} : _ref$css,
+      _ref$story = _ref.story,
+      story = _ref$story === void 0 ? {} : _ref$story,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      render = _ref.render,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var configData = useStateValue() || {};
+  var textInvertColor = getTextColor(configData.theme);
+  var _element$metadata = element.metadata,
+      content = _element$metadata.content,
+      attribution = _element$metadata.attribution;
+  if (!content) return null;
+  var borderColor = css.borderColor;
+  var updateBorderColor = template === "borderLeft" && "4px solid ".concat(borderColor);
+  var templateStyle = template ? "quote-".concat(template) : "quote";
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-test-id": "quote"
+  }, restProps, {
+    className: "arrow-component arr--quote-element " + _getClassName(templateStyle, _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
+  }), template === "borderTopSmall" && /*#__PURE__*/React.createElement("div", {
+    className: "quote-m_line__3gtoE",
+    style: borderColor && {
+      backgroundColor: borderColor
+    }
+  }), /*#__PURE__*/React.createElement("p", {
+    style: borderColor && {
+      borderLeft: updateBorderColor
+    },
+    dangerouslySetInnerHTML: {
+      __html: content
+    },
+    className: _getClassName("text ".concat(textInvertColor), _styleModuleImportMap)
+  }), /*#__PURE__*/React.createElement("p", {
+    "data-test-id": "quote-attribution",
+    className: _getClassName("attribution ".concat(textInvertColor), _styleModuleImportMap)
+  }, attribution));
+};
+
+QuoteBase.propTypes = {
+  element: PropTypes.shape({
+    metadata: PropTypes.shape({
+      content: PropTypes.string,
+      attribution: PropTypes.string
+    })
+  }),
+
+  /** template can be default, borderTopSmall and borderLeft  */
+  template: PropTypes.string,
+  story: shapeStory,
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.object
+};
+export var Quote = withElementWrapper(QuoteBase);

package/esm/components/Atoms/StoryElements/Quote/quote.m.css

@@ -0,0 +1,111 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.quote .text,
+.quote-borderNone .text,
+.quote-borderTopSmall .text,
+.quote-borderLeft .text,
+.dark {
+  font-weight: var(--arrow-fw-semi-bold);
+  color: var(--arrow-c-mono2);
+  line-height: var(--arrow-lh-5);
+  font-size: var(--arrow-fs-m);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.quote .text.light,
+.quote-borderNone .text.light,
+.quote-borderTopSmall .text.light,
+.quote-borderLeft .text.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.quote .text,
+.quote-borderNone .text {
+  font-style: italic;
+}
+
+.quote-borderLeft .text {
+  border-left: 4px solid var(--arrow-c-brand1);
+  padding-left: var(--arrow-spacing-l);
+}
+
+.quote .attribution,
+.quote-borderNone .attribution,
+.quote-borderLeft .attribution,
+.quote-borderTopSmall .attribution,
+.dark {
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-semi-bold);
+  font-family: var(--arrow-typeface-secondary);
+  color: var(--arrow-c-mono4);
+  font-style: italic;
+  display: flex;
+  margin-top: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+.quote .attribution.light,
+.quote-borderNone .attribution.light,
+.quote-borderLeft .attribution.light,
+.quote-borderTopSmall .attribution.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.quote-borderLeft .attribution {
+  margin-left: var(--arrow-spacing-l);
+}
+
+.quote .attribution,
+.quote-borderNone .attribution {
+  justify-content: flex-end;
+}
+
+.quote-borderLeft .attribution,
+.quote-borderTopSmall .attribution {
+  justify-content: flex-start;
+}
+
+.quote .attribution:before,
+.quote-borderNone .attribution:before {
+  content: " ";
+  width: 12px;
+  height: 2px;
+  background-color: var(--arrow-c-mono4);
+  margin: var(--arrow-spacing-s) var(--arrow-spacing-xs) 0 0;
+}
+
+.quote .attribution.light:before,
+.quote-borderNone .attribution.light:before {
+  background-color: var(--arrow-c-invert-mono4);
+}
+
+html[dir="rtl"] {
+  .quote .attribution,
+  .quote-borderNone .attribution {
+    &::before {
+      content: none;
+    }
+    &::after {
+      content: " ";
+      width: 12px;
+      height: 2px;
+      background-color: var(--arrow-c-mono4);
+      margin: var(--arrow-spacing-s) var(--arrow-spacing-xs) 0 0;
+    }
+  }
+}
+
+.quote-borderTopSmall .line {
+  width: 32px;
+  height: 4px;
+  background-color: var(--arrow-c-brand1);
+  margin-bottom: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    margin-bottom: var(--arrow-spacing-s);
+  }
+}

package/esm/components/Atoms/StoryElements/Quote/quote.test.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData } from "../../../Fixture";
+import { Quote } from "./index";
+var element = generateStoryElementData("quote");
+describe("Quote Story Element", function () {
+  it("Should render default template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Quote, {
+      element: element,
+      template: "borderNone"
+    }));
+    expect(wrapper.find({
+      "data-test-id": "quote"
+    }).prop("className")).toMatch(/quote-borderNone/);
+  });
+  it("Should render border left template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Quote, {
+      element: element,
+      template: "borderLeft"
+    }));
+    expect(wrapper.find({
+      "data-test-id": "quote"
+    }).prop("className")).toMatch(/quote-borderLeft/);
+  });
+  it("Should render border top template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Quote, {
+      element: element,
+      template: "borderTopSmall"
+    }));
+    expect(wrapper.find({
+      "data-test-id": "quote"
+    }).prop("className")).toMatch(/quote-borderTopSmall/);
+  });
+  it("Should render border left template with border color", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Quote, {
+      template: "borderLeft",
+      element: element,
+      css: {
+        borderColor: "#ff214b"
+      }
+    }));
+    expect(wrapper.html()).toBe('<div data-test-id="quote" class="arrow-component arr--quote-element quote-m_quote-borderLeft__3QaAY "><p style="border-left:4px solid #ff214b" class="quote-m_text__2hXSE quote-m_dark__1migZ">After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</p><p data-test-id="quote-attribution" class="quote-m_attribution__20Y6O quote-m_dark__1migZ">Player</p></div>');
+  });
+  it("Should render custom template", function () {
+    // eslint-disable-next-line react/prop-types
+    var customTemplate = function customTemplate(_ref) {
+      var element = _ref.element;
+      return /*#__PURE__*/React.createElement("h3", {
+        dangerouslySetInnerHTML: {
+          __html: element.metadata.content
+        }
+      });
+    };
+
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Quote, {
+      element: element,
+      render: customTemplate
+    }));
+    expect(wrapper.html()).toBe("<h3>After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</h3>");
+  });
+});

package/esm/components/Atoms/StoryElements/Quote/stories.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Quote } from "./index";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+import { boolean as _boolean, color } from "@storybook/addon-knobs";
+var element = generateStoryElementData("quote");
+var collectionTemplates = {
+  "default": "borderNone",
+  borderLeft: "borderLeft",
+  borderTopSml: "borderTopSmall"
+};
+withStore("Atoms/Story Elements/Quote", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(Quote, {
+    element: element,
+    template: optionalSelect("templates", collectionTemplates),
+    opts: {
+      isExternalLink: _boolean("External Link", true)
+    },
+    css: {
+      borderColor: color("Color", "#ff214b")
+    }
+  });
+}).add("Custom", function () {
+  // eslint-disable-next-line react/prop-types
+  var customTemplate = function customTemplate(_ref) {
+    var element = _ref.element;
+    return /*#__PURE__*/React.createElement("h3", {
+      dangerouslySetInnerHTML: {
+        __html: element.metadata.content
+      }
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(Quote, {
+    element: element,
+    render: customTemplate
+  });
+});

package/esm/components/Atoms/StoryElements/Reference/README.md

@@ -0,0 +1,9 @@
+## Reference
+
+Reference element displays the referenced content to the story.
+
+# Usage
+
+```jsx
+<Reference element={element} >
+```

package/esm/components/Atoms/StoryElements/Reference/index.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "config", "opts"];
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./reference.m.css": {
+    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "tablet": "992px",
+    "wrapper": "reference-m_wrapper__1C4Ot",
+    "name": "reference-m_name__24IwG",
+    "description": "reference-m_description__2x3Io",
+    "dark": "reference-m_dark__3Zlnx",
+    "light": "reference-m_light__1B8Ud"
+  }
+};
+import React from "react";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { useStateValue } from "../../../SharedContext";
+import { getTextColor, shapeConfig } from "../../../../utils/utils";
+import { Link } from "@quintype/components";
+import "./reference.m.css";
+
+var ReferenceBase = function ReferenceBase(_ref) {
+  var element = _ref.element,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$opts = _ref.opts,
+      opts = _ref$opts === void 0 ? {} : _ref$opts,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  if (!element) return null;
+  var configData = useStateValue() || {};
+  var textInvertColor = getTextColor(configData.theme);
+  var eleArr = element["story-elements"] && element["story-elements"].map(function (ref) {
+    return ref.metadata;
+  });
+  var _opts$showHeadline = opts.showHeadline,
+      showHeadline = _opts$showHeadline === void 0 ? true : _opts$showHeadline,
+      headlineText = opts.headlineText;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "arrow-component arr--reference-element"
+  }, restProps), eleArr && eleArr.map(function (metadata, index) {
+    var _metadata$name = metadata.name,
+        name = _metadata$name === void 0 ? "" : _metadata$name,
+        _metadata$description = metadata.description,
+        description = _metadata$description === void 0 ? "" : _metadata$description,
+        url = metadata.url;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: _getClassName("wrapper ".concat(textInvertColor), _styleModuleImportMap)
+    }, /*#__PURE__*/React.createElement(Link, {
+      href: url,
+      "aria-label": "reference-headline"
+    }, showHeadline && /*#__PURE__*/React.createElement("div", {
+      className: "reference-m_name__24IwG",
+      "data-test-id": "ref-headline"
+    }, headlineText || name), /*#__PURE__*/React.createElement("div", {
+      className: "reference-m_description__2x3Io"
+    }, description)));
+  }));
+};
+
+ReferenceBase.propTypes = {
+  element: PropTypes.shape({
+    "story-elements": PropTypes.arrayOf(PropTypes.shape({
+      metadata: PropTypes.shape({
+        name: PropTypes.string,
+        description: PropTypes.string,
+        url: PropTypes.string
+      })
+    }))
+  }),
+  opts: PropTypes.shape({
+    hideHeadline: PropTypes.bool
+  }),
+  config: shapeConfig
+};
+export var Reference = withElementWrapper(ReferenceBase);

package/esm/components/Atoms/StoryElements/Reference/reference.m.css

@@ -0,0 +1,42 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.wrapper {
+  border-radius: var(--arrow-spacing-xxs);
+  padding: var(--arrow-spacing-m);
+  margin-bottom: var(--arrow-spacing-l);
+  @media (min-width: tablet) {
+    padding: var(--arrow-spacing-l);
+  }
+}
+
+.name {
+  font-size: var(--arrow-fs-m);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-3);
+  margin-bottom: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.description {
+  font-size: var(--arrow-fs-s);
+  line-height: var(--arrow-lh-5);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.dark {
+  background-color: var(--arrow-c-mono7);
+  border: solid 1px var(--arrow-c-mono7);
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  background-color: var(--arrow-c-invert-mono7);
+  border: solid 1px var(--arrow-c-invert-mono7);
+  color: var(--arrow-c-invert-mono2);
+}

package/esm/components/Atoms/StoryElements/Reference/reference.test.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { mount, shallow } from "enzyme";
+import { Provider } from "react-redux";
+import { Reference } from ".";
+import { generateStoryElementData, generateStore } from "../../../Fixture";
+var element = generateStoryElementData("references");
+describe("Reference element", function () {
+  it("Should render default template of the reference element", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(Reference, {
+      element: element
+    }), ";"));
+    expect(wrapper.find(Reference)).toHaveLength(1);
+  });
+  it("Should render headline if it is enabled", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Reference, {
+      element: element,
+      opts: {
+        hideHeadline: true
+      }
+    }));
+    expect(wrapper.find({
+      "data-test-id": "ref-headline"
+    }).length).toEqual(0);
+  });
+  it("Should not render headline if it is disabled", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Reference, {
+      element: element,
+      opts: {
+        hideHeadline: false
+      }
+    }));
+    expect(wrapper.find({
+      "data-test-id": "ref-headline"
+    }).length).toEqual(0);
+  });
+});

package/esm/components/Atoms/StoryElements/Reference/stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Reference } from "./index";
+import { withStore } from "../../../../../storybook";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+import { boolean as _boolean, text } from "@storybook/addon-knobs";
+var element = generateStoryElementData("references");
+withStore("Atoms/Story Elements/Reference", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(Reference, {
+    element: element,
+    opts: {
+      showHeadline: _boolean("Show Headline", true),
+      headlineText: text("Headline", "References")
+    }
+  });
+});

package/esm/components/Atoms/StoryElements/StoryElement/README.md

@@ -0,0 +1,10 @@
+# Wrapper Story Element
+
+Story element is a a wrapper around `qt/components/StoryElement` which can be used as the fallback element handler component.
+For example, we can use `qt/arrow/StoryElement` for elements like, Table, File, JSEmbed, Polltype, Soundcloud etc
+
+## Usage
+
+```jsx
+<StoryElement element={element} />
+```

package/esm/components/Atoms/StoryElements/StoryElement/index.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "story", "config"];
+import React from "react";
+import { StoryElement as QTCStoryElement } from "@quintype/components";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { shapeStory, shapeConfig } from "../../../../utils/utils";
+
+var StoryElementBase = function StoryElementBase(_ref) {
+  var element = _ref.element,
+      _ref$story = _ref.story,
+      story = _ref$story === void 0 ? {} : _ref$story,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+    "data-test-id": "story-elements"
+  }), /*#__PURE__*/React.createElement(QTCStoryElement, {
+    element: element
+  }));
+};
+
+export var StoryElement = withElementWrapper(StoryElementBase);
+StoryElementBase.propTypes = {
+  element: PropTypes.object,
+  story: shapeStory,
+  config: shapeConfig
+};

package/esm/components/Atoms/StoryElements/StoryElement/stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { StoryElement } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+var elementJsembed = generateStoryElementData("jsembed");
+withStore("Atoms/Story Elements/StoryElement", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("should work with any jsembed ", function () {
+  return /*#__PURE__*/React.createElement(StoryElement, {
+    element: elementJsembed
+  });
+});

package/esm/components/Atoms/StoryElements/StoryElement/storyelement.test.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { StoryElement } from ".";
+import { generateStoryElementData } from "../../../Fixture";
+import { StoryElement as QTCStoryElement } from "@quintype/components";
+var element = generateStoryElementData("jsembed");
+describe("Story Element", function () {
+  it("should render with correct elements", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(StoryElement, {
+      element: element
+    })).dive();
+    expect(wrapper.find(QTCStoryElement).length).toEqual(1);
+  });
+});

package/esm/components/Atoms/StoryElements/Summary/README.md

@@ -0,0 +1,56 @@
+# Summary
+
+Displays the Summary element of the story
+
+## Usage
+
+#### Summary story element with default template
+
+```jsx
+<Summary element={element} />
+```
+
+#### Summary story element with header template
+
+```jsx
+<Summary element={element} template="header" />
+```
+
+#### Summary story element with border template
+
+```jsx
+<Summary element={element} template="border" />
+```
+
+#### Summary story element with header background color
+
+```jsx
+const css = { headerBgColor: "#ff214b" };
+
+<Summary element={element} template="borderLeft" css={css} />;
+```
+
+#### Summary story element without headline.
+
+```jsx
+const opts = { hideHeadline: true };
+
+<Summary element={element} template="borderLeft" opts={opts} />;
+```
+
+#### Summary story element with custom headline.
+
+```jsx
+const opts = { headline: true };
+<Summary element={element} template="borderLeft" opts={opts} />;
+```
+
+#### Replace default Summary element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+
+<Summary element={element} render={customTemplate} />;
+```
+
+<!-- PROPS -->