newspack-components 3.0.0-alpha.2 → 3.0.0-alpha.4

package/babel.config.cjs.js

@@ -0,0 +1,26 @@
+module.exports = api => {
+	api.cache( true );
+	return {
+		extends: 'newspack-scripts/config/babel.config.js',
+		presets: [
+			[
+				'@babel/preset-env',
+				{
+					corejs: 3.6,
+					useBuiltIns: 'entry',
+					// Exclude transforms that make all code slower, see https://github.com/facebook/create-react-app/pull/5278
+					exclude: [ 'transform-typeof-symbol' ],
+					modules: 'commonjs',
+				},
+			],
+			[
+				'@babel/preset-react',
+				{
+					runtime: 'automatic',
+					importSource: process.env.IMPORT_SOURCE,
+				},
+			],
+			[ '@babel/preset-typescript', { allowDeclareFields: true } ],
+		],
+	};
+};

package/babel.config.js

@@ -10,6 +10,7 @@ module.exports = api => {
 					useBuiltIns: 'entry',
 					// Exclude transforms that make all code slower, see https://github.com/facebook/create-react-app/pull/5278
 					exclude: [ 'transform-typeof-symbol' ],
+					modules: false,
 				},
 			],
 			[

package/copy-styles.js

@@ -9,7 +9,8 @@ const rcopy = require( 'recursive-copy' );
 const dir = process.cwd();
 
 const inputDir = path.join( dir, 'src' );
-const outputDir = path.join( dir, 'dist' );
+const outputDirEsm = path.join( dir, 'dist', 'esm' );
+const outputDirCommon = path.join( dir, 'dist', 'cjs' );
 
 console.log( 'Copying styles %s', dir );
 
@@ -20,7 +21,14 @@ const copyOptions = {
 	debug: true,
 };
 
-rcopy( inputDir, outputDir, copyOptions )
+rcopy( inputDir, outputDirEsm, copyOptions )
+	.then( results => {
+		console.log( 'copied %d files', results.length );
+	} )
+	.catch( err => {
+		console.error( err );
+	} );
+rcopy( inputDir, outputDirCommon, copyOptions )
 	.then( results => {
 		console.log( 'copied %d files', results.length );
 	} )

package/dist/cjs/button/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _router = _interopRequireDefault(require("../proxied-imports/router"));
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Button
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  useHistory
+} = _router.default;
+const Button = ({
+  href,
+  onClick,
+  ...otherProps
+}) => {
+  const history = useHistory();
+  const [isAwaitingOnClick, setIsAwaitingOnClick] = (0, _element.useState)(false);
+
+  // If both onClick and href are present, await the onClick action an then redirect.
+  if (href && onClick) {
+    otherProps.onClick = async () => {
+      setIsAwaitingOnClick(true);
+      await onClick();
+      setIsAwaitingOnClick(false);
+      history.push((href || '').replace('#', ''));
+    };
+  } else {
+    otherProps.href = href;
+    otherProps.onClick = onClick;
+  }
+  if (isAwaitingOnClick) {
+    otherProps.disabled = true;
+  }
+  // @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+    ...otherProps
+  });
+};
+var _default = exports.default = Button;

package/dist/cjs/grid/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Grid
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+const Grid = ({
+  className = '',
+  columns = 2,
+  gutter = 32,
+  noMargin = false,
+  rowGap = 0,
+  ...otherProps
+}) => {
+  const classes = (0, _classnames.default)('newspack-grid', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes,
+    ...otherProps
+  });
+};
+var _default = exports.default = Grid;

package/dist/cjs/hooks/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _usePrompt = _interopRequireDefault(require("./usePrompt"));
+var _useObjectState = _interopRequireDefault(require("./useObjectState"));
+var _useOnClickOutside = _interopRequireDefault(require("./useOnClickOutside"));
+/**
+ * WordPress dependencies
+ */
+
+const useUniqueId = prefix => {
+  const id = (0, _element.useRef)(`${prefix}-${Math.round(Math.random() * 99999)}`);
+  return id.current;
+};
+var _default = exports.default = {
+  usePrompt: _usePrompt.default,
+  useObjectState: _useObjectState.default,
+  useOnClickOutside: _useOnClickOutside.default,
+  useUniqueId
+};

package/dist/cjs/hooks/usePrompt.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _router = _interopRequireDefault(require("../proxied-imports/router"));
+// https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+const {
+  useHistory
+} = _router.default;
+var _default = (when, message) => {
+  const history = useHistory();
+  const self = (0, _element.useRef)(null);
+  const onWindowOrTabClose = event => {
+    if (!when) {
+      return;
+    }
+    if (typeof event === 'undefined') {
+      event = window.event;
+    }
+    return message;
+  };
+  (0, _element.useEffect)(() => {
+    if (when) {
+      self.current = history.block(message);
+      window.addEventListener('beforeunload', onWindowOrTabClose);
+    }
+    return () => {
+      if (self.current) {
+        self.current();
+      }
+      window.removeEventListener('beforeunload', onWindowOrTabClose);
+    };
+  }, [message, when]);
+  return self.current || (() => {});
+};
+exports.default = _default;

package/dist/cjs/text-control/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Text Control
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+const TextControl = ({
+  className = '',
+  required = false,
+  isWide = false,
+  withMargin = true,
+  ...otherProps
+}) => {
+  const wrapperRef = (0, _element.useRef)(null);
+  (0, _element.useEffect)(() => {
+    if (wrapperRef.current === null) {
+      return;
+    }
+    const labelEl = wrapperRef.current.querySelector('label');
+    if (labelEl) {
+      labelEl.setAttribute('data-required-text', (0, _i18n.__)('(required)', 'newspack-plugin'));
+    }
+  }, [wrapperRef.current]);
+  const classes = (0, _classnames.default)('newspack-text-control', {
+    'newspack-text-control--wide': isWide,
+    'newspack-text-control--with-margin': withMargin
+  }, className);
+  return required ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: wrapperRef,
+    className: "newspack-text-control--required",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
+      className: classes,
+      required: required,
+      ...otherProps
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
+    className: classes,
+    ...otherProps
+  });
+};
+var _default = exports.default = TextControl;

package/dist/esm/accordion/index.js

@@ -0,0 +1,42 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/**
+ * 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, jsxs as _jsxs } from "react/jsx-runtime";
+const Accordion = ({
+  children,
+  title
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return /*#__PURE__*/_jsxs("details", {
+    className: classNames('newspack-accordion', {
+      'newspack-accordion--is-open': isOpen
+    }),
+    children: [/*#__PURE__*/_jsxs("summary", {
+      onClick: () => setIsOpen(!isOpen),
+      children: [title, /*#__PURE__*/_jsx(Icon, {
+        className: "newspack-accordion__icon",
+        icon: chevronRight,
+        size: 24
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "newspack-accordion__content",
+      children: children
+    })]
+  });
+};
+export default Accordion;

package/dist/esm/accordion/style.scss

@@ -0,0 +1,31 @@
+@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;
+	}
+
+	&__content {
+		padding: 16px 32px;
+	}
+}

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

@@ -0,0 +1,218 @@
+/**
+ * Action Card
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { ExternalLink, ToggleControl } from '@wordpress/components';
+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, 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
+      });
+    }
+  }
+
+  /**
+   * 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
+    } = 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'
+    } : {};
+    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)
+            })
+          })
+        }), 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,
+            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
+          })]
+        }), 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
+        })]
+      }), children && (expandable && expanded || !expandable) && /*#__PURE__*/_jsx("div", {
+        className: "newspack-action-card__region-children",
+        children: children
+      })]
+    });
+  }
+}
+ActionCard.defaultProps = {
+  toggleChecked: false
+};
+export default ActionCard;