@automattic/jetpack-components 0.71.0 → 0.72.1

package/components/dot-pager/README.md

@@ -0,0 +1,20 @@
+# Dot pager
+
+`DotPager` wraps all its child components into a browsable container that shows only one child at time.
+
+## Usage
+
+```js
+import { DotPager } from '@automattic/jetpack-components';
+
+
+function myDotPager() {
+	return (
+		<DotPager>
+			<div>Item 1</div>
+			<div>Item 2</div>
+			<div>Item 3</div>
+		</DotPager>
+	);
+}
+```

package/components/dot-pager/index.tsx

@@ -0,0 +1,147 @@
+import { Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import clsx from 'clsx';
+import React, { Children, useState, useEffect, ReactNode, useCallback, useMemo } from 'react';
+import { Swipeable } from '../swipeable/index.js';
+
+import './style.scss';
+
+type ControlsProps = {
+	currentPage: number;
+	numberOfPages: number;
+	setCurrentPage: ( page: number ) => void;
+	tracksPrefix: string;
+	tracksFn: ( eventName: string, data?: Record< string, unknown > ) => void;
+};
+
+const Controls = ( {
+	currentPage,
+	numberOfPages,
+	setCurrentPage,
+	tracksPrefix,
+	tracksFn,
+}: ControlsProps ) => {
+	// Create a map of memoized handlers for each page
+	const pageHandlers = useMemo(
+		() =>
+			Array.from( { length: numberOfPages }, ( _, page ) => () => {
+				tracksFn( tracksPrefix + '_dot_click', {
+					current_page: currentPage,
+					destination_page: page,
+				} );
+				setCurrentPage( page );
+			} ),
+		[ numberOfPages, currentPage, tracksFn, tracksPrefix, setCurrentPage ]
+	);
+
+	if ( numberOfPages < 2 ) {
+		return null;
+	}
+
+	return (
+		<ul className="dot-pager__controls" aria-label={ __( 'Pager controls', 'jetpack-components' ) }>
+			{ Array.from( { length: numberOfPages }, ( _, page ) => (
+				<li key={ `page-${ page }` } aria-current={ page === currentPage ? 'page' : undefined }>
+					<Button
+						key={ page.toString() }
+						className={ clsx( 'dot-pager__control-choose-page', {
+							'dot-pager__control-current': page === currentPage,
+						} ) }
+						disabled={ page === currentPage }
+						aria-label={ sprintf(
+							/* translators: %1$d: current page number, %2$d: total number of pages */
+							__( 'Page %1$d of %2$d', 'jetpack-components' ),
+							page + 1,
+							numberOfPages
+						) }
+						onClick={ pageHandlers[ page ] }
+					/>
+				</li>
+			) ) }
+		</ul>
+	);
+};
+
+type DotPagerProps = {
+	hasDynamicHeight?: boolean;
+	children: ReactNode;
+	className?: string;
+	onPageSelected?: ( index: number ) => void;
+	isClickEnabled?: boolean;
+	rotateTime?: number;
+	tracksPrefix?: string;
+	tracksFn?: ( eventName: string, data?: Record< string, unknown > ) => void;
+};
+
+const DotPager = ( {
+	hasDynamicHeight = false,
+	children,
+	className = '',
+	onPageSelected,
+	isClickEnabled = false,
+	rotateTime = 0,
+	tracksPrefix = '',
+	tracksFn = () => {},
+	...props
+}: DotPagerProps ) => {
+	const normalizedChildren = Children.toArray( children ).filter( Boolean );
+	const [ currentPage, setCurrentPage ] = useState( 0 );
+	const [ isPaused, setIsPaused ] = useState( false );
+	const numPages = Children.count( normalizedChildren );
+
+	useEffect( () => {
+		if ( rotateTime > 0 && numPages > 1 && ! isPaused ) {
+			const timerId = setTimeout( () => {
+				// Add 1 to numPages to account for the clones
+				setCurrentPage( ( currentPage + 1 ) % ( numPages + 1 ) );
+			}, rotateTime * 1000 );
+
+			return () => clearTimeout( timerId );
+		}
+	}, [ currentPage, numPages, rotateTime, isPaused ] );
+
+	const handleSelectPage = useCallback(
+		( index: number ) => {
+			setCurrentPage( index );
+			onPageSelected?.( index );
+		},
+		[ onPageSelected ]
+	);
+
+	const handleMouseEnter = useCallback( () => {
+		setIsPaused( true );
+	}, [] );
+
+	const handleMouseLeave = useCallback( () => {
+		setIsPaused( false );
+	}, [] );
+
+	return (
+		<div
+			className={ clsx( 'dot-pager', className ) }
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+			{ ...props }
+		>
+			<Controls
+				currentPage={ currentPage }
+				numberOfPages={ numPages }
+				setCurrentPage={ handleSelectPage }
+				tracksPrefix={ tracksPrefix }
+				tracksFn={ tracksFn }
+			/>
+			<Swipeable
+				hasDynamicHeight={ hasDynamicHeight }
+				onPageSelect={ handleSelectPage }
+				currentPage={ currentPage }
+				pageClassName="dot-pager__page"
+				containerClassName="dot-pager__pages"
+				isClickEnabled={ isClickEnabled }
+			>
+				{ normalizedChildren }
+			</Swipeable>
+		</div>
+	);
+};
+
+export default DotPager;

package/components/dot-pager/style.scss

@@ -0,0 +1,80 @@
+@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+@import '@automattic/jetpack-base-styles/root-variables';
+
+.dot-pager {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.dot-pager__page {
+	height: 100%;
+	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+	@include reduce-motion( "transition" );
+	opacity: 1;
+	visibility: visible;
+}
+
+.dot-pager__controls {
+	margin: 0;
+	margin-bottom: 16px;
+	margin-top: auto;
+	display: flex;
+	justify-content: center;
+	position: absolute;
+	bottom: 0px;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	li {
+		display: inline-flex;
+		margin: 0 4px;
+		height: 18px;
+		align-items: center;
+
+		&:first-child {
+			margin-left: 0;
+		}
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+
+	.dot-pager__control-gap {
+		margin-left: auto;
+	}
+}
+
+.dot-pager__control-choose-page {
+	cursor: pointer;
+
+	&:disabled {
+		cursor: default;
+	}
+
+	&:focus-visible {
+		box-shadow: 0 0 0 2px var(--jp-gray-90);
+	}
+}
+
+.dot-pager__control-choose-page {
+	border-radius: 50%;
+	width: 6px;
+	height: 6px;
+	padding: 0px;
+	background-color: var(--jp-white-off);
+
+	&:hover {
+		background-color: var(--jp-gray-20);
+	}
+
+	&.dot-pager__control-current {
+		background-color: var(--jp-gray-80);
+	}
+}
+
+.dot-pager {
+	&__button {
+		margin-right: 10px;
+	}
+}

package/components/number-control/index.jsx

@@ -14,7 +14,9 @@ import {
 const NumberControl =
 	ExperimentalNumberControl ||
 	function CustomNumberControl( props ) {
-		return <TextControl type="number" inputMode="numeric" { ...props } />;
+		return (
+			<TextControl type="number" inputMode="numeric" { ...props } __next40pxDefaultSize={ true } />
+		);
 	};
 
 export default NumberControl;

package/components/swipeable/README.md

@@ -0,0 +1,34 @@
+# Swipeable
+
+This component is used to add horizontal swipe controls to a list of elements (pages).
+
+## Example Usage
+
+```js
+import { Swipeable } from '@automattic/jetpack-components';
+
+function Pager() {
+	const [ currentPage, setCurrentPage ] = useState( 0 );
+	return (
+		<Swipeable
+			onPageSelect={ ( index ) => {
+				setCurrentPage( index );
+			} }
+			currentPage={ currentPage }
+			pageClassName="example-page-component-class"
+		>
+			<div>Page 1</div>
+			<div>Page 2</div>
+			<div>Page 3</div>
+		</Swipeable>
+	);
+}
+```
+
+## Props
+
+- `onPageSelect` - (function) Function that runs when the page is selected on using a swipe. Useful for updating the current page.
+- `currentPage` - (number) Index of the currently selected/shown page.
+- `hasDynamicHeight` - (bool) Whether height should be changed dynamically.
+- `pageClassName` - _optional_ (string) Optional class attribute of the page component.
+- `containerClassName` - _optional_ (string) Optional class attribute of the page container component.