newspack-components 2.1.0 → 2.2.0

package/dist/cjs/toggle-control/index.js

@@ -0,0 +1,58 @@
+"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");
+
+require("./style.scss");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+
+/**
+ * Toggle Control
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+class ToggleControl extends _element.Component {
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      className,
+      isDark,
+      checked,
+      ...otherProps
+    } = this.props;
+    const classes = (0, _classnames.default)('newspack-toggle-control', isDark && 'newspack-toggle-control--is-dark', // NOTE: disabled prop is handled in more recent Gutenberg versions. This special handling can be removed once that's in Core.
+    otherProps.disabled && 'newspack-toggle-control--is-disabled', className);
+    return (0, _jsxRuntime.jsx)(_components.ToggleControl, {
+      className: classes,
+      checked: Boolean(checked),
+      ...otherProps
+    });
+  }
+
+}
+
+var _default = ToggleControl;
+exports.default = _default;

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

@@ -0,0 +1,74 @@
+/**
+ * Toggle Control
+ */
+
+@import '../../../shared/scss/colors';
+@import '~@wordpress/base-styles/colors';
+
+.newspack-toggle-control {
+	margin: 32px 0;
+
+	.components-base-control__field {
+		align-items: flex-start;
+		margin: 0;
+
+		.components-toggle-control__label {
+			color: $gray-700;
+			font-size: 14px;
+			line-height: 24px;
+			margin: 0;
+		}
+
+		.components-form-toggle {
+			margin: 3px 8px 3px 0;
+
+			&.is-checked {
+				.components-form-toggle__track {
+					background: $primary-500;
+					border-color: transparent;
+				}
+			}
+		}
+	}
+
+	// Is Dark
+
+	&.newspack-toggle-control--is-dark {
+		.components-base-control__field label {
+			color: $gray-900;
+			font-weight: bold;
+		}
+
+		.components-base-control__help {
+			font-style: normal;
+		}
+	}
+
+	// Is disabled
+
+	&.newspack-toggle-control--is-disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	// Focus
+
+	.components-form-toggle__input:focus {
+		+ .components-form-toggle__track {
+			box-shadow: 0 0 0 2px white, 0 0 0 4px $primary-500;
+		}
+	}
+
+	// Multiple Toggle Controls
+
+	& + & {
+		margin-bottom: 32px;
+		margin-top: -24px;
+	}
+
+	// Reset
+
+	.components-base-control__help {
+		margin: 0 0 0 44px;
+	}
+}

package/dist/cjs/toggle-group/index.js

@@ -0,0 +1,71 @@
+"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 _ = require("../");
+
+require("./style.scss");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+
+/**
+ * Toggle Group
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * External dependencies.
+ */
+class ToggleGroup extends _element.Component {
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      checked,
+      children,
+      description,
+      onChange,
+      title,
+      className
+    } = this.props;
+    const classes = (0, _classnames.default)('newspack-toggle-group', className);
+    return (0, _jsxRuntime.jsxs)("div", {
+      className: classes,
+      children: [(0, _jsxRuntime.jsx)(_.ToggleControl, {
+        checked: checked || false,
+        onChange: onChange
+      }), (0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-toggle-group__description",
+        children: [(0, _jsxRuntime.jsx)("p", {
+          className: "is-dark",
+          children: (0, _jsxRuntime.jsx)("strong", {
+            children: title
+          })
+        }), (0, _jsxRuntime.jsx)("p", {
+          children: description
+        }), checked && children]
+      })]
+    });
+  }
+
+}
+
+var _default = ToggleGroup;
+exports.default = _default;

package/dist/cjs/toggle-group/style.scss

@@ -0,0 +1,28 @@
+/**
+ * Toggle Group
+ */
+
+.newspack-toggle-group {
+	display: flex;
+	margin: 32px 0;
+
+	& &__description p {
+		margin-bottom: 0;
+		margin-top: 0;
+	}
+
+	.newspack-toggle-control {
+		margin: 0;
+	}
+
+	&__description {
+		flex: 1;
+	}
+
+	// Multiple Toogle Groups
+
+	& + & {
+		margin-bottom: 32px;
+		margin-top: -16px;
+	}
+}

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;
 					}
 				}