newspack-components 2.2.0 → 3.0.0-alpha.1

package/src/style-card/index.js

@@ -38,25 +38,31 @@ class StyleCard extends Component {
 					{ imageType === 'html' ? (
 						<div dangerouslySetInnerHTML={ image } />
 					) : (
-						<img src={ image } alt={ cardTitle + ' ' + __( 'Thumbnail', 'newspack' ) } />
+						<img src={ image } alt={ cardTitle + ' ' + __( 'Thumbnail', 'newspack-plugin' ) } />
 					) }
 					<div className="newspack-style-card__actions">
 						{ isActive ? (
 							<span className="newspack-style-card__actions__badge">
-								{ __( 'Selected', 'newspack' ) }
+								{ __( 'Selected', 'newspack-plugin' ) }
 							</span>
 						) : (
 							<Button
 								variant="link"
 								onClick={ onClick }
-								aria-label={ ariaLabel ? ariaLabel : __( 'Select', 'newspack' ) + ' ' + cardTitle }
+								aria-label={
+									ariaLabel ? ariaLabel : __( 'Select', 'newspack-plugin' ) + ' ' + cardTitle
+								}
 								tabIndex="0"
 							>
-								{ __( 'Select', 'newspack' ) }
+								{ __( 'Select', 'newspack-plugin' ) }
 							</Button>
 						) }
 						{ url && (
-							<WebPreview url={ url } label={ __( 'View Demo', 'newspack' ) } variant="link" />
+							<WebPreview
+								url={ url }
+								label={ __( 'View Demo', 'newspack-plugin' ) }
+								variant="link"
+							/>
 						) }
 					</div>
 				</div>

package/src/style.scss

@@ -15,8 +15,20 @@
 	}
 }
 
-// Checkbox Icon
+// Checkboxes
+.newspack-checkbox-control {
+	margin-top: 0 !important;
+	.components-checkbox-control__label {
+		font-weight: 600;
+	}
+
+	.components-base-control__help {
+		margin-left: 32px;
+		margin-top: 0;
+	}
+}
 
+// Checkbox Icon
 .newspack-checkbox-icon {
 	background: white;
 	border-radius: 50%;

package/src/tabbed-navigation/index.js

@@ -27,7 +27,7 @@ const TabbedNavigation = ( { items, className, disableUpcoming, children = null
 								if ( item.activeTabPaths ) {
 									return item.activeTabPaths.includes( pathname );
 								}
-								return match;
+								return pathname === item.path;
 							} }
 							exact
 							activeClassName={ 'selected' }

package/src/text-control/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * Text Control
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { TextControl as BaseComponent } from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+type BaseComponentProps = {
+	onChange: ( value: string ) => void;
+	value: string | number;
+};
+
+const TextControl = ( {
+	className = '',
+	required = false,
+	isWide = false,
+	withMargin = true,
+	...otherProps
+} ) => {
+	const wrapperRef = useRef< HTMLDivElement >( null );
+	useEffect( () => {
+		if ( wrapperRef.current === null ) {
+			return;
+		}
+		const labelEl = wrapperRef.current.querySelector( 'label' );
+		if ( labelEl ) {
+			labelEl.setAttribute( 'data-required-text', __( '(required)', 'newspack-plugin' ) );
+		}
+	}, [ wrapperRef.current ] );
+	const classes = classNames(
+		'newspack-text-control',
+		{
+			'newspack-text-control--wide': isWide,
+			'newspack-text-control--with-margin': withMargin,
+		},
+		className
+	);
+	return required ? (
+		<div ref={ wrapperRef } className="newspack-text-control--required">
+			<BaseComponent
+				className={ classes }
+				required={ required }
+				{ ...( otherProps as BaseComponentProps ) }
+			/>
+		</div>
+	) : (
+		<BaseComponent className={ classes } { ...( otherProps as BaseComponentProps ) } />
+	);
+};
+
+export default TextControl;

package/src/web-preview/index.js

@@ -81,19 +81,19 @@ class WebPreview extends Component {
 									onClick={ () => this.setState( { device: 'desktop' } ) }
 									variant={ 'desktop' === device && 'primary' }
 									icon={ desktop }
-									label={ __( 'Preview Desktop Size', 'newspack' ) }
+									label={ __( 'Preview Desktop Size', 'newspack-plugin' ) }
 								/>
 								<Button
 									onClick={ () => this.setState( { device: 'tablet' } ) }
 									variant={ 'tablet' === device && 'primary' }
 									icon={ tablet }
-									label={ __( 'Preview Tablet Size', 'newspack' ) }
+									label={ __( 'Preview Tablet Size', 'newspack-plugin' ) }
 								/>
 								<Button
 									onClick={ () => this.setState( { device: 'phone' } ) }
 									variant={ 'phone' === device && 'primary' }
 									icon={ mobile }
-									label={ __( 'Preview Phone Size', 'newspack' ) }
+									label={ __( 'Preview Phone Size', 'newspack-plugin' ) }
 								/>
 							</ButtonGroup>
 						</div>
@@ -104,7 +104,7 @@ class WebPreview extends Component {
 									this.setState( { isPreviewVisible: false, loaded: false } );
 								} }
 								icon={ closeSmall }
-								label={ __( 'Close Preview', 'newspack' ) }
+								label={ __( 'Close Preview', 'newspack-plugin' ) }
 							/>
 						</div>
 					</div>
@@ -112,7 +112,7 @@ class WebPreview extends Component {
 						{ ! loaded && (
 							<div className="newspack-web-preview__is-waiting">
 								<Waiting isLeft />
-								{ __( 'Loading…', 'newspack' ) }
+								{ __( 'Loading…', 'newspack-plugin' ) }
 							</div>
 						) }
 						<iframe
@@ -166,7 +166,7 @@ class WebPreview extends Component {
 
 WebPreview.defaultProps = {
 	url: '//newspack.com',
-	label: __( 'Preview', 'newspack' ),
+	label: __( 'Preview', 'newspack-plugin' ),
 	onLoad: () => {},
 };
 

package/src/with-wizard/index.js

@@ -105,7 +105,7 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 					<Notice noticeText={ message } isError rawHTML />
 					<Card buttonsCard noBorder className="justify-end">
 						<Button isPrimary href={ fallbackURL }>
-							{ __( 'Return to Dashboard', 'newspack' ) }
+							{ __( 'Return to Dashboard', 'newspack-plugin' ) }
 						</Button>
 					</Card>
 				</Modal>
@@ -219,7 +219,7 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 											<Button
 												isLink
 												href={ newspack_urls.dashboard }
-												label={ __( 'Return to Dashboard', 'newspack' ) }
+												label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
 												showTooltip={ true }
 												icon={ home }
 												iconSize={ 36 }
@@ -229,8 +229,8 @@ export default function withWizard( WrappedComponent, requiredPlugins ) {
 											<div>
 												<h2>
 													{ requiredPlugins.length > 1
-														? __( 'Required plugins', 'newspack' )
-														: __( 'Required plugin', 'newspack' ) }
+														? __( 'Required plugins', 'newspack-plugin' )
+														: __( 'Required plugin', 'newspack-plugin' ) }
 												</h2>
 											</div>
 										</div>

package/src/with-wizard-screen/index.js

@@ -66,7 +66,7 @@ export default function withWizardScreen( WrappedComponent, { hidePrimaryButton
 							<Button
 								isLink
 								href={ newspack_urls.dashboard }
-								label={ __( 'Return to Dashboard', 'newspack' ) }
+								label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
 								showTooltip={ true }
 								icon={ category }
 								iconSize={ 36 }

package/src/wizard/components/WizardError.js

@@ -41,7 +41,7 @@ const WizardError = () => {
 				{ fallbackURL && (
 					<Card buttonsCard noBorder className="justify-end">
 						<Button isPrimary href={ fallbackURL }>
-							{ __( 'Return to Dashboard', 'newspack' ) }
+							{ __( 'Return to Dashboard', 'newspack-plugin' ) }
 						</Button>
 					</Card>
 				) }

package/src/wizard/index.js

@@ -57,8 +57,8 @@ const Wizard = ( {
 	if ( ! pluginRequirementsSatisfied ) {
 		headerText =
 			requiredPlugins.length > 1
-				? __( 'Required plugins', 'newspack' )
-				: __( 'Required plugin', 'newspack' );
+				? __( 'Required plugins', 'newspack-plugin' )
+				: __( 'Required plugin', 'newspack-plugin' );
 		displayedSections = [
 			{
 				path: '/',
@@ -90,7 +90,7 @@ const Wizard = ( {
 								<Button
 									isLink
 									href={ newspack_urls.dashboard }
-									label={ __( 'Return to Dashboard', 'newspack' ) }
+									label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
 									showTooltip={ true }
 									icon={ category }
 									iconSize={ 36 }

package/src/wizard/store/index.js

@@ -59,17 +59,24 @@ const actions = {
 	setError: createAction( 'SET_ERROR' ),
 
 	// Async actions. These will not show up in Redux devtools.
-	*saveWizardSettings( { slug, section = '', payloadPath = false, updatePayload = null } ) {
+	*saveWizardSettings( {
+		slug,
+		section = '',
+		payloadPath = false,
+		auxData = {},
+		updatePayload = null,
+	} ) {
 		// Optionally data can be updated before saving - an immediate update case
 		// (without an explicit "save" action).
 		if ( updatePayload ) {
 			yield actions.updateWizardSettings( { slug, ...updatePayload } );
 		}
 		const wizardState = select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( slug );
+		const data = payloadPath ? get( wizardState, payloadPath ) : wizardState;
 		const updatedData = yield actions.fetchFromAPI( {
 			path: `/newspack/v1/wizard/${ slug }/${ section }`,
 			method: 'POST',
-			data: payloadPath ? get( wizardState, payloadPath ) : wizardState,
+			data: { ...data, ...auxData },
 			isQuietFetch: true,
 		} );
 		if ( ! isEmpty( updatedData ) && ! updatedData.error ) {

package/dist/cjs/accordion/index.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _icons = require("@wordpress/icons");
-var _classnames = _interopRequireDefault(require("classnames"));
-require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const Accordion = _ref => {
-  let {
-    children,
-    title
-  } = _ref;
-  const [isOpen, setIsOpen] = (0, _element.useState)(false);
-  return (0, _jsxRuntime.jsxs)("details", {
-    className: (0, _classnames.default)('newspack-accordion', {
-      'newspack-accordion--is-open': isOpen
-    }),
-    children: [(0, _jsxRuntime.jsxs)("summary", {
-      onClick: () => setIsOpen(!isOpen),
-      children: [title, (0, _jsxRuntime.jsx)(_icons.Icon, {
-        className: "newspack-accordion__icon",
-        icon: _icons.chevronRight,
-        size: 24
-      })]
-    }), children]
-  });
-};
-var _default = Accordion;
-exports.default = _default;

package/dist/cjs/accordion/style.scss

@@ -1,27 +0,0 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-accordion {
-	border: 1px solid wp-colors.$gray-300;
-
-	&__icon {
-		transition: transform 200ms ease-out;
-		transform: rotate( 90deg );
-	}
-
-	&--is-open {
-		.newspack-accordion {
-			&__icon {
-				transform: rotate( -90deg );
-			}
-		}
-	}
-	summary {
-		padding: 16px 32px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
-		font-size: 14px;
-		font-weight: bold;
-	}
-}

package/dist/cjs/button-group/index.js

@@ -1,57 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _components = require("@wordpress/components");
-
-require("./style.scss");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * WordPress dependencies.
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-
-/**
- * Button Group.
- */
-class ButtonGroup extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      noMargin,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-button-group', {
-      'newspack-button-group--no-margin': noMargin
-    }, className);
-    return (0, _jsxRuntime.jsx)(_components.ButtonGroup, {
-      className: classes,
-      ...otherProps
-    });
-  }
-
-}
-
-var _default = ButtonGroup;
-exports.default = _default;

package/dist/cjs/button-group/style.scss

@@ -1,73 +0,0 @@
-/**
- * Button Group
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-button-group {
-	display: block;
-	&:not( .newspack-button-group--no-margin ) {
-		margin: 32px 0;
-	}
-
-	.newspack-button {
-		padding: 11px 17px !important;
-		&:active,
-		&:focus,
-		&:hover,
-		&.is-pressed {
-			position: relative;
-		}
-
-		&.is-pressed {
-			position: relative;
-			z-index: 2;
-			background-color: white !important;
-			color: $gray-900 !important;
-			border: none !important;
-			&:focus {
-				box-shadow: 0 0 0 1px white, 0 0 0 2px $primary-500 !important;
-			}
-			&:active,
-			&:hover {
-				background: $gray-100 !important;
-				color: $primary-500 !important;
-			}
-			&::after {
-				content: '';
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: calc( 100% - 6px );
-				height: calc( 100% - 6px );
-				border: 3px solid $primary-500;
-			}
-		}
-	}
-}
-
-body[class*='admin-color-'] {
-	.newspack-button-group {
-		.newspack-button {
-			border-radius: 0;
-			box-shadow: none;
-
-			&:first-child {
-				&,
-				&::after {
-					border-bottom-left-radius: 3px;
-					border-top-left-radius: 3px;
-				}
-			}
-
-			&:last-child {
-				&,
-				&::after {
-					border-bottom-right-radius: 3px;
-					border-top-right-radius: 3px;
-				}
-			}
-		}
-	}
-}

package/dist/cjs/checkbox-control/index.js

@@ -1,63 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _components = require("@wordpress/components");
-
-var _ = require("../");
-
-require("./style.scss");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * Checkbox Control
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-class CheckboxControl extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      checked,
-      tooltip,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-checkbox-control', className);
-    return (0, _jsxRuntime.jsxs)("div", {
-      className: classes,
-      children: [(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
-        checked: Boolean(checked),
-        ...otherProps
-      }), tooltip && (0, _jsxRuntime.jsx)(_.InfoButton, {
-        text: tooltip
-      })]
-    });
-  }
-
-}
-
-var _default = CheckboxControl;
-exports.default = _default;

package/dist/cjs/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/dist/cjs/date-range-picker/index.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactDaterangePicker = _interopRequireDefault(require("react-daterange-picker"));
-var _moment = _interopRequireDefault(require("moment"));
-var _momentRange = require("moment-range");
-require("react-daterange-picker/dist/css/react-calendar.css");
-require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * External dependencies.
- */
-
-/**
- * Internal dependencies.
- */
-
-const moment = (0, _momentRange.extendMoment)(_moment.default);
-const DateRangePicker = _ref => {
-  let {
-    start,
-    end,
-    onChange
-  } = _ref;
-  return (0, _jsxRuntime.jsx)(_reactDaterangePicker.default, {
-    value: moment.range(moment(start), moment(end)),
-    firstOfWeek: 1,
-    onSelect: range => {
-      onChange({
-        start: range.start._d,
-        end: range.end._d
-      });
-    }
-  });
-};
-var _default = DateRangePicker;
-exports.default = _default;