Adding data-id to tab component

src/components/Button/Button.tsx

@@ -82,6 +82,7 @@ function ButtonComponent({
       theme={theme}
       type={type}
       variant={variant}
+      data-id={props.dataId}
       onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
         //Safari Button Focus Fix
         buttonRef?.current?.focus();

src/components/Tabs/Tabs.props.story.tsx

@@ -20,13 +20,15 @@ export function Format({ args }) {
     <Tabs format={format} key={key} {...args}>
       <Tabs.Panel
         label="Tab 0"
+        dataId="tab-0"
         onActivate={() => console.log('Clicked Tab 0')}
       >
         <Paragraph size="2">Lorem kittsum dolor sit ameow.</Paragraph>
         <img src="http://placekitten.com/1000/400" width="100%" />
       </Tabs.Panel>
       <Tabs.Panel
         label="Tab 1"
+        dataId="tab-1"
         active
         onActivate={() => console.log('Clicked Tab 1')}
       >
@@ -35,6 +37,7 @@ export function Format({ args }) {
       </Tabs.Panel>
       <Tabs.Panel
         label="Tab 2"
+        dataId="tab-2"
         onActivate={() => console.log('Clicked Tab 2')}
       >
         <Paragraph size="2">Lorem kittsum dolor sit ameow.</Paragraph>

src/components/Tabs/Tabs.tsx

@@ -61,6 +61,7 @@ function TabsComponent({
         format={format}
         index={i}
         label={props.label}
+        dataId={props.dataId}
         selected={activeTab === i}
         variant={variant}
         pill={pill}

src/utils/HOCs/IrisProps.ts

@@ -35,6 +35,7 @@ type IrisElementProps<DOMElement = HTMLDivElement> = {
   children?: ReactNode;
   className?: string;
   data?: string;
+  dataId?: string;
   debug?: boolean;
   disabled?: boolean;
   forwardRef?: Ref<DOMElement>;