@dhis2-ui/tab 9.10.3 → 9.11.1-beta.1

package/build/cjs/tab-bar/{tab-bar.stories.js → tab-bar.prod.stories.js}

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TabsWithScroller = exports.TabsWithHiddenScrollButtons = exports.TabStatesWithIcon = exports.TabStates = exports.RTL = exports.FixedTabsFillContent = exports.DefaultFluid = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../tab/index.js");
-
 var _index2 = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function AttachFile(_ref) {
   let {
     className
@@ -32,29 +25,45 @@ function AttachFile(_ref) {
     id: "4098137027"
   }, ["svg.jsx-4098137027{fill:inherit;height:24px;width:24px;vertical-align:middle;pointer-events:none;}"]));
 }
-
 AttachFile.propTypes = {
   className: _propTypes.default.string
 };
 const subtitle = 'Ssed to divide content into categories and/or sections';
-const description = "\nUse tabs to split related content into separate sections.\n\n- Each tab should contain content that relates to one another, but the content should not overlap.\n- 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.\n- Do not use tabs to compare content.\n- Do not use tabs for sequential content that needs to be done in order.\n- Do not use tabs for content that needs to be viewed at the same time.\n- 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.\n\n#### Naming\n\nGive 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.\n\nFor example: Do use \"Legends\" instead of \"Set up legends\", Do use \"Data analysis\" instead of \"Options for analysis of data\",\n\nDo 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.\n\n```js\nimport { TabBar, Tab } from '@dhis2/ui'\n```\n";
+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 => /*#__PURE__*/_react.default.createElement("div", {
   style: {
     maxWidth: 700
   }
 }, fn(), /*#__PURE__*/_react.default.createElement("p", null, "Max-width of this container is 700 px"));
-
 window.onClick = (payload, event) => {
   console.log('onClick payload', payload);
   console.log('onClick event', event);
 };
-
 const onClick = function () {
   return window.onClick(...arguments);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Tab Bar',
   component: _index2.TabBar,
   subcomponents: {
@@ -70,8 +79,6 @@ var _default = {
   },
   decorators: [Wrapper]
 };
-exports.default = _default;
-
 const DefaultFluid = args => /*#__PURE__*/_react.default.createElement(_index2.TabBar, args, /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick
 }, "Tab A"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
@@ -88,10 +95,8 @@ const DefaultFluid = args => /*#__PURE__*/_react.default.createElement(_index2.T
 }, "Tab F"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick
 }, "Tab G"));
-
 exports.DefaultFluid = DefaultFluid;
 DefaultFluid.storyName = 'Default (fluid)';
-
 const FixedTabsFillContent = args => /*#__PURE__*/_react.default.createElement(_index2.TabBar, args, /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick
 }, "Tab A"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
@@ -108,13 +113,11 @@ const FixedTabsFillContent = args => /*#__PURE__*/_react.default.createElement(_
 }, "Tab F"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick
 }, "Tab G"));
-
 exports.FixedTabsFillContent = FixedTabsFillContent;
 FixedTabsFillContent.args = {
   fixed: true
 };
 FixedTabsFillContent.storyName = 'Fixed - tabs fill content';
-
 const TabsWithScroller = args => /*#__PURE__*/_react.default.createElement(_index2.TabBar, args, /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick
 }, "Tab A"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
@@ -153,13 +156,11 @@ const TabsWithScroller = args => /*#__PURE__*/_react.default.createElement(_inde
 }, "Tab Q"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick
 }, "Tab R"));
-
 exports.TabsWithScroller = TabsWithScroller;
 TabsWithScroller.args = {
   scrollable: true
 };
 TabsWithScroller.storyName = 'Tabs with scroller';
-
 const TabsWithHiddenScrollButtons = args => /*#__PURE__*/_react.default.createElement(_index2.TabBar, args, /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick
 }, "Tab A"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
@@ -167,13 +168,11 @@ const TabsWithHiddenScrollButtons = args => /*#__PURE__*/_react.default.createEl
 }, "Tab B"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick
 }, "Tab C"));
-
 exports.TabsWithHiddenScrollButtons = TabsWithHiddenScrollButtons;
 TabsWithHiddenScrollButtons.args = {
   scrollable: true
 };
 TabsWithHiddenScrollButtons.storyName = 'Tabs with hidden scroll buttons';
-
 const TabStates = args => /*#__PURE__*/_react.default.createElement(_index2.TabBar, args, /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick
 }, "Default"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
@@ -184,10 +183,8 @@ const TabStates = args => /*#__PURE__*/_react.default.createElement(_index2.TabB
 }, "Disabled"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick
 }, "Text overflow - This tab has a very long text and it exceeds the maximum width of 320px"));
-
 exports.TabStates = TabStates;
 TabStates.storyName = 'Tab states';
-
 const TabStatesWithIcon = args => /*#__PURE__*/_react.default.createElement(_index2.TabBar, args, /*#__PURE__*/_react.default.createElement(_index.Tab, {
   onClick: onClick,
   icon: /*#__PURE__*/_react.default.createElement(AttachFile, null)
@@ -202,12 +199,9 @@ const TabStatesWithIcon = args => /*#__PURE__*/_react.default.createElement(_ind
   onClick: onClick,
   icon: /*#__PURE__*/_react.default.createElement(AttachFile, null)
 }, "Text overflow - This tab has a very long text and it exceeds the maximum width of 320px"));
-
 exports.TabStatesWithIcon = TabStatesWithIcon;
 TabStatesWithIcon.storyName = 'Tab states - with icon';
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(TabStatesWithIcon, args));
-
 exports.RTL = RTL;

package/build/cjs/tab-bar/tabs.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tabs = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Tabs = _ref => {
   let {
     children,
@@ -29,37 +20,29 @@ const Tabs = _ref => {
   } = _ref;
   const tabContainer = (0, _react.useRef)(null);
   const childrenRefs = (0, _react.useMemo)(() => _react.default.Children.map(children, () => /*#__PURE__*/_react.default.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 /*#__PURE__*/_react.default.createElement("div", {
     ref: tabContainer,
     "data-test": dataTest,
@@ -74,9 +57,8 @@ const Tabs = _ref => {
       return /*#__PURE__*/_react.default.cloneElement(child, {
         ref: childrenRefs[index]
       });
-    } // Wrap non-element children e.g string in a <span>
-
-
+    }
+    // Wrap non-element children e.g string in a <span>
     return /*#__PURE__*/_react.default.createElement("span", {
       ref: childrenRefs[index],
       tabIndex: -1,
@@ -85,9 +67,8 @@ const Tabs = _ref => {
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "771129571",
     dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.white]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;overflow:hidden;box-shadow:inset 0 -1px 0 0 ".concat(_uiConstants.colors.grey400, ";-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background:").concat(_uiConstants.colors.white, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;overflow:hidden;box-shadow:inset 0 -1px 0 0 ${_uiConstants.colors.grey400};-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background:${_uiConstants.colors.white};}`]));
 };
-
 exports.Tabs = Tabs;
 Tabs.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/es/tab/features/is_clickable/index.js

@@ -1,9 +1,9 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Tab with onClick handler is rendered', () => {
-  cy.visitStory('Tab', 'With onClick');
+  cy.visitStory('Tab', 'With on click');
 });
 Given('a disabled Tab with onClick handler is rendered', () => {
-  cy.visitStory('Tab', 'With onClick and disabled');
+  cy.visitStory('Tab', 'With on click and disabled');
 });
 When('the Tab is clicked', () => {
   cy.get('[data-test="dhis2-uicore-tab"]').click();

package/build/es/tab/tab.e2e.stories.js

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

package/build/es/tab/tab.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
-import { Tooltip } from '@dhis2-ui/tooltip';
 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';
@@ -15,18 +15,15 @@ export const Tab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dataTest
   } = _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 /*#__PURE__*/React.createElement("button", {
@@ -38,10 +35,10 @@ export const Tab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     "aria-disabled": disabled ? 'true' : 'false',
     onFocus: disabled ? undefined : event => onClick({}, event),
     tabIndex: -1,
-    className: _JSXStyle.dynamic([["2433456263", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]]) + " " + "".concat(cx('tab', className, {
+    className: _JSXStyle.dynamic([["2433456263", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]]) + " " + `${cx('tab', className, {
       selected,
       disabled
-    }))
+    })}`
   }, icon, isOverflowing ? /*#__PURE__*/React.createElement(Tooltip, {
     content: children,
     maxWidth: '100%'
@@ -54,7 +51,7 @@ export const Tab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2433456263",
     dynamic: [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]
-  }, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(colors.grey400, ";color:").concat(colors.grey600, ";font-size:14px;line-height:20px;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;inset-inline-start:0;height:4px;width:100%;background-color:transparent;}", "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", "button.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector>svg{fill:".concat(colors.grey600, ";width:14px;height:14px;margin:0 4px 0 0;}"), "button.__jsx-style-dynamic-selector:hover{color:".concat(colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(colors.grey600, ";height:2px;}"), "button.__jsx-style-dynamic-selector:active.__jsx-style-dynamic-selector::after{background-color:".concat(colors.grey800, ";}"), "button.selected.__jsx-style-dynamic-selector{color:".concat(theme.primary800, ";}"), "button.selected.__jsx-style-dynamic-selector::after{background-color:".concat(theme.primary700, ";-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;}"), "button.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(theme.primary700, ";height:4px;}"), "button.selected.__jsx-style-dynamic-selector>svg{fill:".concat(theme.primary700, ";}"), "button.disabled.__jsx-style-dynamic-selector{color:".concat(colors.grey500, ";cursor:not-allowed;}"), "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", "button.disabled.__jsx-style-dynamic-selector>svg{fill:".concat(colors.grey500, ";}")]));
+  }, [`button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align: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;}`, ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;inset-inline-start:0;height:4px;width:100%;background-color:transparent;}", "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", `button.__jsx-style-dynamic-selector:focus{outline:3px solid ${theme.focus};outline-offset:-3px;}`, "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", `button.__jsx-style-dynamic-selector>svg{fill:${colors.grey600};width:14px;height:14px;margin:0 4px 0 0;}`, `button.__jsx-style-dynamic-selector:hover{color:${colors.grey900};}`, `button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:${colors.grey600};height:2px;}`, `button.__jsx-style-dynamic-selector:active.__jsx-style-dynamic-selector::after{background-color:${colors.grey800};}`, `button.selected.__jsx-style-dynamic-selector{color:${theme.primary800};}`, `button.selected.__jsx-style-dynamic-selector::after{background-color:${theme.primary700};-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;}`, `button.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:${theme.primary700};height:4px;}`, `button.selected.__jsx-style-dynamic-selector>svg{fill:${theme.primary700};}`, `button.disabled.__jsx-style-dynamic-selector{color:${colors.grey500};cursor:not-allowed;}`, "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", `button.disabled.__jsx-style-dynamic-selector>svg{fill:${colors.grey500};}`]));
 });
 Tab.defaultProps = {
   dataTest: 'dhis2-uicore-tab'
@@ -65,10 +62,8 @@ Tab.propTypes = {
   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
 };

package/build/es/tab-bar/animated-side-scroll.js

@@ -14,13 +14,11 @@ export function animatedSideScroll(scrollBox, callback) {
   });
   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(_ref) {
   let {
     scrollBox,
@@ -34,7 +32,6 @@ function createFrameStepper(_ref) {
     if (!startTimestamp) {
       startTimestamp = timestamp;
     }
-
     elapsedTime = timestamp - startTimestamp;
     scrollValue = easeInOutQuad({
       currentTime: elapsedTime,
@@ -42,12 +39,10 @@ function createFrameStepper(_ref) {
       startValue,
       change
     });
-
     if (elapsedTime >= DURATION) {
       if (scrollValue !== endValue) {
         scrollBox.scrollLeft = endValue;
       }
-
       callback && callback();
     } else {
       scrollBox.scrollLeft = scrollValue;
@@ -55,7 +50,6 @@ function createFrameStepper(_ref) {
     }
   };
 }
-
 function easeInOutQuad(_ref2) {
   let {
     currentTime,

package/build/es/tab-bar/detect-horizontal-scrollbar-height.js

@@ -1,11 +1,21 @@
 let horizontalScrollbarHeight;
 const className = '__vertical-scrollbar-height-test__';
-const styles = "\n    .".concat(className, " {\n        position: absolute;\n        top: -9999px;\n        width: 100px;\n        height: 100px;\n        overflow-x: scroll;\n    }\n    .").concat(className, "::-webkit-scrollbar {\n        display: none;\n    }\n");
+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');

package/build/es/tab-bar/scroll-bar.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { IconChevronRight16, IconChevronLeft16 } from '@dhis2/ui-icons';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -9,19 +9,13 @@ 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 {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "scrollBox", /*#__PURE__*/createRef());
-
     _defineProperty(this, "scrollArea", /*#__PURE__*/createRef());
-
     _defineProperty(this, "horizontalScrollBarHeight", detectHorizontalScrollbarHeight());
-
     _defineProperty(this, "scrollBoxResizeObserver", null);
-
     _defineProperty(this, "calculateShouldHideButtons", () => {
       this.setState({
         hideScrollButtonsInitialized: false
@@ -38,31 +32,24 @@ class ScrollBar extends Component {
       this.setState({
         hideScrollButtons
       });
-
       if (!hideScrollButtons) {
         if (this.state.scrolledToStart) {
           this.scrollLeft();
         }
-
         if (this.state.scrolledToEnd) {
           this.scrollRight();
         }
       }
-
       this.setState({
         hideScrollButtonsInitialized: true
       });
     });
-
     _defineProperty(this, "scrollRight", () => this.scroll());
-
     _defineProperty(this, "scrollLeft", () => this.scroll(true));
-
     _defineProperty(this, "animatedScrollCallback", () => {
       this.updateScrolledToStates();
       this.attachSideScrollListener();
     });
-
     _defineProperty(this, "updateScrolledToStates", () => {
       const {
         scrollLeft,
@@ -73,7 +60,6 @@ class ScrollBar extends Component {
       } = this.scrollArea.current;
       const scrolledToStart = scrollLeft <= 0;
       const scrolledToEnd = scrollLeft + offsetWidth >= areaOffsetWidth;
-
       if (this.state.scrolledToStart !== scrolledToStart || this.state.scrolledToEnd !== scrolledToEnd) {
         this.setState({
           scrolledToStart,
@@ -81,7 +67,6 @@ class ScrollBar extends Component {
         });
       }
     });
-
     this.state = {
       scrolledToStart: true,
       scrolledToEnd: false,
@@ -92,18 +77,15 @@ class ScrollBar extends Component {
     };
     this.scrollBoxResizeObserver = new ResizeObserver(this.calculateShouldHideButtons);
   }
-
   componentDidMount() {
     this.scrollSelectedTabIntoView();
     this.attachSideScrollListener();
     this.manageShouldHideButtons();
   }
-
   componentWillUnmount() {
     this.removeSideScrollListener();
     this.scrollBoxResizeObserver.disconnect();
   }
-
   manageShouldHideButtons() {
     const {
       current: scrollBox
@@ -111,33 +93,26 @@ class ScrollBar extends Component {
     this.scrollBoxResizeObserver.observe(scrollBox);
     this.calculateShouldHideButtons();
   }
-
   scroll(goBackwards) {
     this.removeSideScrollListener();
     animatedSideScroll(this.scrollBox.current, this.animatedScrollCallback, goBackwards);
   }
-
   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,
@@ -173,13 +148,11 @@ class ScrollBar extends Component {
     }, /*#__PURE__*/React.createElement(IconChevronRight16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "4174900658",
       dynamic: [-this.horizontalScrollBarHeight]
-    }, [".scroll-box.__jsx-style-dynamic-selector{margin-bottom:".concat(-this.horizontalScrollBarHeight, "px;}")]), /*#__PURE__*/React.createElement(_JSXStyle, {
+    }, [`.scroll-box.__jsx-style-dynamic-selector{margin-bottom:${-this.horizontalScrollBarHeight}px;}`]), /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "191575146"
     }, [".scroll-bar.jsx-191575146{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".scroll-box-clipper.jsx-191575146{overflow-y:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".scroll-box.jsx-191575146{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-x:scroll;-webkit-overflow-scrolling:touch;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".scroll-box.jsx-191575146::-webkit-scrollbar{display:none;}", ".scroll-area.jsx-191575146{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;overflow-x:hidden;}"]));
   }
-
 }
-
 ScrollBar.propTypes = {
   children: PropTypes.node.isRequired,
   dataTest: PropTypes.string.isRequired,

package/build/es/tab-bar/scroll-button.js

@@ -19,7 +19,7 @@ export const ScrollButton = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2701682090",
     dynamic: [colors.white, colors.grey400, colors.grey600, colors.grey100, colors.grey200, colors.grey500]
-  }, [".scroll-button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;background-color:".concat(colors.white, ";border:none;border-bottom:1px solid ").concat(colors.grey400, ";outline:none;padding:16px 16px 11px 16px;cursor:pointer;}"), ".scroll-button.hidden.__jsx-style-dynamic-selector{display:none;}", ".scroll-button.__jsx-style-dynamic-selector svg{width:20px;height:20px;fill:".concat(colors.grey600, ";-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1;}"), ".scroll-button.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey100, ";}"), ".scroll-button.__jsx-style-dynamic-selector:active{background-color:".concat(colors.grey200, ";}"), ".scroll-button.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}", ".scroll-button.disabled.__jsx-style-dynamic-selector:hover{background-color:transparent;}", ".scroll-button.disabled.__jsx-style-dynamic-selector svg{fill:".concat(colors.grey500, ";}")]));
+  }, [`.scroll-button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align: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.__jsx-style-dynamic-selector{display:none;}", `.scroll-button.__jsx-style-dynamic-selector svg{width:20px;height:20px;fill:${colors.grey600};-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1;}`, `.scroll-button.__jsx-style-dynamic-selector:hover{background-color:${colors.grey100};}`, `.scroll-button.__jsx-style-dynamic-selector:active{background-color:${colors.grey200};}`, ".scroll-button.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}", ".scroll-button.disabled.__jsx-style-dynamic-selector:hover{background-color:transparent;}", `.scroll-button.disabled.__jsx-style-dynamic-selector svg{fill:${colors.grey500};}`]));
 };
 ScrollButton.displayName = 'ScrollButton';
 ScrollButton.propTypes = {

package/build/es/tab-bar/{tab-bar.stories.e2e.js → tab-bar.e2e.stories.js}

@@ -1,18 +1,21 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Tab } from '../tab/index.js';
 import { TabBar } from './index.js';
-storiesOf('TabBar', module).add('With children', () => /*#__PURE__*/React.createElement(TabBar, null, "I am a child")).add('Scrollable with children', () => /*#__PURE__*/React.createElement(TabBar, {
+export default {
+  title: 'TabBar'
+};
+export const WithChildren = () => /*#__PURE__*/React.createElement(TabBar, null, "I am a child");
+export const ScrollableWithChildren = () => /*#__PURE__*/React.createElement(TabBar, {
   scrollable: true
-}, "I am a child")).add('Scrollable with some tabs', () => {
+}, "I am a child");
+export const ScrollableWithSomeTabs = () => {
   const TabStaticWidth = () => /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement("div", {
     style: {
       width: 100,
       border: '1px solid black'
     }
   }, "Foo"));
-
   return /*#__PURE__*/React.createElement(TabBar, {
     scrollable: true
   }, /*#__PURE__*/React.createElement(TabStaticWidth, null), /*#__PURE__*/React.createElement(TabStaticWidth, null), /*#__PURE__*/React.createElement(TabStaticWidth, null));
-});
+};

package/build/es/tab-bar/tab-bar.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ScrollBar } from './scroll-bar.js';
 import { Tabs } from './tabs.js';
-
 const TabBar = _ref => {
   let {
     fixed,
@@ -11,28 +10,25 @@ const TabBar = _ref => {
     scrollable,
     dataTest
   } = _ref;
-
   if (scrollable) {
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-test": dataTest
     }, /*#__PURE__*/React.createElement(ScrollBar, {
-      dataTest: "".concat(dataTest, "-scrollbar")
+      dataTest: `${dataTest}-scrollbar`
     }, /*#__PURE__*/React.createElement(Tabs, {
       fixed: fixed,
-      dataTest: "".concat(dataTest, "-tabs")
+      dataTest: `${dataTest}-tabs`
     }, children)));
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: className,
     "data-test": dataTest
   }, /*#__PURE__*/React.createElement(Tabs, {
     fixed: fixed,
-    dataTest: "".concat(dataTest, "-tabs")
+    dataTest: `${dataTest}-tabs`
   }, children));
 };
-
 TabBar.defaultProps = {
   dataTest: 'dhis2-uicore-tabbar'
 };
@@ -40,10 +36,8 @@ 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
 };