@enact/limestone 1.3.0

package/TabLayout/TabLayout.module.css

@@ -0,0 +1,101 @@
+.tabLayout {
+  height: 100%;
+  position: relative;
+  --lime-tablayout-collapse-duration: 250ms;
+}
+:global(.noAnimation) .tabLayout {
+  --lime-tablayout-collapse-duration: 0;
+}
+.tabLayout.collapsed {
+  /* We need a placeholder for spotlight default focus rules */
+}
+.tabLayout.collapsed .tabGroup .tab.vertical.button.selected .bg {
+  /* Override TabLayout */
+}
+.tabLayout.anchorEnd,
+.tabLayout.anchorRight {
+  flex-direction: row-reverse;
+}
+:global(.enact-locale-right-to-left) .tabLayout.anchorRight {
+  flex-direction: row;
+}
+:global(.enact-locale-right-to-left) .tabLayout.anchorLeft {
+  flex-direction: row-reverse;
+}
+.tabLayout.horizontal .content {
+  margin-top: var(--primitive-spacing-96);
+}
+.tabLayout.horizontal .tabs {
+  padding-left: calc(var(--scrollable) * var(--offset));
+  padding-right: calc(var(--scrollable) * var(--offset));
+}
+:global(.enact-locale-right-to-left) .tabLayout.horizontal .tabs {
+  padding-left: calc(var(--scrollable) * var(--offset));
+  padding-right: calc(var(--scrollable) * var(--offset));
+}
+.tabLayout.vertical .tabs {
+  transition: opacity var(--lime-tablayout-collapse-duration) ease-out;
+  will-change: opacity;
+  opacity: 1;
+}
+.tabLayout.vertical .tabsExpanded {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--cell-size);
+  transition: opacity var(--lime-tablayout-collapse-duration) ease-out, transform var(--lime-tablayout-collapse-duration) ease-in-out;
+  will-change: opacity, transform;
+  transform: translateX(0);
+}
+.tabLayout.vertical .content {
+  margin-top: 0;
+  transition: transform var(--lime-tablayout-collapse-duration) ease-in-out;
+  will-change: transform;
+  transform: translateX(0);
+}
+.tabLayout.vertical:not(.collapsed) .tabs {
+  opacity: 0;
+}
+.tabLayout.vertical:not(.collapsed) .tabsExpanded {
+  opacity: 1;
+}
+.tabLayout.vertical:not(.collapsed) .content {
+  transform: translateX(var(--tablayout-expand-collapse-diff));
+}
+.tabLayout.vertical:not(.collapsed).anchorEnd .content,
+.tabLayout.vertical:not(.collapsed).anchorRight .content {
+  transform: translateX(calc(var(--tablayout-expand-collapse-diff) * -1));
+}
+:global(.enact-locale-right-to-left) .tabLayout.vertical:not(.collapsed).anchorEnd .content {
+  transform: translateX(var(--tablayout-expand-collapse-diff));
+}
+:global(.enact-locale-right-to-left) .tabLayout.vertical:not(.collapsed).anchorStart .content,
+:global(.enact-locale-right-to-left) .tabLayout.vertical:not(.collapsed).anchorRight .content {
+  transform: translateX(calc(var(--tablayout-expand-collapse-diff) * -1));
+}
+.tabLayout.vertical.collapsed .tabsExpanded {
+  opacity: 0;
+  transform: translateX(calc(var(--tablayout-expand-collapse-diff) * -1));
+  pointer-events: none;
+}
+.tabLayout.vertical.collapsed.anchorEnd .tabsExpanded,
+.tabLayout.vertical.collapsed.anchorRight .tabsExpanded {
+  transform: translateX(var(--tablayout-expand-collapse-diff));
+}
+:global(.enact-locale-right-to-left) .tabLayout.vertical.collapsed.anchorEnd .tabsExpanded {
+  transform: translateX(calc(var(--tablayout-expand-collapse-diff) * -1));
+}
+:global(.enact-locale-right-to-left) .tabLayout.vertical.collapsed.anchorStart .tabsExpanded,
+:global(.enact-locale-right-to-left) .tabLayout.vertical.collapsed.anchorRight .tabsExpanded {
+  transform: translateX(var(--tablayout-expand-collapse-diff));
+}
+.tabLayout .tabGroup .tab.vertical.button.selected .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-key) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
+:global(.spotlight-input-mouse) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
+  /* Override TabLayout */
+}
+:global(.spotlight-input-touch) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):active .bg {
+  /* Override TabLayout */
+}

package/TabLayout/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "TabLayout.js"
+}

package/TabLayout/tests/TabGroup-specs.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _TabGroup = _interopRequireDefault(require("../TabGroup"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+describe('TabGroup specs', function () {
+  test('should only have one icon item when collapsed and vertical orientation when there is a tab without an icon', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      "data-testid": "tabs",
+      orientation: "vertical",
+      collapsed: true,
+      tabs: [{
+        title: 'Home',
+        icon: 'home'
+      }, {
+        title: 'Button'
+      }, {
+        title: 'Item',
+        icon: 'plus'
+      }]
+    }));
+    var tabGroup = _react.screen.getByTestId('tabs');
+    var expectedCode = 983019; // decimal converted charCode of Unicode 'horizontal lines' character
+    var actualCode = tabGroup.textContent.codePointAt();
+    expect(actualCode).toBe(expectedCode);
+  });
+  test('should only have 3 item tabs when 3 tabs were specified', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      tabs: [{
+        title: 'Home',
+        icon: 'home'
+      }, {
+        title: 'Button',
+        icon: 'demosync'
+      }, {
+        title: 'Item',
+        icon: 'playcircle'
+      }]
+    }));
+    var expected = 3 * 2; // each tab has two children due to a dummy sibling by Spottable
+    var actual = _react.screen.getByRole('tablist').children;
+    expect(actual).toHaveLength(expected);
+  });
+  test('should render group even if it has no tabs', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      tabs: []
+    }));
+    var tabGroup = _react.screen.getByRole('tablist');
+    expect(tabGroup).toBeInTheDocument();
+  });
+  test('should render icons', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      tabs: [{
+        title: '',
+        icon: 'home',
+        'data-testid': 'homeIcon'
+      }, {
+        title: '',
+        icon: 'demosync',
+        'data-testid': 'demosyncIcon'
+      }, {
+        title: '',
+        icon: 'playcircle',
+        'data-testid': 'playcircleIcon'
+      }]
+    }));
+    var actualHomeIcon = _react.screen.getByTestId('homeIcon').textContent.codePointAt();
+    var expectedHomeIcon = 983420; // decimal converted charCode of Unicode 'home' character
+    var actualDemosyncIcon = _react.screen.getByTestId('demosyncIcon').textContent.codePointAt();
+    var expectedDemosyncIcon = 983355; // decimal converted charCode of Unicode 'demosync' character
+    var actualPlayCircleIcon = _react.screen.getByTestId('playcircleIcon').textContent.codePointAt();
+    var expectedPlayCircleIcon = 983312; // decimal converted charCode of Unicode 'playcircle' character
+
+    expect(actualHomeIcon).toBe(expectedHomeIcon);
+    expect(actualDemosyncIcon).toBe(expectedDemosyncIcon);
+    expect(actualPlayCircleIcon).toBe(expectedPlayCircleIcon);
+  });
+  test('should render sprites', function () {
+    var simpleAnimationProps = {
+      src: 'dummyimage',
+      rows: 2,
+      columns: 2
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      tabs: [{
+        title: '',
+        sprite: simpleAnimationProps,
+        'data-testid': 'sprite'
+      }]
+    }));
+    var sprite = _react.screen.getByTestId('sprite');
+    expect(sprite).toBeInTheDocument();
+  });
+  test('should disable the list icon when collapsed and all tabs are disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      "data-testid": "tabGroup",
+      collapsed: true,
+      orientation: "vertical",
+      tabs: [{
+        title: 'Home',
+        disabled: true
+      }, {
+        title: 'Button',
+        disabled: true
+      }, {
+        title: 'Item',
+        disabled: true
+      }]
+    }));
+    var iconList = _react.screen.getByTestId('tabGroup').children.item(0);
+    expect(iconList).toHaveAttribute('aria-disabled', 'true');
+  });
+  test('should not disable the list icon when collapsed and all tabs are not disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      "data-testid": "tabGroup",
+      collapsed: true,
+      orientation: "vertical",
+      tabs: [{
+        title: 'Home',
+        disabled: true
+      }, {
+        title: 'Button',
+        disabled: false
+      }, {
+        title: 'Item',
+        disabled: true
+      }]
+    }));
+    var iconList = _react.screen.getByTestId('tabGroup').children.item(0);
+    expect(iconList).toHaveAttribute('aria-disabled', 'false');
+  });
+  test('should fire `onTabClick` with `onTabClick` type when a tab is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleTabClick = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      tabs: [{
+        title: 'Home',
+        icon: 'home',
+        onTabClick: handleTabClick
+      }, {
+        title: 'Button',
+        icon: 'demosync'
+      }, {
+        title: 'Item',
+        icon: 'playcircle'
+      }]
+    }));
+    yield user.click(_react.screen.getByRole('tablist').children[0]);
+    var expected = {
+      type: 'onTabClick'
+    };
+    var actual = handleTabClick.mock.calls.length && handleTabClick.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  }));
+  test('should fire `onFocusTab` when tab is focused', function () {
+    var handleFocusTab = jest.fn();
+    jest.spyOn(_spotlight["default"], 'getPointerMode').mockReturnValue(false);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      onFocus: handleFocusTab,
+      orientation: "vertical",
+      tabs: [{
+        title: 'Home',
+        icon: 'home',
+        'data-testid': 'homeTab'
+      }, {
+        title: 'Button',
+        icon: 'demosync'
+      }, {
+        title: 'Item',
+        icon: 'playcircle'
+      }]
+    }));
+    var homeTab = _react.screen.getByTestId('homeTab');
+    _react.fireEvent.focus(homeTab);
+    expect(handleFocusTab).toHaveBeenCalled();
+  });
+  test('should set the size for all tabs in horizontal orientation', function () {
+    var size = 456;
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      orientation: "horizontal",
+      size: size,
+      tabs: [{
+        title: 'Home',
+        icon: 'home'
+      }, {
+        title: 'Button',
+        icon: 'demosync'
+      }, {
+        title: 'Item',
+        icon: 'playcircle'
+      }]
+    }));
+    var tabs = _react.screen.getAllByRole('tab');
+    tabs.forEach(function (tab) {
+      expect(tab).toHaveClass("".concat(size));
+    });
+  });
+  test('should render tabs only for truthy values', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
+      tabs: ['', null, {
+        title: 'Home',
+        icon: 'home'
+      }]
+    }));
+    var tabList = _react.screen.getAllByRole('tab');
+    expect(tabList.length).toEqual(1);
+  });
+});