newspack-components 4.2.0 → 4.4.0-alpha.1

package/shared/hooks/use-custom-byline.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Hook to get custom byline data.
+ *
+ * @param {number} postId   Post ID.
+ * @param {string} postType Post type.
+ * @return {Object} Custom byline data.
+ */
+export function useCustomByline( postId, postType ) {
+	const { bylineActive, bylineContent } = useSelect(
+		select => {
+			const { getEditedEntityRecord } = select( coreStore );
+			const postRecord = getEditedEntityRecord( 'postType', postType, postId );
+			return {
+				bylineActive: postRecord?.meta?._newspack_byline_active || false,
+				bylineContent: postRecord?.meta?._newspack_byline || '',
+			};
+		},
+		[ postId, postType ]
+	);
+
+	return { bylineActive, bylineContent };
+}
+
+/**
+ * Extract author IDs from custom byline shortcode content.
+ *
+ * @param {string} bylineContent Byline content with [Author id=X]...[/Author] shortcodes.
+ * @return {Array} Array of author IDs (integers).
+ */
+export function extractAuthorIdsFromByline( bylineContent ) {
+	if ( ! bylineContent ) {
+		return [];
+	}
+	const regex = /\[Author\s+id\s*=\s*(\d+)\]/gi;
+	const ids = [];
+	let match;
+	while ( ( match = regex.exec( bylineContent ) ) !== null ) {
+		ids.push( parseInt( match[ 1 ], 10 ) );
+	}
+	return ids;
+}

package/shared/hooks/use-custom-byline.test.js

@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useCustomByline, extractAuthorIdsFromByline } from './use-custom-byline';
+
+jest.mock( '@wordpress/data', () => ( {
+	useSelect: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/core-data', () => ( {
+	store: 'core',
+} ) );
+
+describe( 'useCustomByline', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should return inactive byline when meta is not set', () => {
+		useSelect.mockImplementation( callback =>
+			callback( () => ( {
+				getEditedEntityRecord: () => ( {} ),
+			} ) )
+		);
+
+		const { result } = renderHook( () => useCustomByline( 123, 'post' ) );
+
+		expect( result.current.bylineActive ).toBe( false );
+		expect( result.current.bylineContent ).toBe( '' );
+	} );
+
+	it( 'should return inactive byline when meta exists but byline is inactive', () => {
+		useSelect.mockImplementation( callback =>
+			callback( () => ( {
+				getEditedEntityRecord: () => ( {
+					meta: {
+						_newspack_byline_active: false,
+						_newspack_byline: 'Some content',
+					},
+				} ),
+			} ) )
+		);
+
+		const { result } = renderHook( () => useCustomByline( 123, 'post' ) );
+
+		expect( result.current.bylineActive ).toBe( false );
+		expect( result.current.bylineContent ).toBe( 'Some content' );
+	} );
+
+	it( 'should return active byline with content', () => {
+		const bylineContent = 'By [Author id=5]Jane Doe[/Author]';
+
+		useSelect.mockImplementation( callback =>
+			callback( () => ( {
+				getEditedEntityRecord: () => ( {
+					meta: {
+						_newspack_byline_active: true,
+						_newspack_byline: bylineContent,
+					},
+				} ),
+			} ) )
+		);
+
+		const { result } = renderHook( () => useCustomByline( 123, 'post' ) );
+
+		expect( result.current.bylineActive ).toBe( true );
+		expect( result.current.bylineContent ).toBe( bylineContent );
+	} );
+
+	it( 'should handle null post record gracefully', () => {
+		useSelect.mockImplementation( callback =>
+			callback( () => ( {
+				getEditedEntityRecord: () => null,
+			} ) )
+		);
+
+		const { result } = renderHook( () => useCustomByline( 123, 'post' ) );
+
+		expect( result.current.bylineActive ).toBe( false );
+		expect( result.current.bylineContent ).toBe( '' );
+	} );
+} );
+
+describe( 'extractAuthorIdsFromByline', () => {
+	it( 'should return empty array for empty content', () => {
+		expect( extractAuthorIdsFromByline( '' ) ).toEqual( [] );
+		expect( extractAuthorIdsFromByline( null ) ).toEqual( [] );
+		expect( extractAuthorIdsFromByline( undefined ) ).toEqual( [] );
+	} );
+
+	it( 'should extract single author ID', () => {
+		const byline = 'By [Author id=5]Jane Doe[/Author]';
+		expect( extractAuthorIdsFromByline( byline ) ).toEqual( [ 5 ] );
+	} );
+
+	it( 'should extract multiple author IDs', () => {
+		const byline = 'By [Author id=5]Jane Doe[/Author] and [Author id=12]John Smith[/Author]';
+		expect( extractAuthorIdsFromByline( byline ) ).toEqual( [ 5, 12 ] );
+	} );
+
+	it( 'should handle content with no author shortcodes', () => {
+		const byline = 'By Some Random Text';
+		expect( extractAuthorIdsFromByline( byline ) ).toEqual( [] );
+	} );
+
+	it( 'should handle byline with HTML entities', () => {
+		const byline = 'By [Author id=17]Darth Vader[/Author] with love';
+		expect( extractAuthorIdsFromByline( byline ) ).toEqual( [ 17 ] );
+	} );
+
+	it( 'should return integers, not strings', () => {
+		const byline = '[Author id=123]Test[/Author]';
+		const result = extractAuthorIdsFromByline( byline );
+		expect( result ).toEqual( [ 123 ] );
+		expect( typeof result[ 0 ] ).toBe( 'number' );
+	} );
+
+	it( 'should tolerate whitespace and case variations in shortcode', () => {
+		expect( extractAuthorIdsFromByline( '[author id=7]Name[/Author]' ) ).toEqual( [ 7 ] );
+		expect( extractAuthorIdsFromByline( '[Author  id = 5]Name[/Author]' ) ).toEqual( [ 5 ] );
+		expect( extractAuthorIdsFromByline( '[AUTHOR ID=3]Name[/Author]' ) ).toEqual( [ 3 ] );
+	} );
+} );

package/shared/scss/_mixins.scss

@@ -10,3 +10,57 @@
 	position: absolute !important;
 	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 }
+
+// Circular social button style
+// Used by: author-profile-social, author-social-link blocks
+// Hex fallbacks from newspack-block-theme theme.json defaults.
+@mixin socialButton {
+	border-radius: 50%; // Circular
+	display: grid;
+	place-items: center;
+	text-decoration: none;
+
+	// Use :not(.wp-element-button) to beat wp-elements parent link colour rules,
+	// which use :where() and therefore have lower specificity.
+	&:not(.wp-element-button) {
+		background: var(--icon-background, var(--wp--preset--color--base-2, #f0f0f0));
+		color: var(--icon-color, var(--wp--preset--color--contrast, #1e1e1e));
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition: transform 100ms ease;
+	}
+	// Sizing - makes circular by using equal width/height
+	// --icon-size controls the circle diameter (e.g., 36px)
+	// Icon inside is 2/3 of circle size (e.g., 24px icon in 36px circle)
+	aspect-ratio: 1;
+	width: calc(var(--icon-size, 24px) * 1.5);
+	height: calc(var(--icon-size, 24px) * 1.5);
+	padding: 0;
+
+	&:hover {
+		background: var(--icon-background, var(--wp--preset--color--base-2, #f0f0f0));
+		color: var(--icon-color, var(--wp--preset--color--contrast, #1e1e1e));
+		text-decoration: none;
+		transform: scale(1.1);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		outline: 2px solid;
+		outline-offset: 1px;
+	}
+
+	// SVG icon sizing - icon is 2/3 of button size
+	// If button is 36px, icon is 24px (24/36 = 2/3)
+	svg,
+	span {
+		display: block;
+		fill: currentcolor;
+		width: var(--icon-size, 24px);
+		height: var(--icon-size, 24px);
+	}
+}

package/src/accordion/index.js

@@ -1,6 +1,3 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-
 /**
  * WordPress dependencies
  */
@@ -17,11 +14,15 @@ import classNames from 'classnames';
  */
 import './style.scss';
 
-const Accordion = ( { children, title } ) => {
-	const [ isOpen, setIsOpen ] = useState( false );
+const Accordion = ( { children, title, defaultOpen = false } ) => {
+	const [ isOpen, setIsOpen ] = useState( defaultOpen );
 	return (
-		<details className={ classNames( 'newspack-accordion', { 'newspack-accordion--is-open': isOpen } ) }>
-			<summary onClick={ () => setIsOpen( ! isOpen ) }>
+		<details
+			className={ classNames( 'newspack-accordion', { 'newspack-accordion--is-open': isOpen } ) }
+			open={ isOpen }
+			onToggle={ e => setIsOpen( e.currentTarget.open ) }
+		>
+			<summary>
 				{ title }
 				<Icon className="newspack-accordion__icon" icon={ chevronRight } size={ 24 } />
 			</summary>

package/src/action-card/action-card.d.ts

@@ -6,6 +6,7 @@ export interface ActionCardProps {
 	description?: string | React.ReactNode;
 	actionText?: React.ReactNode | string | null;
 	badge?: string;
+	badgeLevel?: 'success' | 'info' | 'warning' | 'error';
 	className?: string;
 	indent?: string;
 	notification?: string | Error | null;
@@ -13,8 +14,10 @@ export interface ActionCardProps {
 	isMedium?: boolean;
 	disabled?: boolean | string;
 	hasGreyHeader?: boolean;
+	heading?: number;
 	toggleChecked?: boolean;
-	toggleOnChange?: ( a: boolean ) => void;
+	toggleOnChange?: (a: boolean) => void;
+	togglePosition?: 'leading' | 'trailing';
 	actionContent?: boolean | React.ReactNode | null;
 	error?: Error | string | null;
 	handoff?: string | null;
@@ -33,8 +36,9 @@ export interface ActionCardProps {
 	noMargin?: boolean;
 	collapse?: boolean;
 	expandable?: boolean;
+	isExpanded?: boolean;
 	draggable?: boolean;
 	dragIndex?: number;
-	onDragCallback?: ( index: number ) => void;
-	dragWrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
+	onDragCallback?: (index: number) => void;
+	dragWrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
 }

package/src/action-card/index.js

@@ -29,15 +29,19 @@ import classnames from 'classnames';
  */
 const ActionCard = ( {
 	badge,
-	badgeLevel = 'info',
+	badgeLevel,
 	className,
 	checkbox,
 	children,
 	collapse,
 	disabled,
 	title,
+	heading = 2,
 	description,
 	handoff,
+	handoffUrl,
+	bannerText,
+	bannerButtonText,
 	editLink,
 	href,
 	notification,
@@ -60,11 +64,13 @@ const ActionCard = ( {
 	titleLink,
 	toggleChecked = false,
 	toggleOnChange,
+	togglePosition = 'leading',
 	hasGreyHeader,
 	hasWhiteHeader,
 	noBorder,
 	isPending,
 	expandable = false,
+	isExpanded,
 	isButtonEnabled = false,
 	// Draggable props. All are required to enable drag sorting.
 	draggable = false,
@@ -72,11 +78,17 @@ const ActionCard = ( {
 	dragWrapperRef,
 	onDragCallback,
 } ) => {
-	const [ expanded, setExpanded ] = useState( false );
+	const [ expanded, setExpanded ] = useState( Boolean( isExpanded ) );
 	const [ dragging, setDragging ] = useState( false );
 	const [ targetIndex, setTargetIndex ] = useState( null );
 	const [ dragRef, setDragRef ] = useState( null );
 
+	useEffect( () => {
+		if ( typeof isExpanded === 'boolean' ) {
+			setExpanded( isExpanded );
+		}
+	}, [ isExpanded ] );
+
 	useEffect( () => {
 		if ( dragWrapperRef && ! dragRef ) {
 			setDragRef( dragWrapperRef );
@@ -109,14 +121,18 @@ const ActionCard = ( {
 		return url ? { backgroundImage: `url(${ url })` } : {};
 	};
 	const titleProps = toggleOnChange && ! titleLink && ! disabled ? { onClick: () => toggleOnChange( ! toggleChecked ), tabIndex: '0' } : {};
+	const togglePositionClass = togglePosition === 'trailing' ? 'is-toggle-trailing' : 'is-toggle-leading';
 	const hasInternalLink = href && href.indexOf( 'http' ) !== 0;
 	const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
 	const badges = ! Array.isArray( badge ) && badge ? [ badge ] : badge;
+	const HeadingTag = `h${ heading }`;
 
-	const Component = () => (
+	const cardContent = (
 		<>
 			<div className="newspack-action-card__region newspack-action-card__region-top">
-				{ toggleOnChange && <ToggleControl checked={ toggleChecked } onChange={ toggleOnChange } disabled={ disabled } /> }
+				{ toggleOnChange && (
+					<ToggleControl checked={ toggleChecked } onChange={ toggleOnChange } disabled={ disabled } className={ togglePositionClass } />
+				) }
 				{ image && ! toggleOnChange && (
 					<div className="newspack-action-card__region newspack-action-card__region-left">
 						<a href={ imageLink }>
@@ -140,7 +156,7 @@ const ActionCard = ( {
 				) }
 				<div className="newspack-action-card__region newspack-action-card__region-center">
 					<Grid columns={ 1 } gutter={ 8 } noMargin>
-						<h2>
+						<HeadingTag>
 							<span className="newspack-action-card__title" { ...titleProps }>
 								{ titleLink && <a href={ titleLink }>{ title }</a> }
 								{ ! titleLink && expandable && (
@@ -159,7 +175,7 @@ const ActionCard = ( {
 										{ badgeText }
 									</span>
 								) ) }
-						</h2>
+						</HeadingTag>
 						{ description && (
 							<p>
 								{ typeof description === 'string' && description }
@@ -174,7 +190,18 @@ const ActionCard = ( {
 						{ actionContent && actionContent }
 						{ actionText &&
 							( handoff ? (
-								<Handoff plugin={ handoff } editLink={ editLink } compact isLink>
+								<Handoff
+									plugin={ handoff }
+									editLink={ editLink }
+									bannerText={ bannerText }
+									bannerButtonText={ bannerButtonText }
+									compact
+									isLink
+								>
+									{ actionText }
+								</Handoff>
+							) : handoffUrl ? (
+								<Handoff url={ handoffUrl } bannerText={ bannerText } bannerButtonText={ bannerButtonText } compact isLink>
 									{ actionText }
 								</Handoff>
 							) : onClick || hasInternalLink ? (
@@ -224,9 +251,9 @@ const ActionCard = ( {
 					{ 'warning' === notificationLevel && <Notice noticeText={ notification } isWarning rawHTML={ notificationHTML } /> }
 				</div>
 			) }
-			{ children && ( ( expandable && expanded ) || ! expandable ) && (
+			{ children && ( ( expandable && expanded ) || ! expandable ) ? (
 				<div className="newspack-action-card__region-children">{ children }</div>
-			) }
+			) : null }
 		</>
 	);
 
@@ -289,7 +316,7 @@ const ActionCard = ( {
 						<Card className={ classes } onClick={ simple && onClick } id={ id ?? null } noBorder={ noBorder }>
 							<div className="newspack-action-card__draggable-controls">
 								<div className="drag-handle" draggable onDragStart={ onDraggableStart } onDragEnd={ onDraggableEnd }>
-									<Icon icon={ dragHandle } height={ 18 } width={ 18 } />
+									<Icon icon={ dragHandle } />
 								</div>
 								<div className="movers">
 									<Button
@@ -306,7 +333,7 @@ const ActionCard = ( {
 									/>
 								</div>
 							</div>
-							<Component />
+							{ cardContent }
 						</Card>
 					) }
 				</Draggable>
@@ -316,7 +343,7 @@ const ActionCard = ( {
 
 	return (
 		<Card className={ classes } onClick={ simple && onClick } id={ id ?? null } noBorder={ noBorder }>
-			<Component />
+			{ cardContent }
 		</Card>
 	);
 };

package/src/action-card/style.scss

@@ -260,6 +260,16 @@
 			@media screen and (min-width: 744px) {
 				margin-bottom: 0;
 				margin-right: 24px;
+
+				&.is-toggle-trailing {
+					margin-left: 24px;
+					margin-right: 0;
+					order: 999;
+				}
+			}
+
+			label {
+				display: none;
 			}
 
 			.components-base-control__field {
@@ -433,13 +443,21 @@
 			text-decoration: inherit;
 		}
 
-		.newspack-action-card__region-children {
-			border-top: 1px solid wp-colors.$gray-100;
+		> .newspack-action-card__region-children {
+			border-top: 1px solid wp-colors.$gray-300;
 			padding-top: 24px;
 
 			+ .newspack-action-card__region-children {
 				border-top: none;
 			}
+
+			> * + * {
+				margin-top: 24px !important;
+			}
+
+			.newspack-action-card__region-children:has(> div:not(:empty)) {
+				margin-top: 16px;
+			}
 		}
 
 		&.is-medium .newspack-action-card__region-children {
@@ -469,6 +487,11 @@
 			margin-left: 8px;
 		}
 	}
+
+	hr:not(.newspack-divider) {
+		background: wp-colors.$gray-100;
+		margin: 0;
+	}
 }
 
 .newspack-card {

package/src/autocomplete-tokenfield/index.js

@@ -120,7 +120,7 @@ class AutocompleteTokenField extends Component {
 				Object.keys( validValues ).forEach( key => {
 					if ( validValues[ key ] === label ) {
 						// Preserve numeric or string type of values. Object.keys will convert numbers to strings.
-						const value = isNaN( parseInt( key ) ) ? key.toString() : parseInt( key );
+						const value = /^\d+$/.test( key.toString() ) ? parseInt( key ) : key.toString();
 						acc.push( { value, label } );
 					}
 				} );
@@ -131,7 +131,7 @@ class AutocompleteTokenField extends Component {
 
 		return labels.map( label =>
 			Object.keys( validValues )
-				.map( key => ( isNaN( parseInt( key ) ) ? key.toString() : parseInt( key ) ) )
+				.map( key => ( /^\d+$/.test( key.toString() ) ? parseInt( key ) : key.toString() ) )
 				.find( key => validValues[ key ] === label )
 		);
 	}