newspack-components 2.1.0 → 2.2.0

package/dist/esm/wizard/style.scss

@@ -0,0 +1,148 @@
+@import '~@wordpress/base-styles/colors';
+@import '../../../shared/scss/colors';
+
+.newspack-wizard {
+	&__title {
+		align-items: center;
+		border-bottom: 1px solid $gray-300;
+		display: flex;
+
+		h1 {
+			color: $gray-900;
+			font-size: 21px;
+			line-height: 30px;
+			margin: 0;
+			padding: 0 24px;
+		}
+
+		svg {
+			fill: white;
+			margin: 0 !important;
+
+			&.newspack-icon {
+				flex: 0 0 36px;
+				margin-bottom: -1px !important;
+			}
+
+			&:not( .newspack-icon ) {
+				background: $primary-500;
+				left: 50%;
+				margin: -18px 0 0 -18px !important;
+				opacity: 0;
+				position: absolute;
+				top: 50%;
+				transition: opacity 125ms ease-in-out;
+			}
+		}
+
+		a {
+			position: relative;
+
+			&:hover {
+				svg {
+					opacity: 1;
+				}
+			}
+		}
+
+		a:focus-visible {
+			outline: none !important;
+
+			&::before {
+				border: 2px solid white;
+				border-radius: 3px;
+				bottom: 5px;
+				content: '';
+				display: block;
+				left: 6px;
+				position: absolute;
+				right: 6px;
+				top: 6px;
+			}
+		}
+	}
+
+	&__content {
+		color: $gray-700;
+		font-size: 14px;
+		line-height: 24px;
+		margin: 0 auto;
+		max-width: 1208px;
+		padding: 0 16px;
+
+		@media screen and ( min-width: 744px ) {
+			padding: 32px 84px;
+		}
+
+		// Typography
+
+		h1,
+		h2,
+		h3,
+		p {
+			line-height: 24px;
+			margin: 32px 0;
+			padding: 0;
+		}
+
+		h1 {
+			color: $gray-900;
+			font-size: 21px;
+			font-weight: bold;
+			line-height: 32px;
+		}
+
+		h2 {
+			color: $gray-900;
+			font-size: 17px;
+			font-weight: bold;
+		}
+
+		h3 {
+			color: $gray-900;
+			font-size: 14px;
+			font-weight: bold;
+		}
+
+		p {
+			font-size: 14px;
+
+			&.is-dark {
+				color: $gray-900;
+			}
+		}
+
+		strong {
+			font-weight: bold;
+		}
+
+		small {
+			font-size: 12px;
+			line-height: 16px;
+		}
+
+		// Links
+
+		a {
+			color: $primary-500;
+
+			&:active,
+			&:focus,
+			&:hover {
+				color: $primary-600;
+				text-decoration: none;
+			}
+
+			&:focus {
+				box-shadow: none;
+				outline: 2px solid $primary-500;
+				outline-offset: 2px;
+			}
+		}
+	}
+
+	&__above-header {
+		border-radius: 0;
+		margin: 0;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -24,10 +24,10 @@
 	},
 	"dependencies": {
 		"@wordpress/base-styles": "^4.0.0",
-		"@wordpress/components": "^19.0.1",
-		"@wordpress/element": "^4.0.1",
+		"@wordpress/components": "^23.6.0",
+		"@wordpress/element": "^5.5.0",
 		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^6.1.0",
+		"@wordpress/icons": "^9.11.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"moment-range": "^3.1.1",

package/shared/scss/_colors.scss

@@ -1,4 +1,3 @@
-// HEX
 $primary-000: #f5fdff;
 $primary-050: #d6f6ff;
 $primary-100: #b4e4ff;
@@ -11,17 +10,3 @@ $primary-700: #1522af;
 $primary-800: #0b0b8d;
 $primary-900: #0d046e;
 $primary-950: #0e0052;
-
-// RGB
-$primary-000--rgb: 245, 253, 255;
-$primary-050--rgb: 214, 246, 255;
-$primary-100--rgb: 180, 228, 255;
-$primary-200--rgb: 147, 204, 253;
-$primary-300--rgb: 114, 175, 251;
-$primary-400--rgb: 82, 141, 252;
-$primary-500--rgb: 51, 102, 255;
-$primary-600--rgb: 34, 64, 213;
-$primary-700--rgb: 21, 34, 175;
-$primary-800--rgb: 11, 11, 141;
-$primary-900--rgb: 13, 4, 110;
-$primary-950--rgb: 14, 0, 82;

package/src/accordion/index.js

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

@@ -0,0 +1,27 @@
+@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/action-card/index.js

@@ -7,7 +7,7 @@
  */
 import { Component } from '@wordpress/element';
 import { ExternalLink, ToggleControl } from '@wordpress/components';
-import { Icon, check } from '@wordpress/icons';
+import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -21,12 +21,21 @@ import './style.scss';
 import classnames from 'classnames';
 
 class ActionCard extends Component {
-	backgroundImageStyles = url => {
-		return url ? { backgroundImage: `url(${ url })` } : {};
+	state = {
+		expanded: false,
 	};
 
 	/**
-	 * Render
+	 * When the collapse prop is updated to true, collapse the card if already expanded.
+	 */
+	componentDidUpdate( prevProps ) {
+		if ( ! prevProps.collapse && this.props.collapse && this.state.expanded ) {
+			this.setState( { expanded: false } );
+		}
+	}
+
+	/**
+	 * Render.
 	 */
 	render() {
 		const {
@@ -60,19 +69,31 @@ class ActionCard extends Component {
 			toggleChecked,
 			toggleOnChange,
 			hasGreyHeader,
+			hasWhiteHeader,
 			isPending,
+			expandable = false,
 		} = this.props;
+
+		const { expanded } = this.state;
+
 		const hasChildren = notification || children;
 		const classes = classnames(
 			'newspack-action-card',
 			simple && 'newspack-card--is-clickable',
 			hasGreyHeader && 'newspack-card--has-grey-header',
+			hasWhiteHeader && 'newspack-card--has-white-header',
 			hasChildren && 'newspack-card--has-children',
 			indent && 'newspack-card--indent',
 			isSmall && 'is-small',
 			isMedium && 'is-medium',
+			checkbox && 'has-checkbox',
+			expandable && 'is-expandable',
+			actionContent && 'has-action-content',
 			className
 		);
+		const backgroundImageStyles = url => {
+			return url ? { backgroundImage: `url(${ url })` } : {};
+		};
 		const titleProps =
 			toggleOnChange && ! titleLink && ! disabled
 				? { onClick: () => toggleOnChange( ! toggleChecked ), tabIndex: '0' }
@@ -95,7 +116,7 @@ class ActionCard extends Component {
 							<a href={ imageLink }>
 								<div
 									className="newspack-action-card__image"
-									style={ this.backgroundImageStyles( image ) }
+									style={ backgroundImageStyles( image ) }
 								/>
 							</a>
 						</div>
@@ -118,7 +139,13 @@ class ActionCard extends Component {
 						<Grid columns={ 1 } gutter={ 8 } noMargin>
 							<h2>
 								<span className="newspack-action-card__title" { ...titleProps }>
-									{ titleLink ? <a href={ titleLink }>{ title }</a> : title }
+									{ titleLink && <a href={ titleLink }>{ title }</a> }
+									{ ! titleLink && expandable && (
+										<Button isLink onClick={ () => this.setState( { expanded: ! expanded } ) }>
+											{ title }
+										</Button>
+									) }
+									{ ! titleLink && ! expandable && title }
 								</span>
 								{ badges?.length &&
 									badges.map( ( badgeText, i ) => (
@@ -135,7 +162,7 @@ class ActionCard extends Component {
 							) }
 						</Grid>
 					</div>
-					{ ( actionText || isDisplayingSecondaryAction || actionContent ) && (
+					{ ! expandable && ( actionText || isDisplayingSecondaryAction || actionContent ) && (
 						<div className="newspack-action-card__region newspack-action-card__region-right">
 							{ /* eslint-disable no-nested-ternary */ }
 							{ actionContent && actionContent }
@@ -146,6 +173,7 @@ class ActionCard extends Component {
 									</Handoff>
 								) : onClick || hasInternalLink ? (
 									<Button
+										disabled={ disabled }
 										isLink
 										href={ href }
 										onClick={ onClick }
@@ -176,6 +204,11 @@ class ActionCard extends Component {
 							) }
 						</div>
 					) }
+					{ expandable && (
+						<Button onClick={ () => this.setState( { expanded: ! expanded } ) }>
+							<Icon icon={ expanded ? chevronUp : chevronDown } height={ 24 } width={ 24 } />
+						</Button>
+					) }
 				</div>
 				{ notification && (
 					<div className="newspack-action-card__notification newspack-action-card__region-children">
@@ -193,7 +226,9 @@ class ActionCard extends Component {
 						) }
 					</div>
 				) }
-				{ children && <div className="newspack-action-card__region-children">{ children }</div> }
+				{ children && ( ( expandable && expanded ) || ! expandable ) && (
+					<div className="newspack-action-card__region-children">{ children }</div>
+				) }
 			</Card>
 		);
 	}

package/src/action-card/style.scss

@@ -2,11 +2,12 @@
  * Action Card
  */
 
-@import '~@wordpress/base-styles/colors';
+@use 'sass:color';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-card.newspack-action-card {
 	padding: 0;
-	border-color: $gray-300;
+	border-color: wp-colors.$gray-300;
 
 	// Clickable
 
@@ -25,7 +26,7 @@
 	&.newspack-card__is-secondary,
 	&.newspack-card__is-supported,
 	&.newspack-card__is-unsupported {
-		box-shadow: inset 4px 0 0 $gray-100;
+		box-shadow: inset 4px 0 0 wp-colors.$gray-100;
 
 		.newspack-action-card__region-top {
 			padding-left: 28px;
@@ -37,15 +38,15 @@
 	}
 
 	&.newspack-card__is-secondary {
-		box-shadow: inset 4px 0 0 $alert-yellow;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-yellow;
 	}
 
 	&.newspack-card__is-supported {
-		box-shadow: inset 4px 0 0 $alert-green;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-green;
 	}
 
 	&.newspack-card__is-unsupported {
-		box-shadow: inset 4px 0 0 $alert-red;
+		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
 	}
 
 	// Small
@@ -83,18 +84,18 @@
 		}
 
 		&.mv0 {
-			border-left-color: $gray-300;
+			border-left-color: wp-colors.$gray-300;
 			border-radius: 0;
-			border-right-color: $gray-300;
+			border-right-color: wp-colors.$gray-300;
 
 			&:first-of-type {
-				border-top-color: $gray-300;
+				border-top-color: wp-colors.$gray-300;
 				border-top-left-radius: 3px;
 				border-top-right-radius: 3px;
 			}
 
 			&:last-of-type {
-				border-bottom-color: $gray-300;
+				border-bottom-color: wp-colors.$gray-300;
 				border-bottom-left-radius: 3px;
 				border-bottom-right-radius: 3px;
 			}
@@ -141,7 +142,25 @@
 		}
 
 		.newspack-action-card__region-children {
-			padding: 0 32px 32px 32px;
+			padding: 0 32px 32px;
+		}
+	}
+
+	// Nested children
+
+	&.newspack-card--has-children {
+		.newspack-action-card {
+			&:first-child {
+				margin-top: 32px;
+			}
+
+			+ .newspack-action-card {
+				margin-top: 16px !important;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
 		}
 	}
 
@@ -152,7 +171,12 @@
 
 		&.newspack-card--has-children {
 			.newspack-action-card__region-top {
-				border-bottom: 1px solid $gray-300;
+				border-bottom: 1px solid wp-colors.$gray-300;
+			}
+
+			.is-small > .newspack-action-card__region-top {
+				padding-bottom: 8px;
+				padding-top: 8px;
 			}
 		}
 
@@ -162,11 +186,18 @@
 
 		.newspack-action-card__region-center {
 			p {
-				color: darken( $gray-700, 0.75% );
+				color: color.adjust( wp-colors.$gray-700, $lightness: -0.75% );
 			}
 		}
 	}
 
+	&.newspack-card--has-white-header {
+		.newspack-action-card__region-top {
+			background-color: transparent;
+			border: none !important;
+		}
+	}
+
 	// Indent
 
 	&.newspack-card--indent {
@@ -174,17 +205,14 @@
 		position: relative;
 
 		&::before {
-			border: 0 solid $gray-300;
+			border: 0 solid wp-colors.$gray-300;
 			border-left-width: 1px;
 			border-bottom-width: 1px;
 			border-radius: 0 0 0 2px;
-			bottom: 50%;
 			content: '';
 			display: block;
-			left: -28px;
 			position: absolute;
-			right: 100%;
-			top: -17px;
+			inset: -17px 100% 50% -28px;
 		}
 	}
 
@@ -258,7 +286,7 @@
 	}
 
 	.newspack-action-card__region-children {
-		padding: 0 24px 24px 24px;
+		padding: 0 24px 24px;
 
 		&__inner {
 			padding-top: 32px;
@@ -304,7 +332,7 @@
 		}
 
 		p {
-			color: $gray-700;
+			color: wp-colors.$gray-700;
 		}
 	}
 
@@ -347,6 +375,12 @@
 				margin-top: 0;
 			}
 		}
+
+		&.newspack-action-card__region-children {
+			.newspack-notice {
+				margin-top: 32px;
+			}
+		}
 	}
 
 	// Image
@@ -369,9 +403,9 @@
 	// Badge
 
 	.newspack-action-card__badge {
-		background: $gray-100;
+		background: wp-colors.$gray-100;
 		border-radius: 2px;
-		color: $gray-900;
+		color: wp-colors.$gray-900;
 		display: block;
 		flex: 0 0 auto;
 		font-size: 10px;
@@ -392,6 +426,49 @@
 		font-style: italic;
 	}
 
+	// Expandable card children
+
+	&.is-expandable {
+		.newspack-action-card__title .components-button.is-link {
+			color: inherit;
+			font-size: inherit;
+			font-weight: inherit;
+			text-decoration: inherit;
+		}
+
+		.newspack-action-card__region-children {
+			border-top: 1px solid wp-colors.$gray-100;
+			padding-top: 24px;
+		}
+
+		&.is-medium .newspack-action-card__region-children {
+			padding-top: 32px;
+		}
+
+		&.has-checkbox {
+			.newspack-action-card__region-children {
+				padding-left: 72px;
+			}
+
+			&.is-small .newspack-action-card__region-children {
+				padding-left: 64px;
+			}
+
+			&.is-medium .newspack-action-card__region-children {
+				padding-left: 56px;
+			}
+		}
+	}
+
+	// Action content with multiple buttons
+	&.has-action-content .newspack-action-card__region-right {
+		flex-direction: row;
+
+		.components-button + .components-button {
+			margin-left: 8px;
+		}
+	}
+
 	// Multiple Cards
 
 	& + & {
@@ -401,6 +478,6 @@
 
 .newspack-card {
 	.newspack-card.newspack-action-card {
-		border: 1px solid $gray-200;
+		border: 1px solid wp-colors.$gray-200;
 	}
 }

package/src/autocomplete-tokenfield/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 
 /**
  * WordPress dependencies

package/src/autocomplete-tokenfield/style.scss

@@ -2,7 +2,7 @@
  * Autocomplete Token Field
  */
 
-@import '~@wordpress/base-styles/colors';
+@use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-autocomplete-tokenfield {
 	position: relative;
@@ -27,7 +27,7 @@
 	}
 
 	.newspack-autocomplete-tokenfield__help {
-		color: $gray-700;
+		color: wp-colors.$gray-700;
 		font-size: inherit;
 		margin-top: 0;
 	}