@ntbjs/react-components 1.3.0-rc.68 → 1.3.0-rc.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/{AssetAction-2fb2f4bb.js → AssetAction-42f1705b.js} +1 -1
  2. package/{InfoCard-fcc94022.js → InfoCard-9923340e.js} +26 -6
  3. package/package.json +1 -1
  4. package/widgets/AssetGallery/index.js +2 -2
  5. package/widgets/InfoCard/index.js +1 -1
  6. package/widgets/index.js +2 -2
package/{AssetAction-2fb2f4bb.js → AssetAction-42f1705b.js} RENAMED
@@ -21,7 +21,7 @@ var polished = require('polished');
21
21
  var ContextMenu = require('./ContextMenu-d2315ca8.js');
22
22
  require('./AssetPreviewTopBar-efffbed1.js');
23
23
  require('./ProgressBar-90e20d97.js');
24
- require('./InfoCard-fcc94022.js');
24
+ require('./InfoCard-9923340e.js');
25
25
  var ActionButton = require('./ActionButton-35005ad4.js');
26
26
  require('./Button-399267ec.js');
27
27
  require('./Checkbox-7ca8eaa2.js');
package/{InfoCard-fcc94022.js → InfoCard-9923340e.js} RENAMED
@@ -28,11 +28,17 @@ var Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)
28
28
  });
29
29
  var IconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 18px;\n margin-top: -0.05rem;\n"])));
30
30
  var Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 400;\n width: 30%;\n opacity: 0.7;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-right: 20px;\n cursor: pointer;\n height: 100%;\n gap: 10px;\n svg {\n transition: transform 0.2s ease-in-out;\n }\n &:hover svg {\n transform: translateX(2px);\n }\n"])));
31
- var ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 500;\n height: 100%;\n display: flex;\n align-items: center;\n white-space: nowrap;\n ", ";\n"])), function (props) {
32
- return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('black'));
31
+ var ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 500;\n height: 100%;\n display: flex;\n align-items: center;\n white-space: nowrap;\n opacity: ", ";\n transition: color 0.2s ease-in-out;\n ", ";\n"])), function (props) {
32
+ return props.isHovered ? 1 : 0.8;
33
+ }, function (props) {
34
+ return props.isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
33
35
  });
34
- var StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n height: 20px;\n margin-right: 10px;\n ", ";\n"])), function (props) {
35
- return props.theme.themeProp('fill', props.theme.getColor('gray-100'), props.theme.getColor('black'));
36
+ var StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n height: 15px;\n margin-right: 10px;\n opacity: ", ";\n transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;\n transform: ", ";\n\n ", ";\n"])), function (props) {
37
+ return props.isHovered ? 1 : 0.8;
38
+ }, function (props) {
39
+ return props.isHovered ? 'translateX(2px)' : 'translateX(0)';
40
+ }, function (props) {
41
+ return props.isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'));
36
42
  });
37
43
 
38
44
  var _excluded = ["icon", "total", "label", "linkLabel", "onClick", "height"];
@@ -44,6 +50,10 @@ var InfoCard = React__default["default"].forwardRef(function InfoCard(_ref, forw
44
50
  onClick = _ref.onClick,
45
51
  height = _ref.height,
46
52
  props = defaultTheme._objectWithoutProperties(_ref, _excluded);
53
+ var _useState = React.useState(false),
54
+ _useState2 = defaultTheme._slicedToArray(_useState, 2),
55
+ isLinkHovered = _useState2[0],
56
+ setIsLinkHovered = _useState2[1];
47
57
  var handleLinkClick = function handleLinkClick(e) {
48
58
  return onClick(e);
49
59
  };
@@ -51,8 +61,18 @@ var InfoCard = React__default["default"].forwardRef(function InfoCard(_ref, forw
51
61
  height: height,
52
62
  ref: forwardedRef
53
63
  }, props), React__default["default"].createElement(MetricsContainer, null, React__default["default"].createElement(IconTotalContainer, null, React__default["default"].createElement(IconContainer, null, icon), React__default["default"].createElement(Total, null, total)), React__default["default"].createElement(Label, null, label)), linkLabel && onClick && React__default["default"].createElement(Link, {
54
- onClick: handleLinkClick
55
- }, React__default["default"].createElement(ButtonLink, null, linkLabel), React__default["default"].createElement(StyledArrowIcon, null)));
64
+ onClick: handleLinkClick,
65
+ onMouseEnter: function onMouseEnter() {
66
+ return setIsLinkHovered(true);
67
+ },
68
+ onMouseLeave: function onMouseLeave() {
69
+ return setIsLinkHovered(false);
70
+ }
71
+ }, React__default["default"].createElement(ButtonLink, {
72
+ isHovered: isLinkHovered
73
+ }, linkLabel), React__default["default"].createElement(StyledArrowIcon, {
74
+ isHovered: isLinkHovered
75
+ })));
56
76
  });
57
77
  InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
58
78
  icon: defaultTheme.PropTypes.element.isRequired,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.3.0-rc.68",
3
+ "version": "1.3.0-rc.69",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
package/widgets/AssetGallery/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetAction = require('../../AssetAction-2fb2f4bb.js');
3
+ var AssetAction = require('../../AssetAction-42f1705b.js');
4
4
  require('../../defaultTheme-becf361a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -40,7 +40,7 @@ require('../../ContextMenu-d2315ca8.js');
40
40
  require('../../AssetPreviewTopBar-efffbed1.js');
41
41
  require('../../ProgressBar-90e20d97.js');
42
42
  require('../../arrow-forward-d7c77ae3.js');
43
- require('../../InfoCard-fcc94022.js');
43
+ require('../../InfoCard-9923340e.js');
44
44
  require('../../ActionButton-35005ad4.js');
45
45
  require('../../Button-399267ec.js');
46
46
  require('../../CompactStarRating-9f2a4dd4.js');
package/widgets/InfoCard/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var InfoCard = require('../../InfoCard-fcc94022.js');
3
+ var InfoCard = require('../../InfoCard-9923340e.js');
4
4
  require('../../defaultTheme-becf361a.js');
5
5
  require('styled-components');
6
6
  require('react');
package/widgets/index.js CHANGED
@@ -2,12 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetAction = require('../AssetAction-2fb2f4bb.js');
5
+ var AssetAction = require('../AssetAction-42f1705b.js');
6
6
  var ContextMenu = require('../ContextMenu-d2315ca8.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-efffbed1.js');
8
8
  var Instructions = require('../Instructions-500e185a.js');
9
9
  var ProgressBar = require('../ProgressBar-90e20d97.js');
10
- var InfoCard = require('../InfoCard-fcc94022.js');
10
+ var InfoCard = require('../InfoCard-9923340e.js');
11
11
  require('../defaultTheme-becf361a.js');
12
12
  require('styled-components');
13
13
  require('lodash');