newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.3

package/dist/cjs/date-range-picker/style.scss

@@ -0,0 +1,148 @@
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.DateRangePicker {
+	margin: 32px 0;
+	max-width: 296px;
+	width: 100%;
+
+	&__PaginationArrow {
+		background: transparent 50% 50% no-repeat;
+		background-size: 24px 24px;
+		border-radius: 3px;
+		height: 36px;
+		transition: background-image 125ms ease-in-out;
+		width: 36px;
+
+		&--previous {
+			background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%231e1e1e"/%3E%3C/svg%3E');
+			left: 0;
+
+			&:hover {
+				background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%2336f"/%3E%3C/svg%3E');
+			}
+		}
+
+		&--next {
+			background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%231e1e1e"/%3E%3C/svg%3E');
+			right: 0;
+
+			&:hover {
+				background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%2336f"/%3E%3C/svg%3E');
+			}
+		}
+
+		&:hover {
+			background-color: transparent;
+		}
+	}
+
+	&__PaginationArrowIcon {
+		display: none;
+	}
+
+	&__Month {
+		margin: 0;
+		width: inherit;
+	}
+
+	&__MonthHeader {
+		color: wp-colors.$gray-900;
+		font-size: 17px;
+		height: auto;
+		line-height: 24px;
+		padding: 6px 44px;
+	}
+
+	&__WeekdayHeading,
+	&__Date {
+		font-size: 14px;
+		line-height: 24px;
+		padding: 6px 0;
+	}
+
+	&__WeekdayHeading {
+		border-bottom-color: wp-colors.$gray-300;
+		color: wp-colors.$gray-900;
+
+		abbr[title] {
+			color: inherit;
+		}
+	}
+
+	&__MonthDates {
+		border: 0;
+		border-spacing: 0;
+	}
+
+	&__Date {
+		border-color: wp-colors.$gray-300;
+		border-bottom-width: 1px;
+
+		&--weekend {
+			background-color: wp-colors.$gray-100;
+		}
+
+		&--otherMonth {
+			color: wp-colors.$gray-200;
+			opacity: 1;
+		}
+
+		&--is-disabled {
+			color: wp-colors.$gray-100;
+			cursor: not-allowed;
+		}
+
+		&--is-highlighted {
+			color: white;
+		}
+	}
+
+	&__CalendarSelection,
+	&__CalendarHighlight {
+		border-color: colors.$primary-500;
+		bottom: 4px;
+		top: 4px;
+
+		&--inOtherMonth {
+			opacity: 1;
+		}
+
+		&--start {
+			border-bottom-left-radius: 3px;
+			border-top-left-radius: 3px;
+			left: 4px;
+		}
+
+		&--end {
+			border-bottom-right-radius: 3px;
+			border-top-right-radius: 3px;
+			right: 4px;
+		}
+
+		&--single {
+			border: none;
+			border-radius: 3px;
+			left: 4px;
+			right: 4px;
+		}
+	}
+
+	&__CalendarSelection {
+		background-color: colors.$primary-500;
+	}
+
+	&__CalendarHighlight {
+		background: colors.$primary-500;
+		border: none;
+		bottom: 0;
+		top: 0;
+
+		&--single {
+			border: none;
+			border-radius: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+}

package/dist/cjs/footer/index.js

@@ -8,17 +8,19 @@ var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _ = require("../");
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Footer
  */
+
 /**
  * WordPress dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * Internal dependencies.
  */
+
 const Footer = ({
   simple
 }) => {
@@ -38,66 +40,66 @@ const Footer = ({
     url: 'https://newspack.com/category/release-notes/',
     external: true
   }, {
-    label: __('About', 'newspack-plugin'),
+    label: (0, _i18n.__)('About', 'newspack-plugin'),
     url: 'https://newspack.com/',
     external: true
   }, {
-    label: __('Documentation', 'newspack-plugin'),
+    label: (0, _i18n.__)('Documentation', 'newspack-plugin'),
     url: support,
     external: true
   }];
   if (componentsDemo) {
     footerElements.push({
-      label: __('Components Demo', 'newspack-plugin'),
+      label: (0, _i18n.__)('Components Demo', 'newspack-plugin'),
       url: componentsDemo
     });
   }
   if (setupWizard) {
     footerElements.push({
-      label: __('Setup Wizard', 'newspack-plugin'),
+      label: (0, _i18n.__)('Setup Wizard', 'newspack-plugin'),
       url: setupWizard
     });
   }
   if (resetUrl) {
     footerElements.push({
-      label: __('Reset Newspack', 'newspack-plugin'),
+      label: (0, _i18n.__)('Reset Newspack', 'newspack-plugin'),
       url: resetUrl
     });
   }
   if (removeStarterContent) {
     footerElements.push({
-      label: __('Remove Starter Content', 'newspack-plugin'),
+      label: (0, _i18n.__)('Remove Starter Content', 'newspack-plugin'),
       url: removeStarterContent
     });
   }
   if (supportEmail) {
     footerElements.push({
-      label: __('Contact Support', 'newspack-plugin'),
+      label: (0, _i18n.__)('Contact Support', 'newspack-plugin'),
       url: `mailto:${supportEmail}`
     });
   }
-  return (0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "newspack-footer",
-    children: [!simple && (0, _jsxRuntime.jsx)("div", {
+    children: [!simple && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-footer__inner",
-      children: (0, _jsxRuntime.jsx)("ul", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
         children: footerElements.map(({
           url,
           label,
           external
-        }, index) => (0, _jsxRuntime.jsx)("li", {
-          children: external ? (0, _jsxRuntime.jsx)(_components.ExternalLink, {
+        }, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: external ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
             href: url,
             children: label
-          }) : (0, _jsxRuntime.jsx)("a", {
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
             href: url,
             children: label
           })
         }, index))
       })
-    }), (0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-footer__logo",
-      children: (0, _jsxRuntime.jsx)(_.PatronsLogo, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PatronsLogo, {})
     })]
   });
 };

package/dist/cjs/footer/style.scss

@@ -2,7 +2,7 @@
  * Footer
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-footer {
 	align-items: stretch;

package/dist/cjs/form-token-field/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Form Token Field
  */
@@ -39,15 +39,15 @@ class FormTokenField extends _element.Component {
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-form-token-field__input-container', className);
-    return (0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)({
         'newspack-form-token-field--label-hidden': hideLabelFromVision,
         'newspack-form-token-field--help-hidden': hideHelpFromVision
       }, 'newspack-form-token-field'),
-      children: [(0, _jsxRuntime.jsx)(_components.FormTokenField, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormTokenField, {
         className: classes,
         ...otherProps
-      }), description && (0, _jsxRuntime.jsx)("p", {
+      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         className: "newspack-form-token-field__help",
         children: description
       })]

package/dist/cjs/form-token-field/style.scss

@@ -2,7 +2,7 @@
  * Form Token Field
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-form-token-field {
 	width: 100%;

package/dist/cjs/global-notices/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _qs = require("qs");
 var _ = require("../");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -22,13 +22,13 @@ const GlobalNotices = () => {
   }
   return notice.split(',').map((text, i) => {
     if (text.indexOf('_error_') === 0) {
-      return (0, _jsxRuntime.jsx)(_.Notice, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
         isError: true,
         noticeText: text.replace('_error_', ''),
         rawHTML: true
       }, i);
     }
-    return (0, _jsxRuntime.jsx)(_.Notice, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
       isSuccess: true,
       noticeText: text
     }, i);

package/dist/cjs/grid/style.scss

@@ -2,7 +2,7 @@
  * Grid
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-grid {
 	display: grid;
@@ -68,7 +68,7 @@
 
 	// Columns 6
 	&__columns-6 {
-		grid-template-columns: repeat( 2, 1fr );
+		grid-template-columns: repeat(2, 1fr);
 	}
 
 	// Media Queries - 744px
@@ -76,11 +76,11 @@
 		&__columns-2,
 		&__columns-3,
 		&__columns-4 {
-			grid-template-columns: repeat( 2, 1fr );
+			grid-template-columns: repeat(2, 1fr);
 		}
 
 		&__columns-6 {
-			grid-template-columns: repeat( 3, 1fr );
+			grid-template-columns: repeat(3, 1fr);
 		}
 	}
 
@@ -88,17 +88,17 @@
 	@media screen and ( min-width: 1128px ) {
 		// Columns 3
 		&__columns-3 {
-			grid-template-columns: repeat( 3, 1fr );
+			grid-template-columns: repeat(3, 1fr);
 		}
 
 		// Columns 4
 		&__columns-4 {
-			grid-template-columns: repeat( 4, 1fr );
+			grid-template-columns: repeat(4, 1fr);
 		}
 
 		// Columns 6
 		&__columns-6 {
-			grid-template-columns: repeat( 6, 1fr );
+			grid-template-columns: repeat(6, 1fr);
 		}
 
 		// Gutter 48
@@ -144,12 +144,12 @@
 
 	// Table-like
 	&__thead {
-		background: rgba( black, 0.025 );
+		background: rgba(black, 0.025);
 		border-bottom: 1px solid wp-colors.$gray-300;
 		border-top: 1px solid wp-colors.$gray-300;
 		color: wp-colors.$gray-900;
 
-		> *:not( .screen-reader-text ) {
+		> *:not(.screen-reader-text) {
 			padding: 8px;
 		}
 	}

package/dist/cjs/handoff/index.js

@@ -1,91 +1,94 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _ = require("../");
 var _assign = _interopRequireDefault(require("lodash/assign"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Handoff
  */
+
 /**
  * WordPress dependencies.
  */
+
 /**
  * Internal dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * External dependencies.
  */
+
 class Handoff extends _element.Component {
   constructor() {
     super(...arguments);
-    (0, _defineProperty2.default)(this, "componentDidMount", () => {
-      this._isMounted = true;
-      const {
-        plugin
-      } = this.props;
-      this.retrievePluginInfo(plugin);
-    });
-    (0, _defineProperty2.default)(this, "componentWillUnmount", () => {
-      this._isMounted = false;
-    });
-    (0, _defineProperty2.default)(this, "retrievePluginInfo", plugin => {
-      const {
-        onReady
-      } = this.props;
-      (0, _apiFetch.default)({
-        path: '/newspack/v1/plugins/' + plugin
-      }).then(pluginInfo => {
-        if (this._isMounted) {
-          onReady(pluginInfo);
-          this.setState({
-            pluginInfo
-          });
-        }
-      });
-    });
-    (0, _defineProperty2.default)(this, "textForPlugin", pluginInfo => {
-      const defaults = {
-        modalBody: null,
-        modalTitle: pluginInfo.Name && `${__('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
-        primaryButton: pluginInfo.Name && `${__('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
-        primaryModalButton: __('Manage', 'newspack-plugin'),
-        dismissModalButton: __('Dismiss', 'newspack-plugin')
-      };
-      return (0, _assign.default)(defaults, this.props);
-    });
-    (0, _defineProperty2.default)(this, "goToPlugin", plugin => {
-      const {
-        editLink,
-        showOnBlockEditor
-      } = this.props;
-      (0, _apiFetch.default)({
-        path: '/newspack/v1/plugins/' + plugin + '/handoff',
-        method: 'POST',
-        data: {
-          editLink,
-          handoffReturnUrl: window && window.location.href,
-          showOnBlockEditor: showOnBlockEditor ? true : false
-        }
-      }).then(response => {
-        window.location.href = response.HandoffLink;
-      });
-    });
     this.state = {
       pluginInfo: [],
       showModal: false
     };
   }
+  componentDidMount = () => {
+    this._isMounted = true;
+    const {
+      plugin
+    } = this.props;
+    this.retrievePluginInfo(plugin);
+  };
+  componentWillUnmount = () => {
+    this._isMounted = false;
+  };
+  retrievePluginInfo = plugin => {
+    const {
+      onReady
+    } = this.props;
+    (0, _apiFetch.default)({
+      path: '/newspack/v1/plugins/' + plugin
+    }).then(pluginInfo => {
+      if (this._isMounted) {
+        onReady(pluginInfo);
+        this.setState({
+          pluginInfo
+        });
+      }
+    });
+  };
+  textForPlugin = pluginInfo => {
+    const defaults = {
+      modalBody: null,
+      modalTitle: pluginInfo.Name && `${(0, _i18n.__)('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
+      primaryButton: pluginInfo.Name && `${(0, _i18n.__)('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
+      primaryModalButton: (0, _i18n.__)('Manage', 'newspack-plugin'),
+      dismissModalButton: (0, _i18n.__)('Dismiss', 'newspack-plugin')
+    };
+    return (0, _assign.default)(defaults, this.props);
+  };
+  goToPlugin = plugin => {
+    const {
+      editLink,
+      showOnBlockEditor
+    } = this.props;
+    (0, _apiFetch.default)({
+      path: '/newspack/v1/plugins/' + plugin + '/handoff',
+      method: 'POST',
+      data: {
+        editLink,
+        handoffReturnUrl: window && window.location.href,
+        showOnBlockEditor: showOnBlockEditor ? true : false
+      }
+    }).then(response => {
+      window.location.href = response.HandoffLink;
+    });
+  };
+
   /**
    * Render.
    */
@@ -123,8 +126,8 @@ class Handoff extends _element.Component {
       Status
     } = pluginInfo;
     const classes = (0, _classnames.default)(Configured && 'is-configured', className);
-    return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [Name && 'active' === Status && (0, _jsxRuntime.jsx)(_.Button, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+      children: [Name && 'active' === Status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
         className: classes,
         isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
         ...otherProps,
@@ -132,39 +135,39 @@ class Handoff extends _element.Component {
           showModal: true
         }) : this.goToPlugin(Slug),
         children: children ? children : primaryButton
-      }), Name && 'active' !== Status && (0, _jsxRuntime.jsx)(_.Button, {
+      }), Name && 'active' !== Status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
         className: classes,
         variant: "secondary",
         disabled: true,
         ...otherProps,
-        children: Name + __(' not installed', 'newspack-plugin')
-      }), !Name && (0, _jsxRuntime.jsx)(_.Button, {
+        children: Name + (0, _i18n.__)(' not installed', 'newspack-plugin')
+      }), !Name && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
         className: classes,
         isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
         ...otherProps,
-        children: (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [!compact && (0, _jsxRuntime.jsx)(_.Waiting, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+          children: [!compact && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
             isLeft: true
-          }), __('Retrieving Plugin Info', 'newspack-plugin')]
+          }), (0, _i18n.__)('Retrieving Plugin Info', 'newspack-plugin')]
         })
-      }), showModal && (0, _jsxRuntime.jsxs)(_.Modal, {
+      }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, {
         title: modalTitle,
         onRequestClose: () => this.setState({
           showModal: false
         }),
-        children: [(0, _jsxRuntime.jsx)("p", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           children: modalBody
-        }), (0, _jsxRuntime.jsxs)(_.Card, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
           buttonsCard: true,
           noBorder: true,
           className: "justify-end",
-          children: [(0, _jsxRuntime.jsx)(_.Button, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
             variant: "secondary",
             onClick: () => this.setState({
               showModal: false
             }),
             children: dismissModalButton
-          }), (0, _jsxRuntime.jsx)(_.Button, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
             variant: "primary",
             onClick: () => this.goToPlugin(Slug),
             children: primaryModalButton

package/dist/cjs/handoff-message/index.js

@@ -7,7 +7,7 @@ exports.default = HandoffMessage;
 var _element = require("@wordpress/element");
 var _consts = require("../consts");
 var _ = require("../");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
@@ -40,8 +40,10 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
     // Clean up the notification when unmounting.
     return () => window.localStorage.removeItem(_consts.HANDOFF_KEY);
   }, []);
-  if (!handoffMessage) return null;
-  return (0, _jsxRuntime.jsx)(_.Notice, {
+  if (!handoffMessage) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
     isHandoff: true,
     isDismissible: false,
     rawHTML: true,

package/dist/cjs/hooks/useObjectState.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });