newspack-components 2.1.0 → 2.2.1

package/dist/cjs/index.js

@@ -1,10 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () {
+    return _accordion.default;
+  }
+});
 Object.defineProperty(exports, "ActionCard", {
   enumerable: true,
   get: function () {
@@ -95,6 +100,12 @@ Object.defineProperty(exports, "Handoff", {
     return _handoff.default;
   }
 });
+Object.defineProperty(exports, "HandoffMessage", {
+  enumerable: true,
+  get: function () {
+    return _handoffMessage.default;
+  }
+});
 Object.defineProperty(exports, "ImageUpload", {
   enumerable: true,
   get: function () {
@@ -197,6 +208,18 @@ Object.defineProperty(exports, "Settings", {
     return _settings.default;
   }
 });
+Object.defineProperty(exports, "StepsList", {
+  enumerable: true,
+  get: function () {
+    return _stepsList.default;
+  }
+});
+Object.defineProperty(exports, "StepsListItem", {
+  enumerable: true,
+  get: function () {
+    return _stepsListItem.default;
+  }
+});
 Object.defineProperty(exports, "StyleCard", {
   enumerable: true,
   get: function () {
@@ -257,89 +280,50 @@ Object.defineProperty(exports, "withWizardScreen", {
     return _withWizardScreen.default;
   }
 });
-
+var _accordion = _interopRequireDefault(require("./accordion"));
 var _actionCard = _interopRequireDefault(require("./action-card"));
-
 var _autocompleteTokenfield = _interopRequireDefault(require("./autocomplete-tokenfield"));
-
 var _autocompleteWithSuggestions = _interopRequireDefault(require("./autocomplete-with-suggestions"));
-
 var _button = _interopRequireDefault(require("./button"));
-
 var _buttonCard = _interopRequireDefault(require("./button-card"));
-
 var _card = _interopRequireDefault(require("./card"));
-
 var _categoryAutocomplete = _interopRequireDefault(require("./category-autocomplete"));
-
 var _colorPicker = _interopRequireDefault(require("./color-picker"));
-
 var _customSelectControl = _interopRequireDefault(require("./custom-select-control"));
-
 var _formTokenField = _interopRequireDefault(require("./form-token-field"));
-
 var _footer = _interopRequireDefault(require("./footer"));
-
 var _handoff = _interopRequireDefault(require("./handoff"));
-
+var _handoffMessage = _interopRequireDefault(require("./handoff-message"));
 var _infoButton = _interopRequireDefault(require("./info-button"));
-
 var _imageUpload = _interopRequireDefault(require("./image-upload"));
-
 var _globalNotices = _interopRequireDefault(require("./global-notices"));
-
 var _grid = _interopRequireDefault(require("./grid"));
-
 var _modal = _interopRequireDefault(require("./modal"));
-
 var _newspackIcon = _interopRequireDefault(require("./newspack-icon"));
-
 var _newspackLogo = _interopRequireDefault(require("./newspack-logo"));
-
 var _notice = _interopRequireDefault(require("./notice"));
-
 var _patronsLogo = _interopRequireDefault(require("./patrons-logo"));
-
 var _pluginInstaller = _interopRequireDefault(require("./plugin-installer"));
-
 var _pluginSettings = _interopRequireDefault(require("./plugin-settings"));
-
 var _pluginToggle = _interopRequireDefault(require("./plugin-toggle"));
-
 var _popover = _interopRequireDefault(require("./popover"));
-
 var _progressBar = _interopRequireDefault(require("./progress-bar"));
-
 var _radioControl = _interopRequireDefault(require("./radio-control"));
-
 var _sectionHeader = _interopRequireDefault(require("./section-header"));
-
 var _selectControl = _interopRequireDefault(require("./select-control"));
-
 var _dateRangePicker = _interopRequireDefault(require("./date-range-picker"));
-
 var _settings = _interopRequireDefault(require("./settings"));
-
+var _stepsList = _interopRequireDefault(require("./steps-list"));
+var _stepsListItem = _interopRequireDefault(require("./steps-list-item"));
 var _styleCard = _interopRequireDefault(require("./style-card"));
-
 var _tabbedNavigation = _interopRequireDefault(require("./tabbed-navigation"));
-
 var _textControl = _interopRequireDefault(require("./text-control"));
-
 var _waiting = _interopRequireDefault(require("./waiting"));
-
 var _webPreview = _interopRequireDefault(require("./web-preview"));
-
 var _wizard = _interopRequireDefault(require("./wizard"));
-
 var _withWizard = _interopRequireDefault(require("./with-wizard"));
-
 var _withWizardScreen = _interopRequireDefault(require("./with-wizard-screen"));
-
 var _router = _interopRequireDefault(require("./proxied-imports/router"));
-
 var _hooks = _interopRequireDefault(require("./hooks"));
-
 var _utils = _interopRequireDefault(require("./utils"));
-
 require("./style.scss");

package/dist/cjs/info-button/index.js

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _components = require("@wordpress/components");
-
 var _icons = require("@wordpress/icons");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Info Button
  */
@@ -34,6 +26,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies.
  */
+
 class InfoButton extends _element.Component {
   /**
    * Render.
@@ -43,7 +36,8 @@ class InfoButton extends _element.Component {
       className,
       ...otherProps
     } = this.props;
-    return (0, _jsxRuntime.jsx)(_components.Tooltip, { ...otherProps,
+    return (0, _jsxRuntime.jsx)(_components.Tooltip, {
+      ...otherProps,
       children: (0, _jsxRuntime.jsx)("span", {
         className: (0, _classnames.default)('newspack-info-button', className),
         children: (0, _jsxRuntime.jsx)(_icons.Icon, {
@@ -52,8 +46,6 @@ class InfoButton extends _element.Component {
       })
     });
   }
-
 }
-
 var _default = InfoButton;
 exports.default = _default;

package/dist/cjs/info-button/style.scss

@@ -2,8 +2,6 @@
  * Info Button
  */
 
-@import '~@wordpress/base-styles/colors';
-
 .newspack-info-button {
 	display: inline-block;
 	flex: 0 0 24px;
@@ -15,6 +13,6 @@
 
 	svg {
 		display: block;
-		fill: currentColor;
+		fill: currentcolor;
 	}
 }

package/dist/cjs/modal/index.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _components = require("@wordpress/components");
-
 require("./style.scss");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Modal
  */
@@ -32,6 +25,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * External dependencies.
  */
+
 class Modal extends _element.Component {
   /**
    * Render.
@@ -49,8 +43,6 @@ class Modal extends _element.Component {
       ...otherProps
     });
   }
-
 }
-
 var _default = Modal;
 exports.default = _default;

package/dist/cjs/modal/style.scss

@@ -2,16 +2,16 @@
  * Modal
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-modal {
 	// 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};
+	--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};
 
 	@media screen and ( min-width: 744px ) {
 		max-width: 680px;
@@ -50,7 +50,7 @@
 
 	.components-modal__content {
 		> *:last-child {
-			margin-bottom: 8px;
+			margin-bottom: 0;
 		}
 	}
 }

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

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _components = require("@wordpress/components");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Newspack Icon.
  */
@@ -32,6 +25,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies.
  */
+
 class NewspackIcon extends _element.Component {
   /**
    * Render
@@ -57,9 +51,7 @@ class NewspackIcon extends _element.Component {
       })
     });
   }
-
 }
-
 NewspackIcon.defaultProps = {
   size: 32
 };

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

@@ -2,21 +2,21 @@
  * Newspack Icon
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-icon {
-	background: $primary-500;
+	background: colors.$primary-500;
 	fill: white;
 	padding: 12px;
 
 	&--white {
 		background: white;
-		fill: $primary-500;
+		fill: colors.$primary-500;
 	}
 
 	&--simple {
 		background: none;
-		fill: $primary-500;
+		fill: colors.$primary-500;
 		padding: 0;
 	}
 

package/dist/cjs/newspack-logo/index.js

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _components = require("@wordpress/components");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 require("./style.scss");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Newspack Logo.
  */
@@ -32,6 +25,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Internal dependencies.
  */
+
 class NewspackLogo extends _element.Component {
   /**
    * Render
@@ -53,9 +47,7 @@ class NewspackLogo extends _element.Component {
       })
     });
   }
-
 }
-
 NewspackLogo.defaultProps = {
   height: 56
 };

package/dist/cjs/newspack-logo/style.scss

@@ -2,12 +2,12 @@
  * Newspack Logo
  */
 
-@import '../../../shared/scss/colors';
+@use '../../../shared/scss/colors';
 
 .newspack-logo {
 	&__svg {
 		display: block;
-		fill: currentColor;
+		fill: currentcolor;
 		margin: 0;
 		padding-bottom: 32px;
 		width: auto;
@@ -19,7 +19,7 @@
 	}
 
 	&__wrapper {
-		background: $primary-500;
+		background: colors.$primary-500;
 		color: white;
 		position: relative;
 

package/dist/cjs/notice/index.js

@@ -1,33 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _icons = require("@wordpress/icons");
-
 var _i18n = require("@wordpress/i18n");
-
 require("./style.scss");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Notice
  */
-
 /**
  * WordPress dependencies.
  */
+/**
+ * Internal dependencies.
+ */
 const __ = _i18n.__;
-
+/**
+ * External dependencies.
+ */
 class Notice extends _element.Component {
   /**
    * Render
@@ -37,6 +33,7 @@ class Notice extends _element.Component {
       className,
       debugMode,
       isError,
+      isHandoff,
       isHelp,
       isSuccess,
       isWarning,
@@ -45,9 +42,8 @@ class Notice extends _element.Component {
       style = {},
       children = null
     } = this.props;
-    const classes = (0, _classnames.default)('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');
+    const classes = (0, _classnames.default)('newspack-notice', className, debugMode && 'newspack-notice__is-debug', isError && 'newspack-notice__is-error', isHandoff && 'newspack-notice__is-handoff', isHelp && 'newspack-notice__is-help', isSuccess && 'newspack-notice__is-success', isWarning && 'newspack-notice__is-warning');
     let noticeIcon;
-
     if (isHelp) {
       noticeIcon = _icons.help;
     } else if (isSuccess) {
@@ -57,7 +53,6 @@ class Notice extends _element.Component {
     } else {
       noticeIcon = _icons.info;
     }
-
     return (0, _jsxRuntime.jsxs)("div", {
       className: classes,
       style: style,
@@ -71,8 +66,6 @@ class Notice extends _element.Component {
       })]
     });
   }
-
 }
-
 var _default = Notice;
 exports.default = _default;

package/dist/cjs/notice/style.scss

@@ -2,13 +2,14 @@
  * Notice
  */
 
-@import '~@wordpress/base-styles/colors';
-@import '../../../shared/scss/colors';
+@use 'sass:color';
+@use '~@wordpress/base-styles/colors' as wp-colors;
+@use '../../../shared/scss/colors';
 
 .newspack-notice {
 	align-items: center;
-	background: $gray-100;
-	color: $gray-900;
+	background: wp-colors.$gray-100;
+	color: wp-colors.$gray-900;
 	display: flex;
 	justify-content: flex-start;
 	margin: 32px 0;
@@ -16,13 +17,13 @@
 
 	> svg {
 		display: block;
-		fill: $gray-900;
+		fill: wp-colors.$gray-900;
 		flex: 0 0 24px;
 		margin-right: 4px;
 	}
 
 	&__is-debug {
-		background: $primary-700;
+		background: colors.$primary-700;
 		border-radius: 2px;
 		bottom: 16px;
 		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
@@ -39,35 +40,47 @@
 	}
 
 	&__is-error {
-		background: lighten( $alert-red, 51% );
+		background: color.adjust( wp-colors.$alert-red, $lightness: 51% );
 
 		> svg {
-			fill: $alert-red;
+			fill: wp-colors.$alert-red;
 			transform: rotate( 180deg );
 		}
 	}
 
+	&__is-handoff {
+		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
+		margin-top: 0;
+		position: sticky;
+		top: 46px;
+		z-index: 100;
+
+		@media ( min-width: 782px ) {
+			top: 32px;
+		}
+	}
+
 	&__is-help {
-		background: $primary-050;
+		background: colors.$primary-050;
 
 		> svg {
-			fill: $primary-500;
+			fill: colors.$primary-500;
 		}
 	}
 
 	&__is-success {
-		background: lighten( $alert-green, 42% );
+		background: color.adjust( wp-colors.$alert-green, $lightness: 42% );
 
 		> svg {
-			fill: $alert-green;
+			fill: wp-colors.$alert-green;
 		}
 	}
 
 	&__is-warning {
-		background: lighten( $alert-yellow, 30% );
+		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
 
 		> svg {
-			fill: $alert-yellow;
+			fill: wp-colors.$alert-yellow;
 			transform: rotate( 180deg );
 		}
 	}
@@ -87,7 +100,7 @@
 			}
 
 			&:focus {
-				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentColor;
+				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentcolor;
 			}
 		}
 	}

package/dist/cjs/patrons-logo/index.js

@@ -1,34 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _element = require("@wordpress/element");
-
 var _components = require("@wordpress/components");
-
 var _i18n = require("@wordpress/i18n");
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * WordPress.com and Google News Initiative Logos.
  */
-
 /**
  * WordPress dependencies
  */
 const __ = _i18n.__;
-
 class PatronsLogo extends _element.Component {
   constructor() {
     super(...arguments);
+    /**
+     * Render.
+     */
     (0, _defineProperty2.default)(this, "render", () => {
       return (0, _jsxRuntime.jsxs)(_components.SVG, {
         xmlns: "http://www.w3.org/2000/svg",
@@ -83,8 +77,6 @@ class PatronsLogo extends _element.Component {
       });
     });
   }
-
 }
-
 var _default = PatronsLogo;
 exports.default = _default;