Docs(web-react): Add Tabs demo #DS-909

- Tabs demo in web-react is now same as demo in web and web-twig

packages/web-react/docs/DocsSections.tsx

@@ -5,7 +5,7 @@ import DocsStack from './DocsStack';
 interface DocsSectionProps {
   children: ReactNode;
   hasStack?: boolean;
-  stackAlignment?: 'start' | 'center' | 'end';
+  stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
   tag?: string;
   title: string;
 }

packages/web-react/docs/DocsStack.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 interface DocsStackProps {
   children: ReactNode;
-  stackAlignment?: 'start' | 'center' | 'end';
+  stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
 }
 
 const DocsStack = ({ children, stackAlignment }: DocsStackProps) => {

packages/web-react/src/components/Tabs/TabLink.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
+import classNames from 'classnames';
 import { ChildrenProps, TransferProps } from '../../types';
 import { useTabsStyleProps } from './useTabsStyleProps';
+import { useStyleProps } from '../../hooks';
 
 export interface TabLinkProps extends ChildrenProps, TransferProps {
   href: string;
 }
 
 const TabLink = ({ children, href, ...restProps }: TabLinkProps): JSX.Element => {
   const { classProps } = useTabsStyleProps();
+  const { styleProps, props: transferProps } = useStyleProps(restProps);
 
   return (
-    <li className={classProps.item}>
-      <a {...restProps} href={href} className={classProps.link} role="tab">
+    <li {...transferProps} className={classNames(classProps.item, styleProps.className)}>
+      <a href={href} className={classProps.link} role="tab">
         {children}
       </a>
     </li>

packages/web-react/src/components/Tabs/demo/TabsDefault.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { TabId } from '../../../types';
+import Tabs from '../Tabs';
+import TabList from '../TabList';
+import TabItem from '../TabItem';
+import TabLink from '../TabLink';
+import TabContent from '../TabContent';
+import TabPane from '../TabPane';
+
+const TabsDefault = () => {
+  const [selectedTabId, setSelectedTabId] = useState<TabId>(1);
+
+  const selectTab = (tabId: TabId) => {
+    setSelectedTabId(tabId);
+  };
+
+  return (
+    <Tabs selectedTab={selectedTabId} toggle={selectTab}>
+      <TabList>
+        <TabItem forTab={1}>Item 1</TabItem>
+        <TabItem forTab={2}>Item 2</TabItem>
+        <TabLink href="https://www.example.com">Item link</TabLink>
+        <TabLink href="https://www.example.com" UNSAFE_className="d-none d-desktop-block" className="test">
+          Item link, desktop only
+        </TabLink>
+      </TabList>
+      <TabContent>
+        <TabPane tabId={1}>Pane 1 content</TabPane>
+        <TabPane tabId={2}>Pane 2 content</TabPane>
+      </TabContent>
+    </Tabs>
+  );
+};
+
+export default TabsDefault;

packages/web-react/src/components/Tabs/demo/index.tsx

@@ -2,27 +2,13 @@
 /* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
-// @ts-ignore: No declaration file
-import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import Tabs from './Tabs';
-import TabLinks from './TabLinks';
-import UncontrolledTabs from './UncontrolledTabs';
+import TabsDefault from './TabsDefault';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <IconsProvider value={icons}>
-      <DocsSection title="Default">
-        <Tabs />
-      </DocsSection>
-      <DocsSection title="Links">
-        <TabLinks />
-      </DocsSection>
-      <DocsSection title="Uncontrolled">
-        <UncontrolledTabs />
-      </DocsSection>
-    </IconsProvider>
+    <DocsSection title="Default" stackAlignment="stretch">
+      <TabsDefault />
+    </DocsSection>
   </React.StrictMode>,
 );