docs(PPDSC-2325): improve tracking in playground section

site/components/playground/index.tsx

@@ -1,6 +1,11 @@
 /* eslint-disable react/destructuring-assignment */
 import React, {useState} from 'react';
-import {styled, getColorFromTheme, deepMerge} from 'newskit';
+import {
+  styled,
+  getColorFromTheme,
+  deepMerge,
+  InstrumentationProvider,
+} from 'newskit';
 import {LegacyBlock, LegacyBlockProps} from '../legacy-block';
 import {MultiChoiceKnob} from './knobs/multichoice-knob';
 import {InputKnob} from './knobs/input-knob';
@@ -173,41 +178,43 @@ export const Playground: React.FC<
   );
 
   return (
-    <PlaygroundContainer>
-      <LegacyBlock
-        data-testid="playground-element"
-        {...commonBlockProps}
-        minHeight="280px"
-        backgroundColor="interfaceBackground"
-        padding="sizing070"
-      >
-        <ErrorBoundary key={errorBoundaryKey}>
-          <Component {...state} />
-        </ErrorBoundary>
-      </LegacyBlock>
-      {componentOptions && (
-        <Selector options={componentOptions} onChange={setComponentIndex}>
-          Component
-        </Selector>
-      )}
-      <LegacyBlock
-        {...commonBlockProps}
-        alignItems="left"
-        padding="sizing070"
-        overflow="scroll"
-        maxHeight="450px"
-        borderRadius="0px 0px 0px 0px"
-      >
-        {knobs.map(renderKnob(state, updateState))}
-      </LegacyBlock>
-      <LegacyBlock {...commonBlockProps} borderRadius="0px 0px 12px 12px">
-        <CodeExample
-          componentName={selectedCompName}
-          source={source.code || source.error || ''}
-          error={Boolean(source.error)}
-        />
-      </LegacyBlock>
-    </PlaygroundContainer>
+    <InstrumentationProvider context={{area: 'playground'}}>
+      <PlaygroundContainer>
+        <LegacyBlock
+          data-testid="playground-element"
+          {...commonBlockProps}
+          minHeight="280px"
+          backgroundColor="interfaceBackground"
+          padding="sizing070"
+        >
+          <ErrorBoundary key={errorBoundaryKey}>
+            <Component {...state} />
+          </ErrorBoundary>
+        </LegacyBlock>
+        {componentOptions && (
+          <Selector options={componentOptions} onChange={setComponentIndex}>
+            Component
+          </Selector>
+        )}
+        <LegacyBlock
+          {...commonBlockProps}
+          alignItems="left"
+          padding="sizing070"
+          overflow="scroll"
+          maxHeight="450px"
+          borderRadius="0px 0px 0px 0px"
+        >
+          {knobs.map(renderKnob(state, updateState))}
+        </LegacyBlock>
+        <LegacyBlock {...commonBlockProps} borderRadius="0px 0px 12px 12px">
+          <CodeExample
+            componentName={selectedCompName}
+            source={source.code || source.error || ''}
+            error={Boolean(source.error)}
+          />
+        </LegacyBlock>
+      </PlaygroundContainer>
+    </InstrumentationProvider>
   );
 };
 

site/components/playground/knobs/input-knob.tsx

@@ -5,6 +5,8 @@ import {
   getSizingFromTheme,
   getColorFromTheme,
   getSSRId,
+  useInstrumentation,
+  EventTrigger,
 } from 'newskit';
 import {KnobContainer} from './common';
 
@@ -73,6 +75,9 @@ export const InputKnob: React.FC<InputKnobProps> = ({
   );
   const inputType = typeof value === 'number' ? 'number' : 'text';
   const v = inputType === 'text' && !value ? '' : value;
+
+  const {fireEvent} = useInstrumentation();
+
   return (
     <KnobContainer>
       {LabelForInput}
@@ -82,6 +87,16 @@ export const InputKnob: React.FC<InputKnobProps> = ({
         name={label}
         value={v}
         data-testid={`${TEST_ID_PREFIX}-${lowercaseLabel}`}
+        onBlur={({target}) => {
+          fireEvent({
+            trigger: EventTrigger.Change,
+            originator: 'input-knob',
+            context: {
+              prop: label,
+              value: target.value,
+            },
+          });
+        }}
         onChange={({target}) => {
           onChange(inputType === 'number' ? +target.value : target.value);
         }}

site/components/playground/knobs/multichoice-knob.tsx

@@ -7,6 +7,8 @@ import {
   getColorFromTheme,
   MQ,
   getSSRId,
+  EventTrigger,
+  useInstrumentation,
 } from 'newskit';
 import {LegacyBlock} from '../../legacy-block';
 import {KnobContainer, StyledTitle} from './common';
@@ -113,32 +115,45 @@ export const MultiChoiceKnob: React.FC<MultiChoiceKnobProps> = ({
   options,
   onChange,
   value: selectedValue,
-}) => (
-  <KnobContainer>
-    <LegacyBlock display="inline" position="relative">
-      <StyledFieldset>
-        <StyledLegend>{name}</StyledLegend>
-        {options.map(({value, label}) => {
-          const checked = setChecked(selectedValue, value);
-
-          const id = `multichoice-knob-${getSSRId()}-${label}-${value}`;
-          return (
-            <React.Fragment key={id}>
-              <StyledInput
-                type="radio"
-                id={id}
-                data-testid={value}
-                name={getSSRId() + name}
-                defaultChecked={checked}
-                onClick={() => onChange && onChange(value)}
-              />
-              <StyledLabel htmlFor={id}>{label}</StyledLabel>
-            </React.Fragment>
-          );
-        })}
-      </StyledFieldset>
-    </LegacyBlock>
-  </KnobContainer>
-);
+}) => {
+  const {fireEvent} = useInstrumentation();
+  return (
+    <KnobContainer>
+      <LegacyBlock display="inline" position="relative">
+        <StyledFieldset>
+          <StyledLegend>{name}</StyledLegend>
+          {options.map(({value, label}) => {
+            const checked = setChecked(selectedValue, value);
+
+            const id = `multichoice-knob-${getSSRId()}-${label}-${value}`;
+            return (
+              <React.Fragment key={id}>
+                <StyledInput
+                  type="radio"
+                  id={id}
+                  data-testid={value}
+                  name={getSSRId() + name}
+                  defaultChecked={checked}
+                  onClick={() => {
+                    if (onChange) onChange(value);
+                    fireEvent({
+                      trigger: EventTrigger.Change,
+                      originator: 'multichoice-knob',
+                      context: {
+                        prop: name,
+                        value: label,
+                      },
+                    });
+                  }}
+                />
+                <StyledLabel htmlFor={id}>{label}</StyledLabel>
+              </React.Fragment>
+            );
+          })}
+        </StyledFieldset>
+      </LegacyBlock>
+    </KnobContainer>
+  );
+};
 
 export default MultiChoiceKnob;

site/pages/_document.tsx

@@ -54,7 +54,8 @@ export default class MyDocument extends Document {
               `
               p div,
               p p,
-              p ul {
+              p ul,
+              a a {
                     outline: 7px solid red;
                     outline-offset: 7px;
               }`}