refactor(social): keep the header help link out of @yoast/components

Adding to @yoast/components is discouraged, and it turns out nothing there needed
to change. CollapsibleStateless already takes a Heading prop, and the stateful
Collapsible spreads its own props after setting Heading, so a caller can pass its
own heading. MetaboxCollapsible now does that: with a HeaderHelpLink it renders a
heading holding the toggle button and the link as siblings, and all the styling
lives alongside it in this package.

This reverts the headerHelpLink prop and StyledHeaderRow from Collapsible, its
export, and its tests. Those tests move to a MetaboxCollapsible suite, which also
covers that the heading keeps its identity across renders: HeaderHelpLink is a
component rather than an element so it can be memoized, because a heading that
changed identity every render would remount the toggle button and drop focus.

Also reverts the analysis report snapshot. Its styled-components class hashes only
shifted because Collapsible gained a component; with that change gone the hashes
are back to their previous values.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: FAMarfuaty

packages/analysis-report/tests/__snapshots__/SiteSEOReportTest.js.snap

@@ -10,78 +10,78 @@ exports[`The SiteSEOReport testing suite The SiteSEOReport should match the snap
     Test assessment
   </p>
   <div
-    className="bDYRu progress"
+    className="bjXoTs progress"
   >
     <span
-      className="jgrznC progress__part"
+      className="zSbSj progress__part"
     />
     <span
-      className="gIBJcL progress__part"
+      className="jFdQTa progress__part"
     />
     <span
-      className="iUbGTg progress__part"
+      className="jnzOIl progress__part"
     />
   </div>
   <ul
-    className="eMsIPs assessments"
+    className="cVQvbD assessments"
     role="list"
   >
     <li
-      className="jxpGHY assessments__item"
+      className="eYuGur assessments__item"
     >
       <span
-        className="kQnQax dmMXOp assessments__item-bullet"
+        className="hNYQft jLZaQs assessments__item-bullet"
       />
       <span
-        className="kQnQax ijUdyb assessments__item-text"
+        className="hNYQft kXgChN assessments__item-text"
         dangerouslySetInnerHTML={
           Object {
             "__html": "<div></div>",
           }
         }
       />
       <span
-        className="kQnQax ivSAPf assessments__item-score"
+        className="hNYQft cFTcQJ assessments__item-score"
       >
         10
       </span>
     </li>
     <li
-      className="jxpGHY assessments__item"
+      className="eYuGur assessments__item"
     >
       <span
-        className="kQnQax gTqHkA assessments__item-bullet"
+        className="hNYQft eEkVPZ assessments__item-bullet"
       />
       <span
-        className="kQnQax ijUdyb assessments__item-text"
+        className="hNYQft kXgChN assessments__item-text"
         dangerouslySetInnerHTML={
           Object {
             "__html": "<div></div>",
           }
         }
       />
       <span
-        className="kQnQax ivSAPf assessments__item-score"
+        className="hNYQft cFTcQJ assessments__item-score"
       >
         15
       </span>
     </li>
     <li
-      className="jxpGHY assessments__item"
+      className="eYuGur assessments__item"
     >
       <span
-        className="kQnQax bsFrdz assessments__item-bullet"
+        className="hNYQft kWkurS assessments__item-bullet"
       />
       <span
-        className="kQnQax ijUdyb assessments__item-text"
+        className="hNYQft kXgChN assessments__item-text"
         dangerouslySetInnerHTML={
           Object {
             "__html": "<div></div>",
           }
         }
       />
       <span
-        className="kQnQax ivSAPf assessments__item-score"
+        className="hNYQft cFTcQJ assessments__item-score"
       >
         20
       </span>

packages/components/src/Collapsible.js

@@ -1,5 +1,5 @@
 import { getDirectionalStyle } from "@yoast/helpers";
-import { colors, rgba } from "@yoast/style-guide";
+import { colors } from "@yoast/style-guide";
 import { omit } from "lodash";
 import PropTypes from "prop-types";
 import React from "react";
@@ -52,79 +52,6 @@ export const StyledIconsButton = styled( IconsButton )`
 	}
 `;
 
-/**
- * Header row that lets a help link sit next to the title, before the suffix icon.
- *
- * The link has to be a sibling of the toggle button: a link inside a button is invalid HTML, and a
- * click on it would open the link and toggle the panel at the same time. To make room for it the
- * button shrinks to its title, which costs the two behaviours the full-width button provided. Both
- * are restored here without a click handler on this row:
- *
- * - The button's `::after` covers the row, so clicks anywhere on it still reach the button. The help
- *   link is lifted above that overlay so it stays clickable.
- * - The suffix icon is pinned to this row's edge while remaining a child of the button, which keeps
- *   it inside the toggle's hit area and keeps integrations working that look the icon up and click
- *   its parent element to open a collapsible.
- *
- * The hover background belongs to the collapsible that renders this row, because the button no
- * longer spans the row and each collapsible picks its own colour.
- */
-export const StyledHeaderRow = styled.div`
-	position: relative;
-	display: flex;
-	align-items: center;
-	// Reserve the suffix icon's lane so the title and the help link shrink before reaching it.
-	padding-inline-end: 48px;
-
-	> h2 {
-		flex: 0 1 auto;
-		min-width: 0;
-	}
-
-	// Anything that is not the heading, so in practice the help link.
-	> :not(h2) {
-		position: relative;
-		z-index: 1;
-		flex: 0 0 auto;
-	}
-
-	${ StyledIconsButton } {
-		width: auto;
-		background-color: transparent;
-		// The help link brings its own leading gap, so the button ends at its title.
-		padding-inline-end: 0;
-
-		&::after {
-			content: "";
-			position: absolute;
-			inset: 0;
-		}
-
-		/*
-		 * The button only wraps its title now, so its own focus ring would cover part of the header
-		 * instead of all of it. The overlay still spans the row, so it carries the ring instead.
-		 */
-		&:focus {
-			outline: none;
-			box-shadow: none;
-		}
-
-		&:focus::after {
-			outline: 1px solid ${ colors.$color_blue };
-			outline-offset: -1px;
-			box-shadow: 0 0 3px ${ rgba( colors.$color_blue_dark, 0.8 ) };
-		}
-
-		> svg:last-child {
-			position: absolute;
-			inset-inline-end: 16px;
-			top: 50%;
-			transform: translateY(-50%);
-			margin: 0;
-		}
-	}
-`;
-
 /**
  * Wraps a component in a heading element with a defined heading level.
  *
@@ -183,10 +110,6 @@ const StyledHeading = wrapInHeading( StyledIconsButton, { level: 2, fontSize: "1
  * @param {string}      props.id                    The id for the Heading button.
  * @param {function}    props.renderNewBadgeLabel   Function to render a "New" badge label.
  * @param {boolean}     props.hasNewBadgeLabel      Whether to show a "New" badge label.
- * @param {ReactElement} props.headerHelpLink       A link rendered next to the title, before the suffix icon. It is a
- *                                                  sibling of the toggle button, never a child of it. Passing it wraps
- *                                                  the heading in StyledHeaderRow, which changes the header layout; when
- *                                                  it is absent the header markup is unchanged.
  *
  * @returns {ReactElement} A collapsible panel.
  */
@@ -209,7 +132,6 @@ export function CollapsibleStateless( props ) {
 		titleScreenReaderText,
 		renderNewBadgeLabel,
 		hasNewBadgeLabel,
-		headerHelpLink,
 	} = props;
 
 	let wrappedChildren = children;
@@ -218,33 +140,27 @@ export function CollapsibleStateless( props ) {
 	}
 	const Container = ( hasSeparator ) ? StyledContainerTopLevel : StyledContainer;
 
-	const heading = (
-		<Heading
-			id={ id }
-			aria-expanded={ isOpen }
-			onClick={ onToggle }
-			prefixIcon={ isOpen ? prefixIcon : prefixIconCollapsed }
-			suffixIcon={ isOpen ? suffixIcon : suffixIconCollapsed }
-			hasSubTitle={ !! subTitle }
-		>
-			<SectionTitle
-				title={ title }
-				titleScreenReaderText={ titleScreenReaderText }
-				subTitle={ subTitle }
-				renderNewBadgeLabel={ renderNewBadgeLabel }
-				hasNewBadgeLabel={ hasNewBadgeLabel }
-			/>
-		</Heading>
-	);
-
 	return (
 		<Container
 			// Pass the classname to allow re-styling with styled-components.
 			className={ className }
 		>
-			{ headerHelpLink
-				? <StyledHeaderRow>{ heading }{ headerHelpLink }</StyledHeaderRow>
-				: heading }
+			<Heading
+				id={ id }
+				aria-expanded={ isOpen }
+				onClick={ onToggle }
+				prefixIcon={ isOpen ? prefixIcon : prefixIconCollapsed }
+				suffixIcon={ isOpen ? suffixIcon : suffixIconCollapsed }
+				hasSubTitle={ !! subTitle }
+			>
+				<SectionTitle
+					title={ title }
+					titleScreenReaderText={ titleScreenReaderText }
+					subTitle={ subTitle }
+					renderNewBadgeLabel={ renderNewBadgeLabel }
+					hasNewBadgeLabel={ hasNewBadgeLabel }
+				/>
+			</Heading>
 			{ wrappedChildren }
 		</Container>
 	);
@@ -287,7 +203,6 @@ CollapsibleStateless.propTypes = {
 	id: PropTypes.string,
 	renderNewBadgeLabel: PropTypes.func,
 	hasNewBadgeLabel: PropTypes.bool,
-	headerHelpLink: PropTypes.element,
 };
 
 CollapsibleStateless.defaultProps = {
@@ -305,7 +220,6 @@ CollapsibleStateless.defaultProps = {
 	suffixIconCollapsed: null,
 	renderNewBadgeLabel: () => {},
 	hasNewBadgeLabel: false,
-	headerHelpLink: null,
 };
 
 /**
@@ -325,7 +239,6 @@ export class Collapsible extends React.Component {
 	 * @param {Object}  props.suffixIconCollapsed   Suffix icon when in collapsed state.
 	 * @param {string}  props.title                 Title for in the Heading.
 	 * @param {string}  props.titleScreenReaderText Chance for an extra text to feed to a screenreader.
-	 * @param {ReactElement} props.headerHelpLink   A link rendered next to the title, before the suffix icon.
 	 *
 	 * @returns {ReactElement} Base collapsible panel.
 	 */
@@ -452,7 +365,6 @@ Collapsible.propTypes = {
 	onToggle: PropTypes.func,
 	renderNewBadgeLabel: PropTypes.func,
 	hasNewBadgeLabel: PropTypes.bool,
-	headerHelpLink: PropTypes.element,
 };
 
 Collapsible.defaultProps = {
@@ -484,7 +396,6 @@ Collapsible.defaultProps = {
 	onToggle: null,
 	renderNewBadgeLabel: () => {},
 	hasNewBadgeLabel: false,
-	headerHelpLink: null,
 };
 
 export default Collapsible;

packages/components/src/index.js

@@ -47,7 +47,6 @@ export {
 	StyledIconsButton,
 	StyledContainer,
 	StyledContainerTopLevel,
-	StyledHeaderRow,
 	wrapInHeading,
 } from "./Collapsible";
 

packages/components/tests/CollapsibleTest.js

@@ -71,49 +71,6 @@ describe( "Collapsible", () => {
 		component.getInstance().toggleCollapse();
 		expect( component.toJSON() ).toMatchSnapshot();
 	} );
-
-	it( "renders a header help link outside the toggle button", () => {
-		const component = renderer.create(
-			<Collapsible
-				title="Lorem ipsum dolor sit amet"
-				initialIsOpen={ true }
-				headerHelpLink={ <a className="header-help-link" href="https://example.com/help">Help</a> }
-			>
-				{ content }
-			</Collapsible>
-		);
-
-		const button = component.root.findByType( "button" );
-
-		/*
-		 * A link inside the button would be invalid HTML, and a click on it would both open the link
-		 * and toggle the panel. The link has to be a sibling of the button instead.
-		 */
-		expect( button.findAllByType( "a" ) ).toHaveLength( 0 );
-		expect( component.root.findAllByType( "a" ) ).toHaveLength( 1 );
-
-		expect( component.toJSON() ).toMatchSnapshot();
-	} );
-
-	it( "keeps the suffix icon inside the toggle button when a header help link is given", () => {
-		const component = renderer.create(
-			<Collapsible
-				title="Lorem ipsum dolor sit amet"
-				initialIsOpen={ true }
-				headerHelpLink={ <a className="header-help-link" href="https://example.com/help">Help</a> }
-			>
-				{ content }
-			</Collapsible>
-		);
-
-		/*
-		 * The suffix icon is positioned at the edge of the header row with CSS, but stays a child of
-		 * the button: that keeps it inside the toggle's hit area, and integrations look the icon up
-		 * and click its parent element to open a collapsible.
-		 */
-		const button = component.root.findByType( "button" );
-		expect( button.findAllByType( "svg" ).length ).toBeGreaterThan( 0 );
-	} );
 } );
 
 describe( "CollapsibleStateless", () => {