Adding data-id to tab component

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

@@ -54,6 +54,7 @@ function TabsComponent({
     <li
       key={i}
       onClick={() => activeTabSet(i)}
+      data-id={props.dataId}
       style={{ flex: '1 0 0' }}
     >
       <NavItem

src/components/Tabs/Tabs.types.ts

@@ -27,6 +27,7 @@ export interface Minors {
 
 export interface PanelProps {
   label?: string;
+  dataId?: string;
   active?: boolean;
   /**
    * @deprecated