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

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

@@ -0,0 +1,180 @@
+/**
+ * Button Card
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-button-card {
+	background: white;
+	border-radius: 2px;
+	border: 1px solid wp-colors.$gray-300;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent;
+	cursor: pointer;
+	display: block;
+	margin: 32px 0;
+	padding: 32px;
+	position: relative;
+	text-decoration: none;
+	transition:
+		background-color 125ms ease-in-out,
+		border-color 125ms ease-in-out,
+		box-shadow 125ms ease-in-out;
+
+	&:focus,
+	&.is-pressed {
+		background: white;
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color) !important;
+		outline: none !important;
+		z-index: 1;
+	}
+
+	&.is-pressed:focus-visible {
+		box-shadow:
+			inset 0 0 0 1px var(--wp-admin-theme-color),
+			0 0 0 1px white,
+			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
+	}
+
+	&:active,
+	&:hover {
+		border-color: var(--wp-admin-theme-color);
+		color: var(--wp-admin-theme-color);
+		text-decoration: none;
+		z-index: 1;
+
+		.newspack-grid h3,
+		p {
+			color: inherit;
+		}
+	}
+
+	.newspack-grid h3,
+	p {
+		transition: color 125ms ease-in-out;
+	}
+
+	.newspack-grid h3 {
+		color: wp-colors.$gray-900;
+	}
+
+	p {
+		color: wp-colors.$gray-700;
+	}
+
+	// Grouped
+
+	&.grouped {
+		border-radius: 0;
+
+		& + &:not(.br--top) {
+			margin-top: -33px;
+		}
+
+		&.br--bottom {
+			border-bottom-left-radius: 2px;
+			border-bottom-right-radius: 2px;
+		}
+
+		&.br--top {
+			border-top-left-radius: 2px;
+			border-top-right-radius: 2px;
+		}
+	}
+
+	// Chevron & Icon
+
+	&.has-chevron,
+	&.has-icon {
+		align-items: center;
+		display: grid;
+		grid-gap: 16px;
+		grid-template-columns: auto 24px;
+
+		&:active,
+		&:hover {
+			svg {
+				fill: currentcolor;
+			}
+		}
+
+		svg {
+			fill: var(--wp-admin-theme-color);
+			transition: fill 125ms ease-in-out;
+		}
+	}
+
+	&.has-icon {
+		grid-template-columns: 48px auto;
+
+		&.has-chevron {
+			grid-template-columns: 48px auto 24px;
+		}
+	}
+
+	// Is Small
+
+	&.is-small {
+		padding: 16px;
+
+		&.has-chevron,
+		&.has-icon {
+			svg {
+				height: 24px;
+				width: 24px;
+			}
+		}
+
+		&.has-icon {
+			grid-template-columns: 24px auto;
+
+			&.has-chevron {
+				grid-template-columns: 24px auto 24px;
+			}
+		}
+
+		h3 {
+			font-size: 1em;
+			line-height: 1.5;
+		}
+
+		p {
+			font-size: 12px;
+			line-height: 1.4;
+		}
+	}
+
+	// Is Destructive
+
+	&.is-destructive {
+		.title {
+			color: wp-colors.$alert-red;
+		}
+
+		&.has-chevron,
+		&.has-icon {
+			svg {
+				fill: wp-colors.$alert-red;
+			}
+		}
+
+		&:focus,
+		&.is-pressed {
+			border-color: wp-colors.$alert-red;
+			box-shadow: inset 0 0 0 1px wp-colors.$alert-red !important;
+		}
+
+		&.is-pressed:focus-visible {
+			box-shadow:
+				inset 0 0 0 1px wp-colors.$alert-red,
+				0 0 0 1px white,
+				0 0 0 var(--wp-admin-border-width-focus) wp-colors.$alert-red !important;
+		}
+
+		&:active,
+		&:hover {
+			background-color: wp-colors.$gray-100;
+			border-color: wp-colors.$alert-red;
+		}
+	}
+}

package/dist/esm/card/index.js

@@ -0,0 +1,43 @@
+/**
+ * Card
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+class Card extends Component {
+  /**
+   * Render
+   */
+  render() {
+    const {
+      buttonsCard,
+      className,
+      headerActions,
+      isNarrow,
+      isMedium,
+      isSmall,
+      isWhite,
+      noBorder,
+      ...otherProps
+    } = this.props;
+    const classes = classNames('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__*/_jsx("div", {
+      className: classes,
+      ...otherProps
+    });
+  }
+}
+export default Card;

package/dist/esm/card/style.scss

@@ -0,0 +1,168 @@
+/**
+ * Card
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-card {
+	border-radius: 2px;
+	border: 1px solid wp-colors.$gray-300;
+	color: wp-colors.$gray-900;
+	margin: 32px 0;
+	padding: 16px 48px;
+
+	@media screen and ( min-width: 744px ) {
+		padding: 32px 64px;
+	}
+
+	// Buttons Card
+
+	&__buttons-card {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 16px;
+		margin: 32px 0;
+	}
+
+	// Header Actions Card
+
+	&__header-actions {
+		align-items: center;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		justify-content: space-between;
+		margin-bottom: -16px;
+
+		> * {
+			margin-bottom: 0 !important;
+			margin-top: 0 !important;
+		}
+
+		.newspack-select-control {
+			.components-base-control__field {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	// Is Narrow
+
+	&__is-narrow {
+		margin-left: auto;
+		margin-right: auto;
+
+		@media screen and ( min-width: 608px ) {
+			max-width: 576px;
+		}
+	}
+
+	// Is Small
+
+	&__is-small {
+		padding: 16px;
+
+		> *:first-child {
+			margin-top: 0 !important;
+		}
+
+		> *:last-child {
+			margin-bottom: 0 !important;
+		}
+
+		> p {
+			margin: 16px 0 !important;
+		}
+
+		& + & {
+			margin-top: -16px;
+		}
+	}
+
+	// Is Medium
+
+	&__is-medium {
+		padding: 32px;
+
+		> *:first-child {
+			margin-top: 0 !important;
+		}
+
+		> *:last-child {
+			margin-bottom: 0 !important;
+		}
+	}
+
+	// Is White
+
+	&__is-white {
+		background: white;
+		border: 0;
+	}
+
+	// No Border
+
+	&__no-border {
+		border-radius: 0;
+		border: 0;
+		padding: 0;
+	}
+
+	// Margin
+
+	&.mt64 {
+		margin-top: 64px;
+	}
+
+	&.mt16 {
+		margin-top: 16px;
+	}
+
+	// Typography
+
+	small {
+		font-size: 12px;
+		line-height: 1.4;
+	}
+
+	code {
+		background: wp-colors.$gray-100;
+		color: wp-colors.$gray-900;
+		padding: 0 0.5em;
+	}
+
+	// Thematic Break
+
+	hr {
+		background: wp-colors.$gray-300;
+		border: 0;
+		height: 1px;
+		margin: 48px 0;
+
+		@media screen and ( min-width: 744px ) {
+			margin: 64px 0;
+		}
+	}
+
+	// Separator
+
+	.sep {
+		background: wp-colors.$gray-300;
+		height: 1px;
+		margin-left: 8px;
+		margin-right: 8px;
+		width: 12px;
+
+		&__inline {
+			display: inline-block;
+			line-height: 1.5;
+			vertical-align: middle;
+		}
+	}
+
+	// Error
+
+	.newspack-error {
+		color: wp-colors.$alert-red;
+	}
+}

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

@@ -0,0 +1,183 @@
+/**
+ * Category Autocomplete
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Spinner } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies.
+ */
+import { FormTokenField } from '../';
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import debounce from 'lodash/debounce';
+import find from 'lodash/find';
+import filter from 'lodash/filter';
+import classnames from 'classnames';
+
+/**
+ * Category autocomplete field component.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+class CategoryAutocomplete extends Component {
+  state = {
+    suggestions: {},
+    allCategories: {},
+    isLoading: false
+  };
+
+  /**
+   * Class constructor.
+   */
+  constructor(props) {
+    super(props);
+    this.debouncedUpdateSuggestions = debounce(this.updateSuggestions, 100);
+  }
+  componentDidMount() {
+    this.setState({
+      isLoading: true
+    });
+    apiFetch({
+      path: addQueryArgs(`/wp/v2/${this.props.taxonomy}`, {
+        per_page: -1,
+        _fields: 'id,name'
+      })
+    }).then(categories => this.setState({
+      allCategories: categories
+    })).finally(() => this.setState({
+      isLoading: false
+    }));
+  }
+
+  /**
+   * Clean up debounced suggestions method.
+   */
+  componentWillUnmount() {
+    this.debouncedUpdateSuggestions.cancel();
+  }
+
+  /**
+   * Refresh the autocomplete UI based on text that was typed.
+   *
+   * @param {string} search The typed text to search for.
+   */
+  updateSuggestions(search) {
+    this.setState({
+      isLoading: true
+    });
+    apiFetch({
+      path: addQueryArgs(`/wp/v2/${this.props.taxonomy}`, {
+        search,
+        per_page: 20,
+        _fields: 'id,name',
+        orderby: 'count',
+        order: 'desc'
+      })
+    }).then(categories => {
+      this.setState({
+        suggestions: categories.reduce((accumulator, category) => ({
+          ...accumulator,
+          [category.name]: category
+        }), {})
+      });
+    }).finally(() => this.setState({
+      isLoading: false
+    }));
+  }
+
+  /**
+   * Prepare categories data for the API endpoint, call the change handler.
+   *
+   * @param {Array} tokens An array of category tokens.
+   */
+  handleOnChange = tokens => {
+    const {
+      onChange
+    } = this.props;
+    const {
+      suggestions
+    } = this.state;
+    // Categories that are already will be objects, while new additions will be strings (the name).
+    // allValues nomalizes the array so that they are all objects.
+    const allValues = tokens.filter(token => 'undefined' !== typeof token) // Ensure each token is a valid value.
+    .map(token => 'string' === typeof token ? suggestions[token] : token).filter(Boolean);
+    onChange(allValues);
+  };
+  getAvailableSuggestions = () => {
+    const {
+      value
+    } = this.props;
+    const {
+      suggestions
+    } = this.state;
+    const selectedIds = value.reduce((acc, item) => {
+      if (item?.id) {
+        acc.push(item.id);
+      }
+      return acc;
+    }, []);
+    const availableSuggestions = filter(suggestions, ({
+      id
+    }) => selectedIds.indexOf(id) === -1);
+    return availableSuggestions.map(v => v.name);
+  };
+
+  /**
+   * Render the component.
+   */
+  render() {
+    const {
+      className,
+      disabled,
+      description,
+      hideHelpFromVision,
+      hideLabelFromVision,
+      label,
+      value
+    } = this.props;
+    const {
+      allCategories,
+      isLoading
+    } = this.state;
+    const classes = classnames('newspack-category-autocomplete', className);
+    return /*#__PURE__*/_jsxs("div", {
+      className: classes,
+      children: [/*#__PURE__*/_jsx(FormTokenField, {
+        onInputChange: input => this.debouncedUpdateSuggestions(input),
+        value: value.reduce((acc, item) => {
+          const categoryOrItem = typeof item === 'number' ? find(allCategories, ['id', item]) : item;
+          if (categoryOrItem) {
+            acc.push({
+              id: categoryOrItem.term_id || categoryOrItem.id,
+              value: categoryOrItem.value || categoryOrItem.name
+            });
+          }
+          return acc;
+        }, []),
+        suggestions: this.getAvailableSuggestions(),
+        onChange: this.handleOnChange,
+        label: label,
+        disabled: disabled,
+        description: description,
+        hideHelpFromVision: hideHelpFromVision,
+        hideLabelFromVision: hideLabelFromVision
+      }), isLoading ? /*#__PURE__*/_jsx("span", {
+        className: "newspack-category-autocomplete__suggestions-spinner",
+        children: /*#__PURE__*/_jsx(Spinner, {})
+      }) : null]
+    });
+  }
+}
+CategoryAutocomplete.defaultProps = {
+  taxonomy: 'categories'
+};
+export default CategoryAutocomplete;

package/dist/esm/category-autocomplete/style.scss

@@ -0,0 +1,34 @@
+/**
+ * Category Autocomplete
+ */
+
+.newspack-category-autocomplete {
+	position: relative;
+
+	.components-form-token-field__help {
+		display: none;
+	}
+
+	// Within a Grid
+
+	.newspack-grid & .newspack-form-token-field__input-container {
+		margin: 0;
+	}
+
+	// Loading state spinner
+	&__suggestions-spinner {
+		position: absolute;
+		right: 1px;
+		top: calc(1.4em + 8px);
+		z-index: 2;
+
+		[class*="--label-hidden"] + & {
+			top: 0;
+		}
+
+		.components-spinner {
+			display: block;
+			margin: 7px;
+		}
+	}
+}

package/dist/esm/color-picker/index.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies.
+ */
+import { ColorPicker as ColorPickerComponent } from '@wordpress/components';
+import { useState, useRef } from '@wordpress/element';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
+
+/**
+ * Internal dependencies.
+ */
+import hooks from '../hooks';
+import utils from '../utils';
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+extend([a11yPlugin]);
+const {
+  InteractiveDiv
+} = utils;
+const ColorPicker = ({
+  label,
+  color = '#fff',
+  onChange,
+  className
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const ref = useRef();
+  const colordColor = colord(color);
+  hooks.useOnClickOutside(ref, () => setIsExpanded(false));
+  return /*#__PURE__*/_jsxs("div", {
+    className: classnames('newspack-color-picker', className),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "newspack-color-picker__label",
+      children: label
+    }), /*#__PURE__*/_jsx(InteractiveDiv, {
+      className: 'newspack-color-picker__expander',
+      onClick: () => setIsExpanded(!isExpanded),
+      style: {
+        backgroundColor: color,
+        color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
+      },
+      children: color
+    }), /*#__PURE__*/_jsx("div", {
+      className: "newspack-color-picker__main",
+      ref: ref,
+      children: isExpanded && /*#__PURE__*/_jsx(ColorPickerComponent, {
+        color: color,
+        onChange: hex => onChange(hex),
+        enableAlpha: false
+      })
+    })]
+  });
+};
+export default ColorPicker;

package/dist/esm/color-picker/style.scss

@@ -0,0 +1,37 @@
+/**
+ * Color Picker
+ */
+
+.newspack-color-picker {
+	position: relative;
+
+	&__label {
+		margin-bottom: 8px;
+	}
+
+	&__expander {
+		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
+		border-radius: 2px;
+		height: 64px;
+		padding: 12px;
+		text-align: right;
+		text-transform: uppercase;
+
+		&:focus-visible {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			border-color: white;
+		}
+	}
+
+	&__main {
+		background: white;
+		box-shadow: 0 0 8px 4px rgba(black, 0.08);
+		margin: 12px 0;
+		position: absolute;
+		z-index: 2;
+
+		&:empty {
+			display: none;
+		}
+	}
+}

package/dist/esm/consts.js

@@ -0,0 +1 @@
+export const HANDOFF_KEY = 'newspack_wizard_handoff_message';