HorizontalRule component for cross-platform separator block (#14361)

* Port separator block to mobile

* Default style for Hr on native

* Rename Hr primitive to HorizontalRule

* Improved prop handling on HorizontalRule

* Fix HorizontalRule import after renaming

* Add HorizontalRule README

* Add Usage section to HorizontalRule README

* Add Changelog entry for HorizontalRule

* Expand definition of HorizontalRule from MDN documentation

Co-Authored-By: koke <jbernal@gmail.com>

docs/manifest.json

@@ -1133,6 +1133,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/popover/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "HorizontalRule",
+		"slug": "horizontal-rule",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/primitives/horizontal-rule/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Svg",
 		"slug": "svg",

packages/block-library/src/index.native.js

@@ -110,6 +110,7 @@ export const registerCoreBlocks = () => {
 		more,
 		image,
 		nextpage,
+		separator,
 		list,
 	].forEach( ( { metadata, name, settings } ) => {
 		registerBlockType( name, {

packages/block-library/src/separator/edit.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { HorizontalRule } from '@wordpress/components';
+
 export default function SeparatorEdit( { className } ) {
-	return <hr className={ className } />;
+	return <HorizontalRule className={ className } />;
 }

packages/components/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 7.4.0 (Unreleased)
+
+- Added a new `HorizontalRule` component.
+
 ## 7.3.0 (2019-04-16)
 
 ### New Features

packages/components/src/primitives/horizontal-rule/README.md

@@ -0,0 +1,13 @@
+# HorizontalRule
+
+A drop-in replacement for the HTML [hr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr) element that works both on the web and in the mobile apps. It represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
+
+## Usage
+
+```jsx
+import { HorizontalRule } from '@wordpress/components';
+
+const MyHorizontalRule = () => (
+	<HorizontalRule />
+);
+```

packages/components/src/primitives/horizontal-rule/index.js

@@ -0,0 +1 @@
+export const HorizontalRule = 'hr';

packages/components/src/primitives/horizontal-rule/index.native.js

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import Hr from 'react-native-hr';
+
+export const HorizontalRule = ( props ) => {
+	const lineStyle = {
+		backgroundColor: '#555d66',
+		height: 2,
+		...props.lineStyle,
+	};
+
+	return (
+		<Hr { ...props } lineStyle={ lineStyle } />
+	);
+};

packages/components/src/primitives/index.js

@@ -1 +1,2 @@
 export * from './svg';
+export * from './horizontal-rule';