@dhis2-ui/tab 10.16.2 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tab",
-    "version": "10.16.2",
+    "version": "10.16.3-alpha.1",
     "description": "UI Tabs",
     "repository": {
         "type": "git",
@@ -32,16 +32,17 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/tooltip": "10.16.2",
+        "@dhis2-ui/tooltip": "10.16.3-alpha.1",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.2",
-        "@dhis2/ui-icons": "10.16.2",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
+        "@dhis2/ui-icons": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "react": "^18.3.1",

package/src/index.js

@@ -0,0 +1,2 @@
+export { Tab } from './tab/index.js'
+export { TabBar } from './tab-bar/index.js'

package/src/tab/features/accepts_children/index.js

@@ -0,0 +1,12 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Tab with children is rendered', () => {
+    cy.visitStory('Tab', 'With children')
+    cy.get('[data-test="dhis2-uicore-tab"]').should('be.visible')
+})
+
+Then('the children are visible', () => {
+    cy.get('[data-test="dhis2-uicore-tab"]')
+        .contains('I am a child')
+        .should('be.visible')
+})

package/src/tab/features/accepts_children.feature

@@ -0,0 +1,5 @@
+Feature: The Tab renders children
+
+    Scenario: A Tab with children
+        Given a Tab with children is rendered
+        Then the children are visible

package/src/tab/features/accepts_icon/index.js

@@ -0,0 +1,12 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Tab with an icon is rendered', () => {
+    cy.visitStory('Tab', 'With icon')
+    cy.get('[data-test="dhis2-uicore-tab"]').should('be.visible')
+})
+
+Then('the icon is visible', () => {
+    cy.get('[data-test="dhis2-uicore-tab"]')
+        .contains('Icon')
+        .should('be.visible')
+})

package/src/tab/features/accepts_icon.feature

@@ -0,0 +1,5 @@
+Feature: The Tab renders icon
+
+    Scenario: A Tab with an icon
+        Given a Tab with an icon is rendered
+        Then the icon is visible

package/src/tab/features/is_clickable/index.js

@@ -0,0 +1,25 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Tab with onClick handler is rendered', () => {
+    cy.visitStory('Tab', 'With on click')
+})
+
+Given('a disabled Tab with onClick handler is rendered', () => {
+    cy.visitStory('Tab', 'With on click and disabled')
+})
+
+When('the Tab is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-tab"]').click()
+})
+
+Then('the onClick handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onClick).to.be.calledWith({})
+    })
+})
+
+Then('the onClick handler is not called', () => {
+    cy.window().should((win) => {
+        expect(win.onClick).not.to.be.called
+    })
+})

package/src/tab/features/is_clickable.feature

@@ -0,0 +1,11 @@
+Feature: The Tab has an onClick api
+
+    Scenario: The user clicks on the Tab
+        Given a Tab with onClick handler is rendered
+        When the Tab is clicked
+        Then the onClick handler is called
+
+    Scenario: The user clicks on a disabled Tab
+        Given a disabled Tab with onClick handler is rendered
+        When the Tab is clicked
+        Then the onClick handler is not called

package/src/tab/index.js

@@ -0,0 +1 @@
+export { Tab } from './tab.js'

package/src/tab/tab.e2e.stories.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from './tab.js'
+
+window.onClick = window.Cypress && window.Cypress.cy.stub()
+
+export default { title: 'Tab' }
+export const WithOnClick = () => <Tab onClick={window.onClick}>Tab A</Tab>
+export const WithChildren = () => <Tab>I am a child</Tab>
+export const WithIcon = () => <Tab icon={<div>Icon</div>}>Children</Tab>
+export const WithOnClickAndDisabled = () => (
+    <Tab onClick={window.onClick} disabled>
+        Tab A
+    </Tab>
+)

package/src/tab/tab.js

@@ -0,0 +1,184 @@
+import { colors, theme } from '@dhis2/ui-constants'
+import { Tooltip } from '@dhis2-ui/tooltip'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useState, useEffect, useRef } from 'react'
+
+export const Tab = React.forwardRef(
+    (
+        {
+            icon,
+            onClick,
+            selected,
+            disabled,
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tab',
+        },
+        ref
+    ) => {
+        let tabRef = useRef(null)
+        if (ref) {
+            tabRef = ref
+        }
+        const [isOverflowing, setIsOverflowing] = useState(false)
+
+        useEffect(() => {
+            const checkOverflow = () => {
+                const isOverflow =
+                    tabRef.current.scrollWidth > tabRef.current.clientWidth
+                setIsOverflowing(isOverflow)
+            }
+            checkOverflow()
+        }, [])
+
+        return (
+            <button
+                className={`${cx('tab', className, {
+                    selected,
+                    disabled,
+                })}`}
+                onClick={disabled ? undefined : (event) => onClick({}, event)}
+                data-test={dataTest}
+                ref={tabRef}
+                role="tab"
+                aria-selected={selected ? 'true' : 'false'}
+                aria-disabled={disabled ? 'true' : 'false'}
+                onFocus={disabled ? undefined : (event) => onClick({}, event)}
+                tabIndex={-1}
+            >
+                {icon}
+                {isOverflowing ? (
+                    <Tooltip content={children} maxWidth={'100%'}>
+                        <span ref={tabRef}>{children}</span>
+                    </Tooltip>
+                ) : (
+                    <span ref={tabRef}>{children}</span>
+                )}
+
+                <style jsx>{`
+                    button {
+                        flex-grow: 0;
+                        position: relative;
+                        display: inline-flex;
+                        justify-content: center;
+                        align-items: center;
+                        vertical-align: bottom;
+
+                        height: 100%;
+                        padding: 16px 16px 11px;
+
+                        background-color: transparent;
+                        outline: none;
+                        border: none;
+                        border-bottom: 1px solid ${colors.grey400};
+
+                        color: ${colors.grey600};
+                        font-size: 14px;
+                        line-height: 20px;
+
+                        cursor: pointer;
+                    }
+
+                    :global(.fixed) > button {
+                        flex-grow: 1;
+                    }
+
+                    button::after {
+                        content: ' ';
+                        display: block;
+                        position: absolute;
+                        bottom: -1px;
+                        inset-inline-start: 0;
+                        height: 4px;
+                        width: 100%;
+                        background-color: transparent;
+                    }
+
+                    span {
+                        display: inline-flex;
+                        max-width: 320px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        transition: fill 150ms ease-in-out;
+                    }
+                    /*focus-visible backwards compatibility for safari: https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/*/
+                    button:focus {
+                        outline: 3px solid ${theme.focus};
+                        outline-offset: -3px;
+                    }
+                    button:focus:not(:focus-visible) {
+                        outline: none;
+                    }
+
+                    button > :global(svg) {
+                        fill: ${colors.grey600};
+                        width: 14px;
+                        height: 14px;
+                        margin: 0 4px 0 0;
+                    }
+
+                    button:hover {
+                        color: ${colors.grey900};
+                    }
+
+                    button:hover::after {
+                        background-color: ${colors.grey600};
+                        height: 2px;
+                    }
+
+                    button:active::after {
+                        background-color: ${colors.grey800};
+                    }
+
+                    button.selected {
+                        color: ${theme.primary800};
+                    }
+
+                    button.selected::after {
+                        background-color: ${theme.primary700};
+                        transition: background-color 150ms ease-in-out;
+                    }
+
+                    button.selected:hover::after {
+                        background-color: ${theme.primary700};
+                        height: 4px;
+                    }
+
+                    button.selected > :global(svg) {
+                        fill: ${theme.primary700};
+                    }
+
+                    button.disabled {
+                        color: ${colors.grey500};
+                        cursor: not-allowed;
+                    }
+
+                    button.disabled:hover,
+                    button.selected:hover {
+                        background-color: transparent;
+                    }
+
+                    button.disabled > :global(svg) {
+                        fill: ${colors.grey500};
+                    }
+                `}</style>
+            </button>
+        )
+    }
+)
+
+Tab.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    icon: PropTypes.element,
+    /** Indicates this tab is selected */
+    selected: PropTypes.bool,
+    /** Called with the signature `({}, event)` */
+    onClick: PropTypes.func,
+}
+
+Tab.displayName = 'Tab'

package/src/tab-bar/animated-side-scroll.js

@@ -0,0 +1,63 @@
+const DURATION = 250
+const SCROLL_STEP = 0.5
+
+export function animatedSideScroll(scrollBox, callback, goBackwards = false) {
+    const startValue = scrollBox.scrollLeft
+    const endValue = getEndValue(scrollBox, startValue, goBackwards)
+    const change = endValue - startValue
+    const step = createFrameStepper({
+        scrollBox,
+        callback,
+        startValue,
+        endValue,
+        change,
+    })
+
+    window.requestAnimationFrame(step)
+}
+
+function getEndValue(scrollBox, startValue, goBackwards) {
+    const scrollDistance = scrollBox.clientWidth * SCROLL_STEP
+    const inverter = goBackwards ? -1 : 1
+    return Math.floor(startValue + scrollDistance * inverter)
+}
+
+function createFrameStepper({
+    scrollBox,
+    callback,
+    startValue,
+    endValue,
+    change,
+}) {
+    let startTimestamp, elapsedTime, scrollValue
+
+    return function step(timestamp) {
+        if (!startTimestamp) {
+            startTimestamp = timestamp
+        }
+
+        elapsedTime = timestamp - startTimestamp
+        scrollValue = easeInOutQuad({
+            currentTime: elapsedTime,
+            DURATION,
+            startValue,
+            change,
+        })
+
+        if (elapsedTime >= DURATION) {
+            if (scrollValue !== endValue) {
+                scrollBox.scrollLeft = endValue
+            }
+            callback && callback()
+        } else {
+            scrollBox.scrollLeft = scrollValue
+            window.requestAnimationFrame(step)
+        }
+    }
+}
+
+function easeInOutQuad({ currentTime, startValue, change }) {
+    return (currentTime /= DURATION / 2) < 1
+        ? (change / 2) * currentTime * currentTime + startValue
+        : (-change / 2) * (--currentTime * (currentTime - 2) - 1) + startValue
+}

package/src/tab-bar/detect-horizontal-scrollbar-height.js

@@ -0,0 +1,36 @@
+let horizontalScrollbarHeight
+const className = '__vertical-scrollbar-height-test__'
+const styles = `
+    .${className} {
+        position: absolute;
+        top: -9999px;
+        width: 100px;
+        height: 100px;
+        overflow-x: scroll;
+    }
+    .${className}::-webkit-scrollbar {
+        display: none;
+    }
+`
+
+export function detectHorizontalScrollbarHeight() {
+    if (horizontalScrollbarHeight) {
+        return horizontalScrollbarHeight
+    }
+
+    const style = document.createElement('style')
+    style.innerHTML = styles
+
+    const el = document.createElement('div')
+    el.classList.add(className)
+
+    document.body.appendChild(style)
+    document.body.appendChild(el)
+
+    horizontalScrollbarHeight = el.offsetHeight - el.clientHeight
+
+    document.body.removeChild(style)
+    document.body.removeChild(el)
+
+    return horizontalScrollbarHeight
+}

package/src/tab-bar/features/accepts_children/index.js

@@ -0,0 +1,17 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a TabBar with children is rendered', () => {
+    cy.visitStory('TabBar', 'With children')
+    cy.get('[data-test="dhis2-uicore-tabbar"]').should('be.visible')
+})
+
+Given('a scrollable TabBar with children is rendered', () => {
+    cy.visitStory('TabBar', 'Scrollable with children')
+    cy.get('[data-test="dhis2-uicore-tabbar"]').should('be.visible')
+})
+
+Then('the children are visible', () => {
+    cy.get('[data-test="dhis2-uicore-tabbar"]')
+        .contains('I am a child')
+        .should('be.visible')
+})

package/src/tab-bar/features/accepts_children.feature

@@ -0,0 +1,9 @@
+Feature: The TabBar renders children
+
+    Scenario: A TabBar with children
+        Given a TabBar with children is rendered
+        Then the children are visible
+
+    Scenario: A scrollable TabBar with children
+        Given a scrollable TabBar with children is rendered
+        Then the children are visible

package/src/tab-bar/features/auto_hides_scroll_buttons/index.js

@@ -0,0 +1,35 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a tabbar with enough space for all tabs is rendered', () => {
+    cy.viewport(1024, 768)
+    cy.visitStory('TabBar', 'Scrollable with some tabs')
+})
+
+Given('the tabbar is scrollable', () => {
+    cy.get('.scroll-area').should('exist')
+})
+
+Given('a tabbar with too little space for all tabs is rendered', () => {
+    cy.viewport(300, 768)
+    cy.visitStory('TabBar', 'Scrollable with some tabs')
+})
+
+When('the tabs are visible', () => {
+    cy.get('[data-test="dhis2-uicore-tab"]').should('exist')
+})
+
+When("the tabbar's width increases", () => {
+    cy.viewport(1024, 768)
+})
+
+When("the tabbar's width decreases", () => {
+    cy.viewport(300, 768)
+})
+
+Then('no scroll buttons should be visible', () => {
+    cy.get('.scroll-button:visible').should('not.exist')
+})
+
+Then('both scroll buttons should be visible', () => {
+    cy.get('.scroll-button:visible').should('have.length.of', 2)
+})

package/src/tab-bar/features/auto_hides_scroll_buttons.feature

@@ -0,0 +1,29 @@
+Feature: The TabBar hides scroll buttons automatically when there is enough space for all tabs
+
+    Scenario: There is enough space for the tabs initially
+        Given a tabbar with enough space for all tabs is rendered
+        And the tabbar is scrollable
+        When the tabs are visible
+        Then no scroll buttons should be visible
+
+    Scenario: There is not enough space for the tabs initially
+        Given a tabbar with too little space for all tabs is rendered
+        And the tabbar is scrollable
+        When the tabs are visible
+        Then both scroll buttons should be visible
+
+    Scenario: The buttons hide when the the tabbar's width increases
+        Given a tabbar with too little space for all tabs is rendered
+        And the tabbar is scrollable
+        When the tabs are visible
+        Then both scroll buttons should be visible
+        When the tabbar's width increases
+        Then no scroll buttons should be visible
+
+    Scenario: There is enough space for the tabs initially
+        Given a tabbar with enough space for all tabs is rendered
+        And the tabbar is scrollable
+        When the tabs are visible
+        Then no scroll buttons should be visible
+        When the tabbar's width decreases
+        Then both scroll buttons should be visible

package/src/tab-bar/index.js

@@ -0,0 +1 @@
+export { TabBar } from './tab-bar.js'

package/src/tab-bar/scroll-bar.js

@@ -0,0 +1,219 @@
+import { IconChevronRight16, IconChevronLeft16 } from '@dhis2/ui-icons'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Component, createRef } from 'react'
+import { animatedSideScroll } from './animated-side-scroll.js'
+import { detectHorizontalScrollbarHeight } from './detect-horizontal-scrollbar-height.js'
+import { ScrollButton } from './scroll-button.js'
+
+class ScrollBar extends Component {
+    scrollBox = createRef()
+    scrollArea = createRef()
+    horizontalScrollBarHeight = detectHorizontalScrollbarHeight()
+    scrollBoxResizeObserver = null
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            scrolledToStart: true,
+            scrolledToEnd: false,
+            // used to initially hide the entire content to prevent flickering
+            hideScrollButtonsInitialized: false,
+            // hide buttons initially to simplify calculations
+            hideScrollButtons: false,
+        }
+        this.scrollBoxResizeObserver = new ResizeObserver(
+            this.calculateShouldHideButtons
+        )
+    }
+
+    componentDidMount() {
+        this.scrollSelectedTabIntoView()
+        this.attachSideScrollListener()
+        this.manageShouldHideButtons()
+    }
+
+    componentWillUnmount() {
+        this.removeSideScrollListener()
+        this.scrollBoxResizeObserver.disconnect()
+    }
+
+    manageShouldHideButtons() {
+        const { current: scrollBox } = this.scrollBox
+        this.scrollBoxResizeObserver.observe(scrollBox)
+        this.calculateShouldHideButtons()
+    }
+
+    calculateShouldHideButtons = () => {
+        this.setState({ hideScrollButtonsInitialized: false })
+
+        const { current: scrollBox } = this.scrollBox
+        const { current: scrollArea } = this.scrollArea
+
+        const areaWidth = scrollArea.offsetWidth
+        const boxWidth = scrollBox.offsetWidth
+        const hideScrollButtons = areaWidth <= boxWidth
+
+        this.setState({ hideScrollButtons })
+
+        if (!hideScrollButtons) {
+            if (this.state.scrolledToStart) {
+                this.scrollLeft()
+            }
+
+            if (this.state.scrolledToEnd) {
+                this.scrollRight()
+            }
+        }
+
+        this.setState({ hideScrollButtonsInitialized: true })
+    }
+
+    scrollRight = () => this.scroll()
+
+    scrollLeft = () => this.scroll(true)
+
+    scroll(goBackwards) {
+        this.removeSideScrollListener()
+
+        animatedSideScroll(
+            this.scrollBox.current,
+            this.animatedScrollCallback,
+            goBackwards
+        )
+    }
+
+    animatedScrollCallback = () => {
+        this.updateScrolledToStates()
+        this.attachSideScrollListener()
+    }
+
+    updateScrolledToStates = () => {
+        const { scrollLeft, offsetWidth } = this.scrollBox.current
+        const { offsetWidth: areaOffsetWidth } = this.scrollArea.current
+        const scrolledToStart = scrollLeft <= 0
+        const scrolledToEnd = scrollLeft + offsetWidth >= areaOffsetWidth
+
+        if (
+            this.state.scrolledToStart !== scrolledToStart ||
+            this.state.scrolledToEnd !== scrolledToEnd
+        ) {
+            this.setState({
+                scrolledToStart,
+                scrolledToEnd,
+            })
+        }
+    }
+
+    scrollSelectedTabIntoView() {
+        const scrollBoxEl = this.scrollBox.current
+        const tab = scrollBoxEl.querySelector('.tab.selected')
+
+        if (tab) {
+            const tabEnd = tab.offsetLeft + tab.offsetWidth
+
+            if (tabEnd > scrollBoxEl.offsetWidth) {
+                scrollBoxEl.scrollLeft = tabEnd - scrollBoxEl.offsetWidth
+            }
+        }
+    }
+
+    attachSideScrollListener() {
+        this.scrollBox.current.addEventListener(
+            'scroll',
+            this.updateScrolledToStates
+        )
+    }
+
+    removeSideScrollListener() {
+        this.scrollBox.current.removeEventListener(
+            'scroll',
+            this.updateScrolledToStates
+        )
+    }
+
+    render() {
+        const {
+            scrolledToStart,
+            scrolledToEnd,
+            hideScrollButtonsInitialized,
+            hideScrollButtons: hideScrollButtonsState,
+        } = this.state
+        const { children, className, dataTest } = this.props
+        const hideScrollButtons =
+            !hideScrollButtonsInitialized || hideScrollButtonsState
+
+        return (
+            <div className={cx('scroll-bar', className)} data-test={dataTest}>
+                <ScrollButton
+                    disabled={scrolledToStart}
+                    onClick={this.scrollLeft}
+                    hidden={hideScrollButtons}
+                >
+                    <IconChevronLeft16 />
+                </ScrollButton>
+
+                <div className="scroll-box-clipper">
+                    <div className="scroll-box" ref={this.scrollBox}>
+                        <div className="scroll-area" ref={this.scrollArea}>
+                            {children}
+                        </div>
+                    </div>
+                </div>
+
+                <ScrollButton
+                    disabled={scrolledToEnd}
+                    onClick={this.scrollRight}
+                    hidden={hideScrollButtons}
+                >
+                    <IconChevronRight16 />
+                </ScrollButton>
+
+                <style jsx>{`
+                    .scroll-box {
+                        margin-bottom: ${-this.horizontalScrollBarHeight}px;
+                    }
+                `}</style>
+
+                <style jsx>{`
+                    .scroll-bar {
+                        display: flex;
+                        flex-wrap: nowrap;
+                    }
+
+                    .scroll-box-clipper {
+                        overflow-y: hidden;
+                        flex-grow: 1;
+                    }
+
+                    .scroll-box {
+                        flex-grow: 1;
+                        overflow-x: scroll;
+                        -webkit-overflow-scrolling: touch;
+                        display: -ms-flexbox;
+                        display: flex;
+                    }
+
+                    .scroll-box::-webkit-scrollbar {
+                        display: none;
+                    }
+
+                    .scroll-area {
+                        position: relative;
+                        display: flex;
+                        flex: 1 0 auto;
+                        overflow-x: hidden;
+                    }
+                `}</style>
+            </div>
+        )
+    }
+}
+
+ScrollBar.propTypes = {
+    children: PropTypes.node.isRequired,
+    dataTest: PropTypes.string.isRequired,
+    className: PropTypes.string,
+}
+
+export { ScrollBar }

package/src/tab-bar/scroll-button.js

@@ -0,0 +1,72 @@
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const ScrollButton = ({ children, disabled, hidden, onClick }) => (
+    <button
+        onClick={disabled ? undefined : onClick}
+        className={cx('scroll-button', { disabled, hidden })}
+    >
+        {children}
+
+        <style jsx>{`
+            .scroll-button {
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+
+                color: inherit;
+                background-color: ${colors.white};
+                border: none;
+                border-bottom: 1px solid ${colors.grey400};
+                outline: none;
+                padding: 16px 16px 11px 16px;
+
+                cursor: pointer;
+            }
+
+            .scroll-button.hidden {
+                display: none;
+            }
+
+            .scroll-button :global(svg) {
+                width: 20px;
+                height: 20px;
+                fill: ${colors.grey600};
+                transition: opacity 150ms ease-in-out;
+                opacity: 1;
+            }
+
+            .scroll-button:hover {
+                background-color: ${colors.grey100};
+            }
+
+            .scroll-button:active {
+                /* Briefly highlight clicked button */
+                background-color: ${colors.grey200};
+            }
+
+            .scroll-button.disabled {
+                cursor: not-allowed;
+            }
+
+            .scroll-button.disabled:hover {
+                background-color: transparent;
+            }
+
+            .scroll-button.disabled :global(svg) {
+                fill: ${colors.grey500};
+            }
+        `}</style>
+    </button>
+)
+
+ScrollButton.displayName = 'ScrollButton'
+
+ScrollButton.propTypes = {
+    children: PropTypes.any.isRequired,
+    disabled: PropTypes.bool,
+    hidden: PropTypes.bool,
+    onClick: PropTypes.func,
+}

package/src/tab-bar/tab-bar.e2e.stories.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Tab } from '../tab/index.js'
+import { TabBar } from './index.js'
+
+export default { title: 'TabBar' }
+export const WithChildren = () => <TabBar>I am a child</TabBar>
+export const ScrollableWithChildren = () => (
+    <TabBar scrollable>I am a child</TabBar>
+)
+export const ScrollableWithSomeTabs = () => {
+    const TabStaticWidth = () => (
+        <Tab>
+            <div
+                style={{
+                    width: 100,
+                    border: '1px solid black',
+                }}
+            >
+                Foo
+            </div>
+        </Tab>
+    )
+
+    return (
+        <TabBar scrollable>
+            <TabStaticWidth />
+            <TabStaticWidth />
+            <TabStaticWidth />
+        </TabBar>
+    )
+}

package/src/tab-bar/tab-bar.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { ScrollBar } from './scroll-bar.js'
+import { Tabs } from './tabs.js'
+
+const TabBar = ({
+    fixed,
+    children,
+    className,
+    scrollable,
+    dataTest = 'dhis2-uicore-tabbar',
+}) => {
+    if (scrollable) {
+        return (
+            <div className={className} data-test={dataTest}>
+                <ScrollBar dataTest={`${dataTest}-scrollbar`}>
+                    <Tabs fixed={fixed} dataTest={`${dataTest}-tabs`}>
+                        {children}
+                    </Tabs>
+                </ScrollBar>
+            </div>
+        )
+    }
+
+    return (
+        <div className={className} data-test={dataTest}>
+            <Tabs fixed={fixed} dataTest={`${dataTest}-tabs`}>
+                {children}
+            </Tabs>
+        </div>
+    )
+}
+
+TabBar.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Fixed tabs fill the width of their container. If false (i.e. fluid), tabs take up an amount of space defined by the tab name. Fluid tabs should be used most of the time. */
+    fixed: PropTypes.bool,
+    /** Enables horizontal scrolling for many tabs that don't fit the width of the container */
+    scrollable: PropTypes.bool,
+}
+
+export { TabBar }

package/src/tab-bar/tab-bar.prod.stories.js

@@ -0,0 +1,191 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Tab } from '../tab/index.js'
+import { TabBar } from './index.js'
+
+function AttachFile({ className }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 48 48"
+            className={className}
+        >
+            <path d="M33 12v23c0 4.42-3.58 8-8 8s-8-3.58-8-8V10c0-2.76 2.24-5 5-5s5 2.24 5 5v21c0 1.1-.89 2-2 2-1.11 0-2-.9-2-2V12h-3v19c0 2.76 2.24 5 5 5s5-2.24 5-5V10c0-4.42-3.58-8-8-8s-8 3.58-8 8v25c0 6.08 4.93 11 11 11s11-4.92 11-11V12h-3z" />
+            <style jsx>{`
+                svg {
+                    fill: inherit;
+                    height: 24px;
+                    width: 24px;
+                    vertical-align: middle;
+                    pointer-events: none;
+                }
+            `}</style>
+        </svg>
+    )
+}
+
+AttachFile.propTypes = {
+    className: PropTypes.string,
+}
+
+const subtitle = 'Ssed to divide content into categories and/or sections'
+
+const description = `
+Use tabs to split related content into separate sections.
+
+- Each tab should contain content that relates to one another, but the content should not overlap.
+- Tabs are especially useful for splitting up content that may be relevant to different user groups, instead of displaying overwhelming amounts of information on a single page.
+- Do not use tabs to compare content.
+- Do not use tabs for sequential content that needs to be done in order.
+- Do not use tabs for content that needs to be viewed at the same time.
+- The number of tabs is less important than splitting content into understandable, predictable groups. Do not group together unrelated content in order to reduce tab count. Users struggle more with unpredictable tabs than too many tabs.
+
+#### Naming
+
+Give tabs short, understandable names. Try to find a word or very short phrase that summarizes the content. If you cannot find a suitable word this may mean you are trying to fit too much content under a single tab. The content of a tab should be obvious from its name.
+
+For example: Do use "Legends" instead of "Set up legends", Do use "Data analysis" instead of "Options for analysis of data",
+
+Do not repeat a term across tabs. If tabs are used inside a 'Options' modal, it is enough to use tab names "Data", "Legend", "Style". Do not repeat 'options' for all, e.g. "Data options", "Legend options" etc.
+
+\`\`\`js
+import { TabBar, Tab } from '@dhis2/ui'
+\`\`\`
+`
+
+const Wrapper = (fn) => (
+    <div
+        style={{
+            maxWidth: 700,
+        }}
+    >
+        {fn()}
+        <p>Max-width of this container is 700 px</p>
+    </div>
+)
+
+window.onClick = (payload, event) => {
+    console.log('onClick payload', payload)
+    console.log('onClick event', event)
+}
+
+const onClick = (...args) => window.onClick(...args)
+
+export default {
+    title: 'Tab Bar',
+    component: TabBar,
+    subcomponents: { Tab },
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+    decorators: [Wrapper],
+}
+
+export const DefaultFluid = (args) => (
+    <TabBar {...args}>
+        <Tab onClick={onClick}>Tab A</Tab>
+        <Tab onClick={onClick}>Tab B</Tab>
+        <Tab onClick={onClick} selected>
+            Tab C
+        </Tab>
+        <Tab onClick={onClick}>Tab D</Tab>
+        <Tab onClick={onClick}>Tab E</Tab>
+        <Tab onClick={onClick}>Tab F</Tab>
+        <Tab onClick={onClick}>Tab G</Tab>
+    </TabBar>
+)
+DefaultFluid.storyName = 'Default (fluid)'
+
+export const FixedTabsFillContent = (args) => (
+    <TabBar {...args}>
+        <Tab onClick={onClick}>Tab A</Tab>
+        <Tab onClick={onClick}>Tab B</Tab>
+        <Tab onClick={onClick} selected>
+            Tab C
+        </Tab>
+        <Tab onClick={onClick}>Tab D</Tab>
+        <Tab onClick={onClick}>Tab E</Tab>
+        <Tab onClick={onClick}>Tab F</Tab>
+        <Tab onClick={onClick}>Tab G</Tab>
+    </TabBar>
+)
+FixedTabsFillContent.args = { fixed: true }
+FixedTabsFillContent.storyName = 'Fixed - tabs fill content'
+
+export const TabsWithScroller = (args) => (
+    <TabBar {...args}>
+        <Tab onClick={onClick}>Tab A</Tab>
+        <Tab onClick={onClick}>Tab B</Tab>
+        <Tab onClick={onClick}>Tab C</Tab>
+        <Tab onClick={onClick}>Tab D</Tab>
+        <Tab onClick={onClick}>Tab E</Tab>
+        <Tab onClick={onClick}>Tab F</Tab>
+        <Tab onClick={onClick}>Tab G</Tab>
+        <Tab onClick={onClick}>Tab H</Tab>
+        <Tab onClick={onClick}>Tab I</Tab>
+        <Tab onClick={onClick}>Tab J</Tab>
+        <Tab onClick={onClick}>Tab K</Tab>
+        <Tab onClick={onClick}>Tab L</Tab>
+        <Tab onClick={onClick} selected>
+            Tab M
+        </Tab>
+        <Tab onClick={onClick}>Tab N</Tab>
+        <Tab onClick={onClick}>Tab O</Tab>
+        <Tab onClick={onClick}>Tab P</Tab>
+        <Tab onClick={onClick}>Tab Q</Tab>
+        <Tab onClick={onClick}>Tab R</Tab>
+    </TabBar>
+)
+TabsWithScroller.args = { scrollable: true }
+TabsWithScroller.storyName = 'Tabs with scroller'
+
+export const TabsWithHiddenScrollButtons = (args) => (
+    <TabBar {...args}>
+        <Tab onClick={onClick}>Tab A</Tab>
+        <Tab onClick={onClick}>Tab B</Tab>
+        <Tab onClick={onClick}>Tab C</Tab>
+    </TabBar>
+)
+TabsWithHiddenScrollButtons.args = { scrollable: true }
+TabsWithHiddenScrollButtons.storyName = 'Tabs with hidden scroll buttons'
+
+export const TabStates = (args) => (
+    <TabBar {...args}>
+        <Tab onClick={onClick}>Default</Tab>
+        <Tab onClick={onClick} selected>
+            Selected
+        </Tab>
+        <Tab disabled>Disabled</Tab>
+        <Tab onClick={onClick}>
+            Text overflow - This tab has a very long text and it exceeds the
+            maximum width of 320px
+        </Tab>
+    </TabBar>
+)
+TabStates.storyName = 'Tab states'
+
+export const TabStatesWithIcon = (args) => (
+    <TabBar {...args}>
+        <Tab onClick={onClick} icon={<AttachFile />}>
+            Default
+        </Tab>
+        <Tab onClick={onClick} icon={<AttachFile />} selected>
+            Selected
+        </Tab>
+        <Tab icon={<AttachFile />} disabled>
+            Disabled
+        </Tab>
+        <Tab onClick={onClick} icon={<AttachFile />}>
+            Text overflow - This tab has a very long text and it exceeds the
+            maximum width of 320px
+        </Tab>
+    </TabBar>
+)
+TabStatesWithIcon.storyName = 'Tab states - with icon'
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <TabStatesWithIcon {...args} />
+    </div>
+)

package/src/tab-bar/tabs.js

@@ -0,0 +1,91 @@
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useRef, useMemo } from 'react'
+
+const Tabs = ({ children, fixed, dataTest }) => {
+    const tabContainer = useRef(null)
+
+    const childrenRefs = useMemo(
+        () => React.Children.map(children, () => React.createRef()),
+        [children]
+    )
+
+    const handleKeyDown = (event) => {
+        const currentFocus = document.activeElement
+
+        if (tabContainer.current && tabContainer.current === currentFocus) {
+            if (childrenRefs.length > 0 && childrenRefs[0].current) {
+                childrenRefs[0].current.focus()
+            }
+            return
+        }
+
+        const currentIndex = childrenRefs.findIndex(
+            (ref) => ref.current === currentFocus
+        )
+
+        if (currentIndex === -1) {
+            return
+        }
+
+        if (event.key === 'ArrowRight') {
+            event.preventDefault()
+            const nextIndex = (currentIndex + 1) % childrenRefs.length
+            childrenRefs[nextIndex].current.focus()
+        }
+
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault()
+            const prevIndex =
+                (currentIndex - 1 + childrenRefs.length) % childrenRefs.length
+            childrenRefs[prevIndex].current.focus()
+        }
+    }
+
+    return (
+        <div
+            className={cx({ fixed })}
+            ref={tabContainer}
+            data-test={dataTest}
+            role="tablist"
+            tabIndex={0}
+            onKeyDown={handleKeyDown}
+        >
+            {React.Children.map(children, (child, index) => {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, {
+                        ref: childrenRefs[index],
+                    })
+                }
+                // Wrap non-element children e.g string in a <span>
+                return (
+                    <span ref={childrenRefs[index]} tabIndex={-1}>
+                        {child}
+                    </span>
+                )
+            })}
+
+            <style jsx>{`
+                div {
+                    display: flex;
+                    align-items: flex-start;
+                    position: relative;
+                    overflow: hidden;
+                    box-shadow: inset 0 -1px 0 0 ${colors.grey400};
+                    flex-wrap: nowrap;
+                    flex-grow: 1;
+                    background: ${colors.white};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Tabs.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    fixed: PropTypes.bool,
+}
+
+export { Tabs }