@times-components/interactive-wrapper 0.9.90 → 0.9.92-alpha.14

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.
 
+## [0.9.91](https://github.com/newsuk/times-components/compare/@times-components/interactive-wrapper@0.9.90...@times-components/interactive-wrapper@0.9.91) (2024-12-12)
+
+
+### Bug Fixes
+
+* **TMRS-575:** iframe component heights ([#4006](https://github.com/newsuk/times-components/issues/4006)) ([f4c3691](https://github.com/newsuk/times-components/commit/f4c36910a5a5d7e82dcfd10acfa62e3b3278154f))
+
+
+
+
+
 ## [0.9.90](https://github.com/newsuk/times-components/compare/@times-components/interactive-wrapper@0.9.89...@times-components/interactive-wrapper@0.9.90) (2024-11-05)
 
 **Note:** Version bump only for package @times-components/interactive-wrapper

package/dist/interactive-wrapper.js

@@ -12,6 +12,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _image = require("@times-components/image");
 
+var _styles = require("./styles");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -114,14 +116,13 @@ class InteractiveWrapper extends _react.Component {
   }
 
   render() {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    const attributes = this.props.attributes;
+    return /*#__PURE__*/_react.default.createElement(_styles.InteractiveWrapperContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Container, {
       ref: this.placeholder,
-      style: {
-        height: 150,
-        position: "relative"
-      }
-    }, /*#__PURE__*/_react.default.createElement(_image.Placeholder, null)), /*#__PURE__*/_react.default.createElement("div", {
-      ref: this.component
+      $height: attributes.height
+    }, /*#__PURE__*/_react.default.createElement(_image.Placeholder, null)), /*#__PURE__*/_react.default.createElement(_styles.InteractiveContainer, {
+      ref: this.component,
+      $height: attributes.height
     }));
   }
 

package/dist/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InteractiveWrapperContainer = exports.InteractiveContainer = exports.Container = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Container = _styledComponents.default.div.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1rzy94h-0"
+})(["position:", ";width:100%;height:", "px;", " ", " ", ""], _ref => {
+  let $height = _ref.$height;
+  return $height && $height.xs ? "absolute" : "relative";
+}, _ref2 => {
+  let $height = _ref2.$height;
+  return $height && $height.xs ? $height.xs : 150;
+}, _ref3 => {
+  let $height = _ref3.$height;
+  return $height && $height.sm && "\n    media (min-width: 520px) {\n      height: ".concat($height.sm, "px;\n    }\n  ");
+}, _ref4 => {
+  let $height = _ref4.$height;
+  return $height && $height.md && "\n    @media (min-width: 768px) {\n      height: ".concat($height.md, "px;\n    }\n  ");
+}, _ref5 => {
+  let $height = _ref5.$height;
+  return $height && $height.lg && "\n    @media (min-width: 1024px) {\n      height: ".concat($height.lg, "px;\n    }\n  ");
+});
+
+exports.Container = Container;
+const InteractiveContainer = (0, _styledComponents.default)(Container).withConfig({
+  displayName: "styles__InteractiveContainer",
+  componentId: "sc-1rzy94h-1"
+})(["position:relative;height:", ";"], _ref6 => {
+  let $height = _ref6.$height;
+  return $height && $height.xs ? "".concat($height.xs, "px") : "auto";
+});
+exports.InteractiveContainer = InteractiveContainer;
+
+const InteractiveWrapperContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__InteractiveWrapperContainer",
+  componentId: "sc-1rzy94h-2"
+})(["position:relative;"]);
+
+exports.InteractiveWrapperContainer = InteractiveWrapperContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-components/interactive-wrapper",
-  "version": "0.9.90",
+  "version": "0.9.92-alpha.14+805ec3ec5b",
   "description": "Wrapper for legacy Interactive components ",
   "main": "dist/interactive-wrapper",
   "dev": "src/interactive-wrapper",
@@ -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__/jest.config.js'",
+    "test:web": "jest -u --config='./__tests__/jest.config.js'",
     "test:web:updatesnapshot": "yarn test:web -u",
     "prepublishOnly": "yarn transpile && yarn bundle",
     "watch": "watch 'yarn bundle' ./src --ignoreDotFiles --ignoreUnreadable",
@@ -35,12 +35,12 @@
   "homepage": "https://github.com/newsuk/times-components#readme",
   "devDependencies": {
     "@babel/core": "7.4.4",
-    "@times-components/eslint-config-thetimes": "0.8.18",
-    "@times-components/jest-configurator-web": "0.8.2",
-    "@times-components/jest-serializer": "3.13.20",
-    "@times-components/storybook": "4.12.34",
-    "@times-components/test-utils": "2.4.2",
-    "@times-components/webpack-configurator": "2.1.1",
+    "@times-components/eslint-config-thetimes": "^0.8.18",
+    "@times-components/jest-configurator-web": "^0.8.2",
+    "@times-components/jest-serializer": "^3.13.20",
+    "@times-components/storybook": "^4.12.34",
+    "@times-components/test-utils": "^2.4.2",
+    "@times-components/webpack-configurator": "^2.1.1",
     "babel-jest": "24.8.0",
     "enzyme": "3.9.0",
     "eslint": "5.9.0",
@@ -51,8 +51,9 @@
     "webpack": "4.30.0"
   },
   "dependencies": {
-    "@times-components/image": "6.18.2",
-    "prop-types": "15.7.2"
+    "@times-components/image": "^6.18.3-alpha.43+805ec3ec5b",
+    "prop-types": "15.7.2",
+    "styled-components": "4.3.2"
   },
   "resolutions": {
     "react": "16.9.0",
@@ -65,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bb3515d038a23326876162447a8770e53bbd5622"
+  "gitHead": "805ec3ec5b3da3478baf264c05a823455c932f79"
 }

package/rnw.js

@@ -1 +1 @@
-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=2)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@times-components/image/rnw")},function(e,t,n){"use strict";n.r(t),n.d(t,"polyfillWCIfNecessary",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(0),o=n.n(r),i=(n(3),n(1));function c(e,t,n,r,o,i,c){try{var u=e[i](c),s=u.value}catch(e){return void n(e)}u.done?t(s):Promise.resolve(s).then(r,o)}function u(e,t){return document.body.querySelector(e)?Promise.resolve(null):new Promise((e,n)=>{const r=t();r.onload=e,r.onerror=n,document.body.appendChild(r)})}function s(){const e="import"in document.createElement("link"),t=!!document.registerElement;return e&&t?Promise.resolve():Promise.all([(n="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.min.js",u('script[src="'.concat(n,'"]'),()=>{const e=document.createElement("script");return e.setAttribute("async","async"),e.setAttribute("src",n),e})),new Promise(e=>{window.addEventListener("WebComponentsReady",e)})]);var n}class l extends r.Component{constructor(e){super(e),this.placeholder=o.a.createRef(null),this.component=o.a.createRef(null)}componentDidMount(){(0,this.props.fetchPolyfill)().then(()=>{this.insertComponent()})}componentDidUpdate(){this.insertComponent()}insertComponent(){var e,t=this;return(e=function*(){const e=t.props,n=e.attributes,r=e.element,o=e.source,i=t.placeholder.current,c=t.component.current;c.innerHTML="",i.style.cssText+="display: block !important",c.innerHTML="";const s=document.createElement(r);var l;Object.keys(n).forEach(e=>s.setAttribute(e,n[e])),c.appendChild(s),s.outerHTML+="",i.style.cssText+="display: none !important",yield(l=o,u('link[href="'.concat(l,'"]'),()=>{const e=document.createElement("link");return e.setAttribute("href",l),e.setAttribute("rel","import"),e}))},function(){var t=this,n=arguments;return new Promise((function(r,o){var i=e.apply(t,n);function u(e){c(i,r,o,u,s,"next",e)}function s(e){c(i,r,o,u,s,"throw",e)}u(void 0)}))})()}render(){return o.a.createElement(o.a.Fragment,null,o.a.createElement("div",{ref:this.placeholder,style:{height:150,position:"relative"}},o.a.createElement(i.Placeholder,null)),o.a.createElement("div",{ref:this.component}))}}l.defaultProps={attributes:{},fetchPolyfill:s}},function(e,t){e.exports=require("prop-types")}]);
+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("react")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@times-components/image/rnw")},function(e,t){e.exports=require("prop-types")},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),i=(n(3),n(2)),c=n(1),s=n.n(c);const l=s.a.div.withConfig({displayName:"styles__Container",componentId:"sc-1rzy94h-0"})(["position:",";width:100%;height:","px;"," "," ",""],e=>{let t=e.$height;return t&&t.xs?"absolute":"relative"},e=>{let t=e.$height;return t&&t.xs?t.xs:150},e=>{let t=e.$height;return t&&t.sm&&"\n    media (min-width: 520px) {\n      height: ".concat(t.sm,"px;\n    }\n  ")},e=>{let t=e.$height;return t&&t.md&&"\n    @media (min-width: 768px) {\n      height: ".concat(t.md,"px;\n    }\n  ")},e=>{let t=e.$height;return t&&t.lg&&"\n    @media (min-width: 1024px) {\n      height: ".concat(t.lg,"px;\n    }\n  ")}),u=s()(l).withConfig({displayName:"styles__InteractiveContainer",componentId:"sc-1rzy94h-1"})(["position:relative;height:",";"],e=>{let t=e.$height;return t&&t.xs?"".concat(t.xs,"px"):"auto"}),a=s.a.div.withConfig({displayName:"styles__InteractiveWrapperContainer",componentId:"sc-1rzy94h-2"})(["position:relative;"]);function p(e,t,n,r,o,i,c){try{var s=e[i](c),l=s.value}catch(e){return void n(e)}s.done?t(l):Promise.resolve(l).then(r,o)}function d(e,t){return document.body.querySelector(e)?Promise.resolve(null):new Promise((e,n)=>{const r=t();r.onload=e,r.onerror=n,document.body.appendChild(r)})}function m(){const e="import"in document.createElement("link"),t=!!document.registerElement;return e&&t?Promise.resolve():Promise.all([(n="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.min.js",d('script[src="'.concat(n,'"]'),()=>{const e=document.createElement("script");return e.setAttribute("async","async"),e.setAttribute("src",n),e})),new Promise(e=>{window.addEventListener("WebComponentsReady",e)})]);var n}n.d(t,"polyfillWCIfNecessary",(function(){return m})),n.d(t,"default",(function(){return h}));class h extends r.Component{constructor(e){super(e),this.placeholder=o.a.createRef(null),this.component=o.a.createRef(null)}componentDidMount(){(0,this.props.fetchPolyfill)().then(()=>{this.insertComponent()})}componentDidUpdate(){this.insertComponent()}insertComponent(){var e,t=this;return(e=function*(){const e=t.props,n=e.attributes,r=e.element,o=e.source,i=t.placeholder.current,c=t.component.current;c.innerHTML="",i.style.cssText+="display: block !important",c.innerHTML="";const s=document.createElement(r);var l;Object.keys(n).forEach(e=>s.setAttribute(e,n[e])),c.appendChild(s),s.outerHTML+="",i.style.cssText+="display: none !important",yield(l=o,d('link[href="'.concat(l,'"]'),()=>{const e=document.createElement("link");return e.setAttribute("href",l),e.setAttribute("rel","import"),e}))},function(){var t=this,n=arguments;return new Promise((function(r,o){var i=e.apply(t,n);function c(e){p(i,r,o,c,s,"next",e)}function s(e){p(i,r,o,c,s,"throw",e)}c(void 0)}))})()}render(){const e=this.props.attributes;return o.a.createElement(a,null,o.a.createElement(l,{ref:this.placeholder,$height:e.height},o.a.createElement(i.Placeholder,null)),o.a.createElement(u,{ref:this.component,$height:e.height}))}}h.defaultProps={attributes:{},fetchPolyfill:m}}]);