newspack-components 2.0.3 → 2.2.0

package/dist/esm/image-upload/style.scss

@@ -2,8 +2,7 @@
  * Image Upload
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-image-upload {
 	margin: 32px 0;
@@ -11,18 +10,15 @@
 		display: flex;
 	}
 	&__label {
-		color: $gray-900;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
+		margin: 0 0 8px;
 	}
 	&__image {
 		align-items: center;
 		background-repeat: no-repeat;
 		background-size: contain;
 		background-position: center;
-		border: 1px dashed $gray-300;
-		border-radius: 3px;
+		border: 1px dashed wp-colors.$gray-700;
+		border-radius: 2px;
 		display: flex;
 		justify-content: center;
 		max-width: 100%;
@@ -34,7 +30,7 @@
 		&:not( &--has-image ) {
 			.newspack-button {
 				background: white !important;
-				border-radius: 3px !important;
+				border-radius: 2px !important;
 				padding: 4px 16px !important;
 
 				&:active,
@@ -53,14 +49,11 @@
 			overflow: hidden;
 			&::before,
 			&::after {
-				border: 1px solid rgba( black, 0.125 );
-				border-radius: 3px;
-				bottom: 0;
+				border: 1px solid rgba( black, 0.54 );
+				border-radius: 2px;
 				content: '';
-				left: 0;
+				inset: 0;
 				position: absolute;
-				right: 0;
-				top: 0;
 				z-index: 0;
 			}
 			button,
@@ -74,7 +67,7 @@
 			}
 			&::after {
 				background: rgba( white, 0.9 );
-				border-color: $gray-300;
+				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,
 			&:hover {
@@ -97,7 +90,9 @@
 		}
 	}
 	&__image + &__help {
-		margin: 0;
+		color: wp-colors.$gray-700;
+		font-size: 12px;
+		margin: 1em 0 0;
 	}
 	&__controls {
 		align-items: center;

package/dist/esm/index.js

@@ -1,18 +1,17 @@
+export { default as Accordion } from './accordion';
 export { default as ActionCard } from './action-card';
 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 ButtonGroup } from './button-group';
 export { default as Card } from './card';
-export { default as PreviewBox } from './preview-box';
 export { default as CategoryAutocomplete } from './category-autocomplete';
-export { default as CheckboxControl } from './checkbox-control';
 export { default as ColorPicker } from './color-picker';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';
+export { default as HandoffMessage } from './handoff-message';
 export { default as InfoButton } from './info-button';
 export { default as ImageUpload } from './image-upload';
 export { default as GlobalNotices } from './global-notices';
@@ -32,17 +31,17 @@ 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';
 export { default as StyleCard } from './style-card';
 export { default as TabbedNavigation } from './tabbed-navigation';
 export { default as TextControl } from './text-control';
-export { default as TextareaControl } from './textarea-control';
-export { default as ToggleControl } from './toggle-control';
-export { default as ToggleGroup } from './toggle-group';
 export { default as Waiting } from './waiting';
 export { default as WebPreview } from './web-preview';
+export { default as Wizard } from './wizard';
 export { default as withWizard } from './with-wizard';
 export { default as withWizardScreen } from './with-wizard-screen';
-export { default as WizardPagination } from './wizard-pagination';
 export { default as Router } from './proxied-imports/router';
 export { default as hooks } from './hooks';
-export { default as utils } from './utils';
+export { default as utils } from './utils';
+import './style.scss';

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

@@ -8,18 +8,17 @@
 import { Component } from '@wordpress/element';
 import { Tooltip } from '@wordpress/components';
 import { Icon, info } from '@wordpress/icons';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class InfoButton extends Component {
   /**
    * Render.
@@ -29,7 +28,8 @@ class InfoButton extends Component {
       className,
       ...otherProps
     } = this.props;
-    return _jsx(Tooltip, { ...otherProps,
+    return _jsx(Tooltip, {
+      ...otherProps,
       children: _jsx("span", {
         className: classnames('newspack-info-button', className),
         children: _jsx(Icon, {
@@ -38,7 +38,5 @@ class InfoButton extends Component {
       })
     });
   }
-
 }
-
 export default InfoButton;

package/dist/esm/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/esm/modal/index.js

@@ -7,18 +7,17 @@
  */
 import { Component } from '@wordpress/element';
 import { Modal as BaseComponent } from '@wordpress/components';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class Modal extends Component {
   /**
    * Render.
@@ -26,20 +25,15 @@ class Modal extends Component {
   render() {
     const {
       className,
-      overlayClassName,
       isWide,
       isNarrow,
       ...otherProps
     } = this.props;
     const classes = classnames('newspack-modal', isWide && 'newspack-modal--wide', isNarrow && 'newspack-modal--narrow', className);
-    const overlayClasses = classnames('newspack-modal__overlay', overlayClassName);
     return _jsx(BaseComponent, {
       className: classes,
-      overlayClassName: overlayClasses,
       ...otherProps
     });
   }
-
 }
-
 export default Modal;

package/dist/esm/modal/style.scss

@@ -2,167 +2,55 @@
  * Modal
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '../../../shared/scss/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: #{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;
+		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: 0;
 		}
 	}
 }

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

@@ -7,18 +7,17 @@
  */
 import { Component } from '@wordpress/element';
 import { Path, SVG } from '@wordpress/components';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class NewspackIcon extends Component {
   /**
    * Render
@@ -26,9 +25,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,
@@ -42,9 +43,7 @@ class NewspackIcon extends Component {
       })
     });
   }
-
 }
-
 NewspackIcon.defaultProps = {
   size: 32
 };

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

@@ -2,10 +2,25 @@
  * 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: colors.$primary-500;
+	}
+
+	&--simple {
+		background: none;
+		fill: colors.$primary-500;
+		padding: 0;
+	}
+
+	&#{&}--simple#{&}--white {
+		fill: white;
+	}
 }

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

@@ -7,18 +7,17 @@
  */
 import { Component } from '@wordpress/element';
 import { Path, SVG } from '@wordpress/components';
+
 /**
  * External dependencies.
  */
-
 import classnames from 'classnames';
+
 /**
  * Internal dependencies.
  */
-
 import './style.scss';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class NewspackLogo extends Component {
   /**
    * Render
@@ -40,9 +39,7 @@ class NewspackLogo extends Component {
       })
     });
   }
-
 }
-
 NewspackLogo.defaultProps = {
   height: 56
 };

package/dist/esm/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/esm/notice/index.js

@@ -6,20 +6,21 @@
  * 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.
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 class Notice extends Component {
   /**
    * Render
@@ -27,7 +28,9 @@ class Notice extends Component {
   render() {
     const {
       className,
+      debugMode,
       isError,
+      isHandoff,
       isHelp,
       isSuccess,
       isWarning,
@@ -36,17 +39,17 @@ 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', 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 = help;
     } else if (isSuccess) {
       noticeIcon = check;
+    } else if (debugMode) {
+      noticeIcon = bug;
     } else {
       noticeIcon = info;
     }
-
     return _jsxs("div", {
       className: classes,
       style: style,
@@ -56,11 +59,9 @@ class Notice extends Component {
         className: "newspack-notice__content",
         children: [rawHTML ? _jsx(RawHTML, {
           children: noticeText
-        }) : noticeText, children || null]
+        }) : noticeText, debugMode && __('Debug Mode', 'newspack'), children || null]
       })]
     });
   }
-
 }
-
 export default Notice;