newspack-components 2.0.1 → 2.1.0

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,56 +2,60 @@
  * 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;
 
-	&:active,
 	&:focus,
+	&.is-pressed {
+		background: white;
+		border-color: var( --wp-admin-theme-color );
+		box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color ) !important;
+		outline: none !important;
+		z-index: 1;
+	}
+
+	&.is-pressed:focus-visible {
+		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;
 		}
 	}
 
-	&:focus {
-		border-color: $primary-500;
-		box-shadow: inset 0 0 0 2px $primary-500 !important;
-		outline: none !important;
-		position: relative;
-	}
-
-	.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
@@ -64,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;
 		}
 	}
 
@@ -84,7 +88,6 @@
 		grid-template-columns: auto 24px;
 
 		&:active,
-		&:focus,
 		&:hover {
 			svg {
 				fill: currentColor;
@@ -92,7 +95,7 @@
 		}
 
 		svg {
-			fill: $primary-500;
+			fill: var( --wp-admin-theme-color );
 			transition: fill 125ms ease-in-out;
 		}
 	}
@@ -112,8 +115,6 @@
 
 		&.has-chevron,
 		&.has-icon {
-			grid-gap: 8px;
-
 			svg {
 				height: 24px;
 				width: 24px;
@@ -128,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;
 		}
 	}
 }

package/dist/esm/card/index.js

@@ -27,12 +27,14 @@ class Card extends Component {
       buttonsCard,
       className,
       headerActions,
+      isNarrow,
       isMedium,
       isSmall,
+      isWhite,
       noBorder,
       ...otherProps
     } = this.props;
-    const classes = classNames('newspack-card', className, buttonsCard && 'newspack-card__buttons-card', headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isSmall && 'newspack-card__is-small', noBorder && 'newspack-card__no-border');
+    const classes = classNames('newspack-card', className, buttonsCard && 'newspack-card__buttons-card', headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isNarrow && 'newspack-card__is-narrow', isSmall && 'newspack-card__is-small', isWhite && 'newspack-card__is-white', noBorder && 'newspack-card__no-border');
     return _jsx("div", {
       className: classes,
       ...otherProps