newspack-components 2.1.0 → 2.2.0

package/dist/cjs/wizard/index.js

@@ -1,44 +1,32 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _data = require("@wordpress/data");
-
 var _element = require("@wordpress/element");
-
 var _i18n = require("@wordpress/i18n");
-
 var _icons = require("@wordpress/icons");
-
 var _ = require("../");
-
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
-
 var _store = _interopRequireWildcard(require("./store"));
-
 var _utils = require("./store/utils");
-
 var _WizardError = _interopRequireDefault(require("./components/WizardError"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * External dependencies.
  */
-
 /**
  * WordPress dependencies.
  */
 const __ = _i18n.__;
+/**
+ * Internal dependencies
+ */
 (0, _store.default)();
 const {
   HashRouter,
@@ -46,7 +34,6 @@ const {
   Route,
   Switch
 } = _router.default;
-
 const Wizard = _ref => {
   let {
     sections = [],
@@ -59,13 +46,13 @@ const Wizard = _ref => {
     requiredPlugins = []
   } = _ref;
   const isLoading = (0, _data.useSelect)(select => select(_store.WIZARD_STORE_NAMESPACE).isLoading());
-  const isQuietLoading = (0, _data.useSelect)(select => select(_store.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 = (0, _data.useSelect)(select => select(_store.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.
   (0, _data.useSelect)(select => select(_store.WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug));
   let displayedSections = sections.filter(section => !section.isHidden);
   const [pluginRequirementsSatisfied, setPluginRequirementsSatisfied] = (0, _element.useState)(requiredPlugins.length === 0);
-
   if (!pluginRequirementsSatisfied) {
     headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack') : __('Required plugin', 'newspack');
     displayedSections = [{
@@ -81,9 +68,8 @@ const Wizard = _ref => {
       })
     }];
   }
-
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_WizardError.default, {}), (0, _jsxRuntime.jsx)("div", {
+    children: [(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
         'newspack-wizard__is-loading-quiet': isQuietLoading
       }),
@@ -117,8 +103,9 @@ const Wizard = _ref => {
             })
           })
         }), displayedSections.length > 1 && (0, _jsxRuntime.jsx)(_.TabbedNavigation, {
-          items: displayedSections
-        }), (0, _jsxRuntime.jsxs)(Switch, {
+          items: displayedSections,
+          children: (0, _jsxRuntime.jsx)(_WizardError.default, {})
+        }), (0, _jsxRuntime.jsx)(_.HandoffMessage, {}), (0, _jsxRuntime.jsxs)(Switch, {
           children: [displayedSections.map((section, index) => {
             const SectionComponent = section.render;
             return (0, _jsxRuntime.jsx)(Route, {
@@ -138,7 +125,6 @@ const Wizard = _ref => {
     })]
   });
 };
-
 Wizard.useWizardData = _utils.useWizardData;
 Wizard.STORE_NAMESPACE = _store.WIZARD_STORE_NAMESPACE;
 var _default = Wizard;

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

@@ -1,20 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WIZARD_STORE_NAMESPACE = void 0;
-
-var _lodash = require("lodash");
-
+var _set = _interopRequireDefault(require("lodash/set"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-
 var _data = require("@wordpress/data");
-
 var _utils = require("./utils.js");
-
 /**
  * External dependencies.
  */
@@ -22,6 +18,7 @@ var _utils = require("./utils.js");
 /**
  * WordPress dependencies.
  */
+
 const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 exports.WIZARD_STORE_NAMESPACE = WIZARD_STORE_NAMESPACE;
 const DEFAULT_STATE = {
@@ -30,55 +27,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 (0, _lodash.set)(clone(state), ['apiData', payload.slug], payload.data);
-
+      return (0, _set.default)(clone(state), ['apiData', payload.slug], payload.data);
     case 'UPDATE_WIZARD_SETTINGS':
-      return (0, _lodash.set)(clone(state), ['apiData', payload.slug, ...payload.path], payload.value);
-
+      return (0, _set.default)(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: (0, _utils.createAction)('START_LOADING_DATA'),
@@ -87,47 +79,43 @@ const actions = {
   setAPIDataForWizard: (0, _utils.createAction)('SET_API_DATA'),
   updateWizardSettings: (0, _utils.createAction)('UPDATE_WIZARD_SETTINGS'),
   setError: (0, _utils.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 = (0, _data.select)(WIZARD_STORE_NAMESPACE).getWizardAPIData(slug);
-    const updatedData = yield actions.fetchFromAPI({
-      path: `/newspack/v1/wizard/${slug}/${section}`,
-      method: 'POST',
-      data: payloadPath ? (0, _lodash.get)(wizardState, payloadPath) : wizardState,
-      isQuietFetch: true
-    });
-
-    if (!(0, _lodash.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 = (0, _data.select)(WIZARD_STORE_NAMESPACE).getWizardAPIData(slug);
+      const updatedData = yield actions.fetchFromAPI({
+        path: `/newspack/v1/wizard/${slug}/${section}`,
+        method: 'POST',
+        data: payloadPath ? (0, _get.default)(wizardState, payloadPath) : wizardState,
+        isQuietFetch: true
       });
-    }
+      if (!(0, _isEmpty.default)(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,
@@ -144,7 +132,10 @@ const store = (0, _data.createReduxStore)(WIZARD_STORE_NAMESPACE, {
       (0, _data.dispatch)(WIZARD_STORE_NAMESPACE).startLoadingData({
         isQuietLoading: Boolean(action.payload.isQuietFetch)
       });
-      return (0, _apiFetch.default)(action.payload).catch(error => {
+      return (0, _apiFetch.default)(action.payload).then(data => {
+        (0, _data.dispatch)(WIZARD_STORE_NAMESPACE).setError(null);
+        return data;
+      }).catch(error => {
         (0, _data.dispatch)(WIZARD_STORE_NAMESPACE).setError(error);
         return {
           error
@@ -166,13 +157,9 @@ const store = (0, _data.createReduxStore)(WIZARD_STORE_NAMESPACE, {
           data
         });
       }
-
       return actions.finishLoadingData();
     }
-
   }
 });
-
 var _default = () => (0, _data.register)(store);
-
 exports.default = _default;

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

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useWizardData = exports.createAction = void 0;
-
 var _data = require("@wordpress/data");
-
 var _ = require(".");
-
 /**
  * WordPress dependencies.
  */
@@ -16,16 +13,14 @@ var _ = require(".");
 /**
  * Internal dependencies
  */
+
 const createAction = type => payload => ({
   type,
   payload
 });
-
 exports.createAction = createAction;
-
 const useWizardData = function (wizardName) {
   let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return (0, _data.useSelect)(select => select(_.WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;
 };
-
 exports.useWizardData = useWizardData;

package/dist/cjs/wizard/style.scss

@@ -0,0 +1,148 @@
+@import '~@wordpress/base-styles/colors';
+@import '../../../shared/scss/colors';
+
+.newspack-wizard {
+	&__title {
+		align-items: center;
+		border-bottom: 1px solid $gray-300;
+		display: flex;
+
+		h1 {
+			color: $gray-900;
+			font-size: 21px;
+			line-height: 30px;
+			margin: 0;
+			padding: 0 24px;
+		}
+
+		svg {
+			fill: white;
+			margin: 0 !important;
+
+			&.newspack-icon {
+				flex: 0 0 36px;
+				margin-bottom: -1px !important;
+			}
+
+			&:not( .newspack-icon ) {
+				background: $primary-500;
+				left: 50%;
+				margin: -18px 0 0 -18px !important;
+				opacity: 0;
+				position: absolute;
+				top: 50%;
+				transition: opacity 125ms ease-in-out;
+			}
+		}
+
+		a {
+			position: relative;
+
+			&:hover {
+				svg {
+					opacity: 1;
+				}
+			}
+		}
+
+		a:focus-visible {
+			outline: none !important;
+
+			&::before {
+				border: 2px solid white;
+				border-radius: 3px;
+				bottom: 5px;
+				content: '';
+				display: block;
+				left: 6px;
+				position: absolute;
+				right: 6px;
+				top: 6px;
+			}
+		}
+	}
+
+	&__content {
+		color: $gray-700;
+		font-size: 14px;
+		line-height: 24px;
+		margin: 0 auto;
+		max-width: 1208px;
+		padding: 0 16px;
+
+		@media screen and ( min-width: 744px ) {
+			padding: 32px 84px;
+		}
+
+		// Typography
+
+		h1,
+		h2,
+		h3,
+		p {
+			line-height: 24px;
+			margin: 32px 0;
+			padding: 0;
+		}
+
+		h1 {
+			color: $gray-900;
+			font-size: 21px;
+			font-weight: bold;
+			line-height: 32px;
+		}
+
+		h2 {
+			color: $gray-900;
+			font-size: 17px;
+			font-weight: bold;
+		}
+
+		h3 {
+			color: $gray-900;
+			font-size: 14px;
+			font-weight: bold;
+		}
+
+		p {
+			font-size: 14px;
+
+			&.is-dark {
+				color: $gray-900;
+			}
+		}
+
+		strong {
+			font-weight: bold;
+		}
+
+		small {
+			font-size: 12px;
+			line-height: 16px;
+		}
+
+		// Links
+
+		a {
+			color: $primary-500;
+
+			&:active,
+			&:focus,
+			&:hover {
+				color: $primary-600;
+				text-decoration: none;
+			}
+
+			&:focus {
+				box-shadow: none;
+				outline: 2px solid $primary-500;
+				outline-offset: 2px;
+			}
+		}
+	}
+
+	&__above-header {
+		border-radius: 0;
+		margin: 0;
+	}
+}

package/dist/esm/accordion/index.js

@@ -0,0 +1,38 @@
+/**
+ * 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

@@ -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/dist/esm/action-card/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**
  * Action Card
  */
@@ -9,34 +8,40 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 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
  */
-
 import { Button, Card, Grid, Handoff, Notice, Waiting } from '../';
 import './style.scss';
+
 /**
  * External dependencies
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 class ActionCard extends Component {
   constructor() {
     super(...arguments);
-
-    _defineProperty(this, "backgroundImageStyles", url => {
-      return url ? {
-        backgroundImage: `url(${url})`
-      } : {};
+    _defineProperty(this, "state", {
+      expanded: false
     });
   }
+  /**
+   * 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.
    */
   render() {
     const {
@@ -70,10 +75,20 @@ class ActionCard extends Component {
       toggleChecked,
       toggleOnChange,
       hasGreyHeader,
-      isPending
+      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', hasChildren && 'newspack-card--has-children', indent && 'newspack-card--indent', isSmall && 'is-small', isMedium && 'is-medium', className);
+    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'
@@ -96,7 +111,7 @@ class ActionCard extends Component {
             href: imageLink,
             children: _jsx("div", {
               className: "newspack-action-card__image",
-              style: this.backgroundImageStyles(image)
+              style: backgroundImageStyles(image)
             })
           })
         }), checkbox && !toggleOnChange && _jsx("div", {
@@ -114,13 +129,19 @@ class ActionCard extends Component {
             gutter: 8,
             noMargin: true,
             children: [_jsxs("h2", {
-              children: [_jsx("span", {
+              children: [_jsxs("span", {
                 className: "newspack-action-card__title",
                 ...titleProps,
-                children: titleLink ? _jsx("a", {
+                children: [titleLink && _jsx("a", {
                   href: titleLink,
                   children: title
-                }) : title
+                }), !titleLink && expandable && _jsx(Button, {
+                  isLink: true,
+                  onClick: () => this.setState({
+                    expanded: !expanded
+                  }),
+                  children: title
+                }), !titleLink && !expandable && title]
               }), badges?.length && badges.map((badgeText, i) => _jsx("span", {
                 className: "newspack-action-card__badge",
                 children: badgeText
@@ -129,7 +150,7 @@ class ActionCard extends Component {
               children: [typeof description === 'string' && description, typeof description === 'function' && description()]
             })]
           })
-        }), (actionText || isDisplayingSecondaryAction || actionContent) && _jsxs("div", {
+        }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && _jsxs("div", {
           className: "newspack-action-card__region newspack-action-card__region-right",
           children: [actionContent && actionContent, actionText && (handoff ? _jsx(Handoff, {
             plugin: handoff,
@@ -138,6 +159,7 @@ class ActionCard extends Component {
             isLink: true,
             children: actionText
           }) : onClick || hasInternalLink ? _jsx(Button, {
+            disabled: disabled,
             isLink: true,
             href: href,
             onClick: onClick,
@@ -159,6 +181,15 @@ class ActionCard extends Component {
             isDestructive: secondaryDestructive,
             children: secondaryActionText
           })]
+        }), expandable && _jsx(Button, {
+          onClick: () => this.setState({
+            expanded: !expanded
+          }),
+          children: _jsx(Icon, {
+            icon: expanded ? chevronUp : chevronDown,
+            height: 24,
+            width: 24
+          })
         })]
       }), notification && _jsxs("div", {
         className: "newspack-action-card__notification newspack-action-card__region-children",
@@ -178,15 +209,13 @@ class ActionCard extends Component {
           isWarning: true,
           rawHTML: notificationHTML
         })]
-      }), children && _jsx("div", {
+      }), children && (expandable && expanded || !expandable) && _jsx("div", {
         className: "newspack-action-card__region-children",
         children: children
       })]
     });
   }
-
 }
-
 ActionCard.defaultProps = {
   toggleChecked: false
 };