newspack-components 4.1.0 → 4.3.0

package/src/card/index.js

@@ -10,6 +10,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import CoreCard from './core-card';
 import './style.scss';
 
 /**
@@ -22,7 +23,44 @@ class Card extends Component {
 	 * Render
 	 */
 	render() {
-		const { buttonsCard, className, headerActions, isNarrow, isMedium, isSmall, isWhite, noBorder, ...otherProps } = this.props;
+		const {
+			buttonsCard,
+			className,
+			headerActions,
+			isNarrow,
+			isMedium,
+			isSmall,
+			isWhite,
+			noBorder,
+			// Pass as `true` to render using WP Core's Card component: https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+			__experimentalCoreCard,
+			// Pass props supported by WP Core's Card component in this single prop.
+			__experimentalCoreProps = {
+				actionType: null, // chevron | toggle | button | link | none
+				header: null, // Pass a React component to render in a CardHeader component.
+				icon: null,
+				footer: null, // Pass a React component to render in a CardFooter component.
+				noMargin: false,
+				isDraggable: false,
+				dragIndex: null,
+				onDragCallback: () => {},
+			},
+			...otherProps
+		} = this.props;
+		if ( __experimentalCoreCard ) {
+			const props = {
+				buttonsCard,
+				className,
+				isMedium,
+				isNarrow,
+				isSmall,
+				isWhite,
+				noBorder,
+				...otherProps,
+				...__experimentalCoreProps,
+			};
+			return <CoreCard { ...props } />;
+		}
 		const classes = classNames(
 			'newspack-card',
 			className,

package/src/card/style-core.scss

@@ -0,0 +1,227 @@
+/**
+ * Card using WP Core component
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
+
+.newspack-card--core,
+.newspack-wizard .newspack-card--core {
+	background: white;
+	position: relative;
+	transition: background-color 125ms ease-in-out, box-shadow 125ms ease-in-out, color 125ms ease-in-out;
+	svg {
+		transition: fill 125ms ease-in-out;
+	}
+	&__icon {
+		border-radius: 50%;
+		display: grid;
+		height: 48px;
+		place-items: center;
+		width: 48px;
+		svg {
+			fill: var(--wp-admin-theme-color);
+			height: 40px;
+			width: 40px;
+		}
+		.newspack-card--core__has-icon-background-color & {
+			background: var(--wp-admin-theme-color-lighter-10);
+		}
+	}
+	&__is-small {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			font-size: 14px;
+			font-weight: 500;
+		}
+		.newspack-card--core__icon {
+			height: 40px;
+			width: 40px;
+			svg {
+				height: 24px;
+				width: 24px;
+			}
+		}
+	}
+	&__no-margin .components-card__body {
+		padding: 0 !important;
+	}
+	&__header {
+		color: wp-colors.$gray-700;
+		column-gap: 16px;
+		position: relative;
+		.newspack-card--core__action {
+			margin: 0;
+			label {
+				border: 0;
+				clip-path: inset(50%);
+				height: 1px;
+				margin: -1px;
+				overflow: hidden;
+				padding: 0;
+				position: absolute !important;
+				width: 1px;
+				word-wrap: normal !important;
+			}
+		}
+		.components-dropdown-menu {
+			aspect-ratio: 1;
+			border-left: 1px solid wp-colors.$gray-200;
+			display: grid;
+			height: 100%;
+			padding: 4px;
+			place-items: center;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+	&__header--is-draggable {
+		.newspack-card--core__header-content {
+			padding-left: 65px;
+		}
+		.newspack-card--core__header__draggable-controls {
+			align-items: center;
+			border-right: 1px solid wp-colors.$gray-200;
+			display: flex;
+			height: 100%;
+			justify-content: space-between;
+			left: 0;
+			padding: 0 8px;
+			position: absolute;
+			top: 0;
+		}
+		.newspack-card--core__header__draggable-controls__drag-handle {
+			cursor: grab;
+			display: grid;
+			place-items: center;
+		}
+		.newspack-card--core__header__draggable-controls__move-buttons {
+			display: flex;
+			flex-direction: column;
+			.components-button.has-icon {
+				height: 16px;
+				padding: 0;
+				width: 100%;
+			}
+		}
+	}
+	button.newspack-card--core__header {
+		appearance: none;
+		background-color: white;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+	}
+	&__header-content {
+		display: grid;
+		flex: 1;
+		grid-gap: 8px;
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		p {
+			margin-bottom: 0;
+			margin-top: 0;
+			transition: color 125ms ease-in-out;
+		}
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			align-items: center;
+			color: wp-colors.$gray-900;
+			font-weight: 500;
+			display: flex;
+			gap: 8px;
+			.newspack-badge {
+				font-weight: 400;
+			}
+		}
+	}
+	&__is-active {
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+		button.newspack-card--core__header {
+			background-color: rgba( var(--wp-admin-theme-color--rgb), 0.04 );
+			color: var(--wp-admin-theme-color);
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: var(--wp-admin-theme-color);
+			}
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+		}
+
+		&.newspack-card--core__has-children {
+			button.newspack-card--core__header {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+			.newspack-card--core__body {
+				border-top: 1px solid var(--wp-admin-theme-color);
+			}
+			.components-card__divider {
+				background: wp-colors.$gray-100;
+			}
+		}
+	}
+	&__buttons-card {
+		display: block;
+		text-decoration: none;
+		&:active,
+		&:hover {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+			.newspack-card--core__header {
+				color: var(--wp-admin-theme-color);
+				h1,
+				h2,
+				h3,
+				h4,
+				h5,
+				h6 {
+					color: var(--wp-admin-theme-color);
+				}
+				svg {
+					fill: var(--wp-admin-theme-color);
+				}
+			}
+		}
+	}
+	hr.components-card__divider {
+		margin: 0;
+	}
+	&__is-narrow {
+		margin-left: auto;
+		margin-right: auto;
+		@media screen and ( min-width: 608px ) {
+			max-width: 576px;
+		}
+	}
+	&__body {
+		> div:not(.components-card__body):not(.components-card__media):not(.components-card__divider) {
+			padding: 16px 24px;
+			.newspack-card--core__is-small & {
+				padding: 16px;
+			}
+			.newspack-card--core__no-margin & {
+				padding: 0;
+			}
+		}
+	}
+}

package/src/card/style.scss

@@ -133,11 +133,11 @@
 
 	// Thematic Break
 
-	hr {
+	hr:not(.newspack-divider) {
 		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
-		margin: 48px 0;
+		margin: 32px 0;
 
 		@media screen and ( min-width: 744px ) {
 			margin: 64px 0;

package/src/card-settings-group/README.md

@@ -0,0 +1,43 @@
+# CardSettingsGroup
+
+A collapsible settings card that renders a title, optional description, and optional icon in the header. Children are rendered only when the card is active.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `actionType` | `'chevron'` \| `'toggle'` \| `'button'` \| `'link'` \| `'none'` | `'chevron'` | Controls the interactive element rendered in the card header. |
+| `children` | `React.ReactNode` | — | Content displayed inside the card body. Only rendered when `isActive` is `true`. |
+| `description` | `string` | `''` | Optional description rendered below the title in the card header. |
+| `icon` | `React.ReactNode` | `null` | Optional icon rendered in the card header with a colored background. |
+| `isActive` | `boolean` | `false` | When `true`, the card is expanded and children are visible. |
+| `onEnable` | `() => void` | `() => {}` | Callback fired when the card header is clicked. Typically used to toggle `isActive`. |
+| `title` | `string` | — | (**Required**) Title rendered in the card header. |
+
+## Usage
+
+```jsx
+import { CardSettingsGroup } from 'newspack-components';
+import { megaphone } from '@wordpress/icons';
+
+// Basic collapsible settings group
+<CardSettingsGroup
+	title="Email Notifications"
+	description="Configure how readers are notified."
+	isActive={ isEnabled }
+	onEnable={ () => setIsEnabled( ! isEnabled ) }
+>
+	<p>Settings content shown when active.</p>
+</CardSettingsGroup>
+
+// With an icon and toggle action type
+<CardSettingsGroup
+	actionType="toggle"
+	icon={ megaphone }
+	title="Push Notifications"
+	isActive={ isEnabled }
+	onEnable={ () => setIsEnabled( ! isEnabled ) }
+>
+	<p>Settings content shown when active.</p>
+</CardSettingsGroup>
+```

package/src/card-settings-group/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * Card - Settings group component.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { Card } from '../';
+import './style.scss';
+
+const CardSettingsGroup = ( {
+	actionType = 'chevron',
+	children,
+	icon = null,
+	title = '',
+	description = '',
+	isActive = false,
+	onEnable = () => {},
+}: {
+	actionType?: 'chevron' | 'toggle' | 'button' | 'link' | 'none';
+	children?: React.ReactNode;
+	icon?: React.ReactNode;
+	title: string;
+	description?: string;
+	isActive?: boolean;
+	onEnable?: () => void;
+} ) => {
+	return (
+		<Card
+			className="newspack-card--core--settings-group"
+			actionType={ actionType }
+			isSmall
+			__experimentalCoreCard
+			__experimentalCoreProps={ {
+				header: (
+					<>
+						<h3>{ title }</h3>
+						{ description && <p>{ description }</p> }
+					</>
+				),
+				onHeaderClick: onEnable,
+				icon,
+				iconBackgroundColor: true,
+				isActive,
+				title,
+			} }
+		>
+			{ isActive && children }
+		</Card>
+	);
+};
+
+export default CardSettingsGroup;

package/src/card-settings-group/style.scss

@@ -0,0 +1,33 @@
+.newspack-card--core--settings-group {
+	.components-card__body {
+		> .newspack-notice {
+			margin: 16px 0;
+		}
+		> .components-base-control {
+			&:first-child {
+				margin-top: 0;
+			}
+			+ .components-base-control,
+			+ .newspack-form-token-field {
+				margin-top: 16px;
+			}
+		}
+
+		/** ToggleControl switch should appear after the label. */
+		> .components-toggle-control {
+			.components-h-stack {
+				.components-form-toggle {
+					order: 2;
+				}
+			}
+			.components-toggle-control__help {
+				margin-inline-start: auto;
+			}
+		}
+		.newspack-grid:last-child,
+		.components-base-control:last-child,
+		p:last-child {
+			margin-bottom: 0;
+		}
+	}
+}

package/src/card-sortable-list/README.md

@@ -0,0 +1,51 @@
+# CardSortableList
+
+A drag-and-drop sortable list of cards. Each item displays a title and a status badge. Items can be reordered by dragging with a pointer or by using the up/down chevron buttons (keyboard accessible). The list locks its height during a drag to prevent layout shifts.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `disabled` | `boolean` | `false` | When `true`, all drag and button controls are disabled via `Disabled`. |
+| `items` | `DraggableItem[]` | `[]` | Array of items to render. See the `DraggableItem` shape below. |
+| `onDragCallback` | `(index: number, targetIndex: number) => void` | `() => {}` | Callback fired after a reorder completes (drag-and-drop or button move). Receives the original index and the new index. |
+
+### `DraggableItem`
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `id` | `string` \| `number` | Unique identifier for the item. Used as the React `key`. |
+| `title` | `string` | Label rendered in the card header. |
+| `badgeLevel` | `'default'` \| `'success'` \| `'info'` \| `'warning'` \| `'error'` | Visual style of the status badge. |
+| `badgeText` | `string` | Text displayed inside the badge. |
+
+## Usage
+
+```jsx
+import { CardSortableList } from 'newspack-components';
+
+const [ items, setItems ] = useState( [
+	{ id: 1, title: 'Homepage', badgeLevel: 'success', badgeText: 'Active' },
+	{ id: 2, title: 'About',    badgeLevel: 'default', badgeText: 'Draft'  },
+	{ id: 3, title: 'Contact',  badgeLevel: 'warning', badgeText: 'Review' },
+] );
+
+const handleReorder = ( fromIndex, toIndex ) => {
+	const reordered = [ ...items ];
+	const [ moved ] = reordered.splice( fromIndex, 1 );
+	reordered.splice( toIndex, 0, moved );
+	setItems( reordered );
+};
+
+<CardSortableList
+	items={ items }
+	onDragCallback={ handleReorder }
+/>
+
+// Disabled state (controls are rendered but non-interactive)
+<CardSortableList
+	items={ items }
+	disabled={ true }
+	onDragCallback={ handleReorder }
+/>
+```