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

package/dist/date-range-picker/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactDaterangePicker = _interopRequireDefault(require("react-daterange-picker"));
+var _moment = _interopRequireDefault(require("moment"));
+var _momentRange = require("moment-range");
+require("react-daterange-picker/dist/css/react-calendar.css");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+const moment = (0, _momentRange.extendMoment)(_moment.default);
+const DateRangePicker = ({
+  start,
+  end,
+  onChange
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDaterangePicker.default, {
+    value: moment.range(moment(start), moment(end)),
+    firstOfWeek: 1,
+    onSelect: range => {
+      onChange({
+        start: range.start._d,
+        end: range.end._d
+      });
+    }
+  });
+};
+var _default = exports.default = DateRangePicker;

package/dist/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 → 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 → 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 → 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/{esm/form-token-field → 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 → 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/grid/index.js

@@ -0,0 +1,44 @@
+'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/grid/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * Grid
+ */
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+const Grid = ( {
+	className = '',
+	columns = 2,
+	gutter = 32,
+	noMargin = false,
+	rowGap = 0,
+	...otherProps
+} ) => {
+	const classes = classnames(
+		'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 <div className={ classes } { ...otherProps } />;
+};
+
+export default Grid;

package/dist/{esm/grid → 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;
 		}
 	}