@synerise/ds-alert 0.8.24 → 0.8.25

Sign up to get free protection for your applications and to get access to all the features.
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.8.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.8.24...@synerise/ds-alert@0.8.25) (2024-08-30)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **alert:** fixes to section message ([b8e40ce](https://github.com/Synerise/synerise-design/commit/b8e40ceb26fc53e91660047e9953600cf09c653d))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.8.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.8.23...@synerise/ds-alert@0.8.24) (2024-08-27)
7
18
 
8
19
  **Note:** Version bump only for package @synerise/ds-alert
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { Props } from './SectionMessage.types';
3
- declare const SectionMessage: ({ icon, type, message, description, showMoreLabel, onShowMore, onClose, newClient, moreButtons, withEmphasis, withLink, unorderedList, color, withClose, customColor, customColorIcon, customIcon, textButton, }: Props) => React.JSX.Element;
3
+ declare const SectionMessage: ({ icon, type, message, description, showMoreLabel, onShowMore, onClose, suffixel, moreButtons, withEmphasis, withLink, unorderedList, color, withClose, customColor, customColorIcon, customIcon, }: Props) => React.JSX.Element;
4
4
  export default SectionMessage;
@@ -1,6 +1,5 @@
1
1
  import React, { useMemo } from 'react';
2
- import Icon, { CloseM, WarningFillM, UserAddM, Check3M, HelpFillM, UserUpM, UpdateDataM, NotificationsReceiveM } from '@synerise/ds-icon';
3
- import Button from '@synerise/ds-button';
2
+ import Icon, { CloseM, WarningFillM, Check3M, HelpFillM, UserUpM, UpdateDataM, NotificationsReceiveM } from '@synerise/ds-icon';
4
3
  import * as S from './SectionMessage.styles';
5
4
  var ICONS = {
6
5
  positive: /*#__PURE__*/React.createElement(Check3M, null),
@@ -21,7 +20,7 @@ var SectionMessage = function SectionMessage(_ref) {
21
20
  showMoreLabel = _ref.showMoreLabel,
22
21
  onShowMore = _ref.onShowMore,
23
22
  onClose = _ref.onClose,
24
- newClient = _ref.newClient,
23
+ suffixel = _ref.suffixel,
25
24
  moreButtons = _ref.moreButtons,
26
25
  withEmphasis = _ref.withEmphasis,
27
26
  withLink = _ref.withLink,
@@ -30,8 +29,7 @@ var SectionMessage = function SectionMessage(_ref) {
30
29
  withClose = _ref.withClose,
31
30
  customColor = _ref.customColor,
32
31
  customColorIcon = _ref.customColorIcon,
33
- customIcon = _ref.customIcon,
34
- textButton = _ref.textButton;
32
+ customIcon = _ref.customIcon;
35
33
  var renderMessage = useMemo(function () {
36
34
  return /*#__PURE__*/React.createElement(S.AlertContent, {
37
35
  withLink: withLink
@@ -58,12 +56,7 @@ var SectionMessage = function SectionMessage(_ref) {
58
56
  customColorIcon: customColorIcon
59
57
  }, customIcon || /*#__PURE__*/React.createElement(Icon, {
60
58
  component: renderIcon
61
- })), renderMessage), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, newClient && /*#__PURE__*/React.createElement(Button, {
62
- type: "ghost",
63
- mode: "icon-label"
64
- }, /*#__PURE__*/React.createElement(Icon, {
65
- component: /*#__PURE__*/React.createElement(UserAddM, null)
66
- }), textButton), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
59
+ })), renderMessage), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, suffixel && /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
67
60
  onClick: handleClose
68
61
  }, /*#__PURE__*/React.createElement(Icon, {
69
62
  component: /*#__PURE__*/React.createElement(CloseM, null)
@@ -14,6 +14,7 @@ export declare const ButtonWrapper: import("styled-components").StyledComponent<
14
14
  export declare const FirstButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
15
15
  export declare const NumberWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
16
16
  export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
17
+ export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
17
18
  export declare const IconOrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
18
19
  export declare const OrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
19
20
  export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -49,9 +49,13 @@ export var ButtonsWrapper = styled.div.withConfig({
49
49
  displayName: "SectionMessagestyles__ButtonsWrapper",
50
50
  componentId: "sc-1kuq4h0-8"
51
51
  })(["padding:16px 0 0 0;display:flex;"]);
52
+ export var SuffixWrapper = styled.div.withConfig({
53
+ displayName: "SectionMessagestyles__SuffixWrapper",
54
+ componentId: "sc-1kuq4h0-9"
55
+ })(["display:flex;"]);
52
56
  export var IconOrderWrapper = styled.div.withConfig({
53
57
  displayName: "SectionMessagestyles__IconOrderWrapper",
54
- componentId: "sc-1kuq4h0-9"
58
+ componentId: "sc-1kuq4h0-10"
55
59
  })(["display:none;margin:-4px 0;svg{fill:", ";}&:hover{svg{fill:", ";cursor:pointer;}}"], function (props) {
56
60
  return props.theme.palette['grey-700'];
57
61
  }, function (props) {
@@ -59,7 +63,7 @@ export var IconOrderWrapper = styled.div.withConfig({
59
63
  });
60
64
  export var OrderWrapper = styled.div.withConfig({
61
65
  displayName: "SectionMessagestyles__OrderWrapper",
62
- componentId: "sc-1kuq4h0-10"
66
+ componentId: "sc-1kuq4h0-11"
63
67
  })(["display:flex;&:hover{", "{display:block;}", "{background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;color:", ";}}"], IconOrderWrapper, NumberWrapper, function (props) {
64
68
  return props.theme.palette['grey-400'];
65
69
  }, function (props) {
@@ -67,13 +71,13 @@ export var OrderWrapper = styled.div.withConfig({
67
71
  });
68
72
  export var Wrapper = styled.div.withConfig({
69
73
  displayName: "SectionMessagestyles__Wrapper",
70
- componentId: "sc-1kuq4h0-11"
74
+ componentId: "sc-1kuq4h0-12"
71
75
  })(["margin-top:10px;color:", ";"], function (props) {
72
76
  return props.theme.palette['grey-700'];
73
77
  });
74
78
  export var Container = styled.div.withConfig({
75
79
  displayName: "SectionMessagestyles__Container",
76
- componentId: "sc-1kuq4h0-12"
80
+ componentId: "sc-1kuq4h0-13"
77
81
  })(["width:100%;align-items:center;justify-content:center;background-color:", ";border:1px solid ", ";border-top:2px solid ", ";border-radius:2px;"], function (props) {
78
82
  return props.customColor ? props.theme.palette[props.customColor + "-050"] : props.theme.palette[props.color + "-050"];
79
83
  }, function (props) {
@@ -83,29 +87,29 @@ export var Container = styled.div.withConfig({
83
87
  });
84
88
  export var WrapperSectionMessage = styled.div.withConfig({
85
89
  displayName: "SectionMessagestyles__WrapperSectionMessage",
86
- componentId: "sc-1kuq4h0-13"
90
+ componentId: "sc-1kuq4h0-14"
87
91
  })(["display:flex;font-size:13px;color:inherit;justify-content:space-between;"]);
88
92
  export var AlertMessage = styled.span.withConfig({
89
93
  displayName: "SectionMessagestyles__AlertMessage",
90
- componentId: "sc-1kuq4h0-14"
94
+ componentId: "sc-1kuq4h0-15"
91
95
  })(["font-size:13px;line-height:1.39;font-weight:500;max-width:400px;overflow:hidden;text-overflow:ellipsis;color:", ";"], function (props) {
92
96
  return props.theme.palette['grey-700'];
93
97
  });
94
98
  export var AlertDescription = styled.span.withConfig({
95
99
  displayName: "SectionMessagestyles__AlertDescription",
96
- componentId: "sc-1kuq4h0-15"
100
+ componentId: "sc-1kuq4h0-16"
97
101
  })(["display:flex;font-size:13px;line-height:1.39;font-weight:normal;padding-right:3px;margin-top:2px;color:", ";"], function (props) {
98
102
  return props.theme.palette['grey-700'];
99
103
  });
100
104
  export var EmphasisWrapper = styled.span.withConfig({
101
105
  displayName: "SectionMessagestyles__EmphasisWrapper",
102
- componentId: "sc-1kuq4h0-16"
106
+ componentId: "sc-1kuq4h0-17"
103
107
  })(["display:flex;font-size:13px;line-height:1.39;font-weight:500;margin-top:2px;color:inherit;"]);
104
108
  export var LinkWrapper = styled.span.withConfig({
105
109
  displayName: "SectionMessagestyles__LinkWrapper",
106
- componentId: "sc-1kuq4h0-17"
110
+ componentId: "sc-1kuq4h0-18"
107
111
  })(["display:flex;font-size:13px;line-height:1.5;font-weight:400;margin-top:2px;color:inherit;text-decoration:underline;cursor:pointer;a{color:inherit;}"]);
108
112
  export var AlertShowMore = styled.span.withConfig({
109
113
  displayName: "SectionMessagestyles__AlertShowMore",
110
- componentId: "sc-1kuq4h0-18"
114
+ componentId: "sc-1kuq4h0-19"
111
115
  })(["display:flex;font-size:13px;font-weight:500;color:inherit;text-decoration:underline;cursor:pointer;margin-top:6px;"]);
@@ -15,12 +15,11 @@ export interface Props extends Omit<AlertProps, 'type' | 'message'> {
15
15
  showMoreLabel?: React.ReactNode;
16
16
  onShowMore?: () => void;
17
17
  onClose?: () => void;
18
- newClient?: boolean | React.ReactNode;
18
+ suffixel?: React.ReactNode;
19
19
  moreButtons?: boolean | React.ReactNode;
20
20
  withEmphasis?: React.ReactNode;
21
21
  withLink?: React.ReactNode;
22
22
  unorderedList?: React.ReactNode;
23
23
  withClose?: React.ReactNode;
24
24
  customIcon?: React.ReactElement;
25
- textButton?: string;
26
25
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-alert",
3
- "version": "0.8.24",
3
+ "version": "0.8.25",
4
4
  "description": "Alert UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -33,9 +33,9 @@
33
33
  ],
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
- "@synerise/ds-button": "^0.21.6",
37
- "@synerise/ds-icon": "^0.65.1",
38
- "@synerise/ds-unordered-list": "^0.3.0",
36
+ "@synerise/ds-button": "^0.21.7",
37
+ "@synerise/ds-icon": "^0.65.2",
38
+ "@synerise/ds-unordered-list": "^0.3.1",
39
39
  "@synerise/ds-utils": "^0.28.2",
40
40
  "animate.css": "^4.1.1",
41
41
  "react-animate-height": "^2.0.23",
@@ -48,5 +48,5 @@
48
48
  "react": ">=16.9.0 <= 17.0.2",
49
49
  "styled-components": "5.0.1"
50
50
  },
51
- "gitHead": "a035aeea499cea00e72e20e3790c0ffcad4fe956"
51
+ "gitHead": "d5df67eecdc1cbcb56def8c17d04b7d883876fbf"
52
52
  }