newspack-components 2.2.0 → 3.0.0-alpha.1

package/dist/esm/accordion/index.js

@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-
-/**
- * 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";
-const Accordion = _ref => {
-  let {
-    children,
-    title
-  } = _ref;
-  const [isOpen, setIsOpen] = useState(false);
-  return _jsxs("details", {
-    className: classNames('newspack-accordion', {
-      'newspack-accordion--is-open': isOpen
-    }),
-    children: [_jsxs("summary", {
-      onClick: () => setIsOpen(!isOpen),
-      children: [title, _jsx(Icon, {
-        className: "newspack-accordion__icon",
-        icon: chevronRight,
-        size: 24
-      })]
-    }), children]
-  });
-};
-export default Accordion;

package/dist/esm/accordion/style.scss

@@ -1,27 +0,0 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-accordion {
-	border: 1px solid wp-colors.$gray-300;
-
-	&__icon {
-		transition: transform 200ms ease-out;
-		transform: rotate( 90deg );
-	}
-
-	&--is-open {
-		.newspack-accordion {
-			&__icon {
-				transform: rotate( -90deg );
-			}
-		}
-	}
-	summary {
-		padding: 16px 32px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
-		font-size: 14px;
-		font-weight: bold;
-	}
-}

package/dist/esm/button-group/index.js

@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-import { ButtonGroup as BaseComponent } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-
-import './style.scss';
-/**
- * External dependencies
- */
-
-import classnames from 'classnames';
-/**
- * Button Group.
- */
-
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
-class ButtonGroup extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      noMargin,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-button-group', {
-      'newspack-button-group--no-margin': noMargin
-    }, className);
-    return _jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
-  }
-
-}
-
-export default ButtonGroup;

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

@@ -1,73 +0,0 @@
-/**
- * Button Group
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-button-group {
-	display: block;
-	&:not( .newspack-button-group--no-margin ) {
-		margin: 32px 0;
-	}
-
-	.newspack-button {
-		padding: 11px 17px !important;
-		&:active,
-		&:focus,
-		&:hover,
-		&.is-pressed {
-			position: relative;
-		}
-
-		&.is-pressed {
-			position: relative;
-			z-index: 2;
-			background-color: white !important;
-			color: $gray-900 !important;
-			border: none !important;
-			&:focus {
-				box-shadow: 0 0 0 1px white, 0 0 0 2px $primary-500 !important;
-			}
-			&:active,
-			&:hover {
-				background: $gray-100 !important;
-				color: $primary-500 !important;
-			}
-			&::after {
-				content: '';
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: calc( 100% - 6px );
-				height: calc( 100% - 6px );
-				border: 3px solid $primary-500;
-			}
-		}
-	}
-}
-
-body[class*='admin-color-'] {
-	.newspack-button-group {
-		.newspack-button {
-			border-radius: 0;
-			box-shadow: none;
-
-			&:first-child {
-				&,
-				&::after {
-					border-bottom-left-radius: 3px;
-					border-top-left-radius: 3px;
-				}
-			}
-
-			&:last-child {
-				&,
-				&::after {
-					border-bottom-right-radius: 3px;
-					border-top-right-radius: 3px;
-				}
-			}
-		}
-	}
-}

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

@@ -1,49 +0,0 @@
-/**
- * Checkbox Control
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { CheckboxControl as BaseComponent } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-
-import { InfoButton } 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 CheckboxControl extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      checked,
-      tooltip,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-checkbox-control', className);
-    return _jsxs("div", {
-      className: classes,
-      children: [_jsx(BaseComponent, {
-        checked: Boolean(checked),
-        ...otherProps
-      }), tooltip && _jsx(InfoButton, {
-        text: tooltip
-      })]
-    });
-  }
-
-}
-
-export default CheckboxControl;

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

@@ -1,78 +0,0 @@
-/**
- * Checkbox styles.
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-checkbox-control {
-	color: $gray-700;
-	display: flex;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
-	label {
-		color: inherit;
-		font-size: inherit;
-		line-height: inherit;
-		margin: 0;
-	}
-
-	.components-checkbox-control__input-container {
-		display: block;
-		margin: 0;
-		margin-right: 8px;
-
-		@media screen and ( min-width: 600px ) {
-			margin-bottom: 2px;
-			margin-top: 2px;
-		}
-	}
-
-	.components-checkbox-control__input[type='checkbox'] {
-		margin: 0;
-
-		&:checked {
-			background-color: $primary-500;
-			border-color: $primary-500;
-		}
-
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: 0 0 0 2px white, 0 0 0 3.5px $primary-500;
-		}
-	}
-
-	.components-base-control__help {
-		color: inherit;
-		font-size: inherit;
-		font-style: italic;
-		line-height: inherit;
-		margin: 0;
-		margin-left: 28px;
-	}
-
-	// Multiple Checkbox Controls
-
-	& + & {
-		margin-top: -16px;
-	}
-
-	// Reset
-
-	.components-base-control {
-		font-size: inherit;
-		line-height: inherit;
-	}
-
-	.components-base-control__field {
-		display: flex;
-		margin: 0;
-	}
-
-	.components-base-control__label {
-		display: block;
-		margin: 0;
-	}
-}

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;

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/preview-box/index.js

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ as alias__ } from '@wordpress/i18n';
-/**
- * Internal dependencies
- */
-
-const __ = alias__;
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
-const PreviewBox = _ref => {
-  let {
-    children
-  } = _ref;
-  return _jsxs("div", {
-    className: "newspack-preview-box",
-    children: [_jsx("div", {
-      className: "newspack-preview-box__label",
-      children: __('Preview', 'newspack')
-    }), _jsx("div", {
-      className: "newspack-preview-box__content",
-      children: children
-    })]
-  });
-};
-
-export default PreviewBox;

package/dist/esm/preview-box/style.scss

@@ -1,18 +0,0 @@
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-preview-box {
-	margin: 32px 0;
-
-	&__label {
-		color: $gray-900;
-		font-weight: bold;
-	}
-
-	&__content {
-		background: $gray-100;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		padding: 11px 8px;
-	}
-}

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

@@ -1,40 +0,0 @@
-/**
- * Textarea Control
- */
-
-/**
- * WordPress dependencies
- */
-import { TextareaControl 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";
-
-class TextareaControl extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-textarea-control', className);
-    return _jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
-  }
-
-}
-
-export default TextareaControl;

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

@@ -1,76 +0,0 @@
-/**
- * Textarea Control
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-textarea-control {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
-	label {
-		color: $gray-900;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
-		margin: 0;
-	}
-
-	textarea {
-		background: white;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		box-shadow: none;
-		color: inherit;
-		display: block;
-		font-size: 16px;
-		line-height: inherit;
-		margin: 0;
-		min-height: 48px;
-		padding: 11px 8px;
-		transition: border-color 125ms ease-in-out, box-shadow 125ms ease-in-out;
-		width: 100%;
-
-		@media screen and ( min-width: 768px ) {
-			font-size: 14px;
-		}
-
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-
-		&:disabled,
-		&.disabled {
-			background: $gray-100;
-			color: $gray-600;
-			cursor: not-allowed;
-		}
-	}
-
-	// Multiple Textarea Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -24px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-select-control,
-	+ .newspack-text-control {
-		margin-bottom: 32px;
-		margin-top: -24px;
-	}
-
-	// Reset
-
-	.components-base-control__field,
-	.components-base-control__label {
-		display: block;
-		margin: 0;
-	}
-}

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

@@ -1,44 +0,0 @@
-/**
- * Toggle Control
- */
-
-/**
- * WordPress dependencies
- */
-import { ToggleControl 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";
-
-class ToggleControl extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      isDark,
-      checked,
-      ...otherProps
-    } = this.props;
-    const classes = classNames('newspack-toggle-control', isDark && 'newspack-toggle-control--is-dark', // NOTE: disabled prop is handled in more recent Gutenberg versions. This special handling can be removed once that's in Core.
-    otherProps.disabled && 'newspack-toggle-control--is-disabled', className);
-    return _jsx(BaseComponent, {
-      className: classes,
-      checked: Boolean(checked),
-      ...otherProps
-    });
-  }
-
-}
-
-export default ToggleControl;