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

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

@@ -0,0 +1,156 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["story", "element", "template", "opts", "css", "config", "render"];
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./also-read.m.css": {
+    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "card-image": "also-read-m_card-image__3CwAv",
+    "default-text": "also-read-m_default-text__hp2dp",
+    "alsoread-textLeftAlign": "also-read-m_alsoread-textLeftAlign__S0Dxe",
+    "alsoread-imageRightAlign": "also-read-m_alsoread-imageRightAlign__1bsF3",
+    "headline": "also-read-m_headline__VzF-c",
+    "alsoread-default": "also-read-m_alsoread-default__3cYER",
+    "card-image-wrapper": "also-read-m_card-image-wrapper__3GFzu",
+    "image": "also-read-m_image__2jdRP",
+    "content-wrapper": "also-read-m_content-wrapper__26AZX",
+    "alsoread": "also-read-m_alsoread__1crOV",
+    "dark": "also-read-m_dark__1pUib",
+    "light": "also-read-m_light__bTCze"
+  }
+};
+import React from "react";
+import { get } from "lodash";
+import { LazyLoadImages, Link, ResponsiveImage } from "@quintype/components";
+import { withElementWrapper } from "../withElementWrapper";
+import PropTypes from "prop-types";
+import { FallbackImage } from "../../FallbackImage";
+import { clientWidth, isEmpty, shapeConfig, getTextColor } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
+import "./also-read.m.css";
+
+var DisplayImage = function DisplayImage(_ref) {
+  var story = _ref.story,
+      linkedImage = _ref.linkedImage,
+      template = _ref.template,
+      isRightAlign = _ref.isRightAlign;
+  var isLeftAlign = template === "textLeftAlign";
+  var isMobile = clientWidth("mobile");
+  var rightAlignAspectRatio = isRightAlign && isMobile ? [4, 3] : [16, 9];
+  var imageAspectRatio = isLeftAlign ? [16, 9] : rightAlignAspectRatio;
+  var alternateText = story["hero-image-caption"] || story["headline"];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "also-read-m_card-image-wrapper__3GFzu"
+  }, !isEmpty(linkedImage) ? /*#__PURE__*/React.createElement("figure", {
+    className: "also-read-m_card-image__3CwAv"
+  }, /*#__PURE__*/React.createElement(LazyLoadImages, null, /*#__PURE__*/React.createElement(ResponsiveImage, {
+    slug: linkedImage,
+    "aspect-ratio": imageAspectRatio,
+    defaultWidth: 480,
+    widths: [250, 480, 640],
+    imgParams: {
+      auto: ["format", "compress"]
+    },
+    alt: alternateText
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: "arr--fallback-also-read also-read-m_image__2jdRP"
+  }, /*#__PURE__*/React.createElement(FallbackImage, null)));
+};
+
+DisplayImage.propTypes = {
+  story: PropTypes.shape({
+    "hero-image-caption": PropTypes.string,
+    headline: PropTypes.string
+  }),
+  linkedImage: PropTypes.string,
+  template: PropTypes.string,
+  isRightAlign: PropTypes.bool
+};
+
+var AlsoReadBase = function AlsoReadBase(_ref2) {
+  var _ref2$story = _ref2.story,
+      story = _ref2$story === void 0 ? {} : _ref2$story,
+      element = _ref2.element,
+      _ref2$template = _ref2.template,
+      template = _ref2$template === void 0 ? "" : _ref2$template,
+      _ref2$opts = _ref2.opts,
+      opts = _ref2$opts === void 0 ? {} : _ref2$opts,
+      _ref2$css = _ref2.css,
+      css = _ref2$css === void 0 ? {} : _ref2$css,
+      _ref2$config = _ref2.config,
+      config = _ref2$config === void 0 ? {} : _ref2$config,
+      render = _ref2.render,
+      restProps = _objectWithoutProperties(_ref2, _excluded);
+
+  var content = element.text;
+  if (!content) return null;
+  var linkedStories = get(story, ["linked-stories"], {});
+  var linkedStoryId = get(element, ["metadata", "linked-story-id"]);
+  var linkedStorySlug = get(linkedStories, [linkedStoryId, "url"]);
+  var linkedImage = get(linkedStories, [linkedStoryId, "hero-image-s3-key"], "");
+  var storyUrl = linkedStorySlug && linkedStorySlug;
+  var configData = useStateValue() || {};
+  var textInvertColor = getTextColor(configData.theme);
+  var _opts$title = opts.title,
+      title = _opts$title === void 0 ? "" : _opts$title;
+  var textColor = css.textColor;
+  var displayTitle = title || "Also Read";
+  var isDefault = template === "" || template === "default";
+  var isRightAlign = template === "imageRightAlign";
+  var templateStyle = template ? "alsoread-".concat(template) : "alsoread-default";
+  return /*#__PURE__*/React.createElement(Link, _extends({
+    "data-test-id": "also-read",
+    href: storyUrl,
+    "aria-label": "also-read"
+  }, restProps, {
+    className: "arrow-component arr--also-read-element " + _getClassName(templateStyle, _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
+  }), !isDefault && /*#__PURE__*/React.createElement("div", {
+    className: _getClassName("default-text ".concat(textInvertColor), _styleModuleImportMap)
+  }, displayTitle), isDefault && /*#__PURE__*/React.createElement(DisplayImage, {
+    story: story,
+    linkedImage: linkedImage,
+    template: template,
+    isRightAlign: isRightAlign
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "also-read-m_content-wrapper__26AZX"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "also-read-m_headline__VzF-c",
+    style: textColor ? {
+      color: textColor
+    } : {
+      color: textInvertColor
+    },
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  }), isRightAlign && /*#__PURE__*/React.createElement(DisplayImage, {
+    story: story,
+    linkedImage: linkedImage,
+    template: template
+  })));
+};
+
+AlsoReadBase.propTypes = {
+  /**  template can be default, textLeftAlign or imageRightAlign */
+  template: PropTypes.string,
+  story: PropTypes.shape({
+    "linked-stories": PropTypes.object
+  }),
+  element: PropTypes.shape({
+    text: PropTypes.string,
+    metadata: PropTypes.shape({
+      linkedStoryId: PropTypes.shape({
+        url: PropTypes.string,
+        "hero-image-s3-key": PropTypes.string
+      })
+    })
+  }),
+  opts: PropTypes.shape({
+    title: PropTypes.string
+  }),
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.object
+};
+export var AlsoRead = withElementWrapper(AlsoReadBase);

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { color, text } from "@storybook/addon-knobs";
+import { AlsoRead } from "./index";
+import { generateStoryElementData, generateStory } from "../../../Fixture";
+import Readme from "./README.md";
+var element = generateStoryElementData("also-read");
+var story = generateStory();
+var templateStyle = {
+  Default: "default",
+  "Image Right Align": "imageRightAlign",
+  "Text Left Align": "textLeftAlign"
+};
+withStore("Atoms/Story Elements/Also Read", {
+  qt: {
+    config: {
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
+}, Readme).add("Default", function () {
+  return /*#__PURE__*/React.createElement(AlsoRead, {
+    story: story,
+    element: element,
+    template: optionalSelect("Template Options", templateStyle),
+    css: {
+      textColor: color("Color", "#ff214b")
+    },
+    opts: {
+      title: text("Title", "Also read")
+    }
+  });
+}).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(AlsoRead, {
+    element: element,
+    render: customTemplate
+  });
+});

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

@@ -0,0 +1,21 @@
+# Attachment
+
+Component to display the attachment element.
+
+## Usage
+
+#### Attachment story element with default template
+
+```jsx
+<Attachment element={element} />
+```
+
+#### Replace default attachment element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element["file-name"] }} />;
+
+<Attachment element={element} />;
+```
+
+<!-- PROPS -->

package/esm/components/Atoms/StoryElements/Attachment/__snapshots__/attachment.test.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Attachment Story Element Should render default template 1`] = `
+<AttachmentBase
+  element={
+    Object {
+      "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "description": "",
+      "family-id": "95bf1052-d663-446d-ace7-d014325e0027",
+      "file-name": "document__7_ (1).docx",
+      "id": "2f648c29-ef8f-442c-903a-263f82e631dd",
+      "metadata": Object {
+        "file-size": 8209,
+      },
+      "page-url": "/story/7155b5c2-80a4-4922-bdf1-73f1ff04311e/element/2f648c29-ef8f-442c-903a-263f82e631dd",
+      "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+      "subtype": "attachment",
+      "title": "",
+      "type": "file",
+      "url": "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+    }
+  }
+/>
+`;
+
+exports[`Attachment Story Element Should render default template with default file-name if not passed 1`] = `
+<AttachmentBase
+  element={
+    Object {
+      "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "description": "",
+      "family-id": "95bf1052-d663-446d-ace7-d014325e0027",
+      "file-name": "",
+      "id": "2f648c29-ef8f-442c-903a-263f82e631dd",
+      "metadata": Object {
+        "file-size": 8209,
+      },
+      "page-url": "/story/7155b5c2-80a4-4922-bdf1-73f1ff04311e/element/2f648c29-ef8f-442c-903a-263f82e631dd",
+      "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+      "subtype": "attachment",
+      "title": "",
+      "type": "file",
+      "url": "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+    }
+  }
+/>
+`;

package/esm/components/Atoms/StoryElements/Attachment/attachment.m.css

@@ -0,0 +1,125 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.headline {
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-3);
+  padding-bottom: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+    padding-bottom: var(--arrow-spacing-s);
+    @media (min-width: tablet) {
+      padding-bottom: var(--arrow-spacing-m);
+    }
+  }
+}
+
+.button-wrapper {
+  border-radius: 3px;
+  font-size: var(--arrow-fs-tiny);
+  line-height: var(--arrow-lh-4);
+  text-align: center;
+  padding: 6px var(--arrow-spacing-m);
+  @media (min-width: tablet) {
+    margin-left: var(--arrow-spacing-m);
+  }
+}
+
+.file-name {
+  font-size: var(--arrow-fs-s);
+  line-height: var(--arrow-lh-5);
+  margin-bottom: var(--arrow-spacing-m);
+  word-break: break-word;
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    line-height: var(--arrow-lh-3);
+    @media (min-width: tablet) {
+      margin-bottom: unset;
+    }
+  }
+}
+
+.dark .headline,
+.dark .file-name,
+.dark .button-wrapper {
+  color: var(--arrow-c-mono2);
+}
+
+.light .headline,
+.light .file-name,
+.light .button-wrapper {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.pdf {
+  width: 35px;
+  height: 35px;
+  font-size: var(--arrow-fs-tiny);
+  font-weight: var(--arrow-fw-bold);
+  color: var(--arrow-c-light);
+  border-radius: 6px;
+  background-color: #db5449;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    width: 45px;
+    height: 45px;
+    border-radius: var(--arrow-spacing-xs);
+  }
+}
+.doc {
+  composes: pdf;
+  background-color: #007bd8;
+}
+
+.wrapper {
+  display: flex;
+  padding: var(--arrow-spacing-m);
+  border-radius: var(--arrow-spacing-xxs);
+  @media (min-width: tablet) {
+    padding: var(--arrow-spacing-l);
+  }
+}
+
+.dark .wrapper {
+  border: solid 1px var(--arrow-c-mono7);
+  background-color: var(--arrow-c-mono7);
+}
+
+.light .wrapper {
+  border: solid 1px var(--arrow-c-invert-mono7);
+  background-color: var(--arrow-c-invert-mono7);
+}
+
+.dark .button-wrapper {
+  border: solid 1px var(--arrow-c-mono2);
+}
+
+.light .button-wrapper {
+  border: solid 1px var(--arrow-c-invert-mono2);
+}
+
+.content-wrapper {
+  @media (min-width: tablet) {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+html[dir="rtl"] {
+  .doc,
+  .pdf,
+  .headline {
+    margin-right: 0;
+  }
+
+  .content-wrapper {
+    margin-right: var(--arrow-spacing-m);
+  }
+}

package/esm/components/Atoms/StoryElements/Attachment/attachment.test.js

@@ -0,0 +1,66 @@
+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 } from "enzyme";
+import { generateStoryElementData } from "../../../Fixture";
+import { Attachment } from "./index";
+var element = generateStoryElementData("attachment");
+describe("Attachment Story Element", function () {
+  it("Should render default template", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Attachment, {
+      element: element
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("Should not render default template if url is not passed", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Attachment, {
+      element: _objectSpread(_objectSpread({}, element), {}, {
+        url: ""
+      })
+    }));
+    expect(wrapper.find({
+      "data-test-id": "attachment"
+    }).length).toEqual(0);
+  });
+  it("Should not render default template if content-type is not passed", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Attachment, {
+      element: _objectSpread(_objectSpread({}, element), {}, {
+        "content-type": ""
+      })
+    }));
+    expect(wrapper.find({
+      "data-test-id": "attachment"
+    }).length).toEqual(0);
+  });
+  it("Should render default template with default file-name if not passed", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Attachment, {
+      element: _objectSpread(_objectSpread({}, element), {}, {
+        "file-name": ""
+      })
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("Should render PDF icon if content-type is pdf", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Attachment, {
+      element: element
+    }));
+    expect(wrapper.find({
+      "data-test-id": "doc"
+    }).length).toEqual(0);
+  });
+  it("Should render DOC icon if content-type is doc", function () {
+    element = _objectSpread(_objectSpread({}, element), {}, {
+      "content-type": "application/doc"
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Attachment, {
+      element: element
+    }));
+    expect(wrapper.find({
+      "data-test-id": "pdf"
+    }).length).toEqual(0);
+  });
+});

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

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "render"];
+import _getClassName from "babel-plugin-react-css-modules/dist/browser/getClassName";
+var _styleModuleImportMap = {
+  "./attachment.m.css": {
+    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "tablet": "992px",
+    "headline": "attachment-m_headline__kP7Hs",
+    "button-wrapper": "attachment-m_button-wrapper__2fajK",
+    "file-name": "attachment-m_file-name__1LU9q",
+    "dark": "attachment-m_dark__3ixF7",
+    "light": "attachment-m_light__1kcpj",
+    "pdf": "attachment-m_pdf__3i_bR",
+    "doc": "attachment-m_doc__6vUVo attachment-m_pdf__3i_bR",
+    "wrapper": "attachment-m_wrapper__3gMwN",
+    "content-wrapper": "attachment-m_content-wrapper__3Yu0B"
+  }
+};
+import React from "react";
+import PropTypes from "prop-types";
+import "./attachment.m.css";
+import { Link } from "@quintype/components";
+import { withElementWrapper } from "../withElementWrapper";
+import { useStateValue } from "../../../SharedContext";
+import { getTextColor } from "../../../../utils/utils";
+
+var AttachmentBase = function AttachmentBase(_ref) {
+  var _ref$element = _ref.element,
+      element = _ref$element === void 0 ? {} : _ref$element,
+      render = _ref.render,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var fileName = element["file-name"],
+      url = element.url,
+      contentType = element["content-type"];
+  if (!contentType || !url) return null;
+  var attachmentType = {
+    PDF: "application/pdf"
+  };
+  var isPdf = contentType === attachmentType.PDF;
+  var configData = useStateValue() || {};
+  var textColor = getTextColor(configData.theme);
+  var defaultName = isPdf ? "Attached PDF" : "Attached DOC";
+  var defaultFileName = fileName || defaultName;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-test-id": "attachment"
+  }, restProps, {
+    className: "arrow-component arr--attachment-element " + _getClassName(textColor, _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "attachment-m_headline__kP7Hs"
+  }, "Attachment"), /*#__PURE__*/React.createElement("div", {
+    className: "attachment-m_wrapper__3gMwN"
+  }, isPdf ? /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "pdf",
+    className: "attachment-m_pdf__3i_bR"
+  }, "PDF") : /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "doc",
+    className: "attachment-m_doc__6vUVo attachment-m_pdf__3i_bR"
+  }, "DOC"), /*#__PURE__*/React.createElement("div", {
+    className: "attachment-m_content-wrapper__3Yu0B"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "attachment-m_file-name__1LU9q",
+    dangerouslySetInnerHTML: {
+      __html: defaultFileName
+    }
+  }), /*#__PURE__*/React.createElement(Link, {
+    className: "attachment-m_button-wrapper__2fajK",
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    download: true,
+    "aria-label": "button"
+  }, isPdf ? "Preview" : "Download"))));
+};
+
+AttachmentBase.propTypes = {
+  element: PropTypes.shape({
+    url: PropTypes.string,
+    fileName: PropTypes.string,
+    contentType: PropTypes.string
+  }),
+  render: PropTypes.func
+};
+export var Attachment = withElementWrapper(AttachmentBase);

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Attachment } from "./index";
+import { generateStoryElementData } from "../../../Fixture";
+import Readme from "./README.md";
+var doc = {
+  description: "",
+  "page-url": "/story/7155b5c2-80a4-4922-bdf1-73f1ff04311e/element/2f648c29-ef8f-442c-903a-263f82e631dd",
+  type: "file",
+  "family-id": "95bf1052-d663-446d-ace7-d014325e0027",
+  title: "",
+  id: "2f648c29-ef8f-442c-903a-263f82e631dd",
+  "file-name": "document__7_ (1).docx",
+  url: "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+  "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+  "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  metadata: {
+    "file-size": 8209
+  },
+  subtype: "attachment"
+};
+var pdf = {
+  description: "",
+  "page-url": "/story/a9068be5-70ce-4d55-86d0-687546f921ea/element/62393c55-50ed-4310-81c2-01cc0ef17446",
+  type: "file",
+  "family-id": "591f90c3-e98e-43dc-8509-9f11f5335af6",
+  title: "",
+  id: "62393c55-50ed-4310-81c2-01cc0ef17446",
+  "file-name": "resume-samples.pdf",
+  url: "https://thumbor-stg.assettype.com/ace/2019-07/6dcf2021-615b-43e6-85f3-21acb8953cea/resume_samples.pdf",
+  "s3-key": "ace/2019-07/6dcf2021-615b-43e6-85f3-21acb8953cea/resume_samples.pdf",
+  "content-type": "application/pdf",
+  metadata: {
+    "file-size": 301808
+  },
+  subtype: "attachment"
+};
+var element = generateStoryElementData("attachment");
+withStore("Atoms/Story Elements/Attachment", Readme).add("PDF", function () {
+  return /*#__PURE__*/React.createElement(Attachment, {
+    element: pdf
+  });
+}).add("DOC", function () {
+  return /*#__PURE__*/React.createElement(Attachment, {
+    element: doc
+  });
+}).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["file-name"]
+      }
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(Attachment, {
+    element: element,
+    render: customTemplate
+  });
+});

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

@@ -0,0 +1,9 @@
+## BigFact
+
+BigFact displays the big fact content of the story element.
+
+# Usage
+
+```jsx
+<BigFact element={element}>
+```

package/esm/components/Atoms/StoryElements/BigFact/big-fact.m.css

@@ -0,0 +1,41 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.bigfact-element {
+  border-bottom: 1px solid var(--arrow-c-mono5);
+  border-top: 1px solid var(--arrow-c-mono5);
+}
+
+.bigfact-element.light {
+  border-bottom: 1px solid var(--arrow-c-invert-mono5);
+  border-top: 1px solid var(--arrow-c-invert-mono5);
+}
+
+.content {
+  font-size: var(--arrow-fs-huge);
+  font-weight: var(--arrow-fw-bold);
+  color: var(--arrow-c-brand1);
+  padding: var(--arrow-spacing-m) 0 var(--arrow-spacing-xxs) 0;
+  @media (min-width: mobile) {
+    font-size: 48px;
+    padding: var(--arrow-spacing-m) 0 var(--arrow-spacing-xs) 0;
+    line-height: var(--arrow-lh-3);
+  }
+}
+
+.attribution {
+  font-size: var(--arrow-fs-s);
+  font-style: italic;
+  line-height: var(--arrow-lh-5);
+  padding-bottom: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono1);
+}
+.light {
+  color: var(--arrow-c-invert-mono1);
+}