@synerise/ds-manageable-list 0.24.13 → 0.25.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 (7) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +13 -10
  3. package/dist/Item/ContentItem/ContentItem.js +4 -2
  4. package/dist/Item/ContentItem/ContentItem.styles.d.ts +1 -0
  5. package/dist/Item/ContentItem/ContentItem.styles.js +24 -20
  6. package/dist/Item/Item.types.d.ts +2 -0
  7. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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.25.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.24.13...@synerise/ds-manageable-list@0.25.0) (2023-04-05)
7
+
8
+
9
+ ### Features
10
+
11
+ * **manageable-list:** adds draft tests for new features ([5a706d2](https://github.com/Synerise/synerise-design/commit/5a706d29d719804d48623d632a59188be0af2542))
12
+ * **manageable-list:** adds new header suffix options ([0b0817f](https://github.com/Synerise/synerise-design/commit/0b0817fe1bbe5e5a0102b5dd86cac935352946c0))
13
+
14
+
15
+
16
+
17
+
6
18
  ## [0.24.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.24.12...@synerise/ds-manageable-list@0.24.13) (2023-04-05)
7
19
 
8
20
  **Note:** Version bump only for package @synerise/ds-manageable-list
package/README.md CHANGED
@@ -74,16 +74,19 @@ ManageableList UI Component
74
74
 
75
75
  #### Item
76
76
 
77
- | Property | Description | Type | Default |
78
- | ------------ | --------------------------------------------------- | --------------- | ------- |
79
- | id | Identifier of item | string | - |
80
- | name | Name of item (visible on list) | string | - |
81
- | canUpdate | Flag which allows to update item name | boolean | - |
82
- | canDelete | Flag which allows to remove item | boolean | - |
83
- | canDuplicate | Flag which allows to duplicate item | boolean | - |
84
- | tag | Tag (ds-tags), available only for content list type | Tag | - |
85
- | icon | Icon (ds-icon) | Icon | - |
86
- | content | Content rendered in content type list | React.ReactNode | - |
77
+ | Property | Description | Type | Default |
78
+ | ----------------------- | ------------------------------------------------------------- | --------------- | ------- |
79
+ | id | Identifier of item | string | - |
80
+ | name | Name of item (visible on list) | string | - |
81
+ | canUpdate | Flag which allows to update item name | boolean | - |
82
+ | canDelete | Flag which allows to remove item | boolean | - |
83
+ | canDuplicate | Flag which allows to duplicate item | boolean | - |
84
+ | tag | Tag (ds-tags), available only for content list type | Tag | - |
85
+ | icon | Icon (ds-icon) | Icon | - |
86
+ | content | Content rendered in content type list | React.ReactNode | - |
87
+ | headerSuffix | Component that will be rendered on the start of the item | React.ReactNode | - |
88
+ | hideHeaderSuffixOnHover | Whether to hide suffixHeader on hover | boolean | - |
89
+ | additionalHeaderSuffix | Component that will be rendered on the end of the item suffix | React.ReactNode | - |
87
90
 
88
91
  #### AdditionalAction
89
92
 
package/dist/Item/ContentItem/ContentItem.js CHANGED
@@ -118,7 +118,9 @@ var ContentItem = function ContentItem(_ref) {
118
118
  item: item,
119
119
  editMode: editMode,
120
120
  onUpdate: updateName
121
- }), /*#__PURE__*/React.createElement(S.ItemHeaderSuffix, null, (!!headerSuffix || (item == null ? void 0 : item.headerSuffix)) && headerSuffix || item.headerSuffix, renderMoveButtons, /*#__PURE__*/React.createElement(ItemActions, {
121
+ }), /*#__PURE__*/React.createElement(S.ItemHeaderSuffix, null, /*#__PURE__*/React.createElement("div", {
122
+ className: item.hideHeaderSuffixOnHover ? 'suffix--hide-on-hover' : ''
123
+ }, (!!headerSuffix || (item == null ? void 0 : item.headerSuffix)) && headerSuffix || item.headerSuffix), renderMoveButtons, /*#__PURE__*/React.createElement(ItemActions, {
122
124
  item: item,
123
125
  duplicateAction: onDuplicate,
124
126
  duplicateActionTooltip: texts == null ? void 0 : texts.itemActionDuplicateTooltip,
@@ -150,7 +152,7 @@ var ContentItem = function ContentItem(_ref) {
150
152
  }, /*#__PURE__*/React.createElement(Icon, {
151
153
  component: /*#__PURE__*/React.createElement(OptionHorizontalM, null),
152
154
  color: theme.palette['grey-600']
153
- })))), (item.user || item.created) && /*#__PURE__*/React.createElement(ItemMeta, {
155
+ })))), item.additionalSuffix && /*#__PURE__*/React.createElement(S.AdditionalSuffix, null, item.additionalSuffix), (item.user || item.created) && /*#__PURE__*/React.createElement(ItemMeta, {
154
156
  user: item.user,
155
157
  created: item.created
156
158
  }))), item.content && /*#__PURE__*/React.createElement(AnimateHeight, {
package/dist/Item/ContentItem/ContentItem.styles.d.ts CHANGED
@@ -10,6 +10,7 @@ declare type DraggerWrapperProps = {
10
10
  declare type ItemHeaderProps = {
11
11
  hasPrefix: boolean;
12
12
  };
13
+ export declare const AdditionalSuffix: import("styled-components").StyledComponent<"div", any, {}, never>;
13
14
  export declare const DraggerWrapper: import("styled-components").StyledComponent<"div", any, DraggerWrapperProps, never>;
14
15
  export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
15
16
  export declare const MoveItemButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/Item/ContentItem/ContentItem.styles.js CHANGED
@@ -9,28 +9,38 @@ var dashedStyle = function dashedStyle(props) {
9
9
  return css(["&&{box-shadow:0 0 0 0 transparent;border:1px dashed ", ";}&&:hover{border:1px dashed ", ";}"], props.theme.palette['grey-300'], props.theme.palette['grey-400']);
10
10
  };
11
11
 
12
+ export var AdditionalSuffix = styled.div.withConfig({
13
+ displayName: "ContentItemstyles__AdditionalSuffix",
14
+ componentId: "sc-13pyu4r-0"
15
+ })(["margin-left:8px;"]);
12
16
  export var DraggerWrapper = styled.div.withConfig({
13
17
  displayName: "ContentItemstyles__DraggerWrapper",
14
- componentId: "sc-13pyu4r-0"
18
+ componentId: "sc-13pyu4r-1"
15
19
  })(["cursor:pointer;display:flex;opacity:", ";"], function (_ref) {
16
20
  var disabled = _ref.disabled;
17
21
  return disabled ? '0.4' : '1';
18
22
  });
19
23
  export var IconWrapper = styled.div.withConfig({
20
24
  displayName: "ContentItemstyles__IconWrapper",
21
- componentId: "sc-13pyu4r-1"
25
+ componentId: "sc-13pyu4r-2"
22
26
  })(["display:flex;"]);
23
27
  export var MoveItemButtons = styled.div.withConfig({
24
28
  displayName: "ContentItemstyles__MoveItemButtons",
25
- componentId: "sc-13pyu4r-2"
29
+ componentId: "sc-13pyu4r-3"
26
30
  })(["display:none;flex-direction:row;align-items:flex-start;justify-content:center;margin-right:8px;.ds-button{margin-left:8px;&:first-child{margin-left:0;}}"]);
27
31
  export var ItemHeaderPrefix = styled.div.withConfig({
28
32
  displayName: "ContentItemstyles__ItemHeaderPrefix",
29
- componentId: "sc-13pyu4r-3"
30
- })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;"]);
33
+ componentId: "sc-13pyu4r-4"
34
+ })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;", "{margin:0 12px 0 0;}", "{margin-right:12px;}", "{margin-right:12px;svg{color:", ";fill:", ";}}"], Tag, IconWrapper, DraggerWrapper, function (_ref2) {
35
+ var theme = _ref2.theme;
36
+ return theme.palette['grey-400'];
37
+ }, function (_ref3) {
38
+ var theme = _ref3.theme;
39
+ return theme.palette['grey-400'];
40
+ });
31
41
  export var ItemHeaderSuffix = styled.div.withConfig({
32
42
  displayName: "ContentItemstyles__ItemHeaderSuffix",
33
- componentId: "sc-13pyu4r-4"
43
+ componentId: "sc-13pyu4r-5"
34
44
  })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;.ds-dropdown-trigger{cursor:pointer;svg{transition:all 0.3s ease;}&.ant-dropdown-open,&:hover{svg{color:", ";fill:", ";}}}"], function (props) {
35
45
  return props.theme.palette['blue-600'];
36
46
  }, function (props) {
@@ -38,15 +48,9 @@ export var ItemHeaderSuffix = styled.div.withConfig({
38
48
  });
39
49
  export var ItemHeader = styled.div.withConfig({
40
50
  displayName: "ContentItemstyles__ItemHeader",
41
- componentId: "sc-13pyu4r-5"
42
- })(["display:flex;flex-direction:row;align-items:center;justify-content:stretch;width:100%;padding:12px;cursor:pointer;max-height:48px;", " ", "{margin:0 12px 0 0;}", "{margin-right:12px;}", "{margin-right:12px;svg{color:", ";fill:", ";}}", "{padding:0;}&:hover{", "{color:", ";}", "{display:flex;}", "{svg{color:", ";fill:", ";}}", "{display:flex;}}"], function (props) {
51
+ componentId: "sc-13pyu4r-6"
52
+ })(["display:flex;flex-direction:row;align-items:center;justify-content:stretch;width:100%;padding:12px;cursor:pointer;max-height:48px;", " ", "{padding:0;}&:hover{.suffix--hide-on-hover{display:none;}", "{color:", ";}", "{display:flex;}", "{svg{color:", ";fill:", ";}}", "{display:flex;}}"], function (props) {
43
53
  return !props.hasPrefix && "padding-left:16px;";
44
- }, Tag, IconWrapper, DraggerWrapper, function (_ref2) {
45
- var theme = _ref2.theme;
46
- return theme.palette['grey-400'];
47
- }, function (_ref3) {
48
- var theme = _ref3.theme;
49
- return theme.palette['grey-400'];
50
54
  }, ItemMeta, ItemLabel, function (_ref4) {
51
55
  var theme = _ref4.theme;
52
56
  return theme.palette['grey-800'];
@@ -59,7 +63,7 @@ export var ItemHeader = styled.div.withConfig({
59
63
  }, MoveItemButtons);
60
64
  export var ContentWrapper = styled.div.withConfig({
61
65
  displayName: "ContentItemstyles__ContentWrapper",
62
- componentId: "sc-13pyu4r-6"
66
+ componentId: "sc-13pyu4r-7"
63
67
  })(["padding:", ";width:100%;border-top:1px solid ", ";opacity:1;"], function (props) {
64
68
  return props.withoutPadding ? '0px' : '16px 24px 24px';
65
69
  }, function (_ref7) {
@@ -68,7 +72,7 @@ export var ContentWrapper = styled.div.withConfig({
68
72
  });
69
73
  export var ItemContainer = styled.div.withConfig({
70
74
  displayName: "ContentItemstyles__ItemContainer",
71
- componentId: "sc-13pyu4r-7"
75
+ componentId: "sc-13pyu4r-8"
72
76
  })(["width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-bottom:16px;border-radius:3px;position:relative;background-color:", ";box-shadow:", ";&& .item-content-animation{width:100%;}", " ", ""], function (_ref8) {
73
77
  var theme = _ref8.theme;
74
78
  return theme.palette.white;
@@ -85,17 +89,17 @@ export var ItemContainer = styled.div.withConfig({
85
89
  });
86
90
  export var ToggleContentWrapper = styled.div.withConfig({
87
91
  displayName: "ContentItemstyles__ToggleContentWrapper",
88
- componentId: "sc-13pyu4r-8"
92
+ componentId: "sc-13pyu4r-9"
89
93
  })(["margin-left:12px;"]);
90
94
  export var DropdownTrigger = styled(Button).withConfig({
91
95
  displayName: "ContentItemstyles__DropdownTrigger",
92
- componentId: "sc-13pyu4r-9"
96
+ componentId: "sc-13pyu4r-10"
93
97
  })(["margin-left:12px;"]);
94
98
  export var FilterDropdownTrigger = styled(Button).withConfig({
95
99
  displayName: "ContentItemstyles__FilterDropdownTrigger",
96
- componentId: "sc-13pyu4r-10"
100
+ componentId: "sc-13pyu4r-11"
97
101
  })(["margin-left:0px;"]);
98
102
  export var DropdownWrapper = styled.div.withConfig({
99
103
  displayName: "ContentItemstyles__DropdownWrapper",
100
- componentId: "sc-13pyu4r-11"
104
+ componentId: "sc-13pyu4r-12"
101
105
  })([""]);
package/dist/Item/Item.types.d.ts CHANGED
@@ -56,4 +56,6 @@ export declare type ItemProps<T extends object = {}> = T & {
56
56
  disableExpanding?: boolean;
57
57
  expanded?: boolean;
58
58
  headerSuffix?: React.ReactNode;
59
+ hideHeaderSuffixOnHover?: boolean;
60
+ additionalSuffix?: React.ReactNode;
59
61
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-manageable-list",
3
- "version": "0.24.13",
3
+ "version": "0.25.0",
4
4
  "description": "ManageableList UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -58,5 +58,5 @@
58
58
  "react": ">=16.9.0 < 17.0.0",
59
59
  "styled-components": "^4.4.0"
60
60
  },
61
- "gitHead": "42bda32506d121cbc207c73efca09f300a749120"
61
+ "gitHead": "f84931e820ffcf263bec74e9371f9d6a48e38a34"
62
62
  }