newspack-components 2.0.3 → 2.2.0

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

@@ -7,20 +7,19 @@
  */
 import { SelectControl as BaseComponent } from '@wordpress/components';
 import { Component } from '@wordpress/element';
+
 /**
  * External dependencies
  */
-
 import classNames from 'classnames';
+
 /**
  * Internal dependencies
  */
-
 import './style.scss';
 import GroupedSelectControl from './GroupedSelectControl';
 import ButtonGroupControl from './ButtonGroupControl';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 class SelectControl extends Component {
   /**
    * Render.
@@ -30,10 +29,10 @@ class SelectControl extends Component {
       className,
       optgroups,
       buttonOptions,
-      isSmall,
+      buttonSmall,
       ...otherProps
     } = this.props;
-    const classes = classNames('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', isSmall && 'newspack-select-control--small', className);
+    const classes = classNames('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', className);
     return _jsx("div", {
       className: classes,
       children: optgroups ? _jsx(GroupedSelectControl, {
@@ -41,12 +40,12 @@ class SelectControl extends Component {
         ...otherProps
       }) : buttonOptions ? _jsx(ButtonGroupControl, {
         buttonOptions: buttonOptions,
+        buttonSmall: buttonSmall,
+        ...otherProps
+      }) : _jsx(BaseComponent, {
         ...otherProps
-      }) : _jsx(BaseComponent, { ...otherProps
       })
     });
   }
-
 }
-
 export default SelectControl;

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

@@ -2,92 +2,39 @@
  * Select Control
  */
 
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-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 wp-colors.$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/esm/settings/MinMaxSetting.js

@@ -2,16 +2,16 @@
  * WordPress dependencies.
  */
 import { __ as alias__ } from '@wordpress/i18n';
+const __ = alias__;
+import { CheckboxControl } from '@wordpress/components';
+
 /**
  * Internal dependencies.
  */
-
-const __ = alias__;
-import { CheckboxControl, TextControl } from '../';
+import { TextControl } from '../';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-
 const MinMaxSetting = _ref => {
   let {
     min,
@@ -50,5 +50,4 @@ const MinMaxSetting = _ref => {
     })]
   });
 };
-
 export default MinMaxSetting;

package/dist/esm/settings/SettingsCard.js

@@ -2,32 +2,36 @@
  * External dependencies.
  */
 import classnames from 'classnames';
+
 /**
  * Internal dependencies.
  */
-
 import { Grid, ActionCard } from '../';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const SettingsCard = _ref => {
   let {
     children,
     className,
     columns,
     gutter,
+    noBorder,
+    rowGap,
     ...props
   } = _ref;
-  return _jsx(ActionCard, { ...props,
-    className: classnames(className, 'newspack-settings__card'),
+  const classes = classnames('newspack-settings__card', noBorder && 'newspack-settings__no-border', className);
+  return _jsx(ActionCard, {
+    ...props,
+    className: classes,
     notificationLevel: "info",
+    noBorder: noBorder,
     children: _jsx(Grid, {
       columns: columns,
       gutter: gutter,
+      rowGap: rowGap,
       children: children
     })
   });
 };
-
 SettingsCard.defaultProps = {
   columns: 3,
   gutter: 32

package/dist/esm/settings/SettingsSection.js

@@ -1,23 +1,22 @@
 /**
  * Internal dependencies.
  */
-import { Card, InfoButton } from '../';
+import { Grid, InfoButton } from '../';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const SettingSection = _ref => {
   let {
     title,
     description,
     children
   } = _ref;
-  return _jsxs(Card, {
-    isSmall: true,
-    noBorder: true,
+  return _jsxs(Grid, {
+    columns: 1,
+    gutter: 8,
     className: "newspack-settings__section",
     children: [_jsxs("div", {
       className: "newspack-settings__section__title",
-      children: [_jsx("h3", {
+      children: [_jsx("span", {
         children: title
       }), description && _jsx(InfoButton, {
         text: description
@@ -28,5 +27,4 @@ const SettingSection = _ref => {
     })]
   });
 };
-
 export default SettingSection;

package/dist/esm/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'], [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/esm/steps-list/index.js

@@ -0,0 +1,43 @@
+/**
+ * Steps List
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import { StepsListItem } from '../';
+import './style.scss';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+class StepsList extends Component {
+  /**
+   * Render
+   */
+  render() {
+    const {
+      className,
+      stepsListItems,
+      narrowList,
+      style = {}
+    } = this.props;
+    const classes = classnames('steps-list', className, narrowList && 'steps-list__narrow-list');
+    return _jsx("div", {
+      className: classes,
+      style: style,
+      children: stepsListItems.map((listItem, index) => _jsx(StepsListItem, {
+        listItemCount: index + 1,
+        listItemText: listItem
+      }, index))
+    });
+  }
+}
+export default StepsList;

package/dist/esm/steps-list/style.scss

@@ -0,0 +1,11 @@
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
+
+.steps-list {
+	margin-left: auto;
+	margin-right: auto;
+
+	&__narrow-list {
+		max-width: 416px;
+	}
+}

package/dist/esm/steps-list-item/index.js

@@ -0,0 +1,48 @@
+/**
+ * Steps List Item
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+class StepsListItem extends Component {
+  /**
+   * Render
+   */
+  render() {
+    const {
+      className,
+      listItemCount,
+      listItemText,
+      style = {}
+    } = this.props;
+    const classes = classnames('steps-list-item', className);
+    return _jsxs("div", {
+      className: classes,
+      style: style,
+      children: [_jsx("div", {
+        className: "steps-list-item__number",
+        children: listItemCount
+      }), _jsx("div", {
+        className: "steps-list-item__content",
+        dangerouslySetInnerHTML: {
+          __html: listItemText
+        }
+      })]
+    });
+  }
+}
+export default StepsListItem;

package/dist/esm/steps-list-item/style.scss

@@ -0,0 +1,47 @@
+@use '../../../shared/scss/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
+
+.steps-list-item {
+	align-items: center;
+	display: grid;
+	grid-template-columns: 28px auto;
+	gap: 24px;
+	position: relative;
+
+	&::before {
+		border: 1px solid #F0F0F0;
+		bottom: -16px;
+		content: '';
+		display: block;
+		left: 14px;
+		position: absolute;
+		top: -16px;
+	}
+
+	&:first-child::before {
+		top: 50%;
+	}
+
+	&:last-child::before {
+		bottom: 50%;
+	}
+
+	+ .steps-list-item {
+		margin-top: 32px;
+	}
+
+	&__number {
+		align-items: center;
+		background: #fff;
+		border: 1px solid currentcolor;
+		border-radius: 100%;
+		color: colors.$primary-500;
+		display: flex;
+		height: 28px;
+		justify-content: center;
+		outline: 8px solid #fff;
+		position: relative;
+		width: 28px;
+		z-index: 2;
+	}
+}

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

@@ -7,21 +7,21 @@
  */
 import { Component } from '@wordpress/element';
 import { __ as alias__ } from '@wordpress/i18n';
+const __ = alias__;
+import { Button } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-
-const __ = alias__;
-import { Button, WebPreview } from '../';
+import { WebPreview } from '../';
 import './style.scss';
+
 /**
  * External dependencies
  */
-
 import classnames from 'classnames';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 class StyleCard extends Component {
   /**
    * Render.
@@ -51,26 +51,26 @@ class StyleCard extends Component {
           alt: cardTitle + ' ' + __('Thumbnail', 'newspack')
         }), _jsxs("div", {
           className: "newspack-style-card__actions",
-          children: [!isActive && _jsx(Button, {
-            isLink: true,
+          children: [isActive ? _jsx("span", {
+            className: "newspack-style-card__actions__badge",
+            children: __('Selected', 'newspack')
+          }) : _jsx(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 && _jsx(WebPreview, {
             url: url,
             label: __('View Demo', 'newspack'),
-            isLink: true
+            variant: "link"
           })]
         })]
       }), cardTitle && _jsx("div", {
         className: "newspack-style-card__title",
-        title: isActive ? __('Active', 'newspack') : null,
         children: cardTitle
       })]
     });
   }
-
 }
-
 export default StyleCard;