newspack-components 2.0.3 → 2.1.0

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/style.scss

@@ -118,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 {
@@ -131,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
     });
   }

package/dist/cjs/modal/style.scss

@@ -3,166 +3,54 @@
  */
 
 @import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
 
 .newspack-modal {
-	background: white;
-	border: 0;
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: auto;
-	max-height: 100%;
-	width: 100%;
-
-	@media screen and ( min-width: 600px ) {
-		border-radius: 3px;
-		max-width: 80%;
-		max-width: calc( 100% - 64px );
-	}
+	// Color
+	--wp-admin-theme-color: #{$primary-500};
+	--wp-admin-theme-color--rgb: #{$primary-500--rgb};
+	--wp-admin-theme-color-darker-10: #{$primary-600};
+	--wp-admin-theme-color-darker-10--rgb: #{$primary-600--rgb};
+	--wp-admin-theme-color-darker-20: #{$primary-700};
+	--wp-admin-theme-color-darker-20--rgb: #{$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;
 	}
 
-	// Header
-
-	.components-modal__header {
-		align-items: flex-start;
-		background: white;
-		border: 0;
-		height: auto;
-		justify-content: flex-end;
-		margin: 0 -32px 0;
-		padding: 32px 32px 0;
-		position: relative;
-
-		.components-modal__header-heading-container {
-			display: block;
-			margin-right: 16px;
-		}
-
-		.components-button.has-icon {
-			flex: 0 0 36px;
-			left: 0;
-			margin: -2px 0;
-
-			&:hover,
-			&[aria-expended='true'] {
-				color: $primary-500;
-			}
-
-			&:focus:not( :disabled ) {
-				box-shadow: 0 0 0 2px $primary-500;
-			}
-
-			svg {
-				width: 24px;
-				height: 24px;
-
-				+ span {
-					display: none;
-				}
-			}
-		}
-
-		.components-modal__header-heading {
-			color: $gray-900;
-			font-size: 21px;
-			font-weight: bold;
-			line-height: 32px;
-		}
-	}
-
-	// Content
-
-	.components-modal__content {
-		padding: 0 32px;
-		margin: 0;
-
-		&::before {
-			display: none;
-		}
-	}
-
-	// Typography
-
-	h2,
-	p {
-		line-height: 24px;
-		margin: 32px 0;
-		padding: 0;
-	}
-
-	h2 {
-		color: $gray-900;
-		font-size: 17px;
-		font-weight: bold;
-	}
-
-	p {
-		font-size: 14px;
-
-		&.is-dark {
-			color: $gray-900;
-		}
-	}
-
-	// Thematic Break
-
-	hr {
-		background: $gray-300;
-		border: 0;
-		height: 1px;
-		margin: 48px -48px;
-
-		@media screen and ( min-width: 744px ) {
-			margin: 64px -64px;
-		}
+	@media screen and ( min-width: 960px ) {
+		max-height: calc( 100% - 128px );
 	}
 
 	// Links
-
 	a {
-		color: $primary-500;
+		color: var( --wp-admin-theme-color );
 
 		&:active,
 		&:focus,
 		&:hover {
-			color: $primary-600;
-			text-decoration: none;
+			color: var( --wp-admin-theme-color-darker-10 );
 		}
 
 		&:focus {
-			box-shadow: none;
-			outline: 2px solid $primary-500;
-			outline-offset: 2px;
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			outline: 3px solid transparent;
 		}
 	}
-}
-
-// Overlay
 
-.newspack-modal__overlay {
-	background: rgba( black, 0.7 );
-}
-
-// Small Screens
-
-@media ( max-width: 599px ) {
-	.newspack-modal {
-		top: auto;
-
-		.components-modal__content {
-			height: auto;
+	.components-modal__content {
+		> *:last-child {
+			margin-bottom: 8px;
 		}
 	}
 }

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

@@ -39,9 +39,11 @@ class NewspackIcon extends _element.Component {
   render() {
     const {
       className,
-      size
+      simple,
+      size,
+      white
     } = this.props;
-    const classes = (0, _classnames.default)('newspack-icon', className);
+    const classes = (0, _classnames.default)('newspack-icon', simple && 'newspack-icon--simple', white && 'newspack-icon--white', className);
     return (0, _jsxRuntime.jsx)(_components.SVG, {
       xmlns: "http://www.w3.org/2000/svg",
       height: size,

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

@@ -8,4 +8,19 @@
 	background: $primary-500;
 	fill: white;
 	padding: 12px;
+
+	&--white {
+		background: white;
+		fill: $primary-500;
+	}
+
+	&--simple {
+		background: none;
+		fill: $primary-500;
+		padding: 0;
+	}
+
+	&#{&}--simple#{&}--white {
+		fill: white;
+	}
 }

package/dist/cjs/notice/index.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _icons = require("@wordpress/icons");
 
+var _i18n = require("@wordpress/i18n");
+
 require("./style.scss");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -24,14 +26,8 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
+const __ = _i18n.__;
 
-/**
- * Internal dependencies.
- */
-
-/**
- * External dependencies.
- */
 class Notice extends _element.Component {
   /**
    * Render
@@ -39,6 +35,7 @@ class Notice extends _element.Component {
   render() {
     const {
       className,
+      debugMode,
       isError,
       isHelp,
       isSuccess,
@@ -48,13 +45,15 @@ class Notice extends _element.Component {
       style = {},
       children = null
     } = this.props;
-    const classes = (0, _classnames.default)('newspack-notice', className, isError && 'newspack-notice__is-error', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
+    const classes = (0, _classnames.default)('newspack-notice', className, debugMode && 'newspack-notice__is-debug', isError && 'newspack-notice__is-error', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
     let noticeIcon;
 
     if (isHelp) {
       noticeIcon = _icons.help;
     } else if (isSuccess) {
       noticeIcon = _icons.check;
+    } else if (debugMode) {
+      noticeIcon = _icons.bug;
     } else {
       noticeIcon = _icons.info;
     }
@@ -68,7 +67,7 @@ class Notice extends _element.Component {
         className: "newspack-notice__content",
         children: [rawHTML ? (0, _jsxRuntime.jsx)(_element.RawHTML, {
           children: noticeText
-        }) : noticeText, children || null]
+        }) : noticeText, debugMode && __('Debug Mode', 'newspack'), children || null]
       })]
     });
   }