newspack-components 2.0.3 → 2.1.0

package/dist/esm/autocomplete-with-suggestions/style.scss

@@ -2,7 +2,6 @@
 * Styles for AutocompleteWithSuggestions component.
 */
 
-@import '../../../shared/scss/colors';
 @import '~@wordpress/base-styles/colors';
 
 .newspack-autocomplete-with-suggestions {
@@ -18,8 +17,9 @@
 	}
 
 	.components-spinner {
+		margin: 8px;
 		right: 0;
-		top: 2em;
+		top: calc( 1.4em + 8px );
 	}
 
 	.components-select-control__input {
@@ -27,7 +27,7 @@
 	}
 
 	.components-input-control__backdrop {
-		border-color: $gray-900 !important;
+		border-color: $gray-700 !important;
 	}
 
 	.newspack-autocomplete-with-suggestions__label,
@@ -39,7 +39,7 @@
 
 	&__suggestions-spinner {
 		background: $gray-100;
-		border: 1px solid $gray-900;
+		border: 1px solid $gray-700;
 		border-radius: 2px;
 		cursor: progress;
 		margin: 16px 0;
@@ -49,6 +49,7 @@
 			display: block;
 			margin: 0 auto;
 			position: relative;
+			right: auto;
 			top: 0;
 		}
 	}
@@ -59,11 +60,11 @@
 
 	.components-form-token-field {
 		&__input-container {
-			border-color: $gray-900;
+			border-color: $gray-700;
 		}
 
 		&__suggestions-list {
-			border-top-color: $gray-900;
+			border-top-color: $gray-700;
 			margin: 4px -4px -2px;
 		}
 
@@ -74,32 +75,30 @@
 
 	p.newspack-autocomplete-with-suggestions__label {
 		font-size: inherit;
-		margin-bottom: 4px;
+		margin: 0 0 8px;
 	}
 
 	&__selected-items {
-		border-bottom: 1px solid $gray-300;
+		border-bottom: 1px solid $gray-700;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
 		margin-bottom: 16px;
 		padding-bottom: 12px;
 
-		.newspack-autocomplete-with-suggestions__label {
-			font-weight: bold;
-
-			.components-button.is-link {
-				color: $alert-red;
-				font-weight: normal;
-			}
+		p.newspack-autocomplete-with-suggestions__label {
+			flex: 0 0 100%;
+			margin: 0;
 		}
 	}
 
 	&__selected-item-button.components-button.is-tertiary {
 		background-color: $gray-300;
 		border-radius: 2px;
-		color: #1e1e1e;
+		color: $gray-900;
 		font-size: 13px;
 		height: auto;
-		margin-bottom: 4px;
-		margin-right: 4px;
+		margin: 0;
 		padding-left: 8px;
 		padding-right: 8px;
 
@@ -117,7 +116,7 @@
 	&__search-suggestions,
 	&__search-suggestions-multiselect {
 		border-radius: 2px;
-		border: 1px solid $gray-900;
+		border: 1px solid $gray-700;
 		max-height: 178px;
 		overflow-x: visible;
 		overflow-y: auto;
@@ -151,7 +150,7 @@
 
 	&__search-suggestions {
 		border-radius: 2px;
-		border: 1px solid $gray-900;
+		border: 1px solid $gray-700;
 		padding: 0;
 
 		.components-button {

package/dist/esm/button/index.js

@@ -13,11 +13,6 @@ import { useState } from '@wordpress/element';
 
 import Router from '../proxied-imports/router';
 import './style.scss';
-/**
- * External dependencies
- */
-
-import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const {
   useHistory
@@ -25,15 +20,12 @@ const {
 
 const Button = _ref => {
   let {
-    className,
-    isQuaternary,
     href,
     onClick,
     ...otherProps
   } = _ref;
   const history = useHistory();
-  const [isAwaitingOnClick, setIsAwaitingOnClick] = useState(false);
-  const classes = classnames('newspack-button', isQuaternary && 'is-quaternary', className); // If both onClick and href are present, await the onClick action an then redirect.
+  const [isAwaitingOnClick, setIsAwaitingOnClick] = useState(false); // If both onClick and href are present, await the onClick action an then redirect.
 
   if (href && onClick) {
     otherProps.onClick = async () => {
@@ -51,9 +43,7 @@ const Button = _ref => {
     otherProps.disabled = true;
   }
 
-  return _jsx(BaseComponent, {
-    className: classes,
-    ...otherProps
+  return _jsx(BaseComponent, { ...otherProps
   });
 };
 

package/dist/esm/button/style.scss

@@ -2,351 +2,10 @@
  * Button
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-@mixin button-style( $background, $border, $text ) {
-	background: $background;
-	border-color: $border;
-	color: $text;
-}
-
-body[class*='admin-color-'] {
-	.newspack-button {
-		border-radius: 3px;
-		font-size: 14px;
-		font-weight: bold;
-		height: auto;
-		line-height: 24px;
-		padding: 11px 24px;
-		transition: background 125ms ease-in-out, border-color 125ms ease-in-out,
-			box-shadow 125ms ease-in-out, color 125ms ease-in-out;
-
-		&.is-large {
-			font-size: 17px;
-			height: auto;
-			line-height: 24px;
-		}
-
-		&.is-small {
-			font-size: 14px;
-			height: auto;
-			line-height: 24px;
-			padding: 5px 16px;
-		}
-
-		&.icon-only {
-			display: inline-flex;
-			align-items: center;
-			height: 36px;
-			justify-content: center;
-			padding: 0;
-			width: 36px;
-
-			&.size-48 {
-				height: 48px;
-				width: 48px;
-			}
-		}
-
-		&:disabled,
-		&:disabled:active:enabled,
-		&[aria-disabled='true'],
-		&[aria-disabled='true']:active:enabled {
-			cursor: not-allowed;
-			text-shadow: none;
-		}
-
-		&:hover,
-		&[aria-expended='true'] {
-			color: $primary-500;
-		}
-
-		&:focus:not( :disabled ) {
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-
-		&.is-button {
-			border-radius: 3px;
-			font-size: 14px;
-			font-weight: bold;
-			height: auto;
-			line-height: 24px;
-			padding: 11px 24px;
-		}
-
-		&.is-primary,
-		&.is-pressed {
-			@include button-style( $primary-500, $primary-600, white );
-			border-style: solid;
-			border-width: 1px;
-
-			&:active,
-			&:active:enabled,
-			&:focus,
-			&:focus:enabled,
-			&:hover,
-			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-				@include button-style( $primary-600, $primary-700, white );
-				box-shadow: none;
-			}
-
-			&:focus,
-			&:focus:enabled {
-				box-shadow: 0 0 0 1px white, 0 0 0 3px $primary-500;
-			}
-
-			&:disabled,
-			&:disabled:active:enabled,
-			&[aria-disabled='true'],
-			&[aria-disabled='true']:active:enabled {
-				@include button-style( $primary-500, $primary-600, $primary-300 );
-
-				&:hover {
-					@include button-style( $primary-500, $primary-600, $primary-300 );
-				}
-			}
-
-			&.is-large {
-				font-size: 17px;
-				height: auto;
-				line-height: 24px;
-			}
-
-			&.is-small {
-				font-size: 14px;
-				height: auto;
-				line-height: 24px;
-				padding: 5px 16px;
-			}
-
-			.newspack-is-waiting {
-				fill: white;
-			}
-		}
-
-		&.is-default,
-		&.is-secondary {
-			@include button-style( white, $gray-300, $gray-900 );
-			border-style: solid;
-			border-width: 1px;
+.components-button {
+	&.is-destructive {
+		&:hover:not( :disabled ) {
 			box-shadow: none;
-
-			&:active,
-			&:active:enabled,
-			&:focus,
-			&:focus:enabled,
-			&:hover,
-			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-				@include button-style( $gray-100, $primary-500, $primary-500 );
-				box-shadow: none;
-			}
-
-			&:focus,
-			&:focus:enabled {
-				box-shadow: 0 0 0 1px white, 0 0 0 3px $primary-500;
-			}
-
-			&:disabled,
-			&:disabled:active:enabled,
-			&[aria-disabled='true'],
-			&[aria-disabled='true']:active:enabled {
-				@include button-style( white, $gray-300, $gray-600 );
-
-				&:hover {
-					@include button-style( white, $gray-300, $gray-600 );
-				}
-			}
-
-			&.is-large {
-				font-size: 17px;
-				height: auto;
-				line-height: 24px;
-			}
-
-			&.is-small {
-				font-size: 14px;
-				height: auto;
-				line-height: 24px;
-				padding: 5px 16px;
-			}
-		}
-
-		&.is-tertiary {
-			@include button-style( $gray-100, $gray-300, $gray-900 );
-			border-style: solid;
-			border-width: 1px;
-			height: auto;
-			line-height: 24px;
-			padding: 11px 24px;
-
-			&:active,
-			&:active:enabled,
-			&:focus,
-			&:focus:enabled,
-			&:hover,
-			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-				@include button-style( $gray-200, $gray-600, $gray-900 );
-				box-shadow: none;
-			}
-
-			&:focus,
-			&:focus:enabled {
-				box-shadow: 0 0 0 1px white, 0 0 0 3px $primary-500;
-			}
-
-			&:disabled,
-			&:disabled:active:enabled,
-			&[aria-disabled='true'],
-			&[aria-disabled='true']:active:enabled {
-				@include button-style( $gray-100, $gray-300, $gray-700 );
-
-				&:hover {
-					@include button-style( $gray-100, $gray-300, $gray-700 );
-				}
-			}
-
-			&.is-large {
-				font-size: 17px;
-				height: auto;
-				line-height: 24px;
-			}
-
-			&.is-small {
-				font-size: 14px;
-				height: auto;
-				line-height: 24px;
-				padding: 5px 16px;
-			}
-
-			.newspack-is-waiting {
-				fill: $gray-700;
-			}
-		}
-
-		&.is-quaternary {
-			@include button-style( transparent, transparent, $gray-900 );
-			border-style: solid;
-			border-width: 1px;
-			color: $gray-900;
-
-			&:focus,
-			&:hover {
-				border-color: $gray-200;
-				box-shadow: none;
-				color: $primary-500;
-			}
-
-			&:focus-visible {
-				border-color: $primary-500;
-				box-shadow: inset 0 0 0 1px $primary-500;
-				color: $primary-500;
-			}
-
-			&:disabled,
-			&:disabled:active:enabled,
-			&[aria-disabled='true'],
-			&[aria-disabled='true']:active:enabled {
-				@include button-style( transparent, transparent, $gray-600 );
-				opacity: 1;
-
-				&:hover {
-					@include button-style( transparent, transparent, $gray-600 );
-				}
-			}
-		}
-
-		&.is-link {
-			background: none;
-			border: 0;
-			border-radius: 0;
-			font-weight: normal;
-			padding: 0;
-			transition: color 125ms ease-in-out, outline 125ms ease-in-out;
-
-			&:not( .is-destructive ) {
-				color: $primary-500;
-			}
-
-			&:active,
-			&:active:enabled,
-			&:focus,
-			&:focus:enabled,
-			&:hover,
-			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-				background: transparent;
-				color: $primary-600;
-				text-decoration: none;
-			}
-
-			&:focus,
-			&:focus:enabled,
-			&.is-destructive:not( :disabled ):hover {
-				box-shadow: none;
-				outline: none;
-			}
-
-			&:focus-visible,
-			&:focus-visible:enabled {
-				outline: 2px solid $primary-500;
-				outline-offset: 2px;
-			}
-
-			&.is-small,
-			&.is-large {
-				padding: 0;
-			}
-		}
-
-		&.is-destructive {
-			&:active,
-			&:active:enabled,
-			&:focus,
-			&:focus:enabled,
-			&:hover,
-			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
-				background: $gray-100;
-			}
-
-			&:focus,
-			&:focus:enabled,
-			&:focus:not( :disabled ) {
-				box-shadow: inset 0 0 0 1px $alert-red, 0 0 0 1px white, 0 0 0 3px $alert-red;
-				color: $alert-red;
-			}
-		}
-
-		.components-tooltip {
-			font-weight: normal;
-		}
-
-		// Popover Active
-
-		&.popover-active {
-			border: 1px solid $gray-300;
-		}
-
-		// Icon-only
-
-		&.has-icon:not( .has-text ) {
-			align-items: center;
-			height: 40px;
-			justify-content: center;
-			min-width: 40px;
-			padding: 0;
-			width: 40px;
-
-			&.is-small {
-				height: 36px;
-				min-width: 36px;
-				width: 36px;
-			}
-
-			&.is-large {
-				height: 48px;
-				min-width: 48px;
-				width: 48px;
-			}
 		}
 	}
 }

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

@@ -11,6 +11,7 @@ import { Icon, chevronRight } from '@wordpress/icons';
  * Internal dependencies
  */
 
+import { Grid } from '../';
 import './style.scss';
 /**
  * External dependencies
@@ -31,11 +32,13 @@ class ButtonCard extends Component {
       desc,
       grouped,
       icon,
+      isDestructive,
+      isPressed,
       isSmall,
       title,
       ...otherProps
     } = this.props;
-    const classes = classnames('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isSmall && 'is-small');
+    const classes = classnames('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isDestructive && 'is-destructive', isPressed && 'is-pressed', isSmall && 'is-small');
     return _jsxs("a", {
       className: classes,
       ...otherProps,
@@ -43,12 +46,13 @@ class ButtonCard extends Component {
         icon: icon,
         height: 48,
         width: 48
-      }), _jsxs("div", {
-        children: [title && _jsx("div", {
-          className: "title",
+      }), _jsxs(Grid, {
+        noMargin: true,
+        columns: 1,
+        gutter: 8,
+        children: [title && _jsx("h3", {
           children: title
-        }), desc && _jsx("div", {
-          className: "desc",
+        }), desc && _jsx("p", {
           children: desc
         })]
       }), chevron && _jsx(Icon, {

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

@@ -2,17 +2,18 @@
  * Button Card
  */
 
-@import '../../../shared/scss/colors';
 @import '~@wordpress/base-styles/colors';
 
 .newspack-button-card {
-	border-radius: 3px;
+	background: white;
+	border-radius: 2px;
 	border: 1px solid $gray-300;
-	box-shadow: inset 0 0 0 2px transparent;
+	box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) transparent;
 	cursor: pointer;
 	display: block;
 	margin: 32px 0;
 	padding: 32px;
+	position: relative;
 	text-decoration: none;
 	transition: background-color 125ms ease-in-out, border-color 125ms ease-in-out,
 		box-shadow 125ms ease-in-out;
@@ -20,43 +21,41 @@
 	&:focus,
 	&.is-pressed {
 		background: white;
-		border-color: $primary-500;
-		box-shadow: inset 0 0 0 2px $primary-500 !important;
+		border-color: var( --wp-admin-theme-color );
+		box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color ) !important;
 		outline: none !important;
-		position: relative;
+		z-index: 1;
 	}
 
 	&.is-pressed:focus-visible {
-		box-shadow: inset 0 0 0 2px $primary-500, 0 0 0 1px white, 0 0 0 2px $primary-500 !important;
+		box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color ), 0 0 0 1px white,
+			0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color ) !important;
 	}
 
 	&:active,
 	&:hover {
-		background-color: $gray-100;
-		color: $primary-600;
+		border-color: var( --wp-admin-theme-color );
+		color: var( --wp-admin-theme-color );
 		text-decoration: none;
+		z-index: 1;
 
-		.title,
-		.desc {
+		.newspack-grid h3,
+		p {
 			color: inherit;
 		}
 	}
 
-	.title,
-	.desc {
-		line-height: 24px;
+	.newspack-grid h3,
+	p {
 		transition: color 125ms ease-in-out;
 	}
 
-	.title {
+	.newspack-grid h3 {
 		color: $gray-900;
-		font-size: 17px;
-		font-weight: bold;
 	}
 
-	.desc {
+	p {
 		color: $gray-700;
-		font-size: 14px;
 	}
 
 	// Grouped
@@ -69,13 +68,13 @@
 		}
 
 		&.br--bottom {
-			border-bottom-left-radius: 3px;
-			border-bottom-right-radius: 3px;
+			border-bottom-left-radius: 2px;
+			border-bottom-right-radius: 2px;
 		}
 
 		&.br--top {
-			border-top-left-radius: 3px;
-			border-top-right-radius: 3px;
+			border-top-left-radius: 2px;
+			border-top-right-radius: 2px;
 		}
 	}
 
@@ -96,7 +95,7 @@
 		}
 
 		svg {
-			fill: $primary-500;
+			fill: var( --wp-admin-theme-color );
 			transition: fill 125ms ease-in-out;
 		}
 	}
@@ -116,8 +115,6 @@
 
 		&.has-chevron,
 		&.has-icon {
-			grid-gap: 8px;
-
 			svg {
 				height: 24px;
 				width: 24px;
@@ -132,13 +129,46 @@
 			}
 		}
 
-		.title {
-			font-size: 14px;
+		h3 {
+			font-size: 1em;
+			line-height: 1.5;
 		}
 
-		.desc {
+		p {
 			font-size: 12px;
-			line-height: 16px;
+			line-height: 1.4;
+		}
+	}
+
+	// Is Destructive
+
+	&.is-destructive {
+		.title {
+			color: $alert-red;
+		}
+
+		&.has-chevron,
+		&.has-icon {
+			svg {
+				fill: $alert-red;
+			}
+		}
+
+		&:focus,
+		&.is-pressed {
+			border-color: $alert-red;
+			box-shadow: inset 0 0 0 1px $alert-red !important;
+		}
+
+		&.is-pressed:focus-visible {
+			box-shadow: inset 0 0 0 1px $alert-red, 0 0 0 1px white,
+				0 0 0 var( --wp-admin-border-width-focus ) $alert-red !important;
+		}
+
+		&:active,
+		&:hover {
+			background-color: $gray-100;
+			border-color: $alert-red;
 		}
 	}
 }