newspack-components 2.2.1 → 3.0.0-alpha.1

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

package/dist/cjs/date-range-picker/style.scss

@@ -1,148 +0,0 @@
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.DateRangePicker {
-	margin: 32px 0;
-	max-width: 296px;
-	width: 100%;
-
-	&__PaginationArrow {
-		background: transparent 50% 50% no-repeat;
-		background-size: 24px 24px;
-		border-radius: 3px;
-		height: 36px;
-		transition: background-image 125ms ease-in-out;
-		width: 36px;
-
-		&--previous {
-			background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%231e1e1e"/%3E%3C/svg%3E' );
-			left: 0;
-
-			&:hover {
-				background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%2336f"/%3E%3C/svg%3E' );
-			}
-		}
-
-		&--next {
-			background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%231e1e1e"/%3E%3C/svg%3E' );
-			right: 0;
-
-			&:hover {
-				background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%2336f"/%3E%3C/svg%3E' );
-			}
-		}
-
-		&:hover {
-			background-color: transparent;
-		}
-	}
-
-	&__PaginationArrowIcon {
-		display: none;
-	}
-
-	&__Month {
-		margin: 0;
-		width: inherit;
-	}
-
-	&__MonthHeader {
-		color: wp-colors.$gray-900;
-		font-size: 17px;
-		height: auto;
-		line-height: 24px;
-		padding: 6px 44px;
-	}
-
-	&__WeekdayHeading,
-	&__Date {
-		font-size: 14px;
-		line-height: 24px;
-		padding: 6px 0;
-	}
-
-	&__WeekdayHeading {
-		border-bottom-color: wp-colors.$gray-300;
-		color: wp-colors.$gray-900;
-
-		abbr[title] {
-			color: inherit;
-		}
-	}
-
-	&__MonthDates {
-		border: 0;
-		border-spacing: 0;
-	}
-
-	&__Date {
-		border-color: wp-colors.$gray-300;
-		border-bottom-width: 1px;
-
-		&--weekend {
-			background-color: wp-colors.$gray-100;
-		}
-
-		&--otherMonth {
-			color: wp-colors.$gray-200;
-			opacity: 1;
-		}
-
-		&--is-disabled {
-			color: wp-colors.$gray-100;
-			cursor: not-allowed;
-		}
-
-		&--is-highlighted {
-			color: white;
-		}
-	}
-
-	&__CalendarSelection,
-	&__CalendarHighlight {
-		border-color: colors.$primary-500;
-		bottom: 4px;
-		top: 4px;
-
-		&--inOtherMonth {
-			opacity: 1;
-		}
-
-		&--start {
-			border-bottom-left-radius: 3px;
-			border-top-left-radius: 3px;
-			left: 4px;
-		}
-
-		&--end {
-			border-bottom-right-radius: 3px;
-			border-top-right-radius: 3px;
-			right: 4px;
-		}
-
-		&--single {
-			border: none;
-			border-radius: 3px;
-			left: 4px;
-			right: 4px;
-		}
-	}
-
-	&__CalendarSelection {
-		background-color: colors.$primary-500;
-	}
-
-	&__CalendarHighlight {
-		background: colors.$primary-500;
-		border: none;
-		bottom: 0;
-		top: 0;
-
-		&--single {
-			border: none;
-			border-radius: 0;
-			left: 0;
-			right: 0;
-		}
-	}
-}

package/dist/esm/accordion/index.js

@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const Accordion = _ref => {
-  let {
-    children,
-    title
-  } = _ref;
-  const [isOpen, setIsOpen] = useState(false);
-  return _jsxs("details", {
-    className: classNames('newspack-accordion', {
-      'newspack-accordion--is-open': isOpen
-    }),
-    children: [_jsxs("summary", {
-      onClick: () => setIsOpen(!isOpen),
-      children: [title, _jsx(Icon, {
-        className: "newspack-accordion__icon",
-        icon: chevronRight,
-        size: 24
-      })]
-    }), children]
-  });
-};
-export default Accordion;

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

@@ -1,32 +0,0 @@
-/**
- * External dependencies.
- */
-import { default as ReactDateRangePicker } from 'react-daterange-picker';
-import origMoment from 'moment';
-import { extendMoment } from 'moment-range';
-import 'react-daterange-picker/dist/css/react-calendar.css';
-
-/**
- * Internal dependencies.
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const moment = extendMoment(origMoment);
-const DateRangePicker = _ref => {
-  let {
-    start,
-    end,
-    onChange
-  } = _ref;
-  return _jsx(ReactDateRangePicker, {
-    value: moment.range(moment(start), moment(end)),
-    firstOfWeek: 1,
-    onSelect: range => {
-      onChange({
-        start: range.start._d,
-        end: range.end._d
-      });
-    }
-  });
-};
-export default DateRangePicker;