newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/esm/date-range-picker/style.scss

@@ -1,148 +0,0 @@
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.DateRangePicker {
-	margin: 32px 0;
-	max-width: 296px;
-	width: 100%;
-
-	&__PaginationArrow {
-		background: transparent 50% 50% no-repeat;
-		background-size: 24px 24px;
-		border-radius: 3px;
-		height: 36px;
-		transition: background-image 125ms ease-in-out;
-		width: 36px;
-
-		&--previous {
-			background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%231e1e1e"/%3E%3C/svg%3E' );
-			left: 0;
-
-			&:hover {
-				background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%2336f"/%3E%3C/svg%3E' );
-			}
-		}
-
-		&--next {
-			background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%231e1e1e"/%3E%3C/svg%3E' );
-			right: 0;
-
-			&:hover {
-				background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%2336f"/%3E%3C/svg%3E' );
-			}
-		}
-
-		&:hover {
-			background-color: transparent;
-		}
-	}
-
-	&__PaginationArrowIcon {
-		display: none;
-	}
-
-	&__Month {
-		margin: 0;
-		width: inherit;
-	}
-
-	&__MonthHeader {
-		color: wp-colors.$gray-900;
-		font-size: 17px;
-		height: auto;
-		line-height: 24px;
-		padding: 6px 44px;
-	}
-
-	&__WeekdayHeading,
-	&__Date {
-		font-size: 14px;
-		line-height: 24px;
-		padding: 6px 0;
-	}
-
-	&__WeekdayHeading {
-		border-bottom-color: wp-colors.$gray-300;
-		color: wp-colors.$gray-900;
-
-		abbr[title] {
-			color: inherit;
-		}
-	}
-
-	&__MonthDates {
-		border: 0;
-		border-spacing: 0;
-	}
-
-	&__Date {
-		border-color: wp-colors.$gray-300;
-		border-bottom-width: 1px;
-
-		&--weekend {
-			background-color: wp-colors.$gray-100;
-		}
-
-		&--otherMonth {
-			color: wp-colors.$gray-200;
-			opacity: 1;
-		}
-
-		&--is-disabled {
-			color: wp-colors.$gray-100;
-			cursor: not-allowed;
-		}
-
-		&--is-highlighted {
-			color: white;
-		}
-	}
-
-	&__CalendarSelection,
-	&__CalendarHighlight {
-		border-color: colors.$primary-500;
-		bottom: 4px;
-		top: 4px;
-
-		&--inOtherMonth {
-			opacity: 1;
-		}
-
-		&--start {
-			border-bottom-left-radius: 3px;
-			border-top-left-radius: 3px;
-			left: 4px;
-		}
-
-		&--end {
-			border-bottom-right-radius: 3px;
-			border-top-right-radius: 3px;
-			right: 4px;
-		}
-
-		&--single {
-			border: none;
-			border-radius: 3px;
-			left: 4px;
-			right: 4px;
-		}
-	}
-
-	&__CalendarSelection {
-		background-color: colors.$primary-500;
-	}
-
-	&__CalendarHighlight {
-		background: colors.$primary-500;
-		border: none;
-		bottom: 0;
-		top: 0;
-
-		&--single {
-			border: none;
-			border-radius: 0;
-			left: 0;
-			right: 0;
-		}
-	}
-}

package/dist/esm/footer/index.js

@@ -1,105 +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 } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const Footer = _ref => {
-  let {
-    simple
-  } = _ref;
-  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'),
-    url: 'https://newspack.com/',
-    external: true
-  }, {
-    label: __('Documentation', 'newspack'),
-    url: support,
-    external: true
-  }];
-  if (componentsDemo) {
-    footerElements.push({
-      label: __('Components Demo', 'newspack'),
-      url: componentsDemo
-    });
-  }
-  if (setupWizard) {
-    footerElements.push({
-      label: __('Setup Wizard', 'newspack'),
-      url: setupWizard
-    });
-  }
-  if (resetUrl) {
-    footerElements.push({
-      label: __('Reset Newspack', 'newspack'),
-      url: resetUrl
-    });
-  }
-  if (removeStarterContent) {
-    footerElements.push({
-      label: __('Remove Starter Content', 'newspack'),
-      url: removeStarterContent
-    });
-  }
-  if (supportEmail) {
-    footerElements.push({
-      label: __('Contact Support', 'newspack'),
-      url: `mailto:${supportEmail}`
-    });
-  }
-  return _jsxs("div", {
-    className: "newspack-footer",
-    children: [!simple && _jsx("div", {
-      className: "newspack-footer__inner",
-      children: _jsx("ul", {
-        children: footerElements.map((_ref2, index) => {
-          let {
-            url,
-            label,
-            external
-          } = _ref2;
-          return _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;

package/dist/esm/footer/style.scss

@@ -1,82 +0,0 @@
-/**
- * Footer
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-footer {
-	align-items: stretch;
-	background: white;
-	border: 0 solid wp-colors.$gray-300;
-	border-width: 1px 0;
-	bottom: 0;
-	color: wp-colors.$gray-700;
-	display: flex;
-	flex-wrap: wrap;
-	font-size: 12px;
-	justify-content: space-between;
-	left: 0;
-	line-height: 16px;
-	position: absolute;
-	right: 0;
-
-	@media screen and ( min-width: 783px ) {
-		bottom: 40px;
-		flex-wrap: nowrap;
-	}
-
-	&__inner {
-		align-items: center;
-		display: flex;
-		flex: 0 0 100%;
-
-		@media screen and ( min-width: 783px ) {
-			flex: 1 1 auto;
-		}
-	}
-
-	ul {
-		display: flex;
-		flex-wrap: wrap;
-		margin: 0;
-		padding: 7px 8px;
-	}
-
-	li {
-		margin: 8px;
-
-		a {
-			align-items: flex-end;
-			color: inherit;
-			display: flex;
-
-			&:active,
-			&:focus,
-			&:hover {
-				color: wp-colors.$gray-900;
-			}
-		}
-	}
-
-	&__logo {
-		align-items: center;
-		background: wp-colors.$gray-900;
-		display: flex;
-		margin: 0 0 -1px;
-		padding: 16px;
-		width: 100%;
-
-		@media screen and ( min-width: 783px ) {
-			margin: -1px 0 -1px 8px;
-			max-width: 33.33%;
-			width: auto;
-		}
-
-		.patrons-logo {
-			display: block;
-			fill: white;
-			max-height: 16px;
-			width: auto;
-		}
-	}
-}

package/dist/esm/form-token-field/index.js

@@ -1,50 +0,0 @@
-/**
- * Form Token Field
- */
-
-/**
- * WordPress dependencies.
- */
-import { FormTokenField as BaseComponent } from '@wordpress/components';
-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 FormTokenField extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      description,
-      hideHelpFromVision,
-      hideLabelFromVision,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-form-token-field__input-container', className);
-    return _jsxs("div", {
-      className: classnames({
-        'newspack-form-token-field--label-hidden': hideLabelFromVision,
-        'newspack-form-token-field--help-hidden': hideHelpFromVision
-      }, 'newspack-form-token-field'),
-      children: [_jsx(BaseComponent, {
-        className: classes,
-        ...otherProps
-      }), description && _jsx("p", {
-        className: "newspack-form-token-field__help",
-        children: description
-      })]
-    });
-  }
-}
-export default FormTokenField;

package/dist/esm/global-notices/index.js

@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { parse } from 'qs';
-
-/**
- * Internal dependencies
- */
-import { Notice } from '../';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const GlobalNotices = () => {
-  const notice = parse(window.location.search)['newspack-notice'];
-  if (!notice) {
-    return null;
-  }
-  return notice.split(',').map((text, i) => {
-    if (text.indexOf('_error_') === 0) {
-      return _jsx(Notice, {
-        isError: true,
-        noticeText: text.replace('_error_', ''),
-        rawHTML: true
-      }, i);
-    }
-    return _jsx(Notice, {
-      isSuccess: true,
-      noticeText: text
-    }, i);
-  });
-};
-export default GlobalNotices;

package/dist/esm/grid/index.js

@@ -1,45 +0,0 @@
-/**
- * Grid
- */
-
-/**
- * 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 Grid extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      className,
-      columns,
-      gutter,
-      noMargin,
-      rowGap,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-grid', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
-    return _jsx("div", {
-      className: classes,
-      ...otherProps
-    });
-  }
-}
-Grid.defaultProps = {
-  columns: 2,
-  gutter: 32,
-  rowGap: null
-};
-export default Grid;

package/dist/esm/grid/style.scss

@@ -1,166 +0,0 @@
-/**
- * Grid
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-grid {
-	display: grid;
-	grid-gap: 32px;
-	grid-auto-rows: min-content;
-	grid-template-columns: 1fr;
-	margin: 32px 0;
-
-	// No Margin
-	&--no-margin {
-		margin: 0;
-	}
-
-	// Gutter 0
-	&__gutter-0 {
-		grid-gap: 0;
-	}
-
-	// Gutter 8
-	&__gutter-8 {
-		grid-gap: 8px;
-	}
-
-	// Gutter 16
-	&__gutter-16 {
-		grid-gap: 16px;
-	}
-
-	// Gutter 24
-	&__gutter-24 {
-		grid-gap: 24px;
-	}
-
-	// Gutter 32
-	&__gutter-32 {
-		grid-gap: 32px;
-	}
-
-	// Row Gap 0
-	&__row-gap-0 {
-		grid-row-gap: 0;
-	}
-
-	// Row Gap 8
-	&__row-gap-8 {
-		grid-row-gap: 8px;
-	}
-
-	// Row Gap 16
-	&__row-gap-16 {
-		grid-row-gap: 16px;
-	}
-
-	// Row Gap 32
-	&__row-gap-32 {
-		grid-row-gap: 32px;
-	}
-
-	// Gutter 64
-	&__gutter-64 {
-		grid-gap: 64px;
-	}
-
-	// Columns 6
-	&__columns-6 {
-		grid-template-columns: repeat( 2, 1fr );
-	}
-
-	// Media Queries - 744px
-	@media screen and ( min-width: 744px ) {
-		&__columns-2,
-		&__columns-3,
-		&__columns-4 {
-			grid-template-columns: repeat( 2, 1fr );
-		}
-
-		&__columns-6 {
-			grid-template-columns: repeat( 3, 1fr );
-		}
-	}
-
-	// Media Queries - 1128px
-	@media screen and ( min-width: 1128px ) {
-		// Columns 3
-		&__columns-3 {
-			grid-template-columns: repeat( 3, 1fr );
-		}
-
-		// Columns 4
-		&__columns-4 {
-			grid-template-columns: repeat( 4, 1fr );
-		}
-
-		// Columns 6
-		&__columns-6 {
-			grid-template-columns: repeat( 6, 1fr );
-		}
-
-		// Gutter 48
-		&__gutter-48 {
-			grid-gap: 48px;
-		}
-
-		// Gutter 64
-		&__gutter-64 {
-			grid-gap: 64px;
-		}
-	}
-
-	// Children
-	> * {
-		margin-bottom: 0 !important;
-		margin-top: 0 !important;
-	}
-
-	.components-base-control {
-		&__field,
-		&__help {
-			margin-bottom: 0;
-		}
-	}
-
-	.components-form-token-field {
-		&__input-container {
-			margin-bottom: 0;
-		}
-	}
-
-	// Cards
-	> .newspack-card {
-		> *:first-child {
-			margin-top: 0 !important;
-		}
-
-		> *:last-child {
-			margin-bottom: 0 !important;
-		}
-	}
-
-	// Table-like
-	&__thead {
-		background: rgba( black, 0.025 );
-		border-bottom: 1px solid wp-colors.$gray-300;
-		border-top: 1px solid wp-colors.$gray-300;
-		color: wp-colors.$gray-900;
-
-		> *:not( .screen-reader-text ) {
-			padding: 8px;
-		}
-	}
-
-	&__tbody {
-		border-bottom: 1px solid wp-colors.$gray-300;
-		padding: 8px 0;
-	}
-
-	&__thead + &__tbody,
-	&__tbody + &__tbody {
-		margin-top: -32px;
-	}
-}