@automattic/jetpack-components 0.43.4 → 0.44.0
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
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [0.44.0] - 2023-10-19
|
|
6
|
+
### Added
|
|
7
|
+
- Add a `ProgressBar` component. [#33054]
|
|
8
|
+
- Social: Add the Nextdoor connection toggle [#33663]
|
|
9
|
+
|
|
10
|
+
### Changed
|
|
11
|
+
- Updated package dependencies. [#33687]
|
|
12
|
+
|
|
5
13
|
## [0.43.4] - 2023-10-17
|
|
6
14
|
### Changed
|
|
7
15
|
- Updated package dependencies. [#33646]
|
|
@@ -848,6 +856,7 @@
|
|
|
848
856
|
### Changed
|
|
849
857
|
- Update node version requirement to 14.16.1
|
|
850
858
|
|
|
859
|
+
[0.44.0]: https://github.com/Automattic/jetpack-components/compare/0.43.4...0.44.0
|
|
851
860
|
[0.43.4]: https://github.com/Automattic/jetpack-components/compare/0.43.3...0.43.4
|
|
852
861
|
[0.43.3]: https://github.com/Automattic/jetpack-components/compare/0.43.2...0.43.3
|
|
853
862
|
[0.43.2]: https://github.com/Automattic/jetpack-components/compare/0.43.1...0.43.2
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import classnames from 'classnames';
|
|
5
|
+
/**
|
|
6
|
+
* Internal dependencies
|
|
7
|
+
*/
|
|
8
|
+
import styles from './style.module.scss';
|
|
9
|
+
import { ProgressBarProps } from './types';
|
|
10
|
+
import type React from 'react';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Progress Bar component
|
|
14
|
+
*
|
|
15
|
+
* @param {ProgressBarProps} props - Component props.
|
|
16
|
+
* @returns {React.ReactNode} - ProgressBar react component.
|
|
17
|
+
*/
|
|
18
|
+
const ProgressBar: React.FC< ProgressBarProps > = ( {
|
|
19
|
+
className,
|
|
20
|
+
progressClassName,
|
|
21
|
+
progress,
|
|
22
|
+
size = 'normal',
|
|
23
|
+
} ) => {
|
|
24
|
+
if ( progress == null ) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const normalizedProgress = Math.max( Math.min( progress, 1 ), 0 );
|
|
29
|
+
|
|
30
|
+
const style = {
|
|
31
|
+
width: `${ normalizedProgress * 100 }%`,
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<div
|
|
36
|
+
className={ classnames( className, styles.wrapper, { [ styles.small ]: size === 'small' } ) }
|
|
37
|
+
>
|
|
38
|
+
<div className={ classnames( progressClassName, styles.progress ) } style={ style }></div>
|
|
39
|
+
</div>
|
|
40
|
+
);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export default ProgressBar;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.wrapper {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 12px;
|
|
4
|
+
background-color: var(--jp-gray-5);
|
|
5
|
+
border-radius: calc( var( --spacing-base ) * 3 );
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
|
|
8
|
+
&.small {
|
|
9
|
+
height: 3px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.progress {
|
|
13
|
+
height: 100%;
|
|
14
|
+
border-radius: calc( var( --spacing-base ) * 3 );
|
|
15
|
+
background-color: var(--jp-green-50 );
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export type ProgressBarProps = {
|
|
2
|
+
/**
|
|
3
|
+
* Optional classname to apply to the root element.
|
|
4
|
+
*/
|
|
5
|
+
className?: string;
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Optional classname to apply to the progress element.
|
|
9
|
+
*/
|
|
10
|
+
progressClassName?: string;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* The current progress percentage, from 0 to 1.
|
|
14
|
+
*/
|
|
15
|
+
progress: number;
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* The progress bar height.
|
|
19
|
+
*/
|
|
20
|
+
size?: 'normal' | 'small';
|
|
21
|
+
};
|
package/index.ts
CHANGED
|
@@ -69,4 +69,5 @@ export { default as Status } from './components/status';
|
|
|
69
69
|
export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar';
|
|
70
70
|
export { default as ActionPopover } from './components/action-popover';
|
|
71
71
|
export { default as ZendeskChat } from './components/zendesk-chat';
|
|
72
|
+
export { default as ProgressBar } from './components/progress-bar';
|
|
72
73
|
export { getUserLocale, cleanLocale } from './lib/locale';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.44.0",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@automattic/format-currency": "1.0.1",
|
|
18
|
-
"@automattic/jetpack-boost-score-api": "^0.1.
|
|
18
|
+
"@automattic/jetpack-boost-score-api": "^0.1.14",
|
|
19
19
|
"@babel/runtime": "^7",
|
|
20
|
-
"@wordpress/browserslist-config": "5.
|
|
21
|
-
"@wordpress/components": "25.
|
|
22
|
-
"@wordpress/compose": "6.
|
|
23
|
-
"@wordpress/data": "9.
|
|
24
|
-
"@wordpress/date": "4.
|
|
25
|
-
"@wordpress/element": "5.
|
|
26
|
-
"@wordpress/i18n": "4.
|
|
27
|
-
"@wordpress/icons": "9.
|
|
20
|
+
"@wordpress/browserslist-config": "5.27.0",
|
|
21
|
+
"@wordpress/components": "25.10.0",
|
|
22
|
+
"@wordpress/compose": "6.21.0",
|
|
23
|
+
"@wordpress/data": "9.14.0",
|
|
24
|
+
"@wordpress/date": "4.44.0",
|
|
25
|
+
"@wordpress/element": "5.21.0",
|
|
26
|
+
"@wordpress/i18n": "4.44.0",
|
|
27
|
+
"@wordpress/icons": "9.35.0",
|
|
28
28
|
"classnames": "2.3.2",
|
|
29
29
|
"prop-types": "^15.7.2",
|
|
30
30
|
"qrcode.react": "3.1.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"uplot-react": "1.1.4"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@automattic/jetpack-base-styles": "^0.6.
|
|
37
|
+
"@automattic/jetpack-base-styles": "^0.6.11",
|
|
38
38
|
"@babel/core": "7.23.2",
|
|
39
39
|
"@babel/preset-react": "7.22.15",
|
|
40
40
|
"@jest/globals": "29.4.3",
|