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

package/story-elements/BigFact/index.js

@@ -1,137 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
-var React = require('react');
-var PropTypes = require('prop-types');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/helpers/typeof');
-require('@babel/runtime/regenerator');
-require('lodash');
-require('react-timeago');
-require('date-fns-tz');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-var _excluded$1 = ["element", "render"];
-var withElementWrapper = function withElementWrapper(StoryElement) {
-  return function (props) {
-    var element = props.element,
-        render = props.render,
-        restProps = _objectWithoutProperties__default["default"](props, _excluded$1);
-
-    if (!element) return null;
-    if (render && typeof render === "function") return render(props);
-    return /*#__PURE__*/React__default["default"].createElement(StoryElement, _extends__default["default"]({}, restProps, {
-      element: element
-    }));
-  };
-};
-withElementWrapper.propTypes = {
-  StoryElement: PropTypes__default["default"].element
-};
-
-var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
-var useStateValue = function useStateValue() {
-  return React.useContext(StateContext);
-};
-
-var hexToRGB = function hexToRGB(hex) {
-  var r = parseInt(hex.slice(1, 3), 16);
-  var g = parseInt(hex.slice(3, 5), 16);
-  var b = parseInt(hex.slice(5, 7), 16);
-  return {
-    r: r,
-    g: g,
-    b: b
-  };
-};
-var getLuminanceOfColor = function getLuminanceOfColor(hex) {
-  var _hexToRGB = hexToRGB(hex),
-      r = _hexToRGB.r,
-      g = _hexToRGB.g,
-      b = _hexToRGB.b;
-
-  return r * 0.299 + g * 0.587 + b * 0.114;
-};
-var rgbToHex = function rgbToHex() {
-  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgba(255, 255, 255, 0)";
-  var rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
-  return rgba && rgba.length === 4 ? "#" + ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2) : color;
-};
-var getTextColor = function getTextColor() {
-  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(255,255,255)";
-  var isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
-  var getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
-  var textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
-  return textColor;
-};
-PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var _excluded = ["element", "story", "config"];
-var _styleModuleImportMap = {
-  "./big-fact.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
-    "mobile": "768px",
-    "bigfact-element": "big-fact-m_bigfact-element__3uAwv",
-    "light": "big-fact-m_light__ha49M",
-    "content": "big-fact-m_content__1u2Ul",
-    "attribution": "big-fact-m_attribution__3XK_P",
-    "dark": "big-fact-m_dark__7a_KC"
-  }
-};
-
-var BigFactBase = function BigFactBase(_ref) {
-  var element = _ref.element;
-      _ref.story;
-      _ref.config;
-      var restProps = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  var configData = useStateValue() || {};
-  var textInvertColor = getTextColor(configData.theme);
-  var _element$metadata = element.metadata,
-      content = _element$metadata.content,
-      attribution = _element$metadata.attribution;
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
-    "data-test-id": "bigfact"
-  }, restProps, {
-    className: "arrow-component arr--bigfact-element " + _getClassName__default["default"]("bigfact-element ".concat(textInvertColor), _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "big-fact-m_content__1u2Ul"
-  }, content), /*#__PURE__*/React__default["default"].createElement("div", {
-    "data-test-id": "attribution",
-    className: _getClassName__default["default"]("attribution ".concat(textInvertColor), _styleModuleImportMap)
-  }, attribution));
-};
-
-BigFactBase.propTypes = {
-  element: PropTypes__default["default"].shape({
-    metadata: PropTypes__default["default"].shape({
-      content: PropTypes__default["default"].string,
-      attribution: PropTypes__default["default"].string
-    })
-  }),
-  story: PropTypes__default["default"].object,
-  config: PropTypes__default["default"].object
-};
-var BigFact = withElementWrapper(BigFactBase);
-
-exports.BigFact = BigFact;

package/story-elements/BigFact/styles.arrow.css

@@ -1 +0,0 @@
-.big-fact-m_bigfact-element__47agi{border-bottom:1px solid var(--arrow-c-mono5);border-top:1px solid var(--arrow-c-mono5)}.big-fact-m_bigfact-element__47agi.big-fact-m_light__mD5-O{border-bottom:1px solid var(--arrow-c-invert-mono5);border-top:1px solid var(--arrow-c-invert-mono5)}.big-fact-m_content__8owr3{color:var(--arrow-c-brand1);font-size:var(--arrow-fs-huge);font-weight:var(--arrow-fw-bold);padding:var(--arrow-spacing-m) 0 var(--arrow-spacing-xxs) 0}@media (min-width:768px){.big-fact-m_content__8owr3{font-size:48px;line-height:var(--arrow-lh-3);padding:var(--arrow-spacing-m) 0 var(--arrow-spacing-xs) 0}}.big-fact-m_attribution__jvNEm{font-size:var(--arrow-fs-s);font-style:italic;line-height:var(--arrow-lh-5);padding-bottom:var(--arrow-spacing-m)}@media (min-width:768px){.big-fact-m_attribution__jvNEm{font-size:var(--arrow-fs-m)}}.big-fact-m_dark__Q-tzO{color:var(--arrow-c-mono1)}.big-fact-m_light__mD5-O{color:var(--arrow-c-invert-mono1)}

package/story-elements/BlockQuote/index.js

@@ -1,304 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
-var React = require('react');
-var lodash = require('lodash');
-var PropTypes = require('prop-types');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/helpers/typeof');
-require('@babel/runtime/regenerator');
-require('react-timeago');
-require('date-fns-tz');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-var hexToRGB = function hexToRGB(hex) {
-  var r = parseInt(hex.slice(1, 3), 16);
-  var g = parseInt(hex.slice(3, 5), 16);
-  var b = parseInt(hex.slice(5, 7), 16);
-  return {
-    r: r,
-    g: g,
-    b: b
-  };
-};
-var getLuminanceOfColor = function getLuminanceOfColor(hex) {
-  var _hexToRGB = hexToRGB(hex),
-      r = _hexToRGB.r,
-      g = _hexToRGB.g,
-      b = _hexToRGB.b;
-
-  return r * 0.299 + g * 0.587 + b * 0.114;
-};
-var rgbToHex = function rgbToHex() {
-  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgba(255, 255, 255, 0)";
-  var rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
-  return rgba && rgba.length === 4 ? "#" + ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2) : color;
-};
-var clientWidths = {
-  mobile: 767,
-  tablet: 1024
-};
-var clientWidth = function clientWidth(device) {
-  var foundDeviceWidth = lodash.get(clientWidths, device);
-
-  if (foundDeviceWidth) {
-    return lodash.get(global, "document.documentElement.clientWidth") <= foundDeviceWidth;
-  }
-
-  return false;
-};
-var getTextColor = function getTextColor() {
-  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(255,255,255)";
-  var isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
-  var getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
-  var textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
-  return textColor;
-};
-var shapeConfig = PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-var shapeStory = PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var _excluded$1 = ["element", "render"];
-var withElementWrapper = function withElementWrapper(StoryElement) {
-  return function (props) {
-    var element = props.element,
-        render = props.render,
-        restProps = _objectWithoutProperties__default["default"](props, _excluded$1);
-
-    if (!element) return null;
-    if (render && typeof render === "function") return render(props);
-    return /*#__PURE__*/React__default["default"].createElement(StoryElement, _extends__default["default"]({}, restProps, {
-      element: element
-    }));
-  };
-};
-withElementWrapper.propTypes = {
-  StoryElement: PropTypes__default["default"].element
-};
-
-var CurveIcon = function CurveIcon(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      color = _ref.color,
-      opacity = _ref.opacity;
-  var lightColor = color === "light" && "#ffffff";
-  var darkColor = color === "dark" && "#0d0d0d";
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "icon-m_curve-wrapper__3-sLV",
-    style: {
-      fill: "".concat(lightColor || darkColor || color)
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: width,
-    height: height,
-    viewBox: "0 0 64 64"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    fill: "inherit",
-    opacity: opacity,
-    d: "M61 44.702c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067-2.638-2.712-3.956-6.704-3.956-11.976 0-4.971.716-9.227 2.147-12.767 1.432-3.54 3.165-6.553 5.2-9.039 2.034-2.485 4.144-4.481 6.33-5.988 2.184-1.506 4.106-2.56 5.763-3.163l5.652 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.035 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.007 3.163C60.171 39.13 61 41.69 61 44.702zm-33.004 0c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067C3.319 49.22 2 45.229 2 39.957c0-4.971.716-9.227 2.148-12.767 1.431-3.54 3.164-6.553 5.199-9.039 2.034-2.485 4.144-4.481 6.33-5.988C17.86 10.657 19.782 9.603 21.44 9l5.651 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.034 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.008 3.163 1.657 2.11 2.486 4.67 2.486 7.683z"
-  })));
-};
-CurveIcon.propTypes = {
-  width: PropTypes__default["default"].string,
-  height: PropTypes__default["default"].string,
-  color: PropTypes__default["default"].string,
-  opacity: PropTypes__default["default"].string
-};
-
-var EdgeIcon = function EdgeIcon(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      color = _ref.color,
-      opacity = _ref.opacity;
-  var lightColor = color === "light" && "#ffffff";
-  var darkColor = color === "dark" && "#0d0d0d";
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "icon-m_edge-wrapper__xUOdp",
-    style: {
-      fill: "".concat(lightColor || darkColor || color)
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: width,
-    height: height,
-    viewBox: "0 0 64 64"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    fill: "inherit",
-    opacity: opacity,
-    d: "M16.858 29.836v4.727H28V60H4V29.836c0-9.6 2.606-16.727 7.746-21.187C15.3 5.564 19.8 4 25.122 4v13.627c-2.888 0-8.264 0-8.264 12.209zm40.264-12.21V4c-5.32 0-9.82 1.564-13.376 4.65C38.606 13.108 36 20.236 36 29.835V60h24V34.563H48.857v-4.727c0-12.21 5.377-12.21 8.265-12.21z"
-  })));
-};
-EdgeIcon.propTypes = {
-  width: PropTypes__default["default"].string,
-  height: PropTypes__default["default"].string,
-  color: PropTypes__default["default"].string,
-  opacity: PropTypes__default["default"].string
-};
-
-var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
-var useStateValue = function useStateValue() {
-  return React.useContext(StateContext);
-};
-
-var _excluded = ["element", "template", "css", "story", "config", "render"];
-var _styleModuleImportMap = {
-  "./block-quote.m.css": {
-    "viewports": "\"../../../../../assets/stylesheets/viewports.m.css\"",
-    "mobile": "768px",
-    "blockquote-withBackground": "block-quote-m_blockquote-withBackground__1yW-u",
-    "icon": "block-quote-m_icon__m-EIZ",
-    "icon-border": "block-quote-m_icon-border__2xQQY",
-    "blockquote": "block-quote-m_blockquote__HPVh0",
-    "blockquote-default": "block-quote-m_blockquote-default__fZ8a1",
-    "blockquote-withBorder": "block-quote-m_blockquote-withBorder__1GVQL",
-    "border": "block-quote-m_border__1ZTPR",
-    "content": "block-quote-m_content__xpMqX",
-    "wrapper": "block-quote-m_wrapper__2KEhw",
-    "attribution": "block-quote-m_attribution__2m4s2",
-    "quote-wrapper": "block-quote-m_quote-wrapper__83bEy",
-    "dark": "block-quote-m_dark__HaZuG",
-    "light": "block-quote-m_light__1QrNc"
-  }
-};
-
-var SelectionOfIcon = function SelectionOfIcon(iconType, template, blockQuoteColor, quoteColor) {
-  var isMobile = clientWidth("mobile");
-  var dimension = isMobile ? "48px" : "64px";
-
-  if (template === "withBackground") {
-    if (iconType === "edgeIcon") {
-      return /*#__PURE__*/React__default["default"].createElement(EdgeIcon, {
-        width: dimension,
-        height: dimension,
-        color: quoteColor,
-        opacity: ".4"
-      });
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement(CurveIcon, {
-      width: dimension,
-      height: dimension,
-      color: quoteColor,
-      opacity: ".4"
-    });
-  }
-
-  if (template !== "withBackground") {
-    if (iconType === "edgeIcon") {
-      return /*#__PURE__*/React__default["default"].createElement(EdgeIcon, {
-        width: dimension,
-        height: dimension,
-        color: blockQuoteColor
-      });
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement(CurveIcon, {
-      width: dimension,
-      height: dimension,
-      color: blockQuoteColor
-    });
-  }
-};
-
-var BlockQuoteBase = function BlockQuoteBase(_ref) {
-  var element = _ref.element,
-      template = _ref.template,
-      _ref$css = _ref.css,
-      css = _ref$css === void 0 ? {} : _ref$css;
-      _ref.story;
-      _ref.config;
-      _ref.render;
-      var restProps = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  var _get = lodash.get(element, ["metadata"]),
-      content = _get.content,
-      attribution = _get.attribution;
-
-  if (!content) return null;
-  var blockQuoteColor = css.blockQuoteColor,
-      backgroundShade = css.backgroundShade,
-      iconType = css.iconType;
-  var templateStyle = template ? "blockquote-".concat(template) : "blockquote";
-  var isBackground = template === "withBackground";
-  var textColor = isBackground ? getTextColor(backgroundShade) : "";
-  var theme = isBackground && backgroundShade ? {
-    backgroundColor: backgroundShade
-  } : {};
-  var configData = useStateValue() || {};
-  var textInvertColor = getTextColor(isBackground ? theme.backgroundColor : configData.theme);
-
-  var updateStructure = function updateStructure() {
-    return template === "withBorder" ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "block-quote-m_icon-border__2xQQY"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "block-quote-m_icon__m-EIZ"
-    }, SelectionOfIcon(iconType, template, blockQuoteColor, textColor)), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "block-quote-m_border__1ZTPR",
-      style: blockQuoteColor && {
-        backgroundColor: blockQuoteColor
-      }
-    })) : /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "block-quote-m_icon__m-EIZ"
-    }, SelectionOfIcon(iconType, template, blockQuoteColor, textColor));
-  };
-
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
-    "data-test-id": "blockquote",
-    style: theme
-  }, restProps, {
-    className: "arrow-component arr--block-quote " + _getClassName__default["default"]("".concat(templateStyle, " ").concat(textColor), _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "block-quote-m_quote-wrapper__83bEy"
-  }, updateStructure(), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "block-quote-m_wrapper__2KEhw",
-    style: blockQuoteColor && {
-      borderColor: blockQuoteColor
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: content
-    },
-    className: _getClassName__default["default"]("content ".concat(textInvertColor), _styleModuleImportMap)
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: attribution
-    },
-    className: _getClassName__default["default"]("attribution ".concat(textInvertColor), _styleModuleImportMap)
-  }))));
-};
-BlockQuoteBase.propTypes = {
-  element: PropTypes__default["default"].shape({
-    metadata: PropTypes__default["default"].shape({
-      content: PropTypes__default["default"].string,
-      attribution: PropTypes__default["default"].string
-    })
-  }),
-  template: PropTypes__default["default"].string,
-  story: shapeStory,
-  config: shapeConfig,
-  render: PropTypes__default["default"].func,
-  css: PropTypes__default["default"].object
-};
-var BlockQuote = withElementWrapper(BlockQuoteBase);
-
-exports.BlockQuote = BlockQuote;
-exports.BlockQuoteBase = BlockQuoteBase;

package/story-elements/BlockQuote/styles.arrow.css

@@ -1 +0,0 @@
-.icon-m_curve-wrapper__8pIo0,.icon-m_edge-wrapper__y8H5O{fill:var(--arrow-c-brand1)}@media (min-width:768px){.block-quote-m_blockquote-withBackground__R0W5x:before{content:"";padding-top:56.25%}}.block-quote-m_icon__ljXp3{height:48px;width:48px}@media (min-width:768px){.block-quote-m_icon__ljXp3{height:64px;width:64px}}.block-quote-m_icon-border__-KS5N{display:flex;margin-bottom:var(--arrow-spacing-s)}@media (min-width:768px){.block-quote-m_icon-border__-KS5N{margin-bottom:var(--arrow-spacing-m)}}.block-quote-m_blockquote-default__4vRK4 .block-quote-m_icon__ljXp3,.block-quote-m_blockquote__dzF8A .block-quote-m_icon__ljXp3{margin-bottom:var(--arrow-spacing-s)}@media (min-width:768px){.block-quote-m_blockquote-default__4vRK4 .block-quote-m_icon__ljXp3,.block-quote-m_blockquote__dzF8A .block-quote-m_icon__ljXp3{margin-bottom:unset;margin-right:var(--arrow-spacing-l)}}.block-quote-m_blockquote-withBorder__FEm3U .block-quote-m_icon__ljXp3{margin-right:var(--arrow-spacing-m)}@media (min-width:768px){.block-quote-m_blockquote-withBorder__FEm3U .block-quote-m_icon__ljXp3{margin-right:var(--arrow-spacing-l)}}.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_icon__ljXp3{margin-bottom:var(--arrow-spacing-s)}@media (min-width:768px){.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_icon__ljXp3{margin-bottom:var(--arrow-spacing-m)}}.block-quote-m_blockquote-withBorder__FEm3U .block-quote-m_border__qH-im{background-color:var(--arrow-c-brand1);height:2px;margin-top:36px;width:100%}.block-quote-m_blockquote-default__4vRK4 .block-quote-m_content__YbDa-,.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_content__YbDa-,.block-quote-m_blockquote-withBorder__FEm3U .block-quote-m_content__YbDa-,.block-quote-m_blockquote__dzF8A .block-quote-m_content__YbDa-{font-family:var(--arrow-typeface-primary);font-size:var(--arrow-fs-l);font-weight:var(--arrow-fw-bold);line-height:var(--arrow-lh-3);margin-bottom:var(--arrow-spacing-s)}@media (min-width:768px){.block-quote-m_blockquote-default__4vRK4 .block-quote-m_content__YbDa-,.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_content__YbDa-,.block-quote-m_blockquote-withBorder__FEm3U .block-quote-m_content__YbDa-,.block-quote-m_blockquote__dzF8A .block-quote-m_content__YbDa-{font-size:var(--arrow-fs-huge)}.block-quote-m_blockquote-default__4vRK4 .block-quote-m_content__YbDa-,.block-quote-m_blockquote__dzF8A .block-quote-m_content__YbDa-{margin-bottom:var(--arrow-spacing-xs)}}.block-quote-m_blockquote-withBorder__FEm3U .block-quote-m_content__YbDa-{margin-bottom:var(--arrow-spacing-xs)}.block-quote-m_blockquote-withBorder__FEm3U .block-quote-m_wrapper__wUdeS{border-bottom:2px solid var(--arrow-c-brand1)}.block-quote-m_blockquote-default__4vRK4 .block-quote-m_attribution__bIVR3,.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_attribution__bIVR3,.block-quote-m_blockquote-withBorder__FEm3U .block-quote-m_attribution__bIVR3,.block-quote-m_blockquote__dzF8A .block-quote-m_attribution__bIVR3{font-family:var(--arrow-typeface-secondary);font-size:var(--arrow-fs-m);font-style:italic;font-weight:var(--arrow-fw-bold);line-height:var(--arrow-lh-5)}@media (min-width:768px){.block-quote-m_blockquote-default__4vRK4 .block-quote-m_attribution__bIVR3,.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_attribution__bIVR3,.block-quote-m_blockquote-withBorder__FEm3U .block-quote-m_attribution__bIVR3,.block-quote-m_blockquote__dzF8A .block-quote-m_attribution__bIVR3{font-size:var(--arrow-fs-l)}}.block-quote-m_blockquote-withBorder__FEm3U .block-quote-m_attribution__bIVR3{margin-bottom:var(--arrow-spacing-l)}.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_attribution__bIVR3{display:flex;justify-content:flex-end}.block-quote-m_blockquote-withBackground__R0W5x{align-items:center;background-color:var(--arrow-c-brand1);display:flex;justify-content:center}.block-quote-m_blockquote-withBorder__FEm3U{display:block}.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_attribution__bIVR3:before{color:inherit;content:"–";margin-right:var(--arrow-spacing-xs)}@media (min-width:768px){.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_attribution__bIVR3:before{margin-right:var(--arrow-spacing-s)}}.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_quote-wrapper__YIqqi{padding:48px}@media (min-width:768px){.block-quote-m_blockquote-withBackground__R0W5x .block-quote-m_quote-wrapper__YIqqi{padding:96px}.block-quote-m_blockquote-default__4vRK4 .block-quote-m_quote-wrapper__YIqqi,.block-quote-m_blockquote__dzF8A .block-quote-m_quote-wrapper__YIqqi{display:flex}}html[dir=rtl] .block-quote-m_wrapper__wUdeS{margin-right:var(--arrow-spacing-l)}.block-quote-m_attribution__bIVR3.block-quote-m_dark__HZleY{color:var(--arrow-c-mono4)}.block-quote-m_attribution__bIVR3.block-quote-m_light__ppilC{color:var(--arrow-c-invert-mono4)}.block-quote-m_content__YbDa-.block-quote-m_dark__HZleY{color:var(--arrow-c-mono2)}.block-quote-m_content__YbDa-.block-quote-m_light__ppilC{color:var(--arrow-c-invert-mono2)}

package/story-elements/Blurb/index.js

@@ -1,189 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _extends = require('@babel/runtime/helpers/extends');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
-var React = require('react');
-var PropTypes = require('prop-types');
-require('@babel/runtime/helpers/asyncToGenerator');
-require('@babel/runtime/helpers/typeof');
-require('@babel/runtime/regenerator');
-require('lodash');
-require('react-timeago');
-require('date-fns-tz');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-var _excluded$1 = ["element", "render"];
-var withElementWrapper = function withElementWrapper(StoryElement) {
-  return function (props) {
-    var element = props.element,
-        render = props.render,
-        restProps = _objectWithoutProperties__default["default"](props, _excluded$1);
-
-    if (!element) return null;
-    if (render && typeof render === "function") return render(props);
-    return /*#__PURE__*/React__default["default"].createElement(StoryElement, _extends__default["default"]({}, restProps, {
-      element: element
-    }));
-  };
-};
-withElementWrapper.propTypes = {
-  StoryElement: PropTypes__default["default"].element
-};
-
-var hexToRGB = function hexToRGB(hex) {
-  var r = parseInt(hex.slice(1, 3), 16);
-  var g = parseInt(hex.slice(3, 5), 16);
-  var b = parseInt(hex.slice(5, 7), 16);
-  return {
-    r: r,
-    g: g,
-    b: b
-  };
-};
-var getLuminanceOfColor = function getLuminanceOfColor(hex) {
-  var _hexToRGB = hexToRGB(hex),
-      r = _hexToRGB.r,
-      g = _hexToRGB.g,
-      b = _hexToRGB.b;
-
-  return r * 0.299 + g * 0.587 + b * 0.114;
-};
-var rgbToHex = function rgbToHex() {
-  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgba(255, 255, 255, 0)";
-  var rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
-  return rgba && rgba.length === 4 ? "#" + ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2) : color;
-};
-var getTextColor = function getTextColor() {
-  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(255,255,255)";
-  var isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
-  var getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
-  var textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
-  return textColor;
-};
-
-var updateContentLinks = function updateContentLinks(content) {
-  var updatedContent = content;
-  var anchorTagsList = content.match(/(<a).*?(>)/g);
-  anchorTagsList && anchorTagsList.forEach(function (anchorTag) {
-    var isTargetPresent = /target=/g.test(anchorTag);
-
-    if (!isTargetPresent) {
-      updatedContent = updatedContent.replace(anchorTag, "<a aria-label='content' target='_blank'".concat(anchorTag.substring(2)));
-    }
-  });
-  return updatedContent;
-};
-var shapeConfig = PropTypes__default["default"].shape({
-  "sketches-host": PropTypes__default["default"].string,
-  "cdn-name": PropTypes__default["default"].string,
-  "cdn-image": PropTypes__default["default"].string
-});
-var shapeStory = PropTypes__default["default"].shape({
-  headline: PropTypes__default["default"].string,
-  "last-published-at": PropTypes__default["default"].number,
-  subheadline: PropTypes__default["default"].string
-});
-
-var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
-var useStateValue = function useStateValue() {
-  return React.useContext(StateContext);
-};
-
-var _excluded = ["element", "template", "opts", "css", "story", "config", "render"];
-var _styleModuleImportMap = {
-  "./blurb.m.css": {
-    "viewports": "\"../../../../../assets/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"
-  }
-};
-
-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.config;
-      _ref.render;
-      var restProps = _objectWithoutProperties__default["default"](_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 = React.useState(initBorderDirection),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      borderDirection = _useState2[0],
-      setBorderDirection = _useState2[1];
-
-  if (!content) return null;
-  React.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__default["default"].createElement("div", _extends__default["default"]({
-    "data-test-id": "blurb",
-    style: borderColor && borderDirection,
-    dangerouslySetInnerHTML: {
-      __html: text
-    }
-  }, restProps, {
-    className: "arrow-component arr-custom-style arr--blurb-element " + _getClassName__default["default"]("".concat(templateStyle, " ").concat(textInvertColor), _styleModuleImportMap) + (" " + (restProps ? restProps.className || "" : ""))
-  }));
-};
-
-BlurbBase.propTypes = {
-  element: PropTypes__default["default"].shape({
-    text: PropTypes__default["default"].string
-  }),
-
-  /** templates can be either default or withBorder */
-  template: PropTypes__default["default"].string,
-  opts: PropTypes__default["default"].shape({
-    isExternalLink: PropTypes__default["default"].bool
-  }),
-  story: shapeStory,
-  config: shapeConfig,
-  render: PropTypes__default["default"].func,
-  css: PropTypes__default["default"].object
-};
-var Blurb = withElementWrapper(BlurbBase);
-
-exports.Blurb = Blurb;

package/story-elements/Blurb/styles.arrow.css

@@ -1 +0,0 @@
-.blurb-m_blurb-default__fXLKW blockquote,.blurb-m_blurb-withBorder__fUumG blockquote,.blurb-m_blurb__OBpf- blockquote{font-family:var(--arrow-typeface-secondary);font-size:var(--arrow-fs-s);line-height:var(--arrow-lh-5)}@media (min-width:768px){.blurb-m_blurb-default__fXLKW blockquote,.blurb-m_blurb-withBorder__fUumG blockquote,.blurb-m_blurb__OBpf- blockquote{font-size:var(--arrow-fs-m)}}.blurb-m_blurb-default__fXLKW blockquote,.blurb-m_blurb__OBpf- blockquote{font-style:italic;padding-left:var(--arrow-spacing-m)}@media (min-width:768px){.blurb-m_blurb-default__fXLKW blockquote,.blurb-m_blurb__OBpf- blockquote{padding-left:var(--arrow-spacing-l)}}.blurb-m_blurb-withBorder__fUumG blockquote{padding:var(--arrow-spacing-s) var(--arrow-spacing-m)}@media (min-width:768px){.blurb-m_blurb-withBorder__fUumG blockquote{padding:var(--arrow-spacing-m) var(--arrow-spacing-l)}}html[dir=rtl] .blurb-m_blurb-default__fXLKW blockquote,html[dir=rtl] .blurb-m_blurb__OBpf- blockquote{padding-left:0;padding-right:var(--arrow-spacing-m)}@media (min-width:768px){html[dir=rtl] .blurb-m_blurb-default__fXLKW blockquote,html[dir=rtl] .blurb-m_blurb__OBpf- blockquote{padding-right:var(--arrow-spacing-l)}}.blurb-m_dark__WV6ZC{color:var(--arrow-c-mono1)}.blurb-m_dark__WV6ZC a{border-bottom:1px solid var(--arrow-c-mono2);color:var(--arrow-c-mono2)}.blurb-m_light__W0MUW{color:var(--arrow-c-invert-mono1)}.blurb-m_light__W0MUW a{border-bottom:1px solid var(--arrow-c-invert-mono2);color:var(--arrow-c-invert-mono2)}