@sis-cc/dotstatsuite-visions 12.52.0 → 12.54.0

package/es/Contact/Contact.js

@@ -25,8 +25,14 @@ var useStyles = makeStyles(function (theme) {
       padding: theme.spacing(2),
       margin: theme.spacing(2, 0)
     },
-    label: {
-      color: theme.palette.primary.main
+    agreement: {
+      fontSize: '1.0625rem',
+      lineHeight: '1.6'
+    },
+    policy: {
+      color: theme.palette.primary.main,
+      fontSize: '1.0625rem',
+      lineHeight: '1.6'
     },
     textarea: {
       width: '100%',
@@ -279,7 +285,7 @@ var Contact = function Contact(_ref) {
           control: React.createElement(Checkbox, { name: 'checkedB', color: 'primary' }),
           label: React.createElement(
             Typography,
-            { variant: 'h6' },
+            { className: classes.agreement },
             R.prop('checkbox')(labels)
           ),
           checked: checked,
@@ -293,7 +299,7 @@ var Contact = function Contact(_ref) {
         { item: true },
         React.createElement(
           Typography,
-          { variant: 'h6', className: classes.label, style: { paddingTop: 8 } },
+          { className: classes.policy, style: { paddingTop: 8 } },
           R.prop('organisationPrivacyPolicy')(labels)
         )
       )

package/es/Contact/Mode.js

@@ -89,7 +89,7 @@ var Mode = function Mode(_ref2) {
       { className: classes.content },
       React.createElement(
         Typography,
-        { variant: 'h6', className: classes.title, 'aria-label': title, tabIndex: 0 },
+        { className: classes.title, 'aria-label': title, tabIndex: 0 },
         title
       ),
       React.createElement(

package/es/DataEdit/DataEdit.js

@@ -9,10 +9,19 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Input from './Input';
 import { withBlank } from '../utils';
+import makeStyles from '@mui/styles/makeStyles';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    title: R.pathOr({}, ['mixins', 'chartsConfig', 'title'], theme)
+  };
+});
 
 var DataEdit = function DataEdit(_ref) {
   var labels = _ref.labels,
       properties = _ref.properties;
+
+  var classes = useStyles();
   var _properties$title = properties.title,
       title = _properties$title === undefined ? {} : _properties$title,
       _properties$subtitle = properties.subtitle,
@@ -34,8 +43,8 @@ var DataEdit = function DataEdit(_ref) {
       { item: true, xs: 12 },
       React.createElement(
         Typography,
-        { variant: 'h6' },
-        'Information'
+        { className: classes.title },
+        R.prop('information', labels)
       )
     ),
     R.prop('isActive', title) && React.createElement(

package/es/Share/Mode.js

@@ -88,7 +88,7 @@ var Mode = function Mode(_ref2) {
       { className: classes.content },
       React.createElement(
         Typography,
-        { variant: 'h6', className: classes.title },
+        { className: classes.title },
         title
       ),
       React.createElement(

package/es/TableHtml5/TableHtml5.js

@@ -25,8 +25,8 @@ var useStyles = makeStyles(function (theme) {
       outline: '1px solid transparent',
       transform: 'translateZ(0)',
       borderCollapse: 'separate',
-      borderLeft: 'thin solid ' + theme.palette.grey[500],
-      borderTop: 'thin solid ' + theme.palette.grey[500],
+      borderLeft: '1px solid ' + theme.palette.grey[500],
+      borderTop: '1px solid ' + theme.palette.grey[500],
       padding: '0px 0px'
     },
     stickyHeader: {

package/es/TableHtml5/cell.js

@@ -12,15 +12,16 @@ import { getIsRtl } from '../utils';
 var useStyles = makeStyles(function (theme) {
   return {
     cell: {
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
+      borderBottom: '1.5px solid ' + theme.palette.grey[500],
+      borderRight: '1.5px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       verticalAlign: 'baseline',
       color: theme.palette.grey['A700'],
       '&:hover': {
         boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main
       },
-      whiteSpace: 'pre-wrap'
+      whiteSpace: 'pre-wrap',
+      borderCollapse: 'collapse'
     },
     active: {
       boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main

package/es/TableHtml5/section.js

@@ -22,12 +22,14 @@ var useStyles = makeStyles(function (theme) {
     rowTitle: {
       backgroundColor: getLight(theme) || theme.palette.secondary.light,
       border: 'inherit',
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
+      borderBottom: '1.5px solid ' + theme.palette.grey[500],
+      borderRight: '1.5px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       color: theme.palette.grey['A700'],
       verticalAlign: 'top',
-      align: 'left'
+      align: 'left',
+      borderCollapse: 'collapse',
+      borderSpacing: 0
     },
     timePeriodCells: {
       whiteSpace: 'nowrap'
@@ -37,8 +39,8 @@ var useStyles = makeStyles(function (theme) {
       backgroundColor: theme.palette.grey[200],
       verticalAlign: 'top',
       border: 'inherit',
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
+      borderBottom: '1.5px solid ' + theme.palette.grey[500],
+      borderRight: '1.5px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       position: 'sticky',
       zIndex: 1

package/es/TableHtml5/sectionHeader.js

@@ -15,10 +15,11 @@ import { getValue } from './utils';
 var useStyles = makeStyles(function (theme) {
   return {
     section: {
+      borderCollapse: 'collapse',
       backgroundColor: getDark(theme) || theme.palette.secondary.dark,
       border: 'inherit',
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
+      borderBottom: '1px solid ' + theme.palette.grey[500],
+      borderRight: '1px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0, 1),
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle',

package/es/TableHtml5/subHeader.js

@@ -13,21 +13,41 @@ import Flags from './flags';
 var useStyles = makeStyles(function (theme) {
   return {
     columnsTitle: {
+      position: 'sticky',
+      zIndex: 1,
+      boxSizing: 'border-box',
       backgroundColor: getLight(theme) || theme.palette.secondary.light,
-      border: 'inherit',
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
+      border: 'none',
+      borderBottom: '1px solid ' + theme.palette.grey[500],
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle',
-      position: 'sticky',
-      zIndex: 1
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: '1px',
+        height: '100%',
+        backgroundColor: theme.palette.grey[500]
+      }
+      // backgroundColor: getLight(theme) || theme.palette.secondary.light,
+      // border: 'inherit',
+      // borderBottom: `1.5px solid ${theme.palette.grey[500]}`,
+      // borderRight: `1.5px solid ${theme.palette.grey[500]}`,
+      // padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+      // color: theme.palette.grey['A700'],
+      // verticalAlign: 'middle',
+      // position: 'sticky',
+      // zIndex: 1,
+      // outline: `1px solid ${theme.palette.grey[500]}`,
+      // borderCollapse: 'collapse',
+      // borderSpacing: 0
     },
     fillerCell: {
       backgroundColor: theme.palette.grey[200],
       border: 'inherit',
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
+      borderBottom: '1.5px solid ' + theme.palette.grey[500],
+      borderRight: '1.5px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       verticalAlign: 'middle',
       textAlign: 'center',

package/es/UserRightForm/PermsissionsTabs.js

@@ -24,6 +24,10 @@ var useStyles = makeStyles(function (theme) {
       '& .Mui-selected': {
         fontWeight: 'bold'
       }
+    },
+    label: {
+      fontSize: '1.0625rem',
+      lineHeight: '1.6'
     }
   };
 });
@@ -65,11 +69,7 @@ var PermissionsTabs = function PermissionsTabs(_ref) {
     null,
     React.createElement(
       Typography,
-      {
-        variant: 'h6',
-        className: classes.label,
-        style: { marginTop: 10, marginBottom: 10 }
-      },
+      { className: classes.label, style: { marginTop: 10, marginBottom: 10 } },
       R.prop('title')(labels)
     ),
     React.createElement(

package/es/theme.js

@@ -350,7 +350,9 @@ export var sisccTheme = function sisccTheme(_ref) {
       share: {
         title: {
           fontWeight: 400,
-          fontFamily: "'Roboto Slab', serif"
+          fontFamily: "'Roboto Slab', serif",
+          fontSize: '1.0625rem',
+          lineHeight: '1.6'
         }
       },
       spotlight: {

package/lib/Contact/Contact.js

@@ -73,8 +73,14 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
       padding: theme.spacing(2),
       margin: theme.spacing(2, 0)
     },
-    label: {
-      color: theme.palette.primary.main
+    agreement: {
+      fontSize: '1.0625rem',
+      lineHeight: '1.6'
+    },
+    policy: {
+      color: theme.palette.primary.main,
+      fontSize: '1.0625rem',
+      lineHeight: '1.6'
     },
     textarea: {
       width: '100%',
@@ -327,7 +333,7 @@ var Contact = function Contact(_ref) {
           control: _react2.default.createElement(_Checkbox2.default, { name: 'checkedB', color: 'primary' }),
           label: _react2.default.createElement(
             _Typography2.default,
-            { variant: 'h6' },
+            { className: classes.agreement },
             R.prop('checkbox')(labels)
           ),
           checked: checked,
@@ -341,7 +347,7 @@ var Contact = function Contact(_ref) {
         { item: true },
         _react2.default.createElement(
           _Typography2.default,
-          { variant: 'h6', className: classes.label, style: { paddingTop: 8 } },
+          { className: classes.policy, style: { paddingTop: 8 } },
           R.prop('organisationPrivacyPolicy')(labels)
         )
       )

package/lib/Contact/Mode.js

@@ -128,7 +128,7 @@ var Mode = function Mode(_ref2) {
       { className: classes.content },
       _react2.default.createElement(
         _Typography2.default,
-        { variant: 'h6', className: classes.title, 'aria-label': title, tabIndex: 0 },
+        { className: classes.title, 'aria-label': title, tabIndex: 0 },
         title
       ),
       _react2.default.createElement(

package/lib/DataEdit/DataEdit.js

@@ -38,13 +38,25 @@ var _Input2 = _interopRequireDefault(_Input);
 
 var _utils = require('../utils');
 
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var useStyles = (0, _makeStyles2.default)(function (theme) {
+  return {
+    title: R.pathOr({}, ['mixins', 'chartsConfig', 'title'], theme)
+  };
+});
+
 var DataEdit = function DataEdit(_ref) {
   var labels = _ref.labels,
       properties = _ref.properties;
+
+  var classes = useStyles();
   var _properties$title = properties.title,
       title = _properties$title === undefined ? {} : _properties$title,
       _properties$subtitle = properties.subtitle,
@@ -66,8 +78,8 @@ var DataEdit = function DataEdit(_ref) {
       { item: true, xs: 12 },
       _react2.default.createElement(
         _Typography2.default,
-        { variant: 'h6' },
-        'Information'
+        { className: classes.title },
+        R.prop('information', labels)
       )
     ),
     R.prop('isActive', title) && _react2.default.createElement(

package/lib/Share/Mode.js

@@ -127,7 +127,7 @@ var Mode = function Mode(_ref2) {
       { className: classes.content },
       _react2.default.createElement(
         _Typography2.default,
-        { variant: 'h6', className: classes.title },
+        { className: classes.title },
         title
       ),
       _react2.default.createElement(

package/lib/TableHtml5/TableHtml5.js

@@ -61,8 +61,8 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
       outline: '1px solid transparent',
       transform: 'translateZ(0)',
       borderCollapse: 'separate',
-      borderLeft: 'thin solid ' + theme.palette.grey[500],
-      borderTop: 'thin solid ' + theme.palette.grey[500],
+      borderLeft: '1px solid ' + theme.palette.grey[500],
+      borderTop: '1px solid ' + theme.palette.grey[500],
       padding: '0px 0px'
     },
     stickyHeader: {

package/lib/TableHtml5/cell.js

@@ -45,15 +45,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     cell: {
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
+      borderBottom: '1.5px solid ' + theme.palette.grey[500],
+      borderRight: '1.5px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       verticalAlign: 'baseline',
       color: theme.palette.grey['A700'],
       '&:hover': {
         boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main
       },
-      whiteSpace: 'pre-wrap'
+      whiteSpace: 'pre-wrap',
+      borderCollapse: 'collapse'
     },
     active: {
       boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main

package/lib/TableHtml5/section.js

@@ -67,12 +67,14 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
     rowTitle: {
       backgroundColor: (0, _utils.getLight)(theme) || theme.palette.secondary.light,
       border: 'inherit',
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
+      borderBottom: '1.5px solid ' + theme.palette.grey[500],
+      borderRight: '1.5px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       color: theme.palette.grey['A700'],
       verticalAlign: 'top',
-      align: 'left'
+      align: 'left',
+      borderCollapse: 'collapse',
+      borderSpacing: 0
     },
     timePeriodCells: {
       whiteSpace: 'nowrap'
@@ -82,8 +84,8 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
       backgroundColor: theme.palette.grey[200],
       verticalAlign: 'top',
       border: 'inherit',
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
+      borderBottom: '1.5px solid ' + theme.palette.grey[500],
+      borderRight: '1.5px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       position: 'sticky',
       zIndex: 1

package/lib/TableHtml5/sectionHeader.js

@@ -55,10 +55,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     section: {
+      borderCollapse: 'collapse',
       backgroundColor: (0, _utils.getDark)(theme) || theme.palette.secondary.dark,
       border: 'inherit',
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
+      borderBottom: '1px solid ' + theme.palette.grey[500],
+      borderRight: '1px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0, 1),
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle',

package/lib/TableHtml5/subHeader.js

@@ -49,21 +49,41 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     columnsTitle: {
+      position: 'sticky',
+      zIndex: 1,
+      boxSizing: 'border-box',
       backgroundColor: (0, _utils.getLight)(theme) || theme.palette.secondary.light,
-      border: 'inherit',
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
+      border: 'none',
+      borderBottom: '1px solid ' + theme.palette.grey[500],
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle',
-      position: 'sticky',
-      zIndex: 1
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: '1px',
+        height: '100%',
+        backgroundColor: theme.palette.grey[500]
+      }
+      // backgroundColor: getLight(theme) || theme.palette.secondary.light,
+      // border: 'inherit',
+      // borderBottom: `1.5px solid ${theme.palette.grey[500]}`,
+      // borderRight: `1.5px solid ${theme.palette.grey[500]}`,
+      // padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+      // color: theme.palette.grey['A700'],
+      // verticalAlign: 'middle',
+      // position: 'sticky',
+      // zIndex: 1,
+      // outline: `1px solid ${theme.palette.grey[500]}`,
+      // borderCollapse: 'collapse',
+      // borderSpacing: 0
     },
     fillerCell: {
       backgroundColor: theme.palette.grey[200],
       border: 'inherit',
-      borderBottom: 'thin solid ' + theme.palette.grey[500],
-      borderRight: 'thin solid ' + theme.palette.grey[500],
+      borderBottom: '1.5px solid ' + theme.palette.grey[500],
+      borderRight: '1.5px solid ' + theme.palette.grey[500],
       padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       verticalAlign: 'middle',
       textAlign: 'center',

package/lib/UserRightForm/PermsissionsTabs.js

@@ -61,6 +61,10 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
       '& .Mui-selected': {
         fontWeight: 'bold'
       }
+    },
+    label: {
+      fontSize: '1.0625rem',
+      lineHeight: '1.6'
     }
   };
 });
@@ -102,11 +106,7 @@ var PermissionsTabs = function PermissionsTabs(_ref) {
     null,
     _react2.default.createElement(
       _Typography2.default,
-      {
-        variant: 'h6',
-        className: classes.label,
-        style: { marginTop: 10, marginBottom: 10 }
-      },
+      { className: classes.label, style: { marginTop: 10, marginBottom: 10 } },
       R.prop('title')(labels)
     ),
     _react2.default.createElement(

package/lib/theme.js

@@ -354,7 +354,9 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
       share: {
         title: {
           fontWeight: 400,
-          fontFamily: "'Roboto Slab', serif"
+          fontFamily: "'Roboto Slab', serif",
+          fontSize: '1.0625rem',
+          lineHeight: '1.6'
         }
       },
       spotlight: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "12.52.0",
+  "version": "12.54.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",