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

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

@@ -1,86 +0,0 @@
-/**
- * Tabbed Navigation
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-tabbed-navigation {
-	background: white;
-	width: 100%;
-
-	@media only screen and ( min-width: 600px ) {
-		position: sticky;
-		top: 46px;
-		z-index: 3;
-	}
-
-	@media only screen and ( min-width: 783px ) {
-		top: 32px;
-	}
-
-	ul {
-		box-shadow: 0 -1px 0 inset wp-colors.$gray-300;
-		display: flex;
-		flex-wrap: wrap;
-		margin: 0;
-	}
-
-	li {
-		margin-bottom: 0;
-		width: 100%;
-
-		@media screen and ( min-width: 600px ) {
-			width: auto;
-		}
-
-		a {
-			align-items: center;
-			color: wp-colors.$gray-900;
-			display: flex;
-			font-weight: bold;
-			height: 48px;
-			padding: 12px 15px;
-			text-decoration: none;
-
-			@media screen and ( min-width: 600px ) {
-				border-bottom: 4px solid transparent;
-				padding-bottom: 8px;
-			}
-
-			&:active,
-			&:focus,
-			&:hover {
-				color: var( --wp-admin-theme-color );
-				outline: none;
-			}
-
-			&:focus {
-				box-shadow: none;
-			}
-
-			&:focus-visible {
-				outline: 2px solid;
-				outline-offset: -2px;
-			}
-
-			&.selected {
-				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 );
-					box-shadow: none;
-				}
-			}
-
-			&.disabled {
-				cursor: not-allowed;
-				opacity: 0.3;
-				pointer-events: none;
-
-				&:hover {
-					color: inherit;
-				}
-			}
-		}
-	}
-}

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

@@ -1,57 +0,0 @@
-/**
- * Text Control
- */
-
-/**
- * WordPress dependencies
- */
-import { TextControl as BaseComponent } from '@wordpress/components';
-import { useEffect, useRef } 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";
-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 ? _jsx("div", {
-    ref: wrapperRef,
-    className: "newspack-text-control--required",
-    children: _jsx(BaseComponent, {
-      className: classes,
-      required: required,
-      ...otherProps
-    })
-  }) : _jsx(BaseComponent, {
-    className: classes,
-    ...otherProps
-  });
-};
-export default TextControl;

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

@@ -1,32 +0,0 @@
-/**
- * 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

@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies.
- */
-import { ENTER } from '@wordpress/keycodes';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const InteractiveDiv = ({
-  style = {},
-  ...props
-}) => _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

@@ -1,44 +0,0 @@
-/**
- * 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 "@emotion/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 _jsx(Spinner, {
-      className: classes,
-      ...otherProps
-    });
-  }
-}
-export default Waiting;

package/dist/esm/waiting/style.scss

@@ -1,27 +0,0 @@
-/**
- * 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

@@ -1,183 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * WordPress dependencies.
- */
-import { Component, createRef, Fragment, createPortal } from '@wordpress/element';
-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, 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 = () => {},
-        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(_jsx("div", {
-        className: classes,
-        children: _jsxs("div", {
-          className: "newspack-web-preview__interior",
-          children: [_jsxs("div", {
-            className: "newspack-web-preview__toolbar",
-            children: [_jsx("div", {
-              className: "newspack-web-preview__toolbar-left",
-              children: _jsxs(ButtonGroup, {
-                children: [_jsx(Button, {
-                  onClick: () => this.setState({
-                    device: 'desktop'
-                  }),
-                  variant: 'desktop' === device && 'primary',
-                  icon: desktop,
-                  label: __('Preview Desktop Size', 'newspack-plugin')
-                }), _jsx(Button, {
-                  onClick: () => this.setState({
-                    device: 'tablet'
-                  }),
-                  variant: 'tablet' === device && 'primary',
-                  icon: tablet,
-                  label: __('Preview Tablet Size', 'newspack-plugin')
-                }), _jsx(Button, {
-                  onClick: () => this.setState({
-                    device: 'phone'
-                  }),
-                  variant: 'phone' === device && 'primary',
-                  icon: mobile,
-                  label: __('Preview Phone Size', 'newspack-plugin')
-                })]
-              })
-            }), _jsx("div", {
-              className: "newspack-web-preview__toolbar-right",
-              children: _jsx(Button, {
-                onClick: () => {
-                  onClose();
-                  this.setState({
-                    isPreviewVisible: false,
-                    loaded: false
-                  });
-                },
-                icon: closeSmall,
-                label: __('Close Preview', 'newspack-plugin')
-              })
-            })]
-          }), _jsxs("div", {
-            className: "newspack-web-preview__content",
-            children: [!loaded && _jsxs("div", {
-              className: "newspack-web-preview__is-waiting",
-              children: [_jsx(Waiting, {
-                isLeft: true
-              }), __('Loading…', 'newspack-plugin')]
-            }), _jsx("iframe", {
-              ref: this.iframeRef,
-              title: "web-preview",
-              src: url,
-              onLoad: () => {
-                this.setState({
-                  loaded: true
-                });
-                this.props.onLoad(this.iframeRef.current);
-              }
-            })]
-          })]
-        })
-      }), 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');
-    } else {
-      document.body.classList.remove('newspack-web-preview--open');
-    }
-  }
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      label,
-      variant,
-      /**
-       * Inversion of control - let the caller render
-       * the button that will trigger the modal
-       */
-      renderButton
-    } = this.props;
-    return _jsxs(Fragment, {
-      children: [renderButton ? renderButton({
-        showPreview: this.showPreview
-      }) : _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;