@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.8

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

@@ -0,0 +1,43 @@
+# Blurb
+
+Displays the blurb story element of the story
+
+## Usage
+
+#### Blurb story element with default template
+
+```jsx
+<Blurb element={element} template="default" />
+```
+
+#### Blurb story element with border template
+
+```jsx
+<Blurb element={element} template="withBorder" />
+```
+
+#### Blurb story element with external links opening in new tab
+
+```jsx
+const opts = { isExternalLink: true };
+
+<Blurb element={element} template="default" opts={opts} />;
+```
+
+#### Blurb story element with border color
+
+```jsx
+const css = { borderColor: "#ff214b" };
+
+<Blurb element={element} template="withBorder" css={css} />;
+```
+
+#### Replace default blurb element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+
+<Blurb element={element} render={customTemplate} />;
+```
+
+<!-- PROPS -->

package/esm/components/Atoms/StoryElements/Blurb/blurb.m.css

@@ -0,0 +1,55 @@
+@value viewports: "../../../../stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.blurb blockquote,
+.blurb-default blockquote,
+.blurb-withBorder blockquote {
+  font-family: var(--arrow-typeface-secondary);
+  font-size: var(--arrow-fs-s);
+  line-height: var(--arrow-lh-5);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.blurb blockquote,
+.blurb-default blockquote {
+  font-style: italic;
+  padding-left: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    padding-left: var(--arrow-spacing-l);
+  }
+}
+
+.blurb-withBorder blockquote {
+  padding: var(--arrow-spacing-s) var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-l);
+  }
+}
+
+html[dir="rtl"] {
+  .blurb blockquote,
+  .blurb-default blockquote {
+    padding-left: 0;
+    padding-right: var(--arrow-spacing-m);
+    @media (min-width: mobile) {
+      padding-right: var(--arrow-spacing-l);
+    }
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono1);
+  a {
+    color: var(--arrow-c-mono2);
+    border-bottom: 1px solid var(--arrow-c-mono2);
+  }
+}
+.light {
+  color: var(--arrow-c-invert-mono1);
+  a {
+    color: var(--arrow-c-invert-mono2);
+    border-bottom: 1px solid var(--arrow-c-invert-mono2);
+  }
+}

package/esm/components/Atoms/StoryElements/Blurb/blurb.test.js

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData } from "../../../Fixture";
+import { Blurb } from "./index";
+var element = generateStoryElementData("blurb");
+describe("Blurb Story Element", function () {
+  it("Should render default template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Blurb, {
+      element: element,
+      template: "default"
+    }));
+    expect(wrapper.find({
+      "data-test-id": "blurb"
+    }).prop("className")).toMatch(/blurb-default/);
+  });
+  it("Should render border template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Blurb, {
+      element: element,
+      template: "withBorder"
+    }));
+    expect(wrapper.find({
+      "data-test-id": "blurb"
+    }).prop("className")).toMatch(/blurb-withBorder/);
+  });
+  it("Should render default template with external link", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Blurb, {
+      template: "default",
+      opts: {
+        isExternalLink: true
+      },
+      element: element
+    }));
+    expect(wrapper.html()).toBe('<div data-test-id="blurb" class="arrow-component arr-custom-style arr--blurb-element blurb-m_blurb-default__JR86y blurb-m_dark__1eErz "><blockquote>Although the many story changes might be hard for book purists to accept, <a aria-label=\'content\' target=\'_blank\' href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></div>');
+  });
+  it("Should render default template without external link", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Blurb, {
+      template: "default",
+      opts: {
+        isExternalLink: false
+      },
+      element: element
+    }));
+    expect(wrapper.html()).toBe('<div data-test-id="blurb" class="arrow-component arr-custom-style arr--blurb-element blurb-m_blurb-default__JR86y blurb-m_dark__1eErz "><blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></div>');
+  });
+  it("Should render the border template with border color", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Blurb, {
+      template: "withBorder",
+      element: element,
+      css: {
+        borderColor: "#ff214b"
+      }
+    }));
+    expect(wrapper.find({
+      "data-test-id": "blurb"
+    }).prop("style")).toEqual({
+      border: "solid 2px #ff214b"
+    });
+  });
+  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.text
+        }
+      });
+    };
+
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Blurb, {
+      element: element,
+      render: customTemplate
+    }));
+    expect(wrapper.html()).toBe('<h3><blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></h3>');
+  });
+});

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

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "template", "opts", "css", "story", "config", "render"];
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./blurb.m.css": {
+    "viewports": "\"../../../../stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "blurb": "blurb-m_blurb__3pXi5",
+    "blurb-default": "blurb-m_blurb-default__JR86y",
+    "blurb-withBorder": "blurb-m_blurb-withBorder__SjW--",
+    "dark": "blurb-m_dark__1eErz",
+    "light": "blurb-m_light__OBWiH"
+  }
+};
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { updateContentLinks, shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
+import "./blurb.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+var BlurbBase = function BlurbBase(_ref) {
+  var element = _ref.element,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "" : _ref$template,
+      _ref$opts = _ref.opts,
+      opts = _ref$opts === void 0 ? {} : _ref$opts,
+      _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 content = element.text;
+  var borderColor = css.borderColor;
+  var initBorderDirection = template === "withBorder" ? {
+    border: "solid 2px ".concat(borderColor)
+  } : {
+    borderLeft: "solid 2px ".concat(borderColor)
+  };
+
+  var _useState = useState(initBorderDirection),
+      _useState2 = _slicedToArray(_useState, 2),
+      borderDirection = _useState2[0],
+      setBorderDirection = _useState2[1];
+
+  if (!content) return null;
+  useEffect(function () {
+    var htmlElement = document.getElementsByTagName("HTML");
+
+    if (htmlElement && htmlElement.length) {
+      if (htmlElement[0].dir.toLowerCase() === "rtl" && template !== "withBorder") {
+        setBorderDirection({
+          borderRight: "solid 2px ".concat(borderColor)
+        });
+      }
+    }
+  }, []);
+  var _opts$isExternalLink = opts.isExternalLink,
+      isExternalLink = _opts$isExternalLink === void 0 ? true : _opts$isExternalLink;
+  var text = isExternalLink && updateContentLinks(content) || content;
+  var templateStyle = template ? "blurb-".concat(template) : "blurb";
+  var configData = useStateValue() || {};
+  var textInvertColor = getTextColor(configData.theme);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-test-id": "blurb",
+    style: borderColor && borderDirection,
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  }, restProps, {
+    className: "arrow-component arr-custom-style arr--blurb-element " + _getClassName("".concat(templateStyle, " ").concat(textInvertColor), _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
+  }));
+};
+
+BlurbBase.propTypes = {
+  element: PropTypes.shape({
+    text: PropTypes.string
+  }),
+
+  /** templates can be either default or withBorder */
+  template: PropTypes.string,
+  opts: PropTypes.shape({
+    isExternalLink: PropTypes.bool
+  }),
+  story: shapeStory,
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.object
+};
+export var Blurb = withElementWrapper(BlurbBase);

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { generateStoryElementData } from "../../../Fixture";
+import Readme from "./README.md";
+import { Blurb } from "./index";
+import { color, boolean as _boolean } from "@storybook/addon-knobs";
+var templateStyle = {
+  Default: "default",
+  "Blurb with Border": "withBorder"
+};
+var element = generateStoryElementData("blurb");
+withStore("Atoms/Story Elements/Blurb", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(Blurb, {
+    element: element,
+    template: optionalSelect("Template Options", templateStyle),
+    css: {
+      borderColor: color("Color", "#ff214b")
+    },
+    opts: {
+      isExternalLink: _boolean("External Link", true)
+    }
+  });
+}).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.text
+      }
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(Blurb, {
+    element: element,
+    render: customTemplate
+  });
+});

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

@@ -0,0 +1,13 @@
+# Image Story Element
+
+Displays the image story element of the story
+
+## Usage
+
+#### Default Image story element
+
+```jsx
+<Image element={element} />
+```
+
+<!-- PROPS -->

package/esm/components/Atoms/StoryElements/Image/image.m.css

@@ -0,0 +1,21 @@
+.element {
+  position: relative;
+}
+
+.loading {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  /* To match it with lightbox overlay, hardcoding this value */
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  color: var(--arrow-c-light);
+  justify-content: center;
+  align-items: center;
+}
+
+.image-template {
+  position: relative;
+}

package/esm/components/Atoms/StoryElements/Image/image.test.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { mount } from "enzyme";
+import { Provider } from "react-redux";
+import { Image } from ".";
+import { generateStoryElementData, generateStore } from "../../../Fixture";
+import { FullScreenImages } from "../../../Molecules/FullScreenImages";
+var element = generateStoryElementData("image");
+describe("Image Story Element", function () {
+  it("should render with correct elements", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: generateStore
+    }, /*#__PURE__*/React.createElement(Image, {
+      element: element
+    })));
+    expect(wrapper.find("figure").length).toEqual(1);
+    expect(wrapper.find("CaptionAttribution").length).toEqual(1);
+    expect(wrapper.find(FullScreenImages).length).toEqual(1);
+  });
+});

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

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "opts", "story", "config", "caption"];
+import React from "react";
+import PropTypes from "prop-types";
+import { ResponsiveImage } from "@quintype/components";
+import { withElementWrapper } from "../withElementWrapper";
+import "./image.m.css";
+import { shapeStory, shapeConfig } from "../../../../utils/utils";
+import { FullScreenImages } from "../../../Molecules/FullScreenImages";
+import { useStateValue } from "../../../SharedContext";
+import { CaptionAttribution } from "../../CaptionAttribution";
+import { HyperLink } from "../../Hyperlink";
+
+var ImageBase = function ImageBase(_ref) {
+  var element = _ref.element,
+      _ref$opts = _ref.opts,
+      opts = _ref$opts === void 0 ? {} : _ref$opts,
+      _ref$story = _ref.story,
+      story = _ref$story === void 0 ? {} : _ref$story,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$caption = _ref.caption,
+      caption = _ref$caption === void 0 ? true : _ref$caption,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  if (!element) return null;
+  var configData = useStateValue() || {};
+
+  var ImageTemplate = function ImageTemplate(_ref2) {
+    var _onClick = _ref2.onClick;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "image-m_image-template__3s9OA"
+    }, /*#__PURE__*/React.createElement("figure", {
+      className: "image-m_element__KVuzX",
+      onClick: function onClick() {
+        return _onClick();
+      }
+    }, /*#__PURE__*/React.createElement(ResponsiveImage, {
+      slug: element["image-s3-key"],
+      metadata: element["image-metadata"],
+      alt: element["title"],
+      aspectRatio: null,
+      defaultWidth: 640,
+      widths: opts.imageWidths || [360, 640, 1200],
+      imgParams: {
+        auto: ["format", "compress"]
+      }
+    })), element["hyperlink"] && /*#__PURE__*/React.createElement(HyperLink, {
+      hyperLink: element["hyperlink"]
+    }));
+  };
+
+  ImageTemplate.propTypes = {
+    onClick: PropTypes.func
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "arrow-component arr--image-element"
+  }, restProps, {
+    "data-test-id": "image-element"
+  }), /*#__PURE__*/React.createElement(FullScreenImages, {
+    template: ImageTemplate,
+    element: element,
+    imageSlug: element["image-s3-key"],
+    story: story
+  }), caption && /*#__PURE__*/React.createElement(CaptionAttribution, {
+    element: element,
+    config: configData
+  }));
+};
+
+ImageBase.propTypes = {
+  element: PropTypes.shape({
+    "image-s3-key": PropTypes.string,
+    "image-metadata": PropTypes.object,
+    "image-attribution": PropTypes.string,
+    title: PropTypes.string,
+    hyperlink: PropTypes.string
+  }),
+  caption: PropTypes.bool,
+  opts: PropTypes.shape({
+    imageWidths: PropTypes.array
+  }),
+  story: shapeStory,
+  config: shapeConfig
+};
+export var Image = withElementWrapper(ImageBase);

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Image } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+var element = generateStoryElementData("image");
+withStore("Atoms/Story Elements/Image", {
+  qt: {
+    config: {
+      "cdn-image": "gumlet.assettype.com"
+    }
+  }
+}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(Image, {
+    element: element
+  });
+}).add("Custom", function () {
+  // eslint-disable-next-line react/prop-types
+  var customTemplate = function customTemplate(_ref) {
+    var element = _ref.element;
+    return /*#__PURE__*/React.createElement("p", null, element.title);
+  };
+
+  return /*#__PURE__*/React.createElement(Image, {
+    element: element,
+    render: customTemplate
+  });
+});

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

@@ -0,0 +1,13 @@
+# ImageSlideshow
+
+Displays the image slideshow/carousel story element.
+
+## Usage
+
+#### Default ImageSlideshow element
+
+```jsx
+ <ImageSlideshow element={element}  />);
+```
+
+<!-- PROPS -->

package/esm/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css

@@ -0,0 +1,49 @@
+@import "../../../../stylesheets/mixins.scss";
+
+.slide {
+  position: relative;
+}
+
+.slideshow {
+  @include mobile {
+    width: 90vw;
+    margin: 0 auto;
+  }
+}
+
+.caption {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: var(--arrow-c-light);
+}
+
+.slideshow figure {
+  padding-top: 56.65%;
+  position: relative;
+  margin: 0;
+}
+
+.image-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(to top, rgba(var(--arrow-c-dark), 0.5), transparent 70%, transparent);
+}
+
+.image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  object-fit: cover;
+}

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

@@ -0,0 +1,82 @@
+import { LazyLoadImages, ResponsiveImage } from "@quintype/components";
+import { get } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+import { shapeStory } from "../../../../utils/utils";
+import { FullScreenImages } from "../../../Molecules/FullScreenImages";
+import { withElementWrapper } from "../withElementWrapper";
+import { ScrollSnap } from "../../ScrollSnap";
+import "./image-slideshow.m.css";
+import { HyperLink } from "../../Hyperlink";
+
+var ImageSlideshowBase = function ImageSlideshowBase(props) {
+  if (!props.element) return null;
+
+  var Slide = function Slide(image, index, onClickHandler) {
+    var id = image.id,
+        imageS3Key = image["image-s3-key"],
+        metadata = image.metadata,
+        title = image.title,
+        _image$hyperlink = image.hyperlink,
+        hyperlink = _image$hyperlink === void 0 ? "" : _image$hyperlink;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "image-slideshow-m_slide__3URCC",
+      key: id
+    }, /*#__PURE__*/React.createElement("figure", {
+      key: id,
+      className: "image-slideshow-m_image-container__2VTEK",
+      onClick: function onClick() {
+        return onClickHandler(index);
+      }
+    }, /*#__PURE__*/React.createElement(LazyLoadImages, {
+      margin: "0px"
+    }, /*#__PURE__*/React.createElement(ResponsiveImage, {
+      slug: imageS3Key,
+      metadata: metadata,
+      "aspect-ratio": [16, 9],
+      defaultWidth: 480,
+      widths: [250, 480, 640],
+      imgParams: {
+        auto: ["format", "compress"]
+      },
+      className: "image-slideshow-m_image__1p1fO",
+      alt: title
+    }))), hyperlink && /*#__PURE__*/React.createElement(HyperLink, {
+      hyperLink: hyperlink
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "image-slideshow-m_caption__mWpmc",
+      dangerouslySetInnerHTML: {
+        __html: title
+      }
+    }));
+  };
+
+  var ImageSlideshowTemplate = function ImageSlideshowTemplate(_ref) {
+    var onClickHandler = _ref.onClickHandler;
+    var storyElements = get(props, ["element", "story-elements"], []);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "arr--image-slideshow-element image-slideshow-m_slideshow__3jRFX",
+      "data-test-id": "image-slideshow"
+    }, /*#__PURE__*/React.createElement(ScrollSnap, {
+      slideIndicator: "none"
+    }, storyElements.map(function (image, index) {
+      return Slide(image, index, onClickHandler);
+    })));
+  };
+
+  ImageSlideshowTemplate.propTypes = {
+    onClickHandler: PropTypes.func
+  };
+  return /*#__PURE__*/React.createElement(FullScreenImages, {
+    template: ImageSlideshowTemplate,
+    element: props.element
+  });
+};
+
+ImageSlideshowBase.propTypes = {
+  element: PropTypes.shape({
+    "story-elements": PropTypes.array
+  }),
+  story: shapeStory
+};
+export var ImageSlideshow = withElementWrapper(ImageSlideshowBase);

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { generateStoryElementData } from "../../../Fixture";
+import { ImageSlideshow } from "./index";
+import Readme from "./README.md";
+var element = generateStoryElementData("image-gallery");
+withStore("Atoms/Story Elements/Image Slideshow", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(ImageSlideshow, {
+    element: element
+  });
+});
+withStore("Atoms/Story Elements/Image Slideshow", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com",
+      language: {
+        direction: "rtl"
+      }
+    }
+  }
+}, Readme).add("Support Rtl", function () {
+  return /*#__PURE__*/React.createElement(ImageSlideshow, {
+    element: element
+  });
+});