feat: extend functionality of the tabs component

package.json

@@ -26,11 +26,14 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.1.5",
+    "@types/enzyme": "^3.1.15",
+    "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/jest": "^23.3.10",
     "@types/node": "^10.12.12",
     "@types/react": "^16.7.13",
     "@types/react-dom": "^16.0.11",
     "@types/react-router-dom": "^4.3.1",
+    "@types/react-test-renderer": "^16.0.3",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "fiori-fundamentals": "^1.3.3",

src/Tabs/Tab.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { TabKey } from "./Tabs";
+import { StatelessComponent } from 'enzyme';
+
+export interface TabProps {
+    /**
+     * A unique (per Tabs component) identifier for the tab.
+     */
+    key: TabKey;
+
+    /**
+     * The content to render in the tab title
+     */
+    title: ReactNode;
+
+    /**
+     * If the tab is disabled. If disabled, it cannot be activated.
+     */
+    disabled?: boolean;
+
+    /**
+     * The tab content
+     */
+    children?: ReactNode;
+}
+
+/** 
+ * A Tab to render within the Tabs component.
+ */
+export const Tab: StatelessComponent<TabProps> = (props: TabProps) => (
+    <React.Fragment>
+        {props.children || null}
+    </React.Fragment>
+);

src/Tabs/TabHeader.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { TabProps } from './Tab';
+import { TabKey } from './Tabs';
+
+export interface TabHeaderProps {
+    tabs: React.ReactElement<TabProps>[];
+    selectedTabKey?: string;
+    onSelectTab(key: TabKey): any;
+}
+
+export interface TabHeaderItemProps {
+    tabKey: string;
+    title: ReactNode;
+    active: boolean;
+    disabled: boolean;
+    onSelectTab(key: TabKey): any;
+}
+
+export class TabHeaderItem extends React.Component<TabHeaderItemProps> {
+    render() {
+        const { disabled, title, active } = this.props;
+        const classes = ['fd-tabs__link'];
+        if (active) {
+            classes.push('is-selected');
+        }
+        return (
+            <li className={'fd-tabs__item'}>
+                <a
+                    className={classes.reduce((a, b) => `${a} ${b}`, '')}
+                    aria-disabled={disabled}
+                    onClick={this.onClicked}
+                >
+                    {title}
+                </a>
+            </li>
+        )
+    }
+
+    private onClicked = () => {
+        const { disabled, tabKey, onSelectTab } = this.props;
+        if (!disabled) {
+            onSelectTab(tabKey);
+        }
+    }
+}
+
+export const TabHeader = (props: TabHeaderProps) => {
+    return (
+        <ul className="fd-tabs" role={'tablist'}>
+            {
+                props.tabs.map(tab => (
+                    <TabHeaderItem
+                        key={tab.key || undefined}
+                        tabKey={String(tab.key)}
+                        title={tab.props.title}
+                        active={tab.key === props.selectedTabKey}
+                        onSelectTab={props.onSelectTab}
+                        disabled={!!tab.props.disabled}
+                    />
+                ))
+            }
+        </ul>
+    );
+}

src/Tabs/Tabs.Component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Tabs, Tab } from '.';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '..';
+
+export const TabsComponent = () => {
+    const tabscomponentCode = `
+    <Tabs>
+        <Tab key='1' title={'Tab 1'} content={'Hello World'} />
+        <Tab key='2' title={'Tab 2'} content={'Hello World 2'} />
+        <Tab key='3' title={'Tab 3'} content={'Hello World 3'} disabled={true} />
+    </Tabs>`;
+
+    return (
+        <div>
+            <Header>Tabs</Header>
+            <Description>
+                Tabs are based on a folder metaphor and used to separate content into different sections. Tabs should be
+                ordered to create a visual hierarchy based on priority.
+            </Description>
+            <Import module="Tabs, Tab" path="/fundamental-react/src/" /> <Separator />
+            <Properties
+                type="Inputs"
+                properties={[
+                    { name: 'key', description: 'id of the tab' },
+                    { name: 'title', description: 'name of the tab' },
+                    { name: 'disabled', description: 'disable the tab based on true or false' },
+                    { name: 'children', description: 'the content to display when the tab is active' }
+                ]}
+            />
+            <DocsTile>
+                <Tabs>
+                    <Tab key='1' title={'Tab 1'}>Hello World</Tab>
+                    <Tab key='2' title={'Tab 2'}>Hello World 2</Tab>
+                    <Tab key='3' title={'Tab 3'} disabled={true}>Hello World 3</Tab>
+                </Tabs>
+            </DocsTile>
+            <DocsText>{tabscomponentCode}</DocsText>
+            <Separator />
+        </div>
+    );
+};