feat: add support for data-analytics- [FC-3152]

.changeset/shaggy-masks-develop.md

@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': minor
+---
+
+feat: add support for data-analytics attribute

packages/blade/src/components/Accordion/Accordion.tsx

@@ -10,6 +10,7 @@ import type { BoxProps } from '~components/Box';
 import { size as sizeTokens } from '~tokens/global';
 import { makeSize } from '~utils';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 
 const MIN_WIDTH: BoxProps['minWidth'] = {
   s: makeSize(sizeTokens[200]),
@@ -71,7 +72,7 @@ const Accordion = ({
   size = 'large',
   maxWidth,
   testID,
-  ...styledProps
+  ...rest
 }: AccordionProps): ReactElement => {
   const [expandedAccordionItemIndex, setExpandedAccordionItemIndex] = useState<number | undefined>(
     defaultExpandedIndex,
@@ -119,7 +120,8 @@ const Accordion = ({
     <AccordionContext.Provider value={accordionContext}>
       <BaseBox
         {...metaAttribute({ name: MetaConstants.Accordion, testID })}
-        {...getStyledProps(styledProps)}
+        {...getStyledProps(rest)}
+        {...makeAnalyticsAttribute(rest)}
       >
         <BaseBox
           {...getVariantStyles(variant)}

packages/blade/src/components/Accordion/AccordionButton.web.tsx

@@ -10,6 +10,7 @@ import { useCollapsible } from '~components/Collapsible/CollapsibleContext';
 import { makeAccessible } from '~utils/makeAccessible';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { throwBladeError } from '~utils/logger';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 
 const _AccordionButton = ({
   index,
@@ -18,6 +19,7 @@ const _AccordionButton = ({
   isDeprecatedAPI,
   header,
   isDisabled,
+  ...rest
 }: AccordionButtonProps): ReactElement => {
   const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();
   const { showNumberPrefix, expandedIndex, size } = useAccordion();
@@ -50,6 +52,7 @@ const _AccordionButton = ({
     <BaseBox
       // a11y guidelines suggest having an apt heading surround a button but heading level is hardcoded here
       {...makeAccessible({ role: 'heading', level: 3 })}
+      {...makeAnalyticsAttribute(rest)}
       width="100%"
     >
       <StyledAccordionButton

packages/blade/src/components/Accordion/AccordionItem.tsx

@@ -11,9 +11,10 @@ import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
 import { isReactNative } from '~utils';
 import { Collapsible } from '~components/Collapsible/Collapsible';
 import { CollapsibleBody } from '~components/Collapsible';
-import type { TestID } from '~utils/types';
+import type { TestID, DataAnalyticsAttribute } from '~utils/types';
 import { getComponentId } from '~utils/isValidAllowedChildren';
 import { throwBladeError } from '~utils/logger';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 
 type AccordionItemProps = {
   /**
@@ -60,7 +61,8 @@ type AccordionItemProps = {
    * instead pass `showNumberPrefix` to root `Accordion`
    */
   _index?: number;
-} & TestID;
+} & TestID &
+  DataAnalyticsAttribute;
 
 const AccordionItem = ({
   title,
@@ -70,6 +72,7 @@ const AccordionItem = ({
   isDisabled,
   _index,
   testID,
+  ...rest
 }: AccordionItemProps): ReactElement => {
   const {
     expandedIndex,
@@ -117,7 +120,10 @@ const AccordionItem = ({
         isDisabled,
       }}
     >
-      <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}>
+      <BaseBox
+        {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}
+        {...makeAnalyticsAttribute(rest)}
+      >
         <Collapsible
           isExpanded={isExpanded}
           defaultIsExpanded={isDefaultExpanded}

packages/blade/src/components/Accordion/AccordionItemBody.tsx

@@ -4,9 +4,10 @@ import BaseBox from '~components/Box/BaseBox';
 import { Text } from '~components/Typography';
 import { isReactNative } from '~utils';
 import { makeAccessible } from '~utils/makeAccessible';
-import type { StringChildrenType } from '~utils/types';
+import type { DataAnalyticsAttribute, StringChildrenType } from '~utils/types';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { MetaConstants, metaAttribute } from '~utils/metaAttribute';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 
 const BLANK_SPACE = ' ';
 
@@ -32,10 +33,11 @@ const descriptionSizeToken = {
 const _AccordionItemBody = ({
   children,
   _description,
+  ...rest
 }: {
   children?: React.ReactNode | StringChildrenType;
   _description?: string;
-}): React.ReactElement => {
+} & DataAnalyticsAttribute): React.ReactElement => {
   const { size } = useAccordion();
 
   const childrenElement =
@@ -75,7 +77,10 @@ const _AccordionItemBody = ({
   );
 
   return (
-    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItemBody })}>
+    <BaseBox
+      {...metaAttribute({ name: MetaConstants.AccordionItemBody })}
+      {...makeAnalyticsAttribute(rest)}
+    >
       {collapsibleBodyContent}
     </BaseBox>
   );

packages/blade/src/components/Accordion/AccordionItemHeader.tsx

@@ -6,7 +6,9 @@ import { Text } from '~components/Typography';
 import BaseBox from '~components/Box/BaseBox';
 import { CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
+import type { DataAnalyticsAttribute } from '~utils/types';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 
 const _AccordionItemHeader = ({
   title,
@@ -15,10 +17,12 @@ const _AccordionItemHeader = ({
   children,
   trailing,
   titleSuffix,
+  ...rest
 }: Pick<
   BaseHeaderProps,
   'title' | 'subtitle' | 'leading' | 'children' | 'trailing' | 'titleSuffix'
->): React.ReactElement => {
+> &
+  DataAnalyticsAttribute): React.ReactElement => {
   const { size, showNumberPrefix } = useAccordion();
   const { index, isDisabled } = useAccordionItemIndex();
 
@@ -52,6 +56,7 @@ const _AccordionItemHeader = ({
             size="large"
           />
         }
+        {...makeAnalyticsAttribute(rest)}
       >
         {children}
       </BaseHeader>

packages/blade/src/components/Accordion/__tests__/Accordion.web.test.tsx

@@ -366,4 +366,38 @@ describe('Deprecated <Accordion />', () => {
     expect(getByRole('button', { name: button2 })).toHaveAttribute('aria-expanded', 'false');
     expect(getAllByRole('region', { hidden: true })[1]).toHaveAttribute('aria-hidden', 'true');
   });
+  it('should render data attributes with correct values', () => {
+    const { container } = renderWithTheme(
+      <Accordion data-analytics-accordion-name="razorpay-faq">
+        <AccordionItem data-analytics-accordion-item="first">
+          <AccordionItemHeader
+            data-analytics-accordion-header="setup route query"
+            title="How can I setup Route?"
+          />
+          <AccordionItemBody data-analytics-item-body="router query answer">
+            You can use Razorpay Route from the Dashboard or using APIs to transfer money to
+            customers. You may also check our docs for detailed instructions.
+          </AccordionItemBody>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    // Check presence and values of data attributes
+    expect(container.querySelector('[data-analytics-accordion-header]')).toHaveAttribute(
+      'data-analytics-accordion-header',
+      'setup route query',
+    );
+    expect(container.querySelector('[data-analytics-item-body]')).toHaveAttribute(
+      'data-analytics-item-body',
+      'router query answer',
+    );
+    expect(container.querySelector('[data-analytics-accordion-item]')).toHaveAttribute(
+      'data-analytics-accordion-item',
+      'first',
+    );
+    expect(container.querySelector('[data-analytics-accordion-name]')).toHaveAttribute(
+      'data-analytics-accordion-name',
+      'razorpay-faq',
+    );
+  });
 });

packages/blade/src/components/Accordion/types.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { BoxProps } from '~components/Box';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import type { IconComponent } from '~components/Icons';
-import type { TestID } from '~utils/types';
+import type { DataAnalyticsAttribute, TestID } from '~utils/types';
 
 type AccordionVariantType = 'filled' | 'transparent';
 
@@ -17,7 +17,7 @@ type AccordionButtonProps = {
   isDeprecatedAPI: boolean;
   header: React.ReactNode;
   isDisabled?: boolean;
-};
+} & DataAnalyticsAttribute;
 
 type AccordionProps = {
   /**

packages/blade/src/components/ActionList/ActionList.tsx

@@ -9,16 +9,18 @@ import { useDropdown } from '~components/Dropdown/useDropdown';
 import { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';
 import { makeAccessible } from '~utils/makeAccessible';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
-import type { TestID } from '~utils/types';
+import type { DataAnalyticsAttribute, TestID } from '~utils/types';
 import BaseBox from '~components/Box/BaseBox';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 
 type ActionListProps = {
   children: React.ReactNode[];
-} & TestID;
+} & TestID &
+  DataAnalyticsAttribute;
 
-const _ActionList = ({ children, testID }: ActionListProps): React.ReactElement => {
+const _ActionList = ({ children, testID, ...rest }: ActionListProps): React.ReactElement => {
   const {
     setOptions,
     actionListItemRef,
@@ -68,6 +70,7 @@ const _ActionList = ({ children, testID }: ActionListProps): React.ReactElement
       sectionData={sectionData}
       isMultiSelectable={isMultiSelectable}
       ref={actionListItemRef as any}
+      {...makeAnalyticsAttribute(rest)}
     />
   ) : (
     <BaseBox
@@ -78,6 +81,7 @@ const _ActionList = ({ children, testID }: ActionListProps): React.ReactElement
         labelledBy: `${dropdownBaseId}-label`,
       })}
       {...metaAttribute({ name: MetaConstants.ActionList, testID })}
+      {...makeAnalyticsAttribute(rest)}
     >
       <ActionListBox
         isInBottomSheet={isInBottomSheet}

packages/blade/src/components/ActionList/ActionListBox.web.tsx

@@ -5,17 +5,19 @@ import type { SectionData } from './actionListUtils';
 import { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { makeAccessible } from '~utils/makeAccessible';
+import type { DataAnalyticsAttribute } from '~utils/types';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 
 type ActionListBoxProps = {
   childrenWithId?: React.ReactNode[] | null;
   sectionData: SectionData;
   actionListItemWrapperRole: 'listbox' | 'menu' | undefined;
   isMultiSelectable: boolean;
   isInBottomSheet: boolean;
-};
+} & DataAnalyticsAttribute;
 
 const _ActionListBox = React.forwardRef<HTMLDivElement, ActionListBoxProps>(
-  ({ childrenWithId, actionListItemWrapperRole, isMultiSelectable }, ref) => {
+  ({ childrenWithId, actionListItemWrapperRole, isMultiSelectable, ...rest }, ref) => {
     const { isInBottomSheet } = useBottomSheetContext();
 
     return (
@@ -26,6 +28,7 @@ const _ActionListBox = React.forwardRef<HTMLDivElement, ActionListBoxProps>(
           role: actionListItemWrapperRole,
           multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined,
         })}
+        {...makeAnalyticsAttribute(rest)}
       >
         {childrenWithId}
       </StyledListBoxWrapper>

packages/blade/src/components/ActionList/ActionListItem.tsx

@@ -14,7 +14,7 @@ import { Text } from '~components/Typography';
 import type { Platform } from '~utils';
 import { castWebType, isReactNative } from '~utils';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
-import type { StringChildrenType, TestID } from '~utils/types';
+import type { DataAnalyticsAttribute, StringChildrenType, TestID } from '~utils/types';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { makeSize } from '~utils/makeSize';
 import { makeAccessible } from '~utils/makeAccessible';
@@ -27,6 +27,7 @@ import { BaseMenuItem, useBaseMenuItem } from '~components/BaseMenu';
 import { Checkbox } from '~components/Checkbox';
 import type { AvatarProps } from '~components/Avatar/types';
 import { Avatar } from '~components/Avatar';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 
 type ActionListItemProps = {
   title: string;
@@ -86,7 +87,8 @@ type ActionListItemProps = {
    * @private
    */
   _index?: number;
-} & TestID;
+} & TestID &
+  DataAnalyticsAttribute;
 
 const StyledActionListSectionTitle = styled(BaseBox)((props) => ({
   // @TODO: replace this styled-component with new layout box when we have padding shorthand
@@ -110,13 +112,15 @@ type ActionListSectionProps = {
    * @private
    */
   _sectionChildValues?: string[];
-} & TestID;
+} & TestID &
+  DataAnalyticsAttribute;
 const _ActionListSection = ({
   title,
   children,
   testID,
   _hideDivider,
   _sectionChildValues,
+  ...rest
 }: ActionListSectionProps): React.ReactElement => {
   const { hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, filteredValues } = useDropdown();
   const hasAutoComplete =
@@ -147,6 +151,7 @@ const _ActionListSection = ({
         label: title,
       })}
       {...metaAttribute({ name: MetaConstants.ActionListSection, testID })}
+      {...makeAnalyticsAttribute(rest as Record<string, unknown>)}
     >
       {/* We're announcing title as group label so we can hide this */}
       {isSectionVisible ? (
@@ -387,6 +392,7 @@ const _ActionListItem = (props: ActionListItemProps): React.ReactElement => {
           props.onClick?.({ name: props.value, value: isSelected, event: castWebType(e) });
         }
       })}
+      {...makeAnalyticsAttribute({ ...props })}
       {...metaAttribute({ name: MetaConstants.ActionListItem, testID: props.testID })}
       onMouseDown={() => {
         // We want to keep focus on Dropdown's trigger while option is being clicked

packages/blade/src/components/Alert/Alert.tsx

@@ -21,8 +21,9 @@ import BaseButton from '~components/Button/BaseButton';
 import { BaseLink } from '~components/Link/BaseLink';
 import type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';
 import { useTheme } from '~components/BladeProvider';
-import type { DotNotationSpacingStringToken, TestID } from '~utils/types';
+import type { DataAnalyticsAttribute, DotNotationSpacingStringToken, TestID } from '~utils/types';
 import { makeAccessible } from '~utils/makeAccessible';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 
 type PrimaryAction = {
   text: string;
@@ -109,7 +110,8 @@ type AlertProps = {
     secondary?: SecondaryAction;
   };
 } & TestID &
-  StyledPropsBlade;
+  StyledPropsBlade &
+  DataAnalyticsAttribute;
 
 const isReactNative = getPlatformType() === 'react-native';
 
@@ -135,7 +137,7 @@ const Alert = ({
   actions,
   testID,
   icon,
-  ...styledProps
+  ...rest
 }: AlertProps): ReactElement | null => {
   const { theme } = useTheme();
   const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });
@@ -300,7 +302,8 @@ const Alert = ({
     <BaseBox
       {...a11yProps}
       {...metaAttribute({ name: MetaConstants.Alert, testID })}
-      {...getStyledProps(styledProps)}
+      {...getStyledProps(rest)}
+      {...makeAnalyticsAttribute(rest)}
     >
       <StyledAlert
         color={color}