newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/{cjs/radio-control → radio-control}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
@@ -34,11 +34,10 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-radio-control', className);
-    return (0, _jsxRuntime.jsx)(_components.RadioControl, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RadioControl, {
       className: classes,
       ...otherProps
     });
   }
 }
-var _default = RadioControl;
-exports.default = _default;
+var _default = exports.default = RadioControl;

package/dist/{cjs/radio-control → radio-control}/style.scss

@@ -2,8 +2,8 @@
  * Radio Control
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-radio-control {
 	color: wp-colors.$gray-700;
@@ -41,7 +41,7 @@
 
 	// Radio
 
-	input[type='radio'] {
+	input[type="radio"] {
 		height: 24px;
 		margin-right: 8px;
 		width: 24px;

package/dist/{cjs/section-header → section-header}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _element = require("@wordpress/element");
 var _ = require("..");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Section Header
  */
@@ -26,17 +26,16 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  * External dependencies
  */
 
-const SectionHeader = _ref => {
-  let {
-    centered = false,
-    className = null,
-    description,
-    heading = 2,
-    isWhite = false,
-    noMargin = false,
-    title,
-    id = null
-  } = _ref;
+const SectionHeader = ({
+  centered = false,
+  className = null,
+  description = '',
+  heading = 2,
+  isWhite = false,
+  noMargin = false,
+  title,
+  id = null
+}) => {
   // If id is in the URL as a scrollTo param, scroll to it on render.
   const ref = (0, _element.useRef)();
   (0, _element.useEffect)(() => {
@@ -53,24 +52,24 @@ const SectionHeader = _ref => {
   }, []);
   const classes = (0, _classnames.default)('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', className);
   const HeadingTag = `h${heading}`;
-  return (0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     id: id,
+    className: "newspack-section-header__container",
     ref: ref,
-    children: (0, _jsxRuntime.jsxs)(_.Grid, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
       columns: 1,
       gutter: 8,
       className: classes,
-      children: [typeof title === 'string' && (0, _jsxRuntime.jsx)(HeadingTag, {
+      children: [typeof title === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
         children: title
-      }), typeof title === 'function' && (0, _jsxRuntime.jsx)(HeadingTag, {
+      }), typeof title === 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingTag, {
         children: title()
-      }), typeof description === 'string' && (0, _jsxRuntime.jsx)("p", {
+      }), description && typeof description === 'string' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: description
-      }), typeof description === 'function' && (0, _jsxRuntime.jsx)("p", {
+      }), typeof description === 'function' && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: description()
       })]
     })
   });
 };
-var _default = SectionHeader;
-exports.default = _default;
+var _default = exports.default = SectionHeader;

package/dist/{esm/section-header → section-header}/style.scss

@@ -2,11 +2,15 @@
  * Section Header
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-section-header {
 	margin: 64px 0 32px;
 
+	&__container:not(:first-child) {
+		margin-top: 48px;
+	}
+
 	&--no-margin,
 	h1,
 	h2,

package/dist/{cjs/select-control → select-control}/ButtonGroupControl.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _icons = require("@wordpress/icons");
 var _components = require("@wordpress/components");
 var _ = require("..");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -22,42 +22,40 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  * Internal dependencies
  */
 
-const ButtonGroupControl = _ref => {
-  let {
-    buttonOptions,
-    buttonSmall,
-    className,
-    hideLabelFromVision,
-    label,
-    onChange,
-    value
-  } = _ref;
+const ButtonGroupControl = ({
+  buttonOptions,
+  buttonSmall,
+  className,
+  hideLabelFromVision,
+  label,
+  onChange,
+  value
+}) => {
   const id = _.hooks.useUniqueId('button-group');
-  return (0, _jsxRuntime.jsx)(_components.BaseControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
     label: label,
     hideLabelFromVision: hideLabelFromVision,
     id: id.current,
     className: (0, _classnames.default)(className, 'components-select-control'),
-    children: (0, _jsxRuntime.jsx)(_components.ButtonGroup, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ButtonGroup, {
       children: buttonOptions.map(option => {
         const isSelected = value === option.value;
         let Label = () => option.label;
         if (option.icon) {
           // eslint-disable-next-line react/display-name
-          Label = () => (0, _jsxRuntime.jsx)(_icons.Icon, {
+          Label = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
             icon: option.icon
           });
         }
-        return (0, _jsxRuntime.jsx)(_components.Button, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           variant: isSelected ? 'primary' : null,
           isPressed: isSelected,
           onClick: () => onChange(option.value),
           isSmall: buttonSmall,
-          children: (0, _jsxRuntime.jsx)(Label, {})
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {})
         }, option.value);
       })
     })
   });
 };
-var _default = ButtonGroupControl;
-exports.default = _default;
+var _default = exports.default = ButtonGroupControl;

package/dist/{cjs/select-control → select-control}/GroupedSelectControl.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,30 +12,30 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _find = _interopRequireDefault(require("lodash/find"));
 var _some = _interopRequireDefault(require("lodash/some"));
 var _ = require("..");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
-const __ = _i18n.__;
+
 /**
  * External dependencies
  */
+
 /**
  * Internal dependencies
  */
+
 /**
  * SelectControl with optgroup support
- */
-function GroupedSelectControl(_ref) {
-  let {
-    help,
-    label,
-    onChange,
-    optgroups = [],
-    className,
-    hideLabelFromVision,
-    ...props
-  } = _ref;
+ */function GroupedSelectControl({
+  help,
+  label,
+  onChange,
+  optgroups = [],
+  className,
+  hideLabelFromVision,
+  ...props
+}) {
   const onChangeValue = event => {
     const {
       value
@@ -44,40 +44,37 @@ function GroupedSelectControl(_ref) {
     onChange(value, optgroup);
   };
   const id = _.hooks.useUniqueId('group-select');
-  return (0, _jsxRuntime.jsx)(_components.BaseControl, {
+  return /*#__PURE__*/(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)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "relative",
-      children: [(0, _jsxRuntime.jsxs)("select", {
+      children: [/*#__PURE__*/(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", {
+        children: [/*#__PURE__*/(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", {
+          children: (0, _i18n.__)('-- Select --', 'newspack-plugin')
+        }), optgroups.map(({
+          label: optgroupLabel,
+          options
+        }, optgroupIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)("optgroup", {
+          label: optgroupLabel,
+          children: options.map((option, optionIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+            value: option.value,
+            disabled: option.disabled,
+            children: option.label
+          }, `${option.label}-${option.value}-${optionIndex}`))
+        }, optgroupIndex))]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "components-select-control__arrow-wrapper",
-        children: (0, _jsxRuntime.jsx)(_icons.Icon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
           icon: _icons.chevronDown,
           size: 18
         })

package/dist/{cjs/select-control → select-control}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./style.scss");
 var _GroupedSelectControl = _interopRequireDefault(require("./GroupedSelectControl"));
 var _ButtonGroupControl = _interopRequireDefault(require("./ButtonGroupControl"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Select Control
  */
@@ -41,20 +41,19 @@ class SelectControl extends _element.Component {
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', className);
-    return (0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes,
-      children: optgroups ? (0, _jsxRuntime.jsx)(_GroupedSelectControl.default, {
+      children: optgroups ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedSelectControl.default, {
         optgroups: optgroups,
         ...otherProps
-      }) : buttonOptions ? (0, _jsxRuntime.jsx)(_ButtonGroupControl.default, {
+      }) : buttonOptions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroupControl.default, {
         buttonOptions: buttonOptions,
         buttonSmall: buttonSmall,
         ...otherProps
-      }) : (0, _jsxRuntime.jsx)(_components.SelectControl, {
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
         ...otherProps
       })
     });
   }
 }
-var _default = SelectControl;
-exports.default = _default;
+var _default = exports.default = SelectControl;

package/dist/{cjs/select-control → select-control}/style.scss

@@ -2,7 +2,7 @@
  * Select Control
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .components-select-control {
 	&__input {
@@ -22,7 +22,7 @@
 				padding: 8px;
 
 				&:checked {
-					background: var( --wp-admin-theme-color );
+					background: var(--wp-admin-theme-color);
 					color: white;
 				}
 			}
@@ -64,8 +64,8 @@
 			}
 
 			&:focus {
-				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;
+				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;
 			}
 		}

package/dist/settings/MinMaxSetting.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _ = require("../");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+const MinMaxSetting = ({
+  min,
+  max,
+  onChangeMin,
+  onChangeMax,
+  minPlaceholder,
+  maxPlaceholder,
+  ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "newspack-settings__min-max",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+        checked: min > 0,
+        onChange: value => onChangeMin(value ? 1 : 0),
+        label: (0, _i18n.__)('Min', 'newspack-plugin')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextControl, {
+        "data-testid": "min",
+        type: "number",
+        value: min,
+        placeholder: minPlaceholder,
+        onChange: value => onChangeMin(value > 0 ? value : 0)
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "newspack-settings__min-max",
+      "data-testid": "max",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+        checked: max > 0,
+        onChange: value => onChangeMax(value ? min || 1 : 0),
+        label: (0, _i18n.__)('Max', 'newspack-plugin')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextControl, {
+        "data-testid": "max",
+        type: "number",
+        value: max,
+        placeholder: maxPlaceholder,
+        onChange: value => onChangeMax(value > 0 ? value : 0)
+      })]
+    })]
+  });
+};
+var _default = exports.default = MinMaxSetting;

package/dist/{cjs/settings → settings}/SettingsCard.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ = require("../");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies.
  */
@@ -16,23 +16,22 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  * Internal dependencies.
  */
 
-const SettingsCard = _ref => {
-  let {
-    children,
-    className,
-    columns,
-    gutter,
-    noBorder,
-    rowGap,
-    ...props
-  } = _ref;
+const SettingsCard = ({
+  children,
+  className,
+  columns,
+  gutter,
+  noBorder,
+  rowGap,
+  ...props
+}) => {
   const classes = (0, _classnames.default)('newspack-settings__card', noBorder && 'newspack-settings__no-border', className);
-  return (0, _jsxRuntime.jsx)(_.ActionCard, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, {
     ...props,
     className: classes,
     notificationLevel: "info",
     noBorder: noBorder,
-    children: (0, _jsxRuntime.jsx)(_.Grid, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Grid, {
       columns: columns,
       gutter: gutter,
       rowGap: rowGap,
@@ -44,5 +43,4 @@ SettingsCard.defaultProps = {
   columns: 3,
   gutter: 32
 };
-var _default = SettingsCard;
-exports.default = _default;
+var _default = exports.default = SettingsCard;

package/dist/settings/SettingsSection.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ = require("../");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Internal dependencies.
+ */
+
+const SettingSection = ({
+  title,
+  description,
+  children
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
+  columns: 1,
+  gutter: 8,
+  className: "newspack-settings__section",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "newspack-settings__section__title",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: title
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InfoButton, {
+      text: description
+    })]
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "newspack-settings__section__content",
+    children: children
+  })]
+});
+var _default = exports.default = SettingSection;

package/dist/{cjs/settings → settings}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,9 +9,8 @@ var _SettingsCard = _interopRequireDefault(require("./SettingsCard"));
 var _SettingsSection = _interopRequireDefault(require("./SettingsSection"));
 var _MinMaxSetting = _interopRequireDefault(require("./MinMaxSetting"));
 require("./style.scss");
-var _default = {
+var _default = exports.default = {
   SettingsCard: _SettingsCard.default,
   SettingsSection: _SettingsSection.default,
   MinMaxSetting: _MinMaxSetting.default
-};
-exports.default = _default;
+};

package/dist/{cjs/settings → settings}/style.scss

@@ -37,16 +37,29 @@
 				}
 			}
 			&__content {
-				> div {
+				> div,
+				.newspack-settings__min-max {
 					margin: 0;
 					display: flex;
 					align-items: center;
 					justify-content: space-between;
 					flex-wrap: wrap;
-					> *:not( [class*='help'], [class*='label'] ) {
+					> *:not([class*="help"], [class*="label"]) {
 						margin: 0;
 					}
 				}
+				.newspack-autocomplete-tokenfield,
+				.newspack-settings__min-max {
+					width: 100%;
+				}
+				.newspack-autocomplete-tokenfield {
+					display: block;
+					margin: 0;
+
+					label:empty {
+						display: none;
+					}
+				}
 				.newspack-text-control,
 				.newspack-checkbox-control {
 					margin: 0 !important;