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

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

@@ -0,0 +1,140 @@
+/**
+ * Image Upload
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { Button, InfoButton } from '../';
+import './style.scss';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+class ImageUpload extends Component {
+  /**
+   * Constructor.
+   */
+  constructor() {
+    super(...arguments);
+    this.state = {
+      frame: false
+    };
+  }
+
+  /**
+   * Open the WP media modal.
+   */
+  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.
+   */
+  handleImageSelect = () => {
+    const {
+      onChange
+    } = this.props;
+    const attachment = this.state.frame.state().get('selection').first().toJSON();
+    onChange(attachment);
+  };
+
+  /**
+   * Render.
+   */
+  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 /*#__PURE__*/_jsxs("div", {
+      className: classnames('newspack-image-upload', className),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "newspack-image-upload__header",
+        children: [label && /*#__PURE__*/_jsx("label", {
+          className: "newspack-image-upload__label",
+          children: label
+        }), info && /*#__PURE__*/_jsx(InfoButton, {
+          text: info
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes,
+        style: {
+          ...style
+        },
+        children: image?.url ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("img", {
+            "data-testid": "image-upload",
+            src: image.url,
+            alt: __('Image preview', 'newspack-plugin')
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "newspack-image-upload__controls",
+            children: [/*#__PURE__*/_jsx(Button, {
+              disabled: disabled,
+              onClick: this.openModal,
+              isLink: true,
+              children: __('Replace', 'newspack-plugin')
+            }), /*#__PURE__*/_jsx("span", {
+              className: "sep"
+            }), /*#__PURE__*/_jsx(Button, {
+              disabled: disabled,
+              onClick: () => onChange(null),
+              isLink: true,
+              isDestructive: true,
+              children: __('Remove', 'newspack-plugin')
+            })]
+          })]
+        }) : /*#__PURE__*/_jsx(Button, {
+          disabled: disabled,
+          onClick: this.openModal,
+          isLink: true,
+          children: buttonLabel ? buttonLabel : __('Upload', 'newspack-plugin')
+        })
+      }), help && /*#__PURE__*/_jsx("p", {
+        className: "newspack-image-upload__help",
+        children: help
+      })]
+    });
+  };
+}
+export default ImageUpload;

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

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import ImageUpload from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('ImageUpload', () => {
+  it('should render an add image button', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/_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( /*#__PURE__*/_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

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

@@ -0,0 +1,47 @@
+export { default as Accordion } from './accordion';
+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 DateRangePicker } from './date-range-picker';
+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

@@ -0,0 +1,42 @@
+/**
+ * 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 "react/jsx-runtime";
+class InfoButton extends Component {
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      className,
+      ...otherProps
+    } = this.props;
+    return /*#__PURE__*/_jsx(Tooltip, {
+      ...otherProps,
+      children: /*#__PURE__*/_jsx("span", {
+        className: classnames('newspack-info-button', className),
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: info
+        })
+      })
+    });
+  }
+}
+export default InfoButton;

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

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

@@ -0,0 +1,39 @@
+/**
+ * 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 "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 /*#__PURE__*/_jsx(BaseComponent, {
+      className: classes,
+      ...otherProps
+    });
+  }
+}
+export default Modal;

package/dist/esm/modal/style.scss

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

@@ -0,0 +1,50 @@
+/**
+ * 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 "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 /*#__PURE__*/_jsx(SVG, {
+      xmlns: "http://www.w3.org/2000/svg",
+      height: size,
+      width: size,
+      viewBox: "0 0 32 32",
+      className: classes,
+      children: /*#__PURE__*/_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

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

@@ -0,0 +1,46 @@
+/**
+ * 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 "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 /*#__PURE__*/_jsx(SVG, {
+      xmlns: "http://www.w3.org/2000/svg",
+      height: height,
+      viewBox: "0 0 221 64",
+      className: classes,
+      children: /*#__PURE__*/_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

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