@automattic/vip-design-system 0.20.0 → 0.20.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.
Files changed (4) hide show
  1. package/.github/workflows/stale.yml +15 -0
  2. package/build/system/Notice/Notice.js +7 -3
  3. package/package.json +1 -1
  4. package/src/system/Notice/Notice.js +54 -53
package/.github/workflows/stale.yml ADDED
@@ -0,0 +1,15 @@
1
+ name: Stale monitor
2
+
3
+ on:
4
+ schedule:
5
+ - cron: '0 0 * * *'
6
+
7
+ jobs:
8
+ stale:
9
+ name: Stale
10
+ runs-on: ubuntu-latest
11
+ permissions:
12
+ issues: write
13
+ pull-requests: write
14
+ steps:
15
+ - uses: Automattic/vip-actions/stale@trunk
package/build/system/Notice/Notice.js CHANGED
@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
9
9
 
10
10
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
11
 
12
+ var _react = _interopRequireDefault(require("react"));
13
+
12
14
  var _classnames = _interopRequireDefault(require("classnames"));
13
15
 
14
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -54,7 +56,7 @@ NoticeIcon.propTypes = {
54
56
  variant: _propTypes["default"].string
55
57
  };
56
58
 
57
- var Notice = function Notice(_ref2) {
59
+ var Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
58
60
  var _ref2$variant = _ref2.variant,
59
61
  variant = _ref2$variant === void 0 ? 'warning' : _ref2$variant,
60
62
  _ref2$inline = _ref2.inline,
@@ -94,7 +96,8 @@ var Notice = function Notice(_ref2) {
94
96
  border: 'none'
95
97
  }
96
98
  }, sx),
97
- className: (0, _classnames["default"])('vip-notice-component', className)
99
+ className: (0, _classnames["default"])('vip-notice-component', className),
100
+ ref: forwardRef
98
101
  }, props, {
99
102
  children: (0, _jsxRuntime.jsxs)(_.Flex, {
100
103
  sx: {
@@ -124,9 +127,10 @@ var Notice = function Notice(_ref2) {
124
127
  })]
125
128
  })
126
129
  }));
127
- };
130
+ });
128
131
 
129
132
  exports.Notice = Notice;
133
+ Notice.displayName = 'Notice';
130
134
  Notice.propTypes = {
131
135
  children: _propTypes["default"].node,
132
136
  color: _propTypes["default"].string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "0.20.0",
3
+ "version": "0.20.1",
4
4
  "main": "build/system/index.js",
5
5
  "scripts": {
6
6
  "build-storybook": "build-storybook",
package/src/system/Notice/Notice.js CHANGED
@@ -3,6 +3,7 @@
3
3
  /**
4
4
  * External dependencies
5
5
  */
6
+ import React from 'react';
6
7
  import classNames from 'classnames';
7
8
  import PropTypes from 'prop-types';
8
9
  import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
@@ -35,71 +36,71 @@ NoticeIcon.propTypes = {
35
36
  variant: PropTypes.string,
36
37
  };
37
38
 
38
- const Notice = ( {
39
- variant = 'warning',
40
- inline = false,
41
- children,
42
- title,
43
- sx = {},
44
- className = null,
45
- ...props
46
- } ) => {
47
- let color = 'yellow';
39
+ const Notice = React.forwardRef(
40
+ (
41
+ { variant = 'warning', inline = false, children, title, sx = {}, className = null, ...props },
42
+ forwardRef
43
+ ) => {
44
+ let color = 'yellow';
48
45
 
49
- switch ( variant ) {
50
- case 'info':
51
- color = 'blue';
52
- break;
53
- case 'alert':
54
- color = 'red';
55
- break;
56
- case 'success':
57
- color = 'green';
58
- break;
59
- }
46
+ switch ( variant ) {
47
+ case 'info':
48
+ color = 'blue';
49
+ break;
50
+ case 'alert':
51
+ color = 'red';
52
+ break;
53
+ case 'success':
54
+ color = 'green';
55
+ break;
56
+ }
60
57
 
61
- return (
62
- <Card
63
- sx={ {
64
- boxShadow: 'none',
65
- borderRadius: 2,
66
- bg: inline ? 'transparent' : `${ color }.10`,
67
- p: inline ? 0 : 3,
68
- color: `${ color }.90`,
69
- a: {
70
- color: `${ color }.90`,
71
- border: 'none',
72
- },
73
- ...sx,
74
- } }
75
- className={ classNames( 'vip-notice-component', className ) }
76
- { ...props }
77
- >
78
- <Flex
58
+ return (
59
+ <Card
79
60
  sx={ {
80
- alignItems: 'center',
61
+ boxShadow: 'none',
62
+ borderRadius: 2,
63
+ bg: inline ? 'transparent' : `${ color }.10`,
64
+ p: inline ? 0 : 3,
65
+ color: `${ color }.90`,
66
+ a: {
67
+ color: `${ color }.90`,
68
+ border: 'none',
69
+ },
70
+ ...sx,
81
71
  } }
72
+ className={ classNames( 'vip-notice-component', className ) }
73
+ ref={ forwardRef }
74
+ { ...props }
82
75
  >
83
76
  <Flex
84
77
  sx={ {
85
78
  alignItems: 'center',
86
79
  } }
87
80
  >
88
- <NoticeIcon color={ `${ color }.200` } variant={ variant } />
81
+ <Flex
82
+ sx={ {
83
+ alignItems: 'center',
84
+ } }
85
+ >
86
+ <NoticeIcon color={ `${ color }.200` } variant={ variant } />
87
+ </Flex>
88
+
89
+ <Box sx={ { ml: 3 } }>
90
+ { title && (
91
+ <Heading variant="h4" as="p" sx={ { color: `${ color }.100`, mb: 0 } }>
92
+ { title }
93
+ </Heading>
94
+ ) }
95
+ { children }
96
+ </Box>
89
97
  </Flex>
98
+ </Card>
99
+ );
100
+ }
101
+ );
90
102
 
91
- <Box sx={ { ml: 3 } }>
92
- { title && (
93
- <Heading variant="h4" as="p" sx={ { color: `${ color }.100`, mb: 0 } }>
94
- { title }
95
- </Heading>
96
- ) }
97
- { children }
98
- </Box>
99
- </Flex>
100
- </Card>
101
- );
102
- };
103
+ Notice.displayName = 'Notice';
103
104
 
104
105
  Notice.propTypes = {
105
106
  children: PropTypes.node,