@synerise/ds-alert 0.3.17 → 0.3.21
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 +37 -0
- package/README.md +13 -1
- package/dist/IconAlert/IconAlert.d.ts +4 -0
- package/dist/IconAlert/IconAlert.js +42 -0
- package/dist/IconAlert/IconAlert.styles.d.ts +9 -0
- package/dist/IconAlert/IconAlert.styles.js +53 -0
- package/dist/IconAlert/IconAlert.types.d.ts +11 -0
- package/dist/IconAlert/IconAlert.types.js +0 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,43 @@
|
|
|
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.3.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.20...@synerise/ds-alert@0.3.21) (2021-09-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **alert:** fix styles ([a24c6a3](https://github.com/Synerise/synerise-design/commit/a24c6a353f6209205794b57ca115f5ebd3c605c1))
|
|
12
|
+
* **alert:** fix styles ([ddce48c](https://github.com/Synerise/synerise-design/commit/ddce48c5e36f9beb2078a123364990a2a6b9e741))
|
|
13
|
+
* **alert:** two new components IconAlert and InlineAlert ([7e28f50](https://github.com/Synerise/synerise-design/commit/7e28f50cb5b5d5c35d10b7c196d3cb36b112df15))
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
## [0.3.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.19...@synerise/ds-alert@0.3.20) (2021-09-09)
|
|
20
|
+
|
|
21
|
+
**Note:** Version bump only for package @synerise/ds-alert
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
## [0.3.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.18...@synerise/ds-alert@0.3.19) (2021-09-09)
|
|
28
|
+
|
|
29
|
+
**Note:** Version bump only for package @synerise/ds-alert
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
## [0.3.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.17...@synerise/ds-alert@0.3.18) (2021-09-03)
|
|
36
|
+
|
|
37
|
+
**Note:** Version bump only for package @synerise/ds-alert
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
6
43
|
## [0.3.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.16...@synerise/ds-alert@0.3.17) (2021-09-01)
|
|
7
44
|
|
|
8
45
|
**Note:** Version bump only for package @synerise/ds-alert
|
package/README.md
CHANGED
|
@@ -82,4 +82,16 @@ import Alert from '@synerise/ds-alert'
|
|
|
82
82
|
| --- | --- | --- | --- |
|
|
83
83
|
| type | Type of AlertSemanticColor, options: `notice`, `negative`, `positive`,`informative`,`neutral`,`supply`,`service`,`entity` | `string` | `positive` |
|
|
84
84
|
| color | type of colors,options: `red`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`blue` | `string` | - |
|
|
85
|
-
| mode | type of modes, options: `background`, `background-outline`,`outline`,`shadow` | `string` | - |
|
|
85
|
+
| mode | type of modes, options: `background`, `background-outline`,`outline`,`shadow` | `string` | - |
|
|
86
|
+
|
|
87
|
+
### Alert.IconAlert
|
|
88
|
+
|
|
89
|
+
| Property | Description | Type | Default |
|
|
90
|
+
| ---- | --- | --- | --- |
|
|
91
|
+
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | `string` | `warning` |
|
|
92
|
+
| message | Message of Icon Alert | `React.ReactNode` | - |
|
|
93
|
+
| disabled | prop to set disabled icon | `boolean` | - |
|
|
94
|
+
| withEmphasis | prop to show bolder text | `React.ReactNode` | - |
|
|
95
|
+
| withLink | prop to show highlited text | `React.ReactNode` | - |
|
|
96
|
+
| iconAlert | prop to set custom icon | `boolean` | - |
|
|
97
|
+
| hoverButton | prop to set hover state button | `boolean` | - |
|
|
@@ -0,0 +1,42 @@
|
|
|
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
|
+
|
|
3
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
4
|
+
|
|
5
|
+
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; }
|
|
6
|
+
|
|
7
|
+
import { Check2M, WarningFillM, InfoM } from '@synerise/ds-icon/dist/icons';
|
|
8
|
+
import * as React from 'react';
|
|
9
|
+
import Icon from '@synerise/ds-icon';
|
|
10
|
+
import * as S from './IconAlert.styles';
|
|
11
|
+
var ICONS = {
|
|
12
|
+
success: React.createElement(Check2M, null),
|
|
13
|
+
alert: React.createElement(WarningFillM, null),
|
|
14
|
+
warning: React.createElement(WarningFillM, null),
|
|
15
|
+
info: React.createElement(InfoM, null)
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
var IconAlert = function IconAlert(_ref) {
|
|
19
|
+
var _ref$type = _ref.type,
|
|
20
|
+
type = _ref$type === void 0 ? 'warning' : _ref$type,
|
|
21
|
+
iconAlert = _ref.iconAlert,
|
|
22
|
+
message = _ref.message,
|
|
23
|
+
withLink = _ref.withLink,
|
|
24
|
+
withEmphasis = _ref.withEmphasis,
|
|
25
|
+
hoverButton = _ref.hoverButton,
|
|
26
|
+
disabled = _ref.disabled,
|
|
27
|
+
rest = _objectWithoutProperties(_ref, ["type", "iconAlert", "message", "withLink", "withEmphasis", "hoverButton", "disabled"]);
|
|
28
|
+
|
|
29
|
+
var icon = React.useMemo(function () {
|
|
30
|
+
return ICONS[type];
|
|
31
|
+
}, [type]);
|
|
32
|
+
return React.createElement(S.IconAlertWrapper, _extends({}, rest, {
|
|
33
|
+
type: type,
|
|
34
|
+
disabled: disabled,
|
|
35
|
+
hoverButton: hoverButton,
|
|
36
|
+
className: "ds-inline-alert"
|
|
37
|
+
}), iconAlert && React.createElement(Icon, {
|
|
38
|
+
component: icon
|
|
39
|
+
}), message && React.createElement(S.Message, null, message, withLink && React.createElement(S.LinkWrapper, null, withLink), withEmphasis && !withLink && React.createElement(S.EmphasisWrapper, null, withEmphasis)));
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export default IconAlert;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { IconAlertType } from './IconAlert.types';
|
|
2
|
+
export declare const Message: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
3
|
+
export declare const IconAlertWrapper: import("styled-components").StyledComponent<"span", any, {
|
|
4
|
+
type: IconAlertType;
|
|
5
|
+
hoverButton?: boolean | undefined;
|
|
6
|
+
disabled?: boolean | undefined;
|
|
7
|
+
}, never>;
|
|
8
|
+
export declare const EmphasisWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
9
|
+
export declare const LinkWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
var COLORS = {
|
|
3
|
+
success: 'green-600',
|
|
4
|
+
warning: 'yellow-600',
|
|
5
|
+
alert: 'red-600',
|
|
6
|
+
info: 'grey-600'
|
|
7
|
+
};
|
|
8
|
+
var COLORS_TEXT = {
|
|
9
|
+
success: 'green-700',
|
|
10
|
+
warning: 'yellow-700',
|
|
11
|
+
alert: 'red-700',
|
|
12
|
+
info: 'grey-700'
|
|
13
|
+
};
|
|
14
|
+
var COLORS_HOVER = {
|
|
15
|
+
success: 'green-700',
|
|
16
|
+
warning: 'yellow-700',
|
|
17
|
+
alert: 'red-700',
|
|
18
|
+
info: 'grey-700'
|
|
19
|
+
};
|
|
20
|
+
export var Message = styled.span.withConfig({
|
|
21
|
+
displayName: "IconAlertstyles__Message",
|
|
22
|
+
componentId: "sc-1ty06sp-0"
|
|
23
|
+
})(["display:flex;font-size:13px;line-height:18px;font-weight:400;color:inherit;margin-left:4px;"]);
|
|
24
|
+
export var IconAlertWrapper = styled.span.withConfig({
|
|
25
|
+
displayName: "IconAlertstyles__IconAlertWrapper",
|
|
26
|
+
componentId: "sc-1ty06sp-1"
|
|
27
|
+
})(["display:flex;align-items:center;justify-content:flex-start;flex-direction:row;&:hover{cursor:", ";svg{color:", ";fill:", ";}}&:active{svg{color:", ";fill:", ";}}svg{color:", ";fill:", ";}", ";", "{color:", ";}"], function (props) {
|
|
28
|
+
return props.hoverButton ? 'pointer' : 'auto';
|
|
29
|
+
}, function (props) {
|
|
30
|
+
return props.hoverButton ? props.theme.palette[COLORS_HOVER[props.type]] : props.theme.palette[COLORS[props.type]];
|
|
31
|
+
}, function (props) {
|
|
32
|
+
return props.hoverButton ? props.theme.palette[COLORS_HOVER[props.type]] : props.theme.palette[COLORS[props.type]];
|
|
33
|
+
}, function (props) {
|
|
34
|
+
return props.theme.palette[COLORS[props.type]];
|
|
35
|
+
}, function (props) {
|
|
36
|
+
return props.theme.palette[COLORS[props.type]];
|
|
37
|
+
}, function (props) {
|
|
38
|
+
return props.theme.palette[COLORS[props.type]];
|
|
39
|
+
}, function (props) {
|
|
40
|
+
return props.theme.palette[COLORS[props.type]];
|
|
41
|
+
}, function (props) {
|
|
42
|
+
return !!props.disabled && css(["pointer-events:none;opacity:0.4;"]);
|
|
43
|
+
}, Message, function (props) {
|
|
44
|
+
return props.theme.palette[COLORS_TEXT[props.type]];
|
|
45
|
+
});
|
|
46
|
+
export var EmphasisWrapper = styled.span.withConfig({
|
|
47
|
+
displayName: "IconAlertstyles__EmphasisWrapper",
|
|
48
|
+
componentId: "sc-1ty06sp-2"
|
|
49
|
+
})(["display:flex;padding-bottom:1px;font-size:13px;line-height:1.39;padding-left:3px;font-weight:500;color:inherit;"]);
|
|
50
|
+
export var LinkWrapper = styled.span.withConfig({
|
|
51
|
+
displayName: "IconAlertstyles__LinkWrapper",
|
|
52
|
+
componentId: "sc-1ty06sp-3"
|
|
53
|
+
})(["display:flex;font-size:13px;line-height:1.39;font-weight:400;margin-left:3px;color:inherit;text-decoration:underline;cursor:pointer;"]);
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export declare type IconAlertType = 'success' | 'alert' | 'warning' | 'info';
|
|
3
|
+
export declare type IconAlertProps = {
|
|
4
|
+
type: IconAlertType;
|
|
5
|
+
message: string | React.ReactNode;
|
|
6
|
+
withEmphasis?: React.ReactNode;
|
|
7
|
+
withLink?: React.ReactNode;
|
|
8
|
+
iconAlert?: boolean;
|
|
9
|
+
hoverButton?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
};
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-alert",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.21",
|
|
4
4
|
"description": "Alert UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -32,17 +32,17 @@
|
|
|
32
32
|
],
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-button": "^0.13.
|
|
36
|
-
"@synerise/ds-icon": "^0.
|
|
37
|
-
"@synerise/ds-typography": "^0.11.
|
|
38
|
-
"@synerise/ds-unordered-list": "^0.1.
|
|
35
|
+
"@synerise/ds-button": "^0.13.66",
|
|
36
|
+
"@synerise/ds-icon": "^0.45.0",
|
|
37
|
+
"@synerise/ds-typography": "^0.11.9",
|
|
38
|
+
"@synerise/ds-unordered-list": "^0.1.44"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@synerise/ds-core": "*",
|
|
42
42
|
"react": ">=16.9.0 < 17.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@synerise/ds-utils": "^0.
|
|
45
|
+
"@synerise/ds-utils": "^0.18.1"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "a9b2577e3c7e6b51625ab3ecca84600819ad0eeb"
|
|
48
48
|
}
|