newspack-components 4.1.0 → 4.3.0

package/dist/cjs/autocomplete-with-latest-posts/style.scss

@@ -0,0 +1,150 @@
+/**
+* Styles for AutocompleteWithLatestPosts component.
+*/
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-autocomplete-with-latest-posts {
+	display: grid;
+	gap: 16px;
+	width: 100%;
+
+	.components-select-control__input {
+		max-width: none;
+	}
+
+	.components-input-control__backdrop {
+		border-color: wp-colors.$gray-700 !important;
+	}
+
+	.newspack-autocomplete-with-latest-posts__label,
+	.components-form-token-field__label,
+	.components-input-control__label,
+	.components-checkbox-control__label {
+		color: wp-colors.$gray-900 !important;
+	}
+
+	.newspack-autocomplete-tokenfield__help {
+		font-size: inherit;
+		margin-bottom: 8px !important;
+	}
+
+	.components-form-token-field {
+		&__input-container {
+			border-color: wp-colors.$gray-700;
+		}
+
+		&__suggestion {
+			padding: 8px;
+		}
+	}
+
+	// Hide the built-in "Separate with commas or the Enter key." help text when hideFormTokenHelp is true
+	&.hide-form-token-help .components-form-token-field__help {
+		display: none;
+	}
+
+	p.newspack-autocomplete-with-latest-posts__label {
+		font-size: inherit;
+		margin: 0 0 8px;
+	}
+
+	&__selected-items {
+		border-bottom: 1px solid wp-colors.$gray-700;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-bottom: 16px;
+		padding-bottom: 12px;
+
+		p.newspack-autocomplete-with-latest-posts__label {
+			flex: 0 0 100%;
+			margin: 0;
+		}
+	}
+
+	&__selected-item-button.components-button.is-tertiary {
+		background-color: wp-colors.$gray-300;
+		border-radius: 2px;
+		color: wp-colors.$gray-900;
+		font-size: 13px;
+		height: auto;
+		margin: 0;
+		padding-left: 8px;
+		padding-right: 8px;
+
+		&::after {
+			content: "✕";
+			margin-left: 8px;
+		}
+
+		&:hover {
+			box-shadow: none;
+			color: black;
+		}
+	}
+
+	&__search-suggestions,
+	&__search-suggestions-multiselect {
+		max-height: 220px;
+		overflow: visible auto;
+		margin: 0 -4px;
+		padding: 4px 4px 0;
+
+		.components-button {
+			display: block;
+			line-height: normal;
+			margin: auto;
+
+			&.is-link {
+				color: wp-colors.$gray-900;
+				padding: 8px;
+				text-decoration: none;
+				width: 100%;
+
+				&:active:not(:disabled),
+				&:hover:not(:disabled) {
+					background: wp-colors.$gray-900;
+					background: var(--wp-admin-theme-color);
+					color: white;
+				}
+			}
+			&.is-secondary {
+				margin-bottom: 8px;
+				margin-top: 8px;
+				width: 100%;
+			}
+		}
+	}
+
+	&__search-suggestions {
+		border-radius: 2px;
+		border: 1px solid wp-colors.$gray-700;
+		padding: 0;
+
+		.components-button {
+			line-height: normal;
+
+			&:focus:not(:disabled) {
+				border-radius: 0;
+				box-shadow: inset 0 0 0 1.5px wp-colors.$gray-900;
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
+
+			&.is-secondary {
+				width: calc(100% - 16px);
+			}
+		}
+	}
+
+	// Temp: CSS work-around.
+	.newspack-autocomplete-with-suggestions__label {
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 1.4;
+		text-transform: uppercase;
+		display: block;
+		margin: 0 0 8px;
+		padding: 0;
+	}
+}

package/dist/cjs/badge/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Badge component
+ */
+const Badge = ({
+  text,
+  level = 'default'
+}) => {
+  const classes = (0, _classnames.default)('newspack-badge', `is-${level}`);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: classes,
+    children: text
+  });
+};
+var _default = exports.default = Badge;

package/dist/cjs/badge/style.scss

@@ -0,0 +1,36 @@
+/**
+ * Badge
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
+
+$badge-colors: (
+	"info": colors.$primary-600,
+	"warning": wp-colors.$alert-yellow,
+	"error": wp-colors.$alert-red,
+	"success": wp-colors.$alert-green,
+);
+
+.newspack-badge {
+	background-color: color-mix(in srgb, wp-colors.$white 90%, var(--base-color));
+	border-radius: 2px;
+	color: color-mix(in srgb, wp-colors.$black 50%, var(--base-color));
+	display: block;
+	flex: 0 0 auto;
+	font-size: 12px;
+	line-height: 1.5;
+	padding: 1px 4px;
+
+	&:where(.is-default) {
+		background-color: wp-colors.$gray-100;
+		color: wp-colors.$gray-800;
+	}
+
+	// Generate color variants
+	@each $type, $color in $badge-colors {
+		&.is-#{$type} {
+			--base-color: #{$color};
+		}
+	}
+}

package/dist/cjs/button/index.js

@@ -27,6 +27,7 @@ const {
 } = _router.default;
 const Button = ({
   href,
+  loading = undefined,
   onClick,
   ...otherProps
 }) => {
@@ -50,6 +51,7 @@ const Button = ({
   }
   // @ts-expect-error - @wordpress/components' Button can only have either href or onClick, not both.
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+    loading: loading ? true : undefined,
     ...otherProps
   });
 };

package/dist/cjs/card/core-card.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+require("./style-core.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Card using WP Core's Card component.
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+const CoreCard = ({
+  actions,
+  actionType,
+  as,
+  buttonsCard,
+  className,
+  footer,
+  header,
+  icon,
+  iconBackgroundColor,
+  isActive,
+  isDraggable,
+  isFirstTarget,
+  isLastTarget,
+  isNarrow,
+  isSmall,
+  dragIndex,
+  onDragCallback = () => {},
+  onHeaderClick,
+  noBorder,
+  noMargin,
+  children = null,
+  ...otherProps
+}) => {
+  const classes = (0, _classnames.default)('newspack-card--core', className, (buttonsCard || as === 'a') && 'newspack-card--core__buttons-card', isDraggable && 'newspack-card--core__is-draggable', isNarrow && 'newspack-card--core__is-narrow', isSmall && 'newspack-card--core__is-small', icon && 'newspack-card--core__has-icon', iconBackgroundColor && 'newspack-card--core__has-icon-background-color', isActive && 'newspack-card--core__is-active', children && 'newspack-card--core__has-children', noMargin && 'newspack-card--core__no-margin');
+  let sizeProps = isSmall ? 'small' : otherProps.size;
+  if (buttonsCard || as === 'a') {
+    if (!isSmall) {
+      sizeProps = 'large';
+    }
+    if (as !== 'a') {
+      otherProps.as = 'a'; // Render as an anchor tag.
+    }
+  }
+  if (noBorder) {
+    otherProps.isBorderless = true;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Card, {
+    as: as,
+    className: classes,
+    ...otherProps,
+    children: [(header || icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardHeader, {
+      as: onHeaderClick ? 'button' : undefined,
+      className: (0, _classnames.default)('newspack-card--core__header', isDraggable && 'newspack-card--core__header--is-draggable'),
+      size: sizeProps,
+      onClick: onHeaderClick,
+      children: [isDraggable && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-card--core__header__draggable-controls",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "newspack-card--core__header__draggable-controls__drag-handle",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+            icon: _icons.dragHandle
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-card--core__header__draggable-controls__move-buttons",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            icon: _icons.chevronUp,
+            onClick: () => onDragCallback(dragIndex, dragIndex - 1),
+            disabled: isFirstTarget,
+            label: (0, _i18n.__)('Move one position up', 'newspack-plugin'),
+            size: "small"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            icon: _icons.chevronDown,
+            onClick: () => onDragCallback(dragIndex, dragIndex + 1),
+            disabled: isLastTarget,
+            label: (0, _i18n.__)('Move one position down', 'newspack-plugin'),
+            size: "small"
+          })]
+        })]
+      }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-card--core__icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: icon,
+          height: isSmall ? 24 : 48,
+          width: isSmall ? 24 : 48
+        })
+      }), header && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "newspack-card--core__header-content",
+        children: header
+      }), !actions?.length > 0 && actionType === 'chevron' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+        className: "newspack-card--core__action",
+        icon: _icons.chevronRight,
+        height: 24,
+        width: 24
+      }), !actions?.length > 0 && actionType === 'toggle' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+        className: "newspack-card--core__action",
+        label: otherProps.title,
+        hideLabelFromVision: true,
+        checked: isActive,
+        onChange: () => {}
+      }), actions?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+        icon: _icons.moreVertical,
+        label: (0, _i18n.__)('More', 'newspack-plugin'),
+        children: () => actions.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+          icon: action.icon,
+          onClick: action.action,
+          disabled: action.disabled || false,
+          isDestructive: action.destructive || false,
+          children: action.label
+        }, index))
+      })]
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "newspack-card--core__body",
+      children: children
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardFooter, {
+      size: sizeProps,
+      children: footer
+    })]
+  });
+};
+var _default = exports.default = CoreCard;

package/dist/cjs/card/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _element = require("@wordpress/element");
+var _coreCard = _interopRequireDefault(require("./core-card"));
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -39,8 +40,40 @@ class Card extends _element.Component {
       isSmall,
       isWhite,
       noBorder,
+      // Pass as `true` to render using WP Core's Card component: https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
+      __experimentalCoreCard,
+      // Pass props supported by WP Core's Card component in this single prop.
+      __experimentalCoreProps = {
+        actionType: null,
+        // chevron | toggle | button | link | none
+        header: null,
+        // Pass a React component to render in a CardHeader component.
+        icon: null,
+        footer: null,
+        // Pass a React component to render in a CardFooter component.
+        noMargin: false,
+        isDraggable: false,
+        dragIndex: null,
+        onDragCallback: () => {}
+      },
       ...otherProps
     } = this.props;
+    if (__experimentalCoreCard) {
+      const props = {
+        buttonsCard,
+        className,
+        isMedium,
+        isNarrow,
+        isSmall,
+        isWhite,
+        noBorder,
+        ...otherProps,
+        ...__experimentalCoreProps
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_coreCard.default, {
+        ...props
+      });
+    }
     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 /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes,

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

@@ -0,0 +1,227 @@
+/**
+ * Card using WP Core component
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../colors/colors.module" as colors;
+
+.newspack-card--core,
+.newspack-wizard .newspack-card--core {
+	background: white;
+	position: relative;
+	transition: background-color 125ms ease-in-out, box-shadow 125ms ease-in-out, color 125ms ease-in-out;
+	svg {
+		transition: fill 125ms ease-in-out;
+	}
+	&__icon {
+		border-radius: 50%;
+		display: grid;
+		height: 48px;
+		place-items: center;
+		width: 48px;
+		svg {
+			fill: var(--wp-admin-theme-color);
+			height: 40px;
+			width: 40px;
+		}
+		.newspack-card--core__has-icon-background-color & {
+			background: var(--wp-admin-theme-color-lighter-10);
+		}
+	}
+	&__is-small {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			font-size: 14px;
+			font-weight: 500;
+		}
+		.newspack-card--core__icon {
+			height: 40px;
+			width: 40px;
+			svg {
+				height: 24px;
+				width: 24px;
+			}
+		}
+	}
+	&__no-margin .components-card__body {
+		padding: 0 !important;
+	}
+	&__header {
+		color: wp-colors.$gray-700;
+		column-gap: 16px;
+		position: relative;
+		.newspack-card--core__action {
+			margin: 0;
+			label {
+				border: 0;
+				clip-path: inset(50%);
+				height: 1px;
+				margin: -1px;
+				overflow: hidden;
+				padding: 0;
+				position: absolute !important;
+				width: 1px;
+				word-wrap: normal !important;
+			}
+		}
+		.components-dropdown-menu {
+			aspect-ratio: 1;
+			border-left: 1px solid wp-colors.$gray-200;
+			display: grid;
+			height: 100%;
+			padding: 4px;
+			place-items: center;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+	}
+	&__header--is-draggable {
+		.newspack-card--core__header-content {
+			padding-left: 65px;
+		}
+		.newspack-card--core__header__draggable-controls {
+			align-items: center;
+			border-right: 1px solid wp-colors.$gray-200;
+			display: flex;
+			height: 100%;
+			justify-content: space-between;
+			left: 0;
+			padding: 0 8px;
+			position: absolute;
+			top: 0;
+		}
+		.newspack-card--core__header__draggable-controls__drag-handle {
+			cursor: grab;
+			display: grid;
+			place-items: center;
+		}
+		.newspack-card--core__header__draggable-controls__move-buttons {
+			display: flex;
+			flex-direction: column;
+			.components-button.has-icon {
+				height: 16px;
+				padding: 0;
+				width: 100%;
+			}
+		}
+	}
+	button.newspack-card--core__header {
+		appearance: none;
+		background-color: white;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+	}
+	&__header-content {
+		display: grid;
+		flex: 1;
+		grid-gap: 8px;
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		p {
+			margin-bottom: 0;
+			margin-top: 0;
+			transition: color 125ms ease-in-out;
+		}
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			align-items: center;
+			color: wp-colors.$gray-900;
+			font-weight: 500;
+			display: flex;
+			gap: 8px;
+			.newspack-badge {
+				font-weight: 400;
+			}
+		}
+	}
+	&__is-active {
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+		button.newspack-card--core__header {
+			background-color: rgba( var(--wp-admin-theme-color--rgb), 0.04 );
+			color: var(--wp-admin-theme-color);
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: var(--wp-admin-theme-color);
+			}
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+		}
+
+		&.newspack-card--core__has-children {
+			button.newspack-card--core__header {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+			.newspack-card--core__body {
+				border-top: 1px solid var(--wp-admin-theme-color);
+			}
+			.components-card__divider {
+				background: wp-colors.$gray-100;
+			}
+		}
+	}
+	&__buttons-card {
+		display: block;
+		text-decoration: none;
+		&:active,
+		&:hover {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+			.newspack-card--core__header {
+				color: var(--wp-admin-theme-color);
+				h1,
+				h2,
+				h3,
+				h4,
+				h5,
+				h6 {
+					color: var(--wp-admin-theme-color);
+				}
+				svg {
+					fill: var(--wp-admin-theme-color);
+				}
+			}
+		}
+	}
+	hr.components-card__divider {
+		margin: 0;
+	}
+	&__is-narrow {
+		margin-left: auto;
+		margin-right: auto;
+		@media screen and ( min-width: 608px ) {
+			max-width: 576px;
+		}
+	}
+	&__body {
+		> div:not(.components-card__body):not(.components-card__media):not(.components-card__divider) {
+			padding: 16px 24px;
+			.newspack-card--core__is-small & {
+				padding: 16px;
+			}
+			.newspack-card--core__no-margin & {
+				padding: 0;
+			}
+		}
+	}
+}

package/dist/cjs/card/style.scss

@@ -133,11 +133,11 @@
 
 	// Thematic Break
 
-	hr {
+	hr:not(.newspack-divider) {
 		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
-		margin: 48px 0;
+		margin: 32px 0;
 
 		@media screen and ( min-width: 744px ) {
 			margin: 64px 0;