newspack-components 4.9.2 → 4.10.0

package/src/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/src/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.
@@ -57,6 +58,7 @@ const SectionHeader = ( {
 	centered = false,
 	className = null,
 	description = '',
+	fullWidthText = false,
 	heading = 2,
 	icon = null,
 	isWhite = false,
@@ -71,7 +73,7 @@ const SectionHeader = ( {
 	children = null,
 } ) => {
 	// If id is in the URL as a scrollTo param, scroll to it on render.
-	const ref = useRef();
+	const ref = useRef( undefined );
 	useEffect( () => {
 		const params = new Proxy( new URLSearchParams( window.location.search ), {
 			get: ( searchParams, prop ) => searchParams.get( prop ),
@@ -154,6 +156,7 @@ const SectionHeader = ( {
 			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
 			) }

package/src/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/src/settings/style.scss

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

package/src/style-card/index.js

@@ -7,7 +7,7 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -35,12 +35,11 @@ class StyleCard extends Component {
 					) : (
 						<img src={ image } alt={ cardTitle + ' ' + __( 'Thumbnail', 'newspack-plugin' ) } />
 					) }
+					{ isActive && <VisuallyHidden>{ __( 'Selected', 'newspack-plugin' ) }</VisuallyHidden> }
 					<div className="newspack-style-card__actions">
-						{ isActive ? (
-							<span className="newspack-style-card__actions__badge">{ __( 'Selected', 'newspack-plugin' ) }</span>
-						) : (
+						{ ! isActive && (
 							<Button
-								variant="link"
+								variant="tertiary"
 								onClick={ onClick }
 								aria-label={ ariaLabel ? ariaLabel : __( 'Select', 'newspack-plugin' ) + ' ' + cardTitle }
 								tabIndex="0"
@@ -48,7 +47,7 @@ class StyleCard extends Component {
 								{ __( 'Select', 'newspack-plugin' ) }
 							</Button>
 						) }
-						{ url && <WebPreview url={ url } label={ __( 'View Demo', 'newspack-plugin' ) } variant="link" /> }
+						{ url && <WebPreview url={ url } label={ __( 'View Demo', 'newspack-plugin' ) } variant="tertiary" /> }
 					</div>
 				</div>
 				{ cardTitle && <div className="newspack-style-card__title">{ cardTitle }</div> }

package/src/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/src/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;
 	}
 }
 

package/src/tabbed-navigation/style.scss

@@ -54,7 +54,6 @@
 
 		&[data-disabled],
 		&[aria-disabled="true"] {
-			/* 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-interactive-neutral-disabled, #{wp-colors.$gray-600} );
 			pointer-events: none;
 		}

package/src/with-wizard-screen/style.scss

@@ -3,6 +3,7 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 @use "../../../colors/colors.module" as np-colors;
 
 .newspack-wizard {
@@ -94,10 +95,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;
 			}
 		}
 		&:not(.newspack-wizard__content--full-width) {

package/src/wizard/index.js

@@ -371,6 +371,7 @@ const Wizard = (
 				{ mainActions.map( ( action, index ) => (
 					<Button
 						key={ index }
+						aria-label={ action.ariaLabel }
 						className="newspack-wizard__actions__main"
 						href={ action.href }
 						icon={ resolveIcon( action.icon ) }
@@ -404,6 +405,7 @@ const Wizard = (
 									{ group.map( ( action, index ) => (
 										<MenuItem
 											key={ index }
+											aria-label={ action.ariaLabel }
 											className={
 												action.type === 'primary' || action.type === 'secondary'
 													? 'newspack-wizard__actions__more__main'

package/dist/cjs/box-contrast/index.js

@@ -1,53 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _color = require("../utils/color");
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["hexColor", "isInverted", "children"];
-/**
- * Box Contrast
- *
- * can be used to dynamically assign black or white color/background-color based on a hex color.
- * Black/white can be assigned to either text or background-color.
- */
-/**
- * Dependencies
- */
-/**
- * Box Contrast component
- *
- * @return JSX.Element
- */
-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) { (0, _defineProperty2["default"])(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; }
-var BoxContrast = function BoxContrast(_ref) {
-  var hexColor = _ref.hexColor,
-    _ref$isInverted = _ref.isInverted,
-    isInverted = _ref$isInverted === void 0 ? false : _ref$isInverted,
-    children = _ref.children,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var contrastColor;
-  if (hexColor === '#f0f0f0') {
-    contrastColor = '#1e1e1e';
-  } else {
-    contrastColor = (0, _color.getContrast)(hexColor);
-  }
-  var style = isInverted ? {
-    color: hexColor,
-    backgoundColor: contrastColor
-  } : {
-    backgroundColor: hexColor,
-    color: contrastColor
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
-    style: style,
-    children: children
-  }));
-};
-var _default = exports["default"] = BoxContrast;

package/dist/cjs/utils/color.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getContrast = getContrast;
-/**
- * Determine if black or white should be used based on a contrast ratio.
- *
- * @param hexcolor Hex code for determining contrast
- * @return black or white string
- */
-function getContrast(hexcolor) {
-  if (hexcolor.charAt(0) === '#') {
-    hexcolor = hexcolor.slice(1);
-  }
-
-  // Normalize to 6 character hex code if needed
-  if (hexcolor.length === 3) {
-    hexcolor = hexcolor.split('').map(function (hex) {
-      return hex + hex;
-    }).join('');
-  }
-
-  // Convert to RGB value
-  var r = parseInt(hexcolor.substring(0, 2), 16);
-  var g = parseInt(hexcolor.substring(2, 4), 16);
-  var b = parseInt(hexcolor.substring(4), 16);
-
-  // Get YIQ ratio
-  var yiq = (r * 299 + g * 587 + b * 114) / 1000;
-
-  // Check contrast
-  return yiq >= 128 ? 'black' : 'white';
-}

package/dist/esm/box-contrast/index.js

@@ -1,48 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["hexColor", "isInverted", "children"];
-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; }
-/**
- * Box Contrast
- *
- * can be used to dynamically assign black or white color/background-color based on a hex color.
- * Black/white can be assigned to either text or background-color.
- */
-
-/**
- * Dependencies
- */
-import { getContrast } from '../utils/color';
-
-/**
- * Box Contrast component
- *
- * @return JSX.Element
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-var BoxContrast = function BoxContrast(_ref) {
-  var hexColor = _ref.hexColor,
-    _ref$isInverted = _ref.isInverted,
-    isInverted = _ref$isInverted === void 0 ? false : _ref$isInverted,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var contrastColor;
-  if (hexColor === '#f0f0f0') {
-    contrastColor = '#1e1e1e';
-  } else {
-    contrastColor = getContrast(hexColor);
-  }
-  var style = isInverted ? {
-    color: hexColor,
-    backgoundColor: contrastColor
-  } : {
-    backgroundColor: hexColor,
-    color: contrastColor
-  };
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
-    style: style,
-    children: children
-  }));
-};
-export default BoxContrast;

package/dist/esm/utils/color.js

@@ -1,29 +0,0 @@
-/**
- * Determine if black or white should be used based on a contrast ratio.
- *
- * @param hexcolor Hex code for determining contrast
- * @return black or white string
- */
-export function getContrast(hexcolor) {
-  if (hexcolor.charAt(0) === '#') {
-    hexcolor = hexcolor.slice(1);
-  }
-
-  // Normalize to 6 character hex code if needed
-  if (hexcolor.length === 3) {
-    hexcolor = hexcolor.split('').map(function (hex) {
-      return hex + hex;
-    }).join('');
-  }
-
-  // Convert to RGB value
-  var r = parseInt(hexcolor.substring(0, 2), 16);
-  var g = parseInt(hexcolor.substring(2, 4), 16);
-  var b = parseInt(hexcolor.substring(4), 16);
-
-  // Get YIQ ratio
-  var yiq = (r * 299 + g * 587 + b * 114) / 1000;
-
-  // Check contrast
-  return yiq >= 128 ? 'black' : 'white';
-}

package/src/box-contrast/index.tsx

@@ -1,44 +0,0 @@
-/**
- * Box Contrast
- *
- * can be used to dynamically assign black or white color/background-color based on a hex color.
- * Black/white can be assigned to either text or background-color.
- */
-
-/**
- * Dependencies
- */
-import { getContrast } from '../utils/color';
-
-/**
- * Box Contrast component
- *
- * @return JSX.Element
- */
-const BoxContrast = ( {
-	hexColor,
-	isInverted = false,
-	children,
-	...props
-}: {
-	children: string | JSX.Element;
-	hexColor: string;
-	isInverted?: boolean;
-	className?: string;
-} ) => {
-	let contrastColor;
-	if ( hexColor === '#f0f0f0' ) {
-		contrastColor = '#1e1e1e';
-	} else {
-		contrastColor = getContrast( hexColor );
-	}
-	const style = isInverted ? { color: hexColor, backgoundColor: contrastColor } : { backgroundColor: hexColor, color: contrastColor };
-
-	return (
-		<div { ...props } style={ style }>
-			{ children }
-		</div>
-	);
-};
-
-export default BoxContrast;

package/src/utils/color.ts

@@ -1,32 +0,0 @@
-/**
- * Determine if black or white should be used based on a contrast ratio.
- *
- * @param hexcolor Hex code for determining contrast
- * @return black or white string
- */
-export function getContrast( hexcolor: string ) {
-	if ( hexcolor.charAt( 0 ) === '#' ) {
-		hexcolor = hexcolor.slice( 1 );
-	}
-
-	// Normalize to 6 character hex code if needed
-	if ( hexcolor.length === 3 ) {
-		hexcolor = hexcolor
-			.split( '' )
-			.map( function ( hex ) {
-				return hex + hex;
-			} )
-			.join( '' );
-	}
-
-	// Convert to RGB value
-	const r = parseInt( hexcolor.substring( 0, 2 ), 16 );
-	const g = parseInt( hexcolor.substring( 2, 4 ), 16 );
-	const b = parseInt( hexcolor.substring( 4 ), 16 );
-
-	// Get YIQ ratio
-	const yiq = ( r * 299 + g * 587 + b * 114 ) / 1000;
-
-	// Check contrast
-	return yiq >= 128 ? 'black' : 'white';
-}