newspack-components 3.0.0 → 3.1.0

package/dist/cjs/action-card/index.js

@@ -81,7 +81,8 @@ class ActionCard extends _element.Component {
       hasGreyHeader,
       hasWhiteHeader,
       isPending,
-      expandable = false
+      expandable = false,
+      isButtonEnabled = false
     } = this.props;
     const {
       expanded
@@ -163,7 +164,7 @@ class ActionCard extends _element.Component {
             isLink: true,
             children: actionText
           }) : onClick || hasInternalLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-            disabled: disabled,
+            disabled: disabled && !isButtonEnabled,
             isLink: true,
             href: href,
             onClick: onClick,

package/dist/cjs/hooks/useObjectState.test.js

@@ -50,7 +50,7 @@ const TestComponent = () => {
 describe('useObjectState', () => {
   const getState = () => JSON.parse(_react2.screen.getByPlaceholderText('state').getAttribute('value'));
   beforeEach(() => {
-    (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(TestComponent, {}));
+    (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(TestComponent, {}));
   });
   it('updates arrays', () => {
     expect(getState()).toStrictEqual(INIT_STATE);

package/dist/cjs/image-upload/index.test.js

@@ -16,7 +16,7 @@ describe('ImageUpload', () => {
   it('should render an add image button', () => {
     const {
       getByText
-    } = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {}));
+    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {}));
     expect(getByText('Upload')).toBeInTheDocument();
   });
   it('should render replace and remove buttons if there is an image provided', () => {
@@ -27,7 +27,7 @@ describe('ImageUpload', () => {
     const {
       getByText,
       getByTestId
-    } = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       image: image
     }));
     expect(getByText('Remove')).toBeInTheDocument();

package/dist/cjs/modal/index.js

@@ -26,22 +26,17 @@ var _jsxRuntime = require("react/jsx-runtime");
  * External dependencies.
  */
 
-class Modal extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      isWide,
-      isNarrow,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
-      className: classes,
-      ...otherProps
-    });
-  }
+function Modal({
+  className,
+  isWide,
+  isNarrow,
+  ...otherProps
+}, ref) {
+  const classes = (0, _classnames.default)('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
+    className: classes,
+    ...otherProps,
+    ref: ref
+  });
 }
-var _default = exports.default = Modal;
+var _default = exports.default = (0, _element.forwardRef)(Modal);

package/dist/cjs/progress-bar/index.test.js

@@ -11,7 +11,7 @@ describe('ProgressBar', () => {
   it('should render a progress indicator', () => {
     const {
       getByTestId
-    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "1",
       total: "2"
     }));
@@ -22,7 +22,7 @@ describe('ProgressBar', () => {
     const label = 'test label';
     const {
       getByText
-    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "1",
       total: "2",
       label: label
@@ -32,7 +32,7 @@ describe('ProgressBar', () => {
   it('should render progress as a fraction', () => {
     const {
       getByText
-    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "1",
       total: "2",
       displayFraction: true
@@ -43,7 +43,7 @@ describe('ProgressBar', () => {
     const label = 'test label';
     const {
       getByText
-    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "1",
       total: "2",
       label: label,
@@ -78,7 +78,7 @@ describe('ProgressBar', () => {
       it(`with expected  progress of ${expectedWidth}`, () => {
         const {
           getByTestId
-        } = (0, _react2.render)( /*#__PURE__*/(0, _react.createElement)(_.default, {
+        } = (0, _react2.render)(/*#__PURE__*/(0, _react.createElement)(_.default, {
           ...props,
           key: expectedWidth
         }));
@@ -90,7 +90,7 @@ describe('ProgressBar', () => {
     const {
       getByText,
       getByTestId
-    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "cats",
       total: "dogs",
       displayFraction: true
@@ -102,7 +102,7 @@ describe('ProgressBar', () => {
     const {
       getByText,
       getByTestId
-    } = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       completed: "3",
       total: "-1",
       displayFraction: true

package/dist/cjs/radio-control/style.scss

@@ -43,12 +43,15 @@
 
 	input[type="radio"] {
 		height: 24px;
-		margin-right: 8px;
 		width: 24px;
+		max-height: 24px;
+		max-width: 24px;
 
 		@media screen and ( min-width: 782px ) {
 			height: 20px;
 			width: 20px;
+			max-height: 20px;
+			max-width: 20px;
 		}
 
 		&:checked {

package/dist/cjs/web-preview/index.js

@@ -84,7 +84,7 @@ class WebPreview extends _element.Component {
     }
     const classes = (0, _classnames.default)('newspack-web-preview', device, loaded && 'is-loaded');
     beforeLoad();
-    return (0, _element.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return (0, _element.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-web-preview__interior",

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

@@ -73,7 +73,8 @@ class ActionCard extends Component {
       hasGreyHeader,
       hasWhiteHeader,
       isPending,
-      expandable = false
+      expandable = false,
+      isButtonEnabled = false
     } = this.props;
     const {
       expanded
@@ -155,7 +156,7 @@ class ActionCard extends Component {
             isLink: true,
             children: actionText
           }) : onClick || hasInternalLink ? /*#__PURE__*/_jsx(Button, {
-            disabled: disabled,
+            disabled: disabled && !isButtonEnabled,
             isLink: true,
             href: href,
             onClick: onClick,

package/dist/esm/hooks/useObjectState.js

@@ -15,7 +15,7 @@ const mergeCustomizer = (objValue, srcValue) => {
  * A useState for an object.
  * Nested objects will be nested, but arrays replaced.
  */
-export default ((initial = {}) => {
+export default (initial = {}) => {
   const [stateObject, setStateObject] = useState(initial);
   const runUpdate = update => setStateObject(_stateObject => mergeWith({}, _stateObject, update, mergeCustomizer));
   const updateStateObject = keyOrUpdate => {
@@ -27,4 +27,4 @@ export default ((initial = {}) => {
     runUpdate(keyOrUpdate);
   };
   return [stateObject, updateStateObject];
-});
+};

package/dist/esm/hooks/useObjectState.test.js

@@ -47,7 +47,7 @@ const TestComponent = () => {
 describe('useObjectState', () => {
   const getState = () => JSON.parse(screen.getByPlaceholderText('state').getAttribute('value'));
   beforeEach(() => {
-    render( /*#__PURE__*/_jsx(TestComponent, {}));
+    render(/*#__PURE__*/_jsx(TestComponent, {}));
   });
   it('updates arrays', () => {
     expect(getState()).toStrictEqual(INIT_STATE);

package/dist/esm/hooks/usePrompt.js

@@ -12,7 +12,7 @@ import Router from '../proxied-imports/router';
 const {
   useHistory
 } = Router;
-export default ((when, message) => {
+export default (when, message) => {
   const history = useHistory();
   const self = useRef(null);
   const onWindowOrTabClose = event => {
@@ -37,4 +37,4 @@ export default ((when, message) => {
     };
   }, [message, when]);
   return self.current || (() => {});
-});
+};

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

@@ -12,7 +12,7 @@ describe('ImageUpload', () => {
   it('should render an add image button', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/_jsx(ImageUpload, {}));
+    } = render(/*#__PURE__*/_jsx(ImageUpload, {}));
     expect(getByText('Upload')).toBeInTheDocument();
   });
   it('should render replace and remove buttons if there is an image provided', () => {
@@ -23,7 +23,7 @@ describe('ImageUpload', () => {
     const {
       getByText,
       getByTestId
-    } = render( /*#__PURE__*/_jsx(ImageUpload, {
+    } = render(/*#__PURE__*/_jsx(ImageUpload, {
       image: image
     }));
     expect(getByText('Remove')).toBeInTheDocument();

package/dist/esm/modal/index.js

@@ -5,7 +5,7 @@
 /**
  * WordPress dependencies.
  */
-import { Component } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 import { Modal as BaseComponent } from '@wordpress/components';
 
 /**
@@ -18,22 +18,17 @@ import './style.scss';
  */
 import classnames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
-class Modal extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      isWide,
-      isNarrow,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
-    return /*#__PURE__*/_jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
-  }
+function Modal({
+  className,
+  isWide,
+  isNarrow,
+  ...otherProps
+}, ref) {
+  const classes = classnames('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
+  return /*#__PURE__*/_jsx(BaseComponent, {
+    className: classes,
+    ...otherProps,
+    ref: ref
+  });
 }
-export default Modal;
+export default forwardRef(Modal);

package/dist/esm/progress-bar/index.test.js

@@ -6,7 +6,7 @@ describe('ProgressBar', () => {
   it('should render a progress indicator', () => {
     const {
       getByTestId
-    } = render( /*#__PURE__*/_jsx(ProgressBar, {
+    } = render(/*#__PURE__*/_jsx(ProgressBar, {
       completed: "1",
       total: "2"
     }));
@@ -17,7 +17,7 @@ describe('ProgressBar', () => {
     const label = 'test label';
     const {
       getByText
-    } = render( /*#__PURE__*/_jsx(ProgressBar, {
+    } = render(/*#__PURE__*/_jsx(ProgressBar, {
       completed: "1",
       total: "2",
       label: label
@@ -27,7 +27,7 @@ describe('ProgressBar', () => {
   it('should render progress as a fraction', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/_jsx(ProgressBar, {
+    } = render(/*#__PURE__*/_jsx(ProgressBar, {
       completed: "1",
       total: "2",
       displayFraction: true
@@ -38,7 +38,7 @@ describe('ProgressBar', () => {
     const label = 'test label';
     const {
       getByText
-    } = render( /*#__PURE__*/_jsx(ProgressBar, {
+    } = render(/*#__PURE__*/_jsx(ProgressBar, {
       completed: "1",
       total: "2",
       label: label,
@@ -73,7 +73,7 @@ describe('ProgressBar', () => {
       it(`with expected  progress of ${expectedWidth}`, () => {
         const {
           getByTestId
-        } = render( /*#__PURE__*/_createElement(ProgressBar, {
+        } = render(/*#__PURE__*/_createElement(ProgressBar, {
           ...props,
           key: expectedWidth
         }));
@@ -85,7 +85,7 @@ describe('ProgressBar', () => {
     const {
       getByText,
       getByTestId
-    } = render( /*#__PURE__*/_jsx(ProgressBar, {
+    } = render(/*#__PURE__*/_jsx(ProgressBar, {
       completed: "cats",
       total: "dogs",
       displayFraction: true
@@ -97,7 +97,7 @@ describe('ProgressBar', () => {
     const {
       getByText,
       getByTestId
-    } = render( /*#__PURE__*/_jsx(ProgressBar, {
+    } = render(/*#__PURE__*/_jsx(ProgressBar, {
       completed: "3",
       total: "-1",
       displayFraction: true

package/dist/esm/radio-control/style.scss

@@ -43,12 +43,15 @@
 
 	input[type="radio"] {
 		height: 24px;
-		margin-right: 8px;
 		width: 24px;
+		max-height: 24px;
+		max-width: 24px;
 
 		@media screen and ( min-width: 782px ) {
 			height: 20px;
 			width: 20px;
+			max-height: 20px;
+			max-width: 20px;
 		}
 
 		&:checked {

package/dist/esm/web-preview/index.js

@@ -76,7 +76,7 @@ class WebPreview extends Component {
     }
     const classes = classnames('newspack-web-preview', device, loaded && 'is-loaded');
     beforeLoad();
-    return createPortal( /*#__PURE__*/_jsx("div", {
+    return createPortal(/*#__PURE__*/_jsx("div", {
       className: classes,
       children: /*#__PURE__*/_jsxs("div", {
         className: "newspack-web-preview__interior",

package/dist/esm/wizard/store/index.js

@@ -152,4 +152,4 @@ const store = createReduxStore(WIZARD_STORE_NAMESPACE, {
     }
   }
 });
-export default (() => register(store));
+export default () => register(store);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -58,4 +58,4 @@
 		"prepublishOnly": "npm run clean && npm run compile && node copy-styles.js",
 		"postpublish": "npm run clean"
 	}
-}
+}

package/src/action-card/index.js

@@ -72,6 +72,7 @@ class ActionCard extends Component {
 			hasWhiteHeader,
 			isPending,
 			expandable = false,
+			isButtonEnabled = false
 		} = this.props;
 
 		const { expanded } = this.state;
@@ -173,7 +174,7 @@ class ActionCard extends Component {
 									</Handoff>
 								) : onClick || hasInternalLink ? (
 									<Button
-										disabled={ disabled }
+										disabled={ disabled && ! isButtonEnabled }
 										isLink
 										href={ href }
 										onClick={ onClick }

package/src/modal/index.js

@@ -5,7 +5,7 @@
 /**
  * WordPress dependencies.
  */
-import { Component } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 import { Modal as BaseComponent } from '@wordpress/components';
 
 /**
@@ -18,21 +18,15 @@ import './style.scss';
  */
 import classnames from 'classnames';
 
-class Modal extends Component {
-	/**
-	 * Render.
-	 */
-	render() {
-		const { className, isWide, isNarrow, ...otherProps } = this.props;
-		const classes = classnames(
-			'newspack-modal',
-			isWide && 'newspack-modal--wide',
-			isNarrow && 'newspack-modal--narrow',
-			className
-		);
+function Modal( { className, isWide, isNarrow, ...otherProps }, ref ) {
+	const classes = classnames(
+		'newspack-modal',
+		isWide && 'newspack-modal--wide',
+		isNarrow && 'newspack-modal--narrow',
+		className
+	);
 
-		return <BaseComponent className={ classes } { ...otherProps } />;
-	}
-}
+	return <BaseComponent className={ classes } { ...otherProps } ref={ ref } />;
 
-export default Modal;
+}
+export default forwardRef( Modal );

package/src/radio-control/style.scss

@@ -43,12 +43,15 @@
 
 	input[type="radio"] {
 		height: 24px;
-		margin-right: 8px;
 		width: 24px;
+		max-height: 24px;
+		max-width: 24px;
 
 		@media screen and ( min-width: 782px ) {
 			height: 20px;
 			width: 20px;
+			max-height: 20px;
+			max-width: 20px;
 		}
 
 		&:checked {