@synerise/ds-card-tabs 0.9.2 → 0.9.6

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/CHANGELOG.md +36 -0
  2. package/dist/CardTab/CardTab.js +12 -26
  3. package/dist/CardTab/CardTab.styles.js +12 -10
  4. package/dist/CardTab/CardTabActions/CardTabActions.js +3 -3
  5. package/dist/CardTabs.js +5 -5
  6. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,42 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.9.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.9.5...@synerise/ds-card-tabs@0.9.6) (2021-12-20)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **card-tabs:** fix tag visiblity on hover when cards are not draggable ([fdd85dc](https://github.com/Synerise/synerise-design/commit/fdd85dc464fdd819cf8bd0f0ee33f59ee84e2852))
12
+ * **card-tabs:** sets draggable prop of CardTab based on onChangeOrder ([88c5c3f](https://github.com/Synerise/synerise-design/commit/88c5c3f08e3ae5289bd33599820aed65f78164c7))
13
+
14
+
15
+
16
+
17
+
18
+ ## [0.9.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.9.4...@synerise/ds-card-tabs@0.9.5) (2021-12-01)
19
+
20
+ **Note:** Version bump only for package @synerise/ds-card-tabs
21
+
22
+
23
+
24
+
25
+
26
+ ## [0.9.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.9.3...@synerise/ds-card-tabs@0.9.4) (2021-11-23)
27
+
28
+ **Note:** Version bump only for package @synerise/ds-card-tabs
29
+
30
+
31
+
32
+
33
+
34
+ ## [0.9.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.9.2...@synerise/ds-card-tabs@0.9.3) (2021-11-22)
35
+
36
+ **Note:** Version bump only for package @synerise/ds-card-tabs
37
+
38
+
39
+
40
+
41
+
6
42
  ## [0.9.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.9.1...@synerise/ds-card-tabs@0.9.2) (2021-11-16)
7
43
 
8
44
  **Note:** Version bump only for package @synerise/ds-card-tabs
package/dist/CardTab/CardTab.js CHANGED
@@ -1,21 +1,9 @@
1
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
1
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2
2
 
3
3
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
4
4
 
5
5
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
6
 
7
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
8
-
9
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
10
-
11
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
12
-
13
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
14
-
15
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
16
-
17
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
18
-
19
7
  import * as React from 'react';
20
8
  import Icon from '@synerise/ds-icon';
21
9
  import InlineEdit from '@synerise/ds-inline-edit/dist/InlineEdit';
@@ -49,19 +37,16 @@ var CardTab = function CardTab(_ref) {
49
37
  colorDot = _ref.colorDot;
50
38
 
51
39
  var _React$useState = React.useState(false),
52
- _React$useState2 = _slicedToArray(_React$useState, 2),
53
- edited = _React$useState2[0],
54
- setEdited = _React$useState2[1];
40
+ edited = _React$useState[0],
41
+ setEdited = _React$useState[1];
55
42
 
56
- var _React$useState3 = React.useState(name),
57
- _React$useState4 = _slicedToArray(_React$useState3, 2),
58
- editedName = _React$useState4[0],
59
- setEditedName = _React$useState4[1];
43
+ var _React$useState2 = React.useState(name),
44
+ editedName = _React$useState2[0],
45
+ setEditedName = _React$useState2[1];
60
46
 
61
- var _React$useState5 = React.useState(false),
62
- _React$useState6 = _slicedToArray(_React$useState5, 2),
63
- pressed = _React$useState6[0],
64
- setPressed = _React$useState6[1];
47
+ var _React$useState3 = React.useState(false),
48
+ pressed = _React$useState3[0],
49
+ setPressed = _React$useState3[1];
65
50
 
66
51
  var getTexts = React.useMemo(function () {
67
52
  return _objectSpread({
@@ -106,12 +91,13 @@ var CardTab = function CardTab(_ref) {
106
91
  return (!!onChangeName || !!onDuplicateTab || !!onRemoveTab) && !suffixIcon;
107
92
  }, [onChangeName, onDuplicateTab, onRemoveTab, suffixIcon]);
108
93
  return /*#__PURE__*/React.createElement(S.CardTabContainer, {
109
- className: "".concat(pressed ? 'pressed' : ''),
94
+ className: "" + (pressed ? 'pressed' : ''),
110
95
  edited: edited,
111
96
  active: Boolean(active),
112
97
  invalid: Boolean(invalid),
113
98
  invalidName: Boolean(invalidName) && !invalid,
114
99
  disabled: !active && Boolean(disabled),
100
+ draggable: draggable,
115
101
  color: color,
116
102
  onClick: handleSelect,
117
103
  onMouseDown: function onMouseDown() {
@@ -142,7 +128,7 @@ var CardTab = function CardTab(_ref) {
142
128
  autoFocus: true,
143
129
  input: {
144
130
  value: editedName,
145
- name: "ds-card-tab-input-".concat(id),
131
+ name: "ds-card-tab-input-" + id,
146
132
  onBlur: handleEditNameBlur,
147
133
  onChange: handleChangeName
148
134
  },
package/dist/CardTab/CardTab.styles.js CHANGED
@@ -37,7 +37,7 @@ export var CardTabLabel = styled.span.withConfig({
37
37
  })(["", ";color:", ";line-height:20px;position:relative;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:flex-start;&&&{", "{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:", ";}}", "{input{font-weight:500;font-size:14px;line-height:20px;color:", ";background-image:linear-gradient( to right,", " 0%,", " 33%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 100% );}}"], macro.h300, function (props) {
38
38
  return props.theme.palette['grey-600'];
39
39
  }, CardTabName, function (props) {
40
- return props.invalidName ? "linear-gradient(\n to right,\n ".concat(props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['blue-600'], " 0%,\n ").concat(props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['blue-600'], " 33%,\n rgba(255, 255, 255, 0) 34%,\n rgba(255, 255, 255, 0) 100%\n );") : 'none';
40
+ return props.invalidName ? "linear-gradient(\n to right,\n " + (props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['blue-600']) + " 0%,\n " + (props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['blue-600']) + " 33%,\n rgba(255, 255, 255, 0) 34%,\n rgba(255, 255, 255, 0) 100%\n );" : 'none';
41
41
  }, InPlaceEditableInputContainer, function (props) {
42
42
  return props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['grey-800'];
43
43
  }, function (props) {
@@ -78,7 +78,7 @@ export var CardIconPrefix = styled.div.withConfig({
78
78
  export var CardTabContainer = styled.div.withConfig({
79
79
  displayName: "CardTabstyles__CardTabContainer",
80
80
  componentId: "sc-1n86s98-10"
81
- })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px;width:180px;height:48px;user-select:none;background-color:", ";box-shadow:", ";border-radius:3px;border-width:1px;border-color:", ";border-style:solid;pointer-events:", ";", "{background-color:", ";color:", ";}", "{background-color:", ";}", "{height:", ";width:", ";border-width:", ";border-color:", ";border-style:solid;}&:hover{cursor:pointer;box-shadow:", ";background-color:", ";", "{display:", ";}", "{display:", ";}", "{color:", ";}", "{background-color:", ";color:", ";display:none;}", "{svg{color:", ";fill:", ";}}", "{display:flex;svg{color:", ";fill:", " !important;}}", "{display:none;}", "{display:none;svg{color:", ";fill:", ";}}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}}}&.pressed{background-color:", ";}", "{color:", ";opacity:", ";}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}opacity:", ";}", "{opacity:", ";.ds-card-tabs__handle-icon{svg{color:", ";fill:", ";}}svg{color:", ";fill:", ";}", "{opacity:", ";}}"], function (_ref7) {
81
+ })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px;width:180px;height:48px;user-select:none;background-color:", ";box-shadow:", ";border-radius:3px;border-width:1px;border-color:", ";border-style:solid;pointer-events:", ";", "{background-color:", ";color:", ";}", "{background-color:", ";}", "{height:", ";width:", ";border-width:", ";border-color:", ";border-style:solid;}&:hover{cursor:pointer;box-shadow:", ";background-color:", ";", "{display:", ";}", "{display:", ";}", "{color:", ";}", "{background-color:", ";color:", ";display:", ";}", "{svg{color:", ";fill:", ";}}", "{display:flex;svg{color:", ";fill:", " !important;}}", "{display:none;}", "{display:none;svg{color:", ";fill:", ";}}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}}}&.pressed{background-color:", ";}", "{color:", ";opacity:", ";}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}opacity:", ";}", "{opacity:", ";.ds-card-tabs__handle-icon{svg{color:", ";fill:", ";}}svg{color:", ";fill:", ";}", "{opacity:", ";}}"], function (_ref7) {
82
82
  var theme = _ref7.theme,
83
83
  active = _ref7.active,
84
84
  invalid = _ref7.invalid,
@@ -86,7 +86,7 @@ export var CardTabContainer = styled.div.withConfig({
86
86
  greyBackground = _ref7.greyBackground,
87
87
  edited = _ref7.edited;
88
88
  if (invalid && active) return theme.palette['red-600'];
89
- if (active && !edited) return theme.palette["".concat(color)];
89
+ if (active && !edited) return theme.palette["" + color];
90
90
  if (greyBackground) return theme.palette.white;
91
91
  return theme.palette['grey-050'];
92
92
  }, function (_ref8) {
@@ -100,7 +100,7 @@ export var CardTabContainer = styled.div.withConfig({
100
100
  edited = _ref9.edited;
101
101
  if (invalid) return theme.palette['red-600'];
102
102
  if (edited) return theme.palette['blue-600'];
103
- return getColor(active && !edited, theme.palette["".concat(color)], theme.palette['grey-300']);
103
+ return getColor(active && !edited, theme.palette["" + color], theme.palette['grey-300']);
104
104
  }, function (_ref10) {
105
105
  var disabled = _ref10.disabled;
106
106
  return disabled ? 'none' : 'all';
@@ -109,21 +109,21 @@ export var CardTabContainer = styled.div.withConfig({
109
109
  active = _ref11.active,
110
110
  color = _ref11.color,
111
111
  edited = _ref11.edited;
112
- return getColor(active && !edited, theme.palette.white, theme.palette["".concat(color)]);
112
+ return getColor(active && !edited, theme.palette.white, theme.palette["" + color]);
113
113
  }, function (_ref12) {
114
114
  var theme = _ref12.theme,
115
115
  active = _ref12.active,
116
116
  color = _ref12.color,
117
117
  edited = _ref12.edited;
118
- return getColor(active && !edited, theme.palette["".concat(color)], theme.palette.white);
118
+ return getColor(active && !edited, theme.palette["" + color], theme.palette.white);
119
119
  }, CardDot, function (_ref13) {
120
120
  var theme = _ref13.theme,
121
121
  active = _ref13.active,
122
122
  color = _ref13.color,
123
123
  edited = _ref13.edited,
124
124
  invalid = _ref13.invalid;
125
- if (active && invalid) return theme.palette["".concat(color)];
126
- return getColor(active && !edited, 'transparent', theme.palette["".concat(color)]);
125
+ if (active && invalid) return theme.palette["" + color];
126
+ return getColor(active && !edited, 'transparent', theme.palette["" + color]);
127
127
  }, CardDotPrefix, function (_ref14) {
128
128
  var active = _ref14.active,
129
129
  edited = _ref14.edited;
@@ -144,7 +144,7 @@ export var CardTabContainer = styled.div.withConfig({
144
144
  }, function (_ref18) {
145
145
  var greyBackground = _ref18.greyBackground,
146
146
  theme = _ref18.theme;
147
- return greyBackground ? '0px 10px 13px -7px #000000,-25px 20px 19px -16px rgba(0,0,0,0)' : "0px 4px 8px 5px ".concat(theme.palette["grey-050"]);
147
+ return greyBackground ? '0px 10px 13px -7px #000000,-25px 20px 19px -16px rgba(0,0,0,0)' : "0px 4px 8px 5px " + theme.palette["grey-050"];
148
148
  }, function (_ref19) {
149
149
  var theme = _ref19.theme,
150
150
  greyBackground = _ref19.greyBackground;
@@ -162,10 +162,12 @@ export var CardTabContainer = styled.div.withConfig({
162
162
  }, CardTabTag, function (_ref23) {
163
163
  var theme = _ref23.theme,
164
164
  color = _ref23.color;
165
- return theme.palette["".concat(color)];
165
+ return theme.palette["" + color];
166
166
  }, function (_ref24) {
167
167
  var theme = _ref24.theme;
168
168
  return theme.palette.white;
169
+ }, function (props) {
170
+ return props.draggable ? 'none' : 'flex';
169
171
  }, CardTabPrefix, function (_ref25) {
170
172
  var theme = _ref25.theme;
171
173
  return theme.palette['grey-600'];
package/dist/CardTab/CardTabActions/CardTabActions.js CHANGED
@@ -12,11 +12,11 @@ var CardTabActions = function CardTabActions(_ref) {
12
12
  "data-testid": "card-tab-suffix"
13
13
  }, /*#__PURE__*/React.createElement(Cruds, {
14
14
  onEdit: changeNameAvailable ? enterEditNameMode : undefined,
15
- editTooltip: texts === null || texts === void 0 ? void 0 : texts.changeNameTooltip,
15
+ editTooltip: texts == null ? void 0 : texts.changeNameTooltip,
16
16
  onDuplicate: onDuplicateTab,
17
- duplicateTooltip: texts === null || texts === void 0 ? void 0 : texts.duplicateTooltip,
17
+ duplicateTooltip: texts == null ? void 0 : texts.duplicateTooltip,
18
18
  onRemove: onRemoveTab,
19
- removeTooltip: texts === null || texts === void 0 ? void 0 : texts.removeTooltip
19
+ removeTooltip: texts == null ? void 0 : texts.removeTooltip
20
20
  }));
21
21
  };
22
22
 
package/dist/CardTabs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
3
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
4
4
 
5
5
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
6
6
 
@@ -34,15 +34,15 @@ var CardTabs = function CardTabs(_ref) {
34
34
 
35
35
  var renderChildren = function renderChildren() {
36
36
  return React.Children.map(children, function (child, i) {
37
- var colorTabs = /*#__PURE__*/React.cloneElement(child, {
38
- color: COLORS_TABS[i % COLORS_TABS.length]
37
+ return React.cloneElement(child, {
38
+ color: COLORS_TABS[i % COLORS_TABS.length],
39
+ draggable: Boolean(onChangeOrder) || child.props.draggable
39
40
  });
40
- return colorTabs;
41
41
  });
42
42
  };
43
43
 
44
44
  return /*#__PURE__*/React.createElement(S.CardTabsContainer, {
45
- className: "ds-card-tabs ".concat(className || ''),
45
+ className: "ds-card-tabs " + (className || ''),
46
46
  "data-testid": "card-tabs-container"
47
47
  }, onChangeOrder ? /*#__PURE__*/React.createElement("div", {
48
48
  "data-testid": "card-tabs-sortable"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-card-tabs",
3
- "version": "0.9.2",
3
+ "version": "0.9.6",
4
4
  "description": "CardTabs UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,10 +32,10 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-button": "^0.16.1",
36
- "@synerise/ds-cruds": "^0.3.1",
37
- "@synerise/ds-inline-edit": "^0.5.2",
38
- "@synerise/ds-typography": "^0.12.1",
35
+ "@synerise/ds-button": "^0.16.2",
36
+ "@synerise/ds-cruds": "^0.3.2",
37
+ "@synerise/ds-inline-edit": "^0.5.6",
38
+ "@synerise/ds-typography": "^0.12.2",
39
39
  "react-sortablejs-typescript": "2.0.3",
40
40
  "sortablejs": "^1.10.1"
41
41
  },
@@ -47,5 +47,5 @@
47
47
  "devDependencies": {
48
48
  "@types/lodash": "4.14.149"
49
49
  },
50
- "gitHead": "8e667a88a48d774c550ff4766de71c4aab01f5a9"
50
+ "gitHead": "dd78d8abea639d2d77cf841f8b41a1382cf8d827"
51
51
  }