newspack-components 2.0.1 → 2.1.0

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

@@ -6,27 +6,17 @@
 @import '~@wordpress/base-styles/colors';
 
 .newspack-custom-select-control {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
 	label {
-		color: $gray-900;
 		display: block;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
-		padding-bottom: 0 !important;
+		margin-bottom: 8px;
 	}
 
 	.components-custom-select-control__button {
-		border-color: $gray-300;
-		border-radius: 3px;
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
-		min-height: 48px;
+		border-color: $gray-700;
+		border-radius: 2px;
+		color: $gray-900;
+		font-size: inherit;
+		min-height: 30px;
 		min-width: 100%;
 		padding-right: 24px;
 
@@ -34,17 +24,16 @@
 		&:focus,
 		&:hover,
 		&[aria-expanded='true'] {
-			color: $gray-700;
+			color: $gray-900;
 		}
 
 		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px #36f;
+			border-color: var( --wp-admin-theme-color );
+			box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color );
 		}
 
 		&-icon {
 			right: 3px;
-			transition: transform 50ms ease-in-out;
 			width: 18px;
 		}
 
@@ -54,10 +43,9 @@
 	}
 
 	.components-custom-select-control__menu {
-		border-color: $gray-300;
-		border-radius: 3px;
+		border-color: $gray-700;
+		border-radius: 2px;
 		box-shadow: 0 4px 8px rgba( black, 0.08 );
-		color: $gray-700;
 		margin: 8px 0 0;
 		min-width: 222px;
 	}
@@ -77,7 +65,6 @@
 
 		&.is-header {
 			background: $gray-100;
-			color: $gray-900;
 			cursor: default;
 			font-weight: bold;
 			margin-left: 0;
@@ -86,7 +73,7 @@
 
 		&.is-highlighted {
 			background: white;
-			color: $primary-500;
+			color: var( --wp-admin-theme-color );
 		}
 
 		&.is-selected {
@@ -103,21 +90,4 @@
 			}
 		}
 	}
-
-	// Multiple Select Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-category-autocomplete,
-	+ .newspack-select-control,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
 }

package/dist/cjs/footer/index.js

@@ -28,21 +28,28 @@ const Footer = _ref => {
   let {
     simple
   } = _ref;
-  const componentsDemo = window && window.newspack_urls && window.newspack_urls.components_demo;
-  const setupWizard = window && window.newspack_urls && window.newspack_urls.setup_wizard;
-  const resetUrl = window && window.newspack_urls && window.newspack_urls.reset_url;
-  const pluginVersion = window && window.newspack_urls && window.newspack_urls.plugin_version;
-  const removeStarterContent = window && window.newspack_urls && window.newspack_urls.remove_starter_content;
+  const {
+    components_demo: componentsDemo = false,
+    support = false,
+    setup_wizard: setupWizard = false,
+    reset_url: resetUrl = false,
+    plugin_version: pluginVersion = {
+      label: 'Newspack'
+    },
+    remove_starter_content: removeStarterContent = false,
+    support_email: supportEmail
+  } = window.newspack_urls || {};
   const footerElements = [{
     label: pluginVersion.label,
-    url: pluginVersion.url
+    url: 'https://newspack.pub/category/release-notes/',
+    external: true
   }, {
     label: __('About', 'newspack'),
     url: 'https://newspack.pub/',
     external: true
   }, {
     label: __('Documentation', 'newspack'),
-    url: 'https://newspack.pub/support/',
+    url: support,
     external: true
   }];
 
@@ -74,6 +81,13 @@ const Footer = _ref => {
     });
   }
 
+  if (supportEmail) {
+    footerElements.push({
+      label: __('Contact Support', 'newspack'),
+      url: `mailto:${supportEmail}`
+    });
+  }
+
   return (0, _jsxRuntime.jsxs)("div", {
     className: "newspack-footer",
     children: [!simple && (0, _jsxRuntime.jsx)("div", {

package/dist/cjs/footer/style.scss

@@ -2,7 +2,6 @@
  * Footer
  */
 
-@import '../../../shared/scss/colors';
 @import '~@wordpress/base-styles/colors';
 
 .newspack-footer {
@@ -45,17 +44,17 @@
 
 	li {
 		margin: 8px;
-	}
 
-	a {
-		align-items: flex-end;
-		color: inherit;
-		display: flex;
+		a {
+			align-items: flex-end;
+			color: inherit;
+			display: flex;
 
-		&:active,
-		&:focus,
-		&:hover {
-			color: $gray-900;
+			&:active,
+			&:focus,
+			&:hover {
+				color: $gray-900;
+			}
 		}
 	}
 

package/dist/cjs/form-token-field/index.js

@@ -53,8 +53,8 @@ class FormTokenField extends _element.Component {
       children: [(0, _jsxRuntime.jsx)(_components.FormTokenField, {
         className: classes,
         ...otherProps
-      }), description && (0, _jsxRuntime.jsx)("div", {
-        className: "i",
+      }), description && (0, _jsxRuntime.jsx)("p", {
+        className: "newspack-form-token-field__help",
         children: description
       })]
     });

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

@@ -6,114 +6,19 @@
 @import '~@wordpress/base-styles/colors';
 
 .newspack-form-token-field {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
 	width: 100%;
 
-	label {
-		color: $gray-900;
-		font-size: inherit;
-		font-weight: bold;
-		line-height: inherit;
-		margin: 0;
+	.components-form-token-field__input-container {
+		padding-bottom: 1px;
+		padding-top: 1px;
 	}
 
-	.newspack-form-token-field__input-container {
-		background: white;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		box-shadow: none;
-		box-sizing: border-box;
-		color: inherit;
-		font-size: 16px;
-		line-height: inherit;
-		margin: 0;
-		min-height: 48px;
-		padding: 9px 8px;
-		transition: border-color 125ms ease-in-out, box-shadow 125ms ease-in-out;
-		width: 100%;
+	// Help
 
-		@media screen and ( min-width: 768px ) {
-			font-size: inherit;
-		}
-
-		&.is-active {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-
-		&:disabled,
-		&.is-disabled {
-			background: $gray-100;
-			color: $gray-600;
-			cursor: not-allowed;
-		}
-
-		input[type='text'] {
-			border: 0;
-			line-height: inherit;
-			margin: 2px 0;
-			padding: 0;
-
-			&:focus {
-				box-shadow: none;
-			}
-		}
-
-		.components-form-token-field__token-text {
-			font-size: inherit;
-		}
-
-		.components-form-token-field__remove-token {
-			height: 24px;
-		}
-	}
-
-	.components-form-token-field__suggestions-list {
-		border-top-color: $gray-300;
-		margin: 12px -8px -11px;
-		padding: 8px 0 0;
-
-		.components-form-token-field__suggestion {
-			font-size: inherit;
-			margin-bottom: 8px;
-
-			&.is-selected {
-				background: $primary-500;
-			}
-		}
-	}
-
-	// Help Text
-
-	.components-form-token-field__help {
-		margin: 0;
-	}
-
-	// Multiple Form Token Field
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-select-control,
-	+ .newspack-textarea-control,
-	+ .newspack-text-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Reset
-
-	.components-base-control__field,
-	.components-base-control__label {
-		display: block;
-		margin: 0;
+	&__help {
+		color: $gray-700;
+		font-size: 12px;
+		margin: 8px 0 0 !important;
 	}
 
 	// Hidden Elements

package/dist/cjs/global-notices/index.js

@@ -29,7 +29,8 @@ const GlobalNotices = () => {
     if (text.indexOf('_error_') === 0) {
       return (0, _jsxRuntime.jsx)(_.Notice, {
         isError: true,
-        noticeText: text.replace('_error_', '')
+        noticeText: text.replace('_error_', ''),
+        rawHTML: true
       }, i);
     }
 

package/dist/cjs/grid/index.js

@@ -54,7 +54,7 @@ class Grid extends _element.Component {
 
 Grid.defaultProps = {
   columns: 2,
-  gutter: 64,
+  gutter: 32,
   rowGap: null
 };
 var _default = Grid;

package/dist/cjs/grid/style.scss

@@ -16,6 +16,11 @@
 		margin: 0;
 	}
 
+	// Gutter 0
+	&__gutter-0 {
+		grid-gap: 0;
+	}
+
 	// Gutter 8
 	&__gutter-8 {
 		grid-gap: 8px;
@@ -36,6 +41,11 @@
 		grid-gap: 32px;
 	}
 
+	// Row Gap 0
+	&__row-gap-0 {
+		grid-row-gap: 0;
+	}
+
 	// Row Gap 8
 	&__row-gap-8 {
 		grid-row-gap: 8px;
@@ -51,6 +61,11 @@
 		grid-row-gap: 32px;
 	}
 
+	// Gutter 64
+	&__gutter-64 {
+		grid-gap: 64px;
+	}
+
 	// Columns 6
 	&__columns-6 {
 		grid-template-columns: repeat( 2, 1fr );
@@ -103,6 +118,19 @@
 		margin-top: 0 !important;
 	}
 
+	.components-base-control {
+		&__field,
+		&__help {
+			margin-bottom: 0;
+		}
+	}
+
+	.components-form-token-field {
+		&__input-container {
+			margin-bottom: 0;
+		}
+	}
+
 	// Cards
 	> .newspack-card {
 		> *:first-child {
@@ -116,7 +144,7 @@
 
 	// Table-like
 	&__thead {
-		background: $gray-100;
+		background: rgba( black, 0.025 );
 		border-bottom: 1px solid $gray-300;
 		border-top: 1px solid $gray-300;
 		color: $gray-900;

package/dist/cjs/handoff/index.js

@@ -102,13 +102,13 @@ class Handoff extends _element.Component {
       children,
       compact,
       useModal,
-      // eslint-disable-next-line no-unused-vars
+      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
       modalTitle: _modalTitle,
-      // eslint-disable-next-line no-unused-vars
+      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
       modalBody: _modalBody,
-      // eslint-disable-next-line no-unused-vars
+      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
       onReady,
-      // eslint-disable-next-line no-unused-vars
+      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
       editLink,
       ...otherProps
     } = this.props;
@@ -141,7 +141,7 @@ class Handoff extends _element.Component {
         children: children ? children : primaryButton
       }), Name && 'active' !== Status && (0, _jsxRuntime.jsx)(_.Button, {
         className: classes,
-        isSecondary: true,
+        variant: "secondary",
         disabled: true,
         ...otherProps,
         children: Name + __(' not installed', 'newspack')
@@ -166,13 +166,13 @@ class Handoff extends _element.Component {
           noBorder: true,
           className: "justify-end",
           children: [(0, _jsxRuntime.jsx)(_.Button, {
-            isSecondary: true,
+            variant: "secondary",
             onClick: () => this.setState({
               showModal: false
             }),
             children: dismissModalButton
           }), (0, _jsxRuntime.jsx)(_.Button, {
-            isPrimary: true,
+            variant: "primary",
             onClick: () => this.goToPlugin(Slug),
             children: primaryModalButton
           })]

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

@@ -96,7 +96,7 @@ class ImageUpload extends _element.Component {
           className: classes,
           style: { ...style
           },
-          children: image !== null && image !== void 0 && image.url ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: image?.url ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [(0, _jsxRuntime.jsx)("img", {
               "data-testid": "image-upload",
               src: image.url,

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

@@ -11,18 +11,15 @@
 		display: flex;
 	}
 	&__label {
-		color: $gray-900;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
+		margin: 0 0 8px;
 	}
 	&__image {
 		align-items: center;
 		background-repeat: no-repeat;
 		background-size: contain;
 		background-position: center;
-		border: 1px dashed $gray-300;
-		border-radius: 3px;
+		border: 1px dashed $gray-700;
+		border-radius: 2px;
 		display: flex;
 		justify-content: center;
 		max-width: 100%;
@@ -34,7 +31,7 @@
 		&:not( &--has-image ) {
 			.newspack-button {
 				background: white !important;
-				border-radius: 3px !important;
+				border-radius: 2px !important;
 				padding: 4px 16px !important;
 
 				&:active,
@@ -53,8 +50,8 @@
 			overflow: hidden;
 			&::before,
 			&::after {
-				border: 1px solid rgba( black, 0.125 );
-				border-radius: 3px;
+				border: 1px solid rgba( black, 0.54 );
+				border-radius: 2px;
 				bottom: 0;
 				content: '';
 				left: 0;
@@ -74,7 +71,7 @@
 			}
 			&::after {
 				background: rgba( white, 0.9 );
-				border-color: $gray-300;
+				border-color: $gray-700;
 			}
 			&:focus-within,
 			&:hover {
@@ -97,7 +94,9 @@
 		}
 	}
 	&__image + &__help {
-		margin: 0;
+		color: $gray-700;
+		font-size: 12px;
+		margin: 1em 0 0;
 	}
 	&__controls {
 		align-items: center;

package/dist/cjs/index.js

@@ -35,12 +35,6 @@ Object.defineProperty(exports, "ButtonCard", {
     return _buttonCard.default;
   }
 });
-Object.defineProperty(exports, "ButtonGroup", {
-  enumerable: true,
-  get: function () {
-    return _buttonGroup.default;
-  }
-});
 Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function () {
@@ -53,12 +47,6 @@ Object.defineProperty(exports, "CategoryAutocomplete", {
     return _categoryAutocomplete.default;
   }
 });
-Object.defineProperty(exports, "CheckboxControl", {
-  enumerable: true,
-  get: function () {
-    return _checkboxControl.default;
-  }
-});
 Object.defineProperty(exports, "ColorPicker", {
   enumerable: true,
   get: function () {
@@ -173,12 +161,6 @@ Object.defineProperty(exports, "Popover", {
     return _popover.default;
   }
 });
-Object.defineProperty(exports, "PreviewBox", {
-  enumerable: true,
-  get: function () {
-    return _previewBox.default;
-  }
-});
 Object.defineProperty(exports, "ProgressBar", {
   enumerable: true,
   get: function () {
@@ -233,24 +215,6 @@ Object.defineProperty(exports, "TextControl", {
     return _textControl.default;
   }
 });
-Object.defineProperty(exports, "TextareaControl", {
-  enumerable: true,
-  get: function () {
-    return _textareaControl.default;
-  }
-});
-Object.defineProperty(exports, "ToggleControl", {
-  enumerable: true,
-  get: function () {
-    return _toggleControl.default;
-  }
-});
-Object.defineProperty(exports, "ToggleGroup", {
-  enumerable: true,
-  get: function () {
-    return _toggleGroup.default;
-  }
-});
 Object.defineProperty(exports, "Waiting", {
   enumerable: true,
   get: function () {
@@ -263,10 +227,10 @@ Object.defineProperty(exports, "WebPreview", {
     return _webPreview.default;
   }
 });
-Object.defineProperty(exports, "WizardPagination", {
+Object.defineProperty(exports, "Wizard", {
   enumerable: true,
   get: function () {
-    return _wizardPagination.default;
+    return _wizard.default;
   }
 });
 Object.defineProperty(exports, "hooks", {
@@ -304,16 +268,10 @@ var _button = _interopRequireDefault(require("./button"));
 
 var _buttonCard = _interopRequireDefault(require("./button-card"));
 
-var _buttonGroup = _interopRequireDefault(require("./button-group"));
-
 var _card = _interopRequireDefault(require("./card"));
 
-var _previewBox = _interopRequireDefault(require("./preview-box"));
-
 var _categoryAutocomplete = _interopRequireDefault(require("./category-autocomplete"));
 
-var _checkboxControl = _interopRequireDefault(require("./checkbox-control"));
-
 var _colorPicker = _interopRequireDefault(require("./color-picker"));
 
 var _customSelectControl = _interopRequireDefault(require("./custom-select-control"));
@@ -368,24 +326,20 @@ var _tabbedNavigation = _interopRequireDefault(require("./tabbed-navigation"));
 
 var _textControl = _interopRequireDefault(require("./text-control"));
 
-var _textareaControl = _interopRequireDefault(require("./textarea-control"));
-
-var _toggleControl = _interopRequireDefault(require("./toggle-control"));
-
-var _toggleGroup = _interopRequireDefault(require("./toggle-group"));
-
 var _waiting = _interopRequireDefault(require("./waiting"));
 
 var _webPreview = _interopRequireDefault(require("./web-preview"));
 
+var _wizard = _interopRequireDefault(require("./wizard"));
+
 var _withWizard = _interopRequireDefault(require("./with-wizard"));
 
 var _withWizardScreen = _interopRequireDefault(require("./with-wizard-screen"));
 
-var _wizardPagination = _interopRequireDefault(require("./wizard-pagination"));
-
 var _router = _interopRequireDefault(require("./proxied-imports/router"));
 
 var _hooks = _interopRequireDefault(require("./hooks"));
 
-var _utils = _interopRequireDefault(require("./utils"));
+var _utils = _interopRequireDefault(require("./utils"));
+
+require("./style.scss");

package/dist/cjs/modal/index.js

@@ -39,16 +39,13 @@ class Modal extends _element.Component {
   render() {
     const {
       className,
-      overlayClassName,
       isWide,
       isNarrow,
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
-    const overlayClasses = (0, _classnames.default)('newspack-modal__overlay', overlayClassName);
     return (0, _jsxRuntime.jsx)(_components.Modal, {
       className: classes,
-      overlayClassName: overlayClasses,
       ...otherProps
     });
   }