@automattic/jetpack-components 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [2.1.0] - 2026-08-03
+### Changed
+- Decorative card: Build on the shared Card component, inline the unlink glyph, and hide the card from assistive technology. [#50861]
+
+## [2.0.1] - 2026-07-27
+### Changed
+- Update package dependencies. [#50751]
+
 ## [2.0.0] - 2026-07-22
 ### Removed
 - Number Slider: remove the NumberSlider component. It wrapped the unmaintained react-slider dependency (which blocked React 19) and had a single consumer; use the WordPress RangeControl component from @wordpress/components directly instead. [#50289]
@@ -1889,6 +1897,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[2.1.0]: https://github.com/Automattic/jetpack-components/compare/2.0.1...2.1.0
+[2.0.1]: https://github.com/Automattic/jetpack-components/compare/2.0.0...2.0.1
 [2.0.0]: https://github.com/Automattic/jetpack-components/compare/1.12.17...2.0.0
 [1.12.17]: https://github.com/Automattic/jetpack-components/compare/1.12.16...1.12.17
 [1.12.16]: https://github.com/Automattic/jetpack-components/compare/1.12.15...1.12.16

package/build/components/decorative-card/index.d.ts

@@ -1,11 +1,24 @@
-import type { DecorativeCardProps } from './types.ts';
-import type { FC } from 'react';
+import type { ComponentProps } from 'react';
 import './style.scss';
+export interface DecorativeCardProps extends Omit<ComponentProps<'div'>, 'children' | 'aria-hidden'> {
+    /**
+     * The format of the card (horizontal or vertical)
+     */
+    format?: 'horizontal' | 'vertical';
+    /**
+     * Show a glyph in a circle over the centre of the card.
+     */
+    icon?: 'unlink';
+    /**
+     * URL for an image to show in the card.
+     */
+    imageUrl?: string;
+}
 /**
  * A decorative card used in the disconnection flow.
  *
  * @param {DecorativeCardProps} props - The properties.
- * @return {ReactNode} - The DecorativeCard component.
+ * @return {import('react').ReactNode} - The DecorativeCard component.
  */
-declare const DecorativeCard: FC<DecorativeCardProps>;
+declare function DecorativeCard({ format, icon, imageUrl, className, ...rest }: DecorativeCardProps): import("react/jsx-runtime").JSX.Element;
 export default DecorativeCard;

package/build/components/decorative-card/index.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Stack } from '@wordpress/ui';
+import clsx from 'clsx';
 import './style.scss';
 /**
  * A decorative card used in the disconnection flow.
  *
  * @param {DecorativeCardProps} props - The properties.
- * @return {ReactNode} - The DecorativeCard component.
+ * @return {import('react').ReactNode} - The DecorativeCard component.
  */
-const DecorativeCard = ({ format = 'horizontal', icon, imageUrl }) => {
-    return (_jsxs("div", { className: 'jp-components__decorative-card ' +
-            (format ? 'jp-components__decorative-card--' + format : ''), children: [_jsx("div", { className: "jp-components__decorative-card__image", style: { backgroundImage: imageUrl ? `url( ${imageUrl} )` : '' } }), _jsx("div", { className: "jp-components__decorative-card__content", children: _jsx("div", { className: "jp-components__decorative-card__lines" }) }), icon ? (_jsx("div", { className: "jp-components__decorative-card__icon-container", children: _jsx("span", { className: 'jp-components__decorative-card__icon jp-components__decorative-card__icon--' + icon }) })) : null] }));
-};
+function DecorativeCard({ format = 'horizontal', icon, imageUrl, className, ...rest }) {
+    return (_jsxs(Card.Root, { "data-testid": "decorative-card", ...rest, "aria-hidden": "true", className: clsx('jp-components__decorative-card', `jp-components__decorative-card--${format}`, className), children: [_jsx("div", { className: "jp-components__decorative-card__image", "data-testid": "decorative-card_image", style: { backgroundImage: imageUrl ? `url(${imageUrl})` : undefined } }), icon === 'unlink' && (_jsx("div", { className: "jp-components__decorative-card__icon-container", children: _jsxs("svg", { className: "jp-components__decorative-card__icon", "data-testid": "decorative-card_icon", width: "34", height: "37", viewBox: "0 0 34 37", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335", stroke: "white", strokeWidth: "1.5", strokeLinecap: "square" }), _jsx("path", { d: "M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005", stroke: "white", strokeWidth: "1.5", strokeLinecap: "square" }), _jsx("path", { d: "M10.9998 19.167L16.9998 19.167", stroke: "white", strokeWidth: "1.5" }), _jsx("path", { d: "M8.99951 35.998L24.9995 0.998048", stroke: "white" })] }) })), _jsx(Card.Content, { className: "jp-components__decorative-card__content", children: _jsxs(Stack, { className: "jp-components__decorative-card__lines", direction: "column", gap: "lg", children: [_jsx("div", { className: "jp-components__decorative-card__line" }), _jsx("div", { className: "jp-components__decorative-card__line" }), _jsx("div", { className: "jp-components__decorative-card__line jp-components__decorative-card__line--short" })] }) })] }));
+}
 export default DecorativeCard;

package/build/components/decorative-card/style.scss

@@ -1,9 +1,11 @@
 @use "@automattic/jetpack-base-styles/style";
 
+// Size, layout and elevation on top of @wordpress/ui's Card, which supplies the
+// surface itself (border radius, clipping, background).
 .jp-components__decorative-card {
-	display: flex;
-	border-radius: 8px;
-	overflow: hidden;
+	--wp-ui-card-padding: 2rem;
+
+	border: 0;
 	box-shadow: 0 0 15px var(--jp-gray);
 	position: relative;
 	width: 360px;
@@ -36,7 +38,6 @@
 
 	&__content {
 		background: #fff;
-		padding: 2rem;
 	}
 
 	&__icon-container {
@@ -51,47 +52,30 @@
 	}
 
 	&__icon {
-		width: 40px;
-		height: 40px;
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
-		background-position: center, center;
-		background-repeat: no-repeat;
-
-		&--unlink {
-			background-image: url('data:image/svg+xml,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>');
-		}
 	}
 
-	&__lines {
-		display: block;
+	// The column direction and the 16px gap between bars come from the `Stack`
+	// wrapping them.
+	&__line {
 		width: 100%;
 		height: 12px;
 		border-radius: 6px;
 		background: #e9eff5;
-		position: relative;
-
-		&::before,
-		&::after {
-			content: "";
-			display: block;
-			width: 100%;
-			height: 12px;
-			border-radius: 6px;
-			background: #e9eff5;
-			position: relative;
-			top: calc(100% + 16px);
-		}
 
-		&::after {
-			top: calc(100% + 32px);
+		&--short {
 			width: 75%;
 		}
 	}
 
 	// Variants
+	&--horizontal {
+		flex-direction: row;
+	}
+
 	&--vertical {
 		flex-direction: column;
 
@@ -103,14 +87,11 @@
 
 		.jp-components__decorative-card__lines {
 			max-width: 135px;
-			margin-left: auto;
-			margin-right: auto;
+			margin-inline: auto;
+		}
 
-			&::before,
-			&::after {
-				margin-left: auto;
-				margin-right: auto;
-			}
+		.jp-components__decorative-card__line {
+			margin-inline: auto;
 		}
 	}
 }

package/components/decorative-card/index.tsx

@@ -1,40 +1,95 @@
-import type { DecorativeCardProps } from './types.ts';
-import type { FC, ReactNode } from 'react';
+import { Card, Stack } from '@wordpress/ui';
+import clsx from 'clsx';
+import type { ComponentProps } from 'react';
 import './style.scss';
 
+// `children` is omitted: the card renders a fixed set of decorative panes, so
+// there is nowhere to put consumer children. `aria-hidden` is omitted because
+// the component hardcodes it — see the render below.
+export interface DecorativeCardProps
+	extends Omit< ComponentProps< 'div' >, 'children' | 'aria-hidden' > {
+	/**
+	 * The format of the card (horizontal or vertical)
+	 */
+	format?: 'horizontal' | 'vertical';
+
+	/**
+	 * Show a glyph in a circle over the centre of the card.
+	 */
+	icon?: 'unlink';
+
+	/**
+	 * URL for an image to show in the card.
+	 */
+	imageUrl?: string;
+}
+
 /**
  * A decorative card used in the disconnection flow.
  *
  * @param {DecorativeCardProps} props - The properties.
- * @return {ReactNode} - The DecorativeCard component.
+ * @return {import('react').ReactNode} - The DecorativeCard component.
  */
-
-const DecorativeCard: FC< DecorativeCardProps > = ( { format = 'horizontal', icon, imageUrl } ) => {
+function DecorativeCard( {
+	format = 'horizontal',
+	icon,
+	imageUrl,
+	className,
+	...rest
+}: DecorativeCardProps ) {
 	return (
-		<div
-			className={
-				'jp-components__decorative-card ' +
-				( format ? 'jp-components__decorative-card--' + format : '' )
-			}
+		<Card.Root
+			data-testid="decorative-card"
+			{ ...rest }
+			aria-hidden="true"
+			className={ clsx(
+				'jp-components__decorative-card',
+				`jp-components__decorative-card--${ format }`,
+				className
+			) }
 		>
 			<div
 				className="jp-components__decorative-card__image"
-				style={ { backgroundImage: imageUrl ? `url( ${ imageUrl } )` : '' } }
-			></div>
-			<div className="jp-components__decorative-card__content">
-				<div className="jp-components__decorative-card__lines"></div>
-			</div>
-			{ icon ? (
+				data-testid="decorative-card_image"
+				style={ { backgroundImage: imageUrl ? `url(${ imageUrl })` : undefined } }
+			/>
+			{ icon === 'unlink' && (
 				<div className="jp-components__decorative-card__icon-container">
-					<span
-						className={
-							'jp-components__decorative-card__icon jp-components__decorative-card__icon--' + icon
-						}
-					></span>
+					<svg
+						className="jp-components__decorative-card__icon"
+						data-testid="decorative-card_icon"
+						width="34"
+						height="37"
+						viewBox="0 0 34 37"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335"
+							stroke="white"
+							strokeWidth="1.5"
+							strokeLinecap="square"
+						/>
+						<path
+							d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005"
+							stroke="white"
+							strokeWidth="1.5"
+							strokeLinecap="square"
+						/>
+						<path d="M10.9998 19.167L16.9998 19.167" stroke="white" strokeWidth="1.5" />
+						<path d="M8.99951 35.998L24.9995 0.998048" stroke="white" />
+					</svg>
 				</div>
-			) : null }
-		</div>
+			) }
+			<Card.Content className="jp-components__decorative-card__content">
+				<Stack className="jp-components__decorative-card__lines" direction="column" gap="lg">
+					<div className="jp-components__decorative-card__line" />
+					<div className="jp-components__decorative-card__line" />
+					<div className="jp-components__decorative-card__line jp-components__decorative-card__line--short" />
+				</Stack>
+			</Card.Content>
+		</Card.Root>
 	);
-};
+}
 
 export default DecorativeCard;

package/components/decorative-card/style.scss

@@ -1,9 +1,11 @@
 @use "@automattic/jetpack-base-styles/style";
 
+// Size, layout and elevation on top of @wordpress/ui's Card, which supplies the
+// surface itself (border radius, clipping, background).
 .jp-components__decorative-card {
-	display: flex;
-	border-radius: 8px;
-	overflow: hidden;
+	--wp-ui-card-padding: 2rem;
+
+	border: 0;
 	box-shadow: 0 0 15px var(--jp-gray);
 	position: relative;
 	width: 360px;
@@ -36,7 +38,6 @@
 
 	&__content {
 		background: #fff;
-		padding: 2rem;
 	}
 
 	&__icon-container {
@@ -51,47 +52,30 @@
 	}
 
 	&__icon {
-		width: 40px;
-		height: 40px;
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
-		background-position: center, center;
-		background-repeat: no-repeat;
-
-		&--unlink {
-			background-image: url('data:image/svg+xml,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>');
-		}
 	}
 
-	&__lines {
-		display: block;
+	// The column direction and the 16px gap between bars come from the `Stack`
+	// wrapping them.
+	&__line {
 		width: 100%;
 		height: 12px;
 		border-radius: 6px;
 		background: #e9eff5;
-		position: relative;
-
-		&::before,
-		&::after {
-			content: "";
-			display: block;
-			width: 100%;
-			height: 12px;
-			border-radius: 6px;
-			background: #e9eff5;
-			position: relative;
-			top: calc(100% + 16px);
-		}
 
-		&::after {
-			top: calc(100% + 32px);
+		&--short {
 			width: 75%;
 		}
 	}
 
 	// Variants
+	&--horizontal {
+		flex-direction: row;
+	}
+
 	&--vertical {
 		flex-direction: column;
 
@@ -103,14 +87,11 @@
 
 		.jp-components__decorative-card__lines {
 			max-width: 135px;
-			margin-left: auto;
-			margin-right: auto;
+			margin-inline: auto;
+		}
 
-			&::before,
-			&::after {
-				margin-left: auto;
-				margin-right: auto;
-			}
+		.jp-components__decorative-card__line {
+			margin-inline: auto;
 		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -120,7 +120,7 @@
 		"ts-dedent": "2.2.0",
 		"typescript": "6.0.3",
 		"webpack": "5.107.2",
-		"webpack-cli": "6.0.1"
+		"webpack-cli": "7.2.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",

package/build/components/decorative-card/types.d.ts

@@ -1,14 +0,0 @@
-export type DecorativeCardProps = {
-    /**
-     * The format of the card (horizontal or vertical)
-     */
-    format?: 'horizontal' | 'vertical';
-    /**
-     * An icon slug that can be used to show an icon (options are limited to what is in the stylesheet)
-     */
-    icon?: 'unlink';
-    /**
-     * URL for an image to show in the card.
-     */
-    imageUrl?: string;
-};

package/build/components/decorative-card/types.js

@@ -1 +0,0 @@
-export {};

package/components/decorative-card/types.ts

@@ -1,16 +0,0 @@
-export type DecorativeCardProps = {
-	/**
-	 * The format of the card (horizontal or vertical)
-	 */
-	format?: 'horizontal' | 'vertical';
-
-	/**
-	 * An icon slug that can be used to show an icon (options are limited to what is in the stylesheet)
-	 */
-	icon?: 'unlink';
-
-	/**
-	 * URL for an image to show in the card.
-	 */
-	imageUrl?: string;
-};