Add (unstable) telemetry support with a hook

UNRELEASED.md

@@ -10,6 +10,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Added unstable API to integrate with Monorail and gather analytics about icon usage ([#2368](https://github.com/Shopify/polaris-react/pull/2368))
+
 ### Bug fixes
 
 ### Documentation

src/components/AppProvider/AppProvider.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {ThemeConfig} from '../../utilities/theme';
+import {MonorailContext, MonorailObject} from '../../utilities/monorail';
 import {ThemeProvider} from '../ThemeProvider';
 import {MediaQueryProvider} from '../MediaQueryProvider';
 import {I18n, I18nContext, TranslationDictionary} from '../../utilities/i18n';
@@ -41,6 +42,7 @@ export interface AppProviderProps extends AppBridgeOptions {
   features?: Features;
   /** Inner content of the application */
   children?: React.ReactNode;
+  UNSTABLE_monorail?: MonorailObject; // eslint-disable-line babel/camelcase
 }
 
 export class AppProvider extends React.Component<AppProviderProps, State> {
@@ -97,8 +99,9 @@ export class AppProvider extends React.Component<AppProviderProps, State> {
     });
   }
 
+  /* eslint-disable babel/camelcase */
   render() {
-    const {theme = {}, features = {}, children} = this.props;
+    const {theme = {}, features = {}, UNSTABLE_monorail, children} = this.props;
     const {intl, appBridge, link} = this.state;
 
     return (
@@ -110,7 +113,9 @@ export class AppProvider extends React.Component<AppProviderProps, State> {
                 <AppBridgeContext.Provider value={appBridge}>
                   <LinkContext.Provider value={link}>
                     <ThemeProvider theme={theme}>
-                      <MediaQueryProvider>{children}</MediaQueryProvider>
+                      <MonorailContext.Provider value={UNSTABLE_monorail}>
+                        <MediaQueryProvider>{children}</MediaQueryProvider>
+                      </MonorailContext.Provider>
                     </ThemeProvider>
                   </LinkContext.Provider>
                 </AppBridgeContext.Provider>
@@ -121,4 +126,5 @@ export class AppProvider extends React.Component<AppProviderProps, State> {
       </FeaturesContext.Provider>
     );
   }
+  /* eslint-enable babel/camelcase */
 }

src/components/Icon/Icon.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
+import {useMonorail} from '../../utilities/monorail';
 import {IconProps} from '../../types';
 
 import styles from './Icon.scss';
@@ -21,6 +22,29 @@ interface Props extends IconProps {}
 
 export function Icon({source, color, backdrop, accessibilityLabel}: Props) {
   const i18n = useI18n();
+  const unstableMonorail = useMonorail();
+
+  /* eslint-disable babel/camelcase */
+  useEffect(() => {
+    if (unstableMonorail) {
+      let loggedSource;
+      if (typeof source === 'function') {
+        loggedSource = source.name;
+      } else if (source === 'placeholder') {
+        loggedSource = source;
+      } else {
+        loggedSource = 'custom icon string';
+      }
+
+      unstableMonorail.produce('polaris_icons_usage/1.0', {
+        icon_source: loggedSource,
+        color,
+        backdrop,
+        accessibility_label: accessibilityLabel,
+      });
+    }
+  }, [accessibilityLabel, backdrop, color, source, unstableMonorail]);
+  /* eslint-enable babel/camelcase */
 
   if (color && backdrop && COLORS_WITH_BACKDROPS.indexOf(color) < 0) {
     // eslint-disable-next-line no-console

src/utilities/monorail/context.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface MonorailObject {
+  produce(schemaId: string, payload: Record<string, any>): boolean;
+}
+
+export const MonorailContext = React.createContext<MonorailObject | undefined>(
+  undefined,
+);

src/utilities/monorail/hooks.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import {MonorailContext} from './context';
+
+export function useMonorail() {
+  return React.useContext(MonorailContext);
+}

src/utilities/monorail/index.ts

@@ -0,0 +1,3 @@
+export {MonorailContext, MonorailObject} from './context';
+
+export {useMonorail} from './hooks';