@automattic/jetpack-components 0.43.4 → 0.44.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.44.1] - 2023-10-23
+### Changed
+- Use pointer-events: None on arrow icon so its click behavior falls back to the container/underlying component. [#33733]
+
+## [0.44.0] - 2023-10-19
+### Added
+- Add a `ProgressBar` component. [#33054]
+- Social: Add the Nextdoor connection toggle [#33663]
+
+### Changed
+- Updated package dependencies. [#33687]
+
 ## [0.43.4] - 2023-10-17
 ### Changed
 - Updated package dependencies. [#33646]
@@ -848,6 +860,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.44.1]: https://github.com/Automattic/jetpack-components/compare/0.44.0...0.44.1
+[0.44.0]: https://github.com/Automattic/jetpack-components/compare/0.43.4...0.44.0
 [0.43.4]: https://github.com/Automattic/jetpack-components/compare/0.43.3...0.43.4
 [0.43.3]: https://github.com/Automattic/jetpack-components/compare/0.43.2...0.43.3
 [0.43.2]: https://github.com/Automattic/jetpack-components/compare/0.43.1...0.43.2

package/components/contextual-upgrade-trigger/style.module.scss

@@ -57,6 +57,7 @@
 .icon {
 	fill: var( --jp-green-40 );
 	transition: transform 0.1s ease-out;
+	pointer-events: none;
 }
 
 .iconContainer {

package/components/icons/style.module.scss

@@ -33,6 +33,9 @@
 	&.mastodon {
 		fill: var( --color-mastodon );
 	}
+	&.nextdoor {
+		fill: var( --color-nextdoor );
+	}
 	&.instagram {
 		fill: var( --color-instagram );
 	}

package/components/progress-bar/index.tsx

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * Internal dependencies
+ */
+import styles from './style.module.scss';
+import { ProgressBarProps } from './types';
+import type React from 'react';
+
+/**
+ * Progress Bar component
+ *
+ * @param {ProgressBarProps} props - Component props.
+ * @returns {React.ReactNode} - ProgressBar react component.
+ */
+const ProgressBar: React.FC< ProgressBarProps > = ( {
+	className,
+	progressClassName,
+	progress,
+	size = 'normal',
+} ) => {
+	if ( progress == null ) {
+		return null;
+	}
+
+	const normalizedProgress = Math.max( Math.min( progress, 1 ), 0 );
+
+	const style = {
+		width: `${ normalizedProgress * 100 }%`,
+	};
+
+	return (
+		<div
+			className={ classnames( className, styles.wrapper, { [ styles.small ]: size === 'small' } ) }
+		>
+			<div className={ classnames( progressClassName, styles.progress ) } style={ style }></div>
+		</div>
+	);
+};
+
+export default ProgressBar;

package/components/progress-bar/style.module.scss

@@ -0,0 +1,17 @@
+.wrapper {
+	width: 100%;
+	height: 12px;
+	background-color: var(--jp-gray-5);
+	border-radius: calc( var( --spacing-base ) * 3 );
+	overflow: hidden;
+
+	&.small {
+		height: 3px;
+	}
+	
+	.progress {
+		height: 100%;
+		border-radius: calc( var( --spacing-base ) * 3 );
+		background-color: var(--jp-green-50 );
+	}
+}

package/components/progress-bar/types.ts

@@ -0,0 +1,21 @@
+export type ProgressBarProps = {
+	/**
+	 * Optional classname to apply to the root element.
+	 */
+	className?: string;
+
+	/**
+	 * Optional classname to apply to the progress element.
+	 */
+	progressClassName?: string;
+
+	/**
+	 * The current progress percentage, from 0 to 1.
+	 */
+	progress: number;
+
+	/**
+	 * The progress bar height.
+	 */
+	size?: 'normal' | 'small';
+};

package/index.ts

@@ -69,4 +69,5 @@ export { default as Status } from './components/status';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar';
 export { default as ActionPopover } from './components/action-popover';
 export { default as ZendeskChat } from './components/zendesk-chat';
+export { default as ProgressBar } from './components/progress-bar';
 export { getUserLocale, cleanLocale } from './lib/locale';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.43.4",
+	"version": "0.44.1",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,16 +15,16 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.13",
+		"@automattic/jetpack-boost-score-api": "^0.1.14",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "5.26.0",
-		"@wordpress/components": "25.9.0",
-		"@wordpress/compose": "6.20.0",
-		"@wordpress/data": "9.13.0",
-		"@wordpress/date": "4.43.0",
-		"@wordpress/element": "5.20.0",
-		"@wordpress/i18n": "4.43.0",
-		"@wordpress/icons": "9.34.0",
+		"@wordpress/browserslist-config": "5.27.0",
+		"@wordpress/components": "25.10.0",
+		"@wordpress/compose": "6.21.0",
+		"@wordpress/data": "9.14.0",
+		"@wordpress/date": "4.44.0",
+		"@wordpress/element": "5.21.0",
+		"@wordpress/i18n": "4.44.0",
+		"@wordpress/icons": "9.35.0",
 		"classnames": "2.3.2",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
@@ -34,7 +34,7 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.10",
+		"@automattic/jetpack-base-styles": "^0.6.11",
 		"@babel/core": "7.23.2",
 		"@babel/preset-react": "7.22.15",
 		"@jest/globals": "29.4.3",