newspack-components 2.0.1 → 2.1.0

package/dist/esm/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/esm/footer/index.js

@@ -21,21 +21,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
   }];
 
@@ -67,6 +74,13 @@ const Footer = _ref => {
     });
   }
 
+  if (supportEmail) {
+    footerElements.push({
+      label: __('Contact Support', 'newspack'),
+      url: `mailto:${supportEmail}`
+    });
+  }
+
   return _jsxs("div", {
     className: "newspack-footer",
     children: [!simple && _jsx("div", {

package/dist/esm/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/esm/form-token-field/index.js

@@ -41,8 +41,8 @@ class FormTokenField extends Component {
       children: [_jsx(BaseComponent, {
         className: classes,
         ...otherProps
-      }), description && _jsx("div", {
-        className: "i",
+      }), description && _jsx("p", {
+        className: "newspack-form-token-field__help",
         children: description
       })]
     });

package/dist/esm/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/esm/global-notices/index.js

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

package/dist/esm/grid/index.js

@@ -42,7 +42,7 @@ class Grid extends Component {
 
 Grid.defaultProps = {
   columns: 2,
-  gutter: 64,
+  gutter: 32,
   rowGap: null
 };
 export default Grid;

package/dist/esm/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/esm/handoff/index.js

@@ -101,13 +101,13 @@ class Handoff extends 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;
@@ -140,7 +140,7 @@ class Handoff extends Component {
         children: children ? children : primaryButton
       }), Name && 'active' !== Status && _jsx(Button, {
         className: classes,
-        isSecondary: true,
+        variant: "secondary",
         disabled: true,
         ...otherProps,
         children: Name + __(' not installed', 'newspack')
@@ -165,13 +165,13 @@ class Handoff extends Component {
           noBorder: true,
           className: "justify-end",
           children: [_jsx(Button, {
-            isSecondary: true,
+            variant: "secondary",
             onClick: () => this.setState({
               showModal: false
             }),
             children: dismissModalButton
           }), _jsx(Button, {
-            isPrimary: true,
+            variant: "primary",
             onClick: () => this.goToPlugin(Slug),
             children: primaryModalButton
           })]

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

@@ -94,7 +94,7 @@ class ImageUpload extends Component {
           className: classes,
           style: { ...style
           },
-          children: image !== null && image !== void 0 && image.url ? _jsxs(_Fragment, {
+          children: image?.url ? _jsxs(_Fragment, {
             children: [_jsx("img", {
               "data-testid": "image-upload",
               src: image.url,

package/dist/esm/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/esm/index.js

@@ -3,11 +3,8 @@ 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 ButtonGroup } from './button-group';
 export { default as Card } from './card';
-export { default as PreviewBox } from './preview-box';
 export { default as CategoryAutocomplete } from './category-autocomplete';
-export { default as CheckboxControl } from './checkbox-control';
 export { default as ColorPicker } from './color-picker';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as FormTokenField } from './form-token-field';
@@ -35,14 +32,12 @@ export { default as Settings } from './settings';
 export { default as StyleCard } from './style-card';
 export { default as TabbedNavigation } from './tabbed-navigation';
 export { default as TextControl } from './text-control';
-export { default as TextareaControl } from './textarea-control';
-export { default as ToggleControl } from './toggle-control';
-export { default as ToggleGroup } from './toggle-group';
 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 WizardPagination } from './wizard-pagination';
 export { default as Router } from './proxied-imports/router';
 export { default as hooks } from './hooks';
-export { default as utils } from './utils';
+export { default as utils } from './utils';
+import './style.scss';

package/dist/esm/modal/index.js

@@ -26,16 +26,13 @@ class Modal extends Component {
   render() {
     const {
       className,
-      overlayClassName,
       isWide,
       isNarrow,
       ...otherProps
     } = this.props;
     const classes = classnames('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
-    const overlayClasses = classnames('newspack-modal__overlay', overlayClassName);
     return _jsx(BaseComponent, {
       className: classes,
-      overlayClassName: overlayClasses,
       ...otherProps
     });
   }