Adding data-id to tab component

[tarzen-chugh]

What this PR does

Adds support for adding data-id prop to tab component.
Usage
<Tabs.Panel
label={translate('Sharing')}
data-id="privacy_drawer_sharing_tab">

How it does that

Testing

All unit tests are passing in repository.

[Boughtmanatee5]

You shouldn't need this. data attributes are passed in the props and since we're spreading props at the bottom there you should be able to pass any data attributes you want on the component Button itself. Same with aria attributes.

[juliewongbandue]

You shouldn't need this. data attributes are passed in the props and since we're spreading props at the bottom there you should be able to pass any data attributes you want on the component Button itself. Same with aria attributes.

Oh yes, @Boughtmanatee5 is right. Props are spread here: https://github.com/vimeo/iris/pull/278/files#diff-ce687691fe458ef8d9a85cc00e06bf778a4272a39b854ce5c89e598eecb531e3L93, so you can pass data-id as expected to the Tabs.Panel:

      <Tabs.Panel
        label="Tab 0"
        data-id="Tab-0-id" // data-id (and any aria attributes..) can be passed directly to the component
        onOpen={() => console.log('Clicked Tab 0')}
      >
        <Header size="2">I am Tab 0</Header>
        <Paragraph size="2">Lorem ipsum dolor sit amet.</Paragraph>
        <img src="http://placekitten.com/1000/400" width="100%" />
      </Tabs.Panel>

[tarzen-chugh]

@juliewongbandue This is what we have done currently but data-id gets passed to tab content instead of anchor tag.

Ref code

@Boughtmanatee5 Can you look at the comment above.