newspack-components 2.0.3 → 2.2.0

package/dist/cjs/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/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
@@ -39,9 +33,11 @@ class NewspackIcon extends _element.Component {
   render() {
     const {
       className,
-      size
+      simple,
+      size,
+      white
     } = this.props;
-    const classes = (0, _classnames.default)('newspack-icon', className);
+    const classes = (0, _classnames.default)('newspack-icon', simple && 'newspack-icon--simple', white && 'newspack-icon--white', className);
     return (0, _jsxRuntime.jsx)(_components.SVG, {
       xmlns: "http://www.w3.org/2000/svg",
       height: size,
@@ -55,9 +51,7 @@ class NewspackIcon extends _element.Component {
       })
     });
   }
-
 }
-
 NewspackIcon.defaultProps = {
   size: 32
 };

package/dist/cjs/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/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,34 +1,26 @@
 "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.
  */
@@ -39,7 +31,9 @@ class Notice extends _element.Component {
   render() {
     const {
       className,
+      debugMode,
       isError,
+      isHandoff,
       isHelp,
       isSuccess,
       isWarning,
@@ -48,17 +42,17 @@ class Notice extends _element.Component {
       style = {},
       children = null
     } = this.props;
-    const classes = (0, _classnames.default)('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 = (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) {
       noticeIcon = _icons.check;
+    } else if (debugMode) {
+      noticeIcon = _icons.bug;
     } else {
       noticeIcon = _icons.info;
     }
-
     return (0, _jsxRuntime.jsxs)("div", {
       className: classes,
       style: style,
@@ -68,12 +62,10 @@ class Notice extends _element.Component {
         className: "newspack-notice__content",
         children: [rawHTML ? (0, _jsxRuntime.jsx)(_element.RawHTML, {
           children: noticeText
-        }) : noticeText, children || null]
+        }) : noticeText, debugMode && __('Debug Mode', 'newspack'), children || null]
       })]
     });
   }
-
 }
-
 var _default = Notice;
 exports.default = _default;

package/dist/cjs/notice/style.scss

@@ -2,65 +2,106 @@
  * 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: flex-start;
-	background: $gray-100;
-	border-radius: 3px;
-	color: $gray-900;
+	align-items: center;
+	background: wp-colors.$gray-100;
+	color: wp-colors.$gray-900;
 	display: flex;
-	font-size: 14px;
 	justify-content: flex-start;
-	line-height: 24px;
 	margin: 32px 0;
 	padding: 6px 8px;
 
 	> svg {
 		display: block;
-		fill: $gray-900;
+		fill: wp-colors.$gray-900;
 		flex: 0 0 24px;
 		margin-right: 4px;
 	}
 
+	&__is-debug {
+		background: colors.$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: 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-000;
+		background: colors.$primary-050;
 
 		> svg {
-			fill: $primary-500;
+			fill: colors.$primary-500;
 		}
 	}
 
 	&__is-success {
-		background: lighten( $alert-green, 47% );
+		background: color.adjust( wp-colors.$alert-green, $lightness: 42% );
 
 		> svg {
-			fill: $alert-green;
+			fill: wp-colors.$alert-green;
 		}
 	}
 
 	&__is-warning {
-		background: lighten( $alert-yellow, 36% );
+		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
 
 		> svg {
-			fill: $alert-yellow;
+			fill: wp-colors.$alert-yellow;
 			transform: rotate( 180deg );
 		}
 	}
 
-	&__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/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;