newspack-components 2.0.3 → 2.2.0

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

@@ -2,179 +2,36 @@
  * Color Picker
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
 .newspack-color-picker {
 	position: relative;
-	margin: 32px 0;
-
-	&__main {
-		height: 48px;
-	}
-	&__expander {
-		padding: 11px 3px;
-		justify-content: space-between;
-		&,
-		> div {
-			display: flex;
-			align-items: center;
-		}
-		> div {
-			margin: 0 4px;
-		}
-		div + div {
-			margin-left: 8px;
-		}
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-		&--expanded:focus {
-			border-bottom-color: white;
-			box-shadow: inset 2px 2px 0 0 $primary-500, inset -2px 2px 0 0 $primary-500;
-
-			+ .components-color-picker {
-				position: relative;
-				border-bottom-color: $primary-500;
-				border-left-color: $primary-500;
-				border-right-color: $primary-500;
-				box-shadow: inset 2px -2px 0 0 $primary-500, inset -2px -2px 0 0 $primary-500;
 
-				&::before,
-				&::after {
-					background: $primary-500;
-					display: block;
-					content: '';
-					height: 1px;
-					left: -1px;
-					position: absolute;
-					top: -1px;
-					width: 3px;
-				}
-
-				&::after {
-					left: auto;
-					right: -1px;
-				}
-			}
-		}
-	}
-	&__indicator {
-		border: 1px solid rgba( black, 0.125 );
-		border-radius: 50%;
-		height: 24px;
-		overflow: hidden;
-		width: 24px;
-	}
 	&__label {
-		align-items: center;
-		color: $gray-900;
-		display: flex;
-		font-weight: bold;
-	}
-
-	&__expander,
-	.components-color-picker {
-		background-color: white;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		&--expanded {
-			border-bottom-color: white;
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-	}
-	.components-color-picker {
-		padding: 8px;
-		position: relative;
-		z-index: 1;
-		padding-top: 0;
-		border-top: none;
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
-
-	// Overrides of @wordpress/components component
-
-	// Inputs
-
-	.components-color-picker__body {
-		padding: 16px 0 0;
-	}
-
-	.components-color-picker__inputs-wrapper {
-		margin: 0;
-	}
-
-	.components-color-picker__inputs-fields {
-		margin-right: 8px;
+		margin-bottom: 8px;
 	}
 
-	.components-color-picker__inputs-field {
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
-		margin: 0;
-
-		+ .components-color-picker__inputs-field {
-			margin-left: 8px;
-		}
-
-		label {
-			color: $gray-900;
-			font-size: inherit;
-			font-weight: bold;
-			line-height: inherit;
-			margin: 0;
-		}
-
-		input[type='number'],
-		input[type='text'] {
-			background: white;
-			border: 1px solid $gray-300;
-			border-radius: 3px;
-			box-shadow: none;
-			color: inherit;
-			font-size: 16px;
-			line-height: inherit;
-			margin: 0;
-			min-height: 48px;
-			padding: 11px 8px;
-			transition: border-color 125ms ease-in-out, box-shadow 125ms ease-in-out;
-			width: 100%;
-
-			@media screen and ( min-width: 768px ) {
-				font-size: inherit;
-			}
-
-			&:focus {
-				border-color: $primary-500;
-				box-shadow: 0 0 0 2px $primary-500;
-			}
-		}
-
-		// Reset
+	&__expander {
+		box-shadow: inset 0 0 0 1px rgb( 0 0 0 / 20% );
+		border-radius: 2px;
+		height: 64px;
+		padding: 12px;
+		text-align: right;
+		text-transform: uppercase;
 
-		.components-base-control__field,
-		.components-base-control__label {
-			display: block;
-			margin: 0;
+		&:focus-visible {
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			border-color: white;
 		}
 	}
 
-	.components-color-picker__inputs-toggle {
-		height: 36px;
-		margin-bottom: 6px;
-
-		&:active,
-		&:focus:not( :disabled ),
-		&:hover {
-			color: $primary-500;
-		}
-
-		&:focus:not( :disabled ) {
-			box-shadow: 0 0 0 3px $primary-500;
+	&__main {
+		background: white;
+		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		margin: 12px 0;
+		position: absolute;
+		z-index: 2;
+
+		&:empty {
+			display: none;
 		}
 	}
 }

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,31 +2,20 @@
  * Custom Select Control
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-custom-select-control {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
 	label {
-		color: $gray-900;
 		display: block;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
-		padding-bottom: 0 !important;
+		margin-bottom: 8px;
 	}
 
 	.components-custom-select-control__button {
-		border-color: $gray-300;
-		border-radius: 3px;
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
-		min-height: 48px;
+		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;
 
@@ -34,17 +23,16 @@
 		&:focus,
 		&:hover,
 		&[aria-expanded='true'] {
-			color: $gray-700;
+			color: wp-colors.$gray-900;
 		}
 
 		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px #36f;
+			border-color: var( --wp-admin-theme-color );
+			box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color );
 		}
 
 		&-icon {
 			right: 3px;
-			transition: transform 50ms ease-in-out;
 			width: 18px;
 		}
 
@@ -54,10 +42,9 @@
 	}
 
 	.components-custom-select-control__menu {
-		border-color: $gray-300;
-		border-radius: 3px;
+		border-color: wp-colors.$gray-700;
+		border-radius: 2px;
 		box-shadow: 0 4px 8px rgba( black, 0.08 );
-		color: $gray-700;
 		margin: 8px 0 0;
 		min-width: 222px;
 	}
@@ -76,8 +63,7 @@
 		}
 
 		&.is-header {
-			background: $gray-100;
-			color: $gray-900;
+			background: wp-colors.$gray-100;
 			cursor: default;
 			font-weight: bold;
 			margin-left: 0;
@@ -86,7 +72,7 @@
 
 		&.is-highlighted {
 			background: white;
-			color: $primary-500;
+			color: var( --wp-admin-theme-color );
 		}
 
 		&.is-selected {
@@ -103,21 +89,4 @@
 			}
 		}
 	}
-
-	// Multiple Select Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-category-autocomplete,
-	+ .newspack-select-control,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
 }

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,65 +8,72 @@
 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
   } = _ref;
-  const componentsDemo = window && window.newspack_urls && window.newspack_urls.components_demo;
-  const setupWizard = window && window.newspack_urls && window.newspack_urls.setup_wizard;
-  const resetUrl = window && window.newspack_urls && window.newspack_urls.reset_url;
-  const pluginVersion = window && window.newspack_urls && window.newspack_urls.plugin_version;
-  const removeStarterContent = window && window.newspack_urls && window.newspack_urls.remove_starter_content;
+  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: pluginVersion.url
+    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: 'https://newspack.pub/support/',
+    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", {
@@ -95,5 +102,4 @@ const Footer = _ref => {
     })]
   });
 };
-
 export default Footer;

package/dist/esm/footer/style.scss

@@ -2,16 +2,15 @@
  * Footer
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-footer {
 	align-items: stretch;
 	background: white;
-	border: 0 solid $gray-300;
+	border: 0 solid wp-colors.$gray-300;
 	border-width: 1px 0;
 	bottom: 0;
-	color: $gray-700;
+	color: wp-colors.$gray-700;
 	display: flex;
 	flex-wrap: wrap;
 	font-size: 12px;
@@ -45,23 +44,23 @@
 
 	li {
 		margin: 8px;
-	}
 
-	a {
-		align-items: flex-end;
-		color: inherit;
-		display: flex;
+		a {
+			align-items: flex-end;
+			color: inherit;
+			display: flex;
 
-		&:active,
-		&:focus,
-		&:hover {
-			color: $gray-900;
+			&:active,
+			&:focus,
+			&:hover {
+				color: wp-colors.$gray-900;
+			}
 		}
 	}
 
 	&__logo {
 		align-items: center;
-		background: $gray-900;
+		background: wp-colors.$gray-900;
 		display: flex;
 		margin: 0 0 -1px;
 		padding: 16px;

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

@@ -7,19 +7,18 @@
  */
 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 } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 class FormTokenField extends Component {
   /**
    * Render.
@@ -41,13 +40,11 @@ class FormTokenField extends Component {
       children: [_jsx(BaseComponent, {
         className: classes,
         ...otherProps
-      }), description && _jsx("div", {
-        className: "i",
+      }), description && _jsx("p", {
+        className: "newspack-form-token-field__help",
         children: description
       })]
     });
   }
-
 }
-
 export default FormTokenField;