@appquality/unguess-design-system 2.12.38 → 2.12.39

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v2.12.39 (Wed Nov 30 2022)
+
+#### 🐛 Bug Fix
+
+- Export tabs component [#124](https://github.com/AppQuality/unguess-design-system/pull/124) ([@marcbon](https://github.com/marcbon))
+- fix(tabs): export component [#123](https://github.com/AppQuality/unguess-design-system/pull/123) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.38 (Tue Nov 29 2022)
 
 #### 🐛 Bug Fix

package/build/index.d.ts

@@ -72,6 +72,7 @@ export * from "./stories/profile-modal";
 export * from "./stories/stepper";
 export { Table, Head as TableHead, HeaderRow, HeaderCell, Body as TableBody, Row as TableRow, Cell as TableCell, Caption, } from "./stories/table";
 export { GroupRow, GroupedTable } from "./stories/table/grouped";
+export * from "./stories/tabs";
 export * from "./stories/tags";
 export * from "./stories/tiles";
 export * from "./stories/timeline";

package/build/index.js

@@ -36,6 +36,7 @@ var formik = require('formik');
 var reactPagination = require('@zendeskgarden/react-pagination');
 var reactTables = require('@zendeskgarden/react-tables');
 var reactSpring = require('react-spring');
+var reactTabs = require('@zendeskgarden/react-tabs');
 var reactTooltips = require('@zendeskgarden/react-tooltips');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -3439,6 +3440,30 @@ var GroupedTable = function (_a) {
 };
 var templateObject_1$5, templateObject_2$2, templateObject_3$1, templateObject_4;
 
+/**
+ * Use Tabs to organize related content in a single view. This helps users navigate related content without having to switch contexts.
+
+ * Used for this:
+    - To filter information into easily parsable views
+    - To organize related content and controls within a single page
+
+ * Not for this:
+    - To guide users through a task list, use a Stepper instead
+    - As a secondary navigation bar that spans multiple pages, use Anchors instead
+ */
+var TabsComponent = React.forwardRef(function (props, ref) {
+    var _a = React.useState(props.selectedItem), selectedTab = _a[0], setSelectedTab = _a[1];
+    return (jsxRuntime.jsx(reactTabs.Tabs, __assign({ ref: ref }, props, { selectedItem: selectedTab, onChange: function (item) {
+            var _a;
+            setSelectedTab(item);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, item);
+        } })));
+});
+var Tabs = TabsComponent;
+Tabs.List = reactTabs.TabList;
+Tabs.Tab = reactTabs.Tab;
+Tabs.Panel = reactTabs.TabPanel;
+
 /**
  * Tiles are Radio buttons styled with icons or images.
 
@@ -3660,6 +3685,7 @@ exports.TableBody = Body;
 exports.TableCell = Cell;
 exports.TableHead = Head;
 exports.TableRow = Row;
+exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Textarea = Textarea;
 exports.Tiles = Tiles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.38",
+  "version": "2.12.39",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",