box-ui-elements 23.3.1-beta.1 → 23.4.0-beta.1
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/dist/explorer.js +1 -1
- package/dist/preview.js +1 -1
- package/dist/sharing.js +1 -1
- package/dist/sharing.js.LICENSE.txt +10 -0
- package/es/components/notification/Notification.js +17 -8
- package/es/components/notification/Notification.js.flow +15 -8
- package/es/components/notification/Notification.js.map +1 -1
- package/package.json +1 -1
- package/src/components/notification/Notification.js +15 -8
- package/src/components/notification/__tests__/Notification.test.js +21 -1
|
@@ -75,6 +75,16 @@ object-assign
|
|
|
75
75
|
* LICENSE file in the root directory of this source tree.
|
|
76
76
|
*/
|
|
77
77
|
|
|
78
|
+
/**
|
|
79
|
+
* @license React
|
|
80
|
+
* react-jsx-runtime.production.min.js
|
|
81
|
+
*
|
|
82
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
83
|
+
*
|
|
84
|
+
* This source code is licensed under the MIT license found in the
|
|
85
|
+
* LICENSE file in the root directory of this source tree.
|
|
86
|
+
*/
|
|
87
|
+
|
|
78
88
|
/**
|
|
79
89
|
* @license React
|
|
80
90
|
* react.production.min.js
|
|
@@ -4,6 +4,9 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
6
6
|
import classNames from 'classnames';
|
|
7
|
+
|
|
8
|
+
// $FlowFixMe
|
|
9
|
+
import { Information, Check, AlertTriangle, AlertBadge, XMark } from '@box/blueprint-web-assets/icons/Medium';
|
|
7
10
|
import InfoBadge16 from '../../icon/line/InfoBadge16';
|
|
8
11
|
import CircleCheck16 from '../../icon/line/CircleCheck16';
|
|
9
12
|
import TriangleAlert16 from '../../icon/line/TriangleAlert16';
|
|
@@ -26,10 +29,10 @@ const DURATION_TIMES = {
|
|
|
26
29
|
[DURATION_LONG]: 10000
|
|
27
30
|
};
|
|
28
31
|
const ICON_RENDERER = {
|
|
29
|
-
[TYPE_DEFAULT]: ()
|
|
30
|
-
[TYPE_ERROR]: ()
|
|
31
|
-
[TYPE_INFO]: ()
|
|
32
|
-
[TYPE_WARN]: ()
|
|
32
|
+
[TYPE_DEFAULT]: useV2Icons => useV2Icons ? /*#__PURE__*/React.createElement(Information, null) : /*#__PURE__*/React.createElement(InfoBadge16, null),
|
|
33
|
+
[TYPE_ERROR]: useV2Icons => useV2Icons ? /*#__PURE__*/React.createElement(AlertBadge, null) : /*#__PURE__*/React.createElement(XBadge16, null),
|
|
34
|
+
[TYPE_INFO]: useV2Icons => useV2Icons ? /*#__PURE__*/React.createElement(Check, null) : /*#__PURE__*/React.createElement(CircleCheck16, null),
|
|
35
|
+
[TYPE_WARN]: useV2Icons => useV2Icons ? /*#__PURE__*/React.createElement(AlertTriangle, null) : /*#__PURE__*/React.createElement(TriangleAlert16, null)
|
|
33
36
|
};
|
|
34
37
|
const messages = defineMessages({
|
|
35
38
|
clearNotificationButtonText: {
|
|
@@ -71,16 +74,19 @@ class Notification extends React.Component {
|
|
|
71
74
|
intl,
|
|
72
75
|
type,
|
|
73
76
|
overflow,
|
|
74
|
-
className
|
|
77
|
+
className,
|
|
78
|
+
useV2Icons
|
|
75
79
|
} = this.props;
|
|
76
80
|
const {
|
|
77
81
|
formatMessage
|
|
78
82
|
} = intl;
|
|
79
83
|
const classes = classNames('notification', type, overflow, className);
|
|
84
|
+
const iconRenderer = ICON_RENDERER[type](useV2Icons);
|
|
85
|
+
const iconColor = useV2Icons ? '#222' : '#fff';
|
|
80
86
|
return /*#__PURE__*/React.createElement("div", {
|
|
81
87
|
className: classes
|
|
82
|
-
}, /*#__PURE__*/React.cloneElement(
|
|
83
|
-
color:
|
|
88
|
+
}, /*#__PURE__*/React.cloneElement(iconRenderer, {
|
|
89
|
+
color: iconColor,
|
|
84
90
|
height: 20,
|
|
85
91
|
width: 20
|
|
86
92
|
}), contents, /*#__PURE__*/React.createElement("button", {
|
|
@@ -88,7 +94,10 @@ class Notification extends React.Component {
|
|
|
88
94
|
className: "close-btn",
|
|
89
95
|
onClick: this.onClose,
|
|
90
96
|
type: "button"
|
|
91
|
-
}, /*#__PURE__*/React.createElement(
|
|
97
|
+
}, useV2Icons ? /*#__PURE__*/React.createElement(XMark, {
|
|
98
|
+
height: 32,
|
|
99
|
+
width: 32
|
|
100
|
+
}) : /*#__PURE__*/React.createElement(X16, null)));
|
|
92
101
|
}
|
|
93
102
|
}
|
|
94
103
|
_defineProperty(Notification, "defaultProps", {
|
|
@@ -3,9 +3,13 @@ import * as React from 'react';
|
|
|
3
3
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
4
4
|
import classNames from 'classnames';
|
|
5
5
|
|
|
6
|
+
// $FlowFixMe
|
|
7
|
+
import { Information, Check, AlertTriangle, AlertBadge, XMark } from '@box/blueprint-web-assets/icons/Medium';
|
|
8
|
+
|
|
6
9
|
import InfoBadge16 from '../../icon/line/InfoBadge16';
|
|
7
10
|
import CircleCheck16 from '../../icon/line/CircleCheck16';
|
|
8
11
|
import TriangleAlert16 from '../../icon/line/TriangleAlert16';
|
|
12
|
+
|
|
9
13
|
import XBadge16 from '../../icon/line/XBadge16';
|
|
10
14
|
import X16 from '../../icon/fill/X16';
|
|
11
15
|
|
|
@@ -30,10 +34,10 @@ const DURATION_TIMES = {
|
|
|
30
34
|
};
|
|
31
35
|
|
|
32
36
|
const ICON_RENDERER: { [string]: Function } = {
|
|
33
|
-
[TYPE_DEFAULT]:
|
|
34
|
-
[TYPE_ERROR]:
|
|
35
|
-
[TYPE_INFO]:
|
|
36
|
-
[TYPE_WARN]:
|
|
37
|
+
[TYPE_DEFAULT]: useV2Icons => (useV2Icons ? <Information /> : <InfoBadge16 />),
|
|
38
|
+
[TYPE_ERROR]: useV2Icons => (useV2Icons ? <AlertBadge /> : <XBadge16 />),
|
|
39
|
+
[TYPE_INFO]: useV2Icons => (useV2Icons ? <Check /> : <CircleCheck16 />),
|
|
40
|
+
[TYPE_WARN]: useV2Icons => (useV2Icons ? <AlertTriangle /> : <TriangleAlert16 />),
|
|
37
41
|
};
|
|
38
42
|
|
|
39
43
|
const messages = defineMessages({
|
|
@@ -69,6 +73,7 @@ type Props = {
|
|
|
69
73
|
*/
|
|
70
74
|
type: NotificationType,
|
|
71
75
|
overflow?: 'wrap' | 'ellipsis',
|
|
76
|
+
useV2Icons?: boolean,
|
|
72
77
|
};
|
|
73
78
|
|
|
74
79
|
class Notification extends React.Component<Props> {
|
|
@@ -101,14 +106,16 @@ class Notification extends React.Component<Props> {
|
|
|
101
106
|
|
|
102
107
|
render() {
|
|
103
108
|
const contents = this.getChildren();
|
|
104
|
-
const { intl, type, overflow, className } = this.props;
|
|
109
|
+
const { intl, type, overflow, className, useV2Icons } = this.props;
|
|
105
110
|
const { formatMessage } = intl;
|
|
106
111
|
const classes = classNames('notification', type, overflow, className);
|
|
112
|
+
const iconRenderer = ICON_RENDERER[type](useV2Icons);
|
|
113
|
+
const iconColor = useV2Icons ? '#222' : '#fff';
|
|
107
114
|
|
|
108
115
|
return (
|
|
109
116
|
<div className={classes}>
|
|
110
|
-
{React.cloneElement(
|
|
111
|
-
color:
|
|
117
|
+
{React.cloneElement(iconRenderer, {
|
|
118
|
+
color: iconColor,
|
|
112
119
|
height: 20,
|
|
113
120
|
width: 20,
|
|
114
121
|
})}
|
|
@@ -119,7 +126,7 @@ class Notification extends React.Component<Props> {
|
|
|
119
126
|
onClick={this.onClose}
|
|
120
127
|
type="button"
|
|
121
128
|
>
|
|
122
|
-
<X16 />
|
|
129
|
+
{useV2Icons ? <XMark height={32} width={32} /> : <X16 />}
|
|
123
130
|
</button>
|
|
124
131
|
</div>
|
|
125
132
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","names":["React","defineMessages","injectIntl","classNames","InfoBadge16","CircleCheck16","TriangleAlert16","XBadge16","X16","DURATION_SHORT","DURATION_LONG","OVERFLOW_WRAP","TYPE_DEFAULT","TYPE_INFO","TYPE_WARN","TYPE_ERROR","DURATION_TIMES","ICON_RENDERER","createElement","messages","clearNotificationButtonText","Notification","Component","constructor","args","_defineProperty","event","onClose","props","timeout","clearTimeout","componentDidMount","duration","setTimeout","getChildren","children","render","contents","intl","type","overflow","className","formatMessage","classes","cloneElement","color","height","width","onClick"],"sources":["../../../src/components/notification/Notification.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\nimport classNames from 'classnames';\n\nimport InfoBadge16 from '../../icon/line/InfoBadge16';\nimport CircleCheck16 from '../../icon/line/CircleCheck16';\nimport TriangleAlert16 from '../../icon/line/TriangleAlert16';\nimport XBadge16 from '../../icon/line/XBadge16';\nimport X16 from '../../icon/fill/X16';\n\nimport type { NotificationType } from '../../common/types/core';\n\nimport './Notification.scss';\n\n// @NOTE: We can't import these constants from ./constant.js because `react-docgen`\n// can't handle imported variables appear in propTypes\n// see https://github.com/reactjs/react-docgen/issues/33\nconst DURATION_SHORT = 'short';\nconst DURATION_LONG = 'long';\nconst OVERFLOW_WRAP = 'wrap';\nconst TYPE_DEFAULT = 'default';\nconst TYPE_INFO = 'info';\nconst TYPE_WARN = 'warn';\nconst TYPE_ERROR = 'error';\n\nconst DURATION_TIMES = {\n [DURATION_SHORT]: 5000,\n [DURATION_LONG]: 10000,\n};\n\nconst ICON_RENDERER: { [string]: Function } = {\n [TYPE_DEFAULT]:
|
|
1
|
+
{"version":3,"file":"Notification.js","names":["React","defineMessages","injectIntl","classNames","Information","Check","AlertTriangle","AlertBadge","XMark","InfoBadge16","CircleCheck16","TriangleAlert16","XBadge16","X16","DURATION_SHORT","DURATION_LONG","OVERFLOW_WRAP","TYPE_DEFAULT","TYPE_INFO","TYPE_WARN","TYPE_ERROR","DURATION_TIMES","ICON_RENDERER","useV2Icons","createElement","messages","clearNotificationButtonText","Notification","Component","constructor","args","_defineProperty","event","onClose","props","timeout","clearTimeout","componentDidMount","duration","setTimeout","getChildren","children","render","contents","intl","type","overflow","className","formatMessage","classes","iconRenderer","iconColor","cloneElement","color","height","width","onClick"],"sources":["../../../src/components/notification/Notification.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { defineMessages, injectIntl } from 'react-intl';\nimport classNames from 'classnames';\n\n// $FlowFixMe\nimport { Information, Check, AlertTriangle, AlertBadge, XMark } from '@box/blueprint-web-assets/icons/Medium';\n\nimport InfoBadge16 from '../../icon/line/InfoBadge16';\nimport CircleCheck16 from '../../icon/line/CircleCheck16';\nimport TriangleAlert16 from '../../icon/line/TriangleAlert16';\n\nimport XBadge16 from '../../icon/line/XBadge16';\nimport X16 from '../../icon/fill/X16';\n\nimport type { NotificationType } from '../../common/types/core';\n\nimport './Notification.scss';\n\n// @NOTE: We can't import these constants from ./constant.js because `react-docgen`\n// can't handle imported variables appear in propTypes\n// see https://github.com/reactjs/react-docgen/issues/33\nconst DURATION_SHORT = 'short';\nconst DURATION_LONG = 'long';\nconst OVERFLOW_WRAP = 'wrap';\nconst TYPE_DEFAULT = 'default';\nconst TYPE_INFO = 'info';\nconst TYPE_WARN = 'warn';\nconst TYPE_ERROR = 'error';\n\nconst DURATION_TIMES = {\n [DURATION_SHORT]: 5000,\n [DURATION_LONG]: 10000,\n};\n\nconst ICON_RENDERER: { [string]: Function } = {\n [TYPE_DEFAULT]: useV2Icons => (useV2Icons ? <Information /> : <InfoBadge16 />),\n [TYPE_ERROR]: useV2Icons => (useV2Icons ? <AlertBadge /> : <XBadge16 />),\n [TYPE_INFO]: useV2Icons => (useV2Icons ? <Check /> : <CircleCheck16 />),\n [TYPE_WARN]: useV2Icons => (useV2Icons ? <AlertTriangle /> : <TriangleAlert16 />),\n};\n\nconst messages = defineMessages({\n clearNotificationButtonText: {\n defaultMessage: 'Clear Notification',\n description: 'Button to clear notification',\n id: 'boxui.notification.clearNotification',\n },\n});\n\ntype Props = {\n /**\n * The contents of the `Notification`.\n * - Notification text must be wrapped in a `<span />` tag.\n * - Notification buttons must be the `<Button />` component.\n */\n children: React.Node,\n className?: string,\n duration?: 'short' | 'long',\n /** `duration`: When set, dictates how long the notification will exist before calling `onClose`.\n * If unset, the notification will not automatically call `onClose`.\n * - `short`: 5s\n * - `long`: 10s */\n intl: Object,\n /** Function that gets executed when close button is clicked or when duration expires. */\n onClose?: Function,\n /**\n * Determines notification colors\n * - `default`: black\n * - `info`: green\n * - `warn`: yellow\n * - `error`: red\n */\n type: NotificationType,\n overflow?: 'wrap' | 'ellipsis',\n useV2Icons?: boolean,\n};\n\nclass Notification extends React.Component<Props> {\n static defaultProps = {\n overflow: OVERFLOW_WRAP,\n type: TYPE_DEFAULT,\n };\n\n componentDidMount() {\n const { duration, onClose } = this.props;\n this.timeout = duration && onClose ? setTimeout(onClose, DURATION_TIMES[duration]) : null;\n }\n\n onClose = event => {\n const { onClose } = this.props;\n if (this.timeout) {\n clearTimeout(this.timeout);\n }\n if (onClose) {\n onClose(event);\n }\n };\n\n getChildren() {\n const { children } = this.props;\n return typeof children === 'string' ? <span>{children}</span> : children;\n }\n\n timeout: TimeoutID | null;\n\n render() {\n const contents = this.getChildren();\n const { intl, type, overflow, className, useV2Icons } = this.props;\n const { formatMessage } = intl;\n const classes = classNames('notification', type, overflow, className);\n const iconRenderer = ICON_RENDERER[type](useV2Icons);\n const iconColor = useV2Icons ? '#222' : '#fff';\n\n return (\n <div className={classes}>\n {React.cloneElement(iconRenderer, {\n color: iconColor,\n height: 20,\n width: 20,\n })}\n {contents}\n <button\n aria-label={formatMessage(messages.clearNotificationButtonText)}\n className=\"close-btn\"\n onClick={this.onClose}\n type=\"button\"\n >\n {useV2Icons ? <XMark height={32} width={32} /> : <X16 />}\n </button>\n </div>\n );\n }\n}\n\nexport default injectIntl(Notification);\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -3,9 +3,13 @@ import * as React from 'react';
|
|
|
3
3
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
4
4
|
import classNames from 'classnames';
|
|
5
5
|
|
|
6
|
+
// $FlowFixMe
|
|
7
|
+
import { Information, Check, AlertTriangle, AlertBadge, XMark } from '@box/blueprint-web-assets/icons/Medium';
|
|
8
|
+
|
|
6
9
|
import InfoBadge16 from '../../icon/line/InfoBadge16';
|
|
7
10
|
import CircleCheck16 from '../../icon/line/CircleCheck16';
|
|
8
11
|
import TriangleAlert16 from '../../icon/line/TriangleAlert16';
|
|
12
|
+
|
|
9
13
|
import XBadge16 from '../../icon/line/XBadge16';
|
|
10
14
|
import X16 from '../../icon/fill/X16';
|
|
11
15
|
|
|
@@ -30,10 +34,10 @@ const DURATION_TIMES = {
|
|
|
30
34
|
};
|
|
31
35
|
|
|
32
36
|
const ICON_RENDERER: { [string]: Function } = {
|
|
33
|
-
[TYPE_DEFAULT]:
|
|
34
|
-
[TYPE_ERROR]:
|
|
35
|
-
[TYPE_INFO]:
|
|
36
|
-
[TYPE_WARN]:
|
|
37
|
+
[TYPE_DEFAULT]: useV2Icons => (useV2Icons ? <Information /> : <InfoBadge16 />),
|
|
38
|
+
[TYPE_ERROR]: useV2Icons => (useV2Icons ? <AlertBadge /> : <XBadge16 />),
|
|
39
|
+
[TYPE_INFO]: useV2Icons => (useV2Icons ? <Check /> : <CircleCheck16 />),
|
|
40
|
+
[TYPE_WARN]: useV2Icons => (useV2Icons ? <AlertTriangle /> : <TriangleAlert16 />),
|
|
37
41
|
};
|
|
38
42
|
|
|
39
43
|
const messages = defineMessages({
|
|
@@ -69,6 +73,7 @@ type Props = {
|
|
|
69
73
|
*/
|
|
70
74
|
type: NotificationType,
|
|
71
75
|
overflow?: 'wrap' | 'ellipsis',
|
|
76
|
+
useV2Icons?: boolean,
|
|
72
77
|
};
|
|
73
78
|
|
|
74
79
|
class Notification extends React.Component<Props> {
|
|
@@ -101,14 +106,16 @@ class Notification extends React.Component<Props> {
|
|
|
101
106
|
|
|
102
107
|
render() {
|
|
103
108
|
const contents = this.getChildren();
|
|
104
|
-
const { intl, type, overflow, className } = this.props;
|
|
109
|
+
const { intl, type, overflow, className, useV2Icons } = this.props;
|
|
105
110
|
const { formatMessage } = intl;
|
|
106
111
|
const classes = classNames('notification', type, overflow, className);
|
|
112
|
+
const iconRenderer = ICON_RENDERER[type](useV2Icons);
|
|
113
|
+
const iconColor = useV2Icons ? '#222' : '#fff';
|
|
107
114
|
|
|
108
115
|
return (
|
|
109
116
|
<div className={classes}>
|
|
110
|
-
{React.cloneElement(
|
|
111
|
-
color:
|
|
117
|
+
{React.cloneElement(iconRenderer, {
|
|
118
|
+
color: iconColor,
|
|
112
119
|
height: 20,
|
|
113
120
|
width: 20,
|
|
114
121
|
})}
|
|
@@ -119,7 +126,7 @@ class Notification extends React.Component<Props> {
|
|
|
119
126
|
onClick={this.onClose}
|
|
120
127
|
type="button"
|
|
121
128
|
>
|
|
122
|
-
<X16 />
|
|
129
|
+
{useV2Icons ? <XMark height={32} width={32} /> : <X16 />}
|
|
123
130
|
</button>
|
|
124
131
|
</div>
|
|
125
132
|
);
|
|
@@ -46,7 +46,7 @@ describe('components/notification/Notification', () => {
|
|
|
46
46
|
expect(component.find('div.notification').hasClass(type)).toBe(true);
|
|
47
47
|
});
|
|
48
48
|
|
|
49
|
-
test('should render
|
|
49
|
+
test('should render local icons per notification type', () => {
|
|
50
50
|
const component = mount(<Notification type={type}>test</Notification>);
|
|
51
51
|
const infoBadge16Count = type === TYPE_DEFAULT ? 1 : 0;
|
|
52
52
|
const CircleCheck16Count = type === TYPE_INFO ? 1 : 0;
|
|
@@ -57,6 +57,26 @@ describe('components/notification/Notification', () => {
|
|
|
57
57
|
expect(component.find('XBadge16').length).toBe(XBadge16Count);
|
|
58
58
|
expect(component.find('CircleCheck16').length).toBe(CircleCheck16Count);
|
|
59
59
|
expect(component.find('TriangleAlert16').length).toBe(TriangleAlert16Count);
|
|
60
|
+
|
|
61
|
+
// Does not render v2 icons
|
|
62
|
+
expect(component.find(`svg[role="img"]`).length).toBe(0);
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
test('should render v2 icons when useV2Icons is true', () => {
|
|
66
|
+
const component = mount(
|
|
67
|
+
<Notification type={type} useV2Icons={true}>
|
|
68
|
+
test
|
|
69
|
+
</Notification>,
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
// Type icon and Close button
|
|
73
|
+
expect(component.find(`svg[role="img"]`).length).toBe(2);
|
|
74
|
+
|
|
75
|
+
// Does not render local icons
|
|
76
|
+
expect(component.find('InfoBadge16').length).toBe(0);
|
|
77
|
+
expect(component.find('XBadge16').length).toBe(0);
|
|
78
|
+
expect(component.find('CircleCheck16').length).toBe(0);
|
|
79
|
+
expect(component.find('TriangleAlert16').length).toBe(0);
|
|
60
80
|
});
|
|
61
81
|
});
|
|
62
82
|
|