newspack-components 3.1.0 → 4.0.0

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

@@ -21,7 +21,7 @@ var _utils = require("./utils.js");
 
 const WIZARD_STORE_NAMESPACE = exports.WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 const DEFAULT_STATE = {
-  isLoading: true,
+  isLoading: false,
   isQuietLoading: false,
   apiData: {},
   error: null
@@ -120,6 +120,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 = (0, _data.createReduxStore)(WIZARD_STORE_NAMESPACE, {
@@ -128,17 +132,21 @@ const store = (0, _data.createReduxStore)(WIZARD_STORE_NAMESPACE, {
   selectors,
   controls: {
     FETCH_FROM_API: action => {
+      const {
+        isLocalError = false,
+        isQuietFetch = false
+      } = action.payload;
       (0, _data.dispatch)(WIZARD_STORE_NAMESPACE).startLoadingData({
-        isQuietLoading: Boolean(action.payload.isQuietFetch)
+        isQuietLoading: Boolean(isQuietFetch)
       });
       return (0, _apiFetch.default)(action.payload).then(data => {
         (0, _data.dispatch)(WIZARD_STORE_NAMESPACE).setError(null);
         return data;
       }).catch(error => {
+        if (isLocalError) {
+          throw error;
+        }
         (0, _data.dispatch)(WIZARD_STORE_NAMESPACE).setError(error);
-        return {
-          error
-        };
       }).finally(result => {
         (0, _data.dispatch)(WIZARD_STORE_NAMESPACE).finishLoadingData();
         return result;

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

@@ -19,5 +19,7 @@ const createAction = type => payload => ({
   payload
 });
 exports.createAction = createAction;
-const useWizardData = (wizardName, defaultValue = {}) => (0, _data.useSelect)(select => select(_.WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;
+const useWizardData = (wizardName, defaultValue = {}) => {
+  return (0, _data.useSelect)(select => select(_.WIZARD_STORE_NAMESPACE).getWizardAPIData(wizardName)) || defaultValue;
+};
 exports.useWizardData = useWizardData;

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

@@ -0,0 +1 @@
+export {};

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

@@ -5,215 +5,312 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { ExternalLink, ToggleControl } from '@wordpress/components';
-import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
+import { Draggable, ExternalLink, ToggleControl } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, check, chevronDown, chevronUp, dragHandle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { Button, Card, Grid, Handoff, Notice, Waiting } from '../';
+import { ActionCardProps } from './action-card.d.ts';
 import './style.scss';
 
 /**
  * External dependencies
  */
 import classnames from 'classnames';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class ActionCard extends Component {
-  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
-      });
+/**
+ * ActionCard component
+ * @param {ActionCardProps} props Component props.
+ * @return {JSX.Element} ActionCard component.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ActionCard = ({
+  badge,
+  badgeLevel = 'info',
+  className,
+  checkbox,
+  children,
+  collapse,
+  disabled,
+  title,
+  description,
+  handoff,
+  editLink,
+  href,
+  notification,
+  notificationLevel,
+  notificationHTML,
+  actionContent,
+  actionText,
+  secondaryActionText,
+  secondaryDestructive,
+  id,
+  image,
+  imageLink,
+  indent,
+  isSmall,
+  isMedium,
+  simple,
+  onClick,
+  onSecondaryActionClick,
+  isWaiting,
+  titleLink,
+  toggleChecked = false,
+  toggleOnChange,
+  hasGreyHeader,
+  hasWhiteHeader,
+  noBorder,
+  isPending,
+  expandable = false,
+  isButtonEnabled = false,
+  // Draggable props. All are required to enable drag sorting.
+  draggable = false,
+  dragIndex,
+  dragWrapperRef,
+  onDragCallback
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const [targetIndex, setTargetIndex] = useState(null);
+  const [dragRef, setDragRef] = useState(null);
+  useEffect(() => {
+    if (dragWrapperRef && !dragRef) {
+      setDragRef(dragWrapperRef);
     }
-  }
-
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      badge,
-      className,
-      checkbox,
-      children,
-      disabled,
-      title,
-      description,
-      handoff,
-      editLink,
-      href,
-      notification,
-      notificationLevel,
-      notificationHTML,
-      actionContent,
-      actionText,
-      secondaryActionText,
-      secondaryDestructive,
-      image,
-      imageLink,
-      indent,
-      isSmall,
-      isMedium,
-      simple,
-      onClick,
-      onSecondaryActionClick,
-      isWaiting,
-      titleLink,
-      toggleChecked,
-      toggleOnChange,
-      hasGreyHeader,
-      hasWhiteHeader,
-      isPending,
-      expandable = false,
-      isButtonEnabled = 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'
+  }, [dragWrapperRef?.current]);
+  useEffect(() => {
+    if (collapse && expanded) {
+      setExpanded(false);
+    }
+  }, [collapse]);
+  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', draggable && 'is-draggable', actionContent && 'has-action-content', className);
+  const backgroundImageStyles = url => {
+    return url ? {
+      backgroundImage: `url(${url})`
     } : {};
-    const hasInternalLink = href && href.indexOf('http') !== 0;
-    const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
-    const badges = !Array.isArray(badge) && badge ? [badge] : badge;
-    return /*#__PURE__*/_jsxs(Card, {
-      className: classes,
-      onClick: simple && onClick,
-      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
-        }), image && !toggleOnChange && /*#__PURE__*/_jsx("div", {
-          className: "newspack-action-card__region newspack-action-card__region-left",
-          children: /*#__PURE__*/_jsx("a", {
-            href: imageLink,
-            children: /*#__PURE__*/_jsx("div", {
-              className: "newspack-action-card__image",
-              style: backgroundImageStyles(image)
-            })
+  };
+  const titleProps = toggleOnChange && !titleLink && !disabled ? {
+    onClick: () => toggleOnChange(!toggleChecked),
+    tabIndex: '0'
+  } : {};
+  const hasInternalLink = href && href.indexOf('http') !== 0;
+  const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
+  const badges = !Array.isArray(badge) && badge ? [badge] : badge;
+  const Component = () => /*#__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
+      }), image && !toggleOnChange && /*#__PURE__*/_jsx("div", {
+        className: "newspack-action-card__region newspack-action-card__region-left",
+        children: /*#__PURE__*/_jsx("a", {
+          href: imageLink,
+          children: /*#__PURE__*/_jsx("div", {
+            className: "newspack-action-card__image",
+            style: backgroundImageStyles(image)
           })
-        }), checkbox && !toggleOnChange && /*#__PURE__*/_jsx("div", {
-          className: "newspack-action-card__region newspack-action-card__region-left",
-          children: /*#__PURE__*/_jsx("span", {
-            className: classnames('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
-            children: 'checked' === checkbox && /*#__PURE__*/_jsx(Icon, {
-              icon: check
-            })
+        })
+      }), checkbox && !toggleOnChange && /*#__PURE__*/_jsx("div", {
+        className: "newspack-action-card__region newspack-action-card__region-left",
+        children: /*#__PURE__*/_jsx("span", {
+          className: classnames('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
+          children: 'checked' === checkbox && /*#__PURE__*/_jsx(Icon, {
+            icon: check
           })
-        }), /*#__PURE__*/_jsx("div", {
-          className: "newspack-action-card__region newspack-action-card__region-center",
-          children: /*#__PURE__*/_jsxs(Grid, {
-            columns: 1,
-            gutter: 8,
-            noMargin: true,
-            children: [/*#__PURE__*/_jsxs("h2", {
-              children: [/*#__PURE__*/_jsxs("span", {
-                className: "newspack-action-card__title",
-                ...titleProps,
-                children: [titleLink && /*#__PURE__*/_jsx("a", {
-                  href: titleLink,
-                  children: title
-                }), !titleLink && expandable && /*#__PURE__*/_jsx(Button, {
-                  isLink: true,
-                  onClick: () => this.setState({
-                    expanded: !expanded
-                  }),
-                  children: title
-                }), !titleLink && !expandable && title]
-              }), badges?.length && badges.map((badgeText, i) => /*#__PURE__*/_jsx("span", {
-                className: "newspack-action-card__badge",
-                children: badgeText
-              }, `badge-${i}`))]
-            }), description && /*#__PURE__*/_jsxs("p", {
-              children: [typeof description === 'string' && description, typeof description === 'function' && description()]
-            })]
-          })
-        }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && /*#__PURE__*/_jsxs("div", {
-          className: "newspack-action-card__region newspack-action-card__region-right",
-          children: [actionContent && actionContent, actionText && (handoff ? /*#__PURE__*/_jsx(Handoff, {
-            plugin: handoff,
-            editLink: editLink,
-            compact: true,
-            isLink: true,
-            children: actionText
-          }) : onClick || hasInternalLink ? /*#__PURE__*/_jsx(Button, {
-            disabled: disabled && !isButtonEnabled,
-            isLink: true,
-            href: href,
-            onClick: onClick,
-            className: "newspack-action-card__primary_button",
-            children: actionText
-          }) : href ? /*#__PURE__*/_jsx(ExternalLink, {
-            href: href,
-            className: "newspack-action-card__primary_button",
-            children: actionText
-          }) : /*#__PURE__*/_jsxs("div", {
-            className: "newspack-action-card__container",
-            children: [actionText, isWaiting && /*#__PURE__*/_jsx(Waiting, {
-              isRight: true
-            })]
-          })), isDisplayingSecondaryAction && /*#__PURE__*/_jsx(Button, {
-            isLink: true,
-            onClick: onSecondaryActionClick,
-            className: "newspack-action-card__secondary_button",
-            isDestructive: secondaryDestructive,
-            children: secondaryActionText
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "newspack-action-card__region newspack-action-card__region-center",
+        children: /*#__PURE__*/_jsxs(Grid, {
+          columns: 1,
+          gutter: 8,
+          noMargin: true,
+          children: [/*#__PURE__*/_jsxs("h2", {
+            children: [/*#__PURE__*/_jsxs("span", {
+              className: "newspack-action-card__title",
+              ...titleProps,
+              children: [titleLink && /*#__PURE__*/_jsx("a", {
+                href: titleLink,
+                children: title
+              }), !titleLink && expandable && /*#__PURE__*/_jsx(Button, {
+                isLink: true,
+                onClick: () => setExpanded(!expanded),
+                children: title
+              }), !titleLink && !expandable && title]
+            }), badges?.length && badges.map((badgeText, i) => /*#__PURE__*/_jsx("span", {
+              className: `newspack-action-card__badge newspack-action-card__badge-level-${badgeLevel}`,
+              children: badgeText
+            }, `badge-${i}`))]
+          }), description && /*#__PURE__*/_jsxs("p", {
+            children: [typeof description === 'string' && description, typeof description === 'function' && description()]
           })]
-        }), expandable && /*#__PURE__*/_jsx(Button, {
-          onClick: () => this.setState({
-            expanded: !expanded
-          }),
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: expanded ? chevronUp : chevronDown,
-            height: 24,
-            width: 24
-          })
-        })]
-      }), notification && /*#__PURE__*/_jsxs("div", {
-        className: "newspack-action-card__notification newspack-action-card__region-children",
-        children: ['error' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-          noticeText: notification,
-          isError: true,
-          rawHTML: notificationHTML
-        }), 'info' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-          noticeText: notification,
-          rawHTML: notificationHTML
-        }), 'success' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-          noticeText: notification,
-          isSuccess: true,
-          rawHTML: notificationHTML
-        }), 'warning' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
-          noticeText: notification,
-          isWarning: true,
-          rawHTML: notificationHTML
+        })
+      }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && /*#__PURE__*/_jsxs("div", {
+        className: "newspack-action-card__region newspack-action-card__region-right",
+        children: [actionContent && actionContent, actionText && (handoff ? /*#__PURE__*/_jsx(Handoff, {
+          plugin: handoff,
+          editLink: editLink,
+          compact: true,
+          isLink: true,
+          children: actionText
+        }) : onClick || hasInternalLink ? /*#__PURE__*/_jsx(Button, {
+          disabled: disabled && !isButtonEnabled,
+          isLink: true,
+          href: href,
+          onClick: onClick,
+          className: "newspack-action-card__primary_button",
+          children: actionText
+        }) : href ? /*#__PURE__*/_jsx(ExternalLink, {
+          href: href,
+          className: "newspack-action-card__primary_button",
+          children: actionText
+        }) : /*#__PURE__*/_jsxs("div", {
+          className: "newspack-action-card__container",
+          children: [actionText, isWaiting && /*#__PURE__*/_jsx(Waiting, {
+            isRight: true
+          })]
+        })), isDisplayingSecondaryAction && /*#__PURE__*/_jsx(Button, {
+          isLink: true,
+          onClick: onSecondaryActionClick,
+          className: "newspack-action-card__secondary_button",
+          isDestructive: secondaryDestructive,
+          children: secondaryActionText
         })]
-      }), children && (expandable && expanded || !expandable) && /*#__PURE__*/_jsx("div", {
-        className: "newspack-action-card__region-children",
-        children: children
+      }), expandable && /*#__PURE__*/_jsx(Button, {
+        onClick: () => setExpanded(!expanded),
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: expanded ? chevronUp : chevronDown,
+          height: 24,
+          width: 24
+        })
       })]
+    }), notification && /*#__PURE__*/_jsxs("div", {
+      className: "newspack-action-card__notification newspack-action-card__region-children",
+      children: ['error' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
+        noticeText: notification,
+        isError: true,
+        rawHTML: notificationHTML
+      }), 'info' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
+        noticeText: notification,
+        rawHTML: notificationHTML
+      }), 'success' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
+        noticeText: notification,
+        isSuccess: true,
+        rawHTML: notificationHTML
+      }), 'warning' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
+        noticeText: notification,
+        isWarning: true,
+        rawHTML: notificationHTML
+      })]
+    }), children && (expandable && expanded || !expandable) && /*#__PURE__*/_jsx("div", {
+      className: "newspack-action-card__region-children",
+      children: children
+    })]
+  });
+  if (draggable && dragRef?.current && typeof dragIndex === 'number' && onDragCallback && id) {
+    let wrapperRect = dragRef.current.getBoundingClientRect();
+    let draggableCards = Array.prototype.slice.call(dragRef.current.querySelectorAll('.newspack-action-card__draggable-wrapper'));
+    const isFirstTarget = dragIndex === 0;
+    const isLastTarget = dragIndex === draggableCards.length - 1;
+    const handleDragStart = () => {
+      draggableCards = Array.prototype.slice.call(dragRef.current.querySelectorAll('.newspack-action-card__draggable-wrapper'));
+      wrapperRect = dragRef.current.getBoundingClientRect();
+      if (dragging) {
+        return;
+      }
+      setTargetIndex(dragIndex);
+      setDragging(true);
+    };
+    const handleDragEnd = () => {
+      if (targetIndex !== null && targetIndex !== dragIndex) {
+        onDragCallback(targetIndex);
+      }
+      setTargetIndex(null);
+      setDragging(false);
+    };
+    const handleDragOver = e => {
+      const isDraggingToTop = e.pageY <= wrapperRect.top + window.scrollY;
+      const isDraggingToBottom = e.pageY >= wrapperRect.bottom + window.scrollY;
+      const target = e.target.closest('.newspack-action-card__draggable-wrapper');
+      if (isDraggingToTop || isDraggingToBottom || target) {
+        setTargetIndex(draggableCards.indexOf(target));
+
+        // If dragging the element over itself or over an invalid target, cancel the drop.
+        if (0 > targetIndex || targetIndex === dragIndex + 1) {
+          setTargetIndex(dragIndex);
+        }
+
+        // Handle dropping before the first item.
+        if (isDraggingToTop) {
+          setTargetIndex(0);
+        }
+
+        // Handle dropping after the last item.
+        if (isDraggingToBottom) {
+          setTargetIndex(draggableCards.length);
+        }
+      }
+    };
+    return /*#__PURE__*/_jsx("div", {
+      className: 'newspack-action-card__draggable-wrapper' + (dragging ? ' is-dragging' : ''),
+      id: `draggable-card-${id}`,
+      children: /*#__PURE__*/_jsx(Draggable, {
+        elementId: `draggable-card-${id}`,
+        transferData: {},
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragOver: handleDragOver,
+        children: ({
+          onDraggableStart,
+          onDraggableEnd
+        }) => /*#__PURE__*/_jsxs(Card, {
+          className: classes,
+          onClick: simple && onClick,
+          id: id !== null && id !== void 0 ? id : null,
+          noBorder: noBorder,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "newspack-action-card__draggable-controls",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "drag-handle",
+              draggable: true,
+              onDragStart: onDraggableStart,
+              onDragEnd: onDraggableEnd,
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: dragHandle,
+                height: 18,
+                width: 18
+              })
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "movers",
+              children: [/*#__PURE__*/_jsx(Button, {
+                icon: chevronUp,
+                onClick: () => onDragCallback(dragIndex - 1),
+                disabled: isFirstTarget,
+                label: __('Move one position up', 'newspack-plugin')
+              }), /*#__PURE__*/_jsx(Button, {
+                icon: chevronDown,
+                onClick: () => onDragCallback(dragIndex + 1),
+                disabled: isLastTarget,
+                label: __('Move one position down', 'newspack-plugin')
+              })]
+            })]
+          }), /*#__PURE__*/_jsx(Component, {})]
+        })
+      })
     });
   }
-}
-ActionCard.defaultProps = {
-  toggleChecked: false
+  return /*#__PURE__*/_jsx(Card, {
+    className: classes,
+    onClick: simple && onClick,
+    id: id !== null && id !== void 0 ? id : null,
+    noBorder: noBorder,
+    children: /*#__PURE__*/_jsx(Component, {})
+  });
 };
 export default ActionCard;