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

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

@@ -1,174 +0,0 @@
-/**
- * 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

@@ -1,43 +0,0 @@
-/**
- * Card
- */
-
-/**
- * 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";
-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 _jsx("div", {
-      className: classes,
-      ...otherProps
-    });
-  }
-}
-export default Card;

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

@@ -1,181 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * 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 "@emotion/react/jsx-runtime";
-class CategoryAutocomplete extends Component {
-  /**
-   * Class constructor.
-   */
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "state", {
-      suggestions: {},
-      allCategories: {},
-      isLoading: false
-    });
-    /**
-     * Prepare categories data for the API endpoint, call the change handler.
-     *
-     * @param {Array} tokens An array of category tokens.
-     */
-    _defineProperty(this, "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);
-    });
-    _defineProperty(this, "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);
-    });
-    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
-    }));
-  }
-  /**
-   * 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 _jsxs("div", {
-      className: classes,
-      children: [_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 ? _jsx("span", {
-        className: "newspack-category-autocomplete__suggestions-spinner",
-        children: _jsx(Spinner, {})
-      }) : null]
-    });
-  }
-}
-CategoryAutocomplete.defaultProps = {
-  taxonomy: 'categories'
-};
-export default CategoryAutocomplete;

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

@@ -1,34 +0,0 @@
-/**
- * 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

@@ -1,59 +0,0 @@
-/**
- * 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 "@emotion/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 _jsxs("div", {
-    className: classnames('newspack-color-picker', className),
-    children: [_jsx("div", {
-      className: "newspack-color-picker__label",
-      children: label
-    }), _jsx(InteractiveDiv, {
-      className: 'newspack-color-picker__expander',
-      onClick: () => setIsExpanded(!isExpanded),
-      style: {
-        backgroundColor: color,
-        color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
-      },
-      children: color
-    }), _jsx("div", {
-      className: "newspack-color-picker__main",
-      ref: ref,
-      children: isExpanded && _jsx(ColorPickerComponent, {
-        color: color,
-        onChange: hex => onChange(hex),
-        enableAlpha: false
-      })
-    })]
-  });
-};
-export default ColorPicker;

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

@@ -1,37 +0,0 @@
-/**
- * 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

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

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

@@ -1,37 +0,0 @@
-/**
- * Custom Select Control
- */
-
-/**
- * WordPress dependencies
- */
-import { CustomSelectControl as BaseComponent } from '@wordpress/components';
-import { Component } from '@wordpress/element';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-class CustomSelectControl extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-custom-select-control', className);
-    return _jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
-  }
-}
-export default CustomSelectControl;

package/dist/esm/footer/index.js

@@ -1,100 +0,0 @@
-/**
- * Footer
- */
-
-/**
- * WordPress dependencies.
- */
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-import { ExternalLink } from '@wordpress/components';
-
-/**
- * Internal dependencies.
- */
-import { PatronsLogo } from '../';
-import './style.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const Footer = ({
-  simple
-}) => {
-  const {
-    components_demo: componentsDemo = false,
-    support = false,
-    setup_wizard: setupWizard = false,
-    reset_url: resetUrl = false,
-    plugin_version: pluginVersion = {
-      label: 'Newspack'
-    },
-    remove_starter_content: removeStarterContent = false,
-    support_email: supportEmail
-  } = window.newspack_urls || {};
-  const footerElements = [{
-    label: pluginVersion.label,
-    url: 'https://newspack.com/category/release-notes/',
-    external: true
-  }, {
-    label: __('About', 'newspack-plugin'),
-    url: 'https://newspack.com/',
-    external: true
-  }, {
-    label: __('Documentation', 'newspack-plugin'),
-    url: support,
-    external: true
-  }];
-  if (componentsDemo) {
-    footerElements.push({
-      label: __('Components Demo', 'newspack-plugin'),
-      url: componentsDemo
-    });
-  }
-  if (setupWizard) {
-    footerElements.push({
-      label: __('Setup Wizard', 'newspack-plugin'),
-      url: setupWizard
-    });
-  }
-  if (resetUrl) {
-    footerElements.push({
-      label: __('Reset Newspack', 'newspack-plugin'),
-      url: resetUrl
-    });
-  }
-  if (removeStarterContent) {
-    footerElements.push({
-      label: __('Remove Starter Content', 'newspack-plugin'),
-      url: removeStarterContent
-    });
-  }
-  if (supportEmail) {
-    footerElements.push({
-      label: __('Contact Support', 'newspack-plugin'),
-      url: `mailto:${supportEmail}`
-    });
-  }
-  return _jsxs("div", {
-    className: "newspack-footer",
-    children: [!simple && _jsx("div", {
-      className: "newspack-footer__inner",
-      children: _jsx("ul", {
-        children: footerElements.map(({
-          url,
-          label,
-          external
-        }, index) => _jsx("li", {
-          children: external ? _jsx(ExternalLink, {
-            href: url,
-            children: label
-          }) : _jsx("a", {
-            href: url,
-            children: label
-          })
-        }, index))
-      })
-    }), _jsx("div", {
-      className: "newspack-footer__logo",
-      children: _jsx(PatronsLogo, {})
-    })]
-  });
-};
-export default Footer;