Add WordPress primitives package (#19781)

docs/designers-developers/developers/block-api/block-registration.md

@@ -83,7 +83,7 @@ icon: 'book-alt',
 icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,
 ```
 
-**Note:** Custom SVG icons are automatically wrapped in the [`wp.components.SVG` component](/packages/components/src/primitives/svg/) to add accessibility attributes (`aria-hidden`, `role`, and `focusable`).
+**Note:** Custom SVG icons are automatically wrapped in the [`wp.primitives.SVG` component](/packages/primitives/src/svg/) to add accessibility attributes (`aria-hidden`, `role`, and `focusable`).
 
 An object can also be passed as icon, in this case, icon, as specified above, should be included in the src property.
 

docs/designers-developers/developers/filters/block-filters.md

@@ -420,7 +420,7 @@ To set an SVG icon for the category shown in the previous example, add the follo
 ```js
 ( function() {
 	var el = wp.element.createElement;
-	var SVG = wp.components.SVG;
+	var SVG = wp.primitives.SVG;
 	var circle = el( 'circle', { cx: 10, cy: 10, r: 10, fill: 'red', stroke: 'blue', strokeWidth: '10' } );
 	var svgIcon = el( SVG, { width: 20, height: 20, viewBox: '0 0 20 20'}, circle);
 	wp.blocks.updateCategory( 'my-category', { icon: svgIcon } );

docs/manifest-devhub.json

@@ -881,24 +881,6 @@
 		"markdown_source": "../packages/components/src/popover/README.md",
 		"parent": "components"
 	},
-	{
-		"title": "BlockQuotation",
-		"slug": "block-quotation",
-		"markdown_source": "../packages/components/src/primitives/block-quotation/README.md",
-		"parent": "components"
-	},
-	{
-		"title": "HorizontalRule",
-		"slug": "horizontal-rule",
-		"markdown_source": "../packages/components/src/primitives/horizontal-rule/README.md",
-		"parent": "components"
-	},
-	{
-		"title": "Svg",
-		"slug": "svg",
-		"markdown_source": "../packages/components/src/primitives/svg/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "QueryControls",
 		"slug": "query-controls",
@@ -1427,6 +1409,12 @@
 		"markdown_source": "../packages/postcss-themes/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/primitives",
+		"slug": "packages-primitives",
+		"markdown_source": "../packages/primitives/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/priority-queue",
 		"slug": "packages-priority-queue",

docs/rfc/block-registration.md

@@ -173,7 +173,7 @@ Setting `parent` lets a block require that it is only available when nested with
 
 An icon property should be specified to make it easier to identify a block. These can be any of WordPress' Dashicons (slug serving also as a fallback in non-js contexts).
 
-**Note:** It's also possible to override this property on the client-side with the source of the SVG element. In addition, this property can be defined with JavaScript as an object containing background and foreground colors. This colors will appear with the icon when they are applicable e.g.: in the inserter. Custom SVG icons are automatically wrapped in the [wp.components.SVG](/packages/components/src/primitives/svg/README.md) component to add accessibility attributes (aria-hidden, role, and focusable).
+**Note:** It's also possible to override this property on the client-side with the source of the SVG element. In addition, this property can be defined with JavaScript as an object containing background and foreground colors. This colors will appear with the icon when they are applicable e.g.: in the inserter. Custom SVG icons are automatically wrapped in the [wp.primitives.SVG](/packages/primitives/src/svg/README.md) component to add accessibility attributes (aria-hidden, role, and focusable).
 
 ### Description
 

package.json

@@ -56,6 +56,7 @@
 		"@wordpress/notices": "file:packages/notices",
 		"@wordpress/nux": "file:packages/nux",
 		"@wordpress/plugins": "file:packages/plugins",
+		"@wordpress/primitives": "file:packages/primitives",
 		"@wordpress/priority-queue": "file:packages/priority-queue",
 		"@wordpress/redux-routine": "file:packages/redux-routine",
 		"@wordpress/rich-text": "file:packages/rich-text",

packages/components/package.json

@@ -38,6 +38,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
+		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/warning": "file:../warning",
 		"classnames": "^2.2.5",

packages/components/src/card/styles/card-styles.js

@@ -3,10 +3,14 @@
  */
 import styled from '@emotion/styled';
 
+/**
+ * WordPress dependencies
+ */
+import { HorizontalRule } from '@wordpress/primitives';
+
 /**
  * Internal dependencies
  */
-import { HorizontalRule } from '../../primitives';
 import { color } from '../../utils/colors';
 
 export const styleProps = {

packages/components/src/dashicon/index.js

@@ -9,11 +9,7 @@ OR if you're looking to change now SVGs get output, you'll need to edit strings
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Path, SVG } from '../primitives';
+import { Path, SVG } from '@wordpress/primitives';
 
 export default class Dashicon extends Component {
 	render() {

packages/components/src/dashicon/test/index.js

@@ -3,11 +3,15 @@
  */
 import { shallow } from 'enzyme';
 
+/**
+ * WordPress dependencies
+ */
+import { SVG } from '@wordpress/primitives';
+
 /**
  * Internal dependencies
  */
 import Dashicon from '../';
-import { SVG } from '../../primitives';
 
 describe( 'Dashicon', () => {
 	describe( 'basic rendering', () => {

packages/components/src/focal-point-picker/index.js

@@ -9,13 +9,13 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { withInstanceId, compose } from '@wordpress/compose';
+import { Path, SVG } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
 import withFocusOutside from '../higher-order/with-focus-outside';
-import { Path, SVG } from '../primitives';
 
 const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;

packages/components/src/form-toggle/index.js

@@ -5,9 +5,9 @@ import classnames from 'classnames';
 import { noop } from 'lodash';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { Path, SVG } from '../primitives';
+import { Path, SVG } from '@wordpress/primitives';
 
 function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
 	const wrapperClasses = classnames(

packages/components/src/guide/icons.js

@@ -1,7 +1,7 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { SVG, Path, Circle } from '../primitives/svg';
+import { SVG, Path, Circle } from '@wordpress/primitives';
 
 export const BackButtonIcon = () => (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24">

packages/components/src/icon/index.js

@@ -2,12 +2,12 @@
  * WordPress dependencies
  */
 import { cloneElement, createElement, Component, isValidElement } from '@wordpress/element';
+import { SVG } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
 import Dashicon from '../dashicon';
-import { SVG } from '../primitives';
 
 function Icon( { icon = null, size, ...additionalProps } ) {
 	// Dashicons should be 20x20 by default.

packages/components/src/icon/stories/index.js

@@ -3,11 +3,15 @@
  */
 import { number, text } from '@storybook/addon-knobs';
 
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
 /**
  * Internal dependencies
  */
 import Icon from '../';
-import { SVG, Path } from '../../primitives/svg';
 
 export default { title: 'Components/Icon', component: Icon };
 

packages/components/src/index.js

@@ -1,5 +1,7 @@
+// Primitives
+export { SVG, Path, Circle, Polygon, Rect, G, HorizontalRule, BlockQuotation } from '@wordpress/primitives';
+
 // Components
-export * from './primitives';
 export { default as Animate } from './animate';
 export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';

packages/components/src/index.native.js

@@ -1,5 +1,4 @@
-// Components
-export * from './primitives';
+export { SVG, Path, Circle, Polygon, Rect, G, HorizontalRule, BlockQuotation } from '@wordpress/primitives';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
 export { default as Dashicon } from './dashicon';

packages/components/src/panel/body.js

@@ -7,13 +7,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Component, forwardRef } from '@wordpress/element';
+import { G, Path, SVG } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
 import Button from '../button';
 import Icon from '../icon';
-import { G, Path, SVG } from '../primitives';
 
 export class PanelBody extends Component {
 	constructor( props ) {

packages/primitives/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/primitives/CHANGELOG.md

@@ -0,0 +1,3 @@
+### Master
+
+Initial release.

packages/primitives/README.md

@@ -0,0 +1,27 @@
+# Primitives
+
+Primitives to be used cross-plateform.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/primitives --save
+```
+
+## Usage
+
+```js
+import { SVG, Path } from '@wordpress/primitives';
+
+const myElement = (
+	<SVG width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M4.5 9l5.6-5.7 1.4 1.5L7.3 9l4.2 4.2-1.4 1.5L4.5 9z" />
+	</SVG>
+)
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/primitives/package.json

@@ -0,0 +1,33 @@
+{
+	"name": "@wordpress/primitives",
+	"version": "0.0.1",
+	"description": "WordPress cross-platform primitives.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"mobile",
+		"platform"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/primitives/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/primitives"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "^7.4.4",
+		"@wordpress/element": "file:../element",
+		"classnames": "^2.2.5"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}