newspack-components 2.1.0 → 2.2.0

package/dist/esm/card/style.scss

@@ -2,12 +2,12 @@
  * Card
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-card {
 	border-radius: 2px;
-	border: 1px solid $gray-300;
-	color: $gray-900;
+	border: 1px solid wp-colors.$gray-300;
+	color: wp-colors.$gray-900;
 	margin: 32px 0;
 	padding: 16px 48px;
 
@@ -30,6 +30,7 @@
 		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
+		gap: 8px;
 		justify-content: space-between;
 		margin-bottom: -16px;
 
@@ -37,6 +38,12 @@
 			margin-bottom: 0 !important;
 			margin-top: 0 !important;
 		}
+
+		.newspack-select-control {
+			.components-base-control__field {
+				margin-bottom: 0;
+			}
+		}
 	}
 
 	// Is Narrow
@@ -101,6 +108,16 @@
 		padding: 0;
 	}
 
+	// Margin
+
+	&.mt64 {
+		margin-top: 64px;
+	}
+
+	&.mt16 {
+		margin-top: 16px;
+	}
+
 	// Typography
 
 	small {
@@ -109,15 +126,15 @@
 	}
 
 	code {
-		background: $gray-100;
-		color: $gray-900;
+		background: wp-colors.$gray-100;
+		color: wp-colors.$gray-900;
 		padding: 0 0.5em;
 	}
 
 	// Thematic Break
 
 	hr {
-		background: $gray-300;
+		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
 		margin: 48px 0;
@@ -130,7 +147,7 @@
 	// Separator
 
 	.sep {
-		background: $gray-300;
+		background: wp-colors.$gray-300;
 		height: 1px;
 		margin-left: 8px;
 		margin-right: 8px;
@@ -146,6 +163,6 @@
 	// Error
 
 	.newspack-error {
-		color: $alert-red;
+		color: wp-colors.$alert-red;
 	}
 }

package/dist/esm/category-autocomplete/index.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /**
  * Category Autocomplete
  */
@@ -11,52 +10,55 @@ import apiFetch from '@wordpress/api-fetch';
 import { Spinner } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
+
 /**
  * Internal dependencies.
  */
-
 import { FormTokenField } from '../';
 import './style.scss';
+
 /**
  * External dependencies
  */
-
-import { debounce, find, filter } from 'lodash';
+import debounce from 'lodash/debounce';
+import find from 'lodash/find';
+import filter from 'lodash/filter';
 import classnames from 'classnames';
+
 /**
  * Category autocomplete field component.
  */
-
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 class CategoryAutocomplete extends Component {
   /**
    * Class constructor.
    */
   constructor(props) {
     super(props);
-
     _defineProperty(this, "state", {
       suggestions: {},
       allCategories: {},
       isLoading: false
     });
-
+    /**
+     * Prepare categories data for the API endpoint, call the change handler.
+     *
+     * @param {Array} tokens An array of category tokens.
+     */
     _defineProperty(this, "handleOnChange", tokens => {
       const {
         onChange
       } = this.props;
       const {
         suggestions
-      } = this.state; // Categories that are already will be objects, while new additions will be strings (the name).
+      } = this.state;
+      // Categories that are already will be objects, while new additions will be strings (the name).
       // allValues nomalizes the array so that they are all objects.
-
       const allValues = tokens.filter(token => 'undefined' !== typeof token) // Ensure each token is a valid value.
       .map(token => 'string' === typeof token ? suggestions[token] : token).filter(Boolean);
       onChange(allValues);
     });
-
     _defineProperty(this, "getAvailableSuggestions", () => {
       const {
         value
@@ -68,7 +70,6 @@ class CategoryAutocomplete extends Component {
         if (item?.id) {
           acc.push(item.id);
         }
-
         return acc;
       }, []);
       const availableSuggestions = filter(suggestions, _ref => {
@@ -79,10 +80,8 @@ class CategoryAutocomplete extends Component {
       });
       return availableSuggestions.map(v => v.name);
     });
-
     this.debouncedUpdateSuggestions = debounce(this.updateSuggestions, 100);
   }
-
   componentDidMount() {
     this.setState({
       isLoading: true
@@ -98,21 +97,19 @@ class CategoryAutocomplete extends Component {
       isLoading: false
     }));
   }
+
   /**
    * Clean up debounced suggestions method.
    */
-
-
   componentWillUnmount() {
     this.debouncedUpdateSuggestions.cancel();
   }
+
   /**
    * Refresh the autocomplete UI based on text that was typed.
    *
    * @param {string} search The typed text to search for.
    */
-
-
   updateSuggestions(search) {
     this.setState({
       isLoading: true
@@ -127,7 +124,8 @@ class CategoryAutocomplete extends Component {
       })
     }).then(categories => {
       this.setState({
-        suggestions: categories.reduce((accumulator, category) => ({ ...accumulator,
+        suggestions: categories.reduce((accumulator, category) => ({
+          ...accumulator,
           [category.name]: category
         }), {})
       });
@@ -135,13 +133,6 @@ class CategoryAutocomplete extends Component {
       isLoading: false
     }));
   }
-  /**
-   * Prepare categories data for the API endpoint, call the change handler.
-   *
-   * @param {Array} tokens An array of category tokens.
-   */
-
-
   /**
    * Render the component.
    */
@@ -166,14 +157,12 @@ class CategoryAutocomplete extends Component {
         onInputChange: input => this.debouncedUpdateSuggestions(input),
         value: value.reduce((acc, item) => {
           const categoryOrItem = typeof item === 'number' ? find(allCategories, ['id', item]) : item;
-
           if (categoryOrItem) {
             acc.push({
               id: categoryOrItem.term_id || categoryOrItem.id,
               value: categoryOrItem.value || categoryOrItem.name
             });
           }
-
           return acc;
         }, []),
         suggestions: this.getAvailableSuggestions(),
@@ -189,9 +178,7 @@ class CategoryAutocomplete extends Component {
       }) : null]
     });
   }
-
 }
-
 CategoryAutocomplete.defaultProps = {
   taxonomy: 'categories'
 };

package/dist/esm/category-autocomplete/style.scss

@@ -2,8 +2,6 @@
  * Category Autocomplete
  */
 
-@import '../../../shared/scss/colors';
-
 .newspack-category-autocomplete {
 	position: relative;
 

package/dist/esm/checkbox-control/index.js

@@ -0,0 +1,49 @@
+/**
+ * Checkbox Control
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { CheckboxControl as BaseComponent } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+
+import { InfoButton } from '../';
+import './style.scss';
+/**
+ * External dependencies
+ */
+
+import classnames from 'classnames';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+
+class CheckboxControl extends Component {
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      className,
+      checked,
+      tooltip,
+      ...otherProps
+    } = this.props;
+    const classes = classnames('newspack-checkbox-control', className);
+    return _jsxs("div", {
+      className: classes,
+      children: [_jsx(BaseComponent, {
+        checked: Boolean(checked),
+        ...otherProps
+      }), tooltip && _jsx(InfoButton, {
+        text: tooltip
+      })]
+    });
+  }
+
+}
+
+export default CheckboxControl;

package/dist/esm/checkbox-control/style.scss

@@ -0,0 +1,78 @@
+/**
+ * Checkbox styles.
+ */
+
+@import '../../../shared/scss/colors';
+@import '~@wordpress/base-styles/colors';
+
+.newspack-checkbox-control {
+	color: $gray-700;
+	display: flex;
+	font-size: 14px;
+	line-height: 24px;
+	margin: 32px 0;
+
+	label {
+		color: inherit;
+		font-size: inherit;
+		line-height: inherit;
+		margin: 0;
+	}
+
+	.components-checkbox-control__input-container {
+		display: block;
+		margin: 0;
+		margin-right: 8px;
+
+		@media screen and ( min-width: 600px ) {
+			margin-bottom: 2px;
+			margin-top: 2px;
+		}
+	}
+
+	.components-checkbox-control__input[type='checkbox'] {
+		margin: 0;
+
+		&:checked {
+			background-color: $primary-500;
+			border-color: $primary-500;
+		}
+
+		&:focus {
+			border-color: $primary-500;
+			box-shadow: 0 0 0 2px white, 0 0 0 3.5px $primary-500;
+		}
+	}
+
+	.components-base-control__help {
+		color: inherit;
+		font-size: inherit;
+		font-style: italic;
+		line-height: inherit;
+		margin: 0;
+		margin-left: 28px;
+	}
+
+	// Multiple Checkbox Controls
+
+	& + & {
+		margin-top: -16px;
+	}
+
+	// Reset
+
+	.components-base-control {
+		font-size: inherit;
+		line-height: inherit;
+	}
+
+	.components-base-control__field {
+		display: flex;
+		margin: 0;
+	}
+
+	.components-base-control__label {
+		display: block;
+		margin: 0;
+	}
+}

package/dist/esm/color-picker/index.js

@@ -3,17 +3,17 @@
  */
 import { ColorPicker as ColorPickerComponent } from '@wordpress/components';
 import { useState, useRef } from '@wordpress/element';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
 import { colord, extend } from 'colord';
 import a11yPlugin from 'colord/plugins/a11y';
+
 /**
  * Internal dependencies.
  */
-
 import hooks from '../hooks';
 import utils from '../utils';
 import './style.scss';
@@ -23,7 +23,6 @@ extend([a11yPlugin]);
 const {
   InteractiveDiv
 } = utils;
-
 const ColorPicker = _ref => {
   let {
     label,
@@ -59,5 +58,4 @@ const ColorPicker = _ref => {
     })]
   });
 };
-
 export default ColorPicker;

package/dist/esm/color-picker/style.scss

@@ -2,9 +2,6 @@
  * Color Picker
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
 .newspack-color-picker {
 	position: relative;
 

package/dist/esm/consts.js

@@ -1,2 +1,3 @@
-export const NEWSPACK_SITE_URL = 'https://newspack.pub';
-export const NEWSPACK_SUPPORT_URL = `${NEWSPACK_SITE_URL}/support`;
+export const NEWSPACK_SITE_URL = 'https://newspack.com';
+export const NEWSPACK_SUPPORT_URL = `${NEWSPACK_SITE_URL}/support`;
+export const HANDOFF_KEY = 'newspack_wizard_handoff_message';

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

@@ -7,18 +7,17 @@
  */
 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 "@emotion/react/jsx-runtime";
-
 class CustomSelectControl extends Component {
   /**
    * Render.
@@ -34,7 +33,5 @@ class CustomSelectControl extends Component {
       ...otherProps
     });
   }
-
 }
-
 export default CustomSelectControl;

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

@@ -2,8 +2,7 @@
  * Custom Select Control
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-custom-select-control {
 	label {
@@ -12,9 +11,9 @@
 	}
 
 	.components-custom-select-control__button {
-		border-color: $gray-700;
+		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
-		color: $gray-900;
+		color: wp-colors.$gray-900;
 		font-size: inherit;
 		min-height: 30px;
 		min-width: 100%;
@@ -24,7 +23,7 @@
 		&:focus,
 		&:hover,
 		&[aria-expanded='true'] {
-			color: $gray-900;
+			color: wp-colors.$gray-900;
 		}
 
 		&:focus {
@@ -43,7 +42,7 @@
 	}
 
 	.components-custom-select-control__menu {
-		border-color: $gray-700;
+		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
 		box-shadow: 0 4px 8px rgba( black, 0.08 );
 		margin: 8px 0 0;
@@ -64,7 +63,7 @@
 		}
 
 		&.is-header {
-			background: $gray-100;
+			background: wp-colors.$gray-100;
 			cursor: default;
 			font-weight: bold;
 			margin-left: 0;

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

@@ -5,14 +5,13 @@ 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 "@emotion/react/jsx-runtime";
 const moment = extendMoment(origMoment);
-
 const DateRangePicker = _ref => {
   let {
     start,
@@ -30,5 +29,4 @@ const DateRangePicker = _ref => {
     }
   });
 };
-
 export default DateRangePicker;

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

@@ -1,5 +1,5 @@
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .DateRangePicker {
 	margin: 32px 0;
@@ -47,7 +47,7 @@
 	}
 
 	&__MonthHeader {
-		color: $gray-900;
+		color: wp-colors.$gray-900;
 		font-size: 17px;
 		height: auto;
 		line-height: 24px;
@@ -62,8 +62,8 @@
 	}
 
 	&__WeekdayHeading {
-		border-bottom-color: $gray-300;
-		color: $gray-900;
+		border-bottom-color: wp-colors.$gray-300;
+		color: wp-colors.$gray-900;
 
 		abbr[title] {
 			color: inherit;
@@ -76,20 +76,20 @@
 	}
 
 	&__Date {
-		border-color: $gray-300;
+		border-color: wp-colors.$gray-300;
 		border-bottom-width: 1px;
 
 		&--weekend {
-			background-color: $gray-100;
+			background-color: wp-colors.$gray-100;
 		}
 
 		&--otherMonth {
-			color: $gray-200;
+			color: wp-colors.$gray-200;
 			opacity: 1;
 		}
 
 		&--is-disabled {
-			color: $gray-100;
+			color: wp-colors.$gray-100;
 			cursor: not-allowed;
 		}
 
@@ -100,7 +100,7 @@
 
 	&__CalendarSelection,
 	&__CalendarHighlight {
-		border-color: $primary-500;
+		border-color: colors.$primary-500;
 		bottom: 4px;
 		top: 4px;
 
@@ -129,11 +129,11 @@
 	}
 
 	&__CalendarSelection {
-		background-color: $primary-500;
+		background-color: colors.$primary-500;
 	}
 
 	&__CalendarHighlight {
-		background: $primary-500;
+		background: colors.$primary-500;
 		border: none;
 		bottom: 0;
 		top: 0;

package/dist/esm/footer/index.js

@@ -8,15 +8,14 @@
 import { __ as alias__ } from '@wordpress/i18n';
 const __ = alias__;
 import { ExternalLink } from '@wordpress/components';
+
 /**
  * Internal dependencies.
  */
-
 import { PatronsLogo } from '../';
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Footer = _ref => {
   let {
     simple
@@ -34,53 +33,47 @@ const Footer = _ref => {
   } = window.newspack_urls || {};
   const footerElements = [{
     label: pluginVersion.label,
-    url: 'https://newspack.pub/category/release-notes/',
+    url: 'https://newspack.com/category/release-notes/',
     external: true
   }, {
     label: __('About', 'newspack'),
-    url: 'https://newspack.pub/',
+    url: 'https://newspack.com/',
     external: true
   }, {
     label: __('Documentation', 'newspack'),
     url: support,
     external: true
   }];
-
   if (componentsDemo) {
     footerElements.push({
       label: __('Components Demo', 'newspack'),
       url: componentsDemo
     });
   }
-
   if (setupWizard) {
     footerElements.push({
       label: __('Setup Wizard', 'newspack'),
       url: setupWizard
     });
   }
-
   if (resetUrl) {
     footerElements.push({
       label: __('Reset Newspack', 'newspack'),
       url: resetUrl
     });
   }
-
   if (removeStarterContent) {
     footerElements.push({
       label: __('Remove Starter Content', 'newspack'),
       url: removeStarterContent
     });
   }
-
   if (supportEmail) {
     footerElements.push({
       label: __('Contact Support', 'newspack'),
       url: `mailto:${supportEmail}`
     });
   }
-
   return _jsxs("div", {
     className: "newspack-footer",
     children: [!simple && _jsx("div", {
@@ -109,5 +102,4 @@ const Footer = _ref => {
     })]
   });
 };
-
 export default Footer;