@automattic/jetpack-components 0.42.4 → 0.43.0

package/CHANGELOG.md

@@ -2,7 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.43.0] - 2023-10-03
+### Added
+- Added new sharing icon [#33244]
+
+## [0.42.5] - 2023-09-25
+### Added
+- Added WhatsApp social icon. [#33074]
+- Added CopyToClipboard component. [#33265]
+
 ## [0.42.4] - 2023-09-19
+
 - Minor internal updates.
 
 ## [0.42.3] - 2023-09-13
@@ -820,6 +830,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.43.0]: https://github.com/Automattic/jetpack-components/compare/0.42.5...0.43.0
+[0.42.5]: https://github.com/Automattic/jetpack-components/compare/0.42.4...0.42.5
 [0.42.4]: https://github.com/Automattic/jetpack-components/compare/0.42.3...0.42.4
 [0.42.3]: https://github.com/Automattic/jetpack-components/compare/0.42.2...0.42.3
 [0.42.2]: https://github.com/Automattic/jetpack-components/compare/0.42.1...0.42.2

package/components/button/types.ts

@@ -13,7 +13,7 @@ type JetpackButtonBaseProps = {
 	variant?: 'primary' | 'secondary' | 'link' | 'tertiary';
 	weight?: 'bold' | 'regular';
 	fullWidth?: boolean;
-	ref: React.ForwardedRef< unknown >;
+	ref?: React.ForwardedRef< unknown >;
 };
 
 type WPButtonProps = Omit< React.ComponentProps< typeof Button >, 'size' | 'variant' >;

package/components/copy-to-clipboard/index.tsx

@@ -0,0 +1,67 @@
+import { useCopyToClipboard } from '@wordpress/compose';
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import Button from '../button';
+import { ClipboardIcon, CheckmarkIcon } from '../icons';
+import { CopyToClipboardProps } from './types';
+import type React from 'react';
+
+export const CopyToClipboard: React.FC< CopyToClipboardProps > = ( {
+	buttonStyle = 'icon',
+	textToCopy,
+	onCopy,
+	...buttonProps
+} ) => {
+	const [ hasCopied, setHasCopied ] = useState( false );
+
+	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
+
+	const copyRef = useCopyToClipboard( textToCopy, () => {
+		if ( copyTimer.current ) {
+			clearTimeout( copyTimer.current );
+		}
+
+		setHasCopied( true );
+
+		onCopy?.();
+
+		copyTimer.current = setTimeout( () => {
+			setHasCopied( false );
+			copyTimer.current = undefined;
+		}, 3000 );
+	} );
+
+	useEffect( () => {
+		// Clear copyTimer on component unmount.
+		return () => {
+			if ( copyTimer.current ) {
+				clearTimeout( copyTimer.current );
+			}
+		};
+	}, [] );
+
+	let icon: React.ReactNode = null;
+	let label: React.ReactNode = null;
+
+	if ( 'text' !== buttonStyle ) {
+		icon = hasCopied ? <CheckmarkIcon /> : <ClipboardIcon />;
+	}
+
+	const defaultLabel = __( 'Copy to clipboard', 'jetpack' );
+
+	if ( 'icon' !== buttonStyle ) {
+		label = hasCopied ? __( 'Copied!', 'jetpack' ) : defaultLabel;
+	}
+
+	return (
+		<Button
+			aria-label={ defaultLabel }
+			icon={ icon }
+			children={ label }
+			ref={ copyRef }
+			{ ...buttonProps }
+		/>
+	);
+};
+
+export default CopyToClipboard;

package/components/copy-to-clipboard/types.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from '../button/types';
+
+export type CopyToClipboardProps = ButtonProps & {
+	buttonStyle?: 'icon' | 'text' | 'icon-text';
+	textToCopy: string | ( () => string );
+	onCopy?: VoidFunction;
+};

package/components/icons/README.md

@@ -48,6 +48,7 @@ return (
 * StarIcon
 * VideopressIcon
 * JetpackIcon
+* ShareIcon
 * FacebookIcon
 * TwitterIcon
 * LinkedinIcon
@@ -67,6 +68,7 @@ import {
 	StarIcon,
 	VideoPressIcon,
 	JetpackIcon,
+	ShareIcon,
 	FacebookIcon,
 	TwitterIcon,
 	LinkedinIcon,
@@ -87,6 +89,7 @@ return (
 		<StarIcon />
 		<VideoPressIcon />
 		<JetpackIcon />
+		<ShareIcon />
 		<FacebookIcon />
 		<TwitterIcon />
 		<LinkedinIcon />

package/components/icons/index.tsx

@@ -171,6 +171,16 @@ export const CheckmarkIcon: React.FC< BaseIconProps > = ( {
 	</IconWrapper>
 );
 
+export const ClipboardIcon: React.FC< BaseIconProps > = ( {
+	size,
+	className = styles[ 'clipboard-icon' ],
+	color,
+} ) => (
+	<IconWrapper className={ className } size={ size } color={ color }>
+		<Path d="M5.625 5.5H15.375C15.444 5.5 15.5 5.55596 15.5 5.625V15.375C15.5 15.444 15.444 15.5 15.375 15.5H5.625C5.55596 15.5 5.5 15.444 5.5 15.375V5.625C5.5 5.55596 5.55596 5.5 5.625 5.5ZM4 5.625C4 4.72754 4.72754 4 5.625 4H15.375C16.2725 4 17 4.72754 17 5.625V10V15.375C17 16.2725 16.2725 17 15.375 17C15.375 17 6.52246 17 5.625 17C4.72754 17 4 16.2725 4 15.375V5.625ZM18.5 17.2812V8.28125H20V17.2812C20 18.7995 18.7704 20 17.2511 20H6.25V18.5H17.2511C17.9409 18.5 18.5 17.9721 18.5 17.2812Z" />
+	</IconWrapper>
+);
+
 export const JetpackIcon: React.FC< BaseIconProps > = ( {
 	size,
 	className = styles.jetpack,
@@ -188,6 +198,19 @@ export const JetpackIcon: React.FC< BaseIconProps > = ( {
 	);
 };
 
+export const ShareIcon: React.FC< BaseIconProps > = ( { size = 16, className, color } ) => {
+	return (
+		<IconWrapper className={ className } size={ size } color={ color } viewBox="0 0 16 16">
+			<Path
+				fill="#161722"
+				fillRule="evenodd"
+				d="M8.3 4.66C3.85 5.308.727 9.75.034 13.69l-.02.117c-.137.842.809 1.232 1.446.68 2.013-1.745 3.648-2.475 5.318-2.719a10.482 10.482 0 011.524-.103v2.792c0 .694.82 1.041 1.3.55l6.176-6.307a.79.79 0 00.012-1.088L9.614 1.004C9.14.496 8.301.84 8.301 1.542v3.117zm1.525-1.175v1.85a.773.773 0 01-.654.77l-.655.096c-2.133.311-3.987 1.732-5.295 3.672-.472.7-.854 1.44-1.143 2.18a12.32 12.32 0 011.675-.972c1.58-.75 3.048-.972 4.548-.972h.762a.77.77 0 01.762.779v1.69l4.347-4.44-4.347-4.653z"
+				clipRule="evenodd"
+			></Path>
+		</IconWrapper>
+	);
+};
+
 /**
  * Wrapper of the Social Icons. Adds a default CSS class.
  *
@@ -307,6 +330,18 @@ export const MastodonIcon: React.FC< SocialIconWrapperProps > = ( { fill, size,
 	);
 };
 
+export const WhatsAppIcon: React.FC< SocialIconWrapperProps > = ( { fill, size, className } ) => {
+	return (
+		<SocialIconWrapper
+			fill={ fill }
+			size={ size }
+			className={ classNames( styles.whatsapp, className ) }
+		>
+			<Path d="M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z" />
+		</SocialIconWrapper>
+	);
+};
+
 const jetpackIcons = {
 	'anti-spam': AntiSpamIcon,
 	backup: BackupIcon,
@@ -320,6 +355,7 @@ const jetpackIcons = {
 	star: StarIcon,
 	videopress: VideopressIcon,
 	jetpack: JetpackIcon,
+	share: ShareIcon,
 };
 
 const socialIcons = {
@@ -330,6 +366,7 @@ const socialIcons = {
 	tumblr: TumblrIcon,
 	google: GoogleIcon,
 	mastodon: MastodonIcon,
+	whatsapp: WhatsAppIcon,
 };
 
 const iconsMap = {

package/components/icons/style.module.scss

@@ -36,5 +36,8 @@
 	&.instagram {
 		fill: var( --color-instagram );
 	}
+	&.whatsapp {
+		fill: var( --color-whatsapp );
+	}
 }
 

package/index.ts

@@ -37,6 +37,7 @@ export { default as Col } from './components/layout/col';
 export { default as Testimonials } from './components/testimonials';
 export { default as Container } from './components/layout/container';
 export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match';
+export { default as CopyToClipboard } from './components/copy-to-clipboard';
 export * from './components/icons';
 export { default as SplitButton } from './components/split-button';
 export { default as ThemeProvider } from './components/theme-provider';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.42.4",
+	"version": "0.43.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",