newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.2

package/src/color-picker/style.scss

@@ -10,7 +10,7 @@
 	}
 
 	&__expander {
-		box-shadow: inset 0 0 0 1px rgb( 0 0 0 / 20% );
+		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
 		border-radius: 2px;
 		height: 64px;
 		padding: 12px;
@@ -18,14 +18,14 @@
 		text-transform: uppercase;
 
 		&:focus-visible {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			border-color: white;
 		}
 	}
 
 	&__main {
 		background: white;
-		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		box-shadow: 0 0 8px 4px rgba(black, 0.08);
 		margin: 12px 0;
 		position: absolute;
 		z-index: 2;

package/src/custom-select-control/style.scss

@@ -2,7 +2,7 @@
  * Custom Select Control
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-custom-select-control {
 	label {
@@ -22,13 +22,13 @@
 		&:active,
 		&:focus,
 		&:hover,
-		&[aria-expanded='true'] {
+		&[aria-expanded="true"] {
 			color: wp-colors.$gray-900;
 		}
 
 		&:focus {
-			border-color: var( --wp-admin-theme-color );
-			box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color );
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 		}
 
 		&-icon {
@@ -36,15 +36,15 @@
 			width: 18px;
 		}
 
-		&[aria-expanded='true'] svg {
-			transform: rotate( 180deg );
+		&[aria-expanded="true"] svg {
+			transform: rotate(180deg);
 		}
 	}
 
 	.components-custom-select-control__menu {
 		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
-		box-shadow: 0 4px 8px rgba( black, 0.08 );
+		box-shadow: 0 4px 8px rgba(black, 0.08);
 		margin: 8px 0 0;
 		min-width: 222px;
 	}
@@ -72,16 +72,17 @@
 
 		&.is-highlighted {
 			background: white;
-			color: var( --wp-admin-theme-color );
+			color: var(--wp-admin-theme-color);
 		}
 
 		&.is-selected {
 			margin-left: 0;
 
 			&::before {
-				background: url( 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==' )
+				background:
+					url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==")
 					0 0 no-repeat;
-				content: '';
+				content: "";
 				display: block;
 				height: 24px;
 				margin: 0 4px 0 0;

package/src/date-range-picker/index.js

@@ -0,0 +1,31 @@
+/**
+ * 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

@@ -0,0 +1,148 @@
+@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/footer/style.scss

@@ -2,7 +2,7 @@
  * Footer
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-footer {
 	align-items: stretch;

package/src/form-token-field/style.scss

@@ -2,7 +2,7 @@
  * Form Token Field
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-form-token-field {
 	width: 100%;

package/src/grid/style.scss

@@ -2,7 +2,7 @@
  * Grid
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-grid {
 	display: grid;
@@ -68,7 +68,7 @@
 
 	// Columns 6
 	&__columns-6 {
-		grid-template-columns: repeat( 2, 1fr );
+		grid-template-columns: repeat(2, 1fr);
 	}
 
 	// Media Queries - 744px
@@ -76,11 +76,11 @@
 		&__columns-2,
 		&__columns-3,
 		&__columns-4 {
-			grid-template-columns: repeat( 2, 1fr );
+			grid-template-columns: repeat(2, 1fr);
 		}
 
 		&__columns-6 {
-			grid-template-columns: repeat( 3, 1fr );
+			grid-template-columns: repeat(3, 1fr);
 		}
 	}
 
@@ -88,17 +88,17 @@
 	@media screen and ( min-width: 1128px ) {
 		// Columns 3
 		&__columns-3 {
-			grid-template-columns: repeat( 3, 1fr );
+			grid-template-columns: repeat(3, 1fr);
 		}
 
 		// Columns 4
 		&__columns-4 {
-			grid-template-columns: repeat( 4, 1fr );
+			grid-template-columns: repeat(4, 1fr);
 		}
 
 		// Columns 6
 		&__columns-6 {
-			grid-template-columns: repeat( 6, 1fr );
+			grid-template-columns: repeat(6, 1fr);
 		}
 
 		// Gutter 48
@@ -144,12 +144,12 @@
 
 	// Table-like
 	&__thead {
-		background: rgba( black, 0.025 );
+		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 ) {
+		> *:not(.screen-reader-text) {
 			padding: 8px;
 		}
 	}

package/src/handoff-message/index.js

@@ -34,6 +34,8 @@ export default function HandoffMessage() {
 		// Clean up the notification when unmounting.
 		return () => window.localStorage.removeItem( HANDOFF_KEY );
 	}, [] );
-	if ( ! handoffMessage ) return null;
+	if ( ! handoffMessage ) {
+		return null;
+	}
 	return <Notice isHandoff isDismissible={ false } rawHTML noticeText={ handoffMessage } />;
 }

package/src/image-upload/index.js

@@ -92,7 +92,7 @@ class ImageUpload extends Component {
 		return (
 			<div className={ classnames( 'newspack-image-upload', className ) }>
 				<div className="newspack-image-upload__header">
-					{ /* eslint-disable-next-line jsx-a11y/label-has-for */ }
+					{ /* eslint-disable-next-line jsx-a11y/label-has-for, jsx-a11y/label-has-associated-control */ }
 					{ label && <label className="newspack-image-upload__label">{ label }</label> }
 					{ info && <InfoButton text={ info } /> }
 				</div>

package/src/image-upload/index.test.js

@@ -1,6 +1,11 @@
-import React from 'react';
+/**
+ * External dependencies
+ */
 import { render } from '@testing-library/react';
 
+/**
+ * Internal dependencies
+ */
 import ImageUpload from './';
 
 describe( 'ImageUpload', () => {

package/src/image-upload/style.scss

@@ -2,7 +2,7 @@
  * Image Upload
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-image-upload {
 	margin: 32px 0;
@@ -27,7 +27,7 @@
 		&--covering {
 			background-size: cover;
 		}
-		&:not( &--has-image ) {
+		&:not(&--has-image) {
 			.newspack-button {
 				background: white !important;
 				border-radius: 2px !important;
@@ -49,9 +49,9 @@
 			overflow: hidden;
 			&::before,
 			&::after {
-				border: 1px solid rgba( black, 0.54 );
+				border: 1px solid rgba(black, 0.54);
 				border-radius: 2px;
-				content: '';
+				content: "";
 				inset: 0;
 				position: absolute;
 				z-index: 0;
@@ -66,7 +66,7 @@
 				position: relative;
 			}
 			&::after {
-				background: rgba( white, 0.9 );
+				background: rgba(white, 0.9);
 				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,

package/src/index.js

@@ -1,3 +1,4 @@
+export { default as Accordion } from './accordion';
 export { default as ActionCard } from './action-card';
 export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
@@ -28,6 +29,7 @@ export { default as ProgressBar } from './progress-bar';
 export { default as RadioControl } from './radio-control';
 export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
+export { default as DateRangePicker } from './date-range-picker';
 export { default as Settings } from './settings';
 export { default as StepsList } from './steps-list';
 export { default as StepsListItem } from './steps-list-item';

package/src/modal/style.scss

@@ -2,7 +2,7 @@
  * Modal
  */
 
-@use '../../../shared/scss/colors';
+@use "../../../shared/scss/colors";
 
 .newspack-modal {
 	// Color
@@ -29,21 +29,21 @@
 	}
 
 	@media screen and ( min-width: 960px ) {
-		max-height: calc( 100% - 128px );
+		max-height: calc(100% - 128px);
 	}
 
 	// Links
 	a {
-		color: var( --wp-admin-theme-color );
+		color: var(--wp-admin-theme-color);
 
 		&:active,
 		&:focus,
 		&:hover {
-			color: var( --wp-admin-theme-color-darker-10 );
+			color: var(--wp-admin-theme-color-darker-10);
 		}
 
 		&:focus {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			outline: 3px solid transparent;
 		}
 	}

package/src/newspack-icon/style.scss

@@ -2,7 +2,7 @@
  * Newspack Icon
  */
 
-@use '../../../shared/scss/colors';
+@use "../../../shared/scss/colors";
 
 .newspack-icon {
 	background: colors.$primary-500;

package/src/newspack-logo/style.scss

@@ -2,7 +2,7 @@
  * Newspack Logo
  */
 
-@use '../../../shared/scss/colors';
+@use "../../../shared/scss/colors";
 
 .newspack-logo {
 	&__svg {

package/src/notice/style.scss

@@ -2,9 +2,9 @@
  * Notice
  */
 
-@use 'sass:color';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-@use '../../../shared/scss/colors';
+@use "sass:color";
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../shared/scss/colors";
 
 .newspack-notice {
 	align-items: center;
@@ -26,7 +26,7 @@
 		background: colors.$primary-700;
 		border-radius: 2px;
 		bottom: 16px;
-		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		box-shadow: 0 0 8px 4px rgba(black, 0.08);
 		color: white;
 		font-weight: bold;
 		margin: 0 16px;
@@ -40,16 +40,16 @@
 	}
 
 	&__is-error {
-		background: color.adjust( wp-colors.$alert-red, $lightness: 51% );
+		background: color.adjust(wp-colors.$alert-red, $lightness: 51%);
 
 		> svg {
 			fill: wp-colors.$alert-red;
-			transform: rotate( 180deg );
+			transform: rotate(180deg);
 		}
 	}
 
 	&__is-handoff {
-		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
+		background: color.adjust(wp-colors.$alert-yellow, $lightness: 30%);
 		margin-top: 0;
 		position: sticky;
 		top: 46px;
@@ -69,7 +69,7 @@
 	}
 
 	&__is-success {
-		background: color.adjust( wp-colors.$alert-green, $lightness: 42% );
+		background: color.adjust(wp-colors.$alert-green, $lightness: 42%);
 
 		> svg {
 			fill: wp-colors.$alert-green;
@@ -77,11 +77,11 @@
 	}
 
 	&__is-warning {
-		background: color.adjust( wp-colors.$alert-yellow, $lightness: 30% );
+		background: color.adjust(wp-colors.$alert-yellow, $lightness: 30%);
 
 		> svg {
 			fill: wp-colors.$alert-yellow;
-			transform: rotate( 180deg );
+			transform: rotate(180deg);
 		}
 	}
 
@@ -100,7 +100,7 @@
 			}
 
 			&:focus {
-				box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) currentcolor;
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) currentcolor;
 			}
 		}
 	}

package/src/plugin-installer/style.scss

@@ -2,7 +2,7 @@
  * Plugin Installer
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-card {
 	.newspack-plugin-installer__status {

package/src/plugin-settings/style.scss

@@ -1,4 +1,4 @@
-.newspack-card:not( .newspack-settings__no-border ) {
+.newspack-card:not(.newspack-settings__no-border) {
 	.newspack-action-card__region-children {
 		> .newspack-grid {
 			margin: 32px 0 0 !important;

package/src/plugin-toggle/index.js

@@ -117,14 +117,13 @@ class PluginToggle extends Component {
 			.map( pluginSlug =>
 				pluginsFromAPI[ pluginSlug ]
 					? Object.keys( pluginsFromAPI[ pluginSlug ] ).reduce(
-							( accumulator, key ) => ( {
-								...accumulator,
-								[ key.charAt( 0 ).toLowerCase() + key.slice( 1 ) ]:
+						( accumulator, key ) => ( {
+							...accumulator,
+							[ key.charAt( 0 ).toLowerCase() + key.slice( 1 ) ]:
 									pluginsFromAPI[ pluginSlug ][ key ],
-							} ),
-							{}
-					  )
-					: {}
+						} ),
+						{}
+					) : {}
 			)
 			.map( plugin => Object.assign( plugin, pluginsFromProps[ plugin.slug ] ) );
 

package/src/plugin-toggle/style.scss

@@ -2,7 +2,7 @@
  * Plugin Toggle
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-action-card {
 	&.in-flight,

package/src/popover/style.scss

@@ -2,8 +2,8 @@
  * Popover
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-popover {
 	.components-popover__content {
@@ -23,7 +23,7 @@
 				}
 			}
 
-			&:focus:not( :disabled ) {
+			&:focus:not(:disabled) {
 				box-shadow: inset 0 0 0 2px colors.$primary-500;
 				position: relative;
 				z-index: 1;
@@ -34,14 +34,14 @@
 				padding: 6px 8px;
 				text-decoration: none;
 
-				&:not( .is-destructive ) {
+				&:not(.is-destructive) {
 					color: wp-colors.$gray-700;
 
 					&:active,
 					&:active:enabled,
 					&:focus,
 					&:focus:enabled &:hover,
-					&:not( :disabled, [aria-disabled='true'], .is-default ):hover {
+					&:not(:disabled, [aria-disabled="true"], .is-default):hover {
 						color: colors.$primary-500;
 					}
 				}
@@ -52,7 +52,7 @@
 				}
 			}
 
-			&.is-destructive:not( :focus ) {
+			&.is-destructive:not(:focus) {
 				box-shadow: none !important;
 			}
 
@@ -131,7 +131,7 @@
 		}
 	}
 
-	&:not( .is-without-arrow )::before {
+	&:not(.is-without-arrow)::before {
 		border-color: wp-colors.$gray-300;
 	}