newspack-components 2.0.1 → 2.1.0

package/dist/esm/modal/style.scss

@@ -3,166 +3,54 @@
  */
 
 @import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
 
 .newspack-modal {
-	background: white;
-	border: 0;
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: auto;
-	max-height: 100%;
-	width: 100%;
-
-	@media screen and ( min-width: 600px ) {
-		border-radius: 3px;
-		max-width: 80%;
-		max-width: calc( 100% - 64px );
-	}
+	// Color
+	--wp-admin-theme-color: #{$primary-500};
+	--wp-admin-theme-color--rgb: #{$primary-500--rgb};
+	--wp-admin-theme-color-darker-10: #{$primary-600};
+	--wp-admin-theme-color-darker-10--rgb: #{$primary-600--rgb};
+	--wp-admin-theme-color-darker-20: #{$primary-700};
+	--wp-admin-theme-color-darker-20--rgb: #{$primary-700--rgb};
 
 	@media screen and ( min-width: 744px ) {
 		max-width: 680px;
+		width: 680px;
 
 		&--wide {
 			max-width: 1168px;
+			width: 1168px;
 		}
 	}
 
 	&--narrow {
 		max-width: 360px;
+		width: 360px;
 	}
 
-	// Header
-
-	.components-modal__header {
-		align-items: flex-start;
-		background: white;
-		border: 0;
-		height: auto;
-		justify-content: flex-end;
-		margin: 0 -32px 0;
-		padding: 32px 32px 0;
-		position: relative;
-
-		.components-modal__header-heading-container {
-			display: block;
-			margin-right: 16px;
-		}
-
-		.components-button.has-icon {
-			flex: 0 0 36px;
-			left: 0;
-			margin: -2px 0;
-
-			&:hover,
-			&[aria-expended='true'] {
-				color: $primary-500;
-			}
-
-			&:focus:not( :disabled ) {
-				box-shadow: 0 0 0 2px $primary-500;
-			}
-
-			svg {
-				width: 24px;
-				height: 24px;
-
-				+ span {
-					display: none;
-				}
-			}
-		}
-
-		.components-modal__header-heading {
-			color: $gray-900;
-			font-size: 21px;
-			font-weight: bold;
-			line-height: 32px;
-		}
-	}
-
-	// Content
-
-	.components-modal__content {
-		padding: 0 32px;
-		margin: 0;
-
-		&::before {
-			display: none;
-		}
-	}
-
-	// Typography
-
-	h2,
-	p {
-		line-height: 24px;
-		margin: 32px 0;
-		padding: 0;
-	}
-
-	h2 {
-		color: $gray-900;
-		font-size: 17px;
-		font-weight: bold;
-	}
-
-	p {
-		font-size: 14px;
-
-		&.is-dark {
-			color: $gray-900;
-		}
-	}
-
-	// Thematic Break
-
-	hr {
-		background: $gray-300;
-		border: 0;
-		height: 1px;
-		margin: 48px -48px;
-
-		@media screen and ( min-width: 744px ) {
-			margin: 64px -64px;
-		}
+	@media screen and ( min-width: 960px ) {
+		max-height: calc( 100% - 128px );
 	}
 
 	// Links
-
 	a {
-		color: $primary-500;
+		color: var( --wp-admin-theme-color );
 
 		&:active,
 		&:focus,
 		&:hover {
-			color: $primary-600;
-			text-decoration: none;
+			color: var( --wp-admin-theme-color-darker-10 );
 		}
 
 		&:focus {
-			box-shadow: none;
-			outline: 2px solid $primary-500;
-			outline-offset: 2px;
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			outline: 3px solid transparent;
 		}
 	}
-}
-
-// Overlay
 
-.newspack-modal__overlay {
-	background: rgba( black, 0.7 );
-}
-
-// Small Screens
-
-@media ( max-width: 599px ) {
-	.newspack-modal {
-		top: auto;
-
-		.components-modal__content {
-			height: auto;
+	.components-modal__content {
+		> *:last-child {
+			margin-bottom: 8px;
 		}
 	}
 }

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

@@ -26,9 +26,11 @@ class NewspackIcon extends Component {
   render() {
     const {
       className,
-      size
+      simple,
+      size,
+      white
     } = this.props;
-    const classes = classnames('newspack-icon', className);
+    const classes = classnames('newspack-icon', simple && 'newspack-icon--simple', white && 'newspack-icon--white', className);
     return _jsx(SVG, {
       xmlns: "http://www.w3.org/2000/svg",
       height: size,

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

@@ -8,4 +8,19 @@
 	background: $primary-500;
 	fill: white;
 	padding: 12px;
+
+	&--white {
+		background: white;
+		fill: $primary-500;
+	}
+
+	&--simple {
+		background: none;
+		fill: $primary-500;
+		padding: 0;
+	}
+
+	&#{&}--simple#{&}--white {
+		fill: white;
+	}
 }

package/dist/esm/notice/index.js

@@ -6,11 +6,13 @@
  * WordPress dependencies.
  */
 import { Component, RawHTML } from '@wordpress/element';
-import { Icon, check, help, info } from '@wordpress/icons';
+import { Icon, bug, check, help, info } from '@wordpress/icons';
+import { __ as alias__ } from '@wordpress/i18n';
 /**
  * Internal dependencies.
  */
 
+const __ = alias__;
 import './style.scss';
 /**
  * External dependencies.
@@ -27,6 +29,7 @@ class Notice extends Component {
   render() {
     const {
       className,
+      debugMode,
       isError,
       isHelp,
       isSuccess,
@@ -36,13 +39,15 @@ class Notice extends Component {
       style = {},
       children = null
     } = this.props;
-    const classes = classnames('newspack-notice', className, isError && 'newspack-notice__is-error', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
+    const classes = classnames('newspack-notice', className, debugMode && 'newspack-notice__is-debug', isError && 'newspack-notice__is-error', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
     let noticeIcon;
 
     if (isHelp) {
       noticeIcon = help;
     } else if (isSuccess) {
       noticeIcon = check;
+    } else if (debugMode) {
+      noticeIcon = bug;
     } else {
       noticeIcon = info;
     }
@@ -56,7 +61,7 @@ class Notice extends Component {
         className: "newspack-notice__content",
         children: [rawHTML ? _jsx(RawHTML, {
           children: noticeText
-        }) : noticeText, children || null]
+        }) : noticeText, debugMode && __('Debug Mode', 'newspack'), children || null]
       })]
     });
   }

package/dist/esm/notice/style.scss

@@ -6,14 +6,11 @@
 @import '../../../shared/scss/colors';
 
 .newspack-notice {
-	align-items: flex-start;
+	align-items: center;
 	background: $gray-100;
-	border-radius: 3px;
 	color: $gray-900;
 	display: flex;
-	font-size: 14px;
 	justify-content: flex-start;
-	line-height: 24px;
 	margin: 32px 0;
 	padding: 6px 8px;
 
@@ -24,8 +21,25 @@
 		margin-right: 4px;
 	}
 
+	&__is-debug {
+		background: $primary-700;
+		border-radius: 2px;
+		bottom: 16px;
+		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		color: white;
+		font-weight: bold;
+		margin: 0 16px;
+		position: fixed;
+		text-transform: uppercase;
+		z-index: 9997;
+
+		> svg {
+			fill: white;
+		}
+	}
+
 	&__is-error {
-		background: lighten( $alert-red, 54% );
+		background: lighten( $alert-red, 51% );
 
 		> svg {
 			fill: $alert-red;
@@ -34,7 +48,7 @@
 	}
 
 	&__is-help {
-		background: $primary-000;
+		background: $primary-050;
 
 		> svg {
 			fill: $primary-500;
@@ -42,7 +56,7 @@
 	}
 
 	&__is-success {
-		background: lighten( $alert-green, 47% );
+		background: lighten( $alert-green, 42% );
 
 		> svg {
 			fill: $alert-green;
@@ -50,7 +64,7 @@
 	}
 
 	&__is-warning {
-		background: lighten( $alert-yellow, 36% );
+		background: lighten( $alert-yellow, 30% );
 
 		> svg {
 			fill: $alert-yellow;
@@ -58,9 +72,23 @@
 		}
 	}
 
-	&__content {
+	& &__content {
 		> div > * {
-			margin: 0;
+			margin: 0 !important;
+		}
+
+		a {
+			color: inherit;
+
+			&:active,
+			&:focus,
+			&:hover {
+				color: inherit;
+			}
+
+			&:focus {
+				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentColor;
+			}
 		}
 	}
 

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

@@ -33,6 +33,7 @@ import classnames from 'classnames';
 
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 
 class PluginInstaller extends Component {
   constructor() {
@@ -111,6 +112,7 @@ class PluginInstaller extends Component {
         const {
           pluginInfo
         } = this.state;
+        this.props.onInstalled(slug);
         this.updatePluginInfo({ ...pluginInfo,
           [slug]: { ...response,
             installationStatus: PLUGIN_STATE_ACTIVE
@@ -215,7 +217,7 @@ class PluginInstaller extends Component {
       const plugin = pluginInfo[slug];
       return plugin.Status !== 'active' && plugin.installationStatus === PLUGIN_STATE_NONE;
     });
-    return _jsxs("div", {
+    return _jsxs(_Fragment, {
       children: [(!pluginInfo || !Object.keys(pluginInfo).length) && _jsxs("div", {
         className: "newspack-plugin-installer_is-waiting",
         children: [_jsx(Waiting, {
@@ -291,6 +293,7 @@ class PluginInstaller extends Component {
 }
 
 PluginInstaller.defaultProps = {
-  onStatus: () => {}
+  onStatus: () => {},
+  onInstalled: () => {}
 };
 export default PluginInstaller;

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

@@ -6,18 +6,25 @@
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 import { __ as alias__ } from '@wordpress/i18n';
+const __ = alias__;
+import { CheckboxControl } from '@wordpress/components';
 /**
  * Internal dependencies
  */
 
-const __ = alias__;
-import { ActionCard, Grid, Button, TextControl, CheckboxControl, SelectControl } from '../';
+import { ActionCard, Button, Grid, Notice, SelectControl, TextControl } from '../';
+import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 
+const isSelectControl = setting => {
+  return Array.isArray(setting.options) && setting.options.length;
+};
+
 const getControlComponent = setting => {
-  if (Array.isArray(setting.options) && setting.options.length) {
+  if (isSelectControl(setting)) {
     return SelectControl;
   }
 
@@ -43,13 +50,22 @@ const getControlType = setting => {
     case 'text':
       return 'text';
 
+    case 'password':
+      return 'password';
+
+    case 'boolean':
+    case 'checkbox':
+      return 'checkbox';
+
     default:
       return null;
   }
 };
 
-const SettingsSection = _ref => {
-  let {
+const SettingsSection = props => {
+  const {
+    error,
+    sectionKey,
     active,
     title,
     description,
@@ -57,61 +73,73 @@ const SettingsSection = _ref => {
     disabled,
     onChange,
     onUpdate
-  } = _ref;
-
-  const getControlProps = setting => {
-    var _setting$options;
-
-    return {
-      disabled,
-      name: `${setting.section}_${setting.key}`,
-      type: getControlType(setting),
-      label: setting.description,
-      help: setting.help || null,
-      options: ((_setting$options = setting.options) === null || _setting$options === void 0 ? void 0 : _setting$options.map(option => ({
-        value: option.value,
-        label: option.name
-      }))) || null,
-      value: setting.value,
-      checked: setting.type === 'boolean' ? !!setting.value : null,
-      onChange: value => {
-        onChange(setting.key, value);
-      }
-    };
+  } = props;
+
+  const getControlProps = setting => ({
+    disabled,
+    name: `${setting.section}_${setting.key}`,
+    type: getControlType(setting),
+    label: setting.description,
+    help: setting.help || null,
+    options: setting.options?.map(option => ({
+      value: option.value,
+      label: option.name || option.label
+    })) || null,
+    value: setting.value,
+    multiple: isSelectControl(setting) && setting.multiple ? true : null,
+    checked: setting.type === 'boolean' ? !!setting.value : null,
+    onChange: value => {
+      onChange(setting.key, value);
+    }
+  });
+
+  const createFilter = function (name) {
+    let defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return applyFilters(`newspack.settingSection.${sectionKey}.${name}`, defaultComponent, props);
   };
 
+  let columns = 2;
+
+  if (fields.length % 3 === 0) {
+    columns = 3;
+  } else if (fields.length === 1) {
+    columns = 1;
+  }
+
   return _jsx(ActionCard, {
     isMedium: true,
     disabled: disabled,
     title: title,
     description: description,
     toggleChecked: active,
-    hasGreyHeader: active !== null,
-    toggleOnChange: value => onUpdate({
+    hasGreyHeader: active || null === active,
+    toggleOnChange: active !== null ? value => onUpdate({
       active: value
-    }),
+    }) : null,
+    actionContent: (active || null === active) && createFilter('buttons', _jsx(Button, {
+      variant: "primary",
+      disabled: disabled,
+      onClick: () => {
+        onUpdate();
+      },
+      children: __('Save Settings', 'newspack')
+    })),
     children: (active || active === null) && _jsxs(Fragment, {
-      children: [_jsx(Grid, {
-        columns: fields.length % 3 === 0 ? 3 : 2,
+      children: [error?.message && _jsx(Notice, {
+        noticeText: error.message,
+        isError: true
+      }), createFilter('beforeControls'), _jsx(Grid, {
+        columns: columns,
         gutter: 32,
         children: fields.map(setting => {
           const Control = getControlComponent(setting); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
 
-          return _jsx(Control, { ...getControlProps(setting)
-          }, setting.key);
-        })
-      }), _jsx("div", {
-        className: "newspack-buttons-card",
-        style: {
-          margin: '32px 0 0'
-        },
-        children: _jsx(Button, {
-          isPrimary: true,
-          disabled: disabled,
-          onClick: () => {
-            onUpdate();
-          },
-          children: __('Save settings', 'newspack')
+          return applyFilters(`newspack.settingsSection.${sectionKey}.control`, _jsx(Control, { ...getControlProps(setting)
+          }, setting.key), {
+            sectionKey,
+            setting,
+            onChange
+          });
         })
       })]
     })