newspack-components 2.2.1 → 3.0.0-alpha.2

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

@@ -1,109 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-import { ButtonGroup, Button } from '@wordpress/components';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-export default function PositionControl(_ref) {
-  let {
-    allowedPositions,
-    value,
-    label,
-    help,
-    onChange,
-    size,
-    ...props
-  } = _ref;
-  /**
-   * Set layout options
-   */
-  const options = size === 'full-width' ? [{
-    value: 'top',
-    /* translators: Overlay Position */
-    label: __('Top', 'newspack')
-  }, {
-    value: 'center',
-    /* translators: Overlay Position */
-    label: __('Center', 'newspack')
-  }, {
-    value: 'bottom',
-    /* translators: Overlay Position */
-    label: __('Bottom', 'newspack')
-  }] : [{
-    value: 'top_left',
-    /* translators: Overlay Position */
-    label: __('Top Left', 'newspack')
-  }, {
-    value: 'top',
-    /* translators: Overlay Position */
-    label: __('Top Center', 'newspack')
-  }, {
-    value: 'top_right',
-    /* translators: Overlay Position */
-    label: __('Top Right', 'newspack')
-  }, {
-    value: 'center_left',
-    /* translators: Overlay Position */
-    label: __('Center Left', 'newspack')
-  }, {
-    value: 'center',
-    /* translators: Overlay Position */
-    label: __('Center', 'newspack')
-  }, {
-    value: 'center_right',
-    /* translators: Overlay Position */
-    label: __('Center Right', 'newspack')
-  }, {
-    value: 'bottom_left',
-    /* translators: Overlay Position */
-    label: __('Bottom Left', 'newspack')
-  }, {
-    value: 'bottom',
-    /* translators: Overlay Position */
-    label: __('Bottom Center', 'newspack')
-  }, {
-    value: 'bottom_right',
-    /* translators: Overlay Position */
-    label: __('Bottom Right', 'newspack')
-  }];
-  return _jsxs("div", {
-    className: classnames('newspack-position-placement-control', 'size-' + size),
-    children: [_jsx("p", {
-      className: "components-base-control__label",
-      children: label
-    }), _jsx(ButtonGroup, {
-      "aria-label": __('Select Position', 'newspack'),
-      ...props,
-      children: options.map((option, index) => {
-        return _jsx("div", {
-          className: option.value === value ? 'is-selected' : null,
-          children: _jsx(Button, {
-            isSmall: true,
-            title: option.label,
-            "aria-label": option.label,
-            isPrimary: option.value === value,
-            onClick: () => {
-              onChange(option.value);
-            },
-            disabled: allowedPositions?.length && !allowedPositions.includes(option.value)
-          })
-        }, `newspack-position-placement-item-${index}`);
-      })
-    }), _jsx("p", {
-      className: "components-base-control__help",
-      children: help
-    })]
-  });
-}

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

@@ -1,66 +0,0 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-position-placement-control {
-	margin-bottom: 1em;
-
-	.components-base-control__label {
-		margin-bottom: 8px;
-		margin-top: 1em;
-	}
-
-	.components-button-group {
-		display: grid;
-		grid-template-columns: repeat( 3, 1fr );
-		grid-template-rows: repeat( 3, 1fr );
-
-		div {
-			padding: 1px;
-		}
-
-		.components-button {
-			border-radius: 0 !important;
-			height: 100%;
-			padding: 20px;
-			width: 100%;
-		}
-
-		div:nth-of-type( 1 ) .components-button {
-			border-radius: 4px 0 0 !important;
-		}
-
-		div:nth-of-type( 3 ) .components-button {
-			border-radius: 0 4px 0 0 !important;
-		}
-
-		div:nth-last-of-type( 1 ) .components-button {
-			border-radius: 0 0 4px !important;
-		}
-
-		div:nth-last-of-type( 3 ) .components-button {
-			border-radius: 0 0 0 4px !important;
-		}
-	}
-
-	&.size-full-width .components-button-group {
-		grid-template-columns: 1fr;
-
-		div:first-of-type .components-button {
-			border-radius: 4px 4px 0 0 !important;
-		}
-
-		div:nth-of-type( 2 ) .components-button {
-			border-radius: 0 !important;
-		}
-
-		div:last-of-type .components-button {
-			border-radius: 0 0 4px 4px !important;
-		}
-	}
-
-	.components-base-control__help {
-		color: wp-colors.$gray-700;
-		font-size: 12px;
-		font-style: normal;
-		margin-top: 8px;
-	}
-}

package/dist/esm/progress-bar/index.js

@@ -1,69 +0,0 @@
-/**
- * Progress Bar
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies.
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class ProgressBar extends Component {
-  /**
-   * Get completion as a percentage.
-   *
-   * @param {number} completed The number of steps completed.
-   * @param {number} total     The total number of steps.
-   * @return {number} completion percentage
-   */
-  getCompletionPercentage(completed, total) {
-    if (!total) {
-      return 100;
-    }
-    return Math.max(Math.min(Math.round(completed / total * 100), 100), 0);
-  }
-
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      label,
-      completed,
-      total,
-      displayFraction
-    } = this.props;
-    const cleanTotal = Math.max(0, parseInt(total) || 0);
-    const cleanCompleted = Math.max(0, Math.min(parseInt(completed) || 0, parseInt(cleanTotal)));
-    const barStyle = {
-      width: this.getCompletionPercentage(cleanCompleted, cleanTotal) + '%'
-    };
-    return _jsxs("div", {
-      className: "newspack-progress-bar",
-      children: [(label || displayFraction) && _jsxs("div", {
-        className: "newspack-progress-bar__headings",
-        children: [label && _jsx("h2", {
-          children: label
-        }), displayFraction && _jsx("p", {
-          className: "is-dark",
-          children: _jsxs("strong", {
-            children: [cleanCompleted, "/", cleanTotal]
-          })
-        })]
-      }), _jsx("div", {
-        className: "newspack-progress-bar__container",
-        children: _jsx("div", {
-          className: "newspack-progress-bar__bar",
-          style: barStyle,
-          "data-testid": "progress-bar-indicator"
-        })
-      })]
-    });
-  }
-}
-export default ProgressBar;

package/dist/esm/progress-bar/index.test.js

@@ -1,110 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ProgressBar from './';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createElement as _createElement } from "@emotion/react";
-describe('ProgressBar', () => {
-  it('should render a progress indicator', () => {
-    const {
-      getByTestId
-    } = render(_jsx(ProgressBar, {
-      completed: "1",
-      total: "2"
-    }));
-    const indicator = getByTestId('progress-bar-indicator');
-    expect(indicator).toHaveAttribute('style', 'width: 50%;');
-  });
-  it('should render a label', () => {
-    const label = 'test label';
-    const {
-      getByText
-    } = render(_jsx(ProgressBar, {
-      completed: "1",
-      total: "2",
-      label: label
-    }));
-    expect(getByText(label)).toBeInTheDocument();
-  });
-  it('should render progress as a fraction', () => {
-    const {
-      getByText
-    } = render(_jsx(ProgressBar, {
-      completed: "1",
-      total: "2",
-      displayFraction: true
-    }));
-    expect(getByText('1/2')).toBeInTheDocument();
-  });
-  it('should render with both label and fraction', () => {
-    const label = 'test label';
-    const {
-      getByText
-    } = render(_jsx(ProgressBar, {
-      completed: "1",
-      total: "2",
-      label: label,
-      displayFraction: true
-    }));
-    expect(getByText(label)).toBeInTheDocument();
-    expect(getByText('1/2')).toBeInTheDocument();
-  });
-  describe('should calculate progress correctly', () => {
-    [{
-      props: {
-        completed: 1,
-        total: 2
-      },
-      expectedWidth: 50
-    }, {
-      props: {
-        completed: 2,
-        total: 3
-      },
-      expectedWidth: 67
-    }, {
-      props: {
-        completed: 6,
-        total: 3
-      },
-      expectedWidth: 100
-    }].forEach(_ref => {
-      let {
-        props,
-        expectedWidth
-      } = _ref;
-      it(`with expected  progress of ${expectedWidth}`, () => {
-        const {
-          getByTestId
-        } = render(_createElement(ProgressBar, {
-          ...props,
-          key: expectedWidth
-        }));
-        expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', `width: ${expectedWidth}%;`);
-      });
-    });
-  });
-  it('should handle non-numeric values in ProgressBar element', () => {
-    const {
-      getByText,
-      getByTestId
-    } = render(_jsx(ProgressBar, {
-      completed: "cats",
-      total: "dogs",
-      displayFraction: true
-    }));
-    expect(getByText('0/0')).toBeInTheDocument();
-    expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', 'width: 100%;');
-  });
-  it('should handle non-logical values in ProgressBar element', () => {
-    const {
-      getByText,
-      getByTestId
-    } = render(_jsx(ProgressBar, {
-      completed: "3",
-      total: "-1",
-      displayFraction: true
-    }));
-    expect(getByText('0/0')).toBeInTheDocument();
-    expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', 'width: 100%;');
-  });
-});

package/dist/esm/progress-bar/style.scss

@@ -1,42 +0,0 @@
-/**
- * Progress Bar
- */
-
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-progress-bar {
-	margin: 32px 0;
-
-	& &__headings {
-		align-items: center;
-		display: flex;
-		justify-content: space-between;
-		margin-bottom: 8px;
-
-		h2,
-		p {
-			margin-bottom: 0;
-			margin-top: 0;
-		}
-
-		p {
-			margin-left: auto;
-		}
-	}
-
-	&__container {
-		background-color: wp-colors.$gray-100;
-		border-radius: 4px;
-		height: 8px;
-		overflow: hidden;
-		position: relative;
-		z-index: 1;
-	}
-
-	&__bar {
-		background-color: colors.$primary-500;
-		height: 8px;
-		transition: width 125ms ease-in-out;
-	}
-}

package/dist/esm/proxied-imports/router.js

@@ -1,8 +0,0 @@
-/**
- * A proxy for react-router-dom.
- * Ensures that both components and the plugin use the same instance of
- * React Router, even if there are node_modules in components.
- */
-
-import * as ReactRouterDOM from 'react-router-dom';
-export default ReactRouterDOM;

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

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

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

@@ -1,92 +0,0 @@
-/**
- * Radio Control
- */
-
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-radio-control {
-	color: wp-colors.$gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
-	label {
-		color: inherit;
-		font-size: 14px;
-		line-height: 24px;
-		margin: 0;
-	}
-
-	.components-base-control__label {
-		color: wp-colors.$gray-900;
-		font-weight: bold;
-	}
-
-	// Options
-
-	.components-radio-control__option {
-		align-items: center;
-		display: flex;
-		margin: 0 0 8px;
-
-		&:first-of-type {
-			margin-top: 8px;
-		}
-
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
-
-	// Radio
-
-	input[type='radio'] {
-		height: 24px;
-		margin-right: 8px;
-		width: 24px;
-
-		@media screen and ( min-width: 782px ) {
-			height: 20px;
-			width: 20px;
-		}
-
-		&:checked {
-			background-color: colors.$primary-500;
-			border-color: colors.$primary-500;
-
-			&::before {
-				border: none;
-			}
-		}
-
-		&:focus {
-			border-color: colors.$primary-500;
-			box-shadow: 0 0 0 2px white, 0 0 0 3.5px colors.$primary-500;
-		}
-	}
-
-	// Multiple Radio Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-select-control,
-	+ .newspack-text-control {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-
-	// Reset
-
-	.components-base-control__field,
-	.components-base-control__label,
-	.components-base-control__help {
-		display: block;
-		margin: 0;
-	}
-}

package/dist/esm/section-header/index.js

@@ -1,68 +0,0 @@
-/**
- * Section Header
- */
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Grid } 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";
-const SectionHeader = _ref => {
-  let {
-    centered = false,
-    className = null,
-    description,
-    heading = 2,
-    isWhite = false,
-    noMargin = false,
-    title,
-    id = null
-  } = _ref;
-  // If id is in the URL as a scrollTo param, scroll to it on render.
-  const ref = useRef();
-  useEffect(() => {
-    const params = new Proxy(new URLSearchParams(window.location.search), {
-      get: (searchParams, prop) => searchParams.get(prop)
-    });
-    const scrollToId = params.scrollTo;
-    if (scrollToId && scrollToId === id) {
-      // Let parent scroll action run before running this.
-      window.setTimeout(() => ref.current.scrollIntoView({
-        behavior: 'smooth'
-      }), 250);
-    }
-  }, []);
-  const classes = classnames('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', className);
-  const HeadingTag = `h${heading}`;
-  return _jsx("div", {
-    id: id,
-    ref: ref,
-    children: _jsxs(Grid, {
-      columns: 1,
-      gutter: 8,
-      className: classes,
-      children: [typeof title === 'string' && _jsx(HeadingTag, {
-        children: title
-      }), typeof title === 'function' && _jsx(HeadingTag, {
-        children: title()
-      }), typeof description === 'string' && _jsx("p", {
-        children: description
-      }), typeof description === 'function' && _jsx("p", {
-        children: description()
-      })]
-    })
-  });
-};
-export default SectionHeader;

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

@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Icon } from '@wordpress/icons';
-import { BaseControl, Button, ButtonGroup } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { hooks } from '..';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const ButtonGroupControl = _ref => {
-  let {
-    buttonOptions,
-    buttonSmall,
-    className,
-    hideLabelFromVision,
-    label,
-    onChange,
-    value
-  } = _ref;
-  const id = hooks.useUniqueId('button-group');
-  return _jsx(BaseControl, {
-    label: label,
-    hideLabelFromVision: hideLabelFromVision,
-    id: id.current,
-    className: classnames(className, 'components-select-control'),
-    children: _jsx(ButtonGroup, {
-      children: buttonOptions.map(option => {
-        const isSelected = value === option.value;
-        let Label = () => option.label;
-        if (option.icon) {
-          // eslint-disable-next-line react/display-name
-          Label = () => _jsx(Icon, {
-            icon: option.icon
-          });
-        }
-        return _jsx(Button, {
-          variant: isSelected ? 'primary' : null,
-          isPressed: isSelected,
-          onClick: () => onChange(option.value),
-          isSmall: buttonSmall,
-          children: _jsx(Label, {})
-        }, option.value);
-      })
-    })
-  });
-};
-export default ButtonGroupControl;