newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/{cjs/style-card → style-card}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,20 +11,23 @@ var _components = require("@wordpress/components");
 var _ = require("../");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Style Card
  */
+
 /**
  * WordPress dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * Internal dependencies
  */
+
 /**
  * External dependencies
  */
+
 class StyleCard extends _element.Component {
   /**
    * Render.
@@ -42,34 +45,34 @@ class StyleCard extends _element.Component {
       id
     } = this.props;
     const classes = (0, _classnames.default)('newspack-style-card', isActive && 'newspack-style-card__is-active', className);
-    return (0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes,
       id: id,
-      children: [(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-style-card__image",
-        children: [imageType === 'html' ? (0, _jsxRuntime.jsx)("div", {
+        children: [imageType === 'html' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           dangerouslySetInnerHTML: image
-        }) : (0, _jsxRuntime.jsx)("img", {
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: image,
-          alt: cardTitle + ' ' + __('Thumbnail', 'newspack-plugin')
-        }), (0, _jsxRuntime.jsxs)("div", {
+          alt: cardTitle + ' ' + (0, _i18n.__)('Thumbnail', 'newspack-plugin')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "newspack-style-card__actions",
-          children: [isActive ? (0, _jsxRuntime.jsx)("span", {
+          children: [isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "newspack-style-card__actions__badge",
-            children: __('Selected', 'newspack-plugin')
-          }) : (0, _jsxRuntime.jsx)(_components.Button, {
+            children: (0, _i18n.__)('Selected', 'newspack-plugin')
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
             variant: "link",
             onClick: onClick,
-            "aria-label": ariaLabel ? ariaLabel : __('Select', 'newspack-plugin') + ' ' + cardTitle,
+            "aria-label": ariaLabel ? ariaLabel : (0, _i18n.__)('Select', 'newspack-plugin') + ' ' + cardTitle,
             tabIndex: "0",
-            children: __('Select', 'newspack-plugin')
-          }), url && (0, _jsxRuntime.jsx)(_.WebPreview, {
+            children: (0, _i18n.__)('Select', 'newspack-plugin')
+          }), url && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.WebPreview, {
             url: url,
-            label: __('View Demo', 'newspack-plugin'),
+            label: (0, _i18n.__)('View Demo', 'newspack-plugin'),
             variant: "link"
           })]
         })]
-      }), cardTitle && (0, _jsxRuntime.jsx)("div", {
+      }), cardTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-style-card__title",
         children: cardTitle
       })]

package/dist/{cjs/style-card → style-card}/style.scss

@@ -2,8 +2,8 @@
  * Style Card
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-style-card {
 	margin: 32px 0;
@@ -61,7 +61,7 @@
 	// Actions
 	&__actions {
 		align-items: center;
-		background: rgba( white, 0.9 );
+		background: rgba(white, 0.9);
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -83,7 +83,7 @@
 		}
 
 		&__badge {
-			color: var( --wp-admin-theme-color );
+			color: var(--wp-admin-theme-color);
 			font-weight: bold;
 		}
 

package/dist/{esm/style.scss → style.scss}

@@ -1,4 +1,4 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 // Buttons Card
 

package/dist/{cjs/tabbed-navigation → tabbed-navigation}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies.
  */
@@ -33,11 +33,11 @@ const TabbedNavigation = ({
     location
   } = useHistory();
   const currentIndex = (0, _findIndex.default)(displayedItems, ['path', location.pathname]);
-  return (0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('newspack-tabbed-navigation', className),
-    children: [(0, _jsxRuntime.jsx)("ul", {
-      children: displayedItems.map((item, index) => (0, _jsxRuntime.jsx)("li", {
-        children: (0, _jsxRuntime.jsx)(NavLink, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: displayedItems.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NavLink, {
           to: item.path,
           isActive: (match, {
             pathname
@@ -45,7 +45,7 @@ const TabbedNavigation = ({
             if (item.activeTabPaths) {
               return item.activeTabPaths.includes(pathname);
             }
-            return pathname === item.path;
+            return match;
           },
           exact: true,
           activeClassName: 'selected',

package/dist/{cjs/tabbed-navigation → tabbed-navigation}/style.scss

@@ -2,7 +2,7 @@
  * Tabbed Navigation
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-tabbed-navigation {
 	background: white;
@@ -50,7 +50,7 @@
 			&:active,
 			&:focus,
 			&:hover {
-				color: var( --wp-admin-theme-color );
+				color: var(--wp-admin-theme-color);
 				outline: none;
 			}
 
@@ -64,10 +64,10 @@
 			}
 
 			&.selected {
-				box-shadow: inset 0 0 0 2px white, inset 0 0 0 4px var( --wp-admin-theme-color );
+				box-shadow: inset 0 0 0 2px white, inset 0 0 0 4px var(--wp-admin-theme-color);
 
 				@media screen and ( min-width: 600px ) {
-					border-color: var( --wp-admin-theme-color );
+					border-color: var(--wp-admin-theme-color);
 					box-shadow: none;
 				}
 			}

package/dist/text-control/index.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var _interopRequireDefault = require( '@babel/runtime/helpers/interopRequireDefault' );
+Object.defineProperty( exports, '__esModule', {
+	value: true,
+} );
+exports.default = void 0;
+var _components = require( '@wordpress/components' );
+var _element = require( '@wordpress/element' );
+var _i18n = require( '@wordpress/i18n' );
+require( './style.scss' );
+var _classnames = _interopRequireDefault( require( 'classnames' ) );
+var _jsxRuntime = require( 'react/jsx-runtime' );
+/**
+ * Text Control
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+const TextControl = ( {
+	className = '',
+	required = false,
+	isWide = false,
+	withMargin = true,
+	...otherProps
+} ) => {
+	const wrapperRef = ( 0, _element.useRef )( null );
+	( 0, _element.useEffect )( () => {
+		if ( wrapperRef.current === null ) {
+			return;
+		}
+		const labelEl = wrapperRef.current.querySelector( 'label' );
+		if ( labelEl ) {
+			labelEl.setAttribute(
+				'data-required-text',
+				( 0, _i18n.__ )( '(required)', 'newspack-plugin' )
+			);
+		}
+	}, [ wrapperRef.current ] );
+	const classes = ( 0, _classnames.default )(
+		'newspack-text-control',
+		{
+			'newspack-text-control--wide': isWide,
+			'newspack-text-control--with-margin': withMargin,
+		},
+		className
+	);
+	return required
+		? /*#__PURE__*/ ( 0, _jsxRuntime.jsx )( 'div', {
+				ref: wrapperRef,
+				className: 'newspack-text-control--required',
+				children: /*#__PURE__*/ ( 0, _jsxRuntime.jsx )(
+					_components.TextControl,
+					{
+						className: classes,
+						required: required,
+						...otherProps,
+					}
+				),
+		  } )
+		: /*#__PURE__*/ ( 0, _jsxRuntime.jsx )( _components.TextControl, {
+				className: classes,
+				...otherProps,
+		  } );
+};
+var _default = ( exports.default = TextControl );

package/dist/text-control/index.tsx

@@ -0,0 +1,71 @@
+/**
+ * Text Control
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { TextControl as BaseComponent } from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+type BaseComponentProps = {
+	onChange: ( value: string ) => void;
+	value: string | number;
+};
+
+const TextControl = ( {
+	className = '',
+	required = false,
+	isWide = false,
+	withMargin = true,
+	...otherProps
+} ) => {
+	const wrapperRef = useRef< HTMLDivElement >( null );
+	useEffect( () => {
+		if ( wrapperRef.current === null ) {
+			return;
+		}
+		const labelEl = wrapperRef.current.querySelector( 'label' );
+		if ( labelEl ) {
+			labelEl.setAttribute(
+				'data-required-text',
+				__( '(required)', 'newspack-plugin' )
+			);
+		}
+	}, [ wrapperRef.current ] );
+	const classes = classNames(
+		'newspack-text-control',
+		{
+			'newspack-text-control--wide': isWide,
+			'newspack-text-control--with-margin': withMargin,
+		},
+		className
+	);
+	return required ? (
+		<div ref={ wrapperRef } className="newspack-text-control--required">
+			<BaseComponent
+				className={ classes }
+				required={ required }
+				{ ...( otherProps as BaseComponentProps ) }
+			/>
+		</div>
+	) : (
+		<BaseComponent
+			className={ classes }
+			{ ...( otherProps as BaseComponentProps ) }
+		/>
+	);
+};
+
+export default TextControl;

package/dist/{cjs/utils → utils}/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _keycodes = require("@wordpress/keycodes");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
@@ -13,7 +13,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const InteractiveDiv = ({
   style = {},
   ...props
-}) => (0, _jsxRuntime.jsx)("div", {
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
   tabIndex: "0",
   role: "button",
   onKeyDown: event => _keycodes.ENTER === event.keyCode && props.onClick(),

package/dist/{cjs/waiting → waiting}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Waiting
  */
@@ -43,7 +43,7 @@ class Waiting extends _element.Component {
       'is-left': isLeft,
       'is-center': isCenter
     });
-    return (0, _jsxRuntime.jsx)(_components.Spinner, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {
       className: classes,
       ...otherProps
     });

package/dist/web-preview/index.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _components = require("@wordpress/components");
+var _ = require("../");
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * External dependencies.
+ */
+
+const PORTAL_PARENT_ID = 'newspack-components-web-preview-wrapper';
+
+/**
+ * Web Preview. A component to preview a website in an iframe, with device sizing options.
+ */
+class WebPreview extends _element.Component {
+  state = {
+    device: 'desktop',
+    loaded: false,
+    isPreviewVisible: false
+  };
+  constructor(props) {
+    super(props);
+    this.iframeRef = (0, _element.createRef)();
+  }
+
+  /**
+   * If a div with id PORTAL_PARENT_ID exists, assign it to class field.
+   * If not, create it and append to the body.
+   */
+  componentDidMount() {
+    const existingDOMElement = document.getElementById(PORTAL_PARENT_ID);
+    this.modalDOMElement = existingDOMElement || document.createElement('div');
+    if (!existingDOMElement) {
+      this.modalDOMElement.id = PORTAL_PARENT_ID;
+      document.body.appendChild(this.modalDOMElement);
+    }
+  }
+
+  /**
+   * Add or remove applicable body classes
+   */
+  componentDidUpdate() {
+    if (this.state.isPreviewVisible === true) {
+      document.body.classList.add('newspack-web-preview--open');
+    } else {
+      document.body.classList.remove('newspack-web-preview--open');
+    }
+  }
+
+  /**
+   * Create JSX for the modal
+   */
+  getWebPreviewModal = () => {
+    const {
+      beforeLoad = () => {},
+      onClose = () => {},
+      url
+    } = this.props;
+    const {
+      device,
+      loaded,
+      isPreviewVisible
+    } = this.state;
+    if (!this.modalDOMElement || !isPreviewVisible) {
+      return null;
+    }
+    const classes = (0, _classnames.default)('newspack-web-preview', device, loaded && 'is-loaded');
+    beforeLoad();
+    return (0, _element.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-web-preview__interior",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-web-preview__toolbar",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-web-preview__toolbar-left",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ButtonGroup, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                onClick: () => this.setState({
+                  device: 'desktop'
+                }),
+                variant: 'desktop' === device && 'primary',
+                icon: _icons.desktop,
+                label: (0, _i18n.__)('Preview Desktop Size', 'newspack-plugin')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                onClick: () => this.setState({
+                  device: 'tablet'
+                }),
+                variant: 'tablet' === device && 'primary',
+                icon: _icons.tablet,
+                label: (0, _i18n.__)('Preview Tablet Size', 'newspack-plugin')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                onClick: () => this.setState({
+                  device: 'phone'
+                }),
+                variant: 'phone' === device && 'primary',
+                icon: _icons.mobile,
+                label: (0, _i18n.__)('Preview Phone Size', 'newspack-plugin')
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-web-preview__toolbar-right",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              onClick: () => {
+                onClose();
+                this.setState({
+                  isPreviewVisible: false,
+                  loaded: false
+                });
+              },
+              icon: _icons.closeSmall,
+              label: (0, _i18n.__)('Close Preview', 'newspack-plugin')
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-web-preview__content",
+          children: [!loaded && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "newspack-web-preview__is-waiting",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+              isLeft: true
+            }), (0, _i18n.__)('Loading…', 'newspack-plugin')]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+            ref: this.iframeRef,
+            title: "web-preview",
+            src: url,
+            onLoad: () => {
+              this.setState({
+                loaded: true
+              });
+              this.props.onLoad(this.iframeRef.current);
+            }
+          })]
+        })]
+      })
+    }), this.modalDOMElement);
+  };
+  showPreview = () => {
+    this.setState({
+      isPreviewVisible: true
+    });
+  };
+
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      label,
+      variant,
+      /**
+       * Inversion of control - let the caller render
+       * the button that will trigger the modal
+       */
+      renderButton
+    } = this.props;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+      children: [renderButton ? renderButton({
+        showPreview: this.showPreview
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        variant: variant,
+        onClick: this.showPreview,
+        tabIndex: "0",
+        children: label
+      }), this.getWebPreviewModal()]
+    });
+  }
+}
+WebPreview.defaultProps = {
+  url: '//newspack.com',
+  label: (0, _i18n.__)('Preview', 'newspack-plugin'),
+  onLoad: () => {}
+};
+var _default = exports.default = WebPreview;

package/dist/{esm/web-preview → web-preview}/style.scss

@@ -2,8 +2,8 @@
  * Web Preview
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-web-preview {
 	// Color
@@ -14,7 +14,7 @@
 	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
 	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
 
-	background: rgba( black, 0.7 );
+	background: rgba(black, 0.7);
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;
@@ -54,7 +54,7 @@
 
 	&__content {
 		background: wp-colors.$gray-100;
-		height: calc( 100% - 49px );
+		height: calc(100% - 49px);
 		-webkit-overflow-scrolling: touch;
 		overflow-x: hidden;
 		width: 100%;
@@ -81,7 +81,7 @@
 		margin: -12px 0 0;
 		position: absolute;
 		top: 50%;
-		transform: translateX( -50% );
+		transform: translateX(-50%);
 	}
 
 	&__toolbar {