@twreporter/react-article-components 1.11.0-rc.1 → 1.11.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.11.0-rc.1...@twreporter/react-article-components@1.11.0-rc.2) (2023-12-25)
+
+
+### Features
+
+* **react-article-components:** fullscreen title block width ([3b597c8](https://github.com/twreporter/twreporter-npm-packages/commit/3b597c8884096e4891d37a966d1c098afc442886))
+* **react-article-components:** use core z-index constants ([e158297](https://github.com/twreporter/twreporter-npm-packages/commit/e15829724e186d593473cf122c2bae5f9088fc3a))
+
+
+
+
+
 # [1.11.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.11.0-rc.0...@twreporter/react-article-components@1.11.0-rc.1) (2023-12-25)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/aside/mobile-tool-bar.js

@@ -33,6 +33,8 @@ var _button = require("@twreporter/react-components/lib/button");
 
 var _snackBar = require("@twreporter/react-components/lib/snack-bar");
 
+var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
+
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -97,9 +99,9 @@ var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig
 var ToolBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__ToolBarContainer",
   componentId: "do65sv-4"
-})(["display:flex;align-items:center;width:fit-content;background-color:", ";padding:0 16px;border-radius:60px;position:fixed;left:50%;transform:translate(-50%,0);bottom:calc(env(safe-area-inset-bottom,0) + 8px);z-index:999;height:", ";transition:height 100ms;box-shadow:", ";", "{background-color:", ";box-shadow:", ";}", "{bottom:", ";}"], function (props) {
+})(["display:flex;align-items:center;width:fit-content;background-color:", ";padding:0 16px;border-radius:60px;position:fixed;left:50%;transform:translate(-50%,0);bottom:calc(env(safe-area-inset-bottom,0) + 8px);z-index:", ";height:", ";transition:height 100ms;box-shadow:", ";", "{background-color:", ";box-shadow:", ";}", "{bottom:", ";}"], function (props) {
   return props.bgColor;
-}, function (props) {
+}, _zIndex["default"].mobileToolBar, function (props) {
   return props.hideText ? '38px' : '56px';
 }, function (props) {
   return props.shadow;

package/lib/components/body/embedded-code.js

@@ -25,10 +25,10 @@ var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
-var _positionZIndex = _interopRequireDefault(require("../../constants/position-z-index"));
-
 var _color = require("@twreporter/core/lib/constants/color");
 
+var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
+
 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); }
@@ -85,7 +85,7 @@ var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "embedded-code__Block",
   componentId: "tkafgt-0"
 })(["position:relative;z-index:", ";img.img-responsive{margin:0 auto;max-width:100%;height:auto;display:block;}"], function (props) {
-  return props.shouldEscalateZIndex ? _positionZIndex["default"].embed : 0;
+  return props.shouldEscalateZIndex ? _zIndex["default"].embedUp : _zIndex["default"].embedDown;
 });
 
 exports.Block = Block;

package/lib/components/leading/fullscreen.js

@@ -23,6 +23,8 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _color = require("@twreporter/core/lib/constants/color");
 
+var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -60,12 +62,12 @@ var _ = {
 var FullScreenBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "fullscreen__FullScreenBlock",
   componentId: "sc-63dapi-0"
-})(["width:100%;height:100vh;position:relative;"]);
+})(["width:100%;height:100vh;position:relative;z-index:", ";"], _zIndex["default"].articleFullScreenHeroImage);
 
 var TextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "fullscreen__TextBlock",
   componentId: "sc-63dapi-1"
-})(["z-index:100;position:absolute;left:65px;", " ", " ", " ", " > div:first-child{margin-bottom:25px;}> div:last-child{margin-top:20px;}"], _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    bottom: 100px;\n    width: 45%;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    bottom: 85px;\n    width: 55%;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    left: 35px;\n    bottom: 37px;\n    width: 70%;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 60%;\n    bottom: 60px;\n    left: 30px;\n  "]))));
+})(["position:absolute;left:65px;", " ", " ", " ", " > div:first-child{margin-bottom:25px;}> div:last-child{margin-top:20px;}"], _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    bottom: 100px;\n    width: 45%;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    bottom: 85px;\n    width: 55%;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    left: 35px;\n    bottom: 37px;\n    width: 70%;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 80%;\n    bottom: 60px;\n    left: 30px;\n  "]))));
 
 var Title = /*#__PURE__*/_styledComponents["default"].h1.withConfig({
   displayName: "fullscreen__Title",

package/lib/components/table-of-contents/styled.js

@@ -9,7 +9,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _positionZIndex = _interopRequireDefault(require("../../constants/position-z-index"));
+var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
 
 var _typography = _interopRequireDefault(require("../../constants/typography"));
 
@@ -70,7 +70,7 @@ exports.TOCRow = TOCRow;
 var TOCTab = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "styled__TOCTab",
   componentId: "sc-1guo9zm-4"
-})(["", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 30px;\n    position: fixed;\n    z-index: ", ";\n    top: 20%;\n    left: 0;\n    transition: transform 0.1s ease-in-out 0.1s;\n    transform: ", ";\n\n    > div {\n      opacity: 0.6;\n      color: ", ";\n      font-size: 14px;\n      width: 14px;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  "])), _positionZIndex["default"].toc, function (props) {
+})(["", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 30px;\n    position: fixed;\n    z-index: ", ";\n    top: 20%;\n    left: 0;\n    transition: transform 0.1s ease-in-out 0.1s;\n    transform: ", ";\n\n    > div {\n      opacity: 0.6;\n      color: ", ";\n      font-size: 14px;\n      width: 14px;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  "])), _zIndex["default"].toc, function (props) {
   return props.isExpanded ? "translateX(".concat(tocWidth, "px)") : 'translateX(0px)';
 }, function (props) {
   return props.theme.colors.base.lightText;
@@ -81,7 +81,7 @@ exports.TOCTab = TOCTab;
 var TOCBackground = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "styled__TOCBackground",
   componentId: "sc-1guo9zm-5"
-})(["position:fixed;z-index:", ";top:0;left:0;height:100%;width:", "px;background-color:", ";transition:transform 0.1s ease-in-out 0.1s;", " ", ""], _positionZIndex["default"].toc, tocWidth, function (props) {
+})(["position:fixed;z-index:", ";top:0;left:0;height:100%;width:", "px;background-color:", ";transition:transform 0.1s ease-in-out 0.1s;", " ", ""], _zIndex["default"].toc, tocWidth, function (props) {
   return props.theme.colors.toc.background;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    transform: ", ";\n  "])), function (props) {
   return props.isExpanded ? 'translateX(0px)' : "translateX(-".concat(tocWidth, "px)");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.11.0-rc.1",
+  "version": "1.11.0-rc.2",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -24,10 +24,10 @@
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@twreporter/core": "^1.15.1-rc.0",
-    "@twreporter/react-components": "^8.22.1-rc.0",
-    "@twreporter/redux": "^7.8.3-rc.0",
-    "@twreporter/universal-header": "^2.9.1-rc.0",
+    "@twreporter/core": "^1.16.0-rc.0",
+    "@twreporter/react-components": "^8.23.0-rc.0",
+    "@twreporter/redux": "^7.8.3-rc.1",
+    "@twreporter/universal-header": "^2.9.1-rc.1",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "e518744e5323fb976ce2e66a52cc7e6b4807c751"
+  "gitHead": "76700e4230dae55deb76524237315ef9c318b7e1"
 }

package/lib/constants/position-z-index.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _default = {
-  // table-of-contents
-  // z-index is set for covering web-push & header.
-  // Set z-index to 1002 because web-push has z-index 1001,
-  // And header has z-index 1000.
-  toc: 1002,
-  // embeded code
-  // when z-index is escalated, it is above toolbar
-  // but under the header hamburger menu which has z-index 1000
-  embed: 999
-};
-exports["default"] = _default;