@synerise/ds-information-card 0.3.70 → 0.4.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 (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +20 -4
  3. package/dist/InformationCard.js +3 -2
  4. package/dist/InformationCard.types.d.ts +9 -5
  5. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.3.70...@synerise/ds-information-card@0.4.0) (2024-04-29)
7
+
8
+
9
+ ### Features
10
+
11
+ * **information-card:** added list rendering ([ef358b6](https://github.com/Synerise/synerise-design/commit/ef358b6fc05a4473669052207ab327b4f3478881))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.3.70](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.3.69...@synerise/ds-information-card@0.3.70) (2024-04-26)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-information-card
package/README.md CHANGED
@@ -49,7 +49,23 @@ By default class is `ignore-click-outside` (so looking for `domElement.closest('
49
49
 
50
50
  <iframe src="/storybook-static/iframe.html?id=components-information-card--default"></iframe>
51
51
 
52
- ## API
53
-
54
- | Property | Description | Type | Default |
55
- | --- | --- | --- | --- |
52
+ ## API| Property | Description | Type | Default |
53
+ |-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------|---------|
54
+ | actionButton | custom jsx element for rendering in action button (bottom-right) | `boolean` &#124; `(() => ReactNode)` | - |
55
+ | actionButtonCallback | default action button callback method | `() => void` | - |
56
+ | actionButtonTooltipText | default action button tooltip | `string` | - |
57
+ | asTooltip | adjusts the styles to be displayed as a tooltip | `boolean` | - |
58
+ | avatarTooltipText | description in a tooltip shown when user (note renderBadge has to be provided) | `string` | - |
59
+ | className | custom class name for further styling | `string` | - |
60
+ | copyTooltip | subtitle's value to be copied when clicking on the copy button | `string` | - |
61
+ | copiedTooltip | feedback to the user once information card's subtitle has been copied | `string` | - |
62
+ | descriptionConfig | when information-card's `children` prop is not provided, `defaultTextAreaProps` can be used to parametrize default textarea | `SubtleTextAreaProps` &#124; `string` &#124; `null` | - |
63
+ | footerText | additional feedback info to the user, when set to null - footer is hidden | `ReactNode` &#124; `null` | - |
64
+ | icon | icon (note this needs to be pure SVG icon, it relies on `buildBadgeIcon` helper) | `ReactNode` | - |
65
+ | iconColor | icon color to be applied to `icon` element | `string` | - |
66
+ | notice | additional information shown between subtitle and description section. Can be used for warnings, errors, destructive actions, notices. See `buildExtraInfo` and alert `level` there. | `ReactNode` | - |
67
+ | renderAdditionalDescription | Render prop for displaying additional content above footer | `() => ReactNode` | - |
68
+ | renderBadge | Custom render prop for displaying. If set to `null` - badge won't be shown. | `Function` &#124; `null` | - |
69
+ | renderFooter | render prop for rendering the bottom part of (by default section with a small text and an optional action button on the right) | `() => JSX.Element` | - |
70
+ | subtitle | Second line. Required prop. Can be copied. | `string` | - |
71
+ | title | Title of the information-card. Can be copied. | `string` | - |
package/dist/InformationCard.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["actionButton", "actionButtonTooltipText", "actionButtonCallback", "asTooltip", "avatarTooltipText", "copyTooltip", "copiedTooltip", "renderFooter", "renderBadge", "subtitle", "title", "notice", "footerText", "icon", "iconColor", "descriptionConfig", "className"];
1
+ var _excluded = ["actionButton", "actionButtonTooltipText", "actionButtonCallback", "asTooltip", "avatarTooltipText", "copyTooltip", "copiedTooltip", "renderFooter", "renderBadge", "subtitle", "title", "notice", "footerText", "icon", "iconColor", "descriptionConfig", "className", "renderAdditionalDescription"];
2
2
 
3
3
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
4
4
 
@@ -60,6 +60,7 @@ var InformationCard = forwardRef(function (_ref, ref) {
60
60
  iconColor = _ref.iconColor,
61
61
  descriptionConfig = _ref.descriptionConfig,
62
62
  className = _ref.className,
63
+ renderAdditionalDescription = _ref.renderAdditionalDescription,
63
64
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
64
65
 
65
66
  var copyableSlot = function copyableSlot(content) {
@@ -112,7 +113,7 @@ var InformationCard = forwardRef(function (_ref, ref) {
112
113
  }, (descriptionConfig !== null || notice) && /*#__PURE__*/React.createElement(DescriptionField, {
113
114
  extraInformation: notice || /*#__PURE__*/React.createElement(React.Fragment, null),
114
115
  descriptionConfig: descriptionConfig
115
- }), renderFooter && renderFooter() || (footerText || actionButton) && /*#__PURE__*/React.createElement(Footer, _extends({
116
+ }), renderAdditionalDescription && renderAdditionalDescription(), renderFooter && renderFooter() || (footerText || actionButton) && /*#__PURE__*/React.createElement(Footer, _extends({
116
117
  text: footerText
117
118
  }, props, {
118
119
  actionButton: actionButton,
package/dist/InformationCard.types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import type { ReactNode } from 'react';
2
2
  import { SubtleTextAreaProps } from '@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types';
3
3
  import { Color, Size } from '@synerise/ds-avatar/dist/Avatar.types';
4
4
  import { IconProps } from '@synerise/ds-icon';
@@ -15,7 +15,7 @@ export type InformationCardProps = {
15
15
  /**
16
16
  * custom jsx element for rendering in action button (bottom-right)
17
17
  */
18
- actionButton?: boolean | (() => React.ReactNode);
18
+ actionButton?: boolean | (() => ReactNode);
19
19
  /**
20
20
  * default action button callback methodd
21
21
  */
@@ -53,11 +53,11 @@ export type InformationCardProps = {
53
53
  /**
54
54
  * additional feedback info to the user, when set to null - footer is hidden
55
55
  */
56
- footerText?: string | React.ReactNode | null;
56
+ footerText?: ReactNode | null;
57
57
  /**
58
58
  * icon (note this needs to be pure SVG icon, it relies on `buildBadgeIcon` helper)
59
59
  */
60
- icon?: React.ReactNode;
60
+ icon?: ReactNode;
61
61
  /**
62
62
  * icon color to be applied to `icon` element
63
63
  */
@@ -66,7 +66,7 @@ export type InformationCardProps = {
66
66
  * additional information shown between subtitle and description section.
67
67
  * Can be used for warnings, errors, destructive actions, notices. See `buildExtraInfo` and alert `level` there.
68
68
  */
69
- notice?: string | React.ReactNode;
69
+ notice?: ReactNode;
70
70
  /**
71
71
  * Custom render prop for displaying. If set to `null` - badge won't be shown.
72
72
  */
@@ -79,4 +79,8 @@ export type InformationCardProps = {
79
79
  * Title of the information-card. Can be copied.
80
80
  */
81
81
  title: string;
82
+ /**
83
+ * list of object parameters to display
84
+ */
85
+ renderAdditionalDescription?: () => ReactNode;
82
86
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-information-card",
3
- "version": "0.3.70",
3
+ "version": "0.4.0",
4
4
  "description": "InformationCard UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,18 +35,18 @@
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
37
  "@synerise/ds-alert": "^0.8.10",
38
- "@synerise/ds-avatar": "^0.15.31",
39
- "@synerise/ds-badge": "^0.6.56",
38
+ "@synerise/ds-avatar": "^0.15.32",
39
+ "@synerise/ds-badge": "^0.6.57",
40
40
  "@synerise/ds-button": "^0.19.7",
41
- "@synerise/ds-card": "^0.16.12",
41
+ "@synerise/ds-card": "^0.16.13",
42
42
  "@synerise/ds-description": "^0.3.102",
43
- "@synerise/ds-divider": "^0.6.15",
44
- "@synerise/ds-dropdown": "^0.17.105",
43
+ "@synerise/ds-divider": "^0.6.16",
44
+ "@synerise/ds-dropdown": "^0.17.106",
45
45
  "@synerise/ds-icon": "^0.60.7",
46
46
  "@synerise/ds-menu": "^0.18.20",
47
- "@synerise/ds-subtle-form": "^0.9.104",
47
+ "@synerise/ds-subtle-form": "^0.9.105",
48
48
  "@synerise/ds-tooltip": "^0.14.25",
49
- "@synerise/ds-typography": "^0.14.3",
49
+ "@synerise/ds-typography": "^0.15.0",
50
50
  "rc-trigger": "5.2.5"
51
51
  },
52
52
  "peerDependencies": {
@@ -59,5 +59,5 @@
59
59
  "@testing-library/jest-dom": "5.1.1",
60
60
  "@testing-library/react": "10.0.1"
61
61
  },
62
- "gitHead": "8b4c28e5e67b83507f7c4edcc5dc9392e0cf9656"
62
+ "gitHead": "6f0dc42ae79cea009e60fdb1f91ef72dcc82998e"
63
63
  }