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

package/dist/esm/image-upload/index.js

@@ -1,139 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * Image Upload
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-import { __ as alias__ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies.
- */
-const __ = alias__;
-import { Button, InfoButton } from '../';
-import './style.scss';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-class ImageUpload extends Component {
-  /**
-   * Constructor.
-   */
-  constructor() {
-    super(...arguments);
-    /**
-     * Open the WP media modal.
-     */
-    _defineProperty(this, "openModal", () => {
-      if (this.state.frame) {
-        this.state.frame.open();
-        return;
-      }
-      this.setState({
-        frame: wp.media({
-          title: __('Select or upload image'),
-          button: {
-            text: __('Select')
-          },
-          library: {
-            type: 'image'
-          },
-          multiple: false
-        })
-      }, () => {
-        this.state.frame.on('select', this.handleImageSelect);
-        this.state.frame.open();
-      });
-    });
-    /**
-     * Update the state when an image is selected from the media modal.
-     */
-    _defineProperty(this, "handleImageSelect", () => {
-      const {
-        onChange
-      } = this.props;
-      const attachment = this.state.frame.state().get('selection').first().toJSON();
-      onChange(attachment);
-    });
-    /**
-     * Render.
-     */
-    _defineProperty(this, "render", () => {
-      const {
-        buttonLabel,
-        className,
-        disabled,
-        help,
-        image,
-        info,
-        isCovering,
-        label,
-        onChange,
-        style = {}
-      } = this.props;
-      const classes = classnames('newspack-image-upload__image', {
-        'newspack-image-upload__image--has-image': image
-      }, {
-        'newspack-image-upload__image--covering': isCovering
-      });
-      return _jsxs("div", {
-        className: classnames('newspack-image-upload', className),
-        children: [_jsxs("div", {
-          className: "newspack-image-upload__header",
-          children: [label && _jsx("label", {
-            className: "newspack-image-upload__label",
-            children: label
-          }), info && _jsx(InfoButton, {
-            text: info
-          })]
-        }), _jsx("div", {
-          className: classes,
-          style: {
-            ...style
-          },
-          children: image?.url ? _jsxs(_Fragment, {
-            children: [_jsx("img", {
-              "data-testid": "image-upload",
-              src: image.url,
-              alt: __('Image preview', 'newspack-plugin')
-            }), _jsxs("div", {
-              className: "newspack-image-upload__controls",
-              children: [_jsx(Button, {
-                disabled: disabled,
-                onClick: this.openModal,
-                isLink: true,
-                children: __('Replace', 'newspack-plugin')
-              }), _jsx("span", {
-                className: "sep"
-              }), _jsx(Button, {
-                disabled: disabled,
-                onClick: () => onChange(null),
-                isLink: true,
-                isDestructive: true,
-                children: __('Remove', 'newspack-plugin')
-              })]
-            })]
-          }) : _jsx(Button, {
-            disabled: disabled,
-            onClick: this.openModal,
-            isLink: true,
-            children: buttonLabel ? buttonLabel : __('Upload', 'newspack-plugin')
-          })
-        }), help && _jsx("p", {
-          className: "newspack-image-upload__help",
-          children: help
-        })]
-      });
-    });
-    this.state = {
-      frame: false
-    };
-  }
-}
-export default ImageUpload;

package/dist/esm/image-upload/index.test.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ImageUpload from './';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-describe('ImageUpload', () => {
-  it('should render an add image button', () => {
-    const {
-      getByText
-    } = render(_jsx(ImageUpload, {}));
-    expect(getByText('Upload')).toBeInTheDocument();
-  });
-  it('should render replace and remove buttons if there is an image provided', () => {
-    const image = {
-      id: 1234,
-      url: 'https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg'
-    };
-    const {
-      getByText,
-      getByTestId
-    } = render(_jsx(ImageUpload, {
-      image: image
-    }));
-    expect(getByText('Remove')).toBeInTheDocument();
-    expect(getByText('Replace')).toBeInTheDocument();
-    expect(getByTestId('image-upload')).toBeInTheDocument();
-    expect(getByTestId('image-upload').getAttribute('src')).toEqual(image.url);
-  });
-});

package/dist/esm/image-upload/style.scss

@@ -1,103 +0,0 @@
-/**
- * Image Upload
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-image-upload {
-	margin: 32px 0;
-	&__header {
-		display: flex;
-	}
-	&__label {
-		margin: 0 0 8px;
-	}
-	&__image {
-		align-items: center;
-		background-repeat: no-repeat;
-		background-size: contain;
-		background-position: center;
-		border: 1px dashed wp-colors.$gray-700;
-		border-radius: 2px;
-		display: flex;
-		justify-content: center;
-		max-width: 100%;
-		min-height: 48px;
-		position: relative;
-		&--covering {
-			background-size: cover;
-		}
-		&:not( &--has-image ) {
-			.newspack-button {
-				background: white !important;
-				border-radius: 2px !important;
-				padding: 4px 16px !important;
-
-				&:active,
-				&:focus,
-				&:hover {
-					background: white !important;
-				}
-
-				&:focus {
-					outline-offset: -3px !important;
-				}
-			}
-		}
-		&--has-image {
-			border: none;
-			overflow: hidden;
-			&::before,
-			&::after {
-				border: 1px solid rgba( black, 0.54 );
-				border-radius: 2px;
-				content: '';
-				inset: 0;
-				position: absolute;
-				z-index: 0;
-			}
-			button,
-			&::after {
-				opacity: 0;
-				transition: opacity 125ms;
-			}
-			button {
-				z-index: 1;
-				position: relative;
-			}
-			&::after {
-				background: rgba( white, 0.9 );
-				border-color: wp-colors.$gray-700;
-			}
-			&:focus-within,
-			&:hover {
-				button,
-				&::after {
-					opacity: 1;
-				}
-			}
-			img {
-				max-height: 100%;
-				max-width: 100%;
-			}
-			.sep {
-				background: transparent;
-				display: block;
-				height: 8px;
-				margin: 0;
-				width: 100%;
-			}
-		}
-	}
-	&__image + &__help {
-		color: wp-colors.$gray-700;
-		font-size: 12px;
-		margin: 1em 0 0;
-	}
-	&__controls {
-		align-items: center;
-		display: flex;
-		flex-direction: column;
-		position: absolute;
-	}
-}

package/dist/esm/index.js

@@ -1,45 +0,0 @@
-export { default as ActionCard } from './action-card';
-export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
-export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
-export { default as Button } from './button';
-export { default as ButtonCard } from './button-card';
-export { default as Card } from './card';
-export { default as CategoryAutocomplete } from './category-autocomplete';
-export { default as ColorPicker } from './color-picker';
-export { default as CustomSelectControl } from './custom-select-control';
-export { default as FormTokenField } from './form-token-field';
-export { default as Footer } from './footer';
-export { default as Handoff } from './handoff';
-export { default as HandoffMessage } from './handoff-message';
-export { default as InfoButton } from './info-button';
-export { default as ImageUpload } from './image-upload';
-export { default as GlobalNotices } from './global-notices';
-export { default as Grid } from './grid';
-export { default as Modal } from './modal';
-export { default as NewspackIcon } from './newspack-icon';
-export { default as NewspackLogo } from './newspack-logo';
-export { default as Notice } from './notice';
-export { default as PatronsLogo } from './patrons-logo';
-export { default as PluginInstaller } from './plugin-installer';
-export { default as PluginSettings } from './plugin-settings';
-export { default as PluginToggle } from './plugin-toggle';
-export { default as Popover } from './popover';
-export { default as ProgressBar } from './progress-bar';
-export { default as RadioControl } from './radio-control';
-export { default as SectionHeader } from './section-header';
-export { default as SelectControl } from './select-control';
-export { default as Settings } from './settings';
-export { default as StepsList } from './steps-list';
-export { default as StepsListItem } from './steps-list-item';
-export { default as StyleCard } from './style-card';
-export { default as TabbedNavigation } from './tabbed-navigation';
-export { default as TextControl } from './text-control';
-export { default as Waiting } from './waiting';
-export { default as WebPreview } from './web-preview';
-export { default as Wizard } from './wizard';
-export { default as withWizard } from './with-wizard';
-export { default as withWizardScreen } from './with-wizard-screen';
-export { default as Router } from './proxied-imports/router';
-export { default as hooks } from './hooks';
-export { default as utils } from './utils';
-import './style.scss';

package/dist/esm/info-button/index.js

@@ -1,42 +0,0 @@
-/**
- * Info Button
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-import { Tooltip } from '@wordpress/components';
-import { Icon, info } from '@wordpress/icons';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies.
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-class InfoButton extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    return _jsx(Tooltip, {
-      ...otherProps,
-      children: _jsx("span", {
-        className: classnames('newspack-info-button', className),
-        children: _jsx(Icon, {
-          icon: info
-        })
-      })
-    });
-  }
-}
-export default InfoButton;

package/dist/esm/info-button/style.scss

@@ -1,18 +0,0 @@
-/**
- * Info Button
- */
-
-.newspack-info-button {
-	display: inline-block;
-	flex: 0 0 24px;
-	height: 24px;
-	margin: 0;
-	margin-left: 4px;
-	width: 24px;
-	vertical-align: middle;
-
-	svg {
-		display: block;
-		fill: currentcolor;
-	}
-}

package/dist/esm/modal/index.js

@@ -1,39 +0,0 @@
-/**
- * Modal
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-import { Modal as BaseComponent } from '@wordpress/components';
-
-/**
- * Internal dependencies.
- */
-import './style.scss';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-class Modal extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      isWide,
-      isNarrow,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
-    return _jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
-  }
-}
-export default Modal;

package/dist/esm/modal/style.scss

@@ -1,56 +0,0 @@
-/**
- * Modal
- */
-
-@use '../../../shared/scss/colors';
-
-.newspack-modal {
-	// 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};
-
-	@media screen and ( min-width: 744px ) {
-		max-width: 680px;
-		width: 680px;
-
-		&--wide {
-			max-width: 1168px;
-			width: 1168px;
-		}
-	}
-
-	&--narrow {
-		max-width: 360px;
-		width: 360px;
-	}
-
-	@media screen and ( min-width: 960px ) {
-		max-height: calc( 100% - 128px );
-	}
-
-	// 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;
-		}
-	}
-
-	.components-modal__content {
-		> *:last-child {
-			margin-bottom: 0;
-		}
-	}
-}

package/dist/esm/newspack-icon/index.js

@@ -1,50 +0,0 @@
-/**
- * Newspack Icon.
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-import { Path, SVG } from '@wordpress/components';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies.
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-class NewspackIcon extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      simple,
-      size,
-      white
-    } = this.props;
-    const classes = classnames('newspack-icon', simple && 'newspack-icon--simple', white && 'newspack-icon--white', className);
-    return _jsx(SVG, {
-      xmlns: "http://www.w3.org/2000/svg",
-      height: size,
-      width: size,
-      viewBox: "0 0 32 32",
-      className: classes,
-      children: _jsx(Path, {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M32 16c0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16S7.164 0 16 0s16 7.164 16 16zm-10.732.622h1.72v-1.124h-2.823l1.103 1.124zm-3.249-3.31h4.97v-1.124h-6.072l1.102 1.124zm-3.248-3.31h8.217V8.877h-9.32l1.103 1.125zM9.01 8.877l13.977 14.246h-4.66l-5.866-5.98v5.98h-3.45V8.877z"
-      })
-    });
-  }
-}
-NewspackIcon.defaultProps = {
-  size: 32
-};
-export default NewspackIcon;

package/dist/esm/newspack-icon/style.scss

@@ -1,26 +0,0 @@
-/**
- * Newspack Icon
- */
-
-@use '../../../shared/scss/colors';
-
-.newspack-icon {
-	background: colors.$primary-500;
-	fill: white;
-	padding: 12px;
-
-	&--white {
-		background: white;
-		fill: colors.$primary-500;
-	}
-
-	&--simple {
-		background: none;
-		fill: colors.$primary-500;
-		padding: 0;
-	}
-
-	&#{&}--simple#{&}--white {
-		fill: white;
-	}
-}

package/dist/esm/newspack-logo/index.js

@@ -1,46 +0,0 @@
-/**
- * Newspack Logo.
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-import { Path, SVG } from '@wordpress/components';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies.
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-class NewspackLogo extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      centered,
-      className,
-      height
-    } = this.props;
-    const classes = classnames('newspack-logo__svg', centered && 'is-centered', className);
-    return _jsx(SVG, {
-      xmlns: "http://www.w3.org/2000/svg",
-      height: height,
-      viewBox: "0 0 221 64",
-      className: classes,
-      children: _jsx(Path, {
-        d: "M32 0c17.672 0 32 14.328 32 32S49.672 64 32 64C14.326 64 0 49.672 0 32S14.328 0 32 0zm130.57 27.247c3.611 0 6.475 2.521 6.475 7.974 0 5.417-3.134 8.995-8.314 8.995-1.262 0-2.248-.172-3.305-.376v8.551h-4.022V27.67h3.85v1.486c1.534-1.191 3.237-1.908 5.316-1.908zM18.023 17.755v28.49h6.902V34.287l11.733 11.958h9.319l-27.954-28.49zm178.552 9.495c2.009 0 3.219.34 4.581.784v3.407c-1.158-.444-2.878-.921-4.513-.921-2.453 0-4.532 1.294-4.532 5.076 0 4.156 2.077 5.383 4.736 5.387 1.262 0 2.676-.273 4.516-.99v3.34c-1.636.544-3.118.92-5.025.92-6.033 0-8.417-3.442-8.417-8.45 0-5.283 3.305-8.553 8.654-8.553zm-18.195-.003c3.919 0 6.44 1.567 6.435 6.235V43.84h-3.747v-1.771h-.103c-1.327 1.022-2.93 2.079-5.314 2.079-2.112 0-4.36-1.534-4.36-4.6 0-4.133 3.545-4.912 5.997-5.252l3.51-.477v-.47c0-2.181-.886-2.897-2.93-2.897-.989 0-3.338.305-5.28 1.09l-.341-3.237c1.738-.614 4.123-1.058 6.133-1.058zm-73.55-.12c5.145 0 6.951 3.579 6.951 6.987 0 .936-.047 1.518-.102 2.06l-.034.325h-10.358c.101 3.542 2.106 4.36 5.104 4.36 1.637 0 3.158-.372 4.845-.991v3.342c-2.093.644-3.89.921-5.968.921-5.141 0-8.308-2.556-8.308-8.586 0-4.398 2.69-8.417 7.87-8.417zm39.998 0c1.771 0 3.305.172 4.804.614v3.338s-2.188-.714-4.497-.714c-1.43 0-2.76.477-2.76 1.703 0 2.725 8.042 1.262 8.04 6.883 0 4.053-3.611 5.178-7.394 5.178-1.738 0-3.487-.467-4.736-.958v-3.305c1.5.52 3.578 1.026 4.873 1.026 1.84 0 3.1-.374 3.1-1.771 0-2.829-8.04-1.33-8.04-7.156 0-2.998 2.724-4.837 6.61-4.837zm64.01-6.114v13.63c.34-.376.615-.785 5.657-6.952h5.213l-6.543 7.666 7.156 8.485h-5.248l-6.235-7.665v7.665h-4.02v-22.83h4.02zm-127.634 0l8.633 15.263V21.013h4.022v22.83h-4.416L80.81 28.578v15.263h-4.021v-22.83h4.416zm36.758 6.678l2.476 11.469 2.801-11.469h3.572l2.438 11.469 2.75-11.469h4.038l-4.54 16.151h-4.83l-1.714-9.495-2.325 9.495h-4.814l-4.268-16.15h4.416zm62.836 8.616l-3.305.512c-.987.136-2.044.732-2.044 2.231 0 1.322.75 2.067 1.84 2.067 1.157 0 2.452-.716 3.509-1.466v-3.344zm-19.318-5.752c-1.193 0-2.657.545-4.054 1.771v8.415c.885.17 1.77.306 2.997.306 2.829 0 4.464-1.805 4.464-5.517 0-3.476-1.158-4.975-3.407-4.975zm-56.685-.394c-2.009 0-3.235 1.43-3.475 3.678h6.268c0-1.975-.646-3.678-2.793-3.678zm-58.818.836H40.33l2.205 2.248h3.442v-2.248zm0-6.621H33.833l2.205 2.248h9.939v-2.248zm0-6.621h-18.64l2.204 2.248h16.436v-2.248z"
-      })
-    });
-  }
-}
-NewspackLogo.defaultProps = {
-  height: 56
-};
-export default NewspackLogo;

package/dist/esm/newspack-logo/style.scss

@@ -1,30 +0,0 @@
-/**
- * Newspack Logo
- */
-
-@use '../../../shared/scss/colors';
-
-.newspack-logo {
-	&__svg {
-		display: block;
-		fill: currentcolor;
-		margin: 0;
-		padding-bottom: 32px;
-		width: auto;
-
-		&.is-centered {
-			margin-left: auto;
-			margin-right: auto;
-		}
-	}
-
-	&__wrapper {
-		background: colors.$primary-500;
-		color: white;
-		position: relative;
-
-		a {
-			color: inherit;
-		}
-	}
-}

package/dist/esm/notice/index.js

@@ -1,66 +0,0 @@
-/**
- * Notice
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component, RawHTML } from '@wordpress/element';
-import { Icon, bug, check, help, info } from '@wordpress/icons';
-import { __ as alias__ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies.
- */
-const __ = alias__;
-import './style.scss';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class Notice extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      debugMode,
-      isError,
-      isHandoff,
-      isHelp,
-      isSuccess,
-      isWarning,
-      noticeText,
-      rawHTML,
-      style = {},
-      children = null
-    } = this.props;
-    const classes = classnames('newspack-notice', className, debugMode && 'newspack-notice__is-debug', isError && 'newspack-notice__is-error', isHandoff && 'newspack-notice__is-handoff', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
-    let noticeIcon;
-    if (isHelp) {
-      noticeIcon = help;
-    } else if (isSuccess) {
-      noticeIcon = check;
-    } else if (debugMode) {
-      noticeIcon = bug;
-    } else {
-      noticeIcon = info;
-    }
-    return _jsxs("div", {
-      className: classes,
-      style: style,
-      children: [_jsx(Icon, {
-        icon: noticeIcon
-      }), _jsxs("div", {
-        className: "newspack-notice__content",
-        children: [rawHTML ? _jsx(RawHTML, {
-          children: noticeText
-        }) : noticeText, debugMode && __('Debug Mode', 'newspack-plugin'), children || null]
-      })]
-    });
-  }
-}
-export default Notice;