newspack-components 4.1.0 → 4.3.0

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,49 @@
 	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 {
+	background: var(--wp--preset--color--base-2, #f0f0f0);
+	border-radius: 50%; // Circular
+	color: var(--wp--preset--color--contrast, #1e1e1e);
+	display: grid;
+	place-items: center;
+	text-decoration: none;
+	transition: background 125ms ease-in-out, color 125ms ease-in-out;
+
+	// 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(--wp--preset--color--base-3, #ddd);
+		color: var(--wp--preset--color--contrast, #1e1e1e);
+		text-decoration: none;
+	}
+
+	&: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/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,13 +29,14 @@ import classnames from 'classnames';
  */
 const ActionCard = ( {
 	badge,
-	badgeLevel = 'info',
+	badgeLevel,
 	className,
 	checkbox,
 	children,
 	collapse,
 	disabled,
 	title,
+	heading = 2,
 	description,
 	handoff,
 	editLink,
@@ -60,11 +61,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 +75,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 +118,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 +153,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 +172,7 @@ const ActionCard = ( {
 										{ badgeText }
 									</span>
 								) ) }
-						</h2>
+						</HeadingTag>
 						{ description && (
 							<p>
 								{ typeof description === 'string' && description }
@@ -224,9 +237,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 +302,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 +319,7 @@ const ActionCard = ( {
 									/>
 								</div>
 							</div>
-							<Component />
+							{ cardContent }
 						</Card>
 					) }
 				</Draggable>
@@ -316,7 +329,7 @@ const ActionCard = ( {
 
 	return (
 		<Card className={ classes } onClick={ simple && onClick } id={ id ?? null } noBorder={ noBorder }>
-			<Component />
+			{ cardContent }
 		</Card>
 	);
 };

package/src/action-card/style.scss

@@ -55,7 +55,7 @@
 			.components-toggle-control {
 				margin-bottom: 16px;
 
-				@media screen and ( min-width: 744px ) {
+				@media screen and (min-width: 744px) {
 					margin-bottom: 0;
 					margin-right: 16px;
 				}
@@ -77,10 +77,6 @@
 			padding: 0 4px;
 		}
 
-		& + & {
-			margin-top: -16px;
-		}
-
 		&.mv0 {
 			border-left-color: wp-colors.$gray-300;
 			border-radius: 0;
@@ -122,7 +118,7 @@
 			.components-toggle-control {
 				margin-bottom: 16px;
 
-				@media screen and ( min-width: 744px ) {
+				@media screen and (min-width: 744px) {
 					margin-bottom: 0;
 					margin-right: 16px;
 				}
@@ -132,7 +128,7 @@
 		.newspack-action-card__region-left {
 			margin-bottom: 16px;
 
-			@media screen and ( min-width: 744px ) {
+			@media screen and (min-width: 744px) {
 				margin-bottom: 0;
 				margin-right: 16px;
 			}
@@ -252,7 +248,7 @@
 		padding: 24px;
 		display: block;
 
-		@media screen and ( min-width: 744px ) {
+		@media screen and (min-width: 744px) {
 			display: flex;
 		}
 
@@ -261,9 +257,19 @@
 			margin-bottom: 24px;
 			margin-top: 0;
 
-			@media screen and ( min-width: 744px ) {
+			@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 {
@@ -308,7 +314,7 @@
 	.newspack-action-card__region-left {
 		margin-bottom: 24px;
 
-		@media screen and ( min-width: 744px ) {
+		@media screen and (min-width: 744px) {
 			margin-bottom: 0;
 			margin-right: 24px;
 		}
@@ -335,7 +341,7 @@
 		margin-top: 24px;
 		text-align: right;
 
-		@media screen and ( min-width: 744px ) {
+		@media screen and (min-width: 744px) {
 			align-items: flex-end;
 			flex-direction: column;
 			margin-left: 24px;
@@ -437,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 {
@@ -473,6 +487,11 @@
 			margin-left: 8px;
 		}
 	}
+
+	hr:not(.newspack-divider) {
+		background: wp-colors.$gray-100;
+		margin: 0;
+	}
 }
 
 .newspack-card {
@@ -557,7 +576,6 @@
 		}
 
 		.newspack-action-card__region-top {
-			flex: 1 1 auto;
 			padding: 8px 16px 8px 0 !important;
 			flex: 1;
 		}

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 )
 		);
 	}