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

package/dist/cjs/with-wizard/index.js

@@ -1,317 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = withWizard;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-var _icons = require("@wordpress/icons");
-var _ = require("../");
-var _router = _interopRequireDefault(require("../proxied-imports/router"));
-var _footer = _interopRequireDefault(require("../footer"));
-require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * WordPress dependencies.
- */
-const __ = _i18n.__;
-/**
- * Internal dependencies.
- */
-const {
-  Redirect,
-  Route
-} = _router.default;
-
-/**
- * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
- */
-function withWizard(WrappedComponent, requiredPlugins) {
-  return class WrappedWithWizard extends _element.Component {
-    constructor(props) {
-      super(props);
-      (0, _defineProperty2.default)(this, "componentDidMount", () => {
-        // If there are no requiredPlugins, fire onWizardReady as soon as component mounts.
-        if (!requiredPlugins) {
-          const instance = this.wrappedComponentRef.current;
-          // eslint-disable-next-line no-unused-expressions
-          instance && instance.onWizardReady && instance.onWizardReady();
-        }
-      });
-      /**
-       * Set the error. Called by Wizards when an error occurs.
-       *
-       * @return {Promise} Resolved after state update
-       */
-      (0, _defineProperty2.default)(this, "setError", error => {
-        return new Promise(resolve => {
-          this.setState({
-            error: error || null
-          }, () => resolve());
-        });
-      });
-      /**
-       * Render any errors that need rendering.
-       *
-       * @return {Component} Error UI
-       */
-      (0, _defineProperty2.default)(this, "getError", () => {
-        const {
-          error
-        } = this.state;
-        if (!error) {
-          return null;
-        }
-        const parsedError = this.parseError(error);
-        const {
-          level
-        } = parsedError;
-        if ('fatal' === level) {
-          return this.getFatalError(parsedError);
-        }
-        return this.getErrorNotice(parsedError);
-      });
-      /**
-       * Get a notice-level error.
-       *
-       * @param {Error} error object already parsed by parseError
-       * @return {Component} Error notice
-       */
-      (0, _defineProperty2.default)(this, "getErrorNotice", error => {
-        const {
-          message
-        } = error;
-        return (0, _jsxRuntime.jsx)(_.Notice, {
-          isError: true,
-          className: "newspack-wizard__above-header",
-          noticeText: message,
-          rawHTML: true
-        });
-      });
-      /**
-       * Get a fatal-level error.
-       *
-       * @param {Error} error object already parsed by parseError
-       * @return {Component} React object
-       */
-      (0, _defineProperty2.default)(this, "getFatalError", error => {
-        const fallbackURL = this.getFallbackURL();
-        if (!fallbackURL) {
-          return null;
-        }
-        const {
-          message
-        } = error;
-        return (0, _jsxRuntime.jsxs)(_.Modal, {
-          title: __('Unrecoverable error'),
-          onRequestClose: () => window.location = fallbackURL,
-          children: [(0, _jsxRuntime.jsx)(_.Notice, {
-            noticeText: message,
-            isError: true,
-            rawHTML: true
-          }), (0, _jsxRuntime.jsx)(_.Card, {
-            buttonsCard: true,
-            noBorder: true,
-            className: "justify-end",
-            children: (0, _jsxRuntime.jsx)(_.Button, {
-              isPrimary: true,
-              href: fallbackURL,
-              children: __('Return to Dashboard', 'newspack-plugin')
-            })
-          })]
-        });
-      });
-      /**
-       * Get all the relevant info out of a raw API error response.
-       *
-       * @param {Object} error error object
-       * @return {Object} Error object with relevant fields and defaults
-       */
-      (0, _defineProperty2.default)(this, "parseError", error => {
-        const {
-          data,
-          message,
-          code
-        } = error;
-        let level = 'fatal';
-        if (!!data && 'level' in data) {
-          level = data.level;
-        } else if ('rest_invalid_param' === code) {
-          level = 'notice';
-        }
-        return {
-          message,
-          level
-        };
-      });
-      /**
-       * Called when plugin installation is complete. Updates state and calls onWizardReady on the wrapped component.
-       */
-      (0, _defineProperty2.default)(this, "pluginInstallationStatus", ({
-        complete
-      }) => {
-        if (this.state.loading) {
-          this.doneLoading();
-        }
-        const instance = this.wrappedComponentRef.current;
-        this.setState({
-          complete
-        }, () => {
-          // eslint-disable-next-line no-unused-expressions
-          complete && instance && instance.onWizardReady && instance.onWizardReady();
-        });
-      });
-      /**
-       * Begin loading.
-       */
-      (0, _defineProperty2.default)(this, "startLoading", quiet => {
-        if (quiet) {
-          this.setState(state => ({
-            quietLoading: state.quietLoading + 1
-          }));
-        } else {
-          this.setState(state => ({
-            loading: state.loading + 1
-          }));
-        }
-      });
-      /**
-       * End loading.
-       */
-      (0, _defineProperty2.default)(this, "doneLoading", quiet => {
-        if (quiet) {
-          this.setState(state => ({
-            quietLoading: state.quietLoading - 1
-          }));
-        } else {
-          this.setState(state => ({
-            loading: state.loading - 1
-          }));
-        }
-      });
-      /**
-       * Replacement for core apiFetch that automatically manages wizard loading UI.
-       */
-      (0, _defineProperty2.default)(this, "wizardApiFetch", args => {
-        const {
-          quiet
-        } = args;
-        this.startLoading(quiet);
-        return new Promise((resolve, reject) => {
-          (0, _apiFetch.default)(args).then(response => {
-            this.doneLoading(quiet);
-            resolve(response);
-          }).catch(error => {
-            this.doneLoading(quiet);
-            reject(error);
-          });
-        });
-      });
-      /**
-       * Render a Route that checks for plugin installation requirements, and redirects to '/' when all are done.
-       *
-       * @return {void}
-       */
-      (0, _defineProperty2.default)(this, "pluginRequirements", () => {
-        const {
-          complete
-        } = this.state;
-        /* After all plugins are loaded, redirect to / (this could be configurable) */
-        if (complete) {
-          return (0, _jsxRuntime.jsx)(Redirect, {
-            from: "/plugin-requirements",
-            to: "/"
-          });
-        }
-        return (0, _jsxRuntime.jsx)(Route, {
-          path: "/",
-          render: () => (0, _jsxRuntime.jsxs)(_element.Fragment, {
-            children: [complete !== null && (0, _jsxRuntime.jsx)("div", {
-              className: "newspack-wizard__header",
-              children: (0, _jsxRuntime.jsx)("div", {
-                className: "newspack-wizard__header__inner",
-                children: (0, _jsxRuntime.jsxs)("div", {
-                  className: "newspack-wizard__title",
-                  children: [(0, _jsxRuntime.jsx)(_.Button, {
-                    isLink: true,
-                    href: newspack_urls.dashboard,
-                    label: __('Return to Dashboard', 'newspack-plugin'),
-                    showTooltip: true,
-                    icon: _icons.home,
-                    iconSize: 36,
-                    children: (0, _jsxRuntime.jsx)(_.NewspackIcon, {
-                      size: 36
-                    })
-                  }), (0, _jsxRuntime.jsx)("div", {
-                    children: (0, _jsxRuntime.jsx)("h2", {
-                      children: requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin')
-                    })
-                  })]
-                })
-              })
-            }), (0, _jsxRuntime.jsx)("div", {
-              className: "newspack-wizard newspack-wizard__content",
-              children: (0, _jsxRuntime.jsx)(_.PluginInstaller, {
-                plugins: requiredPlugins,
-                onStatus: status => this.pluginInstallationStatus(status)
-              })
-            })]
-          })
-        });
-      });
-      (0, _defineProperty2.default)(this, "getFallbackURL", () => {
-        if (typeof newspack_urls !== 'undefined') {
-          return newspack_urls.dashboard;
-        }
-      });
-      this.state = {
-        complete: null,
-        error: null,
-        loading: requiredPlugins && requiredPlugins.length > 0 ? 1 : 0,
-        quietLoading: false
-      };
-      this.wrappedComponentRef = (0, _element.createRef)();
-    }
-    /**
-     * Render.
-     */
-    render() {
-      const {
-        simpleFooter
-      } = this.props;
-      const {
-        loading,
-        quietLoading,
-        error
-      } = this.state;
-      const loadingClasses = [loading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded'];
-      if (quietLoading) {
-        loadingClasses.push('newspack-wizard__is-loading-quiet');
-      }
-      return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-        children: [this.getError(), (0, _jsxRuntime.jsx)("div", {
-          className: loadingClasses.join(' '),
-          children: (0, _jsxRuntime.jsx)(WrappedComponent, {
-            pluginRequirements: requiredPlugins && this.pluginRequirements(),
-            clearError: this.clearError,
-            getError: this.getError,
-            errorData: error,
-            setError: this.setError,
-            isLoading: loading,
-            startLoading: this.startLoading,
-            doneLoading: this.doneLoading,
-            wizardApiFetch: this.wizardApiFetch,
-            ref: this.wrappedComponentRef,
-            ...this.props
-          })
-        }), !loading && (0, _jsxRuntime.jsx)(_footer.default, {
-          simple: simpleFooter
-        })]
-      });
-    }
-  };
-}

package/dist/cjs/with-wizard-screen/style.scss

@@ -1,160 +0,0 @@
-/**
- * With Wizard Screen
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-@use '../../../shared/scss/colors';
-
-.newspack-wizard {
-	// 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};
-
-	color: wp-colors.$gray-900;
-
-	// Headings
-	h1,
-	h2,
-	h3 {
-		color: inherit;
-	}
-
-	h1 {
-		line-height: 1.4;
-	}
-
-	// Links
-	a {
-		color: var( --wp-admin-theme-color );
-
-		&:active,
-		&:focus,
-		&:hover {
-			color: var( --wp-admin-theme-color-darker-10 );
-		}
-
-		&:focus {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
-			outline: 3px solid transparent;
-		}
-	}
-
-	&__header {
-		background: white;
-	}
-
-	&__title {
-		align-items: center;
-		border-bottom: 1px solid wp-colors.$gray-300;
-		display: flex;
-
-		h2 {
-			margin: 0;
-			padding: 0;
-		}
-
-		> div {
-			align-items: baseline;
-			display: flex;
-			padding: 0 24px;
-
-			span {
-				color: wp-colors.$gray-700;
-				display: none;
-				margin-left: 8px;
-
-				@media screen and ( min-width: 744px ) {
-					display: block;
-				}
-			}
-		}
-
-		svg {
-			fill: white;
-			margin: 0 !important;
-
-			&.newspack-icon {
-				flex: 0 0 36px;
-				margin-bottom: -1px !important;
-			}
-
-			&:not( .newspack-icon ) {
-				background: colors.$primary-500;
-				left: 50%;
-				margin: -28px 0 0 -28px !important;
-				opacity: 0;
-				padding: 10px;
-				position: absolute;
-				top: 50%;
-				transition: opacity 125ms ease-in-out;
-			}
-		}
-
-		.components-button.has-icon {
-			padding: 0;
-			position: relative;
-
-			&:hover {
-				svg {
-					opacity: 1;
-				}
-			}
-
-			&:focus-visible {
-				outline: none !important;
-
-				&::before {
-					border: 2px solid white;
-					border-radius: 2px;
-					content: '';
-					display: block;
-					inset: 6px 6px 5px;
-					position: absolute;
-				}
-			}
-		}
-	}
-
-	&__content {
-		margin: 0 auto;
-		max-width: 1208px;
-		padding: 0 16px;
-
-		@media screen and ( min-width: 744px ) {
-			padding: 32px 84px;
-		}
-
-		// Typography
-
-		strong {
-			font-weight: bold;
-		}
-
-		small {
-			font-size: 12px;
-			line-height: 1.4;
-		}
-
-		// Thematic Break
-
-		hr {
-			background: wp-colors.$gray-300;
-			border: 0;
-			height: 1px;
-			margin: 48px 0;
-
-			@media screen and ( min-width: 744px ) {
-				margin: 64px 0;
-			}
-		}
-	}
-
-	&__above-header {
-		border-radius: 0;
-		margin: 0;
-	}
-}

package/dist/esm/action-card/index.js

@@ -1,221 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * Action Card
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { ExternalLink, ToggleControl } from '@wordpress/components';
-import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Button, Card, Grid, Handoff, Notice, Waiting } from '../';
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class ActionCard extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      expanded: false
-    });
-  }
-  /**
-   * When the collapse prop is updated to true, collapse the card if already expanded.
-   */
-  componentDidUpdate(prevProps) {
-    if (!prevProps.collapse && this.props.collapse && this.state.expanded) {
-      this.setState({
-        expanded: false
-      });
-    }
-  }
-
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      badge,
-      className,
-      checkbox,
-      children,
-      disabled,
-      title,
-      description,
-      handoff,
-      editLink,
-      href,
-      notification,
-      notificationLevel,
-      notificationHTML,
-      actionContent,
-      actionText,
-      secondaryActionText,
-      secondaryDestructive,
-      image,
-      imageLink,
-      indent,
-      isSmall,
-      isMedium,
-      simple,
-      onClick,
-      onSecondaryActionClick,
-      isWaiting,
-      titleLink,
-      toggleChecked,
-      toggleOnChange,
-      hasGreyHeader,
-      hasWhiteHeader,
-      isPending,
-      expandable = false
-    } = this.props;
-    const {
-      expanded
-    } = this.state;
-    const hasChildren = notification || children;
-    const classes = classnames('newspack-action-card', simple && 'newspack-card--is-clickable', hasGreyHeader && 'newspack-card--has-grey-header', hasWhiteHeader && 'newspack-card--has-white-header', hasChildren && 'newspack-card--has-children', indent && 'newspack-card--indent', isSmall && 'is-small', isMedium && 'is-medium', checkbox && 'has-checkbox', expandable && 'is-expandable', actionContent && 'has-action-content', className);
-    const backgroundImageStyles = url => {
-      return url ? {
-        backgroundImage: `url(${url})`
-      } : {};
-    };
-    const titleProps = toggleOnChange && !titleLink && !disabled ? {
-      onClick: () => toggleOnChange(!toggleChecked),
-      tabIndex: '0'
-    } : {};
-    const hasInternalLink = href && href.indexOf('http') !== 0;
-    const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
-    const badges = !Array.isArray(badge) && badge ? [badge] : badge;
-    return _jsxs(Card, {
-      className: classes,
-      onClick: simple && onClick,
-      children: [_jsxs("div", {
-        className: "newspack-action-card__region newspack-action-card__region-top",
-        children: [toggleOnChange && _jsx(ToggleControl, {
-          checked: toggleChecked,
-          onChange: toggleOnChange,
-          disabled: disabled
-        }), image && !toggleOnChange && _jsx("div", {
-          className: "newspack-action-card__region newspack-action-card__region-left",
-          children: _jsx("a", {
-            href: imageLink,
-            children: _jsx("div", {
-              className: "newspack-action-card__image",
-              style: backgroundImageStyles(image)
-            })
-          })
-        }), checkbox && !toggleOnChange && _jsx("div", {
-          className: "newspack-action-card__region newspack-action-card__region-left",
-          children: _jsx("span", {
-            className: classnames('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
-            children: 'checked' === checkbox && _jsx(Icon, {
-              icon: check
-            })
-          })
-        }), _jsx("div", {
-          className: "newspack-action-card__region newspack-action-card__region-center",
-          children: _jsxs(Grid, {
-            columns: 1,
-            gutter: 8,
-            noMargin: true,
-            children: [_jsxs("h2", {
-              children: [_jsxs("span", {
-                className: "newspack-action-card__title",
-                ...titleProps,
-                children: [titleLink && _jsx("a", {
-                  href: titleLink,
-                  children: title
-                }), !titleLink && expandable && _jsx(Button, {
-                  isLink: true,
-                  onClick: () => this.setState({
-                    expanded: !expanded
-                  }),
-                  children: title
-                }), !titleLink && !expandable && title]
-              }), badges?.length && badges.map((badgeText, i) => _jsx("span", {
-                className: "newspack-action-card__badge",
-                children: badgeText
-              }, `badge-${i}`))]
-            }), description && _jsxs("p", {
-              children: [typeof description === 'string' && description, typeof description === 'function' && description()]
-            })]
-          })
-        }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && _jsxs("div", {
-          className: "newspack-action-card__region newspack-action-card__region-right",
-          children: [actionContent && actionContent, actionText && (handoff ? _jsx(Handoff, {
-            plugin: handoff,
-            editLink: editLink,
-            compact: true,
-            isLink: true,
-            children: actionText
-          }) : onClick || hasInternalLink ? _jsx(Button, {
-            disabled: disabled,
-            isLink: true,
-            href: href,
-            onClick: onClick,
-            className: "newspack-action-card__primary_button",
-            children: actionText
-          }) : href ? _jsx(ExternalLink, {
-            href: href,
-            className: "newspack-action-card__primary_button",
-            children: actionText
-          }) : _jsxs("div", {
-            className: "newspack-action-card__container",
-            children: [actionText, isWaiting && _jsx(Waiting, {
-              isRight: true
-            })]
-          })), isDisplayingSecondaryAction && _jsx(Button, {
-            isLink: true,
-            onClick: onSecondaryActionClick,
-            className: "newspack-action-card__secondary_button",
-            isDestructive: secondaryDestructive,
-            children: secondaryActionText
-          })]
-        }), expandable && _jsx(Button, {
-          onClick: () => this.setState({
-            expanded: !expanded
-          }),
-          children: _jsx(Icon, {
-            icon: expanded ? chevronUp : chevronDown,
-            height: 24,
-            width: 24
-          })
-        })]
-      }), notification && _jsxs("div", {
-        className: "newspack-action-card__notification newspack-action-card__region-children",
-        children: ['error' === notificationLevel && _jsx(Notice, {
-          noticeText: notification,
-          isError: true,
-          rawHTML: notificationHTML
-        }), 'info' === notificationLevel && _jsx(Notice, {
-          noticeText: notification,
-          rawHTML: notificationHTML
-        }), 'success' === notificationLevel && _jsx(Notice, {
-          noticeText: notification,
-          isSuccess: true,
-          rawHTML: notificationHTML
-        }), 'warning' === notificationLevel && _jsx(Notice, {
-          noticeText: notification,
-          isWarning: true,
-          rawHTML: notificationHTML
-        })]
-      }), children && (expandable && expanded || !expandable) && _jsx("div", {
-        className: "newspack-action-card__region-children",
-        children: children
-      })]
-    });
-  }
-}
-ActionCard.defaultProps = {
-  toggleChecked: false
-};
-export default ActionCard;