newspack-components 2.1.0 → 2.2.1

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

@@ -1,35 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _i18n = require("@wordpress/i18n");
-
 var _components = require("@wordpress/components");
-
 var _ = require("../");
-
 require("./style.scss");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Style Card
  */
-
 /**
  * WordPress dependencies.
  */
 const __ = _i18n.__;
-
+/**
+ * Internal dependencies
+ */
+/**
+ * External dependencies
+ */
 class StyleCard extends _element.Component {
   /**
    * Render.
@@ -80,8 +75,6 @@ class StyleCard extends _element.Component {
       })]
     });
   }
-
 }
-
 var _default = StyleCard;
 exports.default = _default;

package/dist/cjs/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/cjs/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/cjs/tabbed-navigation/index.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
-var _lodash = require("lodash");
-
+var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * External dependencies.
  */
@@ -24,27 +17,38 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies.
  */
+
 const {
   NavLink,
   useHistory
 } = _router.default;
-
 const TabbedNavigation = _ref => {
   let {
     items,
     className,
-    disableUpcoming
+    disableUpcoming,
+    children = null
   } = _ref;
+  const displayedItems = items.filter(item => !item.isHiddenInTabbedNavigation);
   const {
     location
   } = useHistory();
-  const currentIndex = (0, _lodash.findIndex)(items, ['path', location.pathname]);
-  return (0, _jsxRuntime.jsx)("div", {
+  const currentIndex = (0, _findIndex.default)(displayedItems, ['path', location.pathname]);
+  return (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('newspack-tabbed-navigation', className),
-    children: (0, _jsxRuntime.jsx)("ul", {
-      children: items.map((item, index) => (0, _jsxRuntime.jsx)("li", {
+    children: [(0, _jsxRuntime.jsx)("ul", {
+      children: displayedItems.map((item, index) => (0, _jsxRuntime.jsx)("li", {
         children: (0, _jsxRuntime.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: (0, _classnames.default)({
@@ -53,9 +57,8 @@ const TabbedNavigation = _ref => {
           children: item.label
         })
       }, index))
-    })
+    }), children]
   });
 };
-
 var _default = TabbedNavigation;
 exports.default = _default;

package/dist/cjs/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/cjs/text-control/index.js

@@ -1,43 +1,37 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 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("@emotion/react/jsx-runtime");
-
 /**
  * Text Control
  */
-
 /**
  * WordPress dependencies
  */
+/**
+ * Internal dependencies
+ */
 const __ = _i18n.__;
-
+/**
+ * External dependencies
+ */
 class TextControl extends _element.Component {
   constructor(props) {
     super(props);
     this.wrapperRef = (0, _element.createRef)();
   }
-
   componentDidMount() {
     if (this.wrapperRef.current) {
       const labelEl = this.wrapperRef.current.querySelector('label');
-
       if (labelEl) {
         labelEl.setAttribute('data-required-text', __('(required)', 'newspack'));
       }
@@ -46,8 +40,6 @@ class TextControl extends _element.Component {
   /**
    * Render.
    */
-
-
   render() {
     const {
       className,
@@ -74,8 +66,6 @@ class TextControl extends _element.Component {
       ...otherProps
     });
   }
-
 }
-
 var _default = TextControl;
 exports.default = _default;

package/dist/cjs/utils/index.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _keycodes = require("@wordpress/keycodes");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * WordPress dependencies.
  */
+
 const InteractiveDiv = _ref => {
   let {
     style = {},
@@ -28,8 +26,15 @@ const InteractiveDiv = _ref => {
     ...props
   });
 };
-
+const confirmAction = message => {
+  // eslint-disable-next-line no-alert
+  if (confirm(message)) {
+    return true;
+  }
+  return false;
+};
 var _default = {
-  InteractiveDiv
+  InteractiveDiv,
+  confirmAction
 };
 exports.default = _default;

package/dist/cjs/waiting/index.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 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");
-
 /**
  * Waiting
  */
@@ -32,6 +25,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * External dependencies.
  */
+
 class Waiting extends _element.Component {
   /**
    * Render
@@ -54,8 +48,6 @@ class Waiting extends _element.Component {
       ...otherProps
     });
   }
-
 }
-
 var _default = Waiting;
 exports.default = _default;

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

@@ -1,39 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 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("@emotion/react/jsx-runtime");
-
 /**
  * WordPress dependencies.
  */
 const __ = _i18n.__;
+/**
+ * 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 {
   constructor(props) {
     super(props);
@@ -42,6 +37,9 @@ class WebPreview extends _element.Component {
       loaded: false,
       isPreviewVisible: false
     });
+    /**
+     * Create JSX for the modal
+     */
     (0, _defineProperty2.default)(this, "getWebPreviewModal", () => {
       const {
         beforeLoad = () => {},
@@ -53,11 +51,9 @@ class WebPreview extends _element.Component {
         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)((0, _jsxRuntime.jsx)("div", {
@@ -135,26 +131,23 @@ class WebPreview extends _element.Component {
     });
     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');
@@ -162,11 +155,6 @@ class WebPreview extends _element.Component {
       document.body.classList.remove('newspack-web-preview--open');
     }
   }
-  /**
-   * Create JSX for the modal
-   */
-
-
   /**
    * Render.
    */
@@ -174,7 +162,6 @@ class WebPreview extends _element.Component {
     const {
       label,
       variant,
-
       /**
        * Inversion of control - let the caller render
        * the button that will trigger the modal
@@ -192,11 +179,9 @@ class WebPreview extends _element.Component {
       }), this.getWebPreviewModal()]
     });
   }
-
 }
-
 WebPreview.defaultProps = {
-  url: '//newspack.pub',
+  url: '//newspack.com',
   label: __('Preview', 'newspack'),
   onLoad: () => {}
 };

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