@automattic/jetpack-components 0.53.10 → 0.54.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.54.1] - 2024-06-24
+### Fixed
+- Updated threads icon color [#37977]
+
+## [0.54.0] - 2024-06-21
+### Added
+- Added Chip component [#37916]
+
 ## [0.53.10] - 2024-06-12
 ### Changed
 - Updated package dependencies. [#37796]
@@ -1067,6 +1075,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.54.1]: https://github.com/Automattic/jetpack-components/compare/0.54.0...0.54.1
+[0.54.0]: https://github.com/Automattic/jetpack-components/compare/0.53.10...0.54.0
 [0.53.10]: https://github.com/Automattic/jetpack-components/compare/0.53.9...0.53.10
 [0.53.9]: https://github.com/Automattic/jetpack-components/compare/0.53.8...0.53.9
 [0.53.8]: https://github.com/Automattic/jetpack-components/compare/0.53.7...0.53.8

package/components/chip/README.md

@@ -0,0 +1,19 @@
+Chip
+=========
+
+This component is useful to indicate something is new.
+
+## General Usage:
+
+```js
+import { Chip } from '@automattic/jetpack-components';
+render() {
+	return (
+		<Chip type="new" text="New" />
+	);
+}
+```
+
+## Props
+
+- `className`: an optional class name.

package/components/chip/index.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import React from 'react';
+import styles from './style.module.scss';
+
+type ChipProps = {
+	text?: string;
+	type?: 'new' | 'info';
+};
+
+/**
+ * Chip component
+ *
+ * @param {object} props         - The component properties.
+ * @param {string} props.type    - The type new or info
+ * @param {string} props.text    - Chip text
+ * @returns {React.ReactElement} The `Chip` component.
+ */
+const Chip: React.FC< ChipProps > = ( { type = 'info', text } ) => {
+	const classes = clsx( styles.chip, styles[ `is-${ type }` ] );
+	return <span className={ classes }>{ text }</span>;
+};
+
+export default Chip;

package/components/chip/style.module.scss

@@ -0,0 +1,18 @@
+.chip {
+	display: inline-block;
+	border-radius: 3px;
+	background-color: var(--jp-gray-5);
+	color: var(--jp-gray-50);
+	padding: 0 6px;
+	margin: 0 8px;
+	text-transform: uppercase;
+	font-size: 10px;
+	font-weight: 700;
+	line-height: 20px;
+	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+
+	&.is-new {
+		background-color: var(--jp-green-5);
+		color: var(--jp-green-50);
+	}
+}

package/components/icons/style.module.scss

@@ -15,8 +15,11 @@
 		fill: var( --color-bluesky );
 	}
 	&.facebook {
-		fill: var( --color-facebook );
-		border-radius: 50% !important;
+		// Add some specificity to override the border-radius on Jetpack settings page
+		&:global(.social-logo) {
+			fill: var( --color-facebook );
+			border-radius: 50%;
+		}
 	}
 	&.instagram {
 		fill: var( --color-instagram );
@@ -37,8 +40,11 @@
 		fill: var( --color-mastodon );
 	}
 	&.nextdoor {
-		fill: var( --color-nextdoor );
-		border-radius: 50%;
+		// Add some specificity to override the border-radius on Jetpack settings page
+		&:global(.social-logo) {
+			fill: var( --color-nextdoor );
+			border-radius: 50%;
+		}
 	}
 	&.instagram {
 		fill: var( --color-instagram );
@@ -46,5 +52,11 @@
 	&.whatsapp {
 		fill: var( --color-whatsapp );
 	}
+	&.threads {
+		&:global(.social-logo) {
+			fill: var( --color-threads );
+			border-radius: 40%;
+		}
+	}
 }
 

package/index.ts

@@ -50,6 +50,7 @@ export { default as QRCode } from './components/qr-code';
 export { default as Button } from './components/button';
 export { default as LoadingPlaceholder } from './components/loading-placeholder';
 export { default as TermsOfService } from './components/terms-of-service';
+export { default as Chip } from './components/chip';
 export {
 	default as PricingTable,
 	PricingTableColumn,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.53.10",
+	"version": "0.54.1",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.31",
+		"@automattic/jetpack-boost-score-api": "^0.1.32",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.0.0",
 		"@wordpress/components": "28.0.0",
@@ -30,12 +30,12 @@
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.0.2",
+		"social-logos": "^3.1.2",
 		"uplot": "1.6.24",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.26",
+		"@automattic/jetpack-base-styles": "^0.6.27",
 		"@babel/core": "7.24.7",
 		"@babel/preset-react": "7.24.7",
 		"@jest/globals": "29.4.3",