@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256

package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap

@@ -1,5 +1,152 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Tab renderBefore / renderAfter slots renderAfter renders a node to the right of the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t7"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t7"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+      <span>
+        3
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore and renderAfter both render around the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t8"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t8"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+      <span>
+        ▶
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore as function renders custom node 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t9"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t9"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab renderBefore / renderAfter slots renderBefore renders a node to the left of the label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t6"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t6"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ◀
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Tab rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -20,3 +167,172 @@ exports[`Tab rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Tab variant-based label rendering renderIcon as function receives no args and renders custom node 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t5"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t5"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ★
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering renderIcon overrides iconName 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t4"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t4"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <span>
+        ★
+      </span>
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="icon" renders icon and suppresses text label 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t2"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t2"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-menu    rtl "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="iconWithText" renders icon followed by text 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t3"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t3"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-menu    rtl "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab variant-based label rendering variant="text" renders text only 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="t1"
+    aria-label="Home"
+    aria-selected="false"
+    class="tab horizontal basisAuto shrinkOff"
+    data-id="tabMenu_Tab"
+    data-key="t1"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="textContainer flex cover rowdir both"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="tabText grow basisAuto shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Home
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/Tab/props/defaultProps.js

@@ -9,7 +9,8 @@ var Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
-  dataSelectorId: 'tab'
+  dataSelectorId: 'tab',
+  variant: 'text'
 };
 exports.Tab_defaultProps = Tab_defaultProps;
 var TabContent_defaultProps = {
@@ -45,7 +46,7 @@ var Tabs_defaultProps = {
   searchBoxSize: 'small',
   searchErrorText: 'No results',
   placeHolderText: 'Search',
-  isAbsolutePositioningNeeded: true,
+  isAbsolutePositioningNeeded: false,
   isRestrictScroll: false,
   moreContainerClass: ''
 };

package/lib/Tab/props/propTypes.js

@@ -7,8 +7,12 @@ exports.Tabs_propTypes = exports.Tab_propTypes = exports.TabWrapper_propTypes =
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _tabConfigs = require("../utils/tabConfigs");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var renderSlotType = _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]);
+
 var Tab_propTypes = {
   activeClass: _propTypes["default"].string,
   align: _propTypes["default"].oneOf(['vertical', 'horizontal']),
@@ -36,7 +40,14 @@ var Tab_propTypes = {
   contentAlignBox: _propTypes["default"].oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   customProps: _propTypes["default"].object,
   isVirtual: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  variant: _propTypes["default"].oneOf(Object.values(_tabConfigs.VARIANT)),
+  iconPlacement: _propTypes["default"].string,
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  renderIcon: renderSlotType,
+  renderBefore: renderSlotType,
+  renderAfter: renderSlotType
 };
 exports.Tab_propTypes = Tab_propTypes;
 var TabContent_propTypes = {
@@ -95,7 +106,7 @@ var Tabs_propTypes = {
   showTitleInMoreOptions: _propTypes["default"].bool,
   style: _propTypes["default"].object,
   togglePopup: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta', 'default']),
   getTargetRef: _propTypes["default"].func,
   containerClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
@@ -128,7 +139,7 @@ var TabWrapper_propTypes = {
   needPadding: _propTypes["default"].bool,
   needTabBorder: _propTypes["default"].bool,
   onSelect: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta', 'default']),
   dataSelectorId: _propTypes["default"].string
 };
 exports.TabWrapper_propTypes = TabWrapper_propTypes;

package/lib/Tab/utils/tabConfigs.js

@@ -3,7 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TAB_POPUP_POSITION_MAPPING = exports.TAB_DIRECTION_MAPPING = exports.TAB_ALIGN_MAPPING = void 0;
+exports.VARIANT = exports.TAB_POPUP_POSITION_MAPPING = exports.TAB_DIRECTION_MAPPING = exports.TAB_ALIGN_MAPPING = void 0;
+var VARIANT = {
+  TEXT: 'text',
+  ICON: 'icon',
+  ICON_WITH_TEXT: 'iconWithText'
+};
+exports.VARIANT = VARIANT;
 var TAB_ALIGN_MAPPING = {
   vertical: 'column',
   horizontal: 'row',

package/lib/utils/datetime/common.js

@@ -46,6 +46,10 @@ function getTimeOffset() {
 }
 
 function formatDate(dateMill, mask) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      i18nShortMonths = _ref.i18nShortMonths,
+      i18nMonths = _ref.i18nMonths;
+
   var date = new Date(dateMill);
   var O = getTimeOffset()[0];
   var Z = getTimeOffset()[1];
@@ -57,6 +61,10 @@ function formatDate(dateMill, mask) {
   var M = date.getMinutes();
   var s = date.getSeconds();
   var L = date.getMilliseconds();
+  var defaultShortMonths = dateFormat.monthNames.slice(0, 12);
+  var defaultMonths = dateFormat.monthNames.slice(12);
+  var resolvedShortMonths = Array.isArray(i18nShortMonths) ? i18nShortMonths : defaultShortMonths;
+  var resolvedMonths = Array.isArray(i18nMonths) ? i18nMonths : defaultMonths;
   var flags = {
     d: d,
     O: O,
@@ -69,8 +77,8 @@ function formatDate(dateMill, mask) {
     DDDD: dateFormat.dayNames[D + 7],
     M: m + 1,
     MM: pad(m + 1, 2),
-    MMM: dateFormat.monthNames[m],
-    MMMM: dateFormat.monthNames[m + 12],
+    MMM: resolvedShortMonths[m],
+    MMMM: resolvedMonths[m],
     yy: String(y).slice(2),
     YY: String(y).slice(2),
     yyyy: y,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-252.4",
+  "version": "1.0.0-temp-256",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -33,7 +33,7 @@
     "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node ../prePublish.js && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
     "postpublish": "node ../postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -74,7 +74,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@dot-system/css-audit-tool": "1.0.0",
-    "@zohodesk-private/color-variable-preprocessor": "1.3.1",
+    "@zohodesk-private/color-variable-preprocessor": "1.3.3",
     "@zohodesk-private/css-variable-migrator": "1.0.11",
     "@zohodesk-private/node-plugins": "1.1.14",
     "@zohodesk-private/react-prop-validator": "1.2.3",
@@ -82,17 +82,18 @@
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.9",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.3",
-    "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.3.5",
+    "@zohodesk/icons": "1.3.5",
+    "@zohodesk/layout": "3.2.0",
+    "@zohodesk/svg": "1.3.8",
     "@zohodesk/utils": "1.3.16",
-    "@zohodesk/variables": "1.3.1",
+    "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
     "@zohodesk/react-cli": "1.1.27",
     "@zohodesk/client_build_tool": "0.0.23",
     "color": "4.2.3",
+    "@zohodesk/jsx_attribute_wrapper": "1.0.0",
     "@dot-system/css-utility": "0.1.1"
   },
   "dependencies": {
@@ -102,16 +103,16 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.3",
-    "@zohodesk/variables": "1.3.1",
-    "@zohodesk/svg": "1.3.5",
+    "@zohodesk/icons": "1.3.5",
+    "@zohodesk/variables": "1.3.2",
+    "@zohodesk/svg": "1.3.8",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
-    "@zohodesk/layout": "3.1.0",
+    "@zohodesk/layout": "3.2.0",
     "@zohodesk/dotkit": "1.0.9",
     "color": "4.2.3",
     "@dot-system/css-utility": "0.1.1"