newspack-components 2.0.1 → 2.1.0

package/src/checkbox-control/style.scss

@@ -1,78 +0,0 @@
-/**
- * Checkbox styles.
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-checkbox-control {
-	color: $gray-700;
-	display: flex;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
-	label {
-		color: inherit;
-		font-size: inherit;
-		line-height: inherit;
-		margin: 0;
-	}
-
-	.components-checkbox-control__input-container {
-		display: block;
-		margin: 0;
-		margin-right: 8px;
-
-		@media screen and ( min-width: 600px ) {
-			margin-bottom: 2px;
-			margin-top: 2px;
-		}
-	}
-
-	.components-checkbox-control__input[type='checkbox'] {
-		margin: 0;
-
-		&:checked {
-			background-color: $primary-500;
-			border-color: $primary-500;
-		}
-
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: 0 0 0 2px white, 0 0 0 3.5px $primary-500;
-		}
-	}
-
-	.components-base-control__help {
-		color: inherit;
-		font-size: inherit;
-		font-style: italic;
-		line-height: inherit;
-		margin: 0;
-		margin-left: 28px;
-	}
-
-	// Multiple Checkbox Controls
-
-	& + & {
-		margin-top: -16px;
-	}
-
-	// Reset
-
-	.components-base-control {
-		font-size: inherit;
-		line-height: inherit;
-	}
-
-	.components-base-control__field {
-		display: flex;
-		margin: 0;
-	}
-
-	.components-base-control__label {
-		display: block;
-		margin: 0;
-	}
-}

package/src/preview-box/index.js

@@ -1,18 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-const PreviewBox = ( { children } ) => (
-	<div className="newspack-preview-box">
-		<div className="newspack-preview-box__label">{ __( 'Preview', 'newspack' ) }</div>
-		<div className="newspack-preview-box__content">{ children }</div>
-	</div>
-);
-
-export default PreviewBox;

package/src/preview-box/style.scss

@@ -1,18 +0,0 @@
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-preview-box {
-	margin: 32px 0;
-
-	&__label {
-		color: $gray-900;
-		font-weight: bold;
-	}
-
-	&__content {
-		background: $gray-100;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		padding: 11px 8px;
-	}
-}

package/src/textarea-control/index.js

@@ -1,32 +0,0 @@
-/**
- * Textarea Control
- */
-
-/**
- * WordPress dependencies
- */
-import { TextareaControl as BaseComponent } from '@wordpress/components';
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-class TextareaControl extends Component {
-	/**
-	 * Render.
-	 */
-	render() {
-		const { className, ...otherProps } = this.props;
-		const classes = classnames( 'newspack-textarea-control', className );
-		return <BaseComponent className={ classes } { ...otherProps } />;
-	}
-}
-
-export default TextareaControl;

package/src/textarea-control/style.scss

@@ -1,76 +0,0 @@
-/**
- * Textarea Control
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-textarea-control {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
-	label {
-		color: $gray-900;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
-		margin: 0;
-	}
-
-	textarea {
-		background: white;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		box-shadow: none;
-		color: inherit;
-		display: block;
-		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: 14px;
-		}
-
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-
-		&:disabled,
-		&.disabled {
-			background: $gray-100;
-			color: $gray-600;
-			cursor: not-allowed;
-		}
-	}
-
-	// Multiple Textarea Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -24px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-select-control,
-	+ .newspack-text-control {
-		margin-bottom: 32px;
-		margin-top: -24px;
-	}
-
-	// Reset
-
-	.components-base-control__field,
-	.components-base-control__label {
-		display: block;
-		margin: 0;
-	}
-}

package/src/toggle-control/index.js

@@ -1,38 +0,0 @@
-/**
- * Toggle Control
- */
-
-/**
- * WordPress dependencies
- */
-import { ToggleControl as BaseComponent } from '@wordpress/components';
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-class ToggleControl extends Component {
-	/**
-	 * Render.
-	 */
-	render() {
-		const { className, isDark, checked, ...otherProps } = this.props;
-		const classes = classNames(
-			'newspack-toggle-control',
-			isDark && 'newspack-toggle-control--is-dark',
-			// NOTE: disabled prop is handled in more recent Gutenberg versions. This special handling can be removed once that's in Core.
-			otherProps.disabled && 'newspack-toggle-control--is-disabled',
-			className
-		);
-		return <BaseComponent className={ classes } checked={ Boolean( checked ) } { ...otherProps } />;
-	}
-}
-
-export default ToggleControl;

package/src/toggle-control/style.scss

@@ -1,74 +0,0 @@
-/**
- * Toggle Control
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-toggle-control {
-	margin: 32px 0;
-
-	.components-base-control__field {
-		align-items: flex-start;
-		margin: 0;
-
-		.components-toggle-control__label {
-			color: $gray-700;
-			font-size: 14px;
-			line-height: 24px;
-			margin: 0;
-		}
-
-		.components-form-toggle {
-			margin: 3px 8px 3px 0;
-
-			&.is-checked {
-				.components-form-toggle__track {
-					background: $primary-500;
-					border-color: transparent;
-				}
-			}
-		}
-	}
-
-	// Is Dark
-
-	&.newspack-toggle-control--is-dark {
-		.components-base-control__field label {
-			color: $gray-900;
-			font-weight: bold;
-		}
-
-		.components-base-control__help {
-			font-style: normal;
-		}
-	}
-
-	// Is disabled
-
-	&.newspack-toggle-control--is-disabled {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-
-	// Focus
-
-	.components-form-toggle__input:focus {
-		+ .components-form-toggle__track {
-			box-shadow: 0 0 0 2px white, 0 0 0 4px $primary-500;
-		}
-	}
-
-	// Multiple Toggle Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -24px;
-	}
-
-	// Reset
-
-	.components-base-control__help {
-		margin: 0 0 0 44px;
-	}
-}

package/src/toggle-group/index.js

@@ -1,43 +0,0 @@
-/**
- * Toggle Group
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies.
- */
-import { ToggleControl } from '../';
-import './style.scss';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-
-class ToggleGroup extends Component {
-	/**
-	 * Render.
-	 */
-	render() {
-		const { checked, children, description, onChange, title, className } = this.props;
-		const classes = classnames( 'newspack-toggle-group', className );
-		return (
-			<div className={ classes }>
-				<ToggleControl checked={ checked || false } onChange={ onChange } />
-				<div className="newspack-toggle-group__description">
-					<p className="is-dark">
-						<strong>{ title }</strong>
-					</p>
-					<p>{ description }</p>
-					{ checked && children }
-				</div>
-			</div>
-		);
-	}
-}
-
-export default ToggleGroup;

package/src/toggle-group/style.scss

@@ -1,28 +0,0 @@
-/**
- * Toggle Group
- */
-
-.newspack-toggle-group {
-	display: flex;
-	margin: 32px 0;
-
-	& &__description p {
-		margin-bottom: 0;
-		margin-top: 0;
-	}
-
-	.newspack-toggle-control {
-		margin: 0;
-	}
-
-	&__description {
-		flex: 1;
-	}
-
-	// Multiple Toogle Groups
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-}

package/src/wizard-pagination/index.js

@@ -1,59 +0,0 @@
-/**
- * Wizard Pagination
- */
-
-/**
- * Internal dependencies.
- */
-import Router from '../proxied-imports/router';
-import './style.scss';
-
-const { withRouter } = Router;
-
-const WizardPagination = props => {
-	const { location, routes } = props;
-	const routeList = Object.keys( routes || {} );
-	const currentRoute = routeList.find( route => location.pathname === routes[ route ].path );
-
-	return (
-		<div className="newspack-wizard-pagination">
-			{ routeList.length && (
-				<ul>
-					{ routeList.map( ( route, index ) => {
-						if ( '0' === route ) {
-							return null;
-						}
-
-						const currentIndex = routeList.indexOf( currentRoute );
-						const classes = [];
-
-						if ( route === currentRoute ) {
-							classes.push( 'active' );
-						}
-
-						if ( index > currentIndex ) {
-							classes.push( 'disabled' );
-						}
-
-						if ( index < currentIndex ) {
-							classes.push( 'complete' );
-						}
-
-						return (
-							<li key={ index }>
-								<a
-									className={ classes.join( ' ' ) }
-									href={ index <= currentIndex && '#' + routes[ route ].path }
-								>
-									{ routes[ route ].label }
-								</a>
-							</li>
-						);
-					} ) }
-				</ul>
-			) }
-		</div>
-	);
-};
-
-export default withRouter( WizardPagination );

package/src/wizard-pagination/style.scss

@@ -1,74 +0,0 @@
-/**
- * Wizard Pagination
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-wizard-pagination {
-	ul {
-		box-shadow: 0 -1px 0 inset $gray-300;
-		display: flex;
-		flex-wrap: wrap;
-		font-size: 14px;
-		line-height: 24px;
-		margin: 0;
-	}
-
-	li {
-		margin-bottom: 0;
-		width: 100%;
-
-		@media screen and ( min-width: 600px ) {
-			width: auto;
-		}
-	}
-
-	a {
-		border-bottom: 4px solid transparent;
-		color: $gray-900;
-		display: block;
-		font-weight: bold;
-		padding: 12px 16px 8px;
-		text-decoration: none;
-
-		&:active,
-		&:focus,
-		&:hover {
-			color: $primary-500;
-			outline: none;
-		}
-
-		&:focus {
-			box-shadow: none;
-		}
-
-		&:focus-visible {
-			outline: 3px solid;
-			outline-offset: -3px;
-		}
-
-		&.active {
-			border-bottom-width: 0;
-			border-left: 4px solid $primary-500;
-			padding-bottom: 12px;
-
-			@media screen and ( min-width: 600px ) {
-				border-bottom-width: 4px;
-				border-color: $primary-500;
-				border-left-width: 0;
-				padding-bottom: 8px;
-				padding-left: 16px;
-			}
-		}
-
-		&.disabled {
-			cursor: not-allowed;
-			opacity: 0.3;
-
-			&:hover {
-				color: inherit;
-			}
-		}
-	}
-}