Review Tabs implementation for client side navigation

[jsardid]

[marcialfps]

Discussion: #878

[marcialfps]

TabNav proposal (update 12/05)

Use cases

• When a Tab is clicked, a new page opens, changing the browser URL.
• A Tab can be disabled, ignoring any action.
• Support client-side navigation (React Router or NextJS Link).
• Indicate the active Tab.
• Add an icon to a tab.
• Indicate the tabIndex attribute of the active Tab.
• One of the Tabs can be controlled with onClick.

Props

DxcTabNav

Prop	Type	Default value	Description
iconPosition	'top' or 'left'	'top'	Icon position.
tabIndex	0	Value of the tabindex for each tab.

DxcTab

Prop	Type	Default value	Description
href	string		Href of the rendered anchor.
active	boolean	false	Whether the tab is active or not.
icon	node or string		Icon placed in the Tab.
disabled	boolean	false	Indicates if the Tab is disabled or not.
notificationNumber	boolean or number	false
children	node or string		If it is a string the component is rendered as an anchor. Otherwise, the content will be considered as a custom Tab.

Example

<DxcTabsNav
  tabIndex={3}
  iconPosition="top"
>
  <DxcTab href="#" icon={MySVGIcon}>
    My anchor Tab with icon
  </DxcTab>
  <DxcTab active notificationNumber={10}>
    My active Tab
  </DxcTab>
  <DxcTab href="#" disabled>
    My disabled Tab
  </DxcTab>
  <DxcTab>
    <NextLink href="#">
      <a>My custom Tab</a>
    </NextLink>
  </DxcTab>
</DxcTabsNav>