newspack-components 2.1.0 → 2.2.1

package/dist/esm/wizard/index.js

@@ -2,20 +2,20 @@
  * External dependencies.
  */
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies.
  */
-
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ as alias__ } from '@wordpress/i18n';
 const __ = alias__;
 import { category } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
-
-import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller } from '../';
+import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller, HandoffMessage } from '../';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
 import { useWizardData } from './store/utils';
@@ -30,7 +30,6 @@ const {
   Route,
   Switch
 } = Router;
-
 const Wizard = _ref => {
   let {
     sections = [],
@@ -43,13 +42,13 @@ const Wizard = _ref => {
     requiredPlugins = []
   } = _ref;
   const isLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isLoading());
-  const isQuietLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isQuietLoading()); // Trigger initial data fetch. Some sections might not use the wizard data,
-  // but for consistency, fetching is triggered regardless of the section.
+  const isQuietLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isQuietLoading());
 
+  // Trigger initial data fetch. Some sections might not use the wizard data,
+  // but for consistency, fetching is triggered regardless of the section.
   useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug));
   let displayedSections = sections.filter(section => !section.isHidden);
   const [pluginRequirementsSatisfied, setPluginRequirementsSatisfied] = useState(requiredPlugins.length === 0);
-
   if (!pluginRequirementsSatisfied) {
     headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack') : __('Required plugin', 'newspack');
     displayedSections = [{
@@ -65,9 +64,8 @@ const Wizard = _ref => {
       })
     }];
   }
-
   return _jsxs(_Fragment, {
-    children: [_jsx(WizardError, {}), _jsx("div", {
+    children: [_jsx("div", {
       className: classnames(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
         'newspack-wizard__is-loading-quiet': isQuietLoading
       }),
@@ -101,8 +99,9 @@ const Wizard = _ref => {
             })
           })
         }), displayedSections.length > 1 && _jsx(TabbedNavigation, {
-          items: displayedSections
-        }), _jsxs(Switch, {
+          items: displayedSections,
+          children: _jsx(WizardError, {})
+        }), _jsx(HandoffMessage, {}), _jsxs(Switch, {
           children: [displayedSections.map((section, index) => {
             const SectionComponent = section.render;
             return _jsx(Route, {
@@ -122,7 +121,6 @@ const Wizard = _ref => {
     })]
   });
 };
-
 Wizard.useWizardData = useWizardData;
 Wizard.STORE_NAMESPACE = WIZARD_STORE_NAMESPACE;
 export default Wizard;

package/dist/esm/wizard/store/index.js

@@ -1,11 +1,13 @@
 /**
  * External dependencies.
  */
-import { set, get, isEmpty } from 'lodash';
+import set from 'lodash/set';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+
 /**
  * WordPress dependencies.
  */
-
 import apiFetch from '@wordpress/api-fetch';
 import { createReduxStore, register, dispatch, select } from '@wordpress/data';
 import { createAction } from './utils.js';
@@ -16,55 +18,50 @@ const DEFAULT_STATE = {
   apiData: {},
   error: null
 };
+
 /**
  * wordpress/data does not trigger a component re-render
  * on deep state change (via lodash's set function)
  * unless the state was cloned first.
  */
-
 const clone = objectToClone => JSON.parse(JSON.stringify(objectToClone));
-
 const reducer = function () {
   let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_STATE;
   let {
     type,
     payload = {}
   } = arguments.length > 1 ? arguments[1] : undefined;
-
   switch (type) {
     case 'START_LOADING_DATA':
       if (payload.isQuietLoading) {
-        return { ...state,
+        return {
+          ...state,
           isQuietLoading: true
         };
       }
-
-      return { ...state,
+      return {
+        ...state,
         isLoading: true
       };
-
     case 'FINISH_LOADING_DATA':
-      return { ...state,
+      return {
+        ...state,
         isLoading: false,
         isQuietLoading: false
       };
-
     case 'SET_API_DATA':
       return set(clone(state), ['apiData', payload.slug], payload.data);
-
     case 'UPDATE_WIZARD_SETTINGS':
       return set(clone(state), ['apiData', payload.slug, ...payload.path], payload.value);
-
     case 'SET_ERROR':
-      return { ...state,
+      return {
+        ...state,
         error: payload
       };
-
     default:
       return state;
   }
 };
-
 const actions = {
   // Regular actions.
   startLoadingData: createAction('START_LOADING_DATA'),
@@ -73,47 +70,43 @@ const actions = {
   setAPIDataForWizard: createAction('SET_API_DATA'),
   updateWizardSettings: createAction('UPDATE_WIZARD_SETTINGS'),
   setError: createAction('SET_ERROR'),
-
   // Async actions. These will not show up in Redux devtools.
-  *saveWizardSettings(_ref) {
+  saveWizardSettings(_ref) {
     let {
       slug,
       section = '',
       payloadPath = false,
       updatePayload = null
     } = _ref;
-
-    // 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 updatedData = yield actions.fetchFromAPI({
-      path: `/newspack/v1/wizard/${slug}/${section}`,
-      method: 'POST',
-      data: payloadPath ? get(wizardState, payloadPath) : wizardState,
-      isQuietFetch: true
-    });
-
-    if (!isEmpty(updatedData)) {
-      return actions.setAPIDataForWizard({
-        slug,
-        data: updatedData
+    return function* () {
+      // 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 updatedData = yield actions.fetchFromAPI({
+        path: `/newspack/v1/wizard/${slug}/${section}`,
+        method: 'POST',
+        data: payloadPath ? get(wizardState, payloadPath) : wizardState,
+        isQuietFetch: true
       });
-    }
+      if (!isEmpty(updatedData) && !updatedData.error) {
+        return actions.setAPIDataForWizard({
+          slug,
+          data: updatedData
+        });
+      }
+    }();
   },
-
   *wizardApiFetch(fetchConfig) {
     // Just a proxy to fetchFromAPI, but it has to be a generator.
     const result = yield actions.fetchFromAPI(fetchConfig);
     return result;
   }
-
 };
 const selectors = {
   isLoading: state => state.isLoading,
@@ -130,7 +123,10 @@ const store = createReduxStore(WIZARD_STORE_NAMESPACE, {
       dispatch(WIZARD_STORE_NAMESPACE).startLoadingData({
         isQuietLoading: Boolean(action.payload.isQuietFetch)
       });
-      return apiFetch(action.payload).catch(error => {
+      return apiFetch(action.payload).then(data => {
+        dispatch(WIZARD_STORE_NAMESPACE).setError(null);
+        return data;
+      }).catch(error => {
         dispatch(WIZARD_STORE_NAMESPACE).setError(error);
         return {
           error
@@ -152,10 +148,8 @@ const store = createReduxStore(WIZARD_STORE_NAMESPACE, {
           data
         });
       }
-
       return actions.finishLoadingData();
     }
-
   }
 });
 export default (() => register(store));

package/dist/esm/wizard/store/utils.js

@@ -2,10 +2,10 @@
  * WordPress dependencies.
  */
 import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-
 import { WIZARD_STORE_NAMESPACE } from '.';
 export const createAction = type => payload => ({
   type,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "2.1.0",
+	"version": "2.2.1",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -24,10 +24,10 @@
 	},
 	"dependencies": {
 		"@wordpress/base-styles": "^4.0.0",
-		"@wordpress/components": "^19.0.1",
-		"@wordpress/element": "^4.0.1",
+		"@wordpress/components": "^23.6.0",
+		"@wordpress/element": "^5.5.0",
 		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^6.1.0",
+		"@wordpress/icons": "^9.11.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"moment-range": "^3.1.1",

package/shared/js/button-props.js

@@ -1,7 +1,9 @@
 /**
  * Internal dependencies
  */
-import { isFunction, isString, isObject } from 'lodash';
+import isFunction from 'lodash/isFunction';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
 
 /**
  * Creates button props based on an action

package/shared/scss/_mixins.scss

@@ -0,0 +1,12 @@
+@mixin visuallyHidden {
+	border: 0;
+	clip: rect( 1px, 1px, 1px, 1px );
+	clip-path: inset( 50% );
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+}

package/src/accordion/index.js

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

package/src/accordion/style.scss

@@ -0,0 +1,27 @@
+@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/src/action-card/index.js

@@ -7,7 +7,7 @@
  */
 import { Component } from '@wordpress/element';
 import { ExternalLink, ToggleControl } from '@wordpress/components';
-import { Icon, check } from '@wordpress/icons';
+import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -21,12 +21,21 @@ import './style.scss';
 import classnames from 'classnames';
 
 class ActionCard extends Component {
-	backgroundImageStyles = url => {
-		return url ? { backgroundImage: `url(${ url })` } : {};
+	state = {
+		expanded: false,
 	};
 
 	/**
-	 * Render
+	 * When the collapse prop is updated to true, collapse the card if already expanded.
+	 */
+	componentDidUpdate( prevProps ) {
+		if ( ! prevProps.collapse && this.props.collapse && this.state.expanded ) {
+			this.setState( { expanded: false } );
+		}
+	}
+
+	/**
+	 * Render.
 	 */
 	render() {
 		const {
@@ -60,19 +69,31 @@ class ActionCard extends Component {
 			toggleChecked,
 			toggleOnChange,
 			hasGreyHeader,
+			hasWhiteHeader,
 			isPending,
+			expandable = false,
 		} = this.props;
+
+		const { expanded } = this.state;
+
 		const hasChildren = notification || children;
 		const classes = classnames(
 			'newspack-action-card',
 			simple && 'newspack-card--is-clickable',
 			hasGreyHeader && 'newspack-card--has-grey-header',
+			hasWhiteHeader && 'newspack-card--has-white-header',
 			hasChildren && 'newspack-card--has-children',
 			indent && 'newspack-card--indent',
 			isSmall && 'is-small',
 			isMedium && 'is-medium',
+			checkbox && 'has-checkbox',
+			expandable && 'is-expandable',
+			actionContent && 'has-action-content',
 			className
 		);
+		const backgroundImageStyles = url => {
+			return url ? { backgroundImage: `url(${ url })` } : {};
+		};
 		const titleProps =
 			toggleOnChange && ! titleLink && ! disabled
 				? { onClick: () => toggleOnChange( ! toggleChecked ), tabIndex: '0' }
@@ -95,7 +116,7 @@ class ActionCard extends Component {
 							<a href={ imageLink }>
 								<div
 									className="newspack-action-card__image"
-									style={ this.backgroundImageStyles( image ) }
+									style={ backgroundImageStyles( image ) }
 								/>
 							</a>
 						</div>
@@ -118,7 +139,13 @@ class ActionCard extends Component {
 						<Grid columns={ 1 } gutter={ 8 } noMargin>
 							<h2>
 								<span className="newspack-action-card__title" { ...titleProps }>
-									{ titleLink ? <a href={ titleLink }>{ title }</a> : title }
+									{ titleLink && <a href={ titleLink }>{ title }</a> }
+									{ ! titleLink && expandable && (
+										<Button isLink onClick={ () => this.setState( { expanded: ! expanded } ) }>
+											{ title }
+										</Button>
+									) }
+									{ ! titleLink && ! expandable && title }
 								</span>
 								{ badges?.length &&
 									badges.map( ( badgeText, i ) => (
@@ -135,7 +162,7 @@ class ActionCard extends Component {
 							) }
 						</Grid>
 					</div>
-					{ ( actionText || isDisplayingSecondaryAction || actionContent ) && (
+					{ ! expandable && ( actionText || isDisplayingSecondaryAction || actionContent ) && (
 						<div className="newspack-action-card__region newspack-action-card__region-right">
 							{ /* eslint-disable no-nested-ternary */ }
 							{ actionContent && actionContent }
@@ -146,6 +173,7 @@ class ActionCard extends Component {
 									</Handoff>
 								) : onClick || hasInternalLink ? (
 									<Button
+										disabled={ disabled }
 										isLink
 										href={ href }
 										onClick={ onClick }
@@ -176,6 +204,11 @@ class ActionCard extends Component {
 							) }
 						</div>
 					) }
+					{ expandable && (
+						<Button onClick={ () => this.setState( { expanded: ! expanded } ) }>
+							<Icon icon={ expanded ? chevronUp : chevronDown } height={ 24 } width={ 24 } />
+						</Button>
+					) }
 				</div>
 				{ notification && (
 					<div className="newspack-action-card__notification newspack-action-card__region-children">
@@ -193,7 +226,9 @@ class ActionCard extends Component {
 						) }
 					</div>
 				) }
-				{ children && <div className="newspack-action-card__region-children">{ children }</div> }
+				{ children && ( ( expandable && expanded ) || ! expandable ) && (
+					<div className="newspack-action-card__region-children">{ children }</div>
+				) }
 			</Card>
 		);
 	}