newspack-components 2.2.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,185 +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 } from "@emotion/react/jsx-runtime";
-import { 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, _ref => {
-        let {
-          id
-        } = _ref;
-        return 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/color-picker/index.js

@@ -1,61 +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 } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-extend([a11yPlugin]);
-const {
-  InteractiveDiv
-} = utils;
-const ColorPicker = _ref => {
-  let {
-    label,
-    color = '#fff',
-    onChange,
-    className
-  } = _ref;
-  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,3 +0,0 @@
-export const NEWSPACK_SITE_URL = 'https://newspack.com';
-export const NEWSPACK_SUPPORT_URL = `${NEWSPACK_SITE_URL}/support`;
-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/custom-select-control/style.scss

@@ -1,92 +0,0 @@
-/**
- * Custom Select Control
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-custom-select-control {
-	label {
-		display: block;
-		margin-bottom: 8px;
-	}
-
-	.components-custom-select-control__button {
-		border-color: wp-colors.$gray-700;
-		border-radius: 2px;
-		color: wp-colors.$gray-900;
-		font-size: inherit;
-		min-height: 30px;
-		min-width: 100%;
-		padding-right: 24px;
-
-		&:active,
-		&:focus,
-		&:hover,
-		&[aria-expanded='true'] {
-			color: wp-colors.$gray-900;
-		}
-
-		&:focus {
-			border-color: var( --wp-admin-theme-color );
-			box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color );
-		}
-
-		&-icon {
-			right: 3px;
-			width: 18px;
-		}
-
-		&[aria-expanded='true'] svg {
-			transform: rotate( 180deg );
-		}
-	}
-
-	.components-custom-select-control__menu {
-		border-color: wp-colors.$gray-700;
-		border-radius: 2px;
-		box-shadow: 0 4px 8px rgba( black, 0.08 );
-		margin: 8px 0 0;
-		min-width: 222px;
-	}
-
-	.components-custom-select-control__item {
-		box-sizing: border-box;
-		cursor: pointer;
-		display: flex;
-		line-height: inherit;
-		margin: 0 0 0 28px;
-		padding: 6px 8px;
-		transition: color 125ms ease-in-out;
-
-		&:empty {
-			display: none;
-		}
-
-		&.is-header {
-			background: wp-colors.$gray-100;
-			cursor: default;
-			font-weight: bold;
-			margin-left: 0;
-			pointer-events: none;
-		}
-
-		&.is-highlighted {
-			background: white;
-			color: var( --wp-admin-theme-color );
-		}
-
-		&.is-selected {
-			margin-left: 0;
-
-			&::before {
-				background: url( 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==' )
-					0 0 no-repeat;
-				content: '';
-				display: block;
-				height: 24px;
-				margin: 0 4px 0 0;
-				width: 24px;
-			}
-		}
-	}
-}

package/dist/esm/date-range-picker/index.js

@@ -1,32 +0,0 @@
-/**
- * External dependencies.
- */
-import { default as ReactDateRangePicker } from 'react-daterange-picker';
-import origMoment from 'moment';
-import { extendMoment } from 'moment-range';
-import 'react-daterange-picker/dist/css/react-calendar.css';
-
-/**
- * Internal dependencies.
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const moment = extendMoment(origMoment);
-const DateRangePicker = _ref => {
-  let {
-    start,
-    end,
-    onChange
-  } = _ref;
-  return _jsx(ReactDateRangePicker, {
-    value: moment.range(moment(start), moment(end)),
-    firstOfWeek: 1,
-    onSelect: range => {
-      onChange({
-        start: range.start._d,
-        end: range.end._d
-      });
-    }
-  });
-};
-export default DateRangePicker;