@synerise/ds-alert 1.1.6 → 1.1.7
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.
- package/CHANGELOG.md +449 -1356
- package/README.md +78 -79
- package/dist/Alert.d.ts +1 -1
- package/dist/Alert.js +7 -3
- package/dist/Alert.styles.d.ts +1 -1
- package/dist/Alert.styles.js +1 -1
- package/dist/Alert.types.d.ts +3 -3
- package/dist/AlertInfo/AlertInfo.d.ts +1 -1
- package/dist/AlertInfo/AlertInfo.js +2 -2
- package/dist/AlertInfo/AlertInfo.types.d.ts +1 -1
- package/dist/BroadcastBar/BroadcastBar.d.ts +1 -1
- package/dist/BroadcastBar/BroadcastBar.js +7 -3
- package/dist/BroadcastBar/BroadcastBar.styles.d.ts +2 -2
- package/dist/BroadcastBar/BroadcastBar.types.d.ts +2 -2
- package/dist/ColorSemantic/AlertSemanticColor.d.ts +1 -1
- package/dist/ColorSemantic/AlertSemanticColor.js +7 -3
- package/dist/ColorSemantic/AlertSemanticColor.styles.d.ts +1 -1
- package/dist/ColorSemantic/AlertSemanticColor.types.d.ts +1 -1
- package/dist/IconAlert/IconAlert.d.ts +1 -1
- package/dist/IconAlert/IconAlert.js +1 -1
- package/dist/IconAlert/IconAlert.styles.d.ts +1 -1
- package/dist/IconAlert/IconAlert.types.d.ts +1 -1
- package/dist/InlineAlert/InlineAlert.d.ts +1 -1
- package/dist/InlineAlert/InlineAlert.js +1 -1
- package/dist/InlineAlert/InlineAlert.styles.d.ts +1 -1
- package/dist/InlineAlert/InlineAlert.types.d.ts +1 -1
- package/dist/SectionMessage/SectionMessage.d.ts +1 -1
- package/dist/SectionMessage/SectionMessage.js +7 -3
- package/dist/SectionMessage/SectionMessage.styles.d.ts +2 -2
- package/dist/SectionMessage/SectionMessage.types.d.ts +3 -3
- package/dist/Toast/Toast.d.ts +1 -1
- package/dist/Toast/Toast.js +7 -3
- package/dist/Toast/Toast.styles.d.ts +3 -3
- package/dist/Toast/Toast.styles.js +3 -3
- package/dist/Toast/Toast.types.d.ts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -6,6 +6,7 @@ title: Alert
|
|
|
6
6
|
Alert UI Component
|
|
7
7
|
|
|
8
8
|
## Installation
|
|
9
|
+
|
|
9
10
|
```
|
|
10
11
|
npm i @synerise/ds-alert
|
|
11
12
|
or
|
|
@@ -13,19 +14,19 @@ yarn add @synerise/ds-alert
|
|
|
13
14
|
```
|
|
14
15
|
|
|
15
16
|
## Usage
|
|
16
|
-
```jsx
|
|
17
|
-
import Alert from '@synerise/ds-alert'
|
|
18
|
-
|
|
19
|
-
<Alert
|
|
20
|
-
mode="background-outline"
|
|
21
|
-
showIcon
|
|
22
|
-
type="success"
|
|
23
|
-
message="Success!"
|
|
24
|
-
description="Success description"
|
|
25
|
-
showMoreLabel="Show more"
|
|
26
|
-
onShowMore={() => {}}
|
|
27
|
-
/>
|
|
28
17
|
|
|
18
|
+
```jsx
|
|
19
|
+
import Alert from '@synerise/ds-alert';
|
|
20
|
+
|
|
21
|
+
<Alert
|
|
22
|
+
mode="background-outline"
|
|
23
|
+
showIcon
|
|
24
|
+
type="success"
|
|
25
|
+
message="Success!"
|
|
26
|
+
description="Success description"
|
|
27
|
+
showMoreLabel="Show more"
|
|
28
|
+
onShowMore={() => {}}
|
|
29
|
+
/>;
|
|
29
30
|
```
|
|
30
31
|
|
|
31
32
|
## Demo
|
|
@@ -34,33 +35,33 @@ import Alert from '@synerise/ds-alert'
|
|
|
34
35
|
|
|
35
36
|
## API
|
|
36
37
|
|
|
37
|
-
| Property | Description
|
|
38
|
-
|
|
|
39
|
-
| afterClose | Called when close animation is finished
|
|
40
|
-
| closable | Whether Alert can be closed
|
|
41
|
-
| closeText | Close text to show
|
|
42
|
-
| description | Additional content of Alert
|
|
43
|
-
| icon | Custom icon, effective when `showIcon` is `true`
|
|
44
|
-
| message | Content of Alert
|
|
45
|
-
| showIcon | Whether to show icon
|
|
46
|
-
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error`
|
|
47
|
-
| onClose | Callback when Alert is closed
|
|
48
|
-
| mode
|
|
49
|
-
| color
|
|
38
|
+
| Property | Description | Type | Default |
|
|
39
|
+
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | --- |
|
|
40
|
+
| afterClose | Called when close animation is finished | () => void | - |
|
|
41
|
+
| closable | Whether Alert can be closed | boolean | - |
|
|
42
|
+
| closeText | Close text to show | string\ | ReactNode | - |
|
|
43
|
+
| description | Additional content of Alert | string\ | ReactNode | - |
|
|
44
|
+
| icon | Custom icon, effective when `showIcon` is `true` | ReactNode | - |
|
|
45
|
+
| message | Content of Alert | string\ | ReactNode | - |
|
|
46
|
+
| showIcon | Whether to show icon | boolean | `false` |
|
|
47
|
+
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info` |
|
|
48
|
+
| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |
|
|
49
|
+
| mode | Whether to render alert with outline, background, or transparent, options: `background`, `background-outline`, `outline`, `clear` | string | `background` |
|
|
50
|
+
| color | Set the color that overrides the standard color of alert, options: `blue`, `grey`, `green`, `yellow`, `red`, `pink`, `mars`, `orange`, `fern`, `cyan`, `purple`, `violet` | string | `` |
|
|
50
51
|
|
|
51
52
|
### Alert.InlineAlert
|
|
52
53
|
|
|
53
|
-
| Property | Description | Type | Default |
|
|
54
|
-
|
|
|
55
|
-
| type | Type of InlineAlert, options: `success`, `alert`, `warning` | `string` | `warning` |
|
|
56
|
-
| message | Message of alert | `string` \ `React.ReactNode` | - |
|
|
54
|
+
| Property | Description | Type | Default |
|
|
55
|
+
| -------- | ----------------------------------------------------------- | ---------------------------- | --------- |
|
|
56
|
+
| type | Type of InlineAlert, options: `success`, `alert`, `warning` | `string` | `warning` |
|
|
57
|
+
| message | Message of alert | `string` \ `React.ReactNode` | - |
|
|
57
58
|
|
|
58
59
|
### Alert.SectionMessage
|
|
59
60
|
|
|
60
|
-
| Property | Description | Type | Default |
|
|
61
|
-
|
|
|
62
|
-
| type | Type of SectionMessage, options: `notice`, `negative`, `positive`,`neutral`,`supply`,`service`,`entity` | `string` | `negative` |
|
|
63
|
-
| message | Message of section messsage | `React.ReactNode` | - |
|
|
61
|
+
| Property | Description | Type | Default |
|
|
62
|
+
| --------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------- | ---------- |
|
|
63
|
+
| type | Type of SectionMessage, options: `notice`, `negative`, `positive`,`neutral`,`supply`,`service`,`entity` | `string` | `negative` |
|
|
64
|
+
| message | Message of section messsage | `React.ReactNode` | - |
|
|
64
65
|
| customColor | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string` | - |
|
|
65
66
|
| customColorIcon | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string` | - |
|
|
66
67
|
| color | type of colors,options: `red`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan` | `string` | - |
|
|
@@ -78,58 +79,56 @@ import Alert from '@synerise/ds-alert'
|
|
|
78
79
|
|
|
79
80
|
### Alert.AlertSemanticColor
|
|
80
81
|
|
|
81
|
-
| Property | Description
|
|
82
|
-
|
|
|
83
|
-
| type | Type of AlertSemanticColor, options: `notice`, `negative`, `positive`,`informative`,`neutral`,`supply`,`service`,`entity`
|
|
84
|
-
| color | type of colors,options: `red`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`blue`
|
|
85
|
-
| mode | type of modes, options: `background`, `background-outline`,`outline`,`shadow`
|
|
82
|
+
| Property | Description | Type | Default |
|
|
83
|
+
| -------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | ---------- |
|
|
84
|
+
| type | Type of AlertSemanticColor, options: `notice`, `negative`, `positive`,`informative`,`neutral`,`supply`,`service`,`entity` | `string` | `positive` |
|
|
85
|
+
| color | type of colors,options: `red`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`blue` | `string` | - |
|
|
86
|
+
| mode | type of modes, options: `background`, `background-outline`,`outline`,`shadow` | `string` | - |
|
|
86
87
|
|
|
87
88
|
### Alert.IconAlert
|
|
88
89
|
|
|
89
|
-
| Property
|
|
90
|
-
|
|
|
91
|
-
| type
|
|
92
|
-
| message
|
|
93
|
-
| disabled
|
|
94
|
-
| withEmphasis
|
|
95
|
-
| withLink
|
|
96
|
-
| iconAlert
|
|
97
|
-
| hoverButton
|
|
98
|
-
| customIcon
|
|
99
|
-
|
|
90
|
+
| Property | Description | Type | Default |
|
|
91
|
+
| ------------ | -------------------------------------------------------------------- | ----------------- | --------- |
|
|
92
|
+
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | `string` | `warning` |
|
|
93
|
+
| message | Message of Icon Alert | `React.ReactNode` | - |
|
|
94
|
+
| disabled | prop to set disabled icon | `boolean` | - |
|
|
95
|
+
| withEmphasis | prop to show bolder text | `React.ReactNode` | - |
|
|
96
|
+
| withLink | prop to show highlited text | `React.ReactNode` | - |
|
|
97
|
+
| iconAlert | prop to set custom icon | `boolean` | - |
|
|
98
|
+
| hoverButton | prop to set hover state button | `boolean` | - |
|
|
99
|
+
| customIcon | prop to set custom icon | `React.ReactNode` | - |
|
|
100
100
|
|
|
101
101
|
### Alert.Toast
|
|
102
102
|
|
|
103
|
-
| Property | Description | Type
|
|
104
|
-
|
|
|
105
|
-
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | `string`
|
|
106
|
-
| message | Message of Icon Alert | `React.ReactNode`
|
|
107
|
-
| button | prop to set button | `React.ReactNode`
|
|
108
|
-
| expanded | prop to set show expanded content | `boolean`
|
|
109
|
-
| onExpand | prop on click to show content | `isExpanded:boolean => void
|
|
110
|
-
| customColor | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string`
|
|
111
|
-
| customColorIcon | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string`
|
|
112
|
-
| color | type of colors,options: `red`, `green`,`yellow`,`grey`,`blue` | `string`
|
|
113
|
-
| colorIcon | type of colors,options: `white`, `black`,`yellow`,`grey`,`blue` | `string`
|
|
114
|
-
| customColorText | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string`
|
|
115
|
-
| withClose | prop to show close button | `React.ReactNode`
|
|
116
|
-
| customIcon | prop to set custom icon | `React.ReactNode`
|
|
117
|
-
| expander | prop to set expanded icon | `React.ReactNode`
|
|
118
|
-
| expanderContent | prop to set custom icon | `React.ReactNode`
|
|
119
|
-
| onCloseClick | Callback when Toast is closed | `(e: MouseEvent) => void`
|
|
120
|
-
| show | prop to show Toast | `boolean`
|
|
103
|
+
| Property | Description | Type | Default |
|
|
104
|
+
| --------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------- |
|
|
105
|
+
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | `string` | `warning` |
|
|
106
|
+
| message | Message of Icon Alert | `React.ReactNode` | - |
|
|
107
|
+
| button | prop to set button | `React.ReactNode` | - |
|
|
108
|
+
| expanded | prop to set show expanded content | `boolean` | - |
|
|
109
|
+
| onExpand | prop on click to show content | `isExpanded:boolean => void` | - |
|
|
110
|
+
| customColor | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string` | - |
|
|
111
|
+
| customColorIcon | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string` | - |
|
|
112
|
+
| color | type of colors,options: `red`, `green`,`yellow`,`grey`,`blue` | `string` | - |
|
|
113
|
+
| colorIcon | type of colors,options: `white`, `black`,`yellow`,`grey`,`blue` | `string` | - |
|
|
114
|
+
| customColorText | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string` | - |
|
|
115
|
+
| withClose | prop to show close button | `React.ReactNode` | - |
|
|
116
|
+
| customIcon | prop to set custom icon | `React.ReactNode` | - |
|
|
117
|
+
| expander | prop to set expanded icon | `React.ReactNode` | - |
|
|
118
|
+
| expanderContent | prop to set custom icon | `React.ReactNode` | - |
|
|
119
|
+
| onCloseClick | Callback when Toast is closed | `(e: MouseEvent) => void` | - |
|
|
120
|
+
| show | prop to show Toast | `boolean` | - |
|
|
121
121
|
|
|
122
122
|
### Alert.BroadcastBar
|
|
123
123
|
|
|
124
|
-
| Property
|
|
125
|
-
|
|
|
126
|
-
| type
|
|
127
|
-
| color
|
|
128
|
-
| onCloseClick
|
|
129
|
-
| withEmphasis
|
|
130
|
-
| withLink
|
|
131
|
-
| withClose
|
|
132
|
-
| button
|
|
133
|
-
| textButton
|
|
134
|
-
| text
|
|
135
|
-
|
|
124
|
+
| Property | Description | Type | Default |
|
|
125
|
+
| ------------ | --------------------------------------------------------------- | ----------------- | --------- |
|
|
126
|
+
| type | Type of Alert styles, options: `success`, `warning`, `negative` | `string` | `warning` |
|
|
127
|
+
| color | type of colors,options: `red`, `green`,`yellow` | `string` | - |
|
|
128
|
+
| onCloseClick | prop to close broadcastBar | `void` | - |
|
|
129
|
+
| withEmphasis | prop to show bolder text | `React.ReactNode` | - |
|
|
130
|
+
| withLink | prop to show highlited text | `React.ReactNode` | - |
|
|
131
|
+
| withClose | prop to set closeIcon | `React.ReactNode` | - |
|
|
132
|
+
| button | prop to set button | `boolean` | - |
|
|
133
|
+
| textButton | string of button | `string` | - |
|
|
134
|
+
| text | string of withEmphasis or withLink | `string` | - |
|
package/dist/Alert.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type AlertSubComponents, type Props } from './Alert.types';
|
|
2
3
|
import './style/index.less';
|
|
3
|
-
import { AlertSubComponents, Props } from './Alert.types';
|
|
4
4
|
declare const Alert: React.FC<Props> & AlertSubComponents;
|
|
5
5
|
export default Alert;
|
package/dist/Alert.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import "./style/index.css";
|
|
4
3
|
import Icon, { Check2M, Close2M, NotificationsM } from '@synerise/ds-icon';
|
|
5
4
|
import * as S from './Alert.styles';
|
|
6
5
|
import InlineAlert from './InlineAlert/InlineAlert';
|
|
6
|
+
import "./style/index.css";
|
|
7
7
|
var ICONS = {
|
|
8
8
|
success: /*#__PURE__*/React.createElement(Check2M, null),
|
|
9
9
|
warning: /*#__PURE__*/React.createElement(Check2M, null),
|
|
@@ -24,8 +24,12 @@ var Alert = function Alert(props) {
|
|
|
24
24
|
}, showMoreLabel));
|
|
25
25
|
}, [message, description, showMoreLabel, onShowMore]);
|
|
26
26
|
var renderIcon = React.useMemo(function () {
|
|
27
|
-
if (icon)
|
|
28
|
-
|
|
27
|
+
if (icon) {
|
|
28
|
+
return icon;
|
|
29
|
+
}
|
|
30
|
+
if (ICONS[type]) {
|
|
31
|
+
return ICONS[type];
|
|
32
|
+
}
|
|
29
33
|
return DEFAULT_ICON;
|
|
30
34
|
}, [icon, type]);
|
|
31
35
|
return /*#__PURE__*/React.createElement(S.AntdAlert, _extends({}, props, {
|
package/dist/Alert.styles.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Props } from './Alert.types';
|
|
2
|
+
import { type Props } from './Alert.types';
|
|
3
3
|
export declare const AntdAlert: import("styled-components").StyledComponent<(props: Props & {
|
|
4
4
|
message: React.ReactNode;
|
|
5
5
|
}) => React.JSX.Element, any, {}, never>;
|
package/dist/Alert.styles.js
CHANGED
package/dist/Alert.types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { AlertProps } from 'antd/lib/alert';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import InlineAlert from './InlineAlert/InlineAlert';
|
|
1
|
+
import { type AlertProps } from 'antd/lib/alert';
|
|
2
|
+
import type React from 'react';
|
|
3
|
+
import type InlineAlert from './InlineAlert/InlineAlert';
|
|
4
4
|
export type AlertType = 'success' | 'warning' | 'error' | 'info';
|
|
5
5
|
export interface Props extends Omit<AlertProps, 'type' | 'message'> {
|
|
6
6
|
message?: React.ReactNode;
|
|
@@ -2,9 +2,9 @@ var _excluded = ["IconComponent"];
|
|
|
2
2
|
var _mapSizeToPx;
|
|
3
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import Icon, { CheckL, WarningL, WarningXl
|
|
6
|
-
import { AlertSize } from './AlertInfo.types';
|
|
5
|
+
import Icon, { CheckL, CheckXl, WarningL, WarningXl } from '@synerise/ds-icon';
|
|
7
6
|
import * as S from './AlertInfo.styles';
|
|
7
|
+
import { AlertSize } from './AlertInfo.types';
|
|
8
8
|
var mapSizeToPx = (_mapSizeToPx = {}, _mapSizeToPx[AlertSize.SMALL] = 48, _mapSizeToPx[AlertSize.MEDIUM] = 96, _mapSizeToPx);
|
|
9
9
|
var AlertInfo = function AlertInfo(_ref) {
|
|
10
10
|
var _ref$size = _ref.size,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import Icon, {
|
|
2
|
+
import Icon, { Check3M, CloseM, ErrorFillM, WarningFillM } from '@synerise/ds-icon';
|
|
3
3
|
import * as S from './BroadcastBar.styles';
|
|
4
4
|
var ICONS = {
|
|
5
5
|
success: /*#__PURE__*/React.createElement(Check3M, null),
|
|
@@ -36,8 +36,12 @@ var BroadcastBar = function BroadcastBar(_ref) {
|
|
|
36
36
|
}, text), withEmphasis)));
|
|
37
37
|
}, [description, withEmphasis, withLink, text, color]);
|
|
38
38
|
var renderIcon = React.useMemo(function () {
|
|
39
|
-
if (icon)
|
|
40
|
-
|
|
39
|
+
if (icon) {
|
|
40
|
+
return icon;
|
|
41
|
+
}
|
|
42
|
+
if (ICONS[type]) {
|
|
43
|
+
return ICONS[type];
|
|
44
|
+
}
|
|
41
45
|
return DEFAULT_ICON;
|
|
42
46
|
}, [icon, type]);
|
|
43
47
|
return /*#__PURE__*/React.createElement(S.Container, {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import type React from 'react';
|
|
2
2
|
import Button from '@synerise/ds-button';
|
|
3
|
-
import { ColorType } from './BroadcastBar.types';
|
|
3
|
+
import { type ColorType } from './BroadcastBar.types';
|
|
4
4
|
export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
|
|
5
5
|
withLink?: React.ReactNode;
|
|
6
6
|
color?: ColorType | undefined;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { AlertProps } from 'antd/lib/alert';
|
|
2
|
-
import React from 'react';
|
|
1
|
+
import { type AlertProps } from 'antd/lib/alert';
|
|
2
|
+
import type React from 'react';
|
|
3
3
|
export type BroadcastBarTypes = 'success' | 'warning' | 'negative';
|
|
4
4
|
export type ColorType = 'red' | 'green' | 'yellow';
|
|
5
5
|
export interface Props extends Omit<AlertProps, 'type' | 'message'> {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import Icon, {
|
|
2
|
+
import Icon, { Check3M, HelpFillM, InfoFillM, NotificationsReceiveM, UpdateDataM, UserCheckM, WarningFillM } from '@synerise/ds-icon';
|
|
3
3
|
import * as S from './AlertSemanticColor.styles';
|
|
4
4
|
var ICONS = {
|
|
5
5
|
positive: /*#__PURE__*/React.createElement(Check3M, null),
|
|
@@ -18,8 +18,12 @@ var AlertSemanticColor = function AlertSemanticColor(_ref) {
|
|
|
18
18
|
color = _ref.color,
|
|
19
19
|
mode = _ref.mode;
|
|
20
20
|
var renderIcon = React.useMemo(function () {
|
|
21
|
-
if (icon)
|
|
22
|
-
|
|
21
|
+
if (icon) {
|
|
22
|
+
return icon;
|
|
23
|
+
}
|
|
24
|
+
if (ICONS[type]) {
|
|
25
|
+
return ICONS[type];
|
|
26
|
+
}
|
|
23
27
|
return DEFAULT_ICON;
|
|
24
28
|
}, [icon, type]);
|
|
25
29
|
return /*#__PURE__*/React.createElement(S.Container, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ColorType, ModeType } from './AlertSemanticColor.types';
|
|
1
|
+
import { type ColorType, type ModeType } from './AlertSemanticColor.types';
|
|
2
2
|
export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
3
3
|
mode?: ModeType | undefined;
|
|
4
4
|
color?: ColorType | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AlertProps } from 'antd/lib/alert';
|
|
1
|
+
import { type AlertProps } from 'antd/lib/alert';
|
|
2
2
|
export type AlertType = 'positive' | 'notice' | 'negative' | 'informative' | 'neutral' | 'supply' | 'service' | 'entity';
|
|
3
3
|
export type ColorType = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'cyan' | 'purple' | 'violet';
|
|
4
4
|
export type ModeType = 'background' | 'background-outline' | 'clear' | 'shadow';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { IconAlertProps } from './IconAlert.types';
|
|
2
|
+
import { type IconAlertProps } from './IconAlert.types';
|
|
3
3
|
declare const IconAlert: ({ type, iconAlert, message, withLink, withEmphasis, hoverButton, disabled, customIcon, ...rest }: IconAlertProps) => React.JSX.Element;
|
|
4
4
|
export default IconAlert;
|
|
@@ -2,7 +2,7 @@ var _excluded = ["type", "iconAlert", "message", "withLink", "withEmphasis", "ho
|
|
|
2
2
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
3
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
4
|
import React, { useMemo } from 'react';
|
|
5
|
-
import Icon, { Check3M,
|
|
5
|
+
import Icon, { Check3M, InfoFillM, WarningFillM } from '@synerise/ds-icon';
|
|
6
6
|
import * as S from './IconAlert.styles';
|
|
7
7
|
var ICONS = {
|
|
8
8
|
success: /*#__PURE__*/React.createElement(Check3M, null),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IconAlertType } from './IconAlert.types';
|
|
1
|
+
import { type IconAlertType } from './IconAlert.types';
|
|
2
2
|
export declare const Message: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
3
3
|
export declare const IconAlertWrapper: import("styled-components").StyledComponent<"span", any, {
|
|
4
4
|
type: IconAlertType;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
|
-
import Icon, { Check3M,
|
|
2
|
+
import Icon, { Check3M, InfoFillM, WarningFillM } from '@synerise/ds-icon';
|
|
3
3
|
import * as S from './InlineAlert.styles';
|
|
4
4
|
var ICONS = {
|
|
5
5
|
success: /*#__PURE__*/React.createElement(Check3M, null),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { InlineAlertType } from './InlineAlert.types';
|
|
1
|
+
import { type InlineAlertType } from './InlineAlert.types';
|
|
2
2
|
export declare const Message: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
3
3
|
export declare const InlineAlertWrapper: import("styled-components").StyledComponent<"span", any, {
|
|
4
4
|
type: InlineAlertType;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Props } from './SectionMessage.types';
|
|
2
|
+
import { type Props } from './SectionMessage.types';
|
|
3
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,5 +1,5 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
|
-
import Icon, { CloseM,
|
|
2
|
+
import Icon, { Check3M, CloseM, HelpFillM, NotificationsReceiveM, UpdateDataM, UserUpM, WarningFillM } from '@synerise/ds-icon';
|
|
3
3
|
import * as S from './SectionMessage.styles';
|
|
4
4
|
var ICONS = {
|
|
5
5
|
positive: /*#__PURE__*/React.createElement(Check3M, null),
|
|
@@ -37,8 +37,12 @@ var SectionMessage = function SectionMessage(_ref) {
|
|
|
37
37
|
}, showMoreLabel), moreButtons, unorderedList && !moreButtons && unorderedList);
|
|
38
38
|
}, [message, description, showMoreLabel, onShowMore, moreButtons, withEmphasis, withLink, unorderedList]);
|
|
39
39
|
var renderIcon = useMemo(function () {
|
|
40
|
-
if (icon)
|
|
41
|
-
|
|
40
|
+
if (icon) {
|
|
41
|
+
return icon;
|
|
42
|
+
}
|
|
43
|
+
if (ICONS[type]) {
|
|
44
|
+
return ICONS[type];
|
|
45
|
+
}
|
|
42
46
|
return DEFAULT_ICON;
|
|
43
47
|
}, [icon, type]);
|
|
44
48
|
var handleClose = function handleClose() {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ColorType, CustomColorType } from './SectionMessage.types';
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import { type ColorType, type CustomColorType } from './SectionMessage.types';
|
|
3
3
|
export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
|
|
4
4
|
withLink?: React.ReactNode;
|
|
5
5
|
}, never>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { AlertProps } from 'antd/lib/alert';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { AlertType } from '../ColorSemantic/AlertSemanticColor.types';
|
|
1
|
+
import { type AlertProps } from 'antd/lib/alert';
|
|
2
|
+
import type React from 'react';
|
|
3
|
+
import { type AlertType } from '../ColorSemantic/AlertSemanticColor.types';
|
|
4
4
|
export type AlertTypes = Exclude<AlertType, 'informative'>;
|
|
5
5
|
export type CustomColorType = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
|
|
6
6
|
export type ColorType = 'grey' | 'red' | 'green' | 'yellow' | 'violet' | 'purple' | 'cyan';
|
package/dist/Toast/Toast.d.ts
CHANGED
package/dist/Toast/Toast.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useCallback, useMemo } from 'react';
|
|
2
|
-
import Icon, {
|
|
2
|
+
import Icon, { AngleDownS, Check3M, CloseM, HelpFillM, InfoFillM, WarningFillM } from '@synerise/ds-icon';
|
|
3
3
|
import * as S from './Toast.styles';
|
|
4
4
|
var ICONS = {
|
|
5
5
|
success: /*#__PURE__*/React.createElement(Check3M, null),
|
|
@@ -44,8 +44,12 @@ var Toast = function Toast(_ref) {
|
|
|
44
44
|
visible: expanded
|
|
45
45
|
}, expandedContent), button);
|
|
46
46
|
var renderIcon = useMemo(function () {
|
|
47
|
-
if (icon)
|
|
48
|
-
|
|
47
|
+
if (icon) {
|
|
48
|
+
return icon;
|
|
49
|
+
}
|
|
50
|
+
if (ICONS[type]) {
|
|
51
|
+
return ICONS[type];
|
|
52
|
+
}
|
|
49
53
|
return DEFAULT_ICON;
|
|
50
54
|
}, [icon, type]);
|
|
51
55
|
var expandContent = useCallback(function () {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Keyframes } from 'styled-components';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
1
|
import 'animate.css';
|
|
4
|
-
import {
|
|
2
|
+
import { type ReactNode } from 'react';
|
|
3
|
+
import { type Keyframes } from 'styled-components';
|
|
4
|
+
import { type ColorIconType, type ColorType, type CustomColorType } from './Toast.types';
|
|
5
5
|
export declare const closingAnimation: () => Keyframes;
|
|
6
6
|
export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
|
|
7
7
|
hasBottomMargin?: boolean | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import 'animate.css';
|
|
1
2
|
import styled, { keyframes } from 'styled-components';
|
|
2
|
-
import { hexToRgba } from '@synerise/ds-utils';
|
|
3
3
|
import { UnorderedList } from '@synerise/ds-unordered-list/dist/Unordered-list.styles';
|
|
4
|
-
import '
|
|
4
|
+
import { hexToRgba } from '@synerise/ds-utils';
|
|
5
5
|
var getWidth = function getWidth(hasClose, hasExpander) {
|
|
6
6
|
if (hasClose && hasExpander) {
|
|
7
7
|
return '72px';
|
|
@@ -80,7 +80,7 @@ export var IconCloseWrapper = styled.div.withConfig({
|
|
|
80
80
|
export var IconExpanderWrapper = styled.div.withConfig({
|
|
81
81
|
displayName: "Toaststyles__IconExpanderWrapper",
|
|
82
82
|
componentId: "sc-q5tn0-4"
|
|
83
|
-
})(["cursor:pointer;svg{fill:", ";transition:transform 0.1s linear;transform:rotateZ(", ");}"], function (props) {
|
|
83
|
+
})(["cursor:pointer;svg{fill:", ";transition:transform 0.1s linear;transform:rotateZ( ", " );}"], function (props) {
|
|
84
84
|
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
|
85
85
|
}, function (props) {
|
|
86
86
|
return props.expanded ? '180deg' : '0deg';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { type AlertProps } from 'antd/lib/alert';
|
|
2
|
+
import { type ReactElement, type ReactNode } from 'react';
|
|
3
3
|
export type ToastType = 'success' | 'warning' | 'negative' | 'informative' | 'neutral';
|
|
4
4
|
export type CustomColorType = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
|
|
5
5
|
export type ColorType = 'grey' | 'red' | 'green' | 'yellow' | 'blue';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import * as SectionMessageStyles from './SectionMessage/SectionMessage.styles';
|
|
2
|
-
import * as ToastStyles from './Toast/Toast.styles';
|
|
3
1
|
import * as MainAlertStyles from './Alert.styles';
|
|
4
2
|
import * as IconAlertStyles from './IconAlert/IconAlert.styles';
|
|
3
|
+
import * as SectionMessageStyles from './SectionMessage/SectionMessage.styles';
|
|
4
|
+
import * as ToastStyles from './Toast/Toast.styles';
|
|
5
5
|
export { default } from './Alert';
|
|
6
6
|
export declare const AlertStyles: {
|
|
7
7
|
Alert: typeof MainAlertStyles;
|