newspack-components 4.9.2 → 4.10.0

package/dist/esm/card/style.scss

@@ -3,10 +3,11 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-card {
 	border-radius: 2px;
-	border: 1px solid wp-colors.$gray-300;
+	border: 1px solid var( --wpds-color-stroke-surface-neutral, #{wp-colors.$gray-300} );
 	color: wp-colors.$gray-900;
 	margin: 32px 0;
 	padding: 16px 48px;
@@ -101,10 +102,6 @@
 
 	// Margin
 
-	&.mt64 {
-		margin-top: 64px;
-	}
-
 	&.mt16 {
 		margin-top: 16px;
 	}
@@ -128,10 +125,10 @@
 		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
-		margin: 32px 0;
+		margin: wp-vars.$grid-unit-40 0;
 
 		@media screen and ( min-width: 744px ) {
-			margin: 64px 0;
+			margin: wp-vars.$grid-unit-60 0;
 		}
 	}
 

package/dist/esm/card-feature/index.js

@@ -51,7 +51,8 @@ var _CardFeature = function CardFeature(_ref) {
   var describedById = requirements ? badgeId : undefined;
   var isMuted = !!requirements;
   var classes = classnames('newspack-card-feature', className, {
-    'newspack-card-feature--muted': isMuted
+    'newspack-card-feature--muted': isMuted,
+    'newspack-card-feature--not-enabled': !enabled
   });
   var badge;
   if (requirements) {

package/dist/esm/card-feature/index.test.js

@@ -490,4 +490,17 @@ describe('CardFeature', function () {
     }));
     expect(container.querySelector('.newspack-card-feature--muted')).toBeInTheDocument();
   });
+  it('marks the card as not enabled only when enabled is false', function () {
+    var _render13 = render(/*#__PURE__*/_jsx(CardFeature, {
+        title: "Content gifting"
+      })),
+      container = _render13.container,
+      rerender = _render13.rerender;
+    expect(container.querySelector('.newspack-card-feature--not-enabled')).toBeInTheDocument();
+    rerender(/*#__PURE__*/_jsx(CardFeature, {
+      title: "Content gifting",
+      enabled: true
+    }));
+    expect(container.querySelector('.newspack-card-feature--not-enabled')).toBeNull();
+  });
 });

package/dist/esm/card-feature/style.scss

@@ -2,6 +2,7 @@
  * CardFeature
  */
 
+@use "~@wordpress/base-styles/colors" as wp-colors;
 @use "~@wordpress/base-styles/mixins" as wp-mixins;
 @use "~@wordpress/base-styles/variables" as wp-vars;
 @use "../mixins" as np-mixins;
@@ -9,6 +10,10 @@
 .newspack-card-feature {
 	height: 100%;
 
+	&.newspack-card-feature--not-enabled {
+		border-color: var( --wpds-color-stroke-surface-neutral-weak, #{wp-colors.$gray-100} );
+	}
+
 	&__actions {
 		margin-top: auto;
 

package/dist/esm/color-picker/index.js

@@ -1,10 +1,13 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * WordPress dependencies.
  */
 import { BaseControl, ColorPicker as ColorPickerComponent } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { useState, useRef } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 
 /**
  * External dependencies.
@@ -32,6 +35,7 @@ var InteractiveDiv = utils.InteractiveDiv;
  * @param {string}             [props.color]     - Default color.
  * @param {Function}           props.onChange    - Function to call when the color changes.
  * @param {string}             [props.className] - Additional class name.
+ * @param {boolean}            [props.disabled]  - Whether the color is shown but cannot be changed.
  * @return {JSX.Element} ColorPicker component.
  */
 var _ColorPicker = function ColorPicker(_ref) {
@@ -40,21 +44,30 @@ var _ColorPicker = function ColorPicker(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? '#ffffff' : _ref$color,
     onChange = _ref.onChange,
-    className = _ref.className;
+    className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isExpanded = _useState2[0],
     setIsExpanded = _useState2[1];
-  var ref = useRef();
+  var ref = useRef(undefined);
   var id = useInstanceId(_ColorPicker, 'newspack-color-picker');
   var labelId = "".concat(id, "-label");
   var colordColor = colord(color);
   hooks.useOnClickOutside(ref, function () {
     return setIsExpanded(false);
   });
+  useEffect(function () {
+    if (disabled) {
+      setIsExpanded(false);
+    }
+  }, [disabled]);
   return /*#__PURE__*/_jsxs(BaseControl, {
     id: id,
-    className: classnames('newspack-color-picker', className),
+    className: classnames('newspack-color-picker', {
+      'is-disabled': disabled
+    }, className),
     help: help,
     __nextHasNoMarginBottom: true,
     children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {
@@ -65,19 +78,23 @@ var _ColorPicker = function ColorPicker(_ref) {
       "aria-labelledby": labelId,
       "aria-describedby": help ? "".concat(id, "__help") : undefined,
       "aria-expanded": isExpanded,
+      "aria-disabled": disabled || undefined,
+      tabIndex: disabled ? -1 : 0,
       className: 'newspack-color-picker__expander',
       onClick: function onClick() {
-        return setIsExpanded(!isExpanded);
+        return !disabled && setIsExpanded(!isExpanded);
       },
-      style: {
+      style: _objectSpread(_objectSpread({}, disabled && {
+        cursor: 'default'
+      }), {}, {
         backgroundColor: color,
         color: colordColor.contrast() > colordColor.contrast('#000000') ? '#ffffff' : '#000000'
-      },
+      }),
       children: color
     }), /*#__PURE__*/_jsx("div", {
       className: "newspack-color-picker__main",
       ref: ref,
-      children: isExpanded && /*#__PURE__*/_jsx(ColorPickerComponent, {
+      children: isExpanded && !disabled && /*#__PURE__*/_jsx(ColorPickerComponent, {
         color: color,
         onChange: onChange,
         enableAlpha: false

package/dist/esm/color-picker/index.test.js

@@ -75,4 +75,51 @@ describe('ColorPicker', function () {
       getByRole = _render7.getByRole;
     expect(getByRole('button')).not.toHaveAttribute('aria-describedby');
   });
+  describe('when disabled', function () {
+    it('should not open on click', function () {
+      var _render8 = render(/*#__PURE__*/_jsx(ColorPicker, {
+          label: "Background color",
+          disabled: true,
+          onChange: function onChange() {}
+        })),
+        getByRole = _render8.getByRole;
+      var expander = getByRole('button');
+      fireEvent.click(expander);
+      expect(expander).toHaveAttribute('aria-expanded', 'false');
+      expect(expander).toHaveAttribute('aria-disabled', 'true');
+    });
+    it('should not open on Enter', function () {
+      var _render9 = render(/*#__PURE__*/_jsx(ColorPicker, {
+          label: "Background color",
+          disabled: true,
+          onChange: function onChange() {}
+        })),
+        getByRole = _render9.getByRole;
+      var expander = getByRole('button');
+      fireEvent.keyDown(expander, {
+        key: 'Enter',
+        keyCode: 13
+      });
+      expect(expander).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('should stay closed once re-enabled if it was open when disabled', function () {
+      var _render0 = render(/*#__PURE__*/_jsx(ColorPicker, {
+          label: "Background color",
+          onChange: function onChange() {}
+        })),
+        getByRole = _render0.getByRole,
+        rerender = _render0.rerender;
+      fireEvent.click(getByRole('button'));
+      rerender(/*#__PURE__*/_jsx(ColorPicker, {
+        label: "Background color",
+        disabled: true,
+        onChange: function onChange() {}
+      }));
+      rerender(/*#__PURE__*/_jsx(ColorPicker, {
+        label: "Background color",
+        onChange: function onChange() {}
+      }));
+      expect(getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
 });

package/dist/esm/color-picker/style.scss

@@ -8,25 +8,28 @@
 .newspack-color-picker {
 	position: relative;
 	&__expander {
-		box-shadow: inset 0 0 0 1px rgba(wp-colors.$black, 0.54);
-		border-radius: wp-vars.$radius-small;
-		height: wp-vars.$grid-unit-80;
-		padding: wp-vars.$grid-unit-10;
-		text-align: right;
+		box-shadow: inset 0 0 0 var(--wpds-border-width-xs, #{wp-vars.$border-width}) rgba(wp-colors.$black, 0.54);
+		border-radius: var(--wpds-border-radius-sm, #{wp-vars.$radius-small});
+		height: var(--wpds-dimension-size-lg, #{wp-vars.$grid-unit-50});
+		line-height: calc(var(--wpds-dimension-size-lg, #{wp-vars.$grid-unit-50}) - var(--wpds-dimension-padding-md, #{wp-vars.$grid-unit-15}));
+		padding: calc(var(--wpds-dimension-padding-md, #{wp-vars.$grid-unit-15}) / 2) var(--wpds-dimension-padding-md, #{wp-vars.$grid-unit-15});
 		text-transform: uppercase;
 
 		&:focus-visible {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-color: wp-colors.$white;
+			box-shadow: 0 0 0 var(--wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback}) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color));
 		}
 	}
 
+	&.is-disabled &__expander {
+		opacity: 0.5;
+	}
+
 	&__main {
-		background: wp-colors.$white;
+		background: var(--wpds-color-background-surface-neutral-strong, #{wp-colors.$white});
 		box-shadow: wp-vars.$elevation-small;
-		margin: wp-vars.$grid-unit-10 0 0;
+		margin: var(--wpds-dimension-gap-sm, #{wp-vars.$grid-unit-10}) 0 0;
 		position: absolute;
-		z-index: 2;
+		z-index: 3;
 
 		&:empty {
 			display: none;

package/dist/esm/debug-badge/style.scss

@@ -10,7 +10,7 @@
 	background: np-colors.$primary-600;
 	border-radius: wp-vars.$radius-round;
 	bottom: 0;
-	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	box-shadow: wp-vars.$elevation-small;
 	display: grid;
 	height: wp-vars.$button-size;
 	margin: 0 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;

package/dist/esm/divider/index.js

@@ -37,9 +37,9 @@ var Divider = function Divider(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className,
     _ref$marginBottom = _ref.marginBottom,
-    marginBottom = _ref$marginBottom === void 0 ? 64 : _ref$marginBottom,
+    marginBottom = _ref$marginBottom === void 0 ? 48 : _ref$marginBottom,
     _ref$marginTop = _ref.marginTop,
-    marginTop = _ref$marginTop === void 0 ? 64 : _ref$marginTop,
+    marginTop = _ref$marginTop === void 0 ? 48 : _ref$marginTop,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/divider/style.scss

@@ -3,21 +3,23 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-divider {
 	background: transparent;
 	border: 0;
 	display: block;
 	height: 1px;
-	margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
+	margin-bottom: min(#{wp-vars.$grid-unit-40}, var(--divider-margin-bottom, #{wp-vars.$grid-unit-60}));
 	margin-left: 0;
 	margin-right: 0;
-	margin-top: min(32px, var(--divider-margin-top, 64px));
+	margin-top: min(#{wp-vars.$grid-unit-40}, var(--divider-margin-top, #{wp-vars.$grid-unit-60}));
 	padding: 0;
 
-	@media screen and (min-width: 783px) {
-		margin-bottom: var(--divider-margin-bottom, 64px);
-		margin-top: var(--divider-margin-top, 64px);
+	@include wp-mixins.break-medium {
+		margin-bottom: var(--divider-margin-bottom, #{wp-vars.$grid-unit-60});
+		margin-top: var(--divider-margin-top, #{wp-vars.$grid-unit-60});
 	}
 
 	// Alignment

package/dist/esm/grid/style.scss

@@ -3,6 +3,7 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-grid {
 	display: grid;
@@ -41,9 +42,9 @@
 		grid-gap: 32px;
 	}
 
-	// Gutter 64
-	&__gutter-64 {
-		grid-gap: 64px;
+	// Gutter 48
+	&__gutter-48 {
+		grid-gap: wp-vars.$grid-unit-60;
 	}
 
 	// Row Gap 0
@@ -143,16 +144,6 @@
 		&__columns-12 {
 			grid-template-columns: repeat(12, 1fr);
 		}
-
-		// Gutter 48
-		&__gutter-48 {
-			grid-gap: 48px;
-		}
-
-		// Gutter 64
-		&__gutter-64 {
-			grid-gap: 64px;
-		}
 	}
 
 	// Children
@@ -194,9 +185,6 @@
 		&.newspack-grid__gutter-32 > * {
 			padding: 32px;
 		}
-		&.newspack-grid__gutter-64 > * {
-			padding: 64px;
-		}
 	}
 
 	.components-base-control {

package/dist/esm/image-upload/index.js

@@ -78,11 +78,14 @@ var ImageUpload = /*#__PURE__*/function (_Component) {
         disabled = _this$props.disabled,
         help = _this$props.help,
         image = _this$props.image,
+        imageStyle = _this$props.imageStyle,
         isCovering = _this$props.isCovering,
         label = _this$props.label,
         onChange = _this$props.onChange,
         _this$props$style = _this$props.style,
-        style = _this$props$style === void 0 ? {} : _this$props$style;
+        style = _this$props$style === void 0 ? {} : _this$props$style,
+        _this$props$withMargi = _this$props.withMargin,
+        withMargin = _this$props$withMargi === void 0 ? true : _this$props$withMargi;
       var classes = classnames('newspack-image-upload__image', {
         'newspack-image-upload__image--has-image': image
       }, {
@@ -90,7 +93,9 @@ var ImageUpload = /*#__PURE__*/function (_Component) {
       });
       return /*#__PURE__*/_jsxs(BaseControl, {
         __nextHasNoMarginBottom: true,
-        className: classnames('newspack-image-upload', className),
+        className: classnames('newspack-image-upload', {
+          'newspack-image-upload--no-margin': !withMargin
+        }, className),
         help: help,
         children: [label && /*#__PURE__*/_jsx(BaseControl.VisualLabel, {
           children: label
@@ -101,7 +106,8 @@ var ImageUpload = /*#__PURE__*/function (_Component) {
             children: [/*#__PURE__*/_jsx("img", {
               "data-testid": "image-upload",
               src: image.url,
-              alt: __('Image preview', 'newspack-plugin')
+              alt: __('Image preview', 'newspack-plugin'),
+              style: imageStyle
             }), /*#__PURE__*/_jsxs("div", {
               className: "newspack-image-upload__controls",
               children: [/*#__PURE__*/_jsx(Button, {

package/dist/esm/image-upload/style.scss

@@ -7,6 +7,9 @@
 
 .newspack-image-upload {
 	margin: wp-vars.$grid-unit-40 0;
+	&--no-margin {
+		margin: 0;
+	}
 	&__image {
 		align-items: center;
 		background-position: center;

package/dist/esm/index.js

@@ -4,7 +4,6 @@ export { default as AutocompleteWithSuggestions } from './autocomplete-with-sugg
 export { default as AutocompleteWithLatestPosts } from './autocomplete-with-latest-posts';
 export { default as Breadcrumbs } from './breadcrumbs';
 export { default as Button } from './button';
-export { default as BoxContrast } from './box-contrast';
 export { default as Card } from './card';
 export { default as CardFeature } from './card-feature';
 export { default as CardForm } from './card-form';

package/dist/esm/info-button/style.scss

@@ -39,7 +39,7 @@
 .newspack-info-button__popup {
 	background-color: wp-colors.$gray-900;
 	border-radius: var(--wpds-border-radius-md, #{wp-vars.$radius-medium});
-	box-shadow: var(--wpds-elevation-sm, #{wp-vars.$elevation-small});
+	box-shadow: wp-vars.$elevation-small;
 	color: wp-colors.$white;
 	outline: 0;
 	padding: var(--wpds-dimension-padding-xs, #{wp-vars.$grid-unit-05}) var(--wpds-dimension-padding-sm, #{wp-vars.$grid-unit-10});

package/dist/esm/modal/style.scss

@@ -83,15 +83,14 @@
 		}
 	}
 
-	.components-modal__content {
-		> * {
-			&:first-child {
-				margin-top: 0;
-			}
+	.components-modal__children-container {
+		> :first-child,
+		> .screen-reader-text:first-child + * {
+			margin-top: 0;
+		}
 
-			&:last-child {
-				margin-bottom: 0;
-			}
+		> :last-child {
+			margin-bottom: 0;
 		}
 	}
 }

package/dist/esm/page/style.scss

@@ -9,10 +9,10 @@
 // postcss-import cannot resolve exports maps, and resolving the public
 // specifier through sass/webpack leaks a bogus `wp-theme/design-tokens.css`
 // script dependency into consumers' asset manifests, which silently blocks
-// their enqueues. If upstream moves `src/prebuilt/`, this fails loudly at
+// their enqueues. If upstream moves `prebuilt/`, this fails loudly at
 // build time.
 /* stylelint-disable-next-line no-invalid-position-at-import-rule -- sass @use must precede the CSS @import; postcss-import inlines it at build time. */
-@import "@wordpress/theme/src/prebuilt/css/design-tokens.css";
+@import "@wordpress/theme/prebuilt/css/design-tokens.css";
 
 // Newspack brand mapping: the wpds brand color tokens ship in WordPress
 // blue; remap them onto the Newspack primary scale so every design-system
@@ -51,7 +51,6 @@
 }
 
 .newspack-page__header {
-	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
 	background: var(--wpds-color-background-surface-neutral-strong);
 	border-block-end: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
@@ -62,7 +61,6 @@
 }
 
 .newspack-page__header-subtitle {
-	/* stylelint-disable-next-line plugin-wpds/no-unknown-ds-tokens -- the plugin's token list lags the prebuilt design-tokens.css names. */
 	color: var(--wpds-color-foreground-content-neutral-weak);
 	padding-block-end: var(--wpds-dimension-padding-xs);
 }

package/dist/esm/plugin-settings/style.scss

@@ -1,6 +1,6 @@
 .newspack-card:not(.newspack-settings__no-border) {
 	.newspack-action-card__region-children {
-		> .newspack-grid {
+		> .newspack-grid:not(.newspack-grid--no-margin) {
 			margin: 32px 0 0 !important;
 		}
 	}

package/dist/esm/section-header/index.js

@@ -32,6 +32,7 @@ import classnames from 'classnames';
  * @property {boolean}            [centered=false]   - Indicates if the header is centered.
  * @property {?string}            [className=null]   - Additional CSS class name, applied to the outer container.
  * @property {string|Function|*}  [description]      - Description of the section.
+ * @property {boolean}            [fullWidthText]    - Lets the title and description span the full header width. With a back nav they are otherwise capped at half, which suits a page-wide header but not one already sitting in a column.
  * @property {number}             [heading=2]        - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
  * @property {string|Function|*}  [icon]             - Icon to display in the header.
  * @property {boolean}            [isWhite=false]    - Indicates if the header should use a white theme.
@@ -62,6 +63,8 @@ var SectionHeader = function SectionHeader(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     _ref$description = _ref.description,
     description = _ref$description === void 0 ? '' : _ref$description,
+    _ref$fullWidthText = _ref.fullWidthText,
+    fullWidthText = _ref$fullWidthText === void 0 ? false : _ref$fullWidthText,
     _ref$heading = _ref.heading,
     heading = _ref$heading === void 0 ? 2 : _ref$heading,
     _ref$icon = _ref.icon,
@@ -83,7 +86,7 @@ var SectionHeader = function SectionHeader(_ref) {
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children;
   // If id is in the URL as a scrollTo param, scroll to it on render.
-  var ref = useRef();
+  var ref = useRef(undefined);
   useEffect(function () {
     var params = new Proxy(new URLSearchParams(window.location.search), {
       get: function get(searchParams, prop) {
@@ -159,7 +162,7 @@ var SectionHeader = function SectionHeader(_ref) {
   }
   return /*#__PURE__*/_jsxs("div", {
     id: id,
-    className: classnames('newspack-section-header__container', backNav && 'newspack-section-header--has-back-nav', primaryAction && 'newspack-section-header--has-primary-action', className),
+    className: classnames('newspack-section-header__container', backNav && 'newspack-section-header--has-back-nav', fullWidthText && 'newspack-section-header--full-width-text', primaryAction && 'newspack-section-header--has-primary-action', className),
     ref: ref,
     children: [/*#__PURE__*/_jsxs(Grid, {
       columns: 1,

package/dist/esm/section-header/style.scss

@@ -9,7 +9,7 @@
 
 .newspack-section-header {
 	flex: 1;
-	margin: 64px 0 32px;
+	margin: wp-vars.$grid-unit-60 0 wp-vars.$grid-unit-40;
 
 	&__container {
 		position: relative;
@@ -17,7 +17,7 @@
 			text-wrap: balance;
 		}
 		&:not(:first-child) {
-			margin-top: 48px;
+			margin-top: wp-vars.$grid-unit-60;
 		}
 		&:has(> .newspack-section-header--no-margin) {
 			margin-top: 0;
@@ -34,7 +34,7 @@
 				flex-direction: row;
 			}
 		}
-		&.newspack-section-header--has-back-nav {
+		&.newspack-section-header--has-back-nav:not(.newspack-section-header--full-width-text) {
 			@include wp-mixins.break-wide {
 				.newspack-section-header__title-container,
 				p {

package/dist/esm/settings/style.scss

@@ -145,7 +145,7 @@
 			}
 
 			& + & {
-				margin-top: 64px;
+				margin-top: wp-vars.$grid-unit-60;
 			}
 		}
 	}

package/dist/esm/style-card/index.js

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -62,13 +62,12 @@ var StyleCard = /*#__PURE__*/function (_Component) {
           }) : /*#__PURE__*/_jsx("img", {
             src: image,
             alt: cardTitle + ' ' + __('Thumbnail', 'newspack-plugin')
+          }), isActive && /*#__PURE__*/_jsx(VisuallyHidden, {
+            children: __('Selected', 'newspack-plugin')
           }), /*#__PURE__*/_jsxs("div", {
             className: "newspack-style-card__actions",
-            children: [isActive ? /*#__PURE__*/_jsx("span", {
-              className: "newspack-style-card__actions__badge",
-              children: __('Selected', 'newspack-plugin')
-            }) : /*#__PURE__*/_jsx(Button, {
-              variant: "link",
+            children: [!isActive && /*#__PURE__*/_jsx(Button, {
+              variant: "tertiary",
               onClick: onClick,
               "aria-label": ariaLabel ? ariaLabel : __('Select', 'newspack-plugin') + ' ' + cardTitle,
               tabIndex: "0",
@@ -76,7 +75,7 @@ var StyleCard = /*#__PURE__*/function (_Component) {
             }), url && /*#__PURE__*/_jsx(WebPreview, {
               url: url,
               label: __('View Demo', 'newspack-plugin'),
-              variant: "link"
+              variant: "tertiary"
             })]
           })]
         }), cardTitle && /*#__PURE__*/_jsx("div", {

package/dist/esm/style-card/style.scss

@@ -48,11 +48,13 @@
 
 		.newspack-style-card__is-active & {
 			border-color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 
-			img {
-				position: relative;
-				z-index: -1;
+			&::after {
+				box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+				content: "";
+				inset: 0;
+				pointer-events: none;
+				position: absolute;
 			}
 		}
 	}
@@ -74,18 +76,12 @@
 			display: none;
 		}
 
-		&__badge,
 		.components-button {
 			margin: 4px;
 			opacity: 0;
 			transition: opacity 125ms ease-in-out;
 		}
 
-		&__badge {
-			color: var(--wp-admin-theme-color);
-			font-weight: bold;
-		}
-
 		.newspack-style-card__is-active & {
 			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 		}

package/dist/esm/style.scss

@@ -1,4 +1,5 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 @use "../../colors/colors.module" as np-colors;
 
 :root {
@@ -21,14 +22,14 @@
 	gap: 16px;
 	justify-content: flex-start;
 	align-items: center;
-	margin: 64px 0 32px;
+	margin: wp-vars.$grid-unit-60 0 wp-vars.$grid-unit-40;
 
 	&:empty {
 		display: none;
 	}
 
 	+ .newspack-card {
-		margin-top: 64px;
+		margin-top: wp-vars.$grid-unit-60;
 	}
 }