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

package/dist/esm/custom-select-control/index.js

@@ -0,0 +1,37 @@
+/**
+ * Custom Select Control
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { CustomSelectControl as BaseComponent } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+class CustomSelectControl extends Component {
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      className,
+      ...otherProps
+    } = this.props;
+    const classes = classnames('newspack-custom-select-control', className);
+    return /*#__PURE__*/_jsx(BaseComponent, {
+      className: classes,
+      ...otherProps
+    });
+  }
+}
+export default CustomSelectControl;

package/dist/esm/custom-select-control/style.scss

@@ -0,0 +1,93 @@
+/**
+ * Custom Select Control
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-custom-select-control {
+	label {
+		display: block;
+		margin-bottom: 8px;
+	}
+
+	.components-custom-select-control__button {
+		border-color: wp-colors.$gray-700;
+		border-radius: 2px;
+		color: wp-colors.$gray-900;
+		font-size: inherit;
+		min-height: 30px;
+		min-width: 100%;
+		padding-right: 24px;
+
+		&:active,
+		&:focus,
+		&:hover,
+		&[aria-expanded="true"] {
+			color: wp-colors.$gray-900;
+		}
+
+		&:focus {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+		}
+
+		&-icon {
+			right: 3px;
+			width: 18px;
+		}
+
+		&[aria-expanded="true"] svg {
+			transform: rotate(180deg);
+		}
+	}
+
+	.components-custom-select-control__menu {
+		border-color: wp-colors.$gray-700;
+		border-radius: 2px;
+		box-shadow: 0 4px 8px rgba(black, 0.08);
+		margin: 8px 0 0;
+		min-width: 222px;
+	}
+
+	.components-custom-select-control__item {
+		box-sizing: border-box;
+		cursor: pointer;
+		display: flex;
+		line-height: inherit;
+		margin: 0 0 0 28px;
+		padding: 6px 8px;
+		transition: color 125ms ease-in-out;
+
+		&:empty {
+			display: none;
+		}
+
+		&.is-header {
+			background: wp-colors.$gray-100;
+			cursor: default;
+			font-weight: bold;
+			margin-left: 0;
+			pointer-events: none;
+		}
+
+		&.is-highlighted {
+			background: white;
+			color: var(--wp-admin-theme-color);
+		}
+
+		&.is-selected {
+			margin-left: 0;
+
+			&::before {
+				background:
+					url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==")
+					0 0 no-repeat;
+				content: "";
+				display: block;
+				height: 24px;
+				margin: 0 4px 0 0;
+				width: 24px;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,31 @@
+/**
+ * External dependencies.
+ */
+import { default as ReactDateRangePicker } from 'react-daterange-picker';
+import origMoment from 'moment';
+import { extendMoment } from 'moment-range';
+import 'react-daterange-picker/dist/css/react-calendar.css';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+const moment = extendMoment(origMoment);
+const DateRangePicker = ({
+  start,
+  end,
+  onChange
+}) => {
+  return /*#__PURE__*/_jsx(ReactDateRangePicker, {
+    value: moment.range(moment(start), moment(end)),
+    firstOfWeek: 1,
+    onSelect: range => {
+      onChange({
+        start: range.start._d,
+        end: range.end._d
+      });
+    }
+  });
+};
+export default DateRangePicker;

package/dist/esm/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/esm/footer/index.js

@@ -0,0 +1,99 @@
+/**
+ * Footer
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { ExternalLink } from '@wordpress/components';
+
+/**
+ * Internal dependencies.
+ */
+import { PatronsLogo } from '../';
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Footer = ({
+  simple
+}) => {
+  const {
+    components_demo: componentsDemo = false,
+    support = false,
+    setup_wizard: setupWizard = false,
+    reset_url: resetUrl = false,
+    plugin_version: pluginVersion = {
+      label: 'Newspack'
+    },
+    remove_starter_content: removeStarterContent = false,
+    support_email: supportEmail
+  } = window.newspack_urls || {};
+  const footerElements = [{
+    label: pluginVersion.label,
+    url: 'https://newspack.com/category/release-notes/',
+    external: true
+  }, {
+    label: __('About', 'newspack-plugin'),
+    url: 'https://newspack.com/',
+    external: true
+  }, {
+    label: __('Documentation', 'newspack-plugin'),
+    url: support,
+    external: true
+  }];
+  if (componentsDemo) {
+    footerElements.push({
+      label: __('Components Demo', 'newspack-plugin'),
+      url: componentsDemo
+    });
+  }
+  if (setupWizard) {
+    footerElements.push({
+      label: __('Setup Wizard', 'newspack-plugin'),
+      url: setupWizard
+    });
+  }
+  if (resetUrl) {
+    footerElements.push({
+      label: __('Reset Newspack', 'newspack-plugin'),
+      url: resetUrl
+    });
+  }
+  if (removeStarterContent) {
+    footerElements.push({
+      label: __('Remove Starter Content', 'newspack-plugin'),
+      url: removeStarterContent
+    });
+  }
+  if (supportEmail) {
+    footerElements.push({
+      label: __('Contact Support', 'newspack-plugin'),
+      url: `mailto:${supportEmail}`
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: "newspack-footer",
+    children: [!simple && /*#__PURE__*/_jsx("div", {
+      className: "newspack-footer__inner",
+      children: /*#__PURE__*/_jsx("ul", {
+        children: footerElements.map(({
+          url,
+          label,
+          external
+        }, index) => /*#__PURE__*/_jsx("li", {
+          children: external ? /*#__PURE__*/_jsx(ExternalLink, {
+            href: url,
+            children: label
+          }) : /*#__PURE__*/_jsx("a", {
+            href: url,
+            children: label
+          })
+        }, index))
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "newspack-footer__logo",
+      children: /*#__PURE__*/_jsx(PatronsLogo, {})
+    })]
+  });
+};
+export default Footer;

package/dist/esm/footer/style.scss

@@ -0,0 +1,82 @@
+/**
+ * Footer
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-footer {
+	align-items: stretch;
+	background: white;
+	border: 0 solid wp-colors.$gray-300;
+	border-width: 1px 0;
+	bottom: 0;
+	color: wp-colors.$gray-700;
+	display: flex;
+	flex-wrap: wrap;
+	font-size: 12px;
+	justify-content: space-between;
+	left: 0;
+	line-height: 16px;
+	position: absolute;
+	right: 0;
+
+	@media screen and ( min-width: 783px ) {
+		bottom: 40px;
+		flex-wrap: nowrap;
+	}
+
+	&__inner {
+		align-items: center;
+		display: flex;
+		flex: 0 0 100%;
+
+		@media screen and ( min-width: 783px ) {
+			flex: 1 1 auto;
+		}
+	}
+
+	ul {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 0;
+		padding: 7px 8px;
+	}
+
+	li {
+		margin: 8px;
+
+		a {
+			align-items: flex-end;
+			color: inherit;
+			display: flex;
+
+			&:active,
+			&:focus,
+			&:hover {
+				color: wp-colors.$gray-900;
+			}
+		}
+	}
+
+	&__logo {
+		align-items: center;
+		background: wp-colors.$gray-900;
+		display: flex;
+		margin: 0 0 -1px;
+		padding: 16px;
+		width: 100%;
+
+		@media screen and ( min-width: 783px ) {
+			margin: -1px 0 -1px 8px;
+			max-width: 33.33%;
+			width: auto;
+		}
+
+		.patrons-logo {
+			display: block;
+			fill: white;
+			max-height: 16px;
+			width: auto;
+		}
+	}
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Form Token Field
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { FormTokenField as BaseComponent } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+class FormTokenField extends Component {
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      className,
+      description,
+      hideHelpFromVision,
+      hideLabelFromVision,
+      ...otherProps
+    } = this.props;
+    const classes = classnames('newspack-form-token-field__input-container', className);
+    return /*#__PURE__*/_jsxs("div", {
+      className: classnames({
+        'newspack-form-token-field--label-hidden': hideLabelFromVision,
+        'newspack-form-token-field--help-hidden': hideHelpFromVision
+      }, 'newspack-form-token-field'),
+      children: [/*#__PURE__*/_jsx(BaseComponent, {
+        className: classes,
+        ...otherProps
+      }), description && /*#__PURE__*/_jsx("p", {
+        className: "newspack-form-token-field__help",
+        children: description
+      })]
+    });
+  }
+}
+export default FormTokenField;

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

@@ -0,0 +1,37 @@
+/**
+ * Form Token Field
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-form-token-field {
+	width: 100%;
+
+	.components-form-token-field__input-container {
+		padding-bottom: 1px;
+		padding-top: 1px;
+	}
+
+	// Help
+
+	&__help {
+		color: wp-colors.$gray-700;
+		font-size: 12px;
+		margin: 8px 0 0 !important;
+	}
+
+	// Hidden Elements
+
+	&--label-hidden {
+		label {
+			display: none;
+		}
+	}
+
+	&--help-hidden {
+		.components-form-token-field__help,
+		div.i {
+			display: none;
+		}
+	}
+}

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

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { parse } from 'qs';
+
+/**
+ * Internal dependencies
+ */
+import { Notice } from '../';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GlobalNotices = () => {
+  const notice = parse(window.location.search)['newspack-notice'];
+  if (!notice) {
+    return null;
+  }
+  return notice.split(',').map((text, i) => {
+    if (text.indexOf('_error_') === 0) {
+      return /*#__PURE__*/_jsx(Notice, {
+        isError: true,
+        noticeText: text.replace('_error_', ''),
+        rawHTML: true
+      }, i);
+    }
+    return /*#__PURE__*/_jsx(Notice, {
+      isSuccess: true,
+      noticeText: text
+    }, i);
+  });
+};
+export default GlobalNotices;