newspack-components 2.2.0 → 3.0.0-alpha.1

package/dist/esm/wizard/index.js

@@ -20,9 +20,7 @@ import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
 import { useWizardData } from './store/utils';
 import WizardError from './components/WizardError';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 registerStore();
 const {
   HashRouter,
@@ -30,17 +28,16 @@ const {
   Route,
   Switch
 } = Router;
-const Wizard = _ref => {
-  let {
-    sections = [],
-    apiSlug,
-    headerText,
-    subHeaderText,
-    hasSimpleFooter,
-    className,
-    renderAboveSections,
-    requiredPlugins = []
-  } = _ref;
+const Wizard = ({
+  sections = [],
+  apiSlug,
+  headerText,
+  subHeaderText,
+  hasSimpleFooter,
+  className,
+  renderAboveSections,
+  requiredPlugins = []
+}) => {
   const isLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isLoading());
   const isQuietLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isQuietLoading());
 
@@ -50,17 +47,14 @@ const Wizard = _ref => {
   let displayedSections = sections.filter(section => !section.isHidden);
   const [pluginRequirementsSatisfied, setPluginRequirementsSatisfied] = useState(requiredPlugins.length === 0);
   if (!pluginRequirementsSatisfied) {
-    headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack') : __('Required plugin', 'newspack');
+    headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin');
     displayedSections = [{
       path: '/',
       render: () => _jsx(PluginInstaller, {
         plugins: requiredPlugins,
-        onStatus: _ref2 => {
-          let {
-            complete
-          } = _ref2;
-          return setPluginRequirementsSatisfied(complete);
-        }
+        onStatus: ({
+          complete
+        }) => setPluginRequirementsSatisfied(complete)
       })
     }];
   }
@@ -82,7 +76,7 @@ const Wizard = _ref => {
               children: [_jsx(Button, {
                 isLink: true,
                 href: newspack_urls.dashboard,
-                label: __('Return to Dashboard', 'newspack'),
+                label: __('Return to Dashboard', 'newspack-plugin'),
                 showTooltip: true,
                 icon: category,
                 iconSize: 36,

package/dist/esm/wizard/store/index.js

@@ -25,12 +25,10 @@ const DEFAULT_STATE = {
  * unless the state was cloned first.
  */
 const clone = objectToClone => JSON.parse(JSON.stringify(objectToClone));
-const reducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_STATE;
-  let {
-    type,
-    payload = {}
-  } = arguments.length > 1 ? arguments[1] : undefined;
+const reducer = (state = DEFAULT_STATE, {
+  type,
+  payload = {}
+}) => {
   switch (type) {
     case 'START_LOADING_DATA':
       if (payload.isQuietLoading) {
@@ -71,36 +69,38 @@ const actions = {
   updateWizardSettings: createAction('UPDATE_WIZARD_SETTINGS'),
   setError: createAction('SET_ERROR'),
   // Async actions. These will not show up in Redux devtools.
-  saveWizardSettings(_ref) {
-    let {
-      slug,
-      section = '',
-      payloadPath = false,
-      updatePayload = null
-    } = _ref;
-    return function* () {
-      // Optionally data can be updated before saving - an immediate update case
-      // (without an explicit "save" action).
-      if (updatePayload) {
-        yield actions.updateWizardSettings({
-          slug,
-          ...updatePayload
-        });
-      }
-      const wizardState = select(WIZARD_STORE_NAMESPACE).getWizardAPIData(slug);
-      const updatedData = yield actions.fetchFromAPI({
-        path: `/newspack/v1/wizard/${slug}/${section}`,
-        method: 'POST',
-        data: payloadPath ? get(wizardState, payloadPath) : wizardState,
-        isQuietFetch: true
+  *saveWizardSettings({
+    slug,
+    section = '',
+    payloadPath = false,
+    auxData = {},
+    updatePayload = null
+  }) {
+    // Optionally data can be updated before saving - an immediate update case
+    // (without an explicit "save" action).
+    if (updatePayload) {
+      yield actions.updateWizardSettings({
+        slug,
+        ...updatePayload
       });
-      if (!isEmpty(updatedData) && !updatedData.error) {
-        return actions.setAPIDataForWizard({
-          slug,
-          data: updatedData
-        });
-      }
-    }();
+    }
+    const wizardState = select(WIZARD_STORE_NAMESPACE).getWizardAPIData(slug);
+    const data = payloadPath ? get(wizardState, payloadPath) : wizardState;
+    const updatedData = yield actions.fetchFromAPI({
+      path: `/newspack/v1/wizard/${slug}/${section}`,
+      method: 'POST',
+      data: {
+        ...data,
+        ...auxData
+      },
+      isQuietFetch: true
+    });
+    if (!isEmpty(updatedData) && !updatedData.error) {
+      return actions.setAPIDataForWizard({
+        slug,
+        data: updatedData
+      });
+    }
   },
   *wizardApiFetch(fetchConfig) {
     // Just a proxy to fetchFromAPI, but it has to be a generator.

package/dist/esm/wizard/store/utils.js

@@ -11,7 +11,4 @@ export const createAction = type => payload => ({
   type,
   payload
 });
-export const useWizardData = function (wizardName) {
-  let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;
-};
+export const useWizardData = (wizardName, defaultValue = {}) => useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "2.2.0",
+	"version": "3.0.0-alpha.1",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -23,22 +23,21 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@wordpress/base-styles": "^4.0.0",
-		"@wordpress/components": "^23.6.0",
-		"@wordpress/element": "^5.5.0",
-		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^9.11.0",
+		"@wordpress/base-styles": "^5.1.0",
+		"@wordpress/components": "^28.1.0",
+		"@wordpress/element": "^6.1.0",
+		"@wordpress/i18n": "^5.1.0",
+		"@wordpress/icons": "^10.1.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
-		"moment-range": "^3.1.1",
 		"qs": "^6.10.1",
-		"react-daterange-picker": "^2.0.1",
 		"react-router-dom": "^5.3.0"
 	},
 	"devDependencies": {
 		"@automattic/calypso-build": "^10.0.0",
 		"@babel/cli": "^7.15.0",
 		"@babel/core": "^7.15.0",
+		"@types/wordpress__components": "^23.0.11",
 		"recursive-copy": "^2.0.13"
 	},
 	"babel": {

package/shared/js/button-props.js

@@ -1,7 +1,9 @@
 /**
  * Internal dependencies
  */
-import { isFunction, isString, isObject } from 'lodash';
+import isFunction from 'lodash/isFunction';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
 
 /**
  * Creates button props based on an action

package/shared/scss/_colors.scss

@@ -1,3 +1,4 @@
+// HEX
 $primary-000: #f5fdff;
 $primary-050: #d6f6ff;
 $primary-100: #b4e4ff;
@@ -10,3 +11,17 @@ $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/shared/scss/_mixins.scss

@@ -0,0 +1,12 @@
+@mixin visuallyHidden {
+	border: 0;
+	clip: rect( 1px, 1px, 1px, 1px );
+	clip-path: inset( 50% );
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+}

package/src/autocomplete-tokenfield/index.js

@@ -57,6 +57,26 @@ class AutocompleteTokenField extends Component {
 		}
 	}
 
+	/**
+	 * When the component updates, fetch information about the tokens so we can populate
+	 * the tokens with the correct labels.
+	 */
+	componentDidUpdate( prevProps ) {
+		const { tokens, fetchSavedInfo } = this.props;
+
+		if ( tokens !== prevProps.tokens && this.isFetchingInfoOnLoad() ) {
+			fetchSavedInfo( tokens ).then( results => {
+				const { validValues } = this.state;
+
+				results.forEach( suggestion => {
+					validValues[ suggestion.value ] = suggestion.label;
+				} );
+
+				this.setState( { validValues, loading: false } );
+			} );
+		}
+	}
+
 	/**
 	 * Clean up any unfinished autocomplete api call requests.
 	 */
@@ -99,7 +119,9 @@ class AutocompleteTokenField extends Component {
 			return labels.reduce( ( acc, label ) => {
 				Object.keys( validValues ).forEach( key => {
 					if ( validValues[ key ] === label ) {
-						acc.push( { value: key, label } );
+						// Preserve numeric or string type of values. Object.keys will convert numbers to strings.
+						const value = isNaN( parseInt( key ) ) ? key.toString() : parseInt( key );
+						acc.push( { value, label } );
 					}
 				} );
 
@@ -108,7 +130,9 @@ class AutocompleteTokenField extends Component {
 		}
 
 		return labels.map( label =>
-			Object.keys( validValues ).find( key => validValues[ key ] === label )
+			Object.keys( validValues )
+				.map( key => ( isNaN( parseInt( key ) ) ? key.toString() : parseInt( key ) ) )
+				.find( key => validValues[ key ] === label )
 		);
 	}
 
@@ -134,16 +158,16 @@ class AutocompleteTokenField extends Component {
 						return;
 					}
 
+					const { validValues } = this.state;
 					const currentSuggestions = [ ...suggestions ];
-					const currentValidValues = {};
 
 					suggestions.forEach( suggestion => {
-						currentValidValues[ suggestion.value ] = suggestion.label;
+						validValues[ suggestion.value ] = suggestion.label;
 					} );
 
 					this.setState( {
 						suggestions: currentSuggestions,
-						validValues: currentValidValues,
+						validValues,
 						loading: false,
 					} );
 				} )
@@ -183,20 +207,29 @@ class AutocompleteTokenField extends Component {
 	 * Render.
 	 */
 	render() {
-		const { help, label = '', maxLength } = this.props;
+		const { help, label = '', placeholder = '', maxLength } = this.props;
 		const { suggestions, loading } = this.state;
 
+		const classNames = [ 'newspack-autocomplete-tokenfield__input-container' ];
+
+		if ( label ) {
+			classNames.push( 'has-label' );
+		}
+
 		return (
 			<div className="newspack-autocomplete-tokenfield">
-				<FormTokenField
-					value={ this.getTokens() }
-					suggestions={ suggestions.map( suggestion => suggestion.label ) }
-					onChange={ tokens => this.handleOnChange( tokens ) }
-					onInputChange={ input => this.debouncedUpdateSuggestions( input ) }
-					label={ label }
-					maxLength={ maxLength }
-				/>
-				{ loading && <Spinner /> }
+				<div className={ classNames.join( ' ' ) }>
+					<FormTokenField
+						value={ this.getTokens() }
+						suggestions={ suggestions.map( suggestion => suggestion.label ) }
+						onChange={ tokens => this.handleOnChange( tokens ) }
+						onInputChange={ input => this.debouncedUpdateSuggestions( input ) }
+						label={ label }
+						maxLength={ maxLength }
+						placeholder={ placeholder }
+					/>
+					{ loading && <Spinner /> }
+				</div>
 				{ help && <p className="newspack-autocomplete-tokenfield__help">{ help }</p> }
 			</div>
 		);

package/src/autocomplete-tokenfield/style.scss

@@ -5,13 +5,19 @@
 @use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-autocomplete-tokenfield {
-	position: relative;
-
 	.components-spinner {
-		margin: 8px;
+		margin: 0;
 		position: absolute;
-		right: 0;
-		top: calc( 1.4em + 8px );
+		right: 8px;
+		top: 8px;
+	}
+
+	&__input-container {
+		position: relative;
+
+		&.has-label .components-spinner {
+			top: 32px;
+		}
 	}
 
 	/* Workaround for hard-coded help text in FormTokenField. */

package/src/autocomplete-with-suggestions/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { Button, CheckboxControl, SelectControl, Spinner } from '@wordpress/components';
+import { Button, CheckboxControl, SelectControl } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useState } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -17,16 +17,16 @@ import './style.scss';
 const AutocompleteWithSuggestions = ( {
 	fetchSavedPosts = false, // If passed, will use this function to fetch saved data.
 	fetchSuggestions = false, // If passed, will use this function to fetch suggestions data.
-	help = __( 'Begin typing search term, click autocomplete result to select.', 'newspack' ),
+	help = __( 'Begin typing search term, click autocomplete result to select.', 'newspack-plugin' ),
 	hideHelp = false, // If true, all help text will be hidden.
-	label = __( 'Search', 'newspack' ),
+	label = __( 'Search', 'newspack-plugin' ),
 	maxItemsToSuggest = 0, // If passed, will be used to determine "load more" state. Necessary if you want "load more" functionality when using a custom `fetchSuggestions` function.
 	multiSelect = false, // If true, component can select multiple values at once.
 	onChange = false, // Function to call when selections change.
 	onPostTypeChange = false, // Funciton to call when the post type selector is changed.
 	postTypes = [ { slug: 'post', label: 'Post' } ], // If passed, will render a selector to change the post type queried for suggestions.
-	postTypeLabel = __( 'item', 'newspack' ), // String to describe the data being shown.
-	postTypeLabelPlural = __( 'items', 'newspack' ), // Plural string to describe the data being shown.
+	postTypeLabel = __( 'item', 'newspack-plugin' ), // String to describe the data being shown.
+	postTypeLabelPlural = __( 'items', 'newspack-plugin' ), // Plural string to describe the data being shown.
 	selectedItems = [], // Array of saved items.
 	selectedPost = 0, // Legacy prop when single-select was the only option.
 	suggestionsToFetch = 10, // Number of suggestions to fetch per query.
@@ -96,7 +96,7 @@ const AutocompleteWithSuggestions = ( {
 
 				return posts.map( post => ( {
 					value: parseInt( post.id ),
-					label: decodeEntities( post.title ) || __( '(no title)', 'newspack' ),
+					label: decodeEntities( post.title ) || __( '(no title)', 'newspack-plugin' ),
 				} ) );
 		  };
 
@@ -130,7 +130,7 @@ const AutocompleteWithSuggestions = ( {
 				return posts.reduce( ( acc, post ) => {
 					acc.push( {
 						value: parseInt( post.id ),
-						label: decodeEntities( post?.title.rendered ) || __( '(no title)', 'newspack' ),
+						label: decodeEntities( post?.title.rendered ) || __( '(no title)', 'newspack-plugin' ),
 					} );
 
 					return acc;
@@ -177,21 +177,21 @@ const AutocompleteWithSuggestions = ( {
 		const selectedMessage = multiSelect
 			? sprintf(
 					// Translators: %1: the length of selections. %2: the selection leabel.
-					__( '%1$s %2$s selected', 'newspack' ),
+					__( '%1$s %2$s selected', 'newspack-plugin' ),
 					selections.length,
 					selections.length > 1 ? postTypeLabelPlural : postTypeLabel
 			  )
 			: // Translators: %s: The label for the selection.
-			  sprintf( __( 'Selected %s', 'newspack' ), postTypeLabel );
+			  sprintf( __( 'Selected %s', 'newspack-plugin' ), postTypeLabel );
 
 		return (
 			<div className="newspack-autocomplete-with-suggestions__selected-items">
 				<p className="newspack-autocomplete-with-suggestions__label">
 					{ selectedMessage }
-					{ 1 < selections.length && _x( ' – ', 'separator character', 'newspack' ) }
+					{ 1 < selections.length && _x( ' – ', 'separator character', 'newspack-plugin' ) }
 					{ 1 < selections.length && (
 						<Button onClick={ () => onChange( [] ) } isLink isDestructive>
-							{ __( 'Clear all', 'newspack' ) }
+							{ __( 'Clear all', 'newspack-plugin' ) }
 						</Button>
 					) }
 				</p>
@@ -219,7 +219,7 @@ const AutocompleteWithSuggestions = ( {
 			<SelectControl
 				label={ sprintf(
 					// Translators: %s: The name of the type.
-					__( '%s type', 'newspack' ),
+					__( '%s type', 'newspack-plugin' ),
 					postTypeLabel.charAt( 0 ).toUpperCase() + postTypeLabel.slice( 1 )
 				) }
 				value={ postTypeToSearch }
@@ -265,14 +265,6 @@ const AutocompleteWithSuggestions = ( {
 	 * Render a list of suggestions that can be clicked to select instead of searching by title.
 	 */
 	const renderSuggestions = () => {
-		if ( isLoading ) {
-			return (
-				<div className="newspack-autocomplete-with-suggestions__suggestions-spinner">
-					<Spinner />
-				</div>
-			);
-		}
-
 		if ( 0 === suggestions.length ) {
 			return null;
 		}
@@ -287,7 +279,7 @@ const AutocompleteWithSuggestions = ( {
 					<p className="newspack-autocomplete-with-suggestions__label">
 						{
 							/* Translators: %s: the name of a post type. */ sprintf(
-								__( 'Or, select a recent %s:', 'newspack' ),
+								__( 'Or, select a recent %s:', 'newspack-plugin' ),
 								postTypeLabel
 							)
 						}
@@ -301,7 +293,9 @@ const AutocompleteWithSuggestions = ( {
 							isSecondary
 							onClick={ () => setIsLoadingMore( true ) }
 						>
-							{ isLoadingMore ? __( 'Loading…', 'newspack' ) : __( 'Load more', 'newspack' ) }
+							{ isLoadingMore
+								? __( 'Loading…', 'newspack-plugin' )
+								: __( 'Load more', 'newspack-plugin' ) }
 						</Button>
 					) }
 				</div>
@@ -319,6 +313,7 @@ const AutocompleteWithSuggestions = ( {
 				fetchSuggestions={ async search => handleFetchSuggestions( search, 0, postTypeToSearch ) }
 				fetchSavedInfo={ postIds => handleFetchSaved( postIds ) }
 				label={ label }
+				loading={ isLoading }
 				help={ ! hideHelp && help }
 				returnFullObjects
 			/>

package/src/autocomplete-with-suggestions/style.scss

@@ -15,13 +15,6 @@
 			margin-top: 16px;
 		}
 	}
-
-	.components-spinner {
-		margin: 8px;
-		right: 0;
-		top: calc( 1.4em + 8px );
-	}
-
 	.components-select-control__input {
 		max-width: none;
 	}
@@ -119,8 +112,7 @@
 		border-radius: 2px;
 		border: 1px solid wp-colors.$gray-700;
 		max-height: 178px;
-		overflow-x: visible;
-		overflow-y: auto;
+		overflow: visible auto;
 		padding: 8px 8px 0;
 
 		.components-button {

package/src/button/{index.js → index.tsx}

@@ -16,25 +16,32 @@ import './style.scss';
 
 const { useHistory } = Router;
 
-const Button = ( { href, onClick, ...otherProps } ) => {
+type OriginalButtonProps = typeof BaseComponent.defaultProps;
+type Props = OriginalButtonProps & {
+	href?: string;
+	onClick?: () => void;
+};
+
+const Button = ( { href, onClick, ...otherProps }: Props ) => {
 	const history = useHistory();
 	const [ isAwaitingOnClick, setIsAwaitingOnClick ] = useState( false );
 
 	// If both onClick and href are present, await the onClick action an then redirect.
 	if ( href && onClick ) {
-		otherProps.onClick = async () => {
+		( otherProps as Props ).onClick = async () => {
 			setIsAwaitingOnClick( true );
 			await onClick();
 			setIsAwaitingOnClick( false );
-			history.push( href.replace( '#', '' ) );
+			history.push( ( href || '' ).replace( '#', '' ) );
 		};
 	} else {
-		otherProps.href = href;
-		otherProps.onClick = onClick;
+		( otherProps as Props ).href = href;
+		( otherProps as Props ).onClick = onClick;
 	}
 	if ( isAwaitingOnClick ) {
 		otherProps.disabled = true;
 	}
+	// @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
 	return <BaseComponent { ...otherProps } />;
 };
 

package/src/consts.js

@@ -1,3 +1 @@
-export const NEWSPACK_SITE_URL = 'https://newspack.com';
-export const NEWSPACK_SUPPORT_URL = `${ NEWSPACK_SITE_URL }/support`;
 export const HANDOFF_KEY = 'newspack_wizard_handoff_message';

package/src/footer/index.js

@@ -32,43 +32,43 @@ const Footer = ( { simple } ) => {
 			external: true,
 		},
 		{
-			label: __( 'About', 'newspack' ),
+			label: __( 'About', 'newspack-plugin' ),
 			url: 'https://newspack.com/',
 			external: true,
 		},
 		{
-			label: __( 'Documentation', 'newspack' ),
+			label: __( 'Documentation', 'newspack-plugin' ),
 			url: support,
 			external: true,
 		},
 	];
 	if ( componentsDemo ) {
 		footerElements.push( {
-			label: __( 'Components Demo', 'newspack' ),
+			label: __( 'Components Demo', 'newspack-plugin' ),
 			url: componentsDemo,
 		} );
 	}
 	if ( setupWizard ) {
 		footerElements.push( {
-			label: __( 'Setup Wizard', 'newspack' ),
+			label: __( 'Setup Wizard', 'newspack-plugin' ),
 			url: setupWizard,
 		} );
 	}
 	if ( resetUrl ) {
 		footerElements.push( {
-			label: __( 'Reset Newspack', 'newspack' ),
+			label: __( 'Reset Newspack', 'newspack-plugin' ),
 			url: resetUrl,
 		} );
 	}
 	if ( removeStarterContent ) {
 		footerElements.push( {
-			label: __( 'Remove Starter Content', 'newspack' ),
+			label: __( 'Remove Starter Content', 'newspack-plugin' ),
 			url: removeStarterContent,
 		} );
 	}
 	if ( supportEmail ) {
 		footerElements.push( {
-			label: __( 'Contact Support', 'newspack' ),
+			label: __( 'Contact Support', 'newspack-plugin' ),
 			url: `mailto:${ supportEmail }`,
 		} );
 	}

package/src/grid/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * Grid
+ */
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+const Grid = ( {
+	className = '',
+	columns = 2,
+	gutter = 32,
+	noMargin = false,
+	rowGap = 0,
+	...otherProps
+} ) => {
+	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 } />;
+};
+
+export default Grid;