newspack-components 2.0.3 → 2.1.0

package/src/color-picker/style.scss

@@ -7,174 +7,34 @@
 
 .newspack-color-picker {
 	position: relative;
-	margin: 32px 0;
 
-	&__main {
-		height: 48px;
-	}
-	&__expander {
-		padding: 11px 3px;
-		justify-content: space-between;
-		&,
-		> div {
-			display: flex;
-			align-items: center;
-		}
-		> div {
-			margin: 0 4px;
-		}
-		div + div {
-			margin-left: 8px;
-		}
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-		&--expanded:focus {
-			border-bottom-color: white;
-			box-shadow: inset 2px 2px 0 0 $primary-500, inset -2px 2px 0 0 $primary-500;
-
-			+ .components-color-picker {
-				position: relative;
-				border-bottom-color: $primary-500;
-				border-left-color: $primary-500;
-				border-right-color: $primary-500;
-				box-shadow: inset 2px -2px 0 0 $primary-500, inset -2px -2px 0 0 $primary-500;
-
-				&::before,
-				&::after {
-					background: $primary-500;
-					display: block;
-					content: '';
-					height: 1px;
-					left: -1px;
-					position: absolute;
-					top: -1px;
-					width: 3px;
-				}
-
-				&::after {
-					left: auto;
-					right: -1px;
-				}
-			}
-		}
-	}
-	&__indicator {
-		border: 1px solid rgba( black, 0.125 );
-		border-radius: 50%;
-		height: 24px;
-		overflow: hidden;
-		width: 24px;
-	}
 	&__label {
-		align-items: center;
-		color: $gray-900;
-		display: flex;
-		font-weight: bold;
-	}
-
-	&__expander,
-	.components-color-picker {
-		background-color: white;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		&--expanded {
-			border-bottom-color: white;
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-	}
-	.components-color-picker {
-		padding: 8px;
-		position: relative;
-		z-index: 1;
-		padding-top: 0;
-		border-top: none;
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
+		margin-bottom: 8px;
 	}
 
-	// Overrides of @wordpress/components component
-
-	// Inputs
-
-	.components-color-picker__body {
-		padding: 16px 0 0;
-	}
-
-	.components-color-picker__inputs-wrapper {
-		margin: 0;
-	}
-
-	.components-color-picker__inputs-fields {
-		margin-right: 8px;
-	}
-
-	.components-color-picker__inputs-field {
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
-		margin: 0;
-
-		+ .components-color-picker__inputs-field {
-			margin-left: 8px;
-		}
-
-		label {
-			color: $gray-900;
-			font-size: inherit;
-			font-weight: bold;
-			line-height: inherit;
-			margin: 0;
-		}
-
-		input[type='number'],
-		input[type='text'] {
-			background: white;
-			border: 1px solid $gray-300;
-			border-radius: 3px;
-			box-shadow: none;
-			color: inherit;
-			font-size: 16px;
-			line-height: inherit;
-			margin: 0;
-			min-height: 48px;
-			padding: 11px 8px;
-			transition: border-color 125ms ease-in-out, box-shadow 125ms ease-in-out;
-			width: 100%;
-
-			@media screen and ( min-width: 768px ) {
-				font-size: inherit;
-			}
-
-			&:focus {
-				border-color: $primary-500;
-				box-shadow: 0 0 0 2px $primary-500;
-			}
-		}
-
-		// Reset
+	&__expander {
+		box-shadow: inset 0 0 0 1px rgb( 0 0 0 / 20% );
+		border-radius: 2px;
+		height: 64px;
+		padding: 12px;
+		text-align: right;
+		text-transform: uppercase;
 
-		.components-base-control__field,
-		.components-base-control__label {
-			display: block;
-			margin: 0;
+		&:focus-visible {
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			border-color: white;
 		}
 	}
 
-	.components-color-picker__inputs-toggle {
-		height: 36px;
-		margin-bottom: 6px;
-
-		&:active,
-		&:focus:not( :disabled ),
-		&:hover {
-			color: $primary-500;
-		}
-
-		&:focus:not( :disabled ) {
-			box-shadow: 0 0 0 3px $primary-500;
+	&__main {
+		background: white;
+		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		margin: 12px 0;
+		position: absolute;
+		z-index: 2;
+
+		&:empty {
+			display: none;
 		}
 	}
 }

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

@@ -15,16 +15,21 @@ import { PatronsLogo } from '../';
 import './style.scss';
 
 const Footer = ( { simple } ) => {
-	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' ),
@@ -33,7 +38,7 @@ const Footer = ( { simple } ) => {
 		},
 		{
 			label: __( 'Documentation', 'newspack' ),
-			url: 'https://newspack.pub/support/',
+			url: support,
 			external: true,
 		},
 	];
@@ -61,6 +66,12 @@ const Footer = ( { simple } ) => {
 			url: removeStarterContent,
 		} );
 	}
+	if ( supportEmail ) {
+		footerElements.push( {
+			label: __( 'Contact Support', 'newspack' ),
+			url: `mailto:${ supportEmail }`,
+		} );
+	}
 	return (
 		<div className="newspack-footer">
 			{ ! simple && (

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

@@ -42,7 +42,7 @@ class FormTokenField extends Component {
 				) }
 			>
 				<BaseComponent className={ classes } { ...otherProps } />
-				{ description && <div className="i">{ description }</div> }
+				{ description && <p className="newspack-form-token-field__help">{ description }</p> }
 			</div>
 		);
 	}

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

@@ -15,7 +15,7 @@ const GlobalNotices = () => {
 	}
 	return notice.split( ',' ).map( ( text, i ) => {
 		if ( text.indexOf( '_error_' ) === 0 ) {
-			return <Notice isError noticeText={ text.replace( '_error_', '' ) } key={ i } />;
+			return <Notice isError noticeText={ text.replace( '_error_', '' ) } key={ i } rawHTML />;
 		}
 		return <Notice isSuccess noticeText={ text } key={ i } />;
 	} );

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

@@ -84,13 +84,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;
@@ -119,7 +119,7 @@ class Handoff extends Component {
 					</Button>
 				) }
 				{ Name && 'active' !== Status && (
-					<Button className={ classes } isSecondary disabled { ...otherProps }>
+					<Button className={ classes } variant="secondary" disabled { ...otherProps }>
 						{ Name + __( ' not installed', 'newspack' ) }
 					</Button>
 				) }
@@ -142,10 +142,10 @@ class Handoff extends Component {
 					>
 						<p>{ modalBody }</p>
 						<Card buttonsCard noBorder className="justify-end">
-							<Button isSecondary onClick={ () => this.setState( { showModal: false } ) }>
+							<Button variant="secondary" onClick={ () => this.setState( { showModal: false } ) }>
 								{ dismissModalButton }
 							</Button>
-							<Button isPrimary onClick={ () => this.goToPlugin( Slug ) }>
+							<Button variant="primary" onClick={ () => this.goToPlugin( Slug ) }>
 								{ primaryModalButton }
 							</Button>
 						</Card>

package/src/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/src/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,15 +32,14 @@ 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';
+
+import './style.scss';