newspack-components 2.0.3 → 2.1.0

package/dist/cjs/select-control/GroupedSelectControl.js

@@ -50,41 +50,44 @@ function GroupedSelectControl(_ref) {
 
   const id = _.hooks.useUniqueId('group-select');
 
-  return (0, _jsxRuntime.jsxs)(_components.BaseControl, {
+  return (0, _jsxRuntime.jsx)(_components.BaseControl, {
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id,
     help: help,
     className: (0, _classnames.default)(className, 'components-select-control'),
-    children: [(0, _jsxRuntime.jsxs)("select", {
-      id: id,
-      className: "components-select-control__input",
-      onChange: onChangeValue,
-      "aria-describedby": !!help ? `${id}__help` : undefined,
-      ...props,
-      children: [(0, _jsxRuntime.jsx)("option", {
-        value: "",
-        children: __('-- Select --', 'newspack')
-      }), optgroups.map((_ref2, optgroupIndex) => {
-        let {
-          label: optgroupLabel,
-          options
-        } = _ref2;
-        return (0, _jsxRuntime.jsx)("optgroup", {
-          label: optgroupLabel,
-          children: options.map((option, optionIndex) => (0, _jsxRuntime.jsx)("option", {
-            value: option.value,
-            disabled: option.disabled,
-            children: option.label
-          }, `${option.label}-${option.value}-${optionIndex}`))
-        }, optgroupIndex);
+    children: (0, _jsxRuntime.jsxs)("div", {
+      className: "relative",
+      children: [(0, _jsxRuntime.jsxs)("select", {
+        id: id,
+        className: "components-select-control__input",
+        onChange: onChangeValue,
+        "aria-describedby": !!help ? `${id}__help` : undefined,
+        ...props,
+        children: [(0, _jsxRuntime.jsx)("option", {
+          value: "",
+          children: __('-- Select --', 'newspack')
+        }), optgroups.map((_ref2, optgroupIndex) => {
+          let {
+            label: optgroupLabel,
+            options
+          } = _ref2;
+          return (0, _jsxRuntime.jsx)("optgroup", {
+            label: optgroupLabel,
+            children: options.map((option, optionIndex) => (0, _jsxRuntime.jsx)("option", {
+              value: option.value,
+              disabled: option.disabled,
+              children: option.label
+            }, `${option.label}-${option.value}-${optionIndex}`))
+          }, optgroupIndex);
+        })]
+      }), (0, _jsxRuntime.jsx)("div", {
+        className: "components-select-control__arrow-wrapper",
+        children: (0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: _icons.chevronDown,
+          size: 18
+        })
       })]
-    }), (0, _jsxRuntime.jsx)("div", {
-      className: "components-select-control__arrow-wrapper",
-      children: (0, _jsxRuntime.jsx)(_icons.Icon, {
-        icon: _icons.chevronDown,
-        size: 18
-      })
-    })]
+    })
   });
 }

package/dist/cjs/select-control/index.js

@@ -45,10 +45,9 @@ class SelectControl extends _element.Component {
       className,
       optgroups,
       buttonOptions,
-      isSmall,
       ...otherProps
     } = this.props;
-    const classes = (0, _classnames.default)('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', isSmall && 'newspack-select-control--small', className);
+    const classes = (0, _classnames.default)('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', className);
     return (0, _jsxRuntime.jsx)("div", {
       className: classes,
       children: optgroups ? (0, _jsxRuntime.jsx)(_GroupedSelectControl.default, {

package/dist/cjs/select-control/style.scss

@@ -2,92 +2,39 @@
  * Select Control
  */
 
-@import '../../../shared/scss/colors';
 @import '~@wordpress/base-styles/colors';
 
-.newspack-select-control {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
+.components-select-control {
+	&__input {
+		max-width: 100% !important;
 
-	.components-base-control__field {
-		margin: 0;
-	}
-	.components-input-control__label,
-	.components-base-control__label {
-		color: $gray-900 !important;
-		display: flex;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
-		padding-bottom: 0 !important;
-		margin-bottom: 0;
-	}
-
-	.components-select-control {
-		border-radius: 3px;
-		font-size: 14px;
-		line-height: 24px;
-
-		div.components-input-control__backdrop {
-			border-color: $gray-300;
-		}
-
-		select.components-select-control__input {
-			color: $gray-700;
-			border-color: $gray-300;
-			font-size: 16px;
-			height: 48px;
-			line-height: 24px;
-			max-width: 100%;
-			min-height: 48px;
+		&[multiple] {
+			height: auto !important;
+			min-height: 70px !important;
+			padding: 0 !important;
 
-			@media screen and ( min-width: 600px ) {
-				font-size: 16px;
+			+ .components-input-control__suffix {
+				display: none;
 			}
 
-			@media screen and ( min-width: 768px ) {
-				font-size: 14px;
-			}
+			option {
+				min-height: 1.4em;
+				padding: 8px;
 
-			&:focus ~ div.components-input-control__backdrop {
-				border-color: $primary-500;
-				box-shadow: inset 0 0 0 2px $primary-500;
+				&:checked {
+					background: var( --wp-admin-theme-color );
+					color: white;
+				}
 			}
 		}
 	}
 
-	// Help
-
-	.components-base-control__help {
-		margin-top: 0;
-		font-style: italic;
-	}
-
-	// Small
-
-	&--small {
-		.components-select-control select.components-select-control__input {
-			height: 36px;
-			min-height: 36px;
-		}
-	}
-
-	// Multiple Select Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
+	.components-base-control__field {
+		width: 100%;
 	}
 
-	// Multiple Controls
-
-	+ .newspack-category-autocomplete,
-	+ .newspack-text-control,
-	+ .newspack-textarea-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
+	.components-input-control__label {
+		line-height: inherit;
 	}
 }
 
@@ -100,29 +47,38 @@
 		&__input {
 			appearance: none;
 			background: transparent;
-			border-radius: 3px;
+			border: 1px solid $gray-700;
+			border-radius: 2px;
 			box-shadow: none !important;
 			box-sizing: border-box;
 			display: block;
+			font-size: inherit;
 			margin: 0;
+			max-width: 100%;
 			outline: none;
 			padding: 0 24px 0 7px;
 			width: 100%;
 
+			&:hover {
+				color: inherit;
+			}
+
 			&:focus {
-				border-color: $primary-500 !important;
-				box-shadow: inset 0 0 0 2px $primary-500 !important;
+				border-color: var( --wp-admin-theme-color-darker-10 ) !important;
+				box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color-darker-10 ) !important;
+				color: inherit;
 			}
 		}
 
 		&__arrow-wrapper {
 			align-items: center;
-			bottom: 0;
 			display: flex;
-			height: 48px;
+			height: 24px;
 			justify-content: center;
+			margin-top: -12px;
 			position: absolute;
 			right: 1px;
+			top: 50%;
 			width: 24px;
 		}
 	}
@@ -131,19 +87,22 @@
 // Buttons
 
 .newspack-buttons-select-control {
-	&.icon-only {
-		.newspack-button-group {
-			display: flex;
-		}
+	.components-base-control__label {
+		display: inline-flex;
+		margin-bottom: 8px;
+	}
 
-		.newspack-button {
+	.components-button-group {
+		display: flex;
+	}
+
+	&.icon-only {
+		.components-button {
 			align-items: center;
-			display: flex;
-			font-size: 17px;
-			height: 48px;
+			height: 36px;
 			justify-content: center;
 			padding: 0 !important;
-			width: 48px;
+			width: 36px;
 		}
 	}
 }

package/dist/cjs/settings/MinMaxSetting.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _i18n = require("@wordpress/i18n");
 
+var _components = require("@wordpress/components");
+
 var _ = require("../");
 
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
@@ -28,7 +30,7 @@ const MinMaxSetting = _ref => {
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-settings__min-max",
-      children: [(0, _jsxRuntime.jsx)(_.CheckboxControl, {
+      children: [(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
         checked: min > 0,
         onChange: value => onChangeMin(value ? 1 : 0),
         label: __('Min', 'newspack')
@@ -41,7 +43,7 @@ const MinMaxSetting = _ref => {
       })]
     }), (0, _jsxRuntime.jsxs)("div", {
       className: "newspack-settings__min-max",
-      children: [(0, _jsxRuntime.jsx)(_.CheckboxControl, {
+      children: [(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
         checked: max > 0,
         onChange: value => onChangeMax(value ? min || 1 : 0),
         label: __('Max', 'newspack')

package/dist/cjs/settings/SettingsCard.js

@@ -26,14 +26,19 @@ const SettingsCard = _ref => {
     className,
     columns,
     gutter,
+    noBorder,
+    rowGap,
     ...props
   } = _ref;
+  const classes = (0, _classnames.default)('newspack-settings__card', noBorder && 'newspack-settings__no-border', className);
   return (0, _jsxRuntime.jsx)(_.ActionCard, { ...props,
-    className: (0, _classnames.default)(className, 'newspack-settings__card'),
+    className: classes,
     notificationLevel: "info",
+    noBorder: noBorder,
     children: (0, _jsxRuntime.jsx)(_.Grid, {
       columns: columns,
       gutter: gutter,
+      rowGap: rowGap,
       children: children
     })
   });

package/dist/cjs/settings/SettingsSection.js

@@ -18,13 +18,13 @@ const SettingSection = _ref => {
     description,
     children
   } = _ref;
-  return (0, _jsxRuntime.jsxs)(_.Card, {
-    isSmall: true,
-    noBorder: true,
+  return (0, _jsxRuntime.jsxs)(_.Grid, {
+    columns: 1,
+    gutter: 8,
     className: "newspack-settings__section",
     children: [(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-settings__section__title",
-      children: [(0, _jsxRuntime.jsx)("h3", {
+      children: [(0, _jsxRuntime.jsx)("span", {
         children: title
       }), description && (0, _jsxRuntime.jsx)(_.InfoButton, {
         text: description

package/dist/cjs/settings/style.scss

@@ -28,11 +28,12 @@
 
 		.newspack-settings__section {
 			&__title {
+				align-items: center;
 				display: flex;
 				margin: 0;
 
-				h3 {
-					margin: 0;
+				span {
+					line-height: 24px;
 				}
 			}
 			&__content {
@@ -42,7 +43,7 @@
 					align-items: center;
 					justify-content: space-between;
 					flex-wrap: wrap;
-					> * {
+					> *:not( [class*='help'] ):not( [class*='label'] ) {
 						margin: 0;
 					}
 				}
@@ -58,8 +59,10 @@
 			}
 		}
 		.newspack-settings__min-max {
+			gap: 8px;
+
 			.newspack-checkbox-control {
-				flex: 0 0 64px;
+				flex: 0 0 auto;
 			}
 
 			.newspack-text-control {
@@ -75,4 +78,29 @@
 			}
 		}
 	}
+
+	&__no-border {
+		&.newspack-card.newspack-action-card {
+			border: 0;
+
+			.newspack-action-card__region-top,
+			.newspack-action-card__region-children {
+				padding-left: 0;
+				padding-right: 0;
+				padding-top: 0;
+			}
+
+			.newspack-action-card__region-children {
+				padding-bottom: 0;
+			}
+
+			.newspack-action-card__notification {
+				padding-bottom: 16px;
+			}
+
+			& + & {
+				margin-top: 64px;
+			}
+		}
+	}
 }

package/dist/cjs/style-card/index.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _i18n = require("@wordpress/i18n");
 
+var _components = require("@wordpress/components");
+
 var _ = require("../");
 
 require("./style.scss");
@@ -57,21 +59,23 @@ class StyleCard extends _element.Component {
           alt: cardTitle + ' ' + __('Thumbnail', 'newspack')
         }), (0, _jsxRuntime.jsxs)("div", {
           className: "newspack-style-card__actions",
-          children: [!isActive && (0, _jsxRuntime.jsx)(_.Button, {
-            isLink: true,
+          children: [isActive ? (0, _jsxRuntime.jsx)("span", {
+            className: "newspack-style-card__actions__badge",
+            children: __('Selected', 'newspack')
+          }) : (0, _jsxRuntime.jsx)(_components.Button, {
+            variant: "link",
             onClick: onClick,
-            "aria-label": ariaLabel ? ariaLabel : __('Activate', 'newspack') + ' ' + cardTitle,
+            "aria-label": ariaLabel ? ariaLabel : __('Select', 'newspack') + ' ' + cardTitle,
             tabIndex: "0",
-            children: __('Activate', 'newspack')
+            children: __('Select', 'newspack')
           }), url && (0, _jsxRuntime.jsx)(_.WebPreview, {
             url: url,
             label: __('View Demo', 'newspack'),
-            isLink: true
+            variant: "link"
           })]
         })]
       }), cardTitle && (0, _jsxRuntime.jsx)("div", {
         className: "newspack-style-card__title",
-        title: isActive ? __('Active', 'newspack') : null,
         children: cardTitle
       })]
     });

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

@@ -11,9 +11,7 @@
 
 	// Title
 	&__title {
-		color: $gray-900;
-		font-weight: bold;
-		margin: 16px 0 0;
+		margin: 1em 0 0;
 		text-align: center;
 
 		.newspack-style-card__is-active & {
@@ -24,7 +22,7 @@
 	// Image
 	&__image {
 		border: 1px solid $gray-300;
-		border-radius: 3px;
+		border-radius: 2px;
 		overflow: hidden;
 		position: relative;
 
@@ -32,7 +30,7 @@
 		&:focus,
 		&:focus-within {
 			.newspack-style-card__actions,
-			.newspack-style-card__actions .newspack-button {
+			.newspack-style-card__actions > * {
 				opacity: 1;
 			}
 		}
@@ -51,7 +49,7 @@
 
 		.newspack-style-card__is-active & {
 			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px $primary-500;
+			box-shadow: inset 0 0 0 1px $primary-500;
 
 			img {
 				position: relative;
@@ -80,14 +78,20 @@
 			display: none;
 		}
 
-		.newspack-button {
+		&__badge,
+		.components-button {
 			margin: 4px;
 			opacity: 0;
 			transition: opacity 125ms ease-in-out;
 		}
 
+		&__badge {
+			color: var( --wp-admin-theme-color );
+			font-weight: bold;
+		}
+
 		.newspack-style-card__is-active & {
-			box-shadow: inset 0 0 0 2px $primary-500;
+			box-shadow: inset 0 0 0 1px $primary-500;
 		}
 	}
 }

package/dist/cjs/style.scss

@@ -0,0 +1,44 @@
+@import '~@wordpress/base-styles/colors';
+@import '../../shared/scss/colors';
+
+// Buttons Card
+
+.newspack-buttons-card {
+	display: flex;
+	flex-direction: row-reverse;
+	gap: 16px;
+	justify-content: flex-start;
+	align-items: center;
+	margin: 64px 0 32px;
+
+	&:empty {
+		display: none;
+	}
+}
+
+// Checkbox Icon
+
+.newspack-checkbox-icon {
+	background: white;
+	border-radius: 50%;
+	box-shadow: inset 0 0 0 1px $gray-300;
+	display: block;
+	height: 24px;
+	width: 24px;
+
+	svg {
+		fill: $gray-700;
+	}
+
+	&--checked {
+		background: $alert-green;
+		box-shadow: none;
+
+		svg {
+			fill: white;
+		}
+	}
+	&--pending {
+		background: $alert-yellow;
+	}
+}

package/dist/cjs/tabbed-navigation/index.js

@@ -9,16 +9,14 @@ exports.default = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _lodash = require("lodash");
+
 var _router = _interopRequireDefault(require("../proxied-imports/router"));
 
 require("./style.scss");
 
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 
-/**
- * Tabbed Navigation
- */
-
 /**
  * External dependencies.
  */
@@ -30,36 +28,31 @@ const {
   NavLink,
   useHistory
 } = _router.default;
-/**
- * Tabbed navigation.
- */
 
 const TabbedNavigation = _ref => {
   let {
     items,
-    className
+    className,
+    disableUpcoming
   } = _ref;
-  const classes = (0, _classnames.default)('newspack-tabbed-navigation', className);
   const {
-    location: {
-      pathname
-    }
-  } = useHistory(); // eslint-disable-next-line no-unused-vars
-
-  const [_, firstPathPart] = pathname.split('/');
+    location
+  } = useHistory();
+  const currentIndex = (0, _lodash.findIndex)(items, ['path', location.pathname]);
   return (0, _jsxRuntime.jsx)("div", {
-    className: classes,
+    className: (0, _classnames.default)('newspack-tabbed-navigation', className),
     children: (0, _jsxRuntime.jsx)("ul", {
-      children: items.map((item, key) => (0, _jsxRuntime.jsx)("li", {
+      children: items.map((item, index) => (0, _jsxRuntime.jsx)("li", {
         children: (0, _jsxRuntime.jsx)(NavLink, {
           to: item.path,
-          exact: item.exact,
+          exact: true,
+          activeClassName: 'selected',
           className: (0, _classnames.default)({
-            selected: item.path === '/' ? pathname === item.path : firstPathPart === item.path.replace(/\//g, '')
+            disabled: disableUpcoming && index > currentIndex
           }),
           children: item.label
         })
-      }, key))
+      }, index))
     })
   });
 };