newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/esm/select-control/GroupedSelectControl.js

@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { BaseControl } from '@wordpress/components';
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-import { Icon, chevronDown } from '@wordpress/icons';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import find from 'lodash/find';
-import some from 'lodash/some';
-
-/**
- * Internal dependencies
- */
-import { hooks } from '..';
-
-/**
- * SelectControl with optgroup support
- */
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-export default function GroupedSelectControl(_ref) {
-  let {
-    help,
-    label,
-    onChange,
-    optgroups = [],
-    className,
-    hideLabelFromVision,
-    ...props
-  } = _ref;
-  const onChangeValue = event => {
-    const {
-      value
-    } = event.target;
-    const optgroup = find(optgroups, group => some(group.options, ['value', value]));
-    onChange(value, optgroup);
-  };
-  const id = hooks.useUniqueId('group-select');
-  return _jsx(BaseControl, {
-    label: label,
-    hideLabelFromVision: hideLabelFromVision,
-    id: id,
-    help: help,
-    className: classnames(className, 'components-select-control'),
-    children: _jsxs("div", {
-      className: "relative",
-      children: [_jsxs("select", {
-        id: id,
-        className: "components-select-control__input",
-        onChange: onChangeValue,
-        "aria-describedby": !!help ? `${id}__help` : undefined,
-        ...props,
-        children: [_jsx("option", {
-          value: "",
-          children: __('-- Select --', 'newspack')
-        }), optgroups.map((_ref2, optgroupIndex) => {
-          let {
-            label: optgroupLabel,
-            options
-          } = _ref2;
-          return _jsx("optgroup", {
-            label: optgroupLabel,
-            children: options.map((option, optionIndex) => _jsx("option", {
-              value: option.value,
-              disabled: option.disabled,
-              children: option.label
-            }, `${option.label}-${option.value}-${optionIndex}`))
-          }, optgroupIndex);
-        })]
-      }), _jsx("div", {
-        className: "components-select-control__arrow-wrapper",
-        children: _jsx(Icon, {
-          icon: chevronDown,
-          size: 18
-        })
-      })]
-    })
-  });
-}

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

@@ -1,51 +0,0 @@
-/**
- * Select Control
- */
-
-/**
- * WordPress dependencies
- */
-import { SelectControl as BaseComponent } from '@wordpress/components';
-import { Component } from '@wordpress/element';
-
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-import GroupedSelectControl from './GroupedSelectControl';
-import ButtonGroupControl from './ButtonGroupControl';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-class SelectControl extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      optgroups,
-      buttonOptions,
-      buttonSmall,
-      ...otherProps
-    } = this.props;
-    const classes = classNames('newspack-select-control', optgroups && 'newspack-grouped-select-control', buttonOptions && 'newspack-buttons-select-control', className);
-    return _jsx("div", {
-      className: classes,
-      children: optgroups ? _jsx(GroupedSelectControl, {
-        optgroups: optgroups,
-        ...otherProps
-      }) : buttonOptions ? _jsx(ButtonGroupControl, {
-        buttonOptions: buttonOptions,
-        buttonSmall: buttonSmall,
-        ...otherProps
-      }) : _jsx(BaseComponent, {
-        ...otherProps
-      })
-    });
-  }
-}
-export default SelectControl;

package/dist/esm/select-control/style.scss

@@ -1,108 +0,0 @@
-/**
- * Select Control
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.components-select-control {
-	&__input {
-		max-width: 100% !important;
-
-		&[multiple] {
-			height: auto !important;
-			min-height: 70px !important;
-			padding: 0 !important;
-
-			+ .components-input-control__suffix {
-				display: none;
-			}
-
-			option {
-				min-height: 1.4em;
-				padding: 8px;
-
-				&:checked {
-					background: var( --wp-admin-theme-color );
-					color: white;
-				}
-			}
-		}
-	}
-
-	.components-base-control__field {
-		width: 100%;
-	}
-
-	.components-input-control__label {
-		line-height: inherit;
-	}
-}
-
-// Grouped
-
-.newspack-grouped-select-control {
-	position: relative;
-
-	.components-select-control {
-		&__input {
-			appearance: none;
-			background: transparent;
-			border: 1px solid wp-colors.$gray-700;
-			border-radius: 2px;
-			box-shadow: none !important;
-			box-sizing: border-box;
-			display: block;
-			font-size: inherit;
-			margin: 0;
-			max-width: 100%;
-			outline: none;
-			padding: 0 24px 0 7px;
-			width: 100%;
-
-			&:hover {
-				color: inherit;
-			}
-
-			&:focus {
-				border-color: var( --wp-admin-theme-color-darker-10 ) !important;
-				box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color-darker-10 ) !important;
-				color: inherit;
-			}
-		}
-
-		&__arrow-wrapper {
-			align-items: center;
-			display: flex;
-			height: 24px;
-			justify-content: center;
-			margin-top: -12px;
-			position: absolute;
-			right: 1px;
-			top: 50%;
-			width: 24px;
-		}
-	}
-}
-
-// Buttons
-
-.newspack-buttons-select-control {
-	.components-base-control__label {
-		display: inline-flex;
-		margin-bottom: 8px;
-	}
-
-	.components-button-group {
-		display: flex;
-	}
-
-	&.icon-only {
-		.components-button {
-			align-items: center;
-			height: 36px;
-			justify-content: center;
-			padding: 0 !important;
-			width: 36px;
-		}
-	}
-}

package/dist/esm/settings/MinMaxSetting.js

@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies.
- */
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-import { CheckboxControl } from '@wordpress/components';
-
-/**
- * Internal dependencies.
- */
-import { TextControl } from '../';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-const MinMaxSetting = _ref => {
-  let {
-    min,
-    max,
-    onChangeMin,
-    onChangeMax,
-    minPlaceholder,
-    maxPlaceholder
-  } = _ref;
-  return _jsxs(_Fragment, {
-    children: [_jsxs("div", {
-      className: "newspack-settings__min-max",
-      children: [_jsx(CheckboxControl, {
-        checked: min > 0,
-        onChange: value => onChangeMin(value ? 1 : 0),
-        label: __('Min', 'newspack')
-      }), _jsx(TextControl, {
-        "data-testid": "min-articles-input",
-        type: "number",
-        value: min,
-        placeholder: minPlaceholder,
-        onChange: value => onChangeMin(value > 0 ? value : 0)
-      })]
-    }), _jsxs("div", {
-      className: "newspack-settings__min-max",
-      children: [_jsx(CheckboxControl, {
-        checked: max > 0,
-        onChange: value => onChangeMax(value ? min || 1 : 0),
-        label: __('Max', 'newspack')
-      }), _jsx(TextControl, {
-        type: "number",
-        value: max,
-        placeholder: maxPlaceholder,
-        onChange: value => onChangeMax(value > 0 ? value : 0)
-      })]
-    })]
-  });
-};
-export default MinMaxSetting;

package/dist/esm/settings/SettingsCard.js

@@ -1,39 +0,0 @@
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies.
- */
-import { Grid, ActionCard } from '../';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const SettingsCard = _ref => {
-  let {
-    children,
-    className,
-    columns,
-    gutter,
-    noBorder,
-    rowGap,
-    ...props
-  } = _ref;
-  const classes = classnames('newspack-settings__card', noBorder && 'newspack-settings__no-border', className);
-  return _jsx(ActionCard, {
-    ...props,
-    className: classes,
-    notificationLevel: "info",
-    noBorder: noBorder,
-    children: _jsx(Grid, {
-      columns: columns,
-      gutter: gutter,
-      rowGap: rowGap,
-      children: children
-    })
-  });
-};
-SettingsCard.defaultProps = {
-  columns: 3,
-  gutter: 32
-};
-export default SettingsCard;

package/dist/esm/settings/SettingsSection.js

@@ -1,30 +0,0 @@
-/**
- * Internal dependencies.
- */
-import { Grid, InfoButton } from '../';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const SettingSection = _ref => {
-  let {
-    title,
-    description,
-    children
-  } = _ref;
-  return _jsxs(Grid, {
-    columns: 1,
-    gutter: 8,
-    className: "newspack-settings__section",
-    children: [_jsxs("div", {
-      className: "newspack-settings__section__title",
-      children: [_jsx("span", {
-        children: title
-      }), description && _jsx(InfoButton, {
-        text: description
-      })]
-    }), _jsx("div", {
-      className: "newspack-settings__section__content",
-      children: children
-    })]
-  });
-};
-export default SettingSection;

package/dist/esm/settings/index.js

@@ -1,9 +0,0 @@
-import SettingsCard from './SettingsCard';
-import SettingsSection from './SettingsSection';
-import MinMaxSetting from './MinMaxSetting';
-import './style.scss';
-export default {
-  SettingsCard,
-  SettingsSection,
-  MinMaxSetting
-};

package/dist/esm/settings/style.scss

@@ -1,106 +0,0 @@
-.newspack-settings {
-	&__card {
-		&.newspack-card.newspack-action-card {
-			.newspack-action-card__region-top {
-				padding: 32px 32px 16px;
-			}
-
-			.newspack-action-card__region-children {
-				padding: 0 32px 32px;
-
-				> .newspack-grid {
-					margin: 0;
-				}
-			}
-
-			.newspack-action-card__notification {
-				padding-bottom: 16px;
-			}
-		}
-
-		.newspack-form-token-field {
-			margin: 0;
-
-			.components-form-token-field {
-				width: 100%;
-			}
-		}
-
-		.newspack-settings__section {
-			&__title {
-				align-items: center;
-				display: flex;
-				margin: 0;
-
-				span {
-					line-height: 24px;
-				}
-			}
-			&__content {
-				> div {
-					margin: 0;
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					flex-wrap: wrap;
-					> *:not( [class*='help'], [class*='label'] ) {
-						margin: 0;
-					}
-				}
-				.newspack-text-control,
-				.newspack-checkbox-control {
-					margin: 0 !important;
-				}
-				.newspack-select-control {
-					.components-base-control {
-						width: 100%;
-					}
-				}
-			}
-		}
-		.newspack-settings__min-max {
-			gap: 8px;
-
-			.newspack-checkbox-control {
-				flex: 0 0 auto;
-			}
-
-			.newspack-text-control {
-				flex: 1 1 auto;
-
-				.components-text-control__input {
-					text-align: right;
-				}
-			}
-
-			+ .newspack-settings__min-max {
-				margin-top: 16px !important;
-			}
-		}
-	}
-
-	&__no-border {
-		&.newspack-card.newspack-action-card {
-			border: 0;
-
-			.newspack-action-card__region-top,
-			.newspack-action-card__region-children {
-				padding-left: 0;
-				padding-right: 0;
-				padding-top: 0;
-			}
-
-			.newspack-action-card__region-children {
-				padding-bottom: 0;
-			}
-
-			.newspack-action-card__notification {
-				padding-bottom: 16px;
-			}
-
-			& + & {
-				margin-top: 64px;
-			}
-		}
-	}
-}

package/dist/esm/steps-list/index.js

@@ -1,43 +0,0 @@
-/**
- * Steps List
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies.
- */
-import { StepsListItem } from '../';
-import './style.scss';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-class StepsList extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      stepsListItems,
-      narrowList,
-      style = {}
-    } = this.props;
-    const classes = classnames('steps-list', className, narrowList && 'steps-list__narrow-list');
-    return _jsx("div", {
-      className: classes,
-      style: style,
-      children: stepsListItems.map((listItem, index) => _jsx(StepsListItem, {
-        listItemCount: index + 1,
-        listItemText: listItem
-      }, index))
-    });
-  }
-}
-export default StepsList;

package/dist/esm/steps-list-item/index.js

@@ -1,48 +0,0 @@
-/**
- * Steps List Item
- */
-
-/**
- * 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";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class StepsListItem extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      listItemCount,
-      listItemText,
-      style = {}
-    } = this.props;
-    const classes = classnames('steps-list-item', className);
-    return _jsxs("div", {
-      className: classes,
-      style: style,
-      children: [_jsx("div", {
-        className: "steps-list-item__number",
-        children: listItemCount
-      }), _jsx("div", {
-        className: "steps-list-item__content",
-        dangerouslySetInnerHTML: {
-          __html: listItemText
-        }
-      })]
-    });
-  }
-}
-export default StepsListItem;

package/dist/esm/steps-list-item/style.scss

@@ -1,47 +0,0 @@
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.steps-list-item {
-	align-items: center;
-	display: grid;
-	grid-template-columns: 28px auto;
-	gap: 24px;
-	position: relative;
-
-	&::before {
-		border: 1px solid #F0F0F0;
-		bottom: -16px;
-		content: '';
-		display: block;
-		left: 14px;
-		position: absolute;
-		top: -16px;
-	}
-
-	&:first-child::before {
-		top: 50%;
-	}
-
-	&:last-child::before {
-		bottom: 50%;
-	}
-
-	+ .steps-list-item {
-		margin-top: 32px;
-	}
-
-	&__number {
-		align-items: center;
-		background: #fff;
-		border: 1px solid currentcolor;
-		border-radius: 100%;
-		color: colors.$primary-500;
-		display: flex;
-		height: 28px;
-		justify-content: center;
-		outline: 8px solid #fff;
-		position: relative;
-		width: 28px;
-		z-index: 2;
-	}
-}

package/dist/esm/style-card/index.js

@@ -1,76 +0,0 @@
-/**
- * Style Card
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-import { Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { WebPreview } from '../';
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class StyleCard extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      ariaLabel,
-      className,
-      cardTitle,
-      url,
-      image,
-      imageType,
-      isActive,
-      onClick,
-      id
-    } = this.props;
-    const classes = classnames('newspack-style-card', isActive && 'newspack-style-card__is-active', className);
-    return _jsxs("div", {
-      className: classes,
-      id: id,
-      children: [_jsxs("div", {
-        className: "newspack-style-card__image",
-        children: [imageType === 'html' ? _jsx("div", {
-          dangerouslySetInnerHTML: image
-        }) : _jsx("img", {
-          src: image,
-          alt: cardTitle + ' ' + __('Thumbnail', 'newspack')
-        }), _jsxs("div", {
-          className: "newspack-style-card__actions",
-          children: [isActive ? _jsx("span", {
-            className: "newspack-style-card__actions__badge",
-            children: __('Selected', 'newspack')
-          }) : _jsx(Button, {
-            variant: "link",
-            onClick: onClick,
-            "aria-label": ariaLabel ? ariaLabel : __('Select', 'newspack') + ' ' + cardTitle,
-            tabIndex: "0",
-            children: __('Select', 'newspack')
-          }), url && _jsx(WebPreview, {
-            url: url,
-            label: __('View Demo', 'newspack'),
-            variant: "link"
-          })]
-        })]
-      }), cardTitle && _jsx("div", {
-        className: "newspack-style-card__title",
-        children: cardTitle
-      })]
-    });
-  }
-}
-export default StyleCard;