feat(separator): update defaults

Author: thomasguillot

packages/components/src/separator/README.md

@@ -1,16 +1,16 @@
 # Separator
 
-Horizontal rule component with alignment, variant, and margin options. Defaults: `alignment` is `full-width`, `variant` is `tertiary`.
+Horizontal rule component with alignment, variant, and margin options.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `alignment` | `'full-width'` \| `'none'` | `'full-width'` | `full-width` breaks out of the container to span the viewport; `none` stays within the container. |
+| `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` | `'primary'` \| `'secondary'` \| `'tertiary'` | `'tertiary'` | Line color: `primary` uses the admin theme color (`--wp-admin-theme-color`); `secondary` uses `$gray-300`; `tertiary` uses `$gray-100` (lightest). |
+| `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
 
@@ -19,7 +19,7 @@ import { Separator } from '@newspack/components';
 
 <Separator />
 
-<Separator alignment="none" variant="primary" />
+<Separator alignment="full-width" variant="primary" />
 
-<Separator marginBottom={48} marginTop={32} variant="secondary" />
+<Separator marginBottom={ 48 } marginTop={ 32 } variant="secondary" />
 ```

packages/components/src/separator/index.js

@@ -12,7 +12,7 @@ import './style.scss';
  */
 import classNames from 'classnames';
 
-const Separator = ( { alignment = 'full-width', className, marginBottom = 64, marginTop = 64, variant = 'tertiary', ...otherProps } ) => {
+const Separator = ( { alignment = 'none', className = undefined, marginBottom = 64, marginTop = 64, variant = 'default', ...otherProps } ) => {
 	const classes = classNames(
 		'newspack-separator',
 		className,

packages/components/src/separator/style.scss

@@ -33,12 +33,16 @@
 
 	// 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-300;
+		background-color: wp-colors.$gray-900;
 	}
 
 	&--variant-tertiary {

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

@@ -100,7 +100,7 @@ const NRHSettings = () => {
 					{ __( 'Save Settings' ) }
 				</Button>
 			</div>
-			<Separator />
+			<Separator alignment="full-width" variant="tertiary" />
 		</WizardsSection>
 	);
 };

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

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

src/wizards/componentsDemo/index.js

@@ -123,7 +123,7 @@ class ComponentsDemo extends Component {
 							selectedItems={ selectedPostForAutocompleteWithSuggestions }
 						/>
 
-						<Separator />
+						<Separator marginTop={ 32 } marginBottom={ 32 } />
 
 						<h2>{ __( 'Autocomplete with Suggestions (multi-select)', 'newspack-plugin' ) }</h2>
 						<AutocompleteWithSuggestions
@@ -154,7 +154,7 @@ class ComponentsDemo extends Component {
 							selectedItems={ selectedPostForAutocompleteWithLatestPosts }
 						/>
 
-						<Separator />
+						<Separator marginTop={ 32 } marginBottom={ 32 } />
 
 						<h2>{ __( 'Autocomplete with Latest Posts (multi-select)', 'newspack-plugin' ) }</h2>
 						<AutocompleteWithLatestPosts
@@ -613,6 +613,7 @@ class ComponentsDemo extends Component {
 								<Button>{ __( 'Default', 'newspack-plugin' ) }</Button>
 								<Button isLink>{ __( 'isLink', 'newspack-plugin' ) }</Button>
 							</Card>
+							<Separator variant="tertiary" />
 							<p>
 								<strong>{ __( 'Disabled', 'newspack-plugin' ) }</strong>
 							</p>
@@ -631,6 +632,7 @@ class ComponentsDemo extends Component {
 									{ __( 'isLink', 'newspack-plugin' ) }
 								</Button>
 							</Card>
+							<Separator variant="tertiary" />
 							<p>
 								<strong>{ __( 'Small', 'newspack-plugin' ) }</strong>
 							</p>

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

@@ -36,7 +36,7 @@ function Dashboard() {
 					<>
 						<BrandHeader />
 						<SiteStatuses />
-						<Separator alignment="none" />
+						<Separator variant="tertiary" />
 						<QuickActions />
 					</>
 				) }

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

@@ -38,7 +38,7 @@ export default [
 			return dashSectionsKeys.map( sectionKey => {
 				return (
 					<Fragment key={ sectionKey }>
-						<Separator alignment="none" />
+						<Separator 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

@@ -153,7 +153,7 @@ const Upsert = ( {
 						</Button>
 					</Card>
 				</Grid>
-				<Separator />
+				<Separator 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' ) }