@redhat-cloud-services/frontend-components 3.4.14 → 3.5.0

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 (10) hide show
  1. package/Skeleton/Skeleton.js +5 -4
  2. package/Skeleton/skeleton.css +14 -35
  3. package/Skeleton/skeleton.scss +14 -30
  4. package/SkeletonTable/SkeletonTable.css +3 -0
  5. package/SkeletonTable/SkeletonTable.js +31 -16
  6. package/SkeletonTable/SkeletonTable.scss +3 -0
  7. package/esm/Skeleton/Skeleton.js +4 -4
  8. package/esm/SkeletonTable/SkeletonTable.js +29 -16
  9. package/index.css +14 -34
  10. package/package.json +1 -1
package/Skeleton/Skeleton.js CHANGED
@@ -17,6 +17,8 @@ var _react = _interopRequireDefault(require("react"));
17
17
 
18
18
  var _propTypes = _interopRequireDefault(require("prop-types"));
19
19
 
20
+ var _Skeleton = require("@patternfly/react-core/dist/js/components/Skeleton/Skeleton.js");
21
+
20
22
  var _classnames = _interopRequireDefault(require("classnames"));
21
23
 
22
24
  require("./skeleton.css");
@@ -34,10 +36,9 @@ var Skeleton = function Skeleton(_ref) {
34
36
  isDark = _ref.isDark,
35
37
  className = _ref.className,
36
38
  props = (0, _objectWithoutProperties2["default"])(_ref, ["size", "isDark", "className"]);
37
- var skeletonClasses = (0, _classnames["default"])('ins-c-skeleton', "ins-c-skeleton__".concat(size), (0, _defineProperty2["default"])({}, "ins-m-dark", isDark), className);
38
- return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
39
- className: skeletonClasses
40
- }, props), "\xA0");
39
+ return /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, (0, _extends2["default"])({
40
+ className: (0, _classnames["default"])('ins-c-skeleton', "ins-c-skeleton__".concat(size), (0, _defineProperty2["default"])({}, "ins-m-dark", isDark), className)
41
+ }, props));
41
42
  };
42
43
 
43
44
  var _default = Skeleton;
package/Skeleton/skeleton.css CHANGED
@@ -1,45 +1,24 @@
1
- :root {
2
- --ins-color--orange: #ec7a08;
3
- }
4
-
5
- .ins-c-skeleton {
6
- animation-duration: 1s;
7
- animation-iteration-count: infinite;
8
- animation-name: skeletonGradient;
9
- animation-timing-function: linear;
10
- background: var(--pf-global--disabled-color--200);
11
- background: linear-gradient(to right, #f5f5f5 10%, #e8e8e8 18%, #f5f5f5 33%);
12
- background-size: 1000px 50px;
13
- background-size: 62.5rem 3.125rem;
14
- border-radius: 5px;
15
- border-radius: 0.3125rem;
16
- }
17
1
  .ins-c-skeleton__xs {
18
- width: 16%;
2
+ width: 16% !important;
19
3
  }
20
4
  .ins-c-skeleton__sm {
21
- width: 33%;
5
+ width: 33% !important;
22
6
  }
23
7
  .ins-c-skeleton__md {
24
- width: 66%;
8
+ width: 66% !important;
25
9
  }
26
10
  .ins-c-skeleton__lg {
27
- width: 100%;
11
+ width: 100% !important;
28
12
  }
29
13
  .ins-c-skeleton.ins-m-dark {
30
- background: #3c3c3c;
31
- background: linear-gradient(to right, #3c3c3c 10%, #484848 18%, #3c3c3c 33%);
32
- background-size: 1000px 50px;
33
- background-size: 62.5rem 3.125rem;
34
- }
35
-
36
- @keyframes skeletonGradient {
37
- 0% {
38
- background-position: -500px 0px;
39
- background-position: -31.25rem 0rem;
40
- }
41
- 100% {
42
- background-position: 500px 0px;
43
- background-position: 31.25rem 0rem;
44
- }
14
+ --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
15
+ --pf-c-skeleton--after--LinearGradientColorStop1: var(
16
+ --pf-global--palette--black-600
17
+ );
18
+ --pf-c-skeleton--after--LinearGradientColorStop2: var(
19
+ --pf-global--palette--black-500
20
+ );
21
+ --pf-c-skeleton--after--LinearGradientColorStop3: var(
22
+ --pf-global--palette--black-600
23
+ );
45
24
  }
package/Skeleton/skeleton.scss CHANGED
@@ -1,34 +1,18 @@
1
- @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
2
-
3
- $skeleton-base-color: #f5f5f5;
4
- $skeleton-dark-color: #e8e8e8;
5
-
6
- $ins-color--dark: #3c3c3c;
7
- $invert-skeleton-base-color: #3c3c3c;
8
- $invert-skeleton-dark-color: #484848;
9
-
10
-
11
1
  .ins-c-skeleton {
12
- &__xs { width: 16%; }
13
- &__sm { width: 33%; }
14
- &__md { width: 66%; }
15
- &__lg { width: 100%; }
16
- animation-duration: 1s;
17
- animation-iteration-count: infinite;
18
- animation-name: skeletonGradient;
19
- animation-timing-function: linear;
20
- background: $ins-color--gray;
21
- background: linear-gradient(to right, $skeleton-base-color 10%, $skeleton-dark-color 18%, $skeleton-base-color 33%);
22
- @include rem('background-size', 1000px 50px);
23
- @include rem('border-radius', 5px);
2
+ &__xs { width: 16% !important; }
3
+ &__sm { width: 33% !important; }
4
+ &__md { width: 66% !important; }
5
+ &__lg { width: 100% !important; }
24
6
  &.ins-m-dark {
25
- background: $ins-color--dark;
26
- background: linear-gradient(to right, $invert-skeleton-base-color 10%, $invert-skeleton-dark-color 18%, $invert-skeleton-base-color 33%);
27
- @include rem('background-size', 1000px 50px);
7
+ --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
8
+ --pf-c-skeleton--after--LinearGradientColorStop1: var(
9
+ --pf-global--palette--black-600
10
+ );
11
+ --pf-c-skeleton--after--LinearGradientColorStop2: var(
12
+ --pf-global--palette--black-500
13
+ );
14
+ --pf-c-skeleton--after--LinearGradientColorStop3: var(
15
+ --pf-global--palette--black-600
16
+ );
28
17
  }
29
18
  }
30
-
31
- @keyframes skeletonGradient{
32
- 0% { @include rem('background-position', -500px 0); }
33
- 100%{ @include rem('background-position', 500px 0); }
34
- }
package/SkeletonTable/SkeletonTable.css ADDED
@@ -0,0 +1,3 @@
1
+ .ins-c-skeleton-table__dark {
2
+ background-color: #1b1d21 !important;
3
+ }
package/SkeletonTable/SkeletonTable.js CHANGED
@@ -29,8 +29,12 @@ var _reactTable = require("@patternfly/react-table");
29
29
 
30
30
  var _Skeleton = require("../Skeleton");
31
31
 
32
+ var _classnames = _interopRequireDefault(require("classnames"));
33
+
32
34
  var _propTypes = _interopRequireDefault(require("prop-types"));
33
35
 
36
+ require("./SkeletonTable.css");
37
+
34
38
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
35
39
 
36
40
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -51,29 +55,33 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
51
55
 
52
56
  _this = _super.call.apply(_super, [this].concat(args));
53
57
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createColumns", function () {
54
- var colSize = _this.props.colSize;
58
+ var _this$props = _this.props,
59
+ colSize = _this$props.colSize,
60
+ isDark = _this$props.isDark;
55
61
  return (0, _toConsumableArray2["default"])(Array(colSize)).map(function () {
56
62
  return {
57
63
  title: /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, {
64
+ isDark: isDark,
58
65
  size: _Skeleton.SkeletonSize.sm
59
66
  })
60
67
  };
61
68
  });
62
69
  });
63
70
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getColumns", function () {
64
- var _this$props = _this.props,
65
- paddingColumnSize = _this$props.paddingColumnSize,
66
- columns = _this$props.columns;
71
+ var _this$props2 = _this.props,
72
+ paddingColumnSize = _this$props2.paddingColumnSize,
73
+ columns = _this$props2.columns;
67
74
  return _this.newArray(paddingColumnSize).map(function () {
68
75
  return '';
69
76
  }).concat(columns || _this.createColumns());
70
77
  });
71
78
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createRows", function () {
72
- var _this$props2 = _this.props,
73
- colSize = _this$props2.colSize,
74
- rowSize = _this$props2.rowSize,
75
- columns = _this$props2.columns,
76
- paddingColumnSize = _this$props2.paddingColumnSize;
79
+ var _this$props3 = _this.props,
80
+ colSize = _this$props3.colSize,
81
+ rowSize = _this$props3.rowSize,
82
+ columns = _this$props3.columns,
83
+ paddingColumnSize = _this$props3.paddingColumnSize,
84
+ isDark = _this$props3.isDark;
77
85
  var numberOfCols = columns ? columns.length : colSize;
78
86
  return _this.newArray(rowSize).map(function () {
79
87
  return {
@@ -83,6 +91,7 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
83
91
  }).concat(_this.newArray(numberOfCols).map(function () {
84
92
  return {
85
93
  title: /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, {
94
+ isDark: isDark,
86
95
  size: _Skeleton.SkeletonSize.md
87
96
  })
88
97
  };
@@ -103,12 +112,16 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
103
112
  (0, _createClass2["default"])(SkeletonTable, [{
104
113
  key: "render",
105
114
  value: function render() {
106
- var _this$props3 = this.props,
107
- canSelectAll = _this$props3.canSelectAll,
108
- isSelectable = _this$props3.isSelectable,
109
- sortBy = _this$props3.sortBy,
110
- variant = _this$props3.variant;
115
+ var _this$props4 = this.props,
116
+ canSelectAll = _this$props4.canSelectAll,
117
+ isSelectable = _this$props4.isSelectable,
118
+ sortBy = _this$props4.sortBy,
119
+ variant = _this$props4.variant,
120
+ isDark = _this$props4.isDark;
111
121
  return /*#__PURE__*/_react["default"].createElement(_reactTable.Table, {
122
+ className: (0, _classnames["default"])({
123
+ 'ins-c-skeleton-table__dark': isDark
124
+ }),
112
125
  cells: this.getColumns(),
113
126
  rows: this.createRows(),
114
127
  sortBy: sortBy,
@@ -135,7 +148,8 @@ SkeletonTable.propTypes = {
135
148
  isSelectable: _propTypes["default"].bool,
136
149
  canSelectAll: _propTypes["default"].bool,
137
150
  hasRadio: _propTypes["default"].bool,
138
- variant: _propTypes["default"].string
151
+ variant: _propTypes["default"].string,
152
+ isDark: _propTypes["default"].bool
139
153
  };
140
154
  SkeletonTable.defaultProps = {
141
155
  rowSize: 0,
@@ -143,7 +157,8 @@ SkeletonTable.defaultProps = {
143
157
  canSelectAll: false,
144
158
  isSelectable: false,
145
159
  hasRadio: false,
146
- variant: null
160
+ variant: null,
161
+ isDark: false
147
162
  };
148
163
  var _default = SkeletonTable;
149
164
  exports["default"] = _default;
package/SkeletonTable/SkeletonTable.scss ADDED
@@ -0,0 +1,3 @@
1
+ .ins-c-skeleton-table__dark {
2
+ background-color: #1b1d21 !important;
3
+ }
package/esm/Skeleton/Skeleton.js CHANGED
@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
4
  import React from 'react';
5
5
  import propTypes from 'prop-types';
6
+ import { Skeleton as PFSkeleton } from "@patternfly/react-core/dist/esm/components/Skeleton/Skeleton.js";
6
7
  import classNames from 'classnames';
7
8
  export var SkeletonSize = {
8
9
  xs: 'xs',
@@ -18,10 +19,9 @@ var Skeleton = function Skeleton(_ref) {
18
19
  className = _ref.className,
19
20
  props = _objectWithoutProperties(_ref, ["size", "isDark", "className"]);
20
21
 
21
- var skeletonClasses = classNames('ins-c-skeleton', "ins-c-skeleton__".concat(size), _defineProperty({}, "ins-m-dark", isDark), className);
22
- return /*#__PURE__*/React.createElement("div", _extends({
23
- className: skeletonClasses
24
- }, props), "\xA0");
22
+ return /*#__PURE__*/React.createElement(PFSkeleton, _extends({
23
+ className: classNames('ins-c-skeleton', "ins-c-skeleton__".concat(size), _defineProperty({}, "ins-m-dark", isDark), className)
24
+ }, props));
25
25
  };
26
26
 
27
27
  export default Skeleton;
package/esm/SkeletonTable/SkeletonTable.js CHANGED
@@ -14,7 +14,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
14
14
  import React from 'react';
15
15
  import { RowSelectVariant, Table, TableHeader, TableBody } from '@patternfly/react-table';
16
16
  import { Skeleton, SkeletonSize } from '../Skeleton';
17
+ import classNames from 'classnames';
17
18
  import PropTypes from 'prop-types';
19
+ import "../../SkeletonTable/./SkeletonTable.css";
18
20
 
19
21
  var SkeletonTable = /*#__PURE__*/function (_React$Component) {
20
22
  _inherits(SkeletonTable, _React$Component);
@@ -33,10 +35,13 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
33
35
  _this = _super.call.apply(_super, [this].concat(args));
34
36
 
35
37
  _defineProperty(_assertThisInitialized(_this), "createColumns", function () {
36
- var colSize = _this.props.colSize;
38
+ var _this$props = _this.props,
39
+ colSize = _this$props.colSize,
40
+ isDark = _this$props.isDark;
37
41
  return _toConsumableArray(Array(colSize)).map(function () {
38
42
  return {
39
43
  title: /*#__PURE__*/React.createElement(Skeleton, {
44
+ isDark: isDark,
40
45
  size: SkeletonSize.sm
41
46
  })
42
47
  };
@@ -44,20 +49,21 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
44
49
  });
45
50
 
46
51
  _defineProperty(_assertThisInitialized(_this), "getColumns", function () {
47
- var _this$props = _this.props,
48
- paddingColumnSize = _this$props.paddingColumnSize,
49
- columns = _this$props.columns;
52
+ var _this$props2 = _this.props,
53
+ paddingColumnSize = _this$props2.paddingColumnSize,
54
+ columns = _this$props2.columns;
50
55
  return _this.newArray(paddingColumnSize).map(function () {
51
56
  return '';
52
57
  }).concat(columns || _this.createColumns());
53
58
  });
54
59
 
55
60
  _defineProperty(_assertThisInitialized(_this), "createRows", function () {
56
- var _this$props2 = _this.props,
57
- colSize = _this$props2.colSize,
58
- rowSize = _this$props2.rowSize,
59
- columns = _this$props2.columns,
60
- paddingColumnSize = _this$props2.paddingColumnSize;
61
+ var _this$props3 = _this.props,
62
+ colSize = _this$props3.colSize,
63
+ rowSize = _this$props3.rowSize,
64
+ columns = _this$props3.columns,
65
+ paddingColumnSize = _this$props3.paddingColumnSize,
66
+ isDark = _this$props3.isDark;
61
67
  var numberOfCols = columns ? columns.length : colSize;
62
68
  return _this.newArray(rowSize).map(function () {
63
69
  return {
@@ -67,6 +73,7 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
67
73
  }).concat(_this.newArray(numberOfCols).map(function () {
68
74
  return {
69
75
  title: /*#__PURE__*/React.createElement(Skeleton, {
76
+ isDark: isDark,
70
77
  size: SkeletonSize.md
71
78
  })
72
79
  };
@@ -90,12 +97,16 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
90
97
  _createClass(SkeletonTable, [{
91
98
  key: "render",
92
99
  value: function render() {
93
- var _this$props3 = this.props,
94
- canSelectAll = _this$props3.canSelectAll,
95
- isSelectable = _this$props3.isSelectable,
96
- sortBy = _this$props3.sortBy,
97
- variant = _this$props3.variant;
100
+ var _this$props4 = this.props,
101
+ canSelectAll = _this$props4.canSelectAll,
102
+ isSelectable = _this$props4.isSelectable,
103
+ sortBy = _this$props4.sortBy,
104
+ variant = _this$props4.variant,
105
+ isDark = _this$props4.isDark;
98
106
  return /*#__PURE__*/React.createElement(Table, {
107
+ className: classNames({
108
+ 'ins-c-skeleton-table__dark': isDark
109
+ }),
99
110
  cells: this.getColumns(),
100
111
  rows: this.createRows(),
101
112
  sortBy: sortBy,
@@ -123,7 +134,8 @@ SkeletonTable.propTypes = {
123
134
  isSelectable: PropTypes.bool,
124
135
  canSelectAll: PropTypes.bool,
125
136
  hasRadio: PropTypes.bool,
126
- variant: PropTypes.string
137
+ variant: PropTypes.string,
138
+ isDark: PropTypes.bool
127
139
  };
128
140
  SkeletonTable.defaultProps = {
129
141
  rowSize: 0,
@@ -131,6 +143,7 @@ SkeletonTable.defaultProps = {
131
143
  canSelectAll: false,
132
144
  isSelectable: false,
133
145
  hasRadio: false,
134
- variant: null
146
+ variant: null,
147
+ isDark: false
135
148
  };
136
149
  export default SkeletonTable;
package/index.css CHANGED
@@ -1419,51 +1419,31 @@ textarea.pf-c-form-control {
1419
1419
  top: 0.5rem;
1420
1420
  }
1421
1421
 
1422
- :root {
1423
- --ins-color--orange: #ec7a08;
1424
- }
1425
-
1426
- .ins-c-skeleton {
1427
- animation-duration: 1s;
1428
- animation-iteration-count: infinite;
1429
- animation-name: skeletonGradient;
1430
- animation-timing-function: linear;
1431
- background: var(--pf-global--disabled-color--200);
1432
- background: linear-gradient(to right, #f5f5f5 10%, #e8e8e8 18%, #f5f5f5 33%);
1433
- background-size: 1000px 50px;
1434
- background-size: 62.5rem 3.125rem;
1435
- border-radius: 5px;
1436
- border-radius: 0.3125rem;
1437
- }
1438
1422
  .ins-c-skeleton__xs {
1439
- width: 16%;
1423
+ width: 16% !important;
1440
1424
  }
1441
1425
  .ins-c-skeleton__sm {
1442
- width: 33%;
1426
+ width: 33% !important;
1443
1427
  }
1444
1428
  .ins-c-skeleton__md {
1445
- width: 66%;
1429
+ width: 66% !important;
1446
1430
  }
1447
1431
  .ins-c-skeleton__lg {
1448
- width: 100%;
1432
+ width: 100% !important;
1449
1433
  }
1450
1434
  .ins-c-skeleton.ins-m-dark {
1451
- background: #3c3c3c;
1452
- background: linear-gradient(to right, #3c3c3c 10%, #484848 18%, #3c3c3c 33%);
1453
- background-size: 1000px 50px;
1454
- background-size: 62.5rem 3.125rem;
1435
+ --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
1436
+ --pf-c-skeleton--after--LinearGradientColorStop1: var(
1437
+ --pf-global--palette--black-600
1438
+ );
1439
+ --pf-c-skeleton--after--LinearGradientColorStop2: var(
1440
+ --pf-global--palette--black-500
1441
+ );
1442
+ --pf-c-skeleton--after--LinearGradientColorStop3: var(
1443
+ --pf-global--palette--black-600
1444
+ );
1455
1445
  }
1456
1446
 
1457
- @keyframes skeletonGradient {
1458
- 0% {
1459
- background-position: -500px 0px;
1460
- background-position: -31.25rem 0rem;
1461
- }
1462
- 100% {
1463
- background-position: 500px 0px;
1464
- background-position: 31.25rem 0rem;
1465
- }
1466
- }
1467
1447
  :root {
1468
1448
  --ins-color--orange: #ec7a08;
1469
1449
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redhat-cloud-services/frontend-components",
3
- "version": "3.4.14",
3
+ "version": "3.5.0",
4
4
  "description": "Common components for RedHat Cloud Services project.",
5
5
  "main": "index.js",
6
6
  "module": "esm/index.js",