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

packages/web-react/src/components/Tabs/README.md

@@ -110,10 +110,11 @@ Tab list link
 
 #### API
 
-| Name       | Type     | Default | Required | Description     |
-| ---------- | -------- | ------- | -------- | --------------- |
-| `href`     | `string` | —       | ✔        | External link   |
-| `children` | `any`    | —       | ✕        | Child component |
+| Name        | Type                         | Default | Required | Description                   |
+| ----------- | ---------------------------- | ------- | -------- | ----------------------------- |
+| `children`  | `any`                        | —       | ✕        | Child component               |
+| `href`      | `string`                     | —       | ✔        | External link                 |
+| `itemProps` | `StyleProps & HTMLLIElement` | —       | ✕        | Props for parent list element |
 
 ### TabContent
 

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

@@ -1,21 +1,31 @@
 import React from 'react';
-import { ChildrenProps, TransferProps } from '../../types';
+import classNames from 'classnames';
+import { useStyleProps } from '../../hooks';
+import { ChildrenProps, StyleProps } from '../../types';
 import { useTabsStyleProps } from './useTabsStyleProps';
 
-export interface TabLinkProps extends ChildrenProps, TransferProps {
+export type TabLinkItemProps = StyleProps & React.HTMLProps<HTMLLIElement>;
+
+export interface TabLinkProps extends ChildrenProps {
   href: string;
+  itemProps?: TabLinkItemProps;
 }
 
-const TabLink = ({ children, href, ...restProps }: TabLinkProps): JSX.Element => {
+const TabLink = ({ children, href, itemProps = {}, ...restProps }: TabLinkProps): JSX.Element => {
   const { classProps } = useTabsStyleProps();
+  const { styleProps: itemStyleProps, props: itemTransferProps } = useStyleProps(itemProps);
 
   return (
-    <li className={classProps.item}>
+    <li {...itemStyleProps} {...itemTransferProps} className={classNames(classProps.item, itemStyleProps.className)}>
       <a {...restProps} href={href} className={classProps.link} role="tab">
         {children}
       </a>
     </li>
   );
 };
 
+TabLink.defaultProps = {
+  itemProps: {},
+};
+
 export default TabLink;

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" itemProps={{ UNSAFE_className: 'd-none d-desktop-block' }}>
+          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

@@ -1,28 +1,12 @@
-// Because there is no `dist` directory during the CI run
-/* 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>,
 );

packages/web/src/scss/components/Tabs/index.html

@@ -1,48 +1,58 @@
 {{#> layout/plain }}
 
-  <ul class="Tabs" role="tablist">
-    <li class="Tabs__item">
-      <button
-        class="Tabs__link is-selected"
-        role="tab"
-        type="button"
-        aria-selected="true"
-        id="pane1-tab"
-        data-spirit-toggle="tabs"
-        data-spirit-target="#pane1"
-        aria-controls="pane1"
-      >
-        Item 1
-      </button>
-    </li>
-    <li class="Tabs__item">
-      <button
-        class="Tabs__link"
-        role="tab"
-        type="button"
-        aria-selected="false"
-        id="pane2-tab"
-        data-spirit-toggle="tabs"
-        data-spirit-target="#pane2"
-        aria-controls="pane2"
-      >
-        Item 2
-      </button>
-    </li>
-    <li class="Tabs__item">
-      <a href="https://www.example.com" class="Tabs__link">Item Link</a>
-    </li>
-    <li class="Tabs__item d-none d-desktop-block">
-      <a href="https://www.example.com" class="Tabs__link">Item Link, Desktop Only</a>
-    </li>
-  </ul>
+<section class="docs-Section">
+
+  <h2 class="docs-Heading">Default</h2>
+
+  <div class="docs-Stack docs-Stack--stretch">
 
-  <div id="pane1" class="TabsPane is-selected" role="tabpanel" aria-labelledby="pane1-tab">
-    Pane 1 content
-  </div>
+    <ul class="Tabs" role="tablist">
+      <li class="Tabs__item">
+        <button
+          class="Tabs__link is-selected"
+          role="tab"
+          type="button"
+          aria-selected="true"
+          id="pane1-tab"
+          data-spirit-toggle="tabs"
+          data-spirit-target="#pane1"
+          aria-controls="pane1"
+        >
+          Item 1
+        </button>
+      </li>
+      <li class="Tabs__item">
+        <button
+          class="Tabs__link"
+          role="tab"
+          type="button"
+          aria-selected="false"
+          id="pane2-tab"
+          data-spirit-toggle="tabs"
+          data-spirit-target="#pane2"
+          aria-controls="pane2"
+        >
+          Item 2
+        </button>
+      </li>
+      <li class="Tabs__item">
+        <a href="https://www.example.com" class="Tabs__link">Item link</a>
+      </li>
+      <li class="Tabs__item d-none d-desktop-block">
+        <a href="https://www.example.com" class="Tabs__link">Item link, desktop only</a>
+      </li>
+    </ul>
+
+    <div id="pane1" class="TabsPane is-selected" role="tabpanel" aria-labelledby="pane1-tab">
+      Pane 1 content
+    </div>
+
+    <div id="pane2" class="TabsPane" role="tabpanel" aria-labelledby="pane2-tab">
+      Pane 2 content
+    </div>
 
-  <div id="pane2" class="TabsPane" role="tabpanel" aria-labelledby="pane2-tab">
-    Pane 2 content
   </div>
 
+</section>
+
 {{/layout/plain }}