feat(newspack-components): add divider component

packages/components/src/action-card/style.scss

@@ -488,7 +488,7 @@
 		}
 	}
 
-	hr {
+	hr:not(.newspack-divider) {
 		background: wp-colors.$gray-100;
 		margin: 0;
 	}

packages/components/src/card/style.scss

@@ -133,11 +133,11 @@
 
 	// Thematic Break
 
-	hr {
+	hr:not(.newspack-divider) {
 		background: wp-colors.$gray-300;
 		border: 0;
 		height: 1px;
-		margin: 48px 0;
+		margin: 32px 0;
 
 		@media screen and ( min-width: 744px ) {
 			margin: 64px 0;

packages/components/src/divider/README.md

@@ -0,0 +1,25 @@
+# Divider
+
+Horizontal rule component with alignment, variant, and margin options.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `alignment` | `'full-width'` \| `'none'` | `'none'` | `full-width` breaks out of the container to span the viewport; `none` stays within the container. |
+| `className` | `string` | — | Additional CSS class. |
+| `marginBottom` | `number` \| `string` | `64` | Bottom margin (e.g. `64` or `"2rem"`). Capped at 32px on viewports < 783px. |
+| `marginTop` | `number` \| `string` | `64` | Top margin (e.g. `64` or `"2rem"`). Capped at 32px on viewports < 783px. |
+| `variant` | `'default'` \| `'primary'` \| `'secondary'` \| `'tertiary'` | `'default'` | Line color: `default` uses `$gray-300`; `primary` uses the admin theme color (`--wp-admin-theme-color`); `secondary` uses `$gray-900`; `tertiary` uses `$gray-100`. |
+
+## Usage
+
+```jsx
+import { Divider } from 'newspack-components';
+
+<Divider />
+
+<Divider alignment="full-width" variant="primary" />
+
+<Divider marginBottom={ 48 } marginTop={ 32 } variant="secondary" />
+```

packages/components/src/divider/index.js

@@ -0,0 +1,31 @@
+/**
+ * Divider
+ */
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+const Divider = ( { alignment = 'none', className = undefined, marginBottom = 64, marginTop = 64, variant = 'default', ...otherProps } ) => {
+	const classes = classNames(
+		'newspack-divider',
+		className,
+		alignment && `newspack-divider--alignment-${ alignment }`,
+		variant && `newspack-divider--variant-${ variant }`
+	);
+
+	const style = {
+		'--divider-margin-bottom': typeof marginBottom === 'number' ? `${ marginBottom }px` : marginBottom,
+		'--divider-margin-top': typeof marginTop === 'number' ? `${ marginTop }px` : marginTop,
+	};
+
+	return <hr className={ classes } style={ style } { ...otherProps } />;
+};
+
+export default Divider;

packages/components/src/divider/style.scss

@@ -0,0 +1,51 @@
+/**
+ * Divider
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-divider {
+	background: transparent;
+	border: 0;
+	display: block;
+	height: 1px;
+	margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
+	margin-left: 0;
+	margin-right: 0;
+	margin-top: min(32px, var(--divider-margin-top, 64px));
+	padding: 0;
+
+	@media screen and (min-width: 783px) {
+		margin-bottom: var(--divider-margin-bottom, 64px);
+		margin-top: var(--divider-margin-top, 64px);
+	}
+
+	// Alignment
+
+	&--alignment-full-width {
+		margin-left: calc(-50vw + 50%);
+		width: 100vw;
+	}
+
+	&--alignment-none {
+		width: 100%;
+	}
+
+	// Variant
+
+	&--variant-default {
+		background-color: wp-colors.$gray-300;
+	}
+
+	&--variant-primary {
+		background-color: var(--wp-admin-theme-color);
+	}
+
+	&--variant-secondary {
+		background-color: wp-colors.$gray-900;
+	}
+
+	&--variant-tertiary {
+		background-color: wp-colors.$gray-100;
+	}
+}

packages/components/src/index.js

@@ -10,6 +10,7 @@ export { default as Card } from './card';
 export { default as CategoryAutocomplete } from './category-autocomplete';
 export { default as ColorPicker } from './color-picker';
 export { default as CustomSelectControl } from './custom-select-control';
+export { default as Divider } from './divider';
 export { default as FormTokenField } from './form-token-field';
 export { default as Footer } from './footer';
 export { default as Handoff } from './handoff';

packages/components/src/with-wizard-screen/style.scss

@@ -141,11 +141,11 @@
 
 		// Thematic Break
 
-		hr {
+		hr:not(.newspack-divider) {
 			background: wp-colors.$gray-300;
 			border: 0;
 			height: 1px;
-			margin: 48px 0;
+			margin: 32px 0;
 
 			@media screen and ( min-width: 744px ) {
 				margin: 64px 0;

packages/components/src/with-wizard/style.scss

@@ -134,7 +134,7 @@ svg {
 			0 96px 0 0 wp-colors.$gray-700;
 		height: 24px;
 		margin: 68px auto 0;
-		max-width: 1040px;
+		max-width: 1006px;
 		width: calc(100% - ( 32px * 2 ));
 
 		@media screen and ( min-width: 744px ) {
@@ -250,7 +250,7 @@ svg {
 			0 96px 0 0 wp-colors.$gray-700;
 		height: 24px;
 		margin: 0 auto;
-		max-width: 1040px;
+		max-width: 1006px;
 		width: 100%;
 
 		@media screen and ( min-width: 744px ) {

src/admin/style.scss

@@ -3,7 +3,7 @@
 
 :root {
 	/* Sections */
-	--newspack-wizard-section-width: 1040px;
+	--newspack-wizard-section-width: 1006px;
 	--newspack-wizard-section-space: 24px;
 	--newspack-wizard-section-child-space: 16px;
 
@@ -193,7 +193,7 @@ h1 {
 
 .newspack-wizard__sections {
 	margin: 0 auto;
-	padding: 2.5rem 1rem 0;
+	padding: calc(var(--newspack-wizard-section-space) * 2) var(--newspack-wizard-section-space) 0;
 	max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
 	&__description {
 		margin-bottom: 2rem;

src/wizards/audience/components/nrh-settings/index.js

@@ -8,7 +8,7 @@ import { useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { AutocompleteWithSuggestions, Button, Grid, TextControl } from '../../../../../packages/components/src';
+import { AutocompleteWithSuggestions, Button, Divider, Grid, TextControl } from '../../../../../packages/components/src';
 import { useWizardData } from '../../../../../packages/components/src/wizard/store/utils';
 import { WIZARD_STORE_NAMESPACE } from '../../../../../packages/components/src/wizard/store';
 import WizardsSection from '../../../wizards-section';
@@ -100,7 +100,7 @@ const NRHSettings = () => {
 					{ __( 'Save Settings' ) }
 				</Button>
 			</div>
-			<hr />
+			<Divider alignment="full-width" variant="tertiary" />
 		</WizardsSection>
 	);
 };

src/wizards/audience/views/setup/setup.js

@@ -16,6 +16,7 @@ import {
 	Card,
 	Grid,
 	Notice,
+	Divider,
 	PluginInstaller,
 	SectionHeader,
 	TextControl,
@@ -124,7 +125,7 @@ export default withWizardScreen(
 					) ) }
 				{ config.enabled && (
 					<Card noBorder>
-						<hr />
+						<Divider alignment="full-width" variant="tertiary" />
 						<ActionCard
 							title={ __( 'Present newsletter signup after checkout and registration', 'newspack-plugin' ) }
 							description={ __(
@@ -170,7 +171,7 @@ export default withWizardScreen(
 							toggleOnChange={ value => updateConfig( 'oauth_redirect_to_ras', value ) }
 						/>
 
-						<hr />
+						<Divider alignment="full-width" variant="tertiary" />
 
 						<SectionHeader
 							title={ __( 'Email Service Provider (ESP) Advanced Settings', 'newspack-plugin' ) }
@@ -313,7 +314,7 @@ export default withWizardScreen(
 				) }
 				{ newspackAudience.can_use_salesforce && (
 					<Card noBorder>
-						<hr />
+						<Divider alignment="full-width" variant="tertiary" />
 						<Salesforce />
 					</Card>
 				) }

src/wizards/componentsDemo/index.js

@@ -38,6 +38,7 @@ import {
 	PluginToggle,
 	ProgressBar,
 	SelectControl,
+	Divider,
 	Waiting,
 	WebPreview,
 } from '../../../packages/components/src';
@@ -122,7 +123,7 @@ class ComponentsDemo extends Component {
 							selectedItems={ selectedPostForAutocompleteWithSuggestions }
 						/>
 
-						<hr />
+						<Divider marginTop={ 32 } marginBottom={ 32 } />
 
 						<h2>{ __( 'Autocomplete with Suggestions (multi-select)', 'newspack-plugin' ) }</h2>
 						<AutocompleteWithSuggestions
@@ -153,7 +154,7 @@ class ComponentsDemo extends Component {
 							selectedItems={ selectedPostForAutocompleteWithLatestPosts }
 						/>
 
-						<hr />
+						<Divider marginTop={ 32 } marginBottom={ 32 } />
 
 						<h2>{ __( 'Autocomplete with Latest Posts (multi-select)', 'newspack-plugin' ) }</h2>
 						<AutocompleteWithLatestPosts
@@ -612,6 +613,7 @@ class ComponentsDemo extends Component {
 								<Button>{ __( 'Default', 'newspack-plugin' ) }</Button>
 								<Button isLink>{ __( 'isLink', 'newspack-plugin' ) }</Button>
 							</Card>
+							<Divider variant="tertiary" />
 							<p>
 								<strong>{ __( 'Disabled', 'newspack-plugin' ) }</strong>
 							</p>
@@ -630,6 +632,7 @@ class ComponentsDemo extends Component {
 									{ __( 'isLink', 'newspack-plugin' ) }
 								</Button>
 							</Card>
+							<Divider variant="tertiary" />
 							<p>
 								<strong>{ __( 'Small', 'newspack-plugin' ) }</strong>
 							</p>

src/wizards/newspack/views/dashboard/index.tsx

@@ -18,7 +18,7 @@ import sections from './sections';
 import BrandHeader from '../../components/brand-header';
 import QuickActions from '../../components/quick-actions';
 import SiteStatuses from '../../components/site-statuses';
-import { GlobalNotices, Notice, Wizard } from '../../../../../packages/components/src';
+import { Divider, GlobalNotices, Notice, Wizard } from '../../../../../packages/components/src';
 
 const {
 	newspack_aux_data: { is_debug_mode: isDebugMode = false },
@@ -36,7 +36,7 @@ function Dashboard() {
 					<>
 						<BrandHeader />
 						<SiteStatuses />
-						<hr />
+						<Divider variant="tertiary" />
 						<QuickActions />
 					</>
 				) }

src/wizards/newspack/views/dashboard/sections.tsx

@@ -16,7 +16,7 @@ import { Icon } from '@wordpress/icons';
  */
 /* eslint import/namespace: ['error', { allowComputed: true }] */
 import { icons } from '../../components/icons';
-import { Grid, Card } from '../../../../../packages/components/src';
+import { Card, Divider, Grid } from '../../../../../packages/components/src';
 
 const {
 	newspackDashboard: { sections: dashSections },
@@ -38,7 +38,7 @@ export default [
 			return dashSectionsKeys.map( sectionKey => {
 				return (
 					<Fragment key={ sectionKey }>
-						<hr />
+						<Divider variant="tertiary" />
 						<div className="newspack-dashboard__section">
 							<h3>{ dashSections[ sectionKey ].title }</h3>
 							<p>{ dashSections[ sectionKey ].desc }</p>

src/wizards/newspack/views/settings/connections/webhooks/modals/upsert.tsx

@@ -14,7 +14,7 @@ import { CheckboxControl as WpCheckboxControl, TextControl } from '@wordpress/co
  */
 import { ENDPOINTS_CACHE_KEY } from '../constants';
 import { WizardApiError } from '../../../../../../errors';
-import { Card, Button, Notice, Modal, Grid } from '../../../../../../../../packages/components/src';
+import { Card, Button, Notice, Modal, Grid, Divider } from '../../../../../../../../packages/components/src';
 import { validateEndpoint, validateUrl } from '../utils';
 
 /**
@@ -153,7 +153,7 @@ const Upsert = ( {
 						</Button>
 					</Card>
 				</Grid>
-				<hr />
+				<Divider alignment="full-width" variant="tertiary" />
 				<TextControl
 					label={ __( 'Label (optional)', 'newspack-plugin' ) }
 					help={ __( 'A label to help you identify this endpoint. It will not be sent to the endpoint.', 'newspack-plugin' ) }