newspack-components 2.0.1 → 2.1.0

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

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

package/src/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/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';

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

@@ -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/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

@@ -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;
+	}
 }