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

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

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 = {
+  "./summary.m.css": {
+    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "headline": "summary-m_headline__30sie",
+    "summary": "summary-m_summary__3-CnO",
+    "content": "summary-m_content__37n8C",
+    "summary-header": "summary-m_summary-header__UKVHi",
+    "summary-border": "summary-m_summary-border__M9hrr",
+    "dark": "summary-m_dark__1ZuzR",
+    "light": "summary-m_light__2SYiC",
+    "heading-wrapper": "summary-m_heading-wrapper__23S51",
+    "content-border": "summary-m_content-border__3ilmJ"
+  }
+};
+import React from "react";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { getTextColor, updateContentLinks, shapeStory, shapeConfig } from "../../../../utils/utils";
+import "./summary.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+var SummaryBase = function SummaryBase(_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 configData = useStateValue() || {};
+  var textInvertColor = getTextColor(configData.theme);
+  var content = element.text;
+  if (!content) return null;
+  var headerBgColor = css.headerBgColor;
+  var _opts$isExternalLink = opts.isExternalLink,
+      isExternalLink = _opts$isExternalLink === void 0 ? true : _opts$isExternalLink,
+      _opts$headline = opts.headline,
+      headline = _opts$headline === void 0 ? "Summary" : _opts$headline,
+      _opts$hideHeadline = opts.hideHeadline,
+      hideHeadline = _opts$hideHeadline === void 0 ? false : _opts$hideHeadline;
+  var text = isExternalLink && updateContentLinks(content) || content;
+  var supportedTemplates = ["header", "border"];
+  var templateStyle = supportedTemplates.includes(template) ? "summary-".concat(template) : "summary";
+  var contentBorder = hideHeadline ? "content-border" : "";
+  var renderTemplate = template === "header" || template === "border";
+  var updateHeaderColor = renderTemplate ? "".concat(headerBgColor) : "";
+  var textColor = renderTemplate ? getTextColor(headerBgColor) : "";
+  var updateContentColor = template === "header" ? "" : textInvertColor;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-test-id": "summary"
+  }, restProps, {
+    className: "arrow-component arr--summary-element arr-custom-style " + _getClassName(templateStyle, _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
+  }), !hideHeadline && /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "summary-headline",
+    className: _getClassName("heading-wrapper ".concat(textInvertColor), _styleModuleImportMap)
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: updateHeaderColor
+    },
+    className: _getClassName("headline ".concat(textColor, " ").concat(textInvertColor), _styleModuleImportMap)
+  }, headline)), /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: text
+    },
+    className: _getClassName("content ".concat(contentBorder, " ").concat(updateContentColor, " ").concat(textInvertColor), _styleModuleImportMap)
+  }));
+};
+
+SummaryBase.propTypes = {
+  element: PropTypes.shape({
+    text: PropTypes.string
+  }),
+  template: PropTypes.string,
+  opts: PropTypes.shape({
+    isExternalLink: PropTypes.bool,
+    headline: PropTypes.string,
+    hideHeadline: PropTypes.bool
+  }),
+  story: shapeStory,
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.shape({
+    headerBgColor: PropTypes.string
+  })
+};
+export var Summary = withElementWrapper(SummaryBase);

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { generateStoryElementData } from "../../../Fixture";
+import Readme from "./README.md";
+import { Summary } from "./index";
+import { color, boolean as _boolean, text } from "@storybook/addon-knobs";
+var element = generateStoryElementData("summary");
+var summaryTemplate = {
+  "default": "",
+  header: "header",
+  border: "border"
+};
+withStore("Atoms/Story Elements/Summary", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(Summary, {
+    element: element,
+    template: optionalSelect("templates", summaryTemplate),
+    css: {
+      headerBgColor: color("Color", "#ff214b")
+    },
+    opts: {
+      isExternalLink: _boolean("External Link", true),
+      headline: text("Headline", "Summary"),
+      hideHeadline: _boolean("Hide Headline", false)
+    }
+  });
+}).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(Summary, {
+    element: element,
+    render: customTemplate
+  });
+});

package/esm/components/Atoms/StoryElements/Summary/summary.m.css

@@ -0,0 +1,121 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.headline {
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-bold);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.summary:global(.arrow-component) .content p {
+  font-style: italic;
+}
+
+.summary:global(.arrow-component) .content > p,
+.summary-header:global(.arrow-component) .content > p,
+.summary-border:global(.arrow-component) .content > p,
+.dark {
+  font-size: var(--arrow-fs-s);
+  color: var(--arrow-c-dark);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.summary:global(.arrow-component) .content.light > p,
+.summary-header:global(.arrow-component) .content.light > p,
+.summary-border:global(.arrow-component) .content.light > p {
+  color: var(--arrow-c-light);
+}
+
+.dark {
+  color: var(--arrow-c-mono1);
+}
+.light {
+  color: var(--arrow-c-invert-mono1);
+}
+
+/* default template */
+.summary .headline {
+  margin-bottom: var(--arrow-spacing-xs);
+  font-size: var(--arrow-fs-s);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+/* headline template */
+.summary-header .headline {
+  padding: var(--arrow-spacing-xs) var(--arrow-spacing-s);
+  font-size: var(--arrow-fs-s);
+  background-color: var(--arrow-c-brand1);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    padding: var(--arrow-spacing-xs) var(--arrow-spacing-l);
+  }
+}
+.summary-header .content {
+  background-color: var(--arrow-c-invert-mono7);
+  padding: var(--arrow-spacing-s);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-l);
+  }
+}
+
+/* border template */
+.summary-border .heading-wrapper {
+  display: flex;
+  margin-bottom: -22px;
+}
+
+.summary-border .heading-wrapper::before {
+  content: " ";
+  position: relative;
+  width: var(--arrow-spacing-m);
+  border-top: 1px solid var(--arrow-c-dark);
+  align-self: center;
+}
+
+.summary-border .heading-wrapper.light::before {
+  border-top: 1px solid var(--arrow-c-light);
+}
+
+.summary-border .heading-wrapper::after {
+  content: " ";
+  position: relative;
+  flex: 1 1 auto;
+  border-top: 1px solid var(--arrow-c-dark);
+  align-self: center;
+  margin-right: 0;
+}
+
+.summary-border .heading-wrapper.light::after {
+  border-top: 1px solid var(--arrow-c-light);
+}
+
+.summary-border .content {
+  border: 1px solid var(--arrow-c-dark);
+  border-top: none;
+  padding: var(--arrow-spacing-l);
+}
+
+.summary-border .content.light {
+  border: 1px solid var(--arrow-c-light);
+}
+.summary-border .headline {
+  background-color: var(--arrow-c-brand1);
+  padding: var(--arrow-spacing-xs) var(--arrow-spacing-l);
+  line-height: var(--arrow-lh-4);
+  border-radius: 2px;
+  margin: 0 var(--arrow-spacing-xs);
+}
+
+.summary-border .content-border.dark {
+  border: 1px solid var(--arrow-c-mono5);
+}
+
+.summary-border .content-border.light {
+  border: 1px solid var(--arrow-c-invert-mono5);
+}

package/esm/components/Atoms/StoryElements/Summary/summary.test.js

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import expect from "expect";
+import { generateStoryElementData } from "../../../Fixture";
+import { Summary } from "./index";
+var element = generateStoryElementData("summary");
+describe("Summary Story Element", function () {
+  it("Should render default template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Summary, {
+      element: element
+    }));
+    expect(wrapper.find({
+      "data-test-id": "summary"
+    }).prop("className")).toMatch(/summary/);
+  });
+  it("Should render border left template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Summary, {
+      element: element,
+      template: "header"
+    }));
+    expect(wrapper.find({
+      "data-test-id": "summary"
+    }).prop("className")).toMatch(/summary-header/);
+  });
+  it("Should render border top template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Summary, {
+      element: element,
+      template: "border"
+    }));
+    expect(wrapper.find({
+      "data-test-id": "summary"
+    }).prop("className")).toMatch(/summary-border/);
+  });
+  it("Should render template without headline", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Summary, {
+      element: element,
+      opts: {
+        hideHeadline: true
+      }
+    }));
+    expect(wrapper.find({
+      "data-test-id": "summary-headline"
+    }).length).toEqual(0);
+  });
+  it("Should render template with custom headline", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Summary, {
+      element: element,
+      opts: {
+        headline: "in short"
+      }
+    }));
+    expect(wrapper.find({
+      "data-test-id": "summary-headline"
+    }).text()).toEqual("in short");
+  });
+  it("Should render template with header background color", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Summary, {
+      element: element,
+      template: "header",
+      css: {
+        headerBgColor: " #b3243e"
+      }
+    }));
+    expect(wrapper.html()).toBe("<div data-test-id=\"summary\" class=\"arrow-component arr--summary-element arr-custom-style summary-m_summary-header__UKVHi \"><div data-test-id=\"summary-headline\" class=\"summary-m_heading-wrapper__23S51 summary-m_dark__1ZuzR\"><div style=\"background-color: rgb(179, 36, 62);\" class=\"summary-m_headline__30sie summary-m_dark__1ZuzR summary-m_dark__1ZuzR\">Summary</div></div><div class=\"summary-m_content__37n8C summary-m_dark__1ZuzR\"><p>Lorem<em> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</em>, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></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.text
+        }
+      });
+    };
+
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Summary, {
+      element: element,
+      render: customTemplate
+    }));
+    expect(wrapper.html()).toBe("<h3><p>Lorem<em> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</em>, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></h3>");
+  });
+});

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

@@ -0,0 +1,32 @@
+# Text Story Element
+
+Displays the text story element of the story
+
+## Usage
+
+#### Default text story element
+```jsx
+<Text element={element} />
+```
+
+#### Text story element with external links opening in new tab
+```jsx
+const opts = { isExternalLink: true };
+
+<Text element={element} opts={opts} />
+```
+
+#### Text story element as promotional message
+```jsx
+const promotionalMessage = { ...element, metadata: { "promotional-message": true } };
+<Text element={promotionalMessage} opts={opts} />
+```
+
+#### Replace default text story element template with custom template passed using render
+```jsx
+const customTemplate = ({element}) => <h3 dangerouslySetInnerHTML={{ __html: element.text }}/>;
+
+<Text element={element} render={customTemplate} />
+```
+
+<!-- PROPS -->

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

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "opts", "css", "story", "config"];
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./text.m.css": {
+    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "promotionalMessage": "text-m_promotionalMessage__CUsPM",
+    "textElement": "text-m_textElement__e3QEt",
+    "dark": "text-m_dark__1TC18",
+    "light": "text-m_light__2cRe8"
+  }
+};
+import React from "react";
+import PropTypes from "prop-types";
+import { get } from "lodash";
+import { withElementWrapper } from "../withElementWrapper";
+import { updateContentLinks, shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
+import "./text.m.css";
+import { useStateValue } from "../../../SharedContext";
+
+var TextBase = function TextBase(_ref) {
+  var _ref$element = _ref.element,
+      element = _ref$element === void 0 ? {} : _ref$element,
+      _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,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var content = element.text;
+  if (!content) return null;
+  var configData = useStateValue() || {};
+  var textInvertColor = getTextColor(configData.theme);
+  var textColor = css.textColor;
+  var _opts$isExternalLink = opts.isExternalLink,
+      isExternalLink = _opts$isExternalLink === void 0 ? true : _opts$isExternalLink;
+  var text = isExternalLink && updateContentLinks(content) || content;
+  var isPromotionalMessage = get(element, ["metadata", "promotional-message"], false);
+  var updatedStyle = isPromotionalMessage ? "promotionalMessage" : "textElement";
+  return /*#__PURE__*/React.createElement("div", _extends({
+    style: !isPromotionalMessage ? {
+      color: textColor
+    } : {},
+    "data-test-id": isPromotionalMessage ? "promotional-message" : "text",
+    dangerouslySetInnerHTML: {
+      __html: text
+    },
+    id: "text-element"
+  }, restProps, {
+    className: "arrow-component arr--text-element " + _getClassName("".concat(updatedStyle, " ").concat(textInvertColor), _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
+  }));
+};
+
+TextBase.propTypes = {
+  element: PropTypes.shape({
+    text: PropTypes.string
+  }),
+  opts: PropTypes.shape({
+    isExternalLink: PropTypes.bool
+  }),
+  css: PropTypes.shape({
+    hyperlinkColor: PropTypes.string,
+    textColor: PropTypes.string
+  }),
+  story: shapeStory,
+  config: shapeConfig
+};
+export var Text = withElementWrapper(TextBase);

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

@@ -0,0 +1,56 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Text } from "./index";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+import { boolean as _boolean, color } from "@storybook/addon-knobs";
+var element = generateStoryElementData("text");
+withStore("Atoms/Story Elements/Text", {}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(Text, {
+    element: element,
+    opts: {
+      isExternalLink: _boolean("External Link", true)
+    },
+    css: {
+      hyperlinkColor: color("Hyperlink Color", "#ff214b"),
+      textColor: color("Text Color", "#000")
+    }
+  });
+}).add("Promotional Message", function () {
+  var promotionalMessage = _objectSpread(_objectSpread({}, element), {}, {
+    metadata: {
+      "promotional-message": true
+    }
+  });
+
+  return /*#__PURE__*/React.createElement(Text, {
+    element: promotionalMessage,
+    opts: {
+      isExternalLink: _boolean("External Link", true)
+    },
+    css: {
+      hyperlinkColor: color("Hyperlink 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.text
+      }
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(Text, {
+    element: element,
+    render: customTemplate
+  });
+});

package/esm/components/Atoms/StoryElements/Text/text.m.css

@@ -0,0 +1,78 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.promotionalMessage p {
+  font-size: var(--arrow-fs-tiny);
+  padding-bottom: var(--arrow-spacing-xxs);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-xs);
+    padding-bottom: var(--arrow-spacing-xs);
+  }
+}
+
+.textElement p,
+.dark {
+  line-height: var(--arrow-lh-5);
+  font-size: var(--arrow-fs-s);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.promotionalMessage a,
+.textElement a {
+  color: var(--textElementHyperlinkColor);
+}
+
+.textElement a:hover {
+  border-bottom: 1px solid var(--textElementHyperlinkColor);
+  transition: border 0.3s ease;
+}
+
+.textElement.light p {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.promotionalMessage a:hover {
+  color: var(--arrow-c-brand1);
+  border-bottom: 1px solid;
+  padding-bottom: 3px;
+  transition: all 0.3s ease 0s;
+}
+
+.promotionalMessage.dark p {
+  color: var(--arrow-c-mono4);
+}
+.promotionalMessage.light p {
+  color: var(--arrow-c-invert-mono4);
+}
+
+.textElement ul,
+.textElement ol {
+  list-style: initial;
+  padding: var(--arrow-spacing-m) 0 0 var(--arrow-spacing-l);
+  @media (min-width: mobile) {
+    padding: var(--arrow-spacing-m) 0 0 var(--arrow-spacing-xl);
+  }
+}
+
+.textElement ol {
+  list-style: auto;
+}
+
+.textElement :global .cta-anchor {
+  background-color: var(--arrow-c-brand1);
+  color: var(--arrow-c-light);
+  border-radius: var(--arrow-spacing-xxs);
+  box-shadow: 0 var(--arrow-spacing-xxs) var(-arrow-spacing-xs) 0 var(--arrow-c-mono6);
+  font-size: var(--arrow-fs-s);
+  padding: var(--arrow-spacing-s) var(--arrow-spacing-m);
+  display: block;
+  text-align: center;
+
+  @media (min-width: mobile) {
+    display: inline-block;
+    font-size: var(--arrow-fs-m);
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-l);
+  }
+}

package/esm/components/Atoms/StoryElements/Text/text.test.js

@@ -0,0 +1,70 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { Text } from "./index";
+import { generateStoryElementData } from "../../../Fixture";
+var element = generateStoryElementData("text");
+describe("Text Story Element", function () {
+  it("should render default template", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Text, {
+      element: element
+    }));
+    expect(wrapper.find({
+      "data-test-id": "text"
+    }).prop("className")).toMatch(/text-element/);
+  });
+  it("should render promotional message when it is enabled", function () {
+    var promotionalMessage = _objectSpread(_objectSpread({}, element), {}, {
+      metadata: {
+        "promotional-message": true
+      }
+    });
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(Text, {
+      element: promotionalMessage
+    }));
+    expect(wrapper.find({
+      "data-test-id": "promotional-message"
+    }).prop("className")).toMatch(/promotionalMessage/);
+  });
+  it("should render default template with external link", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Text, {
+      opts: {
+        isExternalLink: true
+      },
+      element: element
+    }));
+    expect(wrapper.html()).toBe("<div data-test-id=\"text\" id=\"text-element\" class=\"arrow-component arr--text-element text-m_textElement__e3QEt text-m_dark__1TC18 \"><p><a aria-label='content' target='_blank' href=\"https://www.theguardian.com/technology/virtual-reality\">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a aria-label='content' target='_blank' href=\"https://www.theguardian.com/film/stevenspielberg\">Steven Spielberg</a> 2019s <a aria-label='content' target='_blank' href=\"https://www.theguardian.com/film/ready-player-one\">Ready Player One</a>.</p></div>");
+  });
+  it("should render default template without external link", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Text, {
+      opts: {
+        isExternalLink: false
+      },
+      element: element
+    }));
+    expect(wrapper.html()).toBe('<div data-test-id="text" id="text-element" class="arrow-component arr--text-element text-m_textElement__e3QEt text-m_dark__1TC18 "><p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</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.text
+        }
+      });
+    };
+
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Text, {
+      element: element,
+      render: customTemplate
+    }));
+    expect(wrapper.html()).toBe('<h3><p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p></h3>');
+  });
+});

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

@@ -0,0 +1,9 @@
+# Video Story Element
+
+Video story element is a simple component used to display a video story.
+
+## Usage
+
+```jsx
+<Video element={element} />
+```