newspack-components 4.5.0 → 4.6.0

package/dist/esm/wizard/index.js

@@ -12,19 +12,20 @@ import classnames from 'classnames';
  */
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, isValidElement, useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage } from '../';
+import { Footer, Notice, Button, TabbedNavigation, PluginInstaller, SectionHeader, HandoffMessage, Page } from '../';
+import { activeBreadcrumbs, appendSectionName } from './breadcrumbs-select';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
 import WizardSnackbar from './components/WizardSnackbar';
 import WizardError from './components/WizardError';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 registerStore();
 
 /**
@@ -63,6 +64,49 @@ var ResetHeaderData = function ResetHeaderData() {
   return null;
 };
 
+/**
+ * Wizard header + content region. Rendered inside the wizard's HashRouter so it
+ * can read the current route and derive the active-tab breadcrumb.
+ */
+var WizardHeaderRegion = function WizardHeaderRegion(_ref) {
+  var hideHeader = _ref.hideHeader,
+    headerText = _ref.headerText,
+    sections = _ref.sections,
+    sectionName = _ref.sectionName,
+    subTitle = _ref.subTitle,
+    actions = _ref.actions,
+    tabbedNavigation = _ref.tabbedNavigation,
+    children = _ref.children;
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+  if (hideHeader) {
+    // Without the Page shell the tabs still own the content: it renders
+    // inside the active tab's panel.
+    if (isValidElement(tabbedNavigation)) {
+      return cloneElement(tabbedNavigation, {
+        content: children
+      });
+    }
+    return children;
+  }
+  var breadcrumbItems = activeBreadcrumbs(sections, pathname);
+  if (!breadcrumbItems.length && headerText) {
+    breadcrumbItems = [{
+      label: headerText
+    }];
+  }
+  // Append any render-time leaf crumb(s) the section supplied via
+  // headerData.sectionName (deduped against the current trailing label).
+  breadcrumbItems = appendSectionName(breadcrumbItems, sectionName);
+  return /*#__PURE__*/_jsx(Page, {
+    breadcrumbItems: breadcrumbItems,
+    subTitle: subTitle,
+    actions: actions,
+    tabbedNavigation: tabbedNavigation,
+    children: children
+  });
+};
+
 /**
  * @typedef  {Object}     WizardProps
  * @property {string}     headerText                The header text.
@@ -84,23 +128,23 @@ var ResetHeaderData = function ResetHeaderData() {
  * @param {WizardProps} props
  * @return {JSX.Element} Wizard component
  */
-var Wizard = function Wizard(_ref, ref) {
-  var _ref$sections = _ref.sections,
-    sections = _ref$sections === void 0 ? [] : _ref$sections,
-    headerText = _ref.headerText,
-    apiSlug = _ref.apiSlug,
-    _ref$sharedProps = _ref.sharedProps,
-    sharedProps = _ref$sharedProps === void 0 ? {} : _ref$sharedProps,
-    subHeaderText = _ref.subHeaderText,
-    hasSimpleFooter = _ref.hasSimpleFooter,
-    className = _ref.className,
-    renderAboveSections = _ref.renderAboveSections,
-    _ref$requiredPlugins = _ref.requiredPlugins,
-    requiredPlugins = _ref$requiredPlugins === void 0 ? [] : _ref$requiredPlugins,
-    _ref$isInitialFetchTr = _ref.isInitialFetchTriggered,
-    isInitialFetchTriggered = _ref$isInitialFetchTr === void 0 ? true : _ref$isInitialFetchTr,
-    _ref$fixedHeader = _ref.fixedHeader,
-    fixedHeader = _ref$fixedHeader === void 0 ? false : _ref$fixedHeader;
+var Wizard = function Wizard(_ref2, ref) {
+  var _ref2$sections = _ref2.sections,
+    sections = _ref2$sections === void 0 ? [] : _ref2$sections,
+    headerText = _ref2.headerText,
+    apiSlug = _ref2.apiSlug,
+    _ref2$sharedProps = _ref2.sharedProps,
+    sharedProps = _ref2$sharedProps === void 0 ? {} : _ref2$sharedProps,
+    subHeaderText = _ref2.subHeaderText,
+    hasSimpleFooter = _ref2.hasSimpleFooter,
+    className = _ref2.className,
+    renderAboveSections = _ref2.renderAboveSections,
+    _ref2$requiredPlugins = _ref2.requiredPlugins,
+    requiredPlugins = _ref2$requiredPlugins === void 0 ? [] : _ref2$requiredPlugins,
+    _ref2$isInitialFetchT = _ref2.isInitialFetchTriggered,
+    isInitialFetchTriggered = _ref2$isInitialFetchT === void 0 ? true : _ref2$isInitialFetchT,
+    _ref2$hideHeader = _ref2.hideHeader,
+    hideHeader = _ref2$hideHeader === void 0 ? false : _ref2$hideHeader;
   var isLoading = useSelect(function (select) {
     return select(WIZARD_STORE_NAMESPACE).isLoading();
   });
@@ -148,8 +192,8 @@ var Wizard = function Wizard(_ref, ref) {
       render: function render() {
         return /*#__PURE__*/_jsx(PluginInstaller, {
           plugins: requiredPlugins,
-          onStatus: function onStatus(_ref2) {
-            var complete = _ref2.complete;
+          onStatus: function onStatus(_ref3) {
+            var complete = _ref3.complete;
             return setPluginRequirementsSatisfied(complete);
           }
         });
@@ -160,137 +204,114 @@ var Wizard = function Wizard(_ref, ref) {
   // When plugins are required but not yet satisfied, `displayedSections` is replaced with
   // the PluginInstaller. Use it for routing so the installer actually mounts and runs.
   var routedSections = pluginRequirementsSatisfied ? sections : displayedSections;
-  var urlWithoutHash = window.location.href.split('#')[0];
+  var tabbedNavigation = displayedSections.length > 1 && /*#__PURE__*/_jsx(TabbedNavigation, {
+    items: displayedSections,
+    children: /*#__PURE__*/_jsx(WizardError, {})
+  });
+  var content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/_jsx(ResetHeaderData, {}), /*#__PURE__*/_jsx("div", {
+      className: "newspack-wizard__main",
+      children: /*#__PURE__*/_jsxs(Switch, {
+        children: [routedSections.map(function (section, index) {
+          var _section$exact;
+          var SectionComponent = section.render;
+          var sectionProps = section.props || {};
+          return /*#__PURE__*/_jsx(Route, {
+            exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
+            path: section.path,
+            render: function render(routerProps) {
+              return /*#__PURE__*/_jsxs("div", {
+                className: classnames('newspack-wizard__content', className, {
+                  'newspack-wizard__content--full-width': section.fullWidth
+                }),
+                children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/_jsx(SectionHeader, {
+                  className: "newspack-wizard__section-header",
+                  backNav: backNav || section.backNav,
+                  title: sectionTitle || section.title,
+                  description: sectionDescription || section.description,
+                  badges: badges || section.badges,
+                  menu: sectionMenu || section.menu,
+                  primaryAction: sectionPrimaryAction || section.primaryAction,
+                  secondaryAction: sectionSecondaryAction || section.secondaryAction,
+                  heading: 2,
+                  noMargin: true
+                }), /*#__PURE__*/_jsx(SectionComponent, _objectSpread(_objectSpread(_objectSpread({}, routerProps), sectionProps), sharedProps))]
+              });
+            }
+          }, index);
+        }), /*#__PURE__*/_jsx(Redirect, {
+          to: displayedSections[0].path
+        })]
+      })
+    })]
+  });
+  var headerActions = (actions === null || actions === void 0 ? void 0 : actions.length) > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [mainActions.map(function (action, index) {
+      return /*#__PURE__*/_jsx(Button, {
+        className: "newspack-wizard__actions__main",
+        href: action.href,
+        icon: resolveIcon(action.icon),
+        variant: action.type,
+        onClick: action.action,
+        disabled: action.disabled || false,
+        isDestructive: action.destructive || false,
+        children: action.label
+      }, index);
+    }), /*#__PURE__*/_jsx(DropdownMenu, {
+      className: (moreActions === null || moreActions === void 0 ? void 0 : moreActions.length) === 0 ? 'newspack-wizard__actions__more--primary-only' : '',
+      icon: moreVertical,
+      label: __('More', 'newspack-plugin'),
+      popoverProps: {
+        className: 'newspack-wizard__actions__more'
+      },
+      children: function children() {
+        return (
+          // Split actions into groups whenever an action opts in via `separator: true`.
+          // Consecutive MenuGroups render the WordPress-standard divider between them.
+          actions.reduce(function (groups, action) {
+            if (action.separator || groups.length === 0) {
+              groups.push([]);
+            }
+            groups[groups.length - 1].push(action);
+            return groups;
+          }, []).map(function (group, groupIndex) {
+            return /*#__PURE__*/_jsx(MenuGroup, {
+              children: group.map(function (action, index) {
+                return /*#__PURE__*/_jsx(MenuItem, {
+                  className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__actions__more__main' : 'newspack-wizard__actions__more__more',
+                  icon: action.icon,
+                  href: action.href,
+                  onClick: action.action,
+                  disabled: action.disabled || false,
+                  isDestructive: action.destructive || false,
+                  children: action.label
+                }, index);
+              })
+            }, groupIndex);
+          })
+        );
+      }
+    })]
+  }) : undefined;
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     children: [/*#__PURE__*/_jsxs("div", {
       className: classnames(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
-        'newspack-wizard__is-loading-quiet': isQuietLoading,
-        'newspack-wizard__fixed-header': fixedHeader
+        'newspack-wizard__is-loading-quiet': isQuietLoading
       }),
       children: [/*#__PURE__*/_jsxs(HashRouter, {
         hashType: "slash",
         children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/_jsx(Notice, {
           debugMode: true
-        }), /*#__PURE__*/_jsxs("div", {
-          className: "newspack-wizard__header",
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "newspack-wizard__header__inner",
-            children: /*#__PURE__*/_jsxs("div", {
-              className: "newspack-wizard__title",
-              children: [newspack_urls.dashboard !== urlWithoutHash ? /*#__PURE__*/_jsx(Button, {
-                isLink: true,
-                href: newspack_urls.dashboard,
-                label: __('Return to Dashboard', 'newspack-plugin'),
-                showTooltip: true,
-                icon: category,
-                iconSize: 36,
-                children: /*#__PURE__*/_jsx(NewspackIcon, {
-                  size: 36
-                })
-              }) : /*#__PURE__*/_jsx(NewspackIcon, {
-                size: 36
-              }), /*#__PURE__*/_jsxs("div", {
-                children: [headerText && /*#__PURE__*/_jsxs("h2", {
-                  className: "newspack-wizard__header__title",
-                  children: [headerText, sectionName && /*#__PURE__*/_jsxs("span", {
-                    className: "newspack-wizard__header__section",
-                    children: [/*#__PURE__*/_jsx("span", {
-                      className: "newspack-wizard__header__section__separator",
-                      children: " / "
-                    }), " ", sectionName]
-                  })]
-                }), subHeaderText && /*#__PURE__*/_jsx("span", {
-                  children: subHeaderText
-                })]
-              })]
-            })
-          }), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/_jsxs("div", {
-            className: "newspack-wizard__header__actions",
-            children: [mainActions.map(function (action, index) {
-              return /*#__PURE__*/_jsx(Button, {
-                className: "newspack-wizard__header__actions__main",
-                href: action.href,
-                icon: resolveIcon(action.icon),
-                variant: action.type,
-                onClick: action.action,
-                disabled: action.disabled || false,
-                isDestructive: action.destructive || false,
-                children: action.label
-              }, index);
-            }), /*#__PURE__*/_jsx(DropdownMenu, {
-              className: (moreActions === null || moreActions === void 0 ? void 0 : moreActions.length) === 0 ? 'newspack-wizard__header__actions__more--primary-only' : '',
-              icon: moreVertical,
-              label: __('More', 'newspack-plugin'),
-              popoverProps: {
-                className: 'newspack-wizard__header__actions__more'
-              },
-              children: function children() {
-                return (
-                  // Split actions into groups whenever an action opts in via `separator: true`.
-                  // Consecutive MenuGroups render the WordPress-standard divider between them.
-                  actions.reduce(function (groups, action) {
-                    if (action.separator || groups.length === 0) {
-                      groups.push([]);
-                    }
-                    groups[groups.length - 1].push(action);
-                    return groups;
-                  }, []).map(function (group, groupIndex) {
-                    return /*#__PURE__*/_jsx(MenuGroup, {
-                      children: group.map(function (action, index) {
-                        return /*#__PURE__*/_jsx(MenuItem, {
-                          className: action.type === 'primary' || action.type === 'secondary' ? 'newspack-wizard__header__actions__more__main' : 'newspack-wizard__header__actions__more__more',
-                          icon: action.icon,
-                          href: action.href,
-                          onClick: action.action,
-                          disabled: action.disabled || false,
-                          isDestructive: action.destructive || false,
-                          children: action.label
-                        }, index);
-                      })
-                    }, groupIndex);
-                  })
-                );
-              }
-            })]
-          })]
-        }), displayedSections.length > 1 && /*#__PURE__*/_jsx(TabbedNavigation, {
-          items: displayedSections,
-          children: /*#__PURE__*/_jsx(WizardError, {})
-        }), /*#__PURE__*/_jsx(HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/_jsx(ResetHeaderData, {}), /*#__PURE__*/_jsx("div", {
-          className: "newspack-wizard__main",
-          children: /*#__PURE__*/_jsxs(Switch, {
-            children: [routedSections.map(function (section, index) {
-              var _section$exact;
-              var SectionComponent = section.render;
-              var sectionProps = section.props || {};
-              return /*#__PURE__*/_jsx(Route, {
-                exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
-                path: section.path,
-                render: function render(routerProps) {
-                  return /*#__PURE__*/_jsxs("div", {
-                    className: classnames('newspack-wizard__content', className, {
-                      'newspack-wizard__content--full-width': section.fullWidth
-                    }),
-                    children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/_jsx(SectionHeader, {
-                      className: "newspack-wizard__section-header",
-                      backNav: backNav || section.backNav,
-                      title: sectionTitle || section.title,
-                      description: sectionDescription || section.description,
-                      badges: badges || section.badges,
-                      menu: sectionMenu || section.menu,
-                      primaryAction: sectionPrimaryAction || section.primaryAction,
-                      secondaryAction: sectionSecondaryAction || section.secondaryAction,
-                      heading: 1,
-                      noMargin: true
-                    }), /*#__PURE__*/_jsx(SectionComponent, _objectSpread(_objectSpread(_objectSpread({}, routerProps), sectionProps), sharedProps))]
-                  });
-                }
-              }, index);
-            }), /*#__PURE__*/_jsx(Redirect, {
-              to: displayedSections[0].path
-            })]
-          })
+        }), /*#__PURE__*/_jsx(WizardHeaderRegion, {
+          hideHeader: hideHeader,
+          headerText: headerText,
+          sections: routedSections,
+          sectionName: sectionName,
+          subTitle: subHeaderText,
+          actions: headerActions,
+          tabbedNavigation: tabbedNavigation,
+          children: content
         })]
       }), (notices === null || notices === void 0 ? void 0 : notices.length) > 0 && /*#__PURE__*/_jsx("div", {
         className: "newspack-wizard__snackbar-list",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.5.0",
+	"version": "4.6.0",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -23,9 +23,14 @@
 		"access": "public"
 	},
 	"dependencies": {
+		"@wordpress/admin-ui": "2.4.0",
+		"@wordpress/style-runtime": "^0.5.0",
+		"@wordpress/theme": "^0.16.0",
+		"@wordpress/ui": "^0.16.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"moment-range": "^3.1.1",
+		"newspack-icons": "1.1.0",
 		"qs": "^6.15.2",
 		"react-router-dom": "^5.3.4",
 		"@babel/runtime": "^7.29.7",
@@ -53,6 +58,7 @@
 		"@babel/preset-env": "^7.29.7",
 		"@babel/preset-react": "^7.29.7",
 		"@babel/preset-typescript": "^7.29.7",
+		"newspack-scripts": "5.10.0",
 		"recursive-copy": "^2.0.0"
 	},
 	"babel": {
@@ -67,8 +73,10 @@
 		"compile:cjs": "babel src --config-file ./babel.config.cjs.js --extensions='.js,.jsx,.ts,.tsx' --out-dir dist/cjs",
 		"compile:esm": "babel src --extensions='.js,.jsx,.ts,.tsx' --out-dir dist/esm",
 		"compile": "npm run compile:cjs && npm run compile:esm",
+		"test": "newspack-scripts test",
 		"prepublishOnly": "npm run clean && npm run compile && node copy-styles.js",
 		"postpublish": "npm run clean",
-		"build": "npm run clean && npm run compile && node copy-styles.js"
+		"build": "npm run clean && npm run compile && node copy-styles.js",
+		"typescript:check": "newspack-scripts typescript-check"
 	}
 }

package/src/accordion/index.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
+import { __experimentalVStack as VStack, PanelBody } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Children, Fragment, cloneElement } from '@wordpress/element';
 
 /**
  * External dependencies
@@ -12,22 +12,34 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
+import Divider from '../divider';
 import './style.scss';
 
-const Accordion = ( { children, title, defaultOpen = false } ) => {
-	const [ isOpen, setIsOpen ] = useState( defaultOpen );
+export const AccordionPanel = ( { children, className, title, defaultOpen = false } ) => (
+	<PanelBody className={ className } title={ title } initialOpen={ defaultOpen }>
+		{ children }
+	</PanelBody>
+);
+
+const Accordion = ( { children, className, hideSingleTitle = false, spacing = 6 } ) => {
+	const panels = Children.toArray( children );
+	// With nothing to collapse against, a lone panel can render open and untitled.
+	if ( hideSingleTitle && panels.length === 1 ) {
+		return (
+			<div className={ classNames( 'newspack-accordion', className ) }>
+				{ cloneElement( panels[ 0 ], { defaultOpen: true, title: undefined } ) }
+			</div>
+		);
+	}
 	return (
-		<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>
-			<div className="newspack-accordion__content">{ children }</div>
-		</details>
+		<VStack className={ classNames( 'newspack-accordion', className ) } spacing={ spacing }>
+			{ panels.map( ( panel, index ) => (
+				<Fragment key={ panel.key }>
+					{ panel }
+					{ index < panels.length - 1 && <Divider variant="secondary" marginBottom={ 0 } marginTop={ 0 } /> }
+				</Fragment>
+			) ) }
+		</VStack>
 	);
 };
 

package/src/accordion/index.test.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import Accordion, { AccordionPanel } from './index';
+
+const renderPanels = ( count, props = {} ) =>
+	render(
+		<Accordion { ...props }>
+			{ Array.from( { length: count }, ( _, i ) => (
+				<AccordionPanel key={ i } title={ `Panel ${ i }` }>
+					content
+				</AccordionPanel>
+			) ) }
+		</Accordion>
+	);
+
+const dividers = container => container.querySelectorAll( '.newspack-divider' );
+
+describe( 'Accordion dividers', () => {
+	it( 'renders no divider for a single panel', () => {
+		const { container } = renderPanels( 1 );
+		expect( container.querySelectorAll( '.components-panel__body' ) ).toHaveLength( 1 );
+		expect( dividers( container ) ).toHaveLength( 0 );
+	} );
+
+	it( 'renders a divider between panels but not after the last', () => {
+		const { container } = renderPanels( 3 );
+		expect( container.querySelectorAll( '.components-panel__body' ) ).toHaveLength( 3 );
+		expect( dividers( container ) ).toHaveLength( 2 );
+		expect( container.querySelector( '.newspack-accordion' ).lastElementChild ).not.toHaveClass( 'newspack-divider' );
+	} );
+
+	it( 'renders secondary dividers', () => {
+		const { container } = renderPanels( 2 );
+		expect( dividers( container )[ 0 ] ).toHaveClass( 'newspack-divider--variant-secondary' );
+	} );
+} );
+
+describe( 'Accordion hideSingleTitle', () => {
+	it( 'keeps the title on a lone panel by default', () => {
+		renderPanels( 1 );
+		expect( screen.getByRole( 'button', { name: 'Panel 0' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'drops the title and opens a lone panel when set', () => {
+		const { container } = renderPanels( 1, { hideSingleTitle: true } );
+		expect( screen.queryByRole( 'button', { name: 'Panel 0' } ) ).not.toBeInTheDocument();
+		expect( container.querySelector( '.components-panel__body' ) ).toHaveClass( 'is-opened' );
+		expect( screen.getByText( 'content' ) ).toBeInTheDocument();
+	} );
+
+	it( 'leaves titles alone when there is more than one panel', () => {
+		renderPanels( 2, { hideSingleTitle: true } );
+		expect( screen.getByRole( 'button', { name: 'Panel 0' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Panel 1' } ) ).toBeInTheDocument();
+	} );
+} );

package/src/accordion/style.scss

@@ -1,31 +1,35 @@
-@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
+// Sit flush with the surrounding column: core insets panels horizontally, which
+// would misalign them against the section they belong to.
 .newspack-accordion {
-	border: 1px solid wp-colors.$gray-300;
+	.components-panel__body {
+		border: 0;
 
-	&__icon {
-		transition: transform 200ms ease-out;
-		transform: rotate(90deg);
+		> .components-panel__body-title:hover {
+			background: none;
+		}
 	}
 
-	&--is-open {
-		.newspack-accordion {
-			&__icon {
-				transform: rotate(-90deg);
-			}
+	.components-panel__body.is-opened {
+		padding: 0;
+
+		> .components-panel__body-title {
+			margin: 0 0 wp-vars.$grid-unit-30;
 		}
 	}
-	summary {
-		padding: 16px 32px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
-		font-size: 14px;
-		font-weight: bold;
-	}
 
-	&__content {
-		padding: 16px 32px;
+	.components-panel__body-toggle.components-button {
+		@include wp-mixins.heading-large();
+		padding: 0;
+
+		.components-panel__arrow {
+			right: 0;
+		}
+
+		&:focus:not(:focus-visible) {
+			box-shadow: none;
+		}
 	}
 }

package/src/action-card/style.scss

@@ -77,28 +77,6 @@
 			padding: 0 4px;
 		}
 
-		&.mv0 {
-			border-left-color: wp-colors.$gray-300;
-			border-radius: 0;
-			border-right-color: wp-colors.$gray-300;
-
-			&:first-of-type {
-				border-top-color: wp-colors.$gray-300;
-				border-top-left-radius: 3px;
-				border-top-right-radius: 3px;
-			}
-
-			&:last-of-type {
-				border-bottom-color: wp-colors.$gray-300;
-				border-bottom-left-radius: 3px;
-				border-bottom-right-radius: 3px;
-			}
-
-			& + & {
-				margin-top: -1px;
-			}
-		}
-
 		&.newspack-card__is-disabled,
 		&.newspack-card__is-primary,
 		&.newspack-card__is-secondary,