Skip to content

Commit 1391311

Browse files
thomasguillotdkoo
authored and
miguelpeixe
committed
feat(newspack-components): add divider component (#4462)
* feat: add separator component * refactor: use function-type component syntax * feat(separator): update defaults * feat(separator): rename component --------- Co-authored-by: dkoo <derrick.koo@automattic.com>
1 parent 05bb2e2 commit 1391311

File tree

15 files changed

+134
-22
lines changed

15 files changed

+134
-22
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -488,7 +488,7 @@
488488
}
489489
}
490490

491-
hr {
491+
hr:not(.newspack-divider) {
492492
background: wp-colors.$gray-100;
493493
margin: 0;
494494
}

‎packages/components/src/card/style.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,11 +133,11 @@
133133

134134
// Thematic Break
135135

136-
hr {
136+
hr:not(.newspack-divider) {
137137
background: wp-colors.$gray-300;
138138
border: 0;
139139
height: 1px;
140-
margin: 48px 0;
140+
margin: 32px 0;
141141

142142
@media screen and ( min-width: 744px ) {
143143
margin: 64px 0;

‎packages/components/src/divider/README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Divider
2+
3+
Horizontal rule component with alignment, variant, and margin options.
4+
5+
## Props
6+
7+
| Prop | Type | Default | Description |
8+
|------|------|---------|-------------|
9+
| `alignment` | `'full-width'` \| `'none'` | `'none'` | `full-width` breaks out of the container to span the viewport; `none` stays within the container. |
10+
| `className` | `string` | — | Additional CSS class. |
11+
| `marginBottom` | `number` \| `string` | `64` | Bottom margin (e.g. `64` or `"2rem"`). Capped at 32px on viewports &lt; 783px. |
12+
| `marginTop` | `number` \| `string` | `64` | Top margin (e.g. `64` or `"2rem"`). Capped at 32px on viewports &lt; 783px. |
13+
| `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`. |
14+
15+
## Usage
16+
17+
```jsx
18+
import { Divider } from 'newspack-components';
19+
20+
<Divider />
21+
22+
<Divider alignment="full-width" variant="primary" />
23+
24+
<Divider marginBottom={ 48 } marginTop={ 32 } variant="secondary" />
25+
```

‎packages/components/src/divider/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Divider
3+
*/
4+
5+
/**
6+
* Internal dependencies
7+
*/
8+
import './style.scss';
9+
10+
/**
11+
* External dependencies
12+
*/
13+
import classNames from 'classnames';
14+
15+
const Divider = ( { alignment = 'none', className = undefined, marginBottom = 64, marginTop = 64, variant = 'default', ...otherProps } ) => {
16+
const classes = classNames(
17+
'newspack-divider',
18+
className,
19+
alignment && `newspack-divider--alignment-${ alignment }`,
20+
variant && `newspack-divider--variant-${ variant }`
21+
);
22+
23+
const style = {
24+
'--divider-margin-bottom': typeof marginBottom === 'number' ? `${ marginBottom }px` : marginBottom,
25+
'--divider-margin-top': typeof marginTop === 'number' ? `${ marginTop }px` : marginTop,
26+
};
27+
28+
return <hr className={ classes } style={ style } { ...otherProps } />;
29+
};
30+
31+
export default Divider;

‎packages/components/src/divider/style.scss‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* Divider
3+
*/
4+
5+
@use "~@wordpress/base-styles/colors" as wp-colors;
6+
7+
.newspack-divider {
8+
background: transparent;
9+
border: 0;
10+
display: block;
11+
height: 1px;
12+
margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
13+
margin-left: 0;
14+
margin-right: 0;
15+
margin-top: min(32px, var(--divider-margin-top, 64px));
16+
padding: 0;
17+
18+
@media screen and (min-width: 783px) {
19+
margin-bottom: var(--divider-margin-bottom, 64px);
20+
margin-top: var(--divider-margin-top, 64px);
21+
}
22+
23+
// Alignment
24+
25+
&--alignment-full-width {
26+
margin-left: calc(-50vw + 50%);
27+
width: 100vw;
28+
}
29+
30+
&--alignment-none {
31+
width: 100%;
32+
}
33+
34+
// Variant
35+
36+
&--variant-default {
37+
background-color: wp-colors.$gray-300;
38+
}
39+
40+
&--variant-primary {
41+
background-color: var(--wp-admin-theme-color);
42+
}
43+
44+
&--variant-secondary {
45+
background-color: wp-colors.$gray-900;
46+
}
47+
48+
&--variant-tertiary {
49+
background-color: wp-colors.$gray-100;
50+
}
51+
}

‎packages/components/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export { default as Card } from './card';
1010
export { default as CategoryAutocomplete } from './category-autocomplete';
1111
export { default as ColorPicker } from './color-picker';
1212
export { default as CustomSelectControl } from './custom-select-control';
13+
export { default as Divider } from './divider';
1314
export { default as FormTokenField } from './form-token-field';
1415
export { default as Footer } from './footer';
1516
export { default as Handoff } from './handoff';

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,11 +141,11 @@
141141

142142
// Thematic Break
143143

144-
hr {
144+
hr:not(.newspack-divider) {
145145
background: wp-colors.$gray-300;
146146
border: 0;
147147
height: 1px;
148-
margin: 48px 0;
148+
margin: 32px 0;
149149

150150
@media screen and ( min-width: 744px ) {
151151
margin: 64px 0;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ svg {
134134
0 96px 0 0 wp-colors.$gray-700;
135135
height: 24px;
136136
margin: 68px auto 0;
137-
max-width: 1040px;
137+
max-width: 1006px;
138138
width: calc(100% - ( 32px * 2 ));
139139

140140
@media screen and ( min-width: 744px ) {
@@ -250,7 +250,7 @@ svg {
250250
0 96px 0 0 wp-colors.$gray-700;
251251
height: 24px;
252252
margin: 0 auto;
253-
max-width: 1040px;
253+
max-width: 1006px;
254254
width: 100%;
255255

256256
@media screen and ( min-width: 744px ) {

‎src/admin/style.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
:root {
55
/* Sections */
6-
--newspack-wizard-section-width: 1040px;
6+
--newspack-wizard-section-width: 1006px;
77
--newspack-wizard-section-space: 24px;
88
--newspack-wizard-section-child-space: 16px;
99

@@ -193,7 +193,7 @@ h1 {
193193

194194
.newspack-wizard__sections {
195195
margin: 0 auto;
196-
padding: 2.5rem 1rem 0;
196+
padding: calc(var(--newspack-wizard-section-space) * 2) var(--newspack-wizard-section-space) 0;
197197
max-width: calc(calc(var(--newspack-wizard-section-space) * 2) + var(--newspack-wizard-section-width));
198198
&__description {
199199
margin-bottom: 2rem;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useEffect, useState } from '@wordpress/element';
88
/**
99
* Internal dependencies
1010
*/
11-
import { AutocompleteWithSuggestions, Button, Grid, TextControl } from '../../../../../packages/components/src';
11+
import { AutocompleteWithSuggestions, Button, Divider, Grid, TextControl } from '../../../../../packages/components/src';
1212
import { useWizardData } from '../../../../../packages/components/src/wizard/store/utils';
1313
import { WIZARD_STORE_NAMESPACE } from '../../../../../packages/components/src/wizard/store';
1414
import WizardsSection from '../../../wizards-section';
@@ -100,7 +100,7 @@ const NRHSettings = () => {
100100
{ __( 'Save Settings' ) }
101101
</Button>
102102
</div>
103-
<hr />
103+
<Divider alignment="full-width" variant="tertiary" />
104104
</WizardsSection>
105105
);
106106
};

0 commit comments

Comments
 (0)