newspack-components 2.0.3 → 2.2.0

package/dist/cjs/button/index.js

@@ -1,24 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _components = require("@wordpress/components");
-
 var _element = require("@wordpress/element");
-
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
-
 require("./style.scss");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Button
  */
@@ -31,25 +22,19 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  * Internal dependencies
  */
 
-/**
- * External dependencies
- */
 const {
   useHistory
 } = _router.default;
-
 const Button = _ref => {
   let {
-    className,
-    isQuaternary,
     href,
     onClick,
     ...otherProps
   } = _ref;
   const history = useHistory();
   const [isAwaitingOnClick, setIsAwaitingOnClick] = (0, _element.useState)(false);
-  const classes = (0, _classnames.default)('newspack-button', isQuaternary && 'is-quaternary', className); // If both onClick and href are present, await the onClick action an then redirect.
 
+  // If both onClick and href are present, await the onClick action an then redirect.
   if (href && onClick) {
     otherProps.onClick = async () => {
       setIsAwaitingOnClick(true);
@@ -61,16 +46,12 @@ const Button = _ref => {
     otherProps.href = href;
     otherProps.onClick = onClick;
   }
-
   if (isAwaitingOnClick) {
     otherProps.disabled = true;
   }
-
   return (0, _jsxRuntime.jsx)(_components.Button, {
-    className: classes,
     ...otherProps
   });
 };
-
 var _default = Button;
 exports.default = _default;

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

@@ -1,22 +1,16 @@
 "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 _ = require("../");
 require("./style.scss");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 /**
  * Button Card
  */
@@ -32,6 +26,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * External dependencies
  */
+
 class ButtonCard extends _element.Component {
   /**
    * Render
@@ -43,11 +38,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 +52,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, {
@@ -70,8 +68,6 @@ class ButtonCard extends _element.Component {
       })]
     });
   }
-
 }
-
 var _default = ButtonCard;
 exports.default = _default;

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

@@ -2,17 +2,18 @@
  * Button Card
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-button-card {
-	border-radius: 3px;
-	border: 1px solid $gray-300;
-	box-shadow: inset 0 0 0 2px transparent;
+	background: white;
+	border-radius: 2px;
+	border: 1px solid wp-colors.$gray-300;
+	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 {
-		color: $gray-900;
-		font-size: 17px;
-		font-weight: bold;
+	.newspack-grid h3 {
+		color: wp-colors.$gray-900;
 	}
 
-	.desc {
-		color: $gray-700;
-		font-size: 14px;
+	p {
+		color: wp-colors.$gray-700;
 	}
 
 	// 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;
 		}
 	}
 
@@ -91,12 +90,12 @@
 		&:active,
 		&:hover {
 			svg {
-				fill: currentColor;
+				fill: currentcolor;
 			}
 		}
 
 		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: wp-colors.$alert-red;
+		}
+
+		&.has-chevron,
+		&.has-icon {
+			svg {
+				fill: wp-colors.$alert-red;
+			}
+		}
+
+		&:focus,
+		&.is-pressed {
+			border-color: wp-colors.$alert-red;
+			box-shadow: inset 0 0 0 1px wp-colors.$alert-red !important;
+		}
+
+		&.is-pressed:focus-visible {
+			box-shadow: inset 0 0 0 1px wp-colors.$alert-red, 0 0 0 1px white,
+				0 0 0 var( --wp-admin-border-width-focus ) wp-colors.$alert-red !important;
+		}
+
+		&:active,
+		&:hover {
+			background-color: wp-colors.$gray-100;
+			border-color: wp-colors.$alert-red;
 		}
 	}
 }