newspack-components 4.1.0 → 4.3.0

package/dist/cjs/wizard/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
+var _components = require("@wordpress/components");
 var _data = require("@wordpress/data");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
@@ -13,6 +14,7 @@ var _icons = require("@wordpress/icons");
 var _ = require("../");
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
 var _store = _interopRequireWildcard(require("./store"));
+var _WizardSnackbar = _interopRequireDefault(require("./components/WizardSnackbar"));
 var _WizardError = _interopRequireDefault(require("./components/WizardError"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -33,9 +35,24 @@ const {
   HashRouter,
   Redirect,
   Route,
-  Switch
+  Switch,
+  useLocation
 } = _router.default;
 
+/**
+ * Reset the header data when a new section is rendered.
+ */
+const ResetHeaderData = () => {
+  const location = useLocation();
+  const {
+    resetHeaderData
+  } = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE);
+  (0, _element.useEffect)(() => {
+    resetHeaderData();
+  }, [location.pathname, resetHeaderData]);
+  return null;
+};
+
 /**
  * @typedef  {Object}     WizardProps
  * @property {string}     headerText                The header text.
@@ -61,15 +78,31 @@ const Wizard = ({
   sections = [],
   headerText,
   apiSlug,
+  sharedProps = {},
   subHeaderText,
   hasSimpleFooter,
   className,
   renderAboveSections,
   requiredPlugins = [],
-  isInitialFetchTriggered = true
+  isInitialFetchTriggered = true,
+  fixedHeader = false
 }, 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());
+  const headerData = (0, _data.useSelect)(select => select(_store.WIZARD_STORE_NAMESPACE).getHeaderData());
+  const notices = (0, _data.useSelect)(select => select(_store.WIZARD_STORE_NAMESPACE).getNotices());
+  const {
+    actions,
+    backNav,
+    badges,
+    sectionDescription,
+    sectionName,
+    sectionTitle,
+    sectionPrimaryAction,
+    sectionSecondaryAction
+  } = headerData;
+  const mainActions = actions?.filter(action => action.type === 'primary' || action.type === 'secondary');
+  const moreActions = actions?.filter(action => action.type === 'more');
 
   // Trigger initial data fetch. Some sections might not use the wizard data,
   // but for consistency, fetching is triggered regardless of the section.
@@ -91,17 +124,18 @@ const Wizard = ({
   const urlWithoutHash = window.location.href.split('#')[0];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
-        'newspack-wizard__is-loading-quiet': isQuietLoading
+        'newspack-wizard__is-loading-quiet': isQuietLoading,
+        'newspack-wizard__fixed-header': fixedHeader
       }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(HashRouter, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HashRouter, {
         hashType: "slash",
         children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
           debugMode: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "bg-white",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-wizard__header",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "newspack-wizard__header__inner",
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "newspack-wizard__title",
@@ -118,34 +152,81 @@ const Wizard = ({
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewspackIcon, {
                 size: 36
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                children: [headerText && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-                  children: headerText
+                children: [headerText && /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+                  className: "newspack-wizard__header__title",
+                  children: [headerText, sectionName && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    className: "newspack-wizard__header__section",
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "newspack-wizard__header__section__separator",
+                      children: " / "
+                    }), " ", sectionName]
+                  })]
                 }), subHeaderText && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   children: subHeaderText
                 })]
               })]
             })
-          })
+          }), actions?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "newspack-wizard__header__actions",
+            children: [mainActions.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+              icon: action.icon,
+              variant: action.type,
+              onClick: action.action,
+              disabled: action.disabled || false,
+              isDestructive: action.destructive || false,
+              children: action.label
+            }, index)), moreActions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+              icon: _icons.moreVertical,
+              label: (0, _i18n.__)('More', 'newspack-plugin'),
+              children: () => moreActions.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+                icon: action.icon,
+                onClick: action.action,
+                disabled: action.disabled || false,
+                isDestructive: action.destructive || false,
+                children: action.label
+              }, index))
+            })]
+          })]
         }), displayedSections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
           items: displayedSections,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError.default, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
-          children: [displayedSections.map((section, index) => {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), sections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResetHeaderData, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
+          children: [sections.map((section, index) => {
             var _section$exact;
             const SectionComponent = section.render;
+            const sectionProps = section.props || {};
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(Route, {
               exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
               path: section.path,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              render: routerProps => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: (0, _classnames.default)('newspack-wizard__content', className),
-                children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionComponent, {})]
+                children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (sectionTitle || section.title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SectionHeader, {
+                  className: "newspack-wizard__section-header",
+                  backNav: backNav || section.backNav,
+                  title: sectionTitle || section.title,
+                  description: sectionDescription || section.description,
+                  badges: badges || section.badges,
+                  primaryAction: sectionPrimaryAction || section.primaryAction,
+                  secondaryAction: sectionSecondaryAction || section.secondaryAction,
+                  heading: 1,
+                  noMargin: true
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionComponent, {
+                  ...routerProps,
+                  ...sectionProps,
+                  ...sharedProps
+                })]
               })
             }, index);
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Redirect, {
             to: displayedSections[0].path
           })]
         })]
-      })
+      }), notices?.length > 0 && notices.map((notice, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSnackbar.default, {
+        type: notice.type,
+        id: notice.id,
+        actions: notice.actions,
+        children: notice.message
+      }, notice.id || index))]
     }), !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Footer, {
       simple: hasSimpleFooter
     })]

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

@@ -21,9 +21,18 @@ var _utils = require("./utils.js");
 
 const WIZARD_STORE_NAMESPACE = exports.WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 const DEFAULT_STATE = {
+  headerData: {
+    actions: [],
+    backNav: '',
+    badges: [],
+    sectionDescription: '',
+    sectionName: '',
+    sectionTitle: ''
+  },
   isLoading: false,
   isQuietLoading: false,
   apiData: {},
+  notices: [],
   error: null
 };
 
@@ -38,6 +47,21 @@ const reducer = (state = DEFAULT_STATE, {
   payload = {}
 }) => {
   switch (type) {
+    case 'SET_HEADER_DATA':
+      return {
+        ...state,
+        headerData: {
+          ...state.headerData,
+          ...payload
+        }
+      };
+    case 'RESET_HEADER_DATA':
+      return {
+        ...state,
+        headerData: {
+          ...DEFAULT_STATE.headerData
+        }
+      };
     case 'START_LOADING_DATA':
       if (payload.isQuietLoading) {
         return {
@@ -59,22 +83,42 @@ const reducer = (state = DEFAULT_STATE, {
       return (0, _set.default)(clone(state), ['apiData', payload.slug], payload.data);
     case 'UPDATE_WIZARD_SETTINGS':
       return (0, _set.default)(clone(state), ['apiData', payload.slug, ...payload.path], payload.value);
+    case 'ADD_NOTICE':
+      return {
+        ...state,
+        notices: [...state.notices, payload]
+      };
+    case 'REMOVE_NOTICE':
+      return {
+        ...state,
+        notices: state.notices.filter(notice => notice.id !== payload)
+      };
     case 'SET_ERROR':
       return {
         ...state,
         error: payload
       };
+    case 'RESET_NOTICES':
+      return {
+        ...state,
+        notices: DEFAULT_STATE.notices
+      };
     default:
       return state;
   }
 };
 const actions = {
   // Regular actions.
+  setHeaderData: (0, _utils.createAction)('SET_HEADER_DATA'),
+  resetHeaderData: (0, _utils.createAction)('RESET_HEADER_DATA'),
   startLoadingData: (0, _utils.createAction)('START_LOADING_DATA'),
   finishLoadingData: (0, _utils.createAction)('FINISH_LOADING_DATA'),
   fetchFromAPI: (0, _utils.createAction)('FETCH_FROM_API'),
   setAPIDataForWizard: (0, _utils.createAction)('SET_API_DATA'),
   updateWizardSettings: (0, _utils.createAction)('UPDATE_WIZARD_SETTINGS'),
+  addNotice: (0, _utils.createAction)('ADD_NOTICE'),
+  removeNotice: (0, _utils.createAction)('REMOVE_NOTICE'),
+  resetNotices: (0, _utils.createAction)('RESET_NOTICES'),
   setError: (0, _utils.createAction)('SET_ERROR'),
   // Async actions. These will not show up in Redux devtools.
   *saveWizardSettings({
@@ -117,6 +161,7 @@ const actions = {
   }
 };
 const selectors = {
+  getHeaderData: state => state.headerData,
   isLoading: state => state.isLoading,
   isQuietLoading: state => state.isQuietLoading,
   getWizardAPIData: (state, slug) => state.apiData[slug] || {},
@@ -124,6 +169,7 @@ const selectors = {
     var _state$apiData$slug;
     return (_state$apiData$slug = state.apiData[slug]) !== null && _state$apiData$slug !== void 0 ? _state$apiData$slug : {};
   },
+  getNotices: state => state.notices,
   getError: state => state.error
 };
 const store = (0, _data.createReduxStore)(WIZARD_STORE_NAMESPACE, {

package/dist/esm/action-card/index.js

@@ -29,13 +29,14 @@ import classnames from 'classnames';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ActionCard = ({
   badge,
-  badgeLevel = 'info',
+  badgeLevel,
   className,
   checkbox,
   children,
   collapse,
   disabled,
   title,
+  heading = 2,
   description,
   handoff,
   editLink,
@@ -60,11 +61,13 @@ const ActionCard = ({
   titleLink,
   toggleChecked = false,
   toggleOnChange,
+  togglePosition = 'leading',
   hasGreyHeader,
   hasWhiteHeader,
   noBorder,
   isPending,
   expandable = false,
+  isExpanded,
   isButtonEnabled = false,
   // Draggable props. All are required to enable drag sorting.
   draggable = false,
@@ -72,10 +75,15 @@ const ActionCard = ({
   dragWrapperRef,
   onDragCallback
 }) => {
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(Boolean(isExpanded));
   const [dragging, setDragging] = useState(false);
   const [targetIndex, setTargetIndex] = useState(null);
   const [dragRef, setDragRef] = useState(null);
+  useEffect(() => {
+    if (typeof isExpanded === 'boolean') {
+      setExpanded(isExpanded);
+    }
+  }, [isExpanded]);
   useEffect(() => {
     if (dragWrapperRef && !dragRef) {
       setDragRef(dragWrapperRef);
@@ -97,16 +105,19 @@ const ActionCard = ({
     onClick: () => toggleOnChange(!toggleChecked),
     tabIndex: '0'
   } : {};
+  const togglePositionClass = togglePosition === 'trailing' ? 'is-toggle-trailing' : 'is-toggle-leading';
   const hasInternalLink = href && href.indexOf('http') !== 0;
   const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
   const badges = !Array.isArray(badge) && badge ? [badge] : badge;
-  const Component = () => /*#__PURE__*/_jsxs(_Fragment, {
+  const HeadingTag = `h${heading}`;
+  const cardContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       className: "newspack-action-card__region newspack-action-card__region-top",
       children: [toggleOnChange && /*#__PURE__*/_jsx(ToggleControl, {
         checked: toggleChecked,
         onChange: toggleOnChange,
-        disabled: disabled
+        disabled: disabled,
+        className: togglePositionClass
       }), image && !toggleOnChange && /*#__PURE__*/_jsx("div", {
         className: "newspack-action-card__region newspack-action-card__region-left",
         children: /*#__PURE__*/_jsx("a", {
@@ -130,7 +141,7 @@ const ActionCard = ({
           columns: 1,
           gutter: 8,
           noMargin: true,
-          children: [/*#__PURE__*/_jsxs("h2", {
+          children: [/*#__PURE__*/_jsxs(HeadingTag, {
             children: [/*#__PURE__*/_jsxs("span", {
               className: "newspack-action-card__title",
               ...titleProps,
@@ -207,10 +218,10 @@ const ActionCard = ({
         isWarning: true,
         rawHTML: notificationHTML
       })]
-    }), children && (expandable && expanded || !expandable) && /*#__PURE__*/_jsx("div", {
+    }), children && (expandable && expanded || !expandable) ? /*#__PURE__*/_jsx("div", {
       className: "newspack-action-card__region-children",
       children: children
-    })]
+    }) : null]
   });
   if (draggable && dragRef?.current && typeof dragIndex === 'number' && onDragCallback && id) {
     let wrapperRect = dragRef.current.getBoundingClientRect();
@@ -281,9 +292,7 @@ const ActionCard = ({
               onDragStart: onDraggableStart,
               onDragEnd: onDraggableEnd,
               children: /*#__PURE__*/_jsx(Icon, {
-                icon: dragHandle,
-                height: 18,
-                width: 18
+                icon: dragHandle
               })
             }), /*#__PURE__*/_jsxs("div", {
               className: "movers",
@@ -299,7 +308,7 @@ const ActionCard = ({
                 label: __('Move one position down', 'newspack-plugin')
               })]
             })]
-          }), /*#__PURE__*/_jsx(Component, {})]
+          }), cardContent]
         })
       })
     });
@@ -309,7 +318,7 @@ const ActionCard = ({
     onClick: simple && onClick,
     id: id !== null && id !== void 0 ? id : null,
     noBorder: noBorder,
-    children: /*#__PURE__*/_jsx(Component, {})
+    children: cardContent
   });
 };
 export default ActionCard;

package/dist/esm/action-card/style.scss

@@ -55,7 +55,7 @@
 			.components-toggle-control {
 				margin-bottom: 16px;
 
-				@media screen and ( min-width: 744px ) {
+				@media screen and (min-width: 744px) {
 					margin-bottom: 0;
 					margin-right: 16px;
 				}
@@ -77,10 +77,6 @@
 			padding: 0 4px;
 		}
 
-		& + & {
-			margin-top: -16px;
-		}
-
 		&.mv0 {
 			border-left-color: wp-colors.$gray-300;
 			border-radius: 0;
@@ -122,7 +118,7 @@
 			.components-toggle-control {
 				margin-bottom: 16px;
 
-				@media screen and ( min-width: 744px ) {
+				@media screen and (min-width: 744px) {
 					margin-bottom: 0;
 					margin-right: 16px;
 				}
@@ -132,7 +128,7 @@
 		.newspack-action-card__region-left {
 			margin-bottom: 16px;
 
-			@media screen and ( min-width: 744px ) {
+			@media screen and (min-width: 744px) {
 				margin-bottom: 0;
 				margin-right: 16px;
 			}
@@ -252,7 +248,7 @@
 		padding: 24px;
 		display: block;
 
-		@media screen and ( min-width: 744px ) {
+		@media screen and (min-width: 744px) {
 			display: flex;
 		}
 
@@ -261,9 +257,19 @@
 			margin-bottom: 24px;
 			margin-top: 0;
 
-			@media screen and ( min-width: 744px ) {
+			@media screen and (min-width: 744px) {
 				margin-bottom: 0;
 				margin-right: 24px;
+
+				&.is-toggle-trailing {
+					margin-left: 24px;
+					margin-right: 0;
+					order: 999;
+				}
+			}
+
+			label {
+				display: none;
 			}
 
 			.components-base-control__field {
@@ -308,7 +314,7 @@
 	.newspack-action-card__region-left {
 		margin-bottom: 24px;
 
-		@media screen and ( min-width: 744px ) {
+		@media screen and (min-width: 744px) {
 			margin-bottom: 0;
 			margin-right: 24px;
 		}
@@ -335,7 +341,7 @@
 		margin-top: 24px;
 		text-align: right;
 
-		@media screen and ( min-width: 744px ) {
+		@media screen and (min-width: 744px) {
 			align-items: flex-end;
 			flex-direction: column;
 			margin-left: 24px;
@@ -437,13 +443,21 @@
 			text-decoration: inherit;
 		}
 
-		.newspack-action-card__region-children {
-			border-top: 1px solid wp-colors.$gray-100;
+		> .newspack-action-card__region-children {
+			border-top: 1px solid wp-colors.$gray-300;
 			padding-top: 24px;
 
 			+ .newspack-action-card__region-children {
 				border-top: none;
 			}
+
+			> * + * {
+				margin-top: 24px !important;
+			}
+
+			.newspack-action-card__region-children:has(> div:not(:empty)) {
+				margin-top: 16px;
+			}
 		}
 
 		&.is-medium .newspack-action-card__region-children {
@@ -473,6 +487,11 @@
 			margin-left: 8px;
 		}
 	}
+
+	hr:not(.newspack-divider) {
+		background: wp-colors.$gray-100;
+		margin: 0;
+	}
 }
 
 .newspack-card {
@@ -557,7 +576,6 @@
 		}
 
 		.newspack-action-card__region-top {
-			flex: 1 1 auto;
 			padding: 8px 16px 8px 0 !important;
 			flex: 1;
 		}

package/dist/esm/autocomplete-tokenfield/index.js

@@ -137,7 +137,7 @@ class AutocompleteTokenField extends Component {
         Object.keys(validValues).forEach(key => {
           if (validValues[key] === label) {
             // Preserve numeric or string type of values. Object.keys will convert numbers to strings.
-            const value = isNaN(parseInt(key)) ? key.toString() : parseInt(key);
+            const value = /^\d+$/.test(key.toString()) ? parseInt(key) : key.toString();
             acc.push({
               value,
               label
@@ -147,7 +147,7 @@ class AutocompleteTokenField extends Component {
         return acc;
       }, []);
     }
-    return labels.map(label => Object.keys(validValues).map(key => isNaN(parseInt(key)) ? key.toString() : parseInt(key)).find(key => validValues[key] === label));
+    return labels.map(label => Object.keys(validValues).map(key => /^\d+$/.test(key.toString()) ? parseInt(key) : key.toString()).find(key => validValues[key] === label));
   }
 
   /**