newspack-components 4.2.0 → 4.4.0-epic-editor-refactor.1

package/src/wizard/store/index.js

@@ -16,9 +16,18 @@ import { createAction } from './utils.js';
 export const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 
 const DEFAULT_STATE = {
+	headerData: {
+		actions: [],
+		backNav: '',
+		badges: [],
+		sectionDescription: '',
+		sectionName: '',
+		sectionTitle: '',
+	},
 	isLoading: false,
 	isQuietLoading: false,
 	apiData: {},
+	notices: [],
 	error: null,
 };
 
@@ -31,6 +40,10 @@ const clone = objectToClone => JSON.parse( JSON.stringify( objectToClone ) );
 
 const reducer = ( state = DEFAULT_STATE, { type, payload = {} } ) => {
 	switch ( type ) {
+		case 'SET_HEADER_DATA':
+			return { ...state, headerData: { ...state.headerData, ...payload } };
+		case 'RESET_HEADER_DATA':
+			return { ...state, headerData: { ...DEFAULT_STATE.headerData } };
 		case 'START_LOADING_DATA':
 			if ( payload.isQuietLoading ) {
 				return { ...state, isQuietLoading: true };
@@ -39,11 +52,17 @@ const reducer = ( state = DEFAULT_STATE, { type, payload = {} } ) => {
 		case 'FINISH_LOADING_DATA':
 			return { ...state, isLoading: false, isQuietLoading: false };
 		case 'SET_API_DATA':
-			return set( clone( state ), [ 'apiData', payload.slug ], payload.data );
+			return { ...state, apiData: set( clone( state.apiData ), [ payload.slug ], payload.data ) };
 		case 'UPDATE_WIZARD_SETTINGS':
-			return set( clone( state ), [ 'apiData', payload.slug, ...payload.path ], payload.value );
+			return { ...state, apiData: set( clone( state.apiData ), [ payload.slug, ...payload.path ], payload.value ) };
+		case 'ADD_NOTICE':
+			return { ...state, notices: [ ...state.notices, payload ] };
+		case 'REMOVE_NOTICE':
+			return { ...state, notices: state.notices.filter( notice => notice.id !== payload ) };
 		case 'SET_ERROR':
 			return { ...state, error: payload };
+		case 'RESET_NOTICES':
+			return { ...state, notices: DEFAULT_STATE.notices };
 		default:
 			return state;
 	}
@@ -51,11 +70,16 @@ const reducer = ( state = DEFAULT_STATE, { type, payload = {} } ) => {
 
 const actions = {
 	// Regular actions.
+	setHeaderData: createAction( 'SET_HEADER_DATA' ),
+	resetHeaderData: createAction( 'RESET_HEADER_DATA' ),
 	startLoadingData: createAction( 'START_LOADING_DATA' ),
 	finishLoadingData: createAction( 'FINISH_LOADING_DATA' ),
 	fetchFromAPI: createAction( 'FETCH_FROM_API' ),
 	setAPIDataForWizard: createAction( 'SET_API_DATA' ),
 	updateWizardSettings: createAction( 'UPDATE_WIZARD_SETTINGS' ),
+	addNotice: createAction( 'ADD_NOTICE' ),
+	removeNotice: createAction( 'REMOVE_NOTICE' ),
+	resetNotices: createAction( 'RESET_NOTICES' ),
 	setError: createAction( 'SET_ERROR' ),
 
 	// Async actions. These will not show up in Redux devtools.
@@ -85,10 +109,12 @@ const actions = {
 };
 
 const selectors = {
+	getHeaderData: state => state.headerData,
 	isLoading: state => state.isLoading,
 	isQuietLoading: state => state.isQuietLoading,
 	getWizardAPIData: ( state, slug ) => state.apiData[ slug ] || {},
 	getWizardData: ( state, slug ) => state.apiData[ slug ] ?? {},
+	getNotices: state => state.notices,
 	getError: state => state.error,
 };
 

package/dist/cjs/button-card/index.js

@@ -1,72 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _icons = require("@wordpress/icons");
-var _ = require("../");
-require("./style.scss");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Button Card
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-
-class ButtonCard extends _element.Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      chevron,
-      className,
-      desc,
-      grouped,
-      icon,
-      isDestructive,
-      isPressed,
-      isSmall,
-      title,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isDestructive && 'is-destructive', isPressed && 'is-pressed', isSmall && 'is-small');
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
-      className: classes,
-      ...otherProps,
-      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-        icon: icon,
-        height: 48,
-        width: 48
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
-        noMargin: true,
-        columns: 1,
-        gutter: 8,
-        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-          children: title
-        }), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          children: desc
-        })]
-      }), chevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-        icon: _icons.chevronRight,
-        height: 24,
-        width: 24
-      })]
-    });
-  }
-}
-var _default = exports.default = ButtonCard;

package/dist/cjs/button-card/style.scss

@@ -1,180 +0,0 @@
-/**
- * Button Card
- */
-
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
-.newspack-button-card {
-	background: white;
-	border-radius: 2px;
-	border: 1px solid wp-colors.$gray-300;
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent;
-	cursor: pointer;
-	display: block;
-	margin: 32px 0;
-	padding: 32px;
-	position: relative;
-	text-decoration: none;
-	transition:
-		background-color 125ms ease-in-out,
-		border-color 125ms ease-in-out,
-		box-shadow 125ms ease-in-out;
-
-	&:focus,
-	&.is-pressed {
-		background: white;
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color) !important;
-		outline: none !important;
-		z-index: 1;
-	}
-
-	&.is-pressed:focus-visible {
-		box-shadow:
-			inset 0 0 0 1px var(--wp-admin-theme-color),
-			0 0 0 1px white,
-			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
-	}
-
-	&:active,
-	&:hover {
-		border-color: var(--wp-admin-theme-color);
-		color: var(--wp-admin-theme-color);
-		text-decoration: none;
-		z-index: 1;
-
-		.newspack-grid h3,
-		p {
-			color: inherit;
-		}
-	}
-
-	.newspack-grid h3,
-	p {
-		transition: color 125ms ease-in-out;
-	}
-
-	.newspack-grid h3 {
-		color: wp-colors.$gray-900;
-	}
-
-	p {
-		color: wp-colors.$gray-700;
-	}
-
-	// Grouped
-
-	&.grouped {
-		border-radius: 0;
-
-		& + &:not(.br--top) {
-			margin-top: -33px;
-		}
-
-		&.br--bottom {
-			border-bottom-left-radius: 2px;
-			border-bottom-right-radius: 2px;
-		}
-
-		&.br--top {
-			border-top-left-radius: 2px;
-			border-top-right-radius: 2px;
-		}
-	}
-
-	// Chevron & Icon
-
-	&.has-chevron,
-	&.has-icon {
-		align-items: center;
-		display: grid;
-		grid-gap: 16px;
-		grid-template-columns: auto 24px;
-
-		&:active,
-		&:hover {
-			svg {
-				fill: currentcolor;
-			}
-		}
-
-		svg {
-			fill: var(--wp-admin-theme-color);
-			transition: fill 125ms ease-in-out;
-		}
-	}
-
-	&.has-icon {
-		grid-template-columns: 48px auto;
-
-		&.has-chevron {
-			grid-template-columns: 48px auto 24px;
-		}
-	}
-
-	// Is Small
-
-	&.is-small {
-		padding: 16px;
-
-		&.has-chevron,
-		&.has-icon {
-			svg {
-				height: 24px;
-				width: 24px;
-			}
-		}
-
-		&.has-icon {
-			grid-template-columns: 24px auto;
-
-			&.has-chevron {
-				grid-template-columns: 24px auto 24px;
-			}
-		}
-
-		h3 {
-			font-size: 1em;
-			line-height: 1.5;
-		}
-
-		p {
-			font-size: 12px;
-			line-height: 1.4;
-		}
-	}
-
-	// Is Destructive
-
-	&.is-destructive {
-		.title {
-			color: wp-colors.$alert-red;
-		}
-
-		&.has-chevron,
-		&.has-icon {
-			svg {
-				fill: wp-colors.$alert-red;
-			}
-		}
-
-		&:focus,
-		&.is-pressed {
-			border-color: wp-colors.$alert-red;
-			box-shadow: inset 0 0 0 1px wp-colors.$alert-red !important;
-		}
-
-		&.is-pressed:focus-visible {
-			box-shadow:
-				inset 0 0 0 1px wp-colors.$alert-red,
-				0 0 0 1px white,
-				0 0 0 var(--wp-admin-border-width-focus) wp-colors.$alert-red !important;
-		}
-
-		&:active,
-		&:hover {
-			background-color: wp-colors.$gray-100;
-			border-color: wp-colors.$alert-red;
-		}
-	}
-}

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

@@ -1,64 +0,0 @@
-/**
- * Button Card
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Grid } from '../';
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class ButtonCard extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      chevron,
-      className,
-      desc,
-      grouped,
-      icon,
-      isDestructive,
-      isPressed,
-      isSmall,
-      title,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isDestructive && 'is-destructive', isPressed && 'is-pressed', isSmall && 'is-small');
-    return /*#__PURE__*/_jsxs("a", {
-      className: classes,
-      ...otherProps,
-      children: [icon && /*#__PURE__*/_jsx(Icon, {
-        icon: icon,
-        height: 48,
-        width: 48
-      }), /*#__PURE__*/_jsxs(Grid, {
-        noMargin: true,
-        columns: 1,
-        gutter: 8,
-        children: [title && /*#__PURE__*/_jsx("h3", {
-          children: title
-        }), desc && /*#__PURE__*/_jsx("p", {
-          children: desc
-        })]
-      }), chevron && /*#__PURE__*/_jsx(Icon, {
-        icon: chevronRight,
-        height: 24,
-        width: 24
-      })]
-    });
-  }
-}
-export default ButtonCard;

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

@@ -1,180 +0,0 @@
-/**
- * Button Card
- */
-
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
-.newspack-button-card {
-	background: white;
-	border-radius: 2px;
-	border: 1px solid wp-colors.$gray-300;
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent;
-	cursor: pointer;
-	display: block;
-	margin: 32px 0;
-	padding: 32px;
-	position: relative;
-	text-decoration: none;
-	transition:
-		background-color 125ms ease-in-out,
-		border-color 125ms ease-in-out,
-		box-shadow 125ms ease-in-out;
-
-	&:focus,
-	&.is-pressed {
-		background: white;
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color) !important;
-		outline: none !important;
-		z-index: 1;
-	}
-
-	&.is-pressed:focus-visible {
-		box-shadow:
-			inset 0 0 0 1px var(--wp-admin-theme-color),
-			0 0 0 1px white,
-			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
-	}
-
-	&:active,
-	&:hover {
-		border-color: var(--wp-admin-theme-color);
-		color: var(--wp-admin-theme-color);
-		text-decoration: none;
-		z-index: 1;
-
-		.newspack-grid h3,
-		p {
-			color: inherit;
-		}
-	}
-
-	.newspack-grid h3,
-	p {
-		transition: color 125ms ease-in-out;
-	}
-
-	.newspack-grid h3 {
-		color: wp-colors.$gray-900;
-	}
-
-	p {
-		color: wp-colors.$gray-700;
-	}
-
-	// Grouped
-
-	&.grouped {
-		border-radius: 0;
-
-		& + &:not(.br--top) {
-			margin-top: -33px;
-		}
-
-		&.br--bottom {
-			border-bottom-left-radius: 2px;
-			border-bottom-right-radius: 2px;
-		}
-
-		&.br--top {
-			border-top-left-radius: 2px;
-			border-top-right-radius: 2px;
-		}
-	}
-
-	// Chevron & Icon
-
-	&.has-chevron,
-	&.has-icon {
-		align-items: center;
-		display: grid;
-		grid-gap: 16px;
-		grid-template-columns: auto 24px;
-
-		&:active,
-		&:hover {
-			svg {
-				fill: currentcolor;
-			}
-		}
-
-		svg {
-			fill: var(--wp-admin-theme-color);
-			transition: fill 125ms ease-in-out;
-		}
-	}
-
-	&.has-icon {
-		grid-template-columns: 48px auto;
-
-		&.has-chevron {
-			grid-template-columns: 48px auto 24px;
-		}
-	}
-
-	// Is Small
-
-	&.is-small {
-		padding: 16px;
-
-		&.has-chevron,
-		&.has-icon {
-			svg {
-				height: 24px;
-				width: 24px;
-			}
-		}
-
-		&.has-icon {
-			grid-template-columns: 24px auto;
-
-			&.has-chevron {
-				grid-template-columns: 24px auto 24px;
-			}
-		}
-
-		h3 {
-			font-size: 1em;
-			line-height: 1.5;
-		}
-
-		p {
-			font-size: 12px;
-			line-height: 1.4;
-		}
-	}
-
-	// Is Destructive
-
-	&.is-destructive {
-		.title {
-			color: wp-colors.$alert-red;
-		}
-
-		&.has-chevron,
-		&.has-icon {
-			svg {
-				fill: wp-colors.$alert-red;
-			}
-		}
-
-		&:focus,
-		&.is-pressed {
-			border-color: wp-colors.$alert-red;
-			box-shadow: inset 0 0 0 1px wp-colors.$alert-red !important;
-		}
-
-		&.is-pressed:focus-visible {
-			box-shadow:
-				inset 0 0 0 1px wp-colors.$alert-red,
-				0 0 0 1px white,
-				0 0 0 var(--wp-admin-border-width-focus) wp-colors.$alert-red !important;
-		}
-
-		&:active,
-		&:hover {
-			background-color: wp-colors.$gray-100;
-			border-color: wp-colors.$alert-red;
-		}
-	}
-}

package/src/button-card/index.js

@@ -1,52 +0,0 @@
-/**
- * Button Card
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Grid } from '../';
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-class ButtonCard extends Component {
-	/**
-	 * Render
-	 */
-	render() {
-		const { chevron, className, desc, grouped, icon, isDestructive, isPressed, isSmall, title, ...otherProps } = this.props;
-		const classes = classnames(
-			'newspack-button-card',
-			className,
-			chevron && 'has-chevron',
-			grouped && 'grouped',
-			icon && 'has-icon',
-			isDestructive && 'is-destructive',
-			isPressed && 'is-pressed',
-			isSmall && 'is-small'
-		);
-
-		return (
-			<a className={ classes } { ...otherProps }>
-				{ icon && <Icon icon={ icon } height={ 48 } width={ 48 } /> }
-				<Grid noMargin columns={ 1 } gutter={ 8 }>
-					{ title && <h3>{ title }</h3> }
-					{ desc && <p>{ desc }</p> }
-				</Grid>
-				{ chevron && <Icon icon={ chevronRight } height={ 24 } width={ 24 } /> }
-			</a>
-		);
-	}
-}
-
-export default ButtonCard;