newspack-components 2.1.0 → 2.2.1

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

@@ -9,20 +9,19 @@ import { Component } from '@wordpress/element';
 import { __ as alias__ } from '@wordpress/i18n';
 const __ = alias__;
 import { Button } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-
 import { WebPreview } from '../';
 import './style.scss';
+
 /**
  * External dependencies
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 class StyleCard extends Component {
   /**
    * Render.
@@ -73,7 +72,5 @@ class StyleCard extends Component {
       })]
     });
   }
-
 }
-
 export default StyleCard;

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

@@ -2,8 +2,8 @@
  * Style Card
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-style-card {
 	margin: 32px 0;
@@ -15,13 +15,13 @@
 		text-align: center;
 
 		.newspack-style-card__is-active & {
-			color: $primary-500;
+			color: colors.$primary-500;
 		}
 	}
 
 	// Image
 	&__image {
-		border: 1px solid $gray-300;
+		border: 1px solid wp-colors.$gray-300;
 		border-radius: 2px;
 		overflow: hidden;
 		position: relative;
@@ -43,13 +43,13 @@
 		}
 
 		svg {
-			fill: $gray-600;
+			fill: wp-colors.$gray-600;
 			margin: 8px;
 		}
 
 		.newspack-style-card__is-active & {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 1px $primary-500;
+			border-color: colors.$primary-500;
+			box-shadow: inset 0 0 0 1px colors.$primary-500;
 
 			img {
 				position: relative;
@@ -62,16 +62,13 @@
 	&__actions {
 		align-items: center;
 		background: rgba( white, 0.9 );
-		bottom: 0;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		left: 0;
+		inset: 0;
 		opacity: 0;
 		padding: 16px;
 		position: absolute;
-		right: 0;
-		top: 0;
 		transition: opacity 125ms ease-in-out;
 
 		&:empty {
@@ -91,7 +88,7 @@
 		}
 
 		.newspack-style-card__is-active & {
-			box-shadow: inset 0 0 0 1px $primary-500;
+			box-shadow: inset 0 0 0 1px colors.$primary-500;
 		}
 	}
 }

package/dist/esm/style.scss

@@ -1,5 +1,4 @@
-@import '~@wordpress/base-styles/colors';
-@import '../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 // Buttons Card
 
@@ -21,17 +20,17 @@
 .newspack-checkbox-icon {
 	background: white;
 	border-radius: 50%;
-	box-shadow: inset 0 0 0 1px $gray-300;
+	box-shadow: inset 0 0 0 1px wp-colors.$gray-300;
 	display: block;
 	height: 24px;
 	width: 24px;
 
 	svg {
-		fill: $gray-700;
+		fill: wp-colors.$gray-700;
 	}
 
 	&--checked {
-		background: $alert-green;
+		background: wp-colors.$alert-green;
 		box-shadow: none;
 
 		svg {
@@ -39,6 +38,6 @@
 		}
 	}
 	&--pending {
-		background: $alert-yellow;
+		background: wp-colors.$alert-yellow;
 	}
 }

package/dist/esm/tabbed-navigation/index.js

@@ -2,35 +2,46 @@
  * External dependencies.
  */
 import classnames from 'classnames';
-import { findIndex } from 'lodash';
+import findIndex from 'lodash/findIndex';
 import Router from '../proxied-imports/router';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const {
   NavLink,
   useHistory
 } = Router;
-
 const TabbedNavigation = _ref => {
   let {
     items,
     className,
-    disableUpcoming
+    disableUpcoming,
+    children = null
   } = _ref;
+  const displayedItems = items.filter(item => !item.isHiddenInTabbedNavigation);
   const {
     location
   } = useHistory();
-  const currentIndex = findIndex(items, ['path', location.pathname]);
-  return _jsx("div", {
+  const currentIndex = findIndex(displayedItems, ['path', location.pathname]);
+  return _jsxs("div", {
     className: classnames('newspack-tabbed-navigation', className),
-    children: _jsx("ul", {
-      children: items.map((item, index) => _jsx("li", {
+    children: [_jsx("ul", {
+      children: displayedItems.map((item, index) => _jsx("li", {
         children: _jsx(NavLink, {
           to: item.path,
+          isActive: (match, _ref2) => {
+            let {
+              pathname
+            } = _ref2;
+            if (item.activeTabPaths) {
+              return item.activeTabPaths.includes(pathname);
+            }
+            return match;
+          },
           exact: true,
           activeClassName: 'selected',
           className: classnames({
@@ -39,8 +50,7 @@ const TabbedNavigation = _ref => {
           children: item.label
         })
       }, index))
-    })
+    }), children]
   });
 };
-
 export default TabbedNavigation;

package/dist/esm/tabbed-navigation/style.scss

@@ -2,8 +2,7 @@
  * Tabbed Navigation
  */
 
-@import '~@wordpress/base-styles/colors';
-@import '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-tabbed-navigation {
 	background: white;
@@ -20,7 +19,7 @@
 	}
 
 	ul {
-		box-shadow: 0 -1px 0 inset $gray-300;
+		box-shadow: 0 -1px 0 inset wp-colors.$gray-300;
 		display: flex;
 		flex-wrap: wrap;
 		margin: 0;
@@ -36,7 +35,7 @@
 
 		a {
 			align-items: center;
-			color: $gray-900;
+			color: wp-colors.$gray-900;
 			display: flex;
 			font-weight: bold;
 			height: 48px;

package/dist/esm/text-control/index.js

@@ -8,29 +8,26 @@
 import { TextControl as BaseComponent } from '@wordpress/components';
 import { Component, createRef } from '@wordpress/element';
 import { __ as alias__ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
-
 const __ = alias__;
 import './style.scss';
+
 /**
  * External dependencies
  */
-
 import classNames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class TextControl extends Component {
   constructor(props) {
     super(props);
     this.wrapperRef = createRef();
   }
-
   componentDidMount() {
     if (this.wrapperRef.current) {
       const labelEl = this.wrapperRef.current.querySelector('label');
-
       if (labelEl) {
         labelEl.setAttribute('data-required-text', __('(required)', 'newspack'));
       }
@@ -39,8 +36,6 @@ class TextControl extends Component {
   /**
    * Render.
    */
-
-
   render() {
     const {
       className,
@@ -67,7 +62,5 @@ class TextControl extends Component {
       ...otherProps
     });
   }
-
 }
-
 export default TextControl;

package/dist/esm/utils/index.js

@@ -3,7 +3,6 @@
  */
 import { ENTER } from '@wordpress/keycodes';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const InteractiveDiv = _ref => {
   let {
     style = {},
@@ -20,7 +19,14 @@ const InteractiveDiv = _ref => {
     ...props
   });
 };
-
+const confirmAction = message => {
+  // eslint-disable-next-line no-alert
+  if (confirm(message)) {
+    return true;
+  }
+  return false;
+};
 export default {
-  InteractiveDiv
+  InteractiveDiv,
+  confirmAction
 };

package/dist/esm/waiting/index.js

@@ -7,18 +7,17 @@
  */
 import { Component } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class Waiting extends Component {
   /**
    * Render
@@ -41,7 +40,5 @@ class Waiting extends Component {
       ...otherProps
     });
   }
-
 }
-
 export default Waiting;

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**
  * WordPress dependencies.
  */
@@ -8,34 +7,35 @@ import { __ as alias__ } from '@wordpress/i18n';
 const __ = alias__;
 import { closeSmall, desktop, mobile, tablet } from '@wordpress/icons';
 import { Button, ButtonGroup } from '@wordpress/components';
+
 /**
  * Internal dependencies.
  */
-
 import { Waiting } from '../';
 import './style.scss';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 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 Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "state", {
       device: 'desktop',
       loaded: false,
       isPreviewVisible: false
     });
-
+    /**
+     * Create JSX for the modal
+     */
     _defineProperty(this, "getWebPreviewModal", () => {
       const {
         beforeLoad = () => {},
@@ -47,11 +47,9 @@ class WebPreview extends Component {
         loaded,
         isPreviewVisible
       } = this.state;
-
       if (!this.modalDOMElement || !isPreviewVisible) {
         return null;
       }
-
       const classes = classnames('newspack-web-preview', device, loaded && 'is-loaded');
       beforeLoad();
       return createPortal(_jsx("div", {
@@ -122,35 +120,30 @@ class WebPreview extends Component {
         })
       }), this.modalDOMElement);
     });
-
     _defineProperty(this, "showPreview", () => {
       this.setState({
         isPreviewVisible: true
       });
     });
-
     this.iframeRef = 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');
@@ -158,11 +151,6 @@ class WebPreview extends Component {
       document.body.classList.remove('newspack-web-preview--open');
     }
   }
-  /**
-   * Create JSX for the modal
-   */
-
-
   /**
    * Render.
    */
@@ -170,7 +158,6 @@ class WebPreview extends Component {
     const {
       label,
       variant,
-
       /**
        * Inversion of control - let the caller render
        * the button that will trigger the modal
@@ -188,11 +175,9 @@ class WebPreview extends Component {
       }), this.getWebPreviewModal()]
     });
   }
-
 }
-
 WebPreview.defaultProps = {
-  url: '//newspack.pub',
+  url: '//newspack.com',
   label: __('Preview', 'newspack'),
   onLoad: () => {}
 };

package/dist/esm/web-preview/style.scss

@@ -2,17 +2,17 @@
  * Web Preview
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-web-preview {
 	// Color
-	--wp-admin-theme-color: #{$primary-500};
-	--wp-admin-theme-color--rgb: #{$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-500};
+	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
+	--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 );
 	box-sizing: border-box;
@@ -53,7 +53,7 @@
 	}
 
 	&__content {
-		background: $gray-100;
+		background: wp-colors.$gray-100;
 		height: calc( 100% - 49px );
 		-webkit-overflow-scrolling: touch;
 		overflow-x: hidden;
@@ -66,7 +66,7 @@
 			margin: 0 auto;
 			max-width: 100%;
 			opacity: 0;
-			outline: 1px solid $gray-300;
+			outline: 1px solid wp-colors.$gray-300;
 			padding: 0;
 			pointer-events: all;
 			transition: max-width 125ms ease-in-out, opacity 250ms ease-in-out;
@@ -78,14 +78,14 @@
 		align-items: center;
 		display: flex;
 		left: 50%;
-		margin: -12px 0 0 0;
+		margin: -12px 0 0;
 		position: absolute;
 		top: 50%;
 		transform: translateX( -50% );
 	}
 
 	&__toolbar {
-		border-bottom: 1px solid $gray-300;
+		border-bottom: 1px solid wp-colors.$gray-300;
 		display: flex;
 		padding: 6px;
 
@@ -102,7 +102,7 @@
 				padding: 0 !important;
 
 				&.is-selected {
-					background: $primary-500;
+					background: colors.$primary-500;
 					color: white;
 
 					&:active,
@@ -114,7 +114,7 @@
 					}
 
 					&:focus {
-						box-shadow: inset 0 0 0 1px $primary-500, inset 0 0 0 3px white !important;
+						box-shadow: inset 0 0 0 1px colors.$primary-500, inset 0 0 0 3px white !important;
 					}
 				}