newspack-components 2.0.3 → 2.2.0

package/src/image-upload/style.scss

@@ -2,8 +2,7 @@
  * Image Upload
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-image-upload {
 	margin: 32px 0;
@@ -11,18 +10,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 wp-colors.$gray-700;
+		border-radius: 2px;
 		display: flex;
 		justify-content: center;
 		max-width: 100%;
@@ -34,7 +30,7 @@
 		&:not( &--has-image ) {
 			.newspack-button {
 				background: white !important;
-				border-radius: 3px !important;
+				border-radius: 2px !important;
 				padding: 4px 16px !important;
 
 				&:active,
@@ -53,14 +49,11 @@
 			overflow: hidden;
 			&::before,
 			&::after {
-				border: 1px solid rgba( black, 0.125 );
-				border-radius: 3px;
-				bottom: 0;
+				border: 1px solid rgba( black, 0.54 );
+				border-radius: 2px;
 				content: '';
-				left: 0;
+				inset: 0;
 				position: absolute;
-				right: 0;
-				top: 0;
 				z-index: 0;
 			}
 			button,
@@ -74,7 +67,7 @@
 			}
 			&::after {
 				background: rgba( white, 0.9 );
-				border-color: $gray-300;
+				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,
 			&:hover {
@@ -97,7 +90,9 @@
 		}
 	}
 	&__image + &__help {
-		margin: 0;
+		color: wp-colors.$gray-700;
+		font-size: 12px;
+		margin: 1em 0 0;
 	}
 	&__controls {
 		align-items: center;

package/src/index.js

@@ -1,18 +1,17 @@
+export { default as Accordion } from './accordion';
 export { default as ActionCard } from './action-card';
 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';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';
+export { default as HandoffMessage } from './handoff-message';
 export { default as InfoButton } from './info-button';
 export { default as ImageUpload } from './image-upload';
 export { default as GlobalNotices } from './global-notices';
@@ -32,18 +31,19 @@ export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
 export { default as DateRangePicker } from './date-range-picker';
 export { default as Settings } from './settings';
+export { default as StepsList } from './steps-list';
+export { default as StepsListItem } from './steps-list-item';
 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';

package/src/info-button/style.scss

@@ -2,8 +2,6 @@
  * Info Button
  */
 
-@import '~@wordpress/base-styles/colors';
-
 .newspack-info-button {
 	display: inline-block;
 	flex: 0 0 24px;
@@ -15,6 +13,6 @@
 
 	svg {
 		display: block;
-		fill: currentColor;
+		fill: currentcolor;
 	}
 }

package/src/modal/index.js

@@ -23,18 +23,15 @@ class Modal extends Component {
 	 * Render.
 	 */
 	render() {
-		const { className, overlayClassName, isWide, isNarrow, ...otherProps } = this.props;
+		const { className, 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 (
-			<BaseComponent className={ classes } overlayClassName={ overlayClasses } { ...otherProps } />
-		);
+		return <BaseComponent className={ classes } { ...otherProps } />;
 	}
 }
 

package/src/modal/style.scss

@@ -2,167 +2,55 @@
  * Modal
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/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: #{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};
 
 	@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: 0;
 		}
 	}
 }

package/src/newspack-icon/index.js

@@ -23,8 +23,13 @@ class NewspackIcon extends Component {
 	 * Render
 	 */
 	render() {
-		const { className, size } = this.props;
-		const classes = classnames( 'newspack-icon', className );
+		const { className, simple, size, white } = this.props;
+		const classes = classnames(
+			'newspack-icon',
+			simple && 'newspack-icon--simple',
+			white && 'newspack-icon--white',
+			className
+		);
 		return (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"

package/src/newspack-icon/style.scss

@@ -2,10 +2,25 @@
  * Newspack Icon
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-icon {
-	background: $primary-500;
+	background: colors.$primary-500;
 	fill: white;
 	padding: 12px;
+
+	&--white {
+		background: white;
+		fill: colors.$primary-500;
+	}
+
+	&--simple {
+		background: none;
+		fill: colors.$primary-500;
+		padding: 0;
+	}
+
+	&#{&}--simple#{&}--white {
+		fill: white;
+	}
 }

package/src/newspack-logo/style.scss

@@ -2,12 +2,12 @@
  * Newspack Logo
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-logo {
 	&__svg {
 		display: block;
-		fill: currentColor;
+		fill: currentcolor;
 		margin: 0;
 		padding-bottom: 32px;
 		width: auto;
@@ -19,7 +19,7 @@
 	}
 
 	&__wrapper {
-		background: $primary-500;
+		background: colors.$primary-500;
 		color: white;
 		position: relative;
 

package/src/notice/index.js

@@ -6,7 +6,8 @@
  * WordPress dependencies.
  */
 import { Component, RawHTML } from '@wordpress/element';
-import { Icon, check, help, info } from '@wordpress/icons';
+import { Icon, bug, check, help, info } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
@@ -25,7 +26,9 @@ class Notice extends Component {
 	render() {
 		const {
 			className,
+			debugMode,
 			isError,
+			isHandoff,
 			isHelp,
 			isSuccess,
 			isWarning,
@@ -37,7 +40,9 @@ class Notice extends Component {
 		const classes = classnames(
 			'newspack-notice',
 			className,
+			debugMode && 'newspack-notice__is-debug',
 			isError && 'newspack-notice__is-error',
+			isHandoff && 'newspack-notice__is-handoff',
 			isHelp && 'newspack-notice__is-help',
 			isSuccess && 'newspack-notice__is-success',
 			isWarning && 'newspack-notice__is-warning'
@@ -47,6 +52,8 @@ class Notice extends Component {
 			noticeIcon = help;
 		} else if ( isSuccess ) {
 			noticeIcon = check;
+		} else if ( debugMode ) {
+			noticeIcon = bug;
 		} else {
 			noticeIcon = info;
 		}
@@ -55,6 +62,7 @@ class Notice extends Component {
 				{ <Icon icon={ noticeIcon } /> }
 				<div className="newspack-notice__content">
 					{ rawHTML ? <RawHTML>{ noticeText }</RawHTML> : noticeText }
+					{ debugMode && __( 'Debug Mode', 'newspack' ) }
 					{ children || null }
 				</div>
 			</div>

package/src/notice/style.scss

@@ -2,65 +2,106 @@
  * Notice
  */
 
-@import '~@wordpress/base-styles/colors';
-@import '../../../shared/scss/colors';
+@use 'sass:color';
+@use '~@wordpress/base-styles/colors' as wp-colors;
+@use '../../../shared/scss/colors';
 
 .newspack-notice {
-	align-items: flex-start;
-	background: $gray-100;
-	border-radius: 3px;
-	color: $gray-900;
+	align-items: center;
+	background: wp-colors.$gray-100;
+	color: wp-colors.$gray-900;
 	display: flex;
-	font-size: 14px;
 	justify-content: flex-start;
-	line-height: 24px;
 	margin: 32px 0;
 	padding: 6px 8px;
 
 	> svg {
 		display: block;
-		fill: $gray-900;
+		fill: wp-colors.$gray-900;
 		flex: 0 0 24px;
 		margin-right: 4px;
 	}
 
+	&__is-debug {
+		background: colors.$primary-700;
+		border-radius: 2px;
+		bottom: 16px;
+		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		color: white;
+		font-weight: bold;
+		margin: 0 16px;
+		position: fixed;
+		text-transform: uppercase;
+		z-index: 9997;
+
+		> svg {
+			fill: white;
+		}
+	}
+
 	&__is-error {
-		background: lighten( $alert-red, 54% );
+		background: color.adjust( wp-colors.$alert-red, $lightness: 51% );
 
 		> svg {
-			fill: $alert-red;
+			fill: wp-colors.$alert-red;
 			transform: rotate( 180deg );
 		}
 	}
 
+	&__is-handoff {
+		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
+		margin-top: 0;
+		position: sticky;
+		top: 46px;
+		z-index: 100;
+
+		@media ( min-width: 782px ) {
+			top: 32px;
+		}
+	}
+
 	&__is-help {
-		background: $primary-000;
+		background: colors.$primary-050;
 
 		> svg {
-			fill: $primary-500;
+			fill: colors.$primary-500;
 		}
 	}
 
 	&__is-success {
-		background: lighten( $alert-green, 47% );
+		background: color.adjust( wp-colors.$alert-green, $lightness: 42% );
 
 		> svg {
-			fill: $alert-green;
+			fill: wp-colors.$alert-green;
 		}
 	}
 
 	&__is-warning {
-		background: lighten( $alert-yellow, 36% );
+		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
 
 		> svg {
-			fill: $alert-yellow;
+			fill: wp-colors.$alert-yellow;
 			transform: rotate( 180deg );
 		}
 	}
 
-	&__content {
+	& &__content {
 		> div > * {
-			margin: 0;
+			margin: 0 !important;
+		}
+
+		a {
+			color: inherit;
+
+			&:active,
+			&:focus,
+			&:hover {
+				color: inherit;
+			}
+
+			&:focus {
+				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentcolor;
+			}
 		}
 	}
 

package/src/plugin-installer/index.js

@@ -155,6 +155,7 @@ class PluginInstaller extends Component {
 	render() {
 		const { autoInstall, isSmall, withoutFooterButton } = this.props;
 		const { pluginInfo } = this.state;
+		const { is_atomic: isAtomic } = window;
 		const slugs = Object.keys( pluginInfo );
 
 		// Store all plugin status info for installer button text value based on current status.
@@ -178,7 +179,7 @@ class PluginInstaller extends Component {
 		} );
 
 		return (
-			<div>
+			<>
 				{ ( ! pluginInfo || ! Object.keys( pluginInfo ).length ) && (
 					<div className="newspack-plugin-installer_is-waiting">
 						<Waiting isLeft />
@@ -189,12 +190,23 @@ class PluginInstaller extends Component {
 					slugs.length > 0 &&
 					slugs.map( slug => {
 						const plugin = pluginInfo[ slug ];
-						const { Name, Description, Status, installationStatus, notification } = plugin;
+						const { Name, Description, Download, Status, installationStatus, notification } =
+							plugin;
 						const isWaiting = installationStatus === PLUGIN_STATE_INSTALLING;
 						const isButton = ! isWaiting && Status !== 'active';
+						const installable = Download || pluginInstalled( Status );
 						let actionText;
 						if ( installationStatus === PLUGIN_STATE_INSTALLING ) {
-							actionText = __( 'Installing…' );
+							actionText = 'inactive' === Status ? __( 'Activating…' ) : __( 'Installing…' );
+						} else if ( ! installable ) {
+							actionText = (
+								<span className="newspack-plugin-installer__status">
+									{ isAtomic
+										? __( 'Contact Newspack support to install', 'newspack' )
+										: __( 'Plugin must be installed manually', 'newspack' ) }
+									<span className="newspack-checkbox-icon" />
+								</span>
+							);
 						} else if ( Status === 'uninstalled' ) {
 							actionText = (
 								<span className="newspack-plugin-installer__status">
@@ -230,6 +242,7 @@ class PluginInstaller extends Component {
 								key={ slug }
 								title={ Name }
 								description={ Description }
+								disabled={ ! installable }
 								actionText={ actionText }
 								isSmall={ isSmall }
 								isWaiting={ isWaiting }
@@ -248,7 +261,7 @@ class PluginInstaller extends Component {
 						</Button>
 					</div>
 				) }
-			</div>
+			</>
 		);
 	}
 }

package/src/plugin-installer/style.scss

@@ -2,7 +2,7 @@
  * Plugin Installer
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-card {
 	.newspack-plugin-installer__status {
@@ -35,10 +35,10 @@
 	}
 
 	&.newspack-plugin-installer__status-active {
-		box-shadow: inset 4px 0 0 $alert-green;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-green;
 
 		.newspack-plugin-installer__checkbox {
-			background: $alert-green;
+			background: wp-colors.$alert-green;
 			box-shadow: none;
 		}
 
@@ -48,12 +48,12 @@
 	}
 
 	&.newspack-plugin-installer__status-error {
-		box-shadow: inset 4px 0 0 $alert-red;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
 	}
 
 	&.newspack-plugin-installer__status-installing,
 	&.newspack-plugin-installer__status-none {
-		box-shadow: inset 4px 0 0 $gray-100;
+		box-shadow: inset 4px 0 0 wp-colors.$gray-100;
 	}
 
 	// Is Small