Primitives: Add types (#21482)

package.json

@@ -89,6 +89,7 @@
 		"@storybook/addon-viewport": "5.3.2",
 		"@storybook/react": "5.3.2",
 		"@testing-library/react": "10.0.2",
+		"@types/classnames": "2.2.10",
 		"@types/lodash": "4.14.149",
 		"@types/prettier": "1.19.0",
 		"@types/qs": "6.9.1",

packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -53,9 +53,9 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             type="button"
           />
           <svg
-            aria-hidden="true"
+            aria-hidden={true}
             fill="#000000"
-            focusable="false"
+            focusable={false}
             height={24}
             role="img"
             viewBox="0 0 24 24"

packages/components/src/color-palette/test/__snapshots__/index.js.snap

@@ -367,9 +367,9 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <svg
-                aria-hidden="true"
+                aria-hidden={true}
                 fill="#000000"
-                focusable="false"
+                focusable={false}
                 height={24}
                 role="img"
                 viewBox="0 0 24 24"

packages/components/src/color-picker/test/__snapshots__/index.js.snap

@@ -155,8 +155,8 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
           type="button"
         >
           <svg
-            aria-hidden="true"
-            focusable="false"
+            aria-hidden={true}
+            focusable={false}
             height={24}
             role="img"
             viewBox="0 0 24 24"
@@ -329,8 +329,8 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
           type="button"
         >
           <svg
-            aria-hidden="true"
-            focusable="false"
+            aria-hidden={true}
+            focusable={false}
             height={24}
             role="img"
             viewBox="0 0 24 24"
@@ -503,8 +503,8 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
           type="button"
         >
           <svg
-            aria-hidden="true"
-            focusable="false"
+            aria-hidden={true}
+            focusable={false}
             height={24}
             role="img"
             viewBox="0 0 24 24"
@@ -677,8 +677,8 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
           type="button"
         >
           <svg
-            aria-hidden="true"
-            focusable="false"
+            aria-hidden={true}
+            focusable={false}
             height={24}
             role="img"
             viewBox="0 0 24 24"
@@ -851,8 +851,8 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
           type="button"
         >
           <svg
-            aria-hidden="true"
-            focusable="false"
+            aria-hidden={true}
+            focusable={false}
             height={24}
             role="img"
             viewBox="0 0 24 24"
@@ -1025,8 +1025,8 @@ exports[`ColorPicker should render color picker 1`] = `
           type="button"
         >
           <svg
-            aria-hidden="true"
-            focusable="false"
+            aria-hidden={true}
+            focusable={false}
             height={24}
             role="img"
             viewBox="0 0 24 24"

packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap

@@ -99,8 +99,8 @@ exports[`MoreMenu should match snapshot 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <svg
-                    aria-hidden="true"
-                    focusable="false"
+                    aria-hidden={true}
+                    focusable={false}
                     height={24}
                     role="img"
                     viewBox="0 0 24 24"

packages/edit-post/src/components/header/plugin-more-menu-item/test/__snapshots__/index.js.snap

@@ -22,9 +22,9 @@ exports[`PluginMoreMenuItem renders menu item as button properly 1`] = `
       type="button"
     >
       <svg
-        aria-hidden="true"
+        aria-hidden={true}
         className="components-menu-items__item-icon"
-        focusable="false"
+        focusable={false}
         height={24}
         role="img"
         viewBox="0 0 24 24"

packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap

@@ -22,9 +22,9 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
           value="1"
         />
         <svg
-          aria-hidden="true"
+          aria-hidden={true}
           className="components-checkbox-control__checked"
-          focusable="false"
+          focusable={false}
           height={24}
           role="img"
           viewBox="0 0 24 24"
@@ -80,9 +80,9 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
           value="1"
         />
         <svg
-          aria-hidden="true"
+          aria-hidden={true}
           className="components-checkbox-control__checked"
-          focusable="false"
+          focusable={false}
           height={24}
           role="img"
           viewBox="0 0 24 24"

packages/primitives/CHANGELOG.md

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

packages/primitives/package.json

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

packages/primitives/src/svg/index.js

@@ -8,26 +8,91 @@ import classnames from 'classnames';
  */
 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 */
+/* eslint-enable jsdoc/valid-types */
+
+/**
+ * @param {import('react').ComponentPropsWithoutRef<'circle'>} props
+ *
+ * @return {JSX.Element} Circle component
+ */
 export const Circle = ( props ) => createElement( 'circle', props );
+
+/**
+ * @param {import('react').ComponentPropsWithoutRef<'g'>} props
+ *
+ * @return {JSX.Element} G component
+ */
 export const G = ( props ) => createElement( 'g', props );
+
+/**
+ * @param {import('react').ComponentPropsWithoutRef<'path'>} props
+ *
+ * @return {JSX.Element} Path component
+ */
 export const Path = ( props ) => createElement( 'path', props );
+
+/**
+ * @param {import('react').ComponentPropsWithoutRef<'polygon'>} props
+ *
+ * @return {JSX.Element} Polygon component
+ */
 export const Polygon = ( props ) => createElement( 'polygon', props );
+
+/**
+ * @param {import('react').ComponentPropsWithoutRef<'rect'>} props
+ *
+ * @return {JSX.Element} Rect component
+ */
 export const Rect = ( props ) => createElement( 'rect', props );
+
+/**
+ * @param {import('react').ComponentPropsWithoutRef<'defs'>} props
+ *
+ * @return {JSX.Element} Defs component
+ */
 export const Defs = ( props ) => createElement( 'defs', props );
+
+/**
+ * @param {import('react').ComponentPropsWithoutRef<'radialGradient'>} props
+ *
+ * @return {JSX.Element} RadialGradient component
+ */
 export const RadialGradient = ( props ) =>
 	createElement( 'radialGradient', props );
+
+/**
+ * @param {import('react').ComponentPropsWithoutRef<'linearGradient'>} props
+ *
+ * @return {JSX.Element} LinearGradient component
+ */
 export const LinearGradient = ( props ) =>
 	createElement( 'linearGradient', props );
+
+/**
+ * @param {import('react').ComponentPropsWithoutRef<'stop'>} props
+ *
+ * @return {JSX.Element} Stop component
+ */
 export const Stop = ( props ) => createElement( 'stop', props );
 
+/**
+ *
+ * @param {SVGProps} props isPressed indicates whether the SVG should appear as pressed.
+ *                         Other props will be passed through to svg component.
+ *
+ * @return {JSX.Element} Stop component
+ */
 export const SVG = ( { className, isPressed, ...props } ) => {
 	const appliedProps = {
 		...props,
 		className:
 			classnames( className, { 'is-pressed': isPressed } ) || undefined,
 		role: 'img',
-		'aria-hidden': 'true',
-		focusable: 'false',
+		'aria-hidden': true,
+		focusable: false,
 	};
 
 	// Disable reason: We need to have a way to render HTML tag for web.

packages/primitives/tsconfig.json

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