newspack-components 2.2.1 → 3.0.0-alpha.2

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

@@ -1,56 +0,0 @@
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-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,
-    children = null
-  } = _ref;
-  const displayedItems = items.filter(item => !item.isHiddenInTabbedNavigation);
-  const {
-    location
-  } = useHistory();
-  const currentIndex = findIndex(displayedItems, ['path', location.pathname]);
-  return _jsxs("div", {
-    className: classnames('newspack-tabbed-navigation', className),
-    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({
-            disabled: disableUpcoming && index > currentIndex
-          }),
-          children: item.label
-        })
-      }, index))
-    }), children]
-  });
-};
-export default TabbedNavigation;

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,66 +0,0 @@
-/**
- * Text Control
- */
-
-/**
- * WordPress dependencies
- */
-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'));
-      }
-    }
-  }
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      required,
-      isWide,
-      withMargin = true,
-      ...otherProps
-    } = this.props;
-    const classes = classNames('newspack-text-control', {
-      'newspack-text-control--wide': isWide
-    }, {
-      'newspack-text-control--with-margin': withMargin
-    }, className);
-    return required ? _jsx("div", {
-      ref: this.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,32 +0,0 @@
-/**
- * WordPress dependencies.
- */
-import { ENTER } from '@wordpress/keycodes';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const InteractiveDiv = _ref => {
-  let {
-    style = {},
-    ...props
-  } = _ref;
-  return _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,184 +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 } 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 = () => {},
-        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')
-                }), _jsx(Button, {
-                  onClick: () => this.setState({
-                    device: 'tablet'
-                  }),
-                  variant: 'tablet' === device && 'primary',
-                  icon: tablet,
-                  label: __('Preview Tablet Size', 'newspack')
-                }), _jsx(Button, {
-                  onClick: () => this.setState({
-                    device: 'phone'
-                  }),
-                  variant: 'phone' === device && 'primary',
-                  icon: mobile,
-                  label: __('Preview Phone Size', 'newspack')
-                })]
-              })
-            }), _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')
-              })
-            })]
-          }), _jsxs("div", {
-            className: "newspack-web-preview__content",
-            children: [!loaded && _jsxs("div", {
-              className: "newspack-web-preview__is-waiting",
-              children: [_jsx(Waiting, {
-                isLeft: true
-              }), __('Loading…', 'newspack')]
-            }), _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'),
-  onLoad: () => {}
-};
-export default WebPreview;

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

@@ -1,155 +0,0 @@
-/**
- * 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;
-	}
-}