AI Client: add AI Client icon components (#32079)

* [not verified] add AI Client package

* [not verified] add icons

* [not verified] add index icons file

* [not verified] export icons

* [not verified] add simple icon Readme file

* [not verified] add icon story

* [not verified] changelog

* [not verified] add ai-client into build list

* [not verified] update story importing path

* add @wordpress/components dep

* add @storybook/react dev dep

* pnpm update

* update pnpm-lock

* fix exporting icons bug

---------

Co-authored-by: sdixon194 <steve.dixon@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/5684981773

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 This is an alpha version! The changes listed here are not final.
 
 ### Added
+- Add AI Client icon components
 - AI Client: Add useAiSuggestions() react custom hook
 
 ### Changed

index.ts

@@ -5,4 +5,7 @@ export { default as askQuestion } from './src/ask-question';
 // Hooks
 export { default as useAiSuggestions } from './src/hooks/use-ai-suggestions';
 
+// Icons
+export * from './src/icons';
+
 export * from './src/index.js';

package.json

@@ -21,7 +21,8 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"jest": "^29.6.1",
+		"@storybook/react": "7.1.0",
+		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.5.0",
 		"typescript": "5.0.4"
 	},
@@ -33,6 +34,7 @@
 		"@automattic/jetpack-shared-extension-utils": "^0.10.9",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@wordpress/api-fetch": "6.34.0",
+		"@wordpress/components": "25.3.0",
 		"@wordpress/data": "9.7.0",
 		"@wordpress/element": "5.14.0",
 		"@wordpress/i18n": "4.37.0",

src/icons/Readme.md

@@ -0,0 +1,22 @@
+# Icons
+
+This library provides you with a selection of icons to use in your Gutenberg applications.
+
+- aiAssistantIcon
+- origamiPlane
+- speakTone
+
+```jsx
+import { Icon } from '@wordpress/components';
+import { aiAssistantIcon } from '@automattic/jetpack-ai-client';
+
+function YourComponent() {
+  // ...
+  return (
+    <div>
+      // Your code here...
+      <Icon icon={ aiAssistantIcon } />
+    </div>
+  );
+}
+```

src/icons/ai-assistant.tsx

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+import React from 'react';
+
+const aiAssistant = (
+	<SVG
+		viewBox="0 0 32 32"
+		width="32"
+		height="32"
+		fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"
+		className="ai-assistant-icon"
+	>
+		<Path
+			className="spark-first"
+			d="M9.33301 5.33325L10.4644 8.20188L13.333 9.33325L10.4644 10.4646L9.33301 13.3333L8.20164 10.4646L5.33301 9.33325L8.20164 8.20188L9.33301 5.33325Z"
+		/>
+		<Path
+			className="spark-second"
+			d="M21.3333 5.33333L22.8418 9.15817L26.6667 10.6667L22.8418 12.1752L21.3333 16L19.8248 12.1752L16 10.6667L19.8248 9.15817L21.3333 5.33333Z"
+		/>
+		<Path
+			className="spark-third"
+			d="M14.6667 13.3333L16.5523 18.1144L21.3333 20L16.5523 21.8856L14.6667 26.6667L12.781 21.8856L8 20L12.781 18.1144L14.6667 13.3333Z"
+		/>
+	</SVG>
+);
+
+export default aiAssistant;

src/icons/index.ts

@@ -0,0 +1,3 @@
+export { default as aiAssistantIcon } from './ai-assistant';
+export { default as origamiPlane } from './origami-plane';
+export { default as speakTone } from './speak-tone';

src/icons/origami-plane.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+import React from 'react';
+
+const origamiPlane = (
+	<SVG
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="currentColor"
+		xmlns="http://www.w3.org/2000/SVG"
+	>
+		<Path d="M13.5142 18.5098C14.1227 19.6569 14.5367 20.5899 14.5367 20.5899L18.7588 3.84402L4.05433 12.901C4.05433 12.901 5.10588 12.9894 6.41062 13.2114C7.97628 13.4777 9.90652 13.9362 10.8219 14.6646C11.7434 15.3979 12.7731 17.1127 13.5142 18.5098ZM14.0468 16.3975C13.8238 16.0255 13.5879 15.6537 13.3445 15.3013C12.8931 14.6478 12.3509 13.9643 11.7559 13.4909C11.1195 12.9844 10.2767 12.6409 9.51316 12.3968C9.11301 12.2689 8.69633 12.1567 8.28231 12.0585L16.4016 7.05758L14.0468 16.3975Z" />
+		<Path d="M18 5L11 14" stroke="currentColor" />
+	</SVG>
+);
+
+export default origamiPlane;

src/icons/speak-tone.tsx

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+import React from 'react';
+
+const speakTone = (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12.5 10C12.5 11.3807 11.3807 12.5 10 12.5C8.61929 12.5 7.5 11.3807 7.5 10C7.5 8.61929 8.61929 7.5 10 7.5C11.3807 7.5 12.5 8.61929 12.5 10ZM14 10C14 12.2091 12.2091 14 10 14C7.79086 14 6 12.2091 6 10C6 7.79086 7.79086 6 10 6C12.2091 6 14 7.79086 14 10ZM16.75 21V19C16.75 17.4812 15.5188 16.25 14 16.25L6 16.25C4.48122 16.25 3.25 17.4812 3.25 19V21H4.75L4.75 19C4.75 18.3096 5.30964 17.75 6 17.75L14 17.75C14.6904 17.75 15.25 18.3096 15.25 19V21H16.75Z"
+			fill="currentColor"
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.976 16.3599C21.2507 14.5642 22.0001 12.3695 22.0001 9.99969C22.0001 7.63128 21.2515 5.43769 19.9782 3.64258L18.754 4.50967C19.8537 6.05996 20.5001 7.95434 20.5001 9.99969C20.5001 12.0464 19.8528 13.9419 18.7519 15.4928L19.976 16.3599ZM17.3357 14.4897C18.2357 13.222 18.7648 11.6727 18.7648 9.99969C18.7648 8.32808 18.2365 6.77984 17.3379 5.51279L16.1137 6.37988C16.8387 7.4021 17.2648 8.65114 17.2648 9.99969C17.2648 11.3496 16.8378 12.5998 16.1116 13.6226L17.3357 14.4897Z"
+			fill="currentColor"
+		/>
+	</SVG>
+);
+
+export default speakTone;

src/icons/stories/index.stories.tsx

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { Icon } from '@wordpress/components';
+import React from 'react';
+/**
+ * Internal dependencies
+ */
+import * as allIcons from '../index';
+import styles from './style.module.scss';
+/**
+ * Types
+ */
+import type { Meta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/AI Client/Icons',
+	component: allIcons,
+	parameters: {},
+} as Meta< typeof allIcons >;
+
+/**
+ * Icons story components.
+ *
+ * @returns {object} - story component
+ */
+function IconsStory() {
+	return (
+		<div className={ styles[ 'icons-container' ] }>
+			{ Object.entries( allIcons ).map( ( [ name, icon ] ) => {
+				return (
+					<div key={ name } className={ styles[ 'icon-container' ] }>
+						<Icon icon={ icon } size={ 32 } />
+						<div className={ styles[ 'icon-name' ] }>{ name }</div>
+					</div>
+				);
+			} ) }
+		</div>
+	);
+}
+
+const Template = args => <IconsStory { ...args } />;
+
+const DefaultArgs = {};
+export const Default = Template.bind( {} );
+Default.args = DefaultArgs;

src/icons/stories/style.module.scss

@@ -0,0 +1,21 @@
+.icons-container {
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 20px;
+	flex-direction: column;
+}
+
+.icon-container {
+	padding: 10px;
+	box-shadow: 0 0 1px inset rgba(0, 0, 0 , 0.5 );
+	background-color: white;
+	border-radius: 5px;
+	margin: 2px;
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+.icon-name {
+	font-size: 14px;
+}