newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/cjs/button/index.js

@@ -1,57 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _router = _interopRequireDefault(require("../proxied-imports/router"));
-require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * Button
- */
-
-/**
- * WordPress dependencies.
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  useHistory
-} = _router.default;
-const Button = _ref => {
-  let {
-    href,
-    onClick,
-    ...otherProps
-  } = _ref;
-  const history = useHistory();
-  const [isAwaitingOnClick, setIsAwaitingOnClick] = (0, _element.useState)(false);
-
-  // If both onClick and href are present, await the onClick action an then redirect.
-  if (href && onClick) {
-    otherProps.onClick = async () => {
-      setIsAwaitingOnClick(true);
-      await onClick();
-      setIsAwaitingOnClick(false);
-      history.push(href.replace('#', ''));
-    };
-  } else {
-    otherProps.href = href;
-    otherProps.onClick = onClick;
-  }
-  if (isAwaitingOnClick) {
-    otherProps.disabled = true;
-  }
-  return (0, _jsxRuntime.jsx)(_components.Button, {
-    ...otherProps
-  });
-};
-var _default = Button;
-exports.default = _default;

package/dist/cjs/card/style.scss

@@ -1,168 +0,0 @@
-/**
- * Card
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-card {
-	border-radius: 2px;
-	border: 1px solid wp-colors.$gray-300;
-	color: wp-colors.$gray-900;
-	margin: 32px 0;
-	padding: 16px 48px;
-
-	@media screen and ( min-width: 744px ) {
-		padding: 32px 64px;
-	}
-
-	// Buttons Card
-
-	&__buttons-card {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 16px;
-		margin: 32px 0;
-	}
-
-	// Header Actions Card
-
-	&__header-actions {
-		align-items: center;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-		justify-content: space-between;
-		margin-bottom: -16px;
-
-		> * {
-			margin-bottom: 0 !important;
-			margin-top: 0 !important;
-		}
-
-		.newspack-select-control {
-			.components-base-control__field {
-				margin-bottom: 0;
-			}
-		}
-	}
-
-	// Is Narrow
-
-	&__is-narrow {
-		margin-left: auto;
-		margin-right: auto;
-
-		@media screen and ( min-width: 608px ) {
-			max-width: 576px;
-		}
-	}
-
-	// Is Small
-
-	&__is-small {
-		padding: 16px;
-
-		> *:first-child {
-			margin-top: 0 !important;
-		}
-
-		> *:last-child {
-			margin-bottom: 0 !important;
-		}
-
-		> p {
-			margin: 16px 0 !important;
-		}
-
-		& + & {
-			margin-top: -16px;
-		}
-	}
-
-	// Is Medium
-
-	&__is-medium {
-		padding: 32px;
-
-		> *:first-child {
-			margin-top: 0 !important;
-		}
-
-		> *:last-child {
-			margin-bottom: 0 !important;
-		}
-	}
-
-	// Is White
-
-	&__is-white {
-		background: white;
-		border: 0;
-	}
-
-	// No Border
-
-	&__no-border {
-		border-radius: 0;
-		border: 0;
-		padding: 0;
-	}
-
-	// Margin
-
-	&.mt64 {
-		margin-top: 64px;
-	}
-
-	&.mt16 {
-		margin-top: 16px;
-	}
-
-	// Typography
-
-	small {
-		font-size: 12px;
-		line-height: 1.4;
-	}
-
-	code {
-		background: wp-colors.$gray-100;
-		color: wp-colors.$gray-900;
-		padding: 0 0.5em;
-	}
-
-	// Thematic Break
-
-	hr {
-		background: wp-colors.$gray-300;
-		border: 0;
-		height: 1px;
-		margin: 48px 0;
-
-		@media screen and ( min-width: 744px ) {
-			margin: 64px 0;
-		}
-	}
-
-	// Separator
-
-	.sep {
-		background: wp-colors.$gray-300;
-		height: 1px;
-		margin-left: 8px;
-		margin-right: 8px;
-		width: 12px;
-
-		&__inline {
-			display: inline-block;
-			line-height: 1.5;
-			vertical-align: middle;
-		}
-	}
-
-	// Error
-
-	.newspack-error {
-		color: wp-colors.$alert-red;
-	}
-}

package/dist/cjs/category-autocomplete/style.scss

@@ -1,34 +0,0 @@
-/**
- * Category Autocomplete
- */
-
-.newspack-category-autocomplete {
-	position: relative;
-
-	.components-form-token-field__help {
-		display: none;
-	}
-
-	// Within a Grid
-
-	.newspack-grid & .newspack-form-token-field__input-container {
-		margin: 0;
-	}
-
-	// Loading state spinner
-	&__suggestions-spinner {
-		position: absolute;
-		right: 1px;
-		top: calc( 1.4em + 8px );
-		z-index: 2;
-
-		[class*='--label-hidden'] + & {
-			top: 0;
-		}
-
-		.components-spinner {
-			display: block;
-			margin: 7px;
-		}
-	}
-}

package/dist/cjs/consts.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NEWSPACK_SUPPORT_URL = exports.NEWSPACK_SITE_URL = exports.HANDOFF_KEY = void 0;
-const NEWSPACK_SITE_URL = 'https://newspack.com';
-exports.NEWSPACK_SITE_URL = NEWSPACK_SITE_URL;
-const NEWSPACK_SUPPORT_URL = `${NEWSPACK_SITE_URL}/support`;
-exports.NEWSPACK_SUPPORT_URL = NEWSPACK_SUPPORT_URL;
-const HANDOFF_KEY = 'newspack_wizard_handoff_message';
-exports.HANDOFF_KEY = HANDOFF_KEY;

package/dist/cjs/form-token-field/style.scss

@@ -1,37 +0,0 @@
-/**
- * Form Token Field
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-form-token-field {
-	width: 100%;
-
-	.components-form-token-field__input-container {
-		padding-bottom: 1px;
-		padding-top: 1px;
-	}
-
-	// Help
-
-	&__help {
-		color: wp-colors.$gray-700;
-		font-size: 12px;
-		margin: 8px 0 0 !important;
-	}
-
-	// Hidden Elements
-
-	&--label-hidden {
-		label {
-			display: none;
-		}
-	}
-
-	&--help-hidden {
-		.components-form-token-field__help,
-		div.i {
-			display: none;
-		}
-	}
-}

package/dist/cjs/grid/index.js

@@ -1,54 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _element = require("@wordpress/element");
-require("./style.scss");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * Grid
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-
-class Grid extends _element.Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      columns,
-      gutter,
-      noMargin,
-      rowGap,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-grid', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
-    return (0, _jsxRuntime.jsx)("div", {
-      className: classes,
-      ...otherProps
-    });
-  }
-}
-Grid.defaultProps = {
-  columns: 2,
-  gutter: 32,
-  rowGap: null
-};
-var _default = Grid;
-exports.default = _default;

package/dist/cjs/hooks/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _usePrompt = _interopRequireDefault(require("./usePrompt"));
-var _useObjectState = _interopRequireDefault(require("./useObjectState"));
-var _useOnClickOutside = _interopRequireDefault(require("./useOnClickOutside"));
-/**
- * WordPress dependencies
- */
-
-const useUniqueId = prefix => {
-  const id = (0, _element.useRef)(`${prefix}-${Math.round(Math.random() * 99999)}`);
-  return id.current;
-};
-var _default = {
-  usePrompt: _usePrompt.default,
-  useObjectState: _useObjectState.default,
-  useOnClickOutside: _useOnClickOutside.default,
-  useUniqueId
-};
-exports.default = _default;

package/dist/cjs/hooks/usePrompt.js

@@ -1,52 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _router = _interopRequireDefault(require("../proxied-imports/router"));
-// https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
-
-/**
- * External dependencies.
- */
-
-/**
- * Internal dependencies.
- */
-
-const {
-  useHistory
-} = _router.default;
-var _default = (when, message) => {
-  const history = useHistory();
-  const self = (0, _element.useRef)(null);
-  const onWindowOrTabClose = event => {
-    if (!when) {
-      return;
-    }
-    if (typeof event === 'undefined') {
-      event = window.event;
-    }
-    if (event) {
-      event.returnValue = message;
-    }
-    return message;
-  };
-  (0, _element.useEffect)(() => {
-    if (when) {
-      self.current = history.block(message);
-      window.addEventListener('beforeunload', onWindowOrTabClose);
-    }
-    return () => {
-      if (self.current) {
-        self.current();
-      }
-      window.removeEventListener('beforeunload', onWindowOrTabClose);
-    };
-  }, [message, when]);
-  return self.current;
-};
-exports.default = _default;

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

@@ -1,144 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _ = require("../");
-require("./style.scss");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * Image Upload
- */
-/**
- * WordPress dependencies.
- */
-/**
- * Internal dependencies.
- */
-const __ = _i18n.__;
-/**
- * External dependencies.
- */
-class ImageUpload extends _element.Component {
-  /**
-   * Constructor.
-   */
-  constructor() {
-    super(...arguments);
-    /**
-     * Open the WP media modal.
-     */
-    (0, _defineProperty2.default)(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.
-     */
-    (0, _defineProperty2.default)(this, "handleImageSelect", () => {
-      const {
-        onChange
-      } = this.props;
-      const attachment = this.state.frame.state().get('selection').first().toJSON();
-      onChange(attachment);
-    });
-    /**
-     * Render.
-     */
-    (0, _defineProperty2.default)(this, "render", () => {
-      const {
-        buttonLabel,
-        className,
-        disabled,
-        help,
-        image,
-        info,
-        isCovering,
-        label,
-        onChange,
-        style = {}
-      } = this.props;
-      const classes = (0, _classnames.default)('newspack-image-upload__image', {
-        'newspack-image-upload__image--has-image': image
-      }, {
-        'newspack-image-upload__image--covering': isCovering
-      });
-      return (0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)('newspack-image-upload', className),
-        children: [(0, _jsxRuntime.jsxs)("div", {
-          className: "newspack-image-upload__header",
-          children: [label && (0, _jsxRuntime.jsx)("label", {
-            className: "newspack-image-upload__label",
-            children: label
-          }), info && (0, _jsxRuntime.jsx)(_.InfoButton, {
-            text: info
-          })]
-        }), (0, _jsxRuntime.jsx)("div", {
-          className: classes,
-          style: {
-            ...style
-          },
-          children: image?.url ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [(0, _jsxRuntime.jsx)("img", {
-              "data-testid": "image-upload",
-              src: image.url,
-              alt: __('Image preview', 'newspack')
-            }), (0, _jsxRuntime.jsxs)("div", {
-              className: "newspack-image-upload__controls",
-              children: [(0, _jsxRuntime.jsx)(_.Button, {
-                disabled: disabled,
-                onClick: this.openModal,
-                isLink: true,
-                children: __('Replace', 'newspack')
-              }), (0, _jsxRuntime.jsx)("span", {
-                className: "sep"
-              }), (0, _jsxRuntime.jsx)(_.Button, {
-                disabled: disabled,
-                onClick: () => onChange(null),
-                isLink: true,
-                isDestructive: true,
-                children: __('Remove', 'newspack')
-              })]
-            })]
-          }) : (0, _jsxRuntime.jsx)(_.Button, {
-            disabled: disabled,
-            onClick: this.openModal,
-            isLink: true,
-            children: buttonLabel ? buttonLabel : __('Upload', 'newspack')
-          })
-        }), help && (0, _jsxRuntime.jsx)("p", {
-          className: "newspack-image-upload__help",
-          children: help
-        })]
-      });
-    });
-    this.state = {
-      frame: false
-    };
-  }
-}
-var _default = ImageUpload;
-exports.default = _default;

package/dist/cjs/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;
-	}
-}