newspack-components 2.2.1 → 3.0.0-alpha.1

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/src/accordion/index.js

@@ -1,32 +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';
-
-const Accordion = ( { children, title } ) => {
-	const [ isOpen, setIsOpen ] = useState( false );
-	return (
-		<details
-			className={ classNames( 'newspack-accordion', { 'newspack-accordion--is-open': isOpen } ) }
-		>
-			<summary onClick={ () => setIsOpen( ! isOpen ) }>
-				{ title }
-				<Icon className="newspack-accordion__icon" icon={ chevronRight } size={ 24 } />
-			</summary>
-			{ children }
-		</details>
-	);
-};
-
-export default Accordion;

package/src/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/src/date-range-picker/index.js

@@ -1,31 +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';
-
-const moment = extendMoment( origMoment );
-
-const DateRangePicker = ( { start, end, onChange } ) => {
-	return (
-		<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/src/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/src/grid/index.js

@@ -1,44 +0,0 @@
-/**
- * Grid
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-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 <div className={ classes } { ...otherProps } />;
-	}
-}
-
-Grid.defaultProps = {
-	columns: 2,
-	gutter: 32,
-	rowGap: null,
-};
-
-export default Grid;

package/src/text-control/index.js

@@ -1,56 +0,0 @@
-/**
- * Text Control
- */
-
-/**
- * WordPress dependencies
- */
-import { TextControl as BaseComponent } from '@wordpress/components';
-import { Component, createRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-class TextControl extends Component {
-	constructor( props ) {
-		super( props );
-		this.wrapperRef = createRef();
-	}
-	componentDidMount() {
-		if ( this.wrapperRef.current ) {
-			const labelEl = this.wrapperRef.current.querySelector( 'label' );
-			if ( labelEl ) {
-				labelEl.setAttribute( 'data-required-text', __( '(required)', 'newspack' ) );
-			}
-		}
-	}
-	/**
-	 * Render.
-	 */
-	render() {
-		const { className, required, isWide, withMargin = true, ...otherProps } = this.props;
-		const classes = classNames(
-			'newspack-text-control',
-			{ 'newspack-text-control--wide': isWide },
-			{ 'newspack-text-control--with-margin': withMargin },
-			className
-		);
-		return required ? (
-			<div ref={ this.wrapperRef } className="newspack-text-control--required">
-				<BaseComponent className={ classes } required={ required } { ...otherProps } />
-			</div>
-		) : (
-			<BaseComponent className={ classes } { ...otherProps } />
-		);
-	}
-}
-
-export default TextControl;