newspack-components 2.0.3 → 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.0.3",
+	"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/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

@@ -6,13 +6,13 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { ExternalLink } from '@wordpress/components';
-import { Icon, check } from '@wordpress/icons';
+import { ExternalLink, ToggleControl } from '@wordpress/components';
+import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { Button, Card, Handoff, Notice, ToggleControl, Waiting } from '../';
+import { Button, Card, Grid, Handoff, Notice, Waiting } from '../';
 import './style.scss';
 
 /**
@@ -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 {
@@ -46,8 +55,10 @@ class ActionCard extends Component {
 			actionContent,
 			actionText,
 			secondaryActionText,
+			secondaryDestructive,
 			image,
 			imageLink,
+			indent,
 			isSmall,
 			isMedium,
 			simple,
@@ -58,17 +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' }
@@ -91,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>
@@ -102,7 +127,8 @@ class ActionCard extends Component {
 								className={ classnames(
 									'newspack-checkbox-icon',
 									'is-primary',
-									'checked' === checkbox && 'newspack-checkbox-icon--checked'
+									'checked' === checkbox && 'newspack-checkbox-icon--checked',
+									isPending && 'newspack-checkbox-icon--pending'
 								) }
 							>
 								{ 'checked' === checkbox && <Icon icon={ check } /> }
@@ -110,23 +136,33 @@ class ActionCard extends Component {
 						</div>
 					) }
 					<div className="newspack-action-card__region newspack-action-card__region-center">
-						<h2>
-							<span className="newspack-action-card__title" { ...titleProps }>
-								{ titleLink ? <a href={ titleLink }>{ title }</a> : title }
-							</span>
-							{ badges?.length &&
-								badges.map( ( badgeText, i ) => (
-									<span key={ `badge-${ i }` } className="newspack-action-card__badge">
-										{ badgeText }
-									</span>
-								) ) }
-						</h2>
-						<p>
-							{ typeof description === 'string' && description }
-							{ typeof description === 'function' && description() }
-						</p>
+						<Grid columns={ 1 } gutter={ 8 } noMargin>
+							<h2>
+								<span className="newspack-action-card__title" { ...titleProps }>
+									{ 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 ) => (
+										<span key={ `badge-${ i }` } className="newspack-action-card__badge">
+											{ badgeText }
+										</span>
+									) ) }
+							</h2>
+							{ description && (
+								<p>
+									{ typeof description === 'string' && description }
+									{ typeof description === 'function' && description() }
+								</p>
+							) }
+						</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 }
@@ -137,6 +173,7 @@ class ActionCard extends Component {
 									</Handoff>
 								) : onClick || hasInternalLink ? (
 									<Button
+										disabled={ disabled }
 										isLink
 										href={ href }
 										onClick={ onClick }
@@ -160,12 +197,18 @@ class ActionCard extends Component {
 									isLink
 									onClick={ onSecondaryActionClick }
 									className="newspack-action-card__secondary_button"
+									isDestructive={ secondaryDestructive }
 								>
 									{ secondaryActionText }
 								</Button>
 							) }
 						</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">
@@ -183,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>
 		);
 	}