newspack-components 3.1.0 → 4.0.0

package/dist/esm/index.js

@@ -4,6 +4,7 @@ export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
 export { default as Button } from './button';
 export { default as ButtonCard } from './button-card';
+export { default as BoxContrast } from './box-contrast';
 export { default as Card } from './card';
 export { default as CategoryAutocomplete } from './category-autocomplete';
 export { default as ColorPicker } from './color-picker';
@@ -18,9 +19,7 @@ export { default as GlobalNotices } from './global-notices';
 export { default as Grid } from './grid';
 export { default as Modal } from './modal';
 export { default as NewspackIcon } from './newspack-icon';
-export { default as NewspackLogo } from './newspack-logo';
 export { default as Notice } from './notice';
-export { default as PatronsLogo } from './patrons-logo';
 export { default as PluginInstaller } from './plugin-installer';
 export { default as PluginSettings } from './plugin-settings';
 export { default as PluginToggle } from './plugin-toggle';
@@ -29,7 +28,6 @@ export { default as ProgressBar } from './progress-bar';
 export { default as RadioControl } from './radio-control';
 export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
-export { default as DateRangePicker } from './date-range-picker';
 export { default as Settings } from './settings';
 export { default as StepsList } from './steps-list';
 export { default as StepsListItem } from './steps-list-item';

package/dist/esm/modal/index.js

@@ -22,9 +22,12 @@ function Modal({
   className,
   isWide,
   isNarrow,
+  hideTitle,
   ...otherProps
 }, ref) {
-  const classes = classnames('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
+  const classes = classnames('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', hideTitle && 'newspack-modal--hide-title',
+  // Note: also hides the X close button.
+  className);
   return /*#__PURE__*/_jsx(BaseComponent, {
     className: classes,
     ...otherProps,

package/dist/esm/modal/style.scss

@@ -2,16 +2,16 @@
  * Modal
  */
 
-@use "../../../shared/scss/colors";
+@use "../../../colors/colors.module" as colors;
 
 .newspack-modal {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
 
 	@media screen and ( min-width: 744px ) {
 		max-width: 680px;
@@ -28,6 +28,17 @@
 		width: 360px;
 	}
 
+	&--hide-title {
+		.components-modal__header {
+			display: none;
+		}
+
+		.components-modal__content {
+			margin-top: 0;
+			padding-top: 32px;
+		}
+	}
+
 	@media screen and ( min-width: 960px ) {
 		max-height: calc(100% - 128px);
 	}

package/dist/esm/newspack-icon/index.js

@@ -34,12 +34,12 @@ class NewspackIcon extends Component {
       xmlns: "http://www.w3.org/2000/svg",
       height: size,
       width: size,
-      viewBox: "0 0 32 32",
+      viewBox: "0 0 24 24",
       className: classes,
       children: /*#__PURE__*/_jsx(Path, {
         fillRule: "evenodd",
         clipRule: "evenodd",
-        d: "M32 16c0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16S7.164 0 16 0s16 7.164 16 16zm-10.732.622h1.72v-1.124h-2.823l1.103 1.124zm-3.249-3.31h4.97v-1.124h-6.072l1.102 1.124zm-3.248-3.31h8.217V8.877h-9.32l1.103 1.125zM9.01 8.877l13.977 14.246h-4.66l-5.866-5.98v5.98h-3.45V8.877z"
+        d: "M24 12C24 18.6271 18.6271 24 12 24C5.37213 24 0 18.6271 0 12C0 5.3729 5.3729 0 12 0C18.6271 0 24 5.3729 24 12ZM17.4545 17.4546L6.54545 6.54545V17.4545H8.72727V11.8182L14.3636 17.4546H17.4545ZM11.2727 8.18182H17.4545V6.54545H9.63636L11.2727 8.18182ZM17.4545 11.2727H14.3636L12.7273 9.63636H17.4545V11.2727ZM17.4545 12.7273V14.3636L15.8182 12.7273H17.4545Z"
       })
     });
   }

package/dist/esm/newspack-icon/style.scss

@@ -2,21 +2,19 @@
  * Newspack Icon
  */
 
-@use "../../../shared/scss/colors";
-
 .newspack-icon {
-	background: colors.$primary-500;
+	background: var(--wp-admin-theme-color);
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: colors.$primary-500;
+		fill: var(--wp-admin-theme-color);
 	}
 
 	&--simple {
 		background: none;
-		fill: colors.$primary-500;
+		fill: var(--wp-admin-theme-color);
 		padding: 0;
 	}
 

package/dist/esm/notice/index.js

@@ -7,7 +7,6 @@
  */
 import { Component, RawHTML } from '@wordpress/element';
 import { Icon, bug, check, help, info } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
@@ -57,7 +56,7 @@ class Notice extends Component {
         className: "newspack-notice__content",
         children: [rawHTML ? /*#__PURE__*/_jsx(RawHTML, {
           children: noticeText
-        }) : noticeText, debugMode && __('Debug Mode', 'newspack-plugin'), children || null]
+        }) : noticeText, children || null]
       })]
     });
   }

package/dist/esm/notice/style.scss

@@ -4,7 +4,7 @@
 
 @use "sass:color";
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
+@use "../../../colors/colors.module" as colors;
 
 .newspack-notice {
 	align-items: center;
@@ -13,7 +13,7 @@
 	display: flex;
 	justify-content: flex-start;
 	margin: 32px 0;
-	padding: 6px 8px;
+	padding: 8px 12px;
 
 	> svg {
 		display: block;
@@ -23,24 +23,26 @@
 	}
 
 	&__is-debug {
-		background: colors.$primary-700;
-		border-radius: 2px;
+		background: colors.$primary-600;
+		border-radius: 50%;
 		bottom: 16px;
 		box-shadow: 0 0 8px 4px rgba(black, 0.08);
 		color: white;
 		font-weight: bold;
 		margin: 0 16px;
+		padding: 6px;
 		position: fixed;
 		text-transform: uppercase;
 		z-index: 9997;
 
 		> svg {
 			fill: white;
+			margin: 0;
 		}
 	}
 
 	&__is-error {
-		background: color.adjust(wp-colors.$alert-red, $lightness: 51%);
+		background: color.adjust(wp-colors.$alert-red, $lightness: 35%);
 
 		> svg {
 			fill: wp-colors.$alert-red;
@@ -49,7 +51,7 @@
 	}
 
 	&__is-handoff {
-		background: color.adjust(wp-colors.$alert-yellow, $lightness: 30%);
+		background: color.adjust(wp-colors.$alert-yellow, $lightness: 35%);
 		margin-top: 0;
 		position: sticky;
 		top: 46px;
@@ -64,12 +66,12 @@
 		background: colors.$primary-050;
 
 		> svg {
-			fill: colors.$primary-500;
+			fill: var(--wp-admin-theme-color);
 		}
 	}
 
 	&__is-success {
-		background: color.adjust(wp-colors.$alert-green, $lightness: 42%);
+		background: color.adjust(wp-colors.$alert-green, $lightness: 45%);
 
 		> svg {
 			fill: wp-colors.$alert-green;
@@ -77,7 +79,7 @@
 	}
 
 	&__is-warning {
-		background: color.adjust(wp-colors.$alert-yellow, $lightness: 30%);
+		background: color.adjust(wp-colors.$alert-yellow, $lightness: 35%);
 
 		> svg {
 			fill: wp-colors.$alert-yellow;

package/dist/esm/plugin-installer/index.js

@@ -183,8 +183,8 @@ class PluginInstaller extends Component {
       pluginInfo
     } = this.state;
     const {
-      is_atomic: isAtomic
-    } = window;
+      is_managed: isManaged
+    } = window.newspack_aux_data || {};
     const slugs = Object.keys(pluginInfo);
 
     // Store all plugin status info for installer button text value based on current status.
@@ -226,7 +226,7 @@ class PluginInstaller extends Component {
         } else if (!installable) {
           actionText = /*#__PURE__*/_jsxs("span", {
             className: "newspack-plugin-installer__status",
-            children: [isAtomic ? __('Contact Newspack support to install', 'newspack-plugin') : __('Plugin must be installed manually', 'newspack-plugin'), /*#__PURE__*/_jsx("span", {
+            children: [isManaged ? __('Contact Newspack support to install', 'newspack-plugin') : __('Plugin must be installed manually', 'newspack-plugin'), /*#__PURE__*/_jsx("span", {
               className: "newspack-checkbox-icon"
             })]
           });

package/dist/esm/plugin-settings/SettingsSection.js

@@ -51,6 +51,7 @@ const getControlType = setting => {
   }
 };
 const SettingsSection = props => {
+  var _props$id;
   const [saveDisabled, setSaveDisabled] = useState(true);
   const {
     error,
@@ -91,6 +92,7 @@ const SettingsSection = props => {
     columns = 1;
   }
   return /*#__PURE__*/_jsx(ActionCard, {
+    id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : null,
     isMedium: true,
     disabled: disabled,
     title: title,

package/dist/esm/plugin-settings/index.js

@@ -180,7 +180,8 @@ class PluginSettings extends Component {
       title,
       description,
       hasGreyHeader,
-      children
+      children,
+      titleLevel = 1
     } = this.props;
     const {
       settings,
@@ -190,6 +191,7 @@ class PluginSettings extends Component {
     return /*#__PURE__*/_jsxs(Fragment, {
       children: [title && /*#__PURE__*/_jsx(SectionHeader, {
         title: title,
+        heading: titleLevel,
         description: description
       }), error && /*#__PURE__*/_jsx(Notice, {
         isError: true,
@@ -200,6 +202,7 @@ class PluginSettings extends Component {
         }),
         children: [Object.keys(settings).map(sectionKey => /*#__PURE__*/_jsx(SettingsSection, {
           disabled: inFlight,
+          id: `plugin-settings-${sectionKey}`,
           sectionKey: sectionKey,
           title: this.getSectionTitle(sectionKey),
           description: this.getSectionDescription(sectionKey),

package/dist/esm/plugin-toggle/index.js

@@ -97,6 +97,7 @@ class PluginToggle extends Component {
       pluginInfo
     } = this.state;
     return this.prepareDataForRender(plugins, pluginInfo).map((plugin, index) => {
+      var _plugin$onClick;
       const {
         name,
         description,
@@ -113,6 +114,7 @@ class PluginToggle extends Component {
         description: description,
         actionText: this.actionTextForPlugin(plugin),
         handoff: handoff,
+        onClick: (_plugin$onClick = plugin.onClick) !== null && _plugin$onClick !== void 0 ? _plugin$onClick : null,
         href: href,
         toggle: true,
         toggleChecked: this.isPluginInstalledAndActive(plugin),

package/dist/esm/popover/style.scss

@@ -2,7 +2,6 @@
  * Popover
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-popover {
@@ -16,7 +15,7 @@
 			padding: 6px 8px;
 
 			&:hover {
-				color: colors.$primary-500;
+				color: var(--wp-admin-theme-color);
 
 				.components-menu-items__item-icon {
 					fill: currentcolor;
@@ -24,7 +23,7 @@
 			}
 
 			&:focus:not(:disabled) {
-				box-shadow: inset 0 0 0 2px colors.$primary-500;
+				box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 				position: relative;
 				z-index: 1;
 			}
@@ -42,7 +41,7 @@
 					&:focus,
 					&:focus:enabled &:hover,
 					&:not(:disabled, [aria-disabled="true"], .is-default):hover {
-						color: colors.$primary-500;
+						color: var(--wp-admin-theme-color);
 					}
 				}
 
@@ -89,8 +88,8 @@
 					min-height: 36px;
 
 					&:focus ~ div.components-input-control__backdrop {
-						border-color: colors.$primary-500;
-						box-shadow: inset 0 0 0 1px colors.$primary-500;
+						border-color: var(--wp-admin-theme-color);
+						box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 					}
 				}
 

package/dist/esm/progress-bar/style.scss

@@ -2,7 +2,6 @@
  * Progress Bar
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-progress-bar {
@@ -35,7 +34,7 @@
 	}
 
 	&__bar {
-		background-color: colors.$primary-500;
+		background-color: var(--wp-admin-theme-color);
 		height: 8px;
 		transition: width 125ms ease-in-out;
 	}

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

@@ -2,7 +2,6 @@
  * Radio Control
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-radio-control {
@@ -24,7 +23,6 @@
 	}
 
 	// Options
-
 	.components-radio-control__option {
 		align-items: center;
 		display: flex;
@@ -40,7 +38,6 @@
 	}
 
 	// Radio
-
 	input[type="radio"] {
 		height: 24px;
 		width: 24px;
@@ -55,8 +52,8 @@
 		}
 
 		&:checked {
-			background-color: colors.$primary-500;
-			border-color: colors.$primary-500;
+			background-color: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
 
 			&::before {
 				border: none;
@@ -64,20 +61,18 @@
 		}
 
 		&:focus {
-			border-color: colors.$primary-500;
-			box-shadow: 0 0 0 2px white, 0 0 0 3.5px colors.$primary-500;
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 2px white, 0 0 0 3.5px var(--wp-admin-theme-color);
 		}
 	}
 
 	// Multiple Radio Controls
-
 	& + & {
 		margin-bottom: 32px;
 		margin-top: -16px;
 	}
 
 	// Multiple Controls
-
 	+ .newspack-select-control,
 	+ .newspack-text-control {
 		margin-bottom: 32px;
@@ -85,7 +80,6 @@
 	}
 
 	// Reset
-
 	.components-base-control__field,
 	.components-base-control__label,
 	.components-base-control__help {

package/dist/esm/section-header/index.js

@@ -17,6 +17,26 @@ import './style.scss';
  * External dependencies
  */
 import classnames from 'classnames';
+
+/**
+ * Represents a section header component.
+ *
+ * @typedef {Object} SectionHeaderProps
+ * @property {boolean}           [centered=false] - Indicates if the header is centered.
+ * @property {?string}           [className=null] - Additional CSS class name.
+ * @property {string|Function|*} [description]    - Description of the section.
+ * @property {number}            [heading=2]      - HTML heading level, e.g., 1 for h1, 2 for h2, etc.
+ * @property {boolean}           [isWhite=false]  - Indicates if the header should use a white theme.
+ * @property {boolean}           [noMargin=false] - Indicates if the header should have no margin.
+ * @property {string}            title            - The title of the section.
+ * @property {?string}           [id=null]        - Optional ID for the header element.
+ */
+
+/**
+ * Creates a section header.
+ *
+ * @param {SectionHeaderProps} props - The properties for the section header.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SectionHeader = ({
   centered = false,
@@ -60,6 +80,8 @@ const SectionHeader = ({
         children: description
       }), typeof description === 'function' && /*#__PURE__*/_jsx("p", {
         children: description()
+      }), description && typeof description !== 'string' && typeof description !== 'function' && /*#__PURE__*/_jsx("p", {
+        children: description
       })]
     })
   });

package/dist/esm/select-control/ButtonGroupControl.js

@@ -18,6 +18,7 @@ const ButtonGroupControl = ({
   buttonOptions,
   buttonSmall,
   className,
+  help,
   hideLabelFromVision,
   label,
   onChange,
@@ -26,6 +27,7 @@ const ButtonGroupControl = ({
   const id = hooks.useUniqueId('button-group');
   return /*#__PURE__*/_jsx(BaseControl, {
     label: label,
+    help: help,
     hideLabelFromVision: hideLabelFromVision,
     id: id.current,
     className: classnames(className, 'components-select-control'),

package/dist/esm/settings/SettingsCard.js

@@ -11,8 +11,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const SettingsCard = ({
   children,
   className,
-  columns,
-  gutter,
+  columns = 3,
+  gutter = 32,
   noBorder,
   rowGap,
   ...props
@@ -31,8 +31,4 @@ const SettingsCard = ({
     })
   });
 };
-SettingsCard.defaultProps = {
-  columns: 3,
-  gutter: 32
-};
 export default SettingsCard;

package/dist/esm/sortable-newsletter-list-control/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Icon, chevronUp, chevronDown, trash } from '@wordpress/icons';
-import { Notice } from '@wordpress/components';
+import { CheckboxControl, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -41,9 +41,9 @@ export default function SortableNewsletterListControl({
         }
         return /*#__PURE__*/_jsx(ActionCard, {
           title: list.name,
-          description: () => /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx("input", {
-              type: "checkbox",
+          description: () => /*#__PURE__*/_jsx(_Fragment, {
+            children: /*#__PURE__*/_jsx(CheckboxControl, {
+              label: __('Checked by default', 'newspack-plugin'),
               checked: selectedList.checked,
               onChange: () => {
                 const index = selected.findIndex(({
@@ -53,16 +53,18 @@ export default function SortableNewsletterListControl({
                 newSelected[index].checked = !newSelected[index].checked;
                 onChange(newSelected);
               }
-            }), __('Checked by default', 'newspack-plugin')]
+            })
           }),
           isSmall: true,
+          hasWhiteHeader: true,
           actionText: /*#__PURE__*/_jsx(_Fragment, {
             children: /*#__PURE__*/_jsx(Button, {
               onClick: () => onChange(selected.filter(({
                 id
               }) => id !== selectedList.id)),
               label: __('Remove', 'newspack-plugin'),
-              icon: trash
+              icon: trash,
+              isDestructive: true
             })
           }),
           children: selected.length > 1 && /*#__PURE__*/_jsxs("span", {

package/dist/esm/sortable-newsletter-list-control/style.scss

@@ -1,10 +1,15 @@
 .newspack__newsletter-list-control {
+	grid-column: span 3;
+
 	&__selected {
 		.newspack-card {
 			display: flex;
 			justify-content: center;
 			min-height: 40px;
 			flex-direction: row;
+			&:first-of-type {
+				margin-top: 0 !important;
+			}
 			.newspack-action-card__region {
 				align-items: center;
 				display: flex;
@@ -14,11 +19,16 @@
 			.newspack-action-card__region-top {
 				flex: 1;
 				order: 2;
+
+				.newspack-grid {
+					margin: 0;
+				}
 			}
 			.newspack-action-card__region-children {
-				padding: 12px;
+				padding: 12px !important;
 			}
 		}
+
 	}
 	&__sort-handle {
 		display: flex;

package/dist/esm/steps-list/style.scss

@@ -1,6 +1,3 @@
-@use "../../../shared/scss/colors";
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
 .steps-list {
 	margin-left: auto;
 	margin-right: auto;

package/dist/esm/steps-list-item/style.scss

@@ -1,4 +1,3 @@
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .steps-list-item {
@@ -35,7 +34,7 @@
 		background: #fff;
 		border: 1px solid currentcolor;
 		border-radius: 100%;
-		color: colors.$primary-500;
+		color: var(--wp-admin-theme-color);
 		display: flex;
 		height: 28px;
 		justify-content: center;

package/dist/esm/style-card/index.js

@@ -43,6 +43,7 @@ class StyleCard extends Component {
       children: [/*#__PURE__*/_jsxs("div", {
         className: "newspack-style-card__image",
         children: [imageType === 'html' ? /*#__PURE__*/_jsx("div", {
+          className: "newspack-style-card__image-html",
           dangerouslySetInnerHTML: image
         }) : /*#__PURE__*/_jsx("img", {
           src: image,

package/dist/esm/style-card/style.scss

@@ -2,7 +2,6 @@
  * Style Card
  */
 
-@use "../../../shared/scss/colors";
 @use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-style-card {
@@ -15,7 +14,7 @@
 		text-align: center;
 
 		.newspack-style-card__is-active & {
-			color: colors.$primary-500;
+			color: var(--wp-admin-theme-color);
 		}
 	}
 
@@ -48,8 +47,8 @@
 		}
 
 		.newspack-style-card__is-active & {
-			border-color: colors.$primary-500;
-			box-shadow: inset 0 0 0 1px colors.$primary-500;
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 
 			img {
 				position: relative;
@@ -88,7 +87,7 @@
 		}
 
 		.newspack-style-card__is-active & {
-			box-shadow: inset 0 0 0 1px colors.$primary-500;
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 		}
 	}
 }

package/dist/esm/style.scss

@@ -1,4 +1,15 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../colors/colors.module" as colors;
+
+:root {
+	// WP Admin
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
+}
 
 // Buttons Card
 
@@ -13,6 +24,10 @@
 	&:empty {
 		display: none;
 	}
+
+	+ .newspack-card {
+		margin-top: 64px;
+	}
 }
 
 // Checkboxes