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

package/dist/cjs/radio-control/style.scss

@@ -1,92 +0,0 @@
-/**
- * Radio Control
- */
-
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-radio-control {
-	color: wp-colors.$gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
-	label {
-		color: inherit;
-		font-size: 14px;
-		line-height: 24px;
-		margin: 0;
-	}
-
-	.components-base-control__label {
-		color: wp-colors.$gray-900;
-		font-weight: bold;
-	}
-
-	// Options
-
-	.components-radio-control__option {
-		align-items: center;
-		display: flex;
-		margin: 0 0 8px;
-
-		&:first-of-type {
-			margin-top: 8px;
-		}
-
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
-
-	// Radio
-
-	input[type='radio'] {
-		height: 24px;
-		margin-right: 8px;
-		width: 24px;
-
-		@media screen and ( min-width: 782px ) {
-			height: 20px;
-			width: 20px;
-		}
-
-		&:checked {
-			background-color: colors.$primary-500;
-			border-color: colors.$primary-500;
-
-			&::before {
-				border: none;
-			}
-		}
-
-		&:focus {
-			border-color: colors.$primary-500;
-			box-shadow: 0 0 0 2px white, 0 0 0 3.5px colors.$primary-500;
-		}
-	}
-
-	// Multiple Radio Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-select-control,
-	+ .newspack-text-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Reset
-
-	.components-base-control__field,
-	.components-base-control__label,
-	.components-base-control__help {
-		display: block;
-		margin: 0;
-	}
-}

package/dist/cjs/select-control/style.scss

@@ -1,108 +0,0 @@
-/**
- * Select Control
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.components-select-control {
-	&__input {
-		max-width: 100% !important;
-
-		&[multiple] {
-			height: auto !important;
-			min-height: 70px !important;
-			padding: 0 !important;
-
-			+ .components-input-control__suffix {
-				display: none;
-			}
-
-			option {
-				min-height: 1.4em;
-				padding: 8px;
-
-				&:checked {
-					background: var( --wp-admin-theme-color );
-					color: white;
-				}
-			}
-		}
-	}
-
-	.components-base-control__field {
-		width: 100%;
-	}
-
-	.components-input-control__label {
-		line-height: inherit;
-	}
-}
-
-// Grouped
-
-.newspack-grouped-select-control {
-	position: relative;
-
-	.components-select-control {
-		&__input {
-			appearance: none;
-			background: transparent;
-			border: 1px solid wp-colors.$gray-700;
-			border-radius: 2px;
-			box-shadow: none !important;
-			box-sizing: border-box;
-			display: block;
-			font-size: inherit;
-			margin: 0;
-			max-width: 100%;
-			outline: none;
-			padding: 0 24px 0 7px;
-			width: 100%;
-
-			&:hover {
-				color: inherit;
-			}
-
-			&:focus {
-				border-color: var( --wp-admin-theme-color-darker-10 ) !important;
-				box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color-darker-10 ) !important;
-				color: inherit;
-			}
-		}
-
-		&__arrow-wrapper {
-			align-items: center;
-			display: flex;
-			height: 24px;
-			justify-content: center;
-			margin-top: -12px;
-			position: absolute;
-			right: 1px;
-			top: 50%;
-			width: 24px;
-		}
-	}
-}
-
-// Buttons
-
-.newspack-buttons-select-control {
-	.components-base-control__label {
-		display: inline-flex;
-		margin-bottom: 8px;
-	}
-
-	.components-button-group {
-		display: flex;
-	}
-
-	&.icon-only {
-		.components-button {
-			align-items: center;
-			height: 36px;
-			justify-content: center;
-			padding: 0 !important;
-			width: 36px;
-		}
-	}
-}

package/dist/cjs/steps-list/style.scss

@@ -1,11 +0,0 @@
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.steps-list {
-	margin-left: auto;
-	margin-right: auto;
-
-	&__narrow-list {
-		max-width: 416px;
-	}
-}

package/dist/cjs/style.scss

@@ -1,55 +0,0 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-// Buttons Card
-
-.newspack-buttons-card {
-	display: flex;
-	flex-direction: row-reverse;
-	gap: 16px;
-	justify-content: flex-start;
-	align-items: center;
-	margin: 64px 0 32px;
-
-	&:empty {
-		display: none;
-	}
-}
-
-// Checkboxes
-.newspack-checkbox-control {
-	margin-top: 0 !important;
-	.components-checkbox-control__label {
-		font-weight: 600;
-	}
-
-	.components-base-control__help {
-		margin-left: 32px;
-		margin-top: 0;
-	}
-}
-
-// Checkbox Icon
-.newspack-checkbox-icon {
-	background: white;
-	border-radius: 50%;
-	box-shadow: inset 0 0 0 1px wp-colors.$gray-300;
-	display: block;
-	height: 24px;
-	width: 24px;
-
-	svg {
-		fill: wp-colors.$gray-700;
-	}
-
-	&--checked {
-		background: wp-colors.$alert-green;
-		box-shadow: none;
-
-		svg {
-			fill: white;
-		}
-	}
-	&--pending {
-		background: wp-colors.$alert-yellow;
-	}
-}

package/dist/cjs/text-control/index.js

@@ -1,61 +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 _i18n = require("@wordpress/i18n");
-require("./style.scss");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * Text Control
- */
-/**
- * WordPress dependencies
- */
-/**
- * Internal dependencies
- */
-const __ = _i18n.__;
-/**
- * External dependencies
- */
-const TextControl = ({
-  className = '',
-  required = false,
-  isWide = false,
-  withMargin = true,
-  ...otherProps
-}) => {
-  const wrapperRef = (0, _element.useRef)(null);
-  (0, _element.useEffect)(() => {
-    if (wrapperRef.current === null) {
-      return;
-    }
-    const labelEl = wrapperRef.current.querySelector('label');
-    if (labelEl) {
-      labelEl.setAttribute('data-required-text', __('(required)', 'newspack-plugin'));
-    }
-  }, [wrapperRef.current]);
-  const classes = (0, _classnames.default)('newspack-text-control', {
-    'newspack-text-control--wide': isWide,
-    'newspack-text-control--with-margin': withMargin
-  }, className);
-  return required ? (0, _jsxRuntime.jsx)("div", {
-    ref: wrapperRef,
-    className: "newspack-text-control--required",
-    children: (0, _jsxRuntime.jsx)(_components.TextControl, {
-      className: classes,
-      required: required,
-      ...otherProps
-    })
-  }) : (0, _jsxRuntime.jsx)(_components.TextControl, {
-    className: classes,
-    ...otherProps
-  });
-};
-var _default = exports.default = TextControl;

package/dist/cjs/web-preview/index.js

@@ -1,188 +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 _icons = require("@wordpress/icons");
-var _components = require("@wordpress/components");
-var _ = require("../");
-require("./style.scss");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * WordPress dependencies.
- */
-const __ = _i18n.__;
-/**
- * Internal dependencies.
- */
-/**
- * External dependencies.
- */
-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 _element.Component {
-  constructor(props) {
-    super(props);
-    (0, _defineProperty2.default)(this, "state", {
-      device: 'desktop',
-      loaded: false,
-      isPreviewVisible: false
-    });
-    /**
-     * Create JSX for the modal
-     */
-    (0, _defineProperty2.default)(this, "getWebPreviewModal", () => {
-      const {
-        beforeLoad = () => {},
-        onClose = () => {},
-        url
-      } = this.props;
-      const {
-        device,
-        loaded,
-        isPreviewVisible
-      } = this.state;
-      if (!this.modalDOMElement || !isPreviewVisible) {
-        return null;
-      }
-      const classes = (0, _classnames.default)('newspack-web-preview', device, loaded && 'is-loaded');
-      beforeLoad();
-      return (0, _element.createPortal)((0, _jsxRuntime.jsx)("div", {
-        className: classes,
-        children: (0, _jsxRuntime.jsxs)("div", {
-          className: "newspack-web-preview__interior",
-          children: [(0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-web-preview__toolbar",
-            children: [(0, _jsxRuntime.jsx)("div", {
-              className: "newspack-web-preview__toolbar-left",
-              children: (0, _jsxRuntime.jsxs)(_components.ButtonGroup, {
-                children: [(0, _jsxRuntime.jsx)(_components.Button, {
-                  onClick: () => this.setState({
-                    device: 'desktop'
-                  }),
-                  variant: 'desktop' === device && 'primary',
-                  icon: _icons.desktop,
-                  label: __('Preview Desktop Size', 'newspack-plugin')
-                }), (0, _jsxRuntime.jsx)(_components.Button, {
-                  onClick: () => this.setState({
-                    device: 'tablet'
-                  }),
-                  variant: 'tablet' === device && 'primary',
-                  icon: _icons.tablet,
-                  label: __('Preview Tablet Size', 'newspack-plugin')
-                }), (0, _jsxRuntime.jsx)(_components.Button, {
-                  onClick: () => this.setState({
-                    device: 'phone'
-                  }),
-                  variant: 'phone' === device && 'primary',
-                  icon: _icons.mobile,
-                  label: __('Preview Phone Size', 'newspack-plugin')
-                })]
-              })
-            }), (0, _jsxRuntime.jsx)("div", {
-              className: "newspack-web-preview__toolbar-right",
-              children: (0, _jsxRuntime.jsx)(_components.Button, {
-                onClick: () => {
-                  onClose();
-                  this.setState({
-                    isPreviewVisible: false,
-                    loaded: false
-                  });
-                },
-                icon: _icons.closeSmall,
-                label: __('Close Preview', 'newspack-plugin')
-              })
-            })]
-          }), (0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-web-preview__content",
-            children: [!loaded && (0, _jsxRuntime.jsxs)("div", {
-              className: "newspack-web-preview__is-waiting",
-              children: [(0, _jsxRuntime.jsx)(_.Waiting, {
-                isLeft: true
-              }), __('Loading…', 'newspack-plugin')]
-            }), (0, _jsxRuntime.jsx)("iframe", {
-              ref: this.iframeRef,
-              title: "web-preview",
-              src: url,
-              onLoad: () => {
-                this.setState({
-                  loaded: true
-                });
-                this.props.onLoad(this.iframeRef.current);
-              }
-            })]
-          })]
-        })
-      }), this.modalDOMElement);
-    });
-    (0, _defineProperty2.default)(this, "showPreview", () => {
-      this.setState({
-        isPreviewVisible: true
-      });
-    });
-    this.iframeRef = (0, _element.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 (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [renderButton ? renderButton({
-        showPreview: this.showPreview
-      }) : (0, _jsxRuntime.jsx)(_components.Button, {
-        variant: variant,
-        onClick: this.showPreview,
-        tabIndex: "0",
-        children: label
-      }), this.getWebPreviewModal()]
-    });
-  }
-}
-WebPreview.defaultProps = {
-  url: '//newspack.com',
-  label: __('Preview', 'newspack-plugin'),
-  onLoad: () => {}
-};
-var _default = exports.default = WebPreview;

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