newspack-components 3.0.0-alpha.2 → 3.0.0-alpha.3

package/dist/esm/action-card/style.scss

@@ -0,0 +1,483 @@
+/**
+ * Action Card
+ */
+
+@use "sass:color";
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-card.newspack-action-card {
+	padding: 0;
+	border-color: wp-colors.$gray-300;
+
+	// Clickable
+
+	&.newspack-card--is-clickable {
+		transition: box-shadow 125ms ease-in-out;
+
+		&:hover {
+			box-shadow: 0 4px 8px rgba(black, 0.08);
+		}
+	}
+
+	// Status
+
+	&.newspack-card__is-disabled,
+	&.newspack-card__is-primary,
+	&.newspack-card__is-secondary,
+	&.newspack-card__is-supported,
+	&.newspack-card__is-unsupported {
+		box-shadow: inset 4px 0 0 wp-colors.$gray-100;
+
+		.newspack-action-card__region-top {
+			padding-left: 28px;
+		}
+	}
+
+	&.newspack-card__is-primary {
+		box-shadow: inset 4px 0 0 var(--wp-admin-theme-color);
+	}
+
+	&.newspack-card__is-secondary {
+		box-shadow: inset 4px 0 0 wp-colors.$alert-yellow;
+	}
+
+	&.newspack-card__is-supported {
+		box-shadow: inset 4px 0 0 wp-colors.$alert-green;
+	}
+
+	&.newspack-card__is-unsupported {
+		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
+	}
+
+	// Small
+	&.is-small {
+		.newspack-action-card__region-top {
+			padding: 8px 16px;
+
+			.components-toggle-control {
+				margin-bottom: 16px;
+
+				@media screen and ( min-width: 744px ) {
+					margin-bottom: 0;
+					margin-right: 16px;
+				}
+			}
+		}
+
+		h2 {
+			font-size: 14px;
+		}
+
+		p,
+		.newspack-action-card__region-right,
+		.newspack-action-card__primary_button {
+			font-size: 12px;
+			line-height: 16px;
+		}
+
+		code {
+			padding: 0 4px;
+		}
+
+		& + & {
+			margin-top: -16px;
+		}
+
+		&.mv0 {
+			border-left-color: wp-colors.$gray-300;
+			border-radius: 0;
+			border-right-color: wp-colors.$gray-300;
+
+			&:first-of-type {
+				border-top-color: wp-colors.$gray-300;
+				border-top-left-radius: 3px;
+				border-top-right-radius: 3px;
+			}
+
+			&:last-of-type {
+				border-bottom-color: wp-colors.$gray-300;
+				border-bottom-left-radius: 3px;
+				border-bottom-right-radius: 3px;
+			}
+
+			& + & {
+				margin-top: -1px;
+			}
+		}
+
+		&.newspack-card__is-disabled,
+		&.newspack-card__is-primary,
+		&.newspack-card__is-secondary,
+		&.newspack-card__is-supported,
+		&.newspack-card__is-unsupported {
+			.newspack-action-card__region-top {
+				padding-left: 20px;
+			}
+		}
+	}
+
+	// Medium
+
+	&.is-medium {
+		.newspack-action-card__region-top {
+			padding: 16px;
+
+			.components-toggle-control {
+				margin-bottom: 16px;
+
+				@media screen and ( min-width: 744px ) {
+					margin-bottom: 0;
+					margin-right: 16px;
+				}
+			}
+		}
+
+		.newspack-action-card__region-left {
+			margin-bottom: 16px;
+
+			@media screen and ( min-width: 744px ) {
+				margin-bottom: 0;
+				margin-right: 16px;
+			}
+		}
+
+		.newspack-action-card__region-children {
+			padding: 0 32px 32px;
+		}
+	}
+
+	// Nested children
+
+	&.newspack-card--has-children {
+		.newspack-action-card {
+			&:first-child {
+				margin-top: 32px;
+			}
+
+			+ .newspack-action-card {
+				margin-top: 16px !important;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	// Has grey header
+
+	&.newspack-card--has-grey-header {
+		overflow: hidden;
+
+		&.newspack-card--has-children {
+			.newspack-action-card__region-top {
+				border-bottom: 1px solid wp-colors.$gray-300;
+			}
+
+			.is-small > .newspack-action-card__region-top {
+				padding-bottom: 8px;
+				padding-top: 8px;
+			}
+		}
+
+		.newspack-action-card__region-top {
+			background-color: rgba(black, 0.025);
+		}
+
+		.newspack-action-card__region-center {
+			p {
+				color: color.adjust(wp-colors.$gray-700, $lightness: -0.75%);
+			}
+		}
+	}
+
+	&.newspack-card--has-white-header {
+		.newspack-action-card__region-top {
+			background-color: transparent;
+			border: none !important;
+		}
+	}
+
+	// Indent
+
+	&.newspack-card--indent {
+		margin-left: 56px;
+		position: relative;
+
+		&::before {
+			border: 0 solid wp-colors.$gray-300;
+			border-left-width: 1px;
+			border-bottom-width: 1px;
+			border-radius: 0 0 0 2px;
+			content: "";
+			display: block;
+			position: absolute;
+			inset: -17px 100% 50% -28px;
+		}
+	}
+
+	// Typography
+
+	h2,
+	p:not([class*="components-base-control"]) {
+		margin: 0;
+		max-width: 100%;
+		width: 100%;
+	}
+
+	h2 {
+		align-items: center;
+		display: flex;
+		flex-wrap: wrap;
+		margin-right: -8px;
+
+		.newspack-action-card__title {
+			margin-right: 8px;
+		}
+
+		a {
+			color: inherit;
+			text-decoration: none;
+
+			&:active,
+			&:focus,
+			&:hover {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+	}
+
+	// Regions
+
+	.newspack-action-card__region {
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+		margin: 0;
+	}
+
+	.newspack-action-card__region-top {
+		padding: 24px;
+		display: block;
+
+		@media screen and ( min-width: 744px ) {
+			display: flex;
+		}
+
+		// Toggle Control
+		.components-toggle-control {
+			margin-bottom: 24px;
+			margin-top: 0;
+
+			@media screen and ( min-width: 744px ) {
+				margin-bottom: 0;
+				margin-right: 24px;
+			}
+
+			.components-base-control__field {
+				margin-bottom: 0;
+			}
+
+			.components-form-toggle {
+				display: flex;
+				margin: 0;
+			}
+		}
+	}
+
+	.newspack-action-card__region-children {
+		padding: 0 24px 24px;
+
+		&__inner {
+			padding-top: 32px;
+
+			> *:first-child {
+				margin-top: 0 !important;
+			}
+
+			> *:last-child {
+				margin-bottom: 0 !important;
+			}
+		}
+
+		.newspack-section-header {
+			margin: 32px 0 16px;
+		}
+
+		.newspack-card,
+		.newspack-checkbox-control,
+		.newspack-grid,
+		.newspack-text-control,
+		.newspack-toggle-control {
+			margin: 16px 0;
+		}
+	}
+
+	.newspack-action-card__region-left {
+		margin-bottom: 24px;
+
+		@media screen and ( min-width: 744px ) {
+			margin-bottom: 0;
+			margin-right: 24px;
+		}
+	}
+
+	.newspack-action-card__region-center {
+		align-items: flex-start;
+		flex: 1 1 auto;
+		flex-wrap: wrap;
+
+		.newspack-grid {
+			width: 100%;
+		}
+
+		p {
+			color: wp-colors.$gray-700;
+		}
+	}
+
+	.newspack-action-card__region-right {
+		align-items: flex-start;
+		flex: 0 0 auto;
+		flex-direction: column;
+		margin-top: 24px;
+		text-align: right;
+
+		@media screen and ( min-width: 744px ) {
+			align-items: flex-end;
+			flex-direction: column;
+			margin-left: 24px;
+			margin-top: 0;
+		}
+
+		> * {
+			text-align: inherit;
+		}
+
+		.newspack-action-card__secondary_button {
+			margin-top: 8px;
+		}
+	}
+
+	// Waiting
+
+	.newspack-action-card__container {
+		display: flex;
+	}
+
+	// Notifications
+
+	.newspack-action-card__notification {
+		.newspack-notice {
+			margin: 0;
+
+			&__heading {
+				margin-top: 0;
+			}
+		}
+
+		&.newspack-action-card__region-children {
+			.newspack-notice {
+				margin-top: 32px;
+			}
+		}
+	}
+
+	// Image
+
+	.newspack-action-card__image {
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: cover;
+		border-radius: 50%;
+		height: 48px;
+		width: 48px;
+	}
+
+	// Icon
+
+	.newspack_plugin-installer__icon {
+		margin: 0;
+	}
+
+	// Badge
+
+	.newspack-action-card__badge {
+		background: wp-colors.$gray-100;
+		border-radius: 2px;
+		color: wp-colors.$gray-900;
+		display: block;
+		flex: 0 0 auto;
+		font-size: 10px;
+		font-weight: bold;
+		line-height: 1.4;
+		margin: 0 8px 0 0;
+		padding: 2px 8px;
+		text-transform: uppercase;
+
+		+ .newspack-action-card__badge {
+			margin-left: -4px;
+		}
+	}
+
+	// Description Card
+
+	&.newspack-description-card {
+		font-style: italic;
+	}
+
+	// Expandable card children
+
+	&.is-expandable {
+		.newspack-action-card__title .components-button.is-link {
+			color: inherit;
+			font-size: inherit;
+			font-weight: inherit;
+			text-decoration: inherit;
+		}
+
+		.newspack-action-card__region-children {
+			border-top: 1px solid wp-colors.$gray-100;
+			padding-top: 24px;
+		}
+
+		&.is-medium .newspack-action-card__region-children {
+			padding-top: 32px;
+		}
+
+		&.has-checkbox {
+			.newspack-action-card__region-children {
+				padding-left: 72px;
+			}
+
+			&.is-small .newspack-action-card__region-children {
+				padding-left: 64px;
+			}
+
+			&.is-medium .newspack-action-card__region-children {
+				padding-left: 56px;
+			}
+		}
+	}
+
+	// Action content with multiple buttons
+	&.has-action-content .newspack-action-card__region-right {
+		flex-direction: row;
+
+		.components-button + .components-button {
+			margin-left: 8px;
+		}
+	}
+
+	// Multiple Cards
+
+	& + & {
+		margin-top: -16px;
+	}
+}
+
+.newspack-card {
+	.newspack-card.newspack-action-card {
+		border: 1px solid wp-colors.$gray-200;
+	}
+}

package/dist/esm/autocomplete-tokenfield/index.js

@@ -0,0 +1,261 @@
+/**
+ * External dependencies
+ */
+import debounce from 'lodash/debounce';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { FormTokenField, Spinner } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * An multi-selecting, api-driven autocomplete input suitable for use in block attributes.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+class AutocompleteTokenField extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      suggestions: [],
+      validValues: {},
+      loading: this.isFetchingInfoOnLoad()
+    };
+    this.debouncedUpdateSuggestions = debounce(this.updateSuggestions, 500);
+  }
+
+  /**
+   * If the component has tokens passed in props, it should fetch info after it mounts.
+   */
+  isFetchingInfoOnLoad = () => {
+    const {
+      tokens,
+      fetchSavedInfo
+    } = this.props;
+    return Boolean(tokens.length && fetchSavedInfo);
+  };
+
+  /**
+   * When the component loads, fetch information about the tokens so we can populate
+   * the tokens with the correct labels.
+   */
+  componentDidMount() {
+    if (this.isFetchingInfoOnLoad()) {
+      const {
+        tokens,
+        fetchSavedInfo
+      } = this.props;
+      fetchSavedInfo(tokens).then(results => {
+        const {
+          validValues
+        } = this.state;
+        results.forEach(suggestion => {
+          validValues[suggestion.value] = suggestion.label;
+        });
+        this.setState({
+          validValues,
+          loading: false
+        });
+      });
+    }
+  }
+
+  /**
+   * When the component updates, fetch information about the tokens so we can populate
+   * the tokens with the correct labels.
+   */
+  componentDidUpdate(prevProps) {
+    const {
+      tokens,
+      fetchSavedInfo
+    } = this.props;
+    if (tokens !== prevProps.tokens && this.isFetchingInfoOnLoad()) {
+      fetchSavedInfo(tokens).then(results => {
+        const {
+          validValues
+        } = this.state;
+        results.forEach(suggestion => {
+          validValues[suggestion.value] = suggestion.label;
+        });
+        this.setState({
+          validValues,
+          loading: false
+        });
+      });
+    }
+  }
+
+  /**
+   * Clean up any unfinished autocomplete api call requests.
+   */
+  componentWillUnmount() {
+    delete this.suggestionsRequest;
+    this.debouncedUpdateSuggestions.cancel();
+  }
+
+  /**
+   * Get a list of labels for input values.
+   *
+   * @param {Array} values Array of values (ids, etc.).
+   * @return {Array} array of valid labels corresponding to the values.
+   */
+  getLabelsForValues(values) {
+    const {
+      validValues
+    } = this.state;
+    return values.reduce((accumulator, value) => {
+      if (!value) {
+        return accumulator;
+      }
+      if (value.label) {
+        return [...accumulator, value.label];
+      }
+      return validValues[value] ? [...accumulator, validValues[value]] : accumulator;
+    }, []);
+  }
+
+  /**
+   * Get a list of values for input labels.
+   *
+   * @param {Array} labels Array of labels from the tokens.
+   * @return {Array} Array of valid values corresponding to the labels.
+   */
+  getValuesForLabels(labels) {
+    const {
+      returnFullObjects
+    } = this.props; // If this prop is passed, return both the value and label. Otherwise, return just the label.
+    const {
+      validValues
+    } = this.state;
+    if (returnFullObjects) {
+      return labels.reduce((acc, label) => {
+        Object.keys(validValues).forEach(key => {
+          if (validValues[key] === label) {
+            // Preserve numeric or string type of values. Object.keys will convert numbers to strings.
+            const value = isNaN(parseInt(key)) ? key.toString() : parseInt(key);
+            acc.push({
+              value,
+              label
+            });
+          }
+        });
+        return acc;
+      }, []);
+    }
+    return labels.map(label => Object.keys(validValues).map(key => isNaN(parseInt(key)) ? key.toString() : parseInt(key)).find(key => validValues[key] === label));
+  }
+
+  /**
+   * Refresh the autocomplete dropdown.
+   *
+   * @param {string} input Input to fetch suggestions for
+   */
+  updateSuggestions(input) {
+    const {
+      fetchSuggestions
+    } = this.props;
+    if (!fetchSuggestions) {
+      return;
+    }
+    this.setState({
+      loading: true
+    }, () => {
+      const request = fetchSuggestions(input);
+      request.then(suggestions => {
+        // A fetch Promise doesn't have an abort option. It's mimicked by
+        // comparing the request reference in on the instance, which is
+        // reset or deleted on subsequent requests or unmounting.
+        if (this.suggestionsRequest !== request) {
+          return;
+        }
+        const {
+          validValues
+        } = this.state;
+        const currentSuggestions = [...suggestions];
+        suggestions.forEach(suggestion => {
+          validValues[suggestion.value] = suggestion.label;
+        });
+        this.setState({
+          suggestions: currentSuggestions,
+          validValues,
+          loading: false
+        });
+      }).catch(() => {
+        if (this.suggestionsRequest === request) {
+          this.setState({
+            loading: false
+          });
+        }
+      });
+      this.suggestionsRequest = request;
+    });
+  }
+
+  /**
+   * When a token is selected, we need to convert the string label into a recognized value suitable for saving as an attribute.
+   *
+   * @param {Array} tokenStrings An array of token label strings.
+   */
+  handleOnChange(tokenStrings) {
+    const {
+      onChange
+    } = this.props;
+    onChange(this.getValuesForLabels(tokenStrings));
+  }
+
+  /**
+   * To populate the tokens, we need to convert the values into a human-readable label.
+   *
+   * @return {Array} An array of token label strings.
+   */
+  getTokens() {
+    const {
+      tokens
+    } = this.props;
+    return this.getLabelsForValues(tokens);
+  }
+
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      help,
+      label = '',
+      placeholder = '',
+      maxLength
+    } = this.props;
+    const {
+      suggestions,
+      loading
+    } = this.state;
+    const classNames = ['newspack-autocomplete-tokenfield__input-container'];
+    if (label) {
+      classNames.push('has-label');
+    }
+    return /*#__PURE__*/_jsxs("div", {
+      className: "newspack-autocomplete-tokenfield",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classNames.join(' '),
+        children: [/*#__PURE__*/_jsx(FormTokenField, {
+          value: this.getTokens(),
+          suggestions: suggestions.map(suggestion => suggestion.label),
+          onChange: tokens => this.handleOnChange(tokens),
+          onInputChange: input => this.debouncedUpdateSuggestions(input),
+          label: label,
+          maxLength: maxLength,
+          placeholder: placeholder
+        }), loading && /*#__PURE__*/_jsx(Spinner, {})]
+      }), help && /*#__PURE__*/_jsx("p", {
+        className: "newspack-autocomplete-tokenfield__help",
+        children: help
+      })]
+    });
+  }
+}
+export default AutocompleteTokenField;