Icons: Add types (#21487)

Includes a fix to `@wordpress/primitives` to make `SVG`'s `isPressed` prop optional (oversight in #21482).

packages/icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 ## Master
 
+Include TypeScript type declarations ([#21487](https://github.com/WordPress/gutenberg/pull/21487))
+
 ## 1.0.0 (2020-02-04)
 
 Initial release.

packages/icons/package.json

@@ -22,6 +22,7 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "^7.9.2",
 		"@wordpress/element": "../element",

packages/icons/src/icon/index.js

@@ -3,6 +3,20 @@
  */
 import { cloneElement } from '@wordpress/element';
 
+// Disable reason: JSDoc linter doesn't seem to parse the union (`&`) correctly.
+/* eslint-disable jsdoc/valid-types */
+/** @typedef {{icon: JSX.Element, size?: number} & import('react').ComponentPropsWithoutRef<'SVG'>} IconProps */
+/* eslint-enable jsdoc/valid-types */
+
+/**
+ * Return an SVG icon.
+ *
+ * @param {IconProps} props icon is the SVG component to render
+ *                          size is a number specifiying the icon size in pixels
+ *                          Other props will be passed to wrapped SVG component
+ *
+ * @return {JSX.Element}  Icon component
+ */
 function Icon( { icon, size = 24, ...props } ) {
 	return cloneElement( icon, {
 		width: size,

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

@@ -42,7 +42,7 @@ export const _default = () => {
 
 const LibraryExample = () => {
 	const [ filter, setFilter ] = useState( '' );
-	const filteredIcons = omitBy( availableIcons, ( icon, name ) => {
+	const filteredIcons = omitBy( availableIcons, ( _icon, name ) => {
 		return name.indexOf( filter ) === -1;
 	} );
 	return (

packages/icons/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types"
+	},
+	"include": [ "src/**/*" ],
+	"references": [ { "path": "../primitives" } ]
+}

packages/primitives/src/svg/index.js

@@ -10,7 +10,7 @@ import { createElement } from '@wordpress/element';
 
 // Disable reason: JSDoc linter doesn't seem to parse the union (`&`) correctly.
 /* eslint-disable jsdoc/valid-types */
-/** @typedef {{isPressed: boolean} & import('react').ComponentPropsWithoutRef<'svg'>} SVGProps */
+/** @typedef {{isPressed?: boolean} & import('react').ComponentPropsWithoutRef<'svg'>} SVGProps */
 /* eslint-enable jsdoc/valid-types */
 
 /**

tsconfig.json

@@ -10,6 +10,7 @@
 		{ "path": "packages/escape-html" },
 		{ "path": "packages/html-entities" },
 		{ "path": "packages/i18n" },
+		{ "path": "packages/icons" },
 		{ "path": "packages/is-shallow-equal" },
 		{ "path": "packages/prettier-config" },
 		{ "path": "packages/primitives" },