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

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

@@ -0,0 +1,56 @@
+/**
+ * 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';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextControl = ({
+  className = '',
+  required = false,
+  isWide = false,
+  withMargin = true,
+  ...otherProps
+}) => {
+  const wrapperRef = useRef(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 ? /*#__PURE__*/_jsx("div", {
+    ref: wrapperRef,
+    className: "newspack-text-control--required",
+    children: /*#__PURE__*/_jsx(BaseComponent, {
+      className: classes,
+      required: required,
+      ...otherProps
+    })
+  }) : /*#__PURE__*/_jsx(BaseComponent, {
+    className: classes,
+    ...otherProps
+  });
+};
+export default TextControl;

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

@@ -0,0 +1,32 @@
+/**
+ * Text Control
+ */
+
+.newspack-text-control {
+	&--with-margin {
+		margin: 32px 0;
+	}
+
+	&--wide {
+		flex-wrap: wrap;
+		.components-base-control__field {
+			width: 100%;
+		}
+	}
+
+	&--required {
+		margin: 32px 0;
+
+		> * {
+			margin: 0;
+		}
+	}
+
+	// Code
+
+	&.code {
+		input {
+			font-family: Consolas, monaco, monospace;
+		}
+	}
+}

package/dist/esm/utils/index.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies.
+ */
+import { ENTER } from '@wordpress/keycodes';
+import { jsx as _jsx } from "react/jsx-runtime";
+const InteractiveDiv = ({
+  style = {},
+  ...props
+}) => /*#__PURE__*/_jsx("div", {
+  tabIndex: "0",
+  role: "button",
+  onKeyDown: event => ENTER === event.keyCode && props.onClick(),
+  style: {
+    cursor: 'pointer',
+    ...style
+  },
+  ...props
+});
+const confirmAction = message => {
+  // eslint-disable-next-line no-alert
+  if (confirm(message)) {
+    return true;
+  }
+  return false;
+};
+export default {
+  InteractiveDiv,
+  confirmAction
+};

package/dist/esm/waiting/index.js

@@ -0,0 +1,44 @@
+/**
+ * Waiting
+ */
+
+/**
+ * WordPress dependencies.
+ */
+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 "react/jsx-runtime";
+class Waiting extends Component {
+  /**
+   * Render
+   */
+  render() {
+    const {
+      className,
+      isRight,
+      isLeft,
+      isCenter,
+      ...otherProps
+    } = this.props;
+    const classes = classnames('newspack-waiting', className, {
+      'is-right': isRight,
+      'is-left': isLeft,
+      'is-center': isCenter
+    });
+    return /*#__PURE__*/_jsx(Spinner, {
+      className: classes,
+      ...otherProps
+    });
+  }
+}
+export default Waiting;

package/dist/esm/waiting/style.scss

@@ -0,0 +1,27 @@
+/**
+ * Waiting
+ */
+
+.newspack-waiting.components-spinner {
+	flex: 0 0 auto;
+	margin: 0;
+
+	&.is-left {
+		margin-right: 8px;
+	}
+
+	&.is-right {
+		margin-right: 8px;
+		order: -1;
+
+		@media screen and ( min-width: 744px ) {
+			margin-left: 8px;
+			margin-right: 0;
+			order: 1;
+		}
+	}
+
+	&.is-center {
+		margin: auto;
+	}
+}

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

@@ -0,0 +1,183 @@
+/**
+ * WordPress dependencies.
+ */
+import { Component, createRef, Fragment, createPortal } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+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, jsxs as _jsxs } from "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 {
+  state = {
+    device: 'desktop',
+    loaded: false,
+    isPreviewVisible: false
+  };
+  constructor(props) {
+    super(props);
+    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');
+    } 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 = classnames('newspack-web-preview', device, loaded && 'is-loaded');
+    beforeLoad();
+    return createPortal( /*#__PURE__*/_jsx("div", {
+      className: classes,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "newspack-web-preview__interior",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "newspack-web-preview__toolbar",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "newspack-web-preview__toolbar-left",
+            children: /*#__PURE__*/_jsxs(ButtonGroup, {
+              children: [/*#__PURE__*/_jsx(Button, {
+                onClick: () => this.setState({
+                  device: 'desktop'
+                }),
+                variant: 'desktop' === device && 'primary',
+                icon: desktop,
+                label: __('Preview Desktop Size', 'newspack-plugin')
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: () => this.setState({
+                  device: 'tablet'
+                }),
+                variant: 'tablet' === device && 'primary',
+                icon: tablet,
+                label: __('Preview Tablet Size', 'newspack-plugin')
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: () => this.setState({
+                  device: 'phone'
+                }),
+                variant: 'phone' === device && 'primary',
+                icon: mobile,
+                label: __('Preview Phone Size', 'newspack-plugin')
+              })]
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "newspack-web-preview__toolbar-right",
+            children: /*#__PURE__*/_jsx(Button, {
+              onClick: () => {
+                onClose();
+                this.setState({
+                  isPreviewVisible: false,
+                  loaded: false
+                });
+              },
+              icon: closeSmall,
+              label: __('Close Preview', 'newspack-plugin')
+            })
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "newspack-web-preview__content",
+          children: [!loaded && /*#__PURE__*/_jsxs("div", {
+            className: "newspack-web-preview__is-waiting",
+            children: [/*#__PURE__*/_jsx(Waiting, {
+              isLeft: true
+            }), __('Loading…', 'newspack-plugin')]
+          }), /*#__PURE__*/_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__*/_jsxs(Fragment, {
+      children: [renderButton ? renderButton({
+        showPreview: this.showPreview
+      }) : /*#__PURE__*/_jsx(Button, {
+        variant: variant,
+        onClick: this.showPreview,
+        tabIndex: "0",
+        children: label
+      }), this.getWebPreviewModal()]
+    });
+  }
+}
+WebPreview.defaultProps = {
+  url: '//newspack.com',
+  label: __('Preview', 'newspack-plugin'),
+  onLoad: () => {}
+};
+export default WebPreview;

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

@@ -0,0 +1,155 @@
+/**
+ * Web Preview
+ */
+
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-web-preview {
+	// Color
+	--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;
+	height: 100%;
+	left: 0;
+	margin: 0;
+	max-width: 100%;
+	padding: 32px;
+	position: fixed;
+	top: 0;
+	width: 100%;
+	z-index: 99999;
+
+	&.phone iframe {
+		max-width: 380px;
+	}
+
+	&.tablet iframe {
+		max-width: 768px;
+	}
+
+	&.is-loaded iframe {
+		opacity: 1;
+	}
+
+	&--open {
+		overflow: hidden;
+	}
+
+	&__interior {
+		animation: appear-animation 125ms ease-in-out;
+		animation-fill-mode: forwards;
+		background: white;
+		border-radius: 2px;
+		overflow: hidden;
+		height: 100%;
+		width: 100%;
+	}
+
+	&__content {
+		background: wp-colors.$gray-100;
+		height: calc(100% - 49px);
+		-webkit-overflow-scrolling: touch;
+		overflow-x: hidden;
+		width: 100%;
+
+		iframe {
+			background: #fff;
+			display: block;
+			height: 100%;
+			margin: 0 auto;
+			max-width: 100%;
+			opacity: 0;
+			outline: 1px solid wp-colors.$gray-300;
+			padding: 0;
+			pointer-events: all;
+			transition: max-width 125ms ease-in-out, opacity 250ms ease-in-out;
+			width: 100%;
+		}
+	}
+
+	&__is-waiting {
+		align-items: center;
+		display: flex;
+		left: 50%;
+		margin: -12px 0 0;
+		position: absolute;
+		top: 50%;
+		transform: translateX(-50%);
+	}
+
+	&__toolbar {
+		border-bottom: 1px solid wp-colors.$gray-300;
+		display: flex;
+		padding: 6px;
+
+		&-left {
+			flex: 0 0 auto;
+
+			.newspack-button-group {
+				display: flex;
+				margin: 0;
+			}
+
+			.newspack-button {
+				display: none;
+				padding: 0 !important;
+
+				&.is-selected {
+					background: colors.$primary-500;
+					color: white;
+
+					&:active,
+					&:focus,
+					&:hover {
+						box-shadow: none !important;
+						color: white;
+						outline: none;
+					}
+
+					&:focus {
+						box-shadow: inset 0 0 0 1px colors.$primary-500, inset 0 0 0 3px white !important;
+					}
+				}
+
+				@media screen and ( min-width: 528px ) {
+					&.is-phone,
+					&.is-tablet {
+						display: flex;
+					}
+				}
+
+				@media screen and ( min-width: 816px ) {
+					&.is-desktop {
+						display: flex;
+					}
+				}
+			}
+		}
+
+		&-right {
+			display: flex;
+			flex: 1;
+			justify-content: flex-end;
+		}
+
+		.newspack-button {
+			border-radius: 0 !important;
+		}
+	}
+}
+
+@keyframes appear-animation {
+	from {
+		margin-top: 32px;
+	}
+	to {
+		margin-top: 0;
+	}
+}