newspack-components 3.0.0 → 4.0.0

package/dist/esm/wizard/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies.
  */
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category } from '@wordpress/icons';
 
@@ -17,9 +17,8 @@ import { category } from '@wordpress/icons';
 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';
 import WizardError from './components/WizardError';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 registerStore();
 const {
   HashRouter,
@@ -27,22 +26,45 @@ const {
   Route,
   Switch
 } = Router;
+
+/**
+ * @typedef  {Object}     WizardProps
+ * @property {string}     headerText                The header text.
+ * @property {string}     [subHeaderText]           The sub-header text, optional.
+ * @property {string}     [apiSlug]                 The API slug, optional.
+ * @property {string}     [className]               CSS classes, optional.
+ * @property {any[]}      sections                  Array of sections.
+ * @property {boolean}    [hasSimpleFooter]         Indicates if a simple footer is used, optional.
+ * @property {() => void} [renderAboveSections]     Function to render content above sections, optional.
+ * @property {string[]}   [requiredPlugins]         Array of required plugin strings, optional.
+ * @property {boolean}    [isInitialFetchTriggered] Indicates if the initial fetch should be triggered, optional.
+ */
+
+/**
+ * Wizard Component
+ *
+ * Provides a tabbed UI with history.
+ *
+ * @param {WizardProps} props
+ * @return {JSX.Element} Wizard component
+ */
 const Wizard = ({
   sections = [],
-  apiSlug,
   headerText,
+  apiSlug,
   subHeaderText,
   hasSimpleFooter,
   className,
   renderAboveSections,
-  requiredPlugins = []
-}) => {
+  requiredPlugins = [],
+  isInitialFetchTriggered = true
+}, 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.
-  useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug));
+  useSelect(select => isInitialFetchTriggered && select(WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug));
   let displayedSections = sections.filter(section => !section.isHidden);
   const [pluginRequirementsSatisfied, setPluginRequirementsSatisfied] = useState(requiredPlugins.length === 0);
   if (!pluginRequirementsSatisfied) {
@@ -57,7 +79,9 @@ const Wizard = ({
       })
     }];
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  const urlWithoutHash = window.location.href.split('#')[0];
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
     children: [/*#__PURE__*/_jsx("div", {
       className: classnames(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
         'newspack-wizard__is-loading-quiet': isQuietLoading
@@ -72,7 +96,7 @@ const Wizard = ({
             className: "newspack-wizard__header__inner",
             children: /*#__PURE__*/_jsxs("div", {
               className: "newspack-wizard__title",
-              children: [/*#__PURE__*/_jsx(Button, {
+              children: [newspack_urls.dashboard !== urlWithoutHash ? /*#__PURE__*/_jsx(Button, {
                 isLink: true,
                 href: newspack_urls.dashboard,
                 label: __('Return to Dashboard', 'newspack-plugin'),
@@ -82,6 +106,8 @@ const Wizard = ({
                 children: /*#__PURE__*/_jsx(NewspackIcon, {
                   size: 36
                 })
+              }) : /*#__PURE__*/_jsx(NewspackIcon, {
+                size: 36
               }), /*#__PURE__*/_jsxs("div", {
                 children: [headerText && /*#__PURE__*/_jsx("h2", {
                   children: headerText
@@ -96,11 +122,13 @@ const Wizard = ({
           children: /*#__PURE__*/_jsx(WizardError, {})
         }), /*#__PURE__*/_jsx(HandoffMessage, {}), /*#__PURE__*/_jsxs(Switch, {
           children: [displayedSections.map((section, index) => {
+            var _section$exact;
             const SectionComponent = section.render;
             return /*#__PURE__*/_jsx(Route, {
+              exact: (_section$exact = section.exact) !== null && _section$exact !== void 0 ? _section$exact : false,
               path: section.path,
               children: /*#__PURE__*/_jsxs("div", {
-                className: classnames('newspack-wizard newspack-wizard__content', className),
+                className: classnames('newspack-wizard__content', className),
                 children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, /*#__PURE__*/_jsx(SectionComponent, {})]
               })
             }, index);
@@ -114,6 +142,4 @@ const Wizard = ({
     })]
   });
 };
-Wizard.useWizardData = useWizardData;
-Wizard.STORE_NAMESPACE = WIZARD_STORE_NAMESPACE;
-export default Wizard;
+export default forwardRef(Wizard);

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

@@ -13,7 +13,7 @@ import { createReduxStore, register, dispatch, select } from '@wordpress/data';
 import { createAction } from './utils.js';
 export const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 const DEFAULT_STATE = {
-  isLoading: true,
+  isLoading: false,
   isQuietLoading: false,
   apiData: {},
   error: null
@@ -112,6 +112,10 @@ const selectors = {
   isLoading: state => state.isLoading,
   isQuietLoading: state => state.isQuietLoading,
   getWizardAPIData: (state, slug) => state.apiData[slug] || {},
+  getWizardData: (state, slug) => {
+    var _state$apiData$slug;
+    return (_state$apiData$slug = state.apiData[slug]) !== null && _state$apiData$slug !== void 0 ? _state$apiData$slug : {};
+  },
   getError: state => state.error
 };
 const store = createReduxStore(WIZARD_STORE_NAMESPACE, {
@@ -120,17 +124,21 @@ const store = createReduxStore(WIZARD_STORE_NAMESPACE, {
   selectors,
   controls: {
     FETCH_FROM_API: action => {
+      const {
+        isLocalError = false,
+        isQuietFetch = false
+      } = action.payload;
       dispatch(WIZARD_STORE_NAMESPACE).startLoadingData({
-        isQuietLoading: Boolean(action.payload.isQuietFetch)
+        isQuietLoading: Boolean(isQuietFetch)
       });
       return apiFetch(action.payload).then(data => {
         dispatch(WIZARD_STORE_NAMESPACE).setError(null);
         return data;
       }).catch(error => {
+        if (isLocalError) {
+          throw error;
+        }
         dispatch(WIZARD_STORE_NAMESPACE).setError(error);
-        return {
-          error
-        };
       }).finally(result => {
         dispatch(WIZARD_STORE_NAMESPACE).finishLoadingData();
         return result;
@@ -152,4 +160,4 @@ const store = createReduxStore(WIZARD_STORE_NAMESPACE, {
     }
   }
 });
-export default (() => register(store));
+export default () => register(store);

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

@@ -11,4 +11,6 @@ export const createAction = type => payload => ({
   type,
   payload
 });
-export const useWizardData = (wizardName, defaultValue = {}) => useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;
+export const useWizardData = (wizardName, defaultValue = {}) => {
+  return useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(wizardName)) || defaultValue;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "3.0.0",
+	"version": "4.0.0",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -58,4 +58,4 @@
 		"prepublishOnly": "npm run clean && npm run compile && node copy-styles.js",
 		"postpublish": "npm run clean"
 	}
-}
+}

package/src/accordion/index.js

@@ -20,9 +20,7 @@ import './style.scss';
 const Accordion = ( { children, title } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 	return (
-		<details
-			className={ classNames( 'newspack-accordion', { 'newspack-accordion--is-open': isOpen } ) }
-		>
+		<details className={ classNames( 'newspack-accordion', { 'newspack-accordion--is-open': isOpen } ) }>
 			<summary onClick={ () => setIsOpen( ! isOpen ) }>
 				{ title }
 				<Icon className="newspack-accordion__icon" icon={ chevronRight } size={ 24 } />

package/src/action-card/action-card.d.ts

@@ -0,0 +1,40 @@
+export interface ActionCardProps {
+	id?: string | number;
+	title?: string | React.ReactNode;
+	titleLink?: string;
+	href?: string;
+	description?: string | React.ReactNode;
+	actionText?: React.ReactNode | string | null;
+	badge?: string;
+	className?: string;
+	indent?: string;
+	notification?: string | Error | null;
+	notificationLevel?: 'error' | 'warning' | 'info';
+	isMedium?: boolean;
+	disabled?: boolean | string;
+	hasGreyHeader?: boolean;
+	toggleChecked?: boolean;
+	toggleOnChange?: ( a: boolean ) => void;
+	actionContent?: boolean | React.ReactNode | null;
+	error?: Error | string | null;
+	handoff?: string | null;
+	isErrorStatus?: boolean;
+	checkbox?: 'checked' | 'unchecked';
+	isChecked?: boolean;
+	children?: boolean | React.ReactNode;
+	isSmall?: boolean;
+	editLink?: string;
+	simple?: boolean;
+	secondaryActionText?: string;
+	onSecondaryActionClick?: () => void;
+	secondaryDestructive?: boolean;
+	hasWhiteHeader?: boolean;
+	noBorder?: boolean;
+	noMargin?: boolean;
+	collapse?: boolean;
+	expandable?: boolean;
+	draggable?: boolean;
+	dragIndex?: number;
+	onDragCallback?: ( index: number ) => void;
+	dragWrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
+}