@times-components/article-paragraph 1.7.108 → 1.8.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.8.0](https://github.com/newsuk/times-components/compare/@times-components/article-paragraph@1.7.108...@times-components/article-paragraph@1.8.0) (2022-08-18)
+
+
+### Features
+
+* **TDP-1712:** remove react-native foreverrrrr ([#3064](https://github.com/newsuk/times-components/issues/3064)) ([2a20cb5](https://github.com/newsuk/times-components/commit/2a20cb5abc10a4e7ca2d62487967f8fcf4eccb62)), closes [#3037](https://github.com/newsuk/times-components/issues/3037) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3050](https://github.com/newsuk/times-components/issues/3050) [#3056](https://github.com/newsuk/times-components/issues/3056) [#3057](https://github.com/newsuk/times-components/issues/3057) [#3066](https://github.com/newsuk/times-components/issues/3066) [#3065](https://github.com/newsuk/times-components/issues/3065) [#3037](https://github.com/newsuk/times-components/issues/3037) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3045](https://github.com/newsuk/times-components/issues/3045) [#3056](https://github.com/newsuk/times-components/issues/3056) [#3066](https://github.com/newsuk/times-components/issues/3066) [#3069](https://github.com/newsuk/times-components/issues/3069) [#3068](https://github.com/newsuk/times-components/issues/3068) [#3070](https://github.com/newsuk/times-components/issues/3070) [#3072](https://github.com/newsuk/times-components/issues/3072) [#3073](https://github.com/newsuk/times-components/issues/3073) [#3071](https://github.com/newsuk/times-components/issues/3071) [#3074](https://github.com/newsuk/times-components/issues/3074) [#3076](https://github.com/newsuk/times-components/issues/3076) [#3079](https://github.com/newsuk/times-components/issues/3079) [#3078](https://github.com/newsuk/times-components/issues/3078) [#3083](https://github.com/newsuk/times-components/issues/3083) [#3087](https://github.com/newsuk/times-components/issues/3087) [#3091](https://github.com/newsuk/times-components/issues/3091) [#3096](https://github.com/newsuk/times-components/issues/3096) [#3102](https://github.com/newsuk/times-components/issues/3102) [#3105](https://github.com/newsuk/times-components/issues/3105) [#3108](https://github.com/newsuk/times-components/issues/3108) [#3111](https://github.com/newsuk/times-components/issues/3111) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3113](https://github.com/newsuk/times-components/issues/3113) [#3114](https://github.com/newsuk/times-components/issues/3114) [#3120](https://github.com/newsuk/times-components/issues/3120) [#3119](https://github.com/newsuk/times-components/issues/3119) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3126](https://github.com/newsuk/times-components/issues/3126) [#3112](https://github.com/newsuk/times-components/issues/3112) [#3126](https://github.com/newsuk/times-components/issues/3126) [#3127](https://github.com/newsuk/times-components/issues/3127) [#3116](https://github.com/newsuk/times-components/issues/3116) [#3128](https://github.com/newsuk/times-components/issues/3128) [#3132](https://github.com/newsuk/times-components/issues/3132) [#3133](https://github.com/newsuk/times-components/issues/3133)
+
+
+
+
+
 ## [1.7.108](https://github.com/newsuk/times-components/compare/@times-components/article-paragraph@1.7.107...@times-components/article-paragraph@1.7.108) (2022-08-15)
 
 **Note:** Version bump only for package @times-components/article-paragraph

package/README.md

@@ -1,43 +1,11 @@
 # Article Paragraph
 
-This packages provides a component for displaying an article paragraph
-on android and web, including support for displaying a "drop
-cap" at the beginning of a paragraph.
+This packages provides a component for displaying an article paragraph,
+including support for displaying a "drop cap" at the beginning of a paragraph.
 
-On the web, the drop cap is implemented using CSS floats, and should work with
+The drop cap is implemented using CSS floats, and should work with
 any styling or markup used.
 
-React Native does not support CSS floats. Therefore, on android,
-the drop cap is implemented by rendering three separate text boxes to
-mimic the expected layout, as shown below.
-
-```
- __________________________________________________________
-|     _     | Lorem ipsum dolor sit amet, consectetur      |
-|    / \    | adipiscing elit. Vivamus imperdiet dapibus   |
-|   / _ \   | justo, non varius turpis ornare at. Sed nec  |
-|  / ___ \  | tellus sit amet sapien pretium efficitur sit |
-| /_/   \_\ | amet et mi. Mauris vel lorem erat. Proin     |
-|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
-| pulvinar eros purus, nec lobortis purus mollis viverra.  |
-| Nullam tristique id ligula eget ornare. Curabitur vitae  |
-| erat quam. Vivamus rutrum arcu enim, eu cursus nunc      |
-| congue faucibus. Proin lacinia facilisis auctor.         |
- ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
-```
-
-## Gotchas
-
-To implement this on Android, we must know the number of words that can fit
-next to the specified drop cap character, and then split the paragraph text at
-this point. Because of this, all styling or markup must be stripped.
-**This means on Android, you cannot have styling or markup in a paragraph containing a drop cap.**
-
-We use a [3rd party library](https://github.com/aMarCruz/react-native-text-size)
-to calculate the text to fit next to the drop cap. There is currently limited support for iOS
-from this library. **Therefore, this package
-does not currently have support for iOS.**
-
 ## Contributing
 
 Please read [CONTRIBUTING.md](./CONTRIBUTING.md) before contributing to this
@@ -76,9 +44,3 @@ characters being displayed as a drop cap. However, the acceptance criteria for t
 feature we use this package for has since changed, and this presents the opportunity for
 simplifying the API. **In the future, this package will simply have a toggle for displaying a drop cap,
 and will display the first character as a drop cap when it is enabled.**
-
-We would like to support paragraph styling on Android when drop caps are enabled,
-but this is tricky and therefore it may take some time before support is
-implemented.
-
-We intend to add iOS support to this package.

package/babel.config.js

@@ -1,10 +1,18 @@
 module.exports = api => {
   api.cache(true);
   return {
-    plugins: [
-      "babel-plugin-styled-components",
-      "@babel/plugin-transform-react-display-name"
-    ],
-    presets: ["module:metro-react-native-babel-preset"]
+    plugins: ["babel-plugin-styled-components"],
+    presets: [
+      [
+        "@babel/preset-env",
+        {
+          targets: {
+            esmodules: true
+          }
+        }
+      ],
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ]
   };
 };

package/dist/article-paragraph.js

@@ -1 +1,11 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _responsive=require("./styles/responsive");var _default=_responsive.Paragraph;exports.default=_default;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _responsive = require("./styles/responsive");
+
+var _default = _responsive.Paragraph;
+exports.default = _default;

package/dist/drop-cap-prop-types.js

@@ -1 +1,21 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.defaultProps=exports.propTypes=void 0;var _propTypes=_interopRequireDefault(require("prop-types"));var propTypes={colour:_propTypes.default.string,font:_propTypes.default.string};exports.propTypes=propTypes;var defaultProps={colour:"black",font:"dropCap"};exports.defaultProps=defaultProps;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const propTypes = {
+  colour: _propTypes.default.string,
+  font: _propTypes.default.string
+};
+exports.propTypes = propTypes;
+const defaultProps = {
+  colour: "black",
+  font: "dropCap"
+};
+exports.defaultProps = defaultProps;

package/dist/drop-cap.js

@@ -1 +1,41 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _responsive=require("./styles/responsive");var _dropCapPropTypes=require("./drop-cap-prop-types");var _jsxFileName="/home/circleci/project/packages/article-paragraph/src/drop-cap.js";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(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=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}function DropCapView(_ref){var colour=_ref.colour,children=_ref.children,font=_ref.font;return _react.default.createElement(_responsive.DropCap,{font:font,style:{color:colour},__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:5}},children);}DropCapView.propTypes=_objectSpread(_objectSpread({},_dropCapPropTypes.propTypes),{},{children:_propTypes.default.string.isRequired});DropCapView.defaultProps=_dropCapPropTypes.defaultProps;var _default=DropCapView;exports.default=_default;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _responsive = require("./styles/responsive");
+
+var _dropCapPropTypes = require("./drop-cap-prop-types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function DropCapView(_ref) {
+  let colour = _ref.colour,
+      children = _ref.children,
+      font = _ref.font;
+  return /*#__PURE__*/_react.default.createElement(_responsive.DropCap, {
+    font: font,
+    style: {
+      color: colour
+    }
+  }, children);
+}
+
+DropCapView.propTypes = _objectSpread(_objectSpread({}, _dropCapPropTypes.propTypes), {}, {
+  children: _propTypes.default.string.isRequired
+});
+DropCapView.defaultProps = _dropCapPropTypes.defaultProps;
+var _default = DropCapView;
+exports.default = _default;

package/dist/index.js

@@ -1 +1,21 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"DropCapView",{enumerable:true,get:function get(){return _dropCap.default;}});exports.default=void 0;var _articleParagraph=_interopRequireDefault(require("./article-paragraph"));var _dropCap=_interopRequireDefault(require("./drop-cap"));var _default=_articleParagraph.default;exports.default=_default;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DropCapView", {
+  enumerable: true,
+  get: function get() {
+    return _dropCap.default;
+  }
+});
+exports.default = void 0;
+
+var _articleParagraph = _interopRequireDefault(require("./article-paragraph"));
+
+var _dropCap = _interopRequireDefault(require("./drop-cap"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _articleParagraph.default;
+exports.default = _default;

package/dist/styles/drop-cap-sizes.js

@@ -1 +1,98 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.margins=exports.fontSize=void 0;var fontSize=function fontSize(font,scale){var config={cultureMagazine:{large:110,medium:90,xlarge:122},dropCap:{large:115,medium:100,xlarge:124},stMagazine:{large:113,medium:90,xlarge:120},styleMagazine:{large:112,medium:90,xlarge:119}};return config[font][scale];};exports.fontSize=fontSize;var margins=function margins(font,scale){var config={cultureMagazine:{large:{bottom:-32,top:-30},medium:{bottom:-30,top:-26},xlarge:{bottom:-28,top:-38}},dropCap:{large:{bottom:-33,top:-14},medium:{bottom:-22,top:-12},xlarge:{bottom:-34,top:-16}},stMagazine:{large:{bottom:-26,top:-17},medium:{bottom:-30,top:-16},xlarge:{bottom:-22,top:-18}},styleMagazine:{large:{bottom:-26,top:-26},medium:{bottom:-30,top:-18},xlarge:{bottom:-30,top:-26}}};return config[font][scale];};exports.margins=margins;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.margins = exports.fontSize = void 0;
+
+const fontSize = (font, scale) => {
+  const config = {
+    cultureMagazine: {
+      large: 110,
+      medium: 90,
+      xlarge: 122
+    },
+    dropCap: {
+      large: 115,
+      medium: 100,
+      xlarge: 124
+    },
+    stMagazine: {
+      large: 113,
+      medium: 90,
+      xlarge: 120
+    },
+    styleMagazine: {
+      large: 112,
+      medium: 90,
+      xlarge: 119
+    }
+  };
+  return config[font][scale];
+};
+
+exports.fontSize = fontSize;
+
+const margins = (font, scale) => {
+  const config = {
+    cultureMagazine: {
+      large: {
+        bottom: -32,
+        top: -30
+      },
+      medium: {
+        bottom: -30,
+        top: -26
+      },
+      xlarge: {
+        bottom: -28,
+        top: -38
+      }
+    },
+    dropCap: {
+      large: {
+        bottom: -33,
+        top: -14
+      },
+      medium: {
+        bottom: -22,
+        top: -12
+      },
+      xlarge: {
+        bottom: -34,
+        top: -16
+      }
+    },
+    stMagazine: {
+      large: {
+        bottom: -26,
+        top: -17
+      },
+      medium: {
+        bottom: -30,
+        top: -16
+      },
+      xlarge: {
+        bottom: -22,
+        top: -18
+      }
+    },
+    styleMagazine: {
+      large: {
+        bottom: -26,
+        top: -26
+      },
+      medium: {
+        bottom: -30,
+        top: -18
+      },
+      xlarge: {
+        bottom: -30,
+        top: -26
+      }
+    }
+  };
+  return config[font][scale];
+};
+
+exports.margins = margins;

package/dist/styles/index.js

@@ -1 +1,22 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _shared=_interopRequireDefault(require("./shared"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(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=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var sharedStyles=(0,_shared.default)();var _default=_objectSpread({},sharedStyles);exports.default=_default;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _shared = _interopRequireDefault(require("./shared"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const sharedStyles = (0, _shared.default)();
+
+var _default = _objectSpread({}, sharedStyles);
+
+exports.default = _default;

package/dist/styles/responsive.js

@@ -1 +1,51 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.DropCap=exports.Paragraph=void 0;var _styledComponents=_interopRequireWildcard(require("styled-components"));var _tsStyleguide=require("@times-components/ts-styleguide");function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var dropCapFontSizes={cultureMagazine:104,dropCap:110,stMagazine:105,styleMagazine:103};var lineHeights={cultureMagazine:0.85,dropCap:0.55,stMagazine:0.7,styleMagazine:0.8};var dropCapMargins={cultureMagazine:-0.06,dropCap:0.2,stMagazine:0.065,styleMagazine:-0.01};var Paragraph=_styledComponents.default.p.withConfig({displayName:"responsive__Paragraph",componentId:"sc-1pktst5-0"})(["color:",";display:block;font-family:\"","\";line-height:26px;font-size:","px;margin:0 auto ",";padding-right:",";padding-left:",";&:first-of-type:after{content:\"\";clear:both;display:table;}@media (min-width:","px){font-size:","px;line-height:30px;padding-left:0;padding-right:0;width:80.8%;}@media (min-width:","px){width:56.2%;}"],_tsStyleguide.colours.functional.primary,_tsStyleguide.fonts.bodyRegular,_tsStyleguide.fontSizes.bodyMobile,(0,_tsStyleguide.spacing)(5),(0,_tsStyleguide.spacing)(2),(0,_tsStyleguide.spacing)(2),_tsStyleguide.breakpoints.medium,_tsStyleguide.fontSizes.body,_tsStyleguide.breakpoints.wide);exports.Paragraph=Paragraph;var DropCap=_styledComponents.default.span.withConfig({displayName:"responsive__DropCap",componentId:"sc-1pktst5-1"})(["float:left;color:",";padding-right:10px;line-height:1em;",";"],_tsStyleguide.colours.functional.primary,function(_ref){var _ref$font=_ref.font,font=_ref$font===void 0?"dropCap":_ref$font;return(0,_styledComponents.css)(["margin-top:","em;line-height:","em;font-size:","px;font-family:\"","\";"],dropCapMargins[font],lineHeights[font],dropCapFontSizes[font],_tsStyleguide.fonts[font]);});exports.DropCap=DropCap;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropCap = exports.Paragraph = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _tsStyleguide = require("@times-components/ts-styleguide");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const dropCapFontSizes = {
+  cultureMagazine: 104,
+  dropCap: 110,
+  stMagazine: 105,
+  styleMagazine: 103
+};
+const lineHeights = {
+  cultureMagazine: 0.85,
+  dropCap: 0.55,
+  stMagazine: 0.7,
+  styleMagazine: 0.8
+};
+const dropCapMargins = {
+  cultureMagazine: -0.06,
+  dropCap: 0.2,
+  stMagazine: 0.065,
+  styleMagazine: -0.01
+};
+
+const Paragraph = _styledComponents.default.p.withConfig({
+  displayName: "responsive__Paragraph",
+  componentId: "sc-1pktst5-0"
+})(["color:", ";display:block;font-family:\"", "\";line-height:26px;font-size:", "px;margin:0 auto ", ";padding-right:", ";padding-left:", ";&:first-of-type:after{content:\"\";clear:both;display:table;}@media (min-width:", "px){font-size:", "px;line-height:30px;padding-left:0;padding-right:0;width:80.8%;}@media (min-width:", "px){width:56.2%;}"], _tsStyleguide.colours.functional.primary, _tsStyleguide.fonts.bodyRegular, _tsStyleguide.fontSizes.bodyMobile, (0, _tsStyleguide.spacing)(5), (0, _tsStyleguide.spacing)(2), (0, _tsStyleguide.spacing)(2), _tsStyleguide.breakpoints.medium, _tsStyleguide.fontSizes.body, _tsStyleguide.breakpoints.wide);
+
+exports.Paragraph = Paragraph;
+
+const DropCap = _styledComponents.default.span.withConfig({
+  displayName: "responsive__DropCap",
+  componentId: "sc-1pktst5-1"
+})(["float:left;color:", ";padding-right:10px;line-height:1em;", ";"], _tsStyleguide.colours.functional.primary, _ref => {
+  let _ref$font = _ref.font,
+      font = _ref$font === void 0 ? "dropCap" : _ref$font;
+  return (0, _styledComponents.css)(["margin-top:", "em;line-height:", "em;font-size:", "px;font-family:\"", "\";"], dropCapMargins[font], lineHeights[font], dropCapFontSizes[font], _tsStyleguide.fonts[font]);
+});
+
+exports.DropCap = DropCap;

package/dist/styles/shared.js

@@ -1 +1,67 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _tsStyleguide=require("@times-components/ts-styleguide");var _dropCapSizes=require("./drop-cap-sizes");function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(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=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var sharedStyles=function sharedStyles(){var dropCapFont=arguments.length>0&&arguments[0]!==undefined?arguments[0]:"dropCap";var scale=arguments.length>1&&arguments[1]!==undefined?arguments[1]:_tsStyleguide.scales.medium;var _styleguide=(0,_tsStyleguide.styleguide)({scale:scale}),colours=_styleguide.colours,fontFactory=_styleguide.fontFactory,spacing=_styleguide.spacing;var dropCapMargins=(0,_dropCapSizes.margins)(dropCapFont,scale);var dropCapFontSize=(0,_dropCapSizes.fontSize)(dropCapFont,scale);return{articleMainContentRow:{paddingLeft:spacing(2),paddingRight:spacing(2)},articleMainContentRowTablet:{alignSelf:"center",width:_tsStyleguide.tabletWidth},articleTextElement:_objectSpread(_objectSpread({},fontFactory({font:"body",fontSize:"bodyMobile"})),{},{color:colours.functional.primary,marginBottom:spacing(5)}),dropCapContainer:{flexDirection:"row",flexWrap:"wrap"},dropCapContainerTablet:{alignSelf:"center",width:_tsStyleguide.tabletWidth},dropCapTextElement:{color:colours.functional.primary,fontFamily:_tsStyleguide.fonts[dropCapFont],fontSize:dropCapFontSize,marginBottom:dropCapMargins.bottom,marginRight:spacing(1),marginTop:dropCapMargins.top}};};var _default=sharedStyles;exports.default=_default;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _tsStyleguide = require("@times-components/ts-styleguide");
+
+var _dropCapSizes = require("./drop-cap-sizes");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const sharedStyles = function sharedStyles() {
+  let dropCapFont = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "dropCap";
+  let scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _tsStyleguide.scales.medium;
+
+  const _styleguide = (0, _tsStyleguide.styleguide)({
+    scale
+  }),
+        colours = _styleguide.colours,
+        fontFactory = _styleguide.fontFactory,
+        spacing = _styleguide.spacing;
+
+  const dropCapMargins = (0, _dropCapSizes.margins)(dropCapFont, scale);
+  const dropCapFontSize = (0, _dropCapSizes.fontSize)(dropCapFont, scale);
+  return {
+    articleMainContentRow: {
+      paddingLeft: spacing(2),
+      paddingRight: spacing(2)
+    },
+    articleMainContentRowTablet: {
+      alignSelf: "center",
+      width: _tsStyleguide.tabletWidth
+    },
+    articleTextElement: _objectSpread(_objectSpread({}, fontFactory({
+      font: "body",
+      fontSize: "bodyMobile"
+    })), {}, {
+      color: colours.functional.primary,
+      marginBottom: spacing(5)
+    }),
+    dropCapContainer: {
+      flexDirection: "row",
+      flexWrap: "wrap"
+    },
+    dropCapContainerTablet: {
+      alignSelf: "center",
+      width: _tsStyleguide.tabletWidth
+    },
+    dropCapTextElement: {
+      color: colours.functional.primary,
+      fontFamily: _tsStyleguide.fonts[dropCapFont],
+      fontSize: dropCapFontSize,
+      marginBottom: dropCapMargins.bottom,
+      marginRight: spacing(1),
+      marginTop: dropCapMargins.top
+    }
+  };
+};
+
+var _default = sharedStyles;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-components/article-paragraph",
-  "version": "1.7.108",
+  "version": "1.8.0",
   "description": "Article Paragraph",
   "main": "dist/index",
   "dev": "src/index",
@@ -9,7 +9,7 @@
     "fmt": "eslint . --fix && prettier --write '**/*.*'",
     "prettier:diff": "prettier --list-different '**/*.*'",
     "lint": "eslint . && yarn prettier:diff && yarn depcheck",
-    "test:web": "jest --config='./__tests__/web/jest.config.js'",
+    "test:web": "jest --config='./__tests__/jest.config.js'",
     "prepublishOnly": "yarn transpile && yarn bundle",
     "watch": "watch 'yarn bundle' ./src --ignoreDotFiles --ignoreUnreadable",
     "cleanup-dist": "rm -rf dist",
@@ -21,10 +21,7 @@
     "url": "git+https://github.com/newsuk/times-components.git"
   },
   "keywords": [
-    "react-native-web",
     "react",
-    "native",
-    "web",
     "article-paragraph",
     "component"
   ],
@@ -34,34 +31,31 @@
   },
   "homepage": "https://github.com/newsuk/times-components#readme",
   "dependencies": {
-    "@times-components/article-skeleton": "1.85.42",
-    "@times-components/context": "1.9.4",
-    "@times-components/markup-forest": "1.8.2",
-    "@times-components/ts-styleguide": "1.36.9",
+    "@times-components/article-skeleton": "1.86.0",
+    "@times-components/context": "1.10.0",
+    "@times-components/markup-forest": "1.9.0",
+    "@times-components/ts-styleguide": "1.37.0",
     "prop-types": "15.7.2",
     "styled-components": "4.3.2"
   },
   "devDependencies": {
     "@babel/core": "7.4.4",
     "@times-components/eslint-config-thetimes": "0.8.18",
-    "@times-components/jest-configurator": "2.8.1",
-    "@times-components/jest-serializer": "3.3.1",
-    "@times-components/markup": "3.6.3",
-    "@times-components/storybook": "4.4.1",
-    "@times-components/test-utils": "2.3.11",
-    "@times-components/webpack-configurator": "2.0.30",
+    "@times-components/jest-configurator-web": "0.8.0",
+    "@times-components/jest-serializer": "3.4.0",
+    "@times-components/markup": "3.7.0",
+    "@times-components/storybook": "4.5.0",
+    "@times-components/test-utils": "2.4.0",
+    "@times-components/webpack-configurator": "2.1.0",
     "babel-jest": "24.8.0",
-    "babel-plugin-styled-components": "1.10.6",
     "eslint": "5.9.0",
     "jest": "24.8.0",
     "jest-styled-components": "6.3.1",
     "prettier": "1.14.3",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "react-native": "0.61.5",
     "react-test-renderer": "16.9.0",
-    "webpack": "4.30.0",
-    "webpack-cli": "3.3.1"
+    "webpack": "4.30.0"
   },
   "resolutions": {
     "react": "16.9.0",
@@ -69,12 +63,10 @@
   },
   "peerDependencies": {
     "react": ">=16.9",
-    "react-dom": ">=16.9",
-    "react-native": ">=0.59",
-    "react-native-web": "0.11.4"
+    "react-dom": ">=16.9"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "df5ed2ea69c1f572c9054e51a8fdd00f700dc758"
+  "gitHead": "fe2f12b7448a88662c53f840772282cd97756c5c"
 }

package/rnw.js

@@ -1 +1 @@
-module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}([function(e,t){e.exports=require("@babel/runtime/helpers/interopRequireDefault")},function(e,t,r){Object.defineProperty(t,"__esModule",{value:!0}),t.DropCap=t.Paragraph=void 0;var n=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=a(t);if(r&&r.has(e))return r.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if("default"!==i&&Object.prototype.hasOwnProperty.call(e,i)){var u=o?Object.getOwnPropertyDescriptor(e,i):null;u&&(u.get||u.set)?Object.defineProperty(n,i,u):n[i]=e[i]}n.default=e,r&&r.set(e,n);return n}(r(5)),o=r(6);function a(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(a=function(e){return e?r:t})(e)}var i={cultureMagazine:104,dropCap:110,stMagazine:105,styleMagazine:103},u={cultureMagazine:.85,dropCap:.55,stMagazine:.7,styleMagazine:.8},p={cultureMagazine:-.06,dropCap:.2,stMagazine:.065,styleMagazine:-.01},l=n.default.p.withConfig({displayName:"responsive__Paragraph",componentId:"sc-1pktst5-0"})(["color:",';display:block;font-family:"','";line-height:26px;font-size:',"px;margin:0 auto ",";padding-right:",";padding-left:",';&:first-of-type:after{content:"";clear:both;display:table;}@media (min-width:',"px){font-size:","px;line-height:30px;padding-left:0;padding-right:0;width:80.8%;}@media (min-width:","px){width:56.2%;}"],o.colours.functional.primary,o.fonts.bodyRegular,o.fontSizes.bodyMobile,(0,o.spacing)(5),(0,o.spacing)(2),(0,o.spacing)(2),o.breakpoints.medium,o.fontSizes.body,o.breakpoints.wide);t.Paragraph=l;var f=n.default.span.withConfig({displayName:"responsive__DropCap",componentId:"sc-1pktst5-1"})(["float:left;color:",";padding-right:10px;line-height:1em;",";"],o.colours.functional.primary,(function(e){var t=e.font,r=void 0===t?"dropCap":t;return(0,n.css)(["margin-top:","em;line-height:","em;font-size:",'px;font-family:"','";'],p[r],u[r],i[r],o.fonts[r])}));t.DropCap=f},function(e,t){e.exports=require("prop-types")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"DropCapView",{enumerable:!0,get:function(){return a.default}}),t.default=void 0;var o=n(r(4)),a=n(r(7)),i=o.default;t.default=i},function(e,t,r){Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=r(1).Paragraph;t.default=n},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=n(r(8)),a=(n(r(2)),r(1)),i=r(9);function u(e){var t=e.colour,r=e.children,n=e.font;return o.default.createElement(a.DropCap,{font:n,style:{color:t}},r)}u.defaultProps=i.defaultProps;var p=u;t.default=p},function(e,t){e.exports=require("react")},function(e,t,r){var n=r(0);Object.defineProperty(t,"__esModule",{value:!0}),t.defaultProps=t.propTypes=void 0;var o=n(r(2)),a={colour:o.default.string,font:o.default.string};t.propTypes=a;t.defaultProps={colour:"black",font:"dropCap"}}]);
+module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";n.r(t);var r=n(2),o=n.n(r),i=n(0);const a={cultureMagazine:104,dropCap:110,stMagazine:105,styleMagazine:103},p={cultureMagazine:.85,dropCap:.55,stMagazine:.7,styleMagazine:.8},l={cultureMagazine:-.06,dropCap:.2,stMagazine:.065,styleMagazine:-.01},u=o.a.p.withConfig({displayName:"responsive__Paragraph",componentId:"sc-1pktst5-0"})(["color:",';display:block;font-family:"','";line-height:26px;font-size:',"px;margin:0 auto ",";padding-right:",";padding-left:",';&:first-of-type:after{content:"";clear:both;display:table;}@media (min-width:',"px){font-size:","px;line-height:30px;padding-left:0;padding-right:0;width:80.8%;}@media (min-width:","px){width:56.2%;}"],i.colours.functional.primary,i.fonts.bodyRegular,i.fontSizes.bodyMobile,Object(i.spacing)(5),Object(i.spacing)(2),Object(i.spacing)(2),i.breakpoints.medium,i.fontSizes.body,i.breakpoints.wide),s=o.a.span.withConfig({displayName:"responsive__DropCap",componentId:"sc-1pktst5-1"})(["float:left;color:",";padding-right:10px;line-height:1em;",";"],i.colours.functional.primary,e=>{let t=e.font,n=void 0===t?"dropCap":t;return Object(r.css)(["margin-top:","em;line-height:","em;font-size:",'px;font-family:"','";'],l[n],p[n],a[n],i.fonts[n])});var c=u,f=n(3),d=n.n(f),g=n(1),y=n.n(g);y.a.string,y.a.string;function m(e){let t=e.colour,n=e.children,r=e.font;return d.a.createElement(s,{font:r,style:{color:t}},n)}m.defaultProps={colour:"black",font:"dropCap"};var b=m;n.d(t,"DropCapView",(function(){return b}));t.default=c}]);

package/tsconfig.jest.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "rootDir": "src",
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "module": "commonjs",
+    "esModuleInterop": true
+  }
+}