@dhis2-ui/tab 9.11.0 → 9.11.1-beta.10

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Tab } from '../tab/index.js';
 import { TabBar } from './index.js';
-
 function AttachFile(_ref) {
   let {
     className
@@ -19,28 +18,44 @@ function AttachFile(_ref) {
     id: "4098137027"
   }, ["svg.jsx-4098137027{fill:inherit;height:24px;width:24px;vertical-align:middle;pointer-events:none;}"]));
 }
-
 AttachFile.propTypes = {
   className: PropTypes.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.createElement("div", {
   style: {
     maxWidth: 700
   }
 }, fn(), /*#__PURE__*/React.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);
 };
-
 export default {
   title: 'Tab Bar',
   component: TabBar,

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

@@ -3,7 +3,6 @@ import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useRef, useMemo } from 'react';
-
 const Tabs = _ref => {
   let {
     children,
@@ -12,37 +11,29 @@ const Tabs = _ref => {
   } = _ref;
   const tabContainer = useRef(null);
   const childrenRefs = useMemo(() => React.Children.map(children, () => /*#__PURE__*/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 /*#__PURE__*/React.createElement("div", {
     ref: tabContainer,
     "data-test": dataTest,
@@ -57,9 +48,8 @@ const Tabs = _ref => {
       return /*#__PURE__*/React.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.createElement("span", {
       ref: childrenRefs[index],
       tabIndex: -1,
@@ -68,9 +58,8 @@ const Tabs = _ref => {
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "771129571",
     dynamic: [colors.grey400, 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(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(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 ${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:${colors.white};}`]));
 };
-
 Tabs.propTypes = {
   dataTest: PropTypes.string.isRequired,
   children: PropTypes.node,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tab",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.10",
     "description": "UI Tabs",
     "repository": {
         "type": "git",
@@ -22,20 +22,20 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/tooltip": "9.11.0",
+        "@dhis2-ui/tooltip": "9.11.1-beta.10",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.11.0",
-        "@dhis2/ui-icons": "9.11.0",
+        "@dhis2/ui-constants": "9.11.1-beta.10",
+        "@dhis2/ui-icons": "9.11.1-beta.10",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

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

@@ -1,19 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _tab = require("./tab.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-window.onClick = window.Cypress && window.Cypress.cy.stub();
-(0, _react.storiesOf)('Tab', module).add('With onClick', () => /*#__PURE__*/_react2.default.createElement(_tab.Tab, {
-  onClick: window.onClick
-}, "Tab A")).add('With children', () => /*#__PURE__*/_react2.default.createElement(_tab.Tab, null, "I am a child")).add('With icon', () => /*#__PURE__*/_react2.default.createElement(_tab.Tab, {
-  icon: /*#__PURE__*/_react2.default.createElement("div", null, "Icon")
-}, "Children")).add('With onClick and disabled', () => /*#__PURE__*/_react2.default.createElement(_tab.Tab, {
-  onClick: window.onClick,
-  disabled: true
-}, "Tab A"));

package/build/cjs/tab-bar/tab-bar.stories.e2e.js

@@ -1,26 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("../tab/index.js");
-
-var _index2 = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('TabBar', module).add('With children', () => /*#__PURE__*/_react2.default.createElement(_index2.TabBar, null, "I am a child")).add('Scrollable with children', () => /*#__PURE__*/_react2.default.createElement(_index2.TabBar, {
-  scrollable: true
-}, "I am a child")).add('Scrollable with some tabs', () => {
-  const TabStaticWidth = () => /*#__PURE__*/_react2.default.createElement(_index.Tab, null, /*#__PURE__*/_react2.default.createElement("div", {
-    style: {
-      width: 100,
-      border: '1px solid black'
-    }
-  }, "Foo"));
-
-  return /*#__PURE__*/_react2.default.createElement(_index2.TabBar, {
-    scrollable: true
-  }, /*#__PURE__*/_react2.default.createElement(TabStaticWidth, null), /*#__PURE__*/_react2.default.createElement(TabStaticWidth, null), /*#__PURE__*/_react2.default.createElement(TabStaticWidth, null));
-});

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

@@ -1,12 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { Tab } from './tab.js';
-window.onClick = window.Cypress && window.Cypress.cy.stub();
-storiesOf('Tab', module).add('With onClick', () => /*#__PURE__*/React.createElement(Tab, {
-  onClick: window.onClick
-}, "Tab A")).add('With children', () => /*#__PURE__*/React.createElement(Tab, null, "I am a child")).add('With icon', () => /*#__PURE__*/React.createElement(Tab, {
-  icon: /*#__PURE__*/React.createElement("div", null, "Icon")
-}, "Children")).add('With onClick and disabled', () => /*#__PURE__*/React.createElement(Tab, {
-  onClick: window.onClick,
-  disabled: true
-}, "Tab A"));