newspack-components 2.0.3 → 2.1.0

package/dist/cjs/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/cjs/button-card/index.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _icons = require("@wordpress/icons");
 
+var _ = require("../");
+
 require("./style.scss");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -43,11 +45,13 @@ class ButtonCard extends _element.Component {
       desc,
       grouped,
       icon,
+      isDestructive,
+      isPressed,
       isSmall,
       title,
       ...otherProps
     } = this.props;
-    const classes = (0, _classnames.default)('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isSmall && 'is-small');
+    const classes = (0, _classnames.default)('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isDestructive && 'is-destructive', isPressed && 'is-pressed', isSmall && 'is-small');
     return (0, _jsxRuntime.jsxs)("a", {
       className: classes,
       ...otherProps,
@@ -55,12 +59,13 @@ class ButtonCard extends _element.Component {
         icon: icon,
         height: 48,
         width: 48
-      }), (0, _jsxRuntime.jsxs)("div", {
-        children: [title && (0, _jsxRuntime.jsx)("div", {
-          className: "title",
+      }), (0, _jsxRuntime.jsxs)(_.Grid, {
+        noMargin: true,
+        columns: 1,
+        gutter: 8,
+        children: [title && (0, _jsxRuntime.jsx)("h3", {
           children: title
-        }), desc && (0, _jsxRuntime.jsx)("div", {
-          className: "desc",
+        }), desc && (0, _jsxRuntime.jsx)("p", {
           children: desc
         })]
       }), chevron && (0, _jsxRuntime.jsx)(_icons.Icon, {

package/dist/cjs/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;
 		}
 	}
 }

package/dist/cjs/card/index.js

@@ -39,12 +39,14 @@ class Card extends _element.Component {
       buttonsCard,
       className,
       headerActions,
+      isNarrow,
       isMedium,
       isSmall,
+      isWhite,
       noBorder,
       ...otherProps
     } = this.props;
-    const classes = (0, _classnames.default)('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 = (0, _classnames.default)('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 (0, _jsxRuntime.jsx)("div", {
       className: classes,
       ...otherProps

package/dist/cjs/card/style.scss

@@ -2,13 +2,12 @@
  * Card
  */
 
-@import '../../../shared/scss/colors';
 @import '~@wordpress/base-styles/colors';
 
 .newspack-card {
-	border-radius: 3px;
+	border-radius: 2px;
 	border: 1px solid $gray-300;
-	color: $gray-700;
+	color: $gray-900;
 	margin: 32px 0;
 	padding: 16px 48px;
 
@@ -21,11 +20,8 @@
 	&__buttons-card {
 		display: flex;
 		flex-wrap: wrap;
-		margin: 32px -8px 16px;
-
-		.newspack-button {
-			margin: 0 8px 16px;
-		}
+		gap: 16px;
+		margin: 32px 0;
 	}
 
 	// Header Actions Card
@@ -43,6 +39,17 @@
 		}
 	}
 
+	// Is Narrow
+
+	&__is-narrow {
+		margin-left: auto;
+		margin-right: auto;
+
+		@media screen and ( min-width: 608px ) {
+			max-width: 576px;
+		}
+	}
+
 	// Is Small
 
 	&__is-small {
@@ -79,6 +86,13 @@
 		}
 	}
 
+	// Is White
+
+	&__is-white {
+		background: white;
+		border: 0;
+	}
+
 	// No Border
 
 	&__no-border {
@@ -89,49 +103,15 @@
 
 	// Typography
 
-	h2,
-	h3,
-	p {
-		line-height: 24px;
-		margin: 32px 0;
-		padding: 0;
-	}
-
-	h2 {
-		color: $gray-900;
-		font-size: 17px;
-		font-weight: bold;
-	}
-
-	h3 {
-		color: $gray-900;
-		font-size: 14px;
-		font-weight: bold;
-	}
-
-	p {
-		font-size: 14px;
-
-		&.is-dark {
-			color: $gray-900;
-		}
-	}
-
-	strong {
-		font-weight: bold;
-	}
-
 	small {
 		font-size: 12px;
-		line-height: 16px;
+		line-height: 1.4;
 	}
 
 	code {
 		background: $gray-100;
-		color: $gray-700;
-		font-size: 12px;
-		line-height: 16px;
-		padding: 4px 8px;
+		color: $gray-900;
+		padding: 0 0.5em;
 	}
 
 	// Thematic Break
@@ -158,27 +138,14 @@
 
 		&__inline {
 			display: inline-block;
-			line-height: 24px;
+			line-height: 1.5;
 			vertical-align: middle;
 		}
 	}
 
-	// Links
+	// Error
 
-	a {
-		color: $primary-500;
-
-		&:active,
-		&:focus,
-		&:hover {
-			color: $primary-600;
-			text-decoration: none;
-		}
-
-		&:focus {
-			box-shadow: none;
-			outline: 2px solid $primary-500;
-			outline-offset: 2px;
-		}
+	.newspack-error {
+		color: $alert-red;
 	}
 }