@pingux/astro 2.142.1-alpha.1 → 2.143.0-alpha.1

package/lib/cjs/components/TableBase/TableBase.stories.js

@@ -89,14 +89,17 @@ var statusVariant = {
   Inactive: 'secondaryStatusBadge'
 };
 var Default = function Default() {
-  return (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table"
   }, (0, _react2.jsx)(_.THead, {
     columns: headers
   }, function (column) {
     return (0, _react2.jsx)(_.Column, {
-      key: column.key
+      key: column.key,
+      minWidth: 200
     }, column.name);
   }), (0, _react2.jsx)(_.TBody, {
     items: objects
@@ -106,7 +109,7 @@ var Default = function Default() {
     }, function (columnKey) {
       return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 exports.Default = Default;
 var MultiSelection = function MultiSelection() {
@@ -114,7 +117,9 @@ var MultiSelection = function MultiSelection() {
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     selectedKeys = _React$useState2[0],
     setSelectedKeys = _React$useState2[1];
-  return (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table",
     selectionMode: "multiple",
@@ -124,7 +129,8 @@ var MultiSelection = function MultiSelection() {
     columns: headers
   }, function (column) {
     return (0, _react2.jsx)(_.Column, {
-      key: column.key
+      key: column.key,
+      minWidth: 200
     }, column.name);
   }), (0, _react2.jsx)(_.TBody, {
     items: objects
@@ -134,42 +140,38 @@ var MultiSelection = function MultiSelection() {
     }, function (columnKey) {
       return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 exports.MultiSelection = MultiSelection;
 var WithStickyHeader = function WithStickyHeader() {
-  return (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper",
+    height: "400px"
+  }, (0, _react2.jsx)(_.TableBase, {
     "aria-label": "table",
     isStickyHeader: true,
     selectionMode: "single",
     defaultSelectedKeys: ['2'],
-    disabledKeys: ['3'],
-    tableBodyProps: {
-      style: {
-        height: '300px'
-      }
-    }
+    disabledKeys: ['3']
   }, (0, _react2.jsx)(_.THead, null, (0, _react2.jsx)(_.Column, {
-    width: 200
+    minWidth: 200
   }, "Name"), (0, _react2.jsx)(_.Column, {
-    width: 300
+    minWidth: 300
   }, "Email"), (0, _react2.jsx)(_.Column, {
-    width: 150
-  }, "Status"), (0, _react2.jsx)(_.Column, {
-    width: "1fr"
-  }, "Bio")), (0, _react2.jsx)(_.TBody, {
+    minWidth: 150
+  }, "Status"), (0, _react2.jsx)(_.Column, null, "Bio")), (0, _react2.jsx)(_.TBody, {
     items: _items.items
   }, function (item) {
     var _context;
     return (0, _react2.jsx)(_.Row, {
       key: item.id
-    }, (0, _react2.jsx)(_.Cell, null, (0, _concat["default"])(_context = "".concat(item.firstName, " ")).call(_context, item.lastName), ' ', item.id), (0, _react2.jsx)(_.Cell, null, item.email), (0, _react2.jsx)(_.Cell, null, (0, _react2.jsx)(_.Badge, {
+    }, (0, _react2.jsx)(_.Cell, null, (0, _concat["default"])(_context = "".concat(item.firstName, " ")).call(_context, item.lastName)), (0, _react2.jsx)(_.Cell, null, item.email), (0, _react2.jsx)(_.Cell, null, (0, _react2.jsx)(_.Badge, {
       variant: statusVariant[item.status],
       label: item.status
     })), (0, _react2.jsx)(_.Cell, null, (0, _react2.jsx)(_.Text, {
       variant: "textEllipsis"
-    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!")));
-  }));
+    }, "Lorem ipsum dolor sit amet.")));
+  })));
 };
 exports.WithStickyHeader = WithStickyHeader;
 WithStickyHeader.parameters = {
@@ -190,16 +192,15 @@ var ExampleTable = function ExampleTable() {
     paginationState = _usePaginationState.paginationState;
   var renderItems = (0, _slice["default"])(_items.items).call(_items.items, paginationState.firstRenderedIndex, paginationState.lastRenderedIndex + 1);
   return (0, _react2.jsx)(_.TableBase, {
-    "aria-label": "table"
+    "aria-label": "table",
+    className: "has-pagination"
   }, (0, _react2.jsx)(_.THead, null, (0, _react2.jsx)(_.Column, {
-    width: 200
+    minWidth: 200
   }, "Name"), (0, _react2.jsx)(_.Column, {
-    width: 300
+    minWidth: 300
   }, "Email"), (0, _react2.jsx)(_.Column, {
-    width: 150
-  }, "Status"), (0, _react2.jsx)(_.Column, {
-    width: "1fr"
-  }, "Bio")), (0, _react2.jsx)(_.TBody, {
+    minWidth: 150
+  }, "Status"), (0, _react2.jsx)(_.Column, null, "Bio")), (0, _react2.jsx)(_.TBody, {
     items: renderItems
   }, function (item) {
     var _context2;
@@ -210,7 +211,7 @@ var ExampleTable = function ExampleTable() {
       label: item.status
     })), (0, _react2.jsx)(_.Cell, null, (0, _react2.jsx)(_.Text, {
       variant: "textEllipsis"
-    }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!")));
+    }, "Lorem ipsum dolor sit amet.")));
   }));
 };
 var WithPagination = function WithPagination() {
@@ -218,14 +219,20 @@ var WithPagination = function WithPagination() {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     offsetCount = _useState2[0],
     setOffsetCount = _useState2[1];
-  return (0, _react2.jsx)(_.PaginationProvider, null, (0, _react2.jsx)(_.Box, {
-    gap: "sm"
-  }, (0, _react2.jsx)(ExampleTable, null), (0, _react2.jsx)(_.Pagination, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.PaginationProvider, null, (0, _react2.jsx)(_.Box, {
+    variant: "cards.body",
+    overflow: "auto",
+    p: "0"
+  }, (0, _react2.jsx)(ExampleTable, null)), (0, _react2.jsx)(_.Box, {
+    variant: "cards.footer"
+  }, (0, _react2.jsx)(_.Pagination, {
     totalCount: _items.items.length,
     offsetCount: offsetCount,
     onOffsetCountChange: setOffsetCount,
     offsetOptions: [10, 20, 50, 100]
-  })));
+  }))));
 };
 exports.WithPagination = WithPagination;
 WithPagination.parameters = {
@@ -342,7 +349,9 @@ var DynamicWithSorting = function DynamicWithSorting() {
       direction: 'ascending'
     }
   });
-  return (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
     "aria-label": "Dynamic table",
     onSortChange: function onSortChange(descriptor) {
       if (descriptor.column) {
@@ -367,7 +376,7 @@ var DynamicWithSorting = function DynamicWithSorting() {
     }, function (columnKey) {
       return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 
 // Added to bypass color contrast issue due to virtualizer

package/lib/cjs/components/TableBase/TableBase.styles.d.ts

@@ -7,12 +7,14 @@ declare const _default: {
             position: string;
             top: number;
             zIndex: number;
+            boxShadow: string;
         };
     };
     tbody: {
         borderBottom: string;
         borderBottomColor: string;
-        overflow: string;
+        overflowX: string;
+        scrollPaddingBottom: string;
     };
     caption: {
         fontFamily: string;
@@ -23,6 +25,7 @@ declare const _default: {
     };
     container: {
         width: string;
+        height: string;
         borderSpacing: string;
         borderCollapse: string;
         position: string;
@@ -82,12 +85,7 @@ declare const _default: {
             outlineOffset: string;
         };
         '&.is-hovered': {};
-        '&.is-selected': {
-            outline: string;
-            outlineStyle: string;
-            outlineColor: string;
-            outlineOffset: string;
-        };
+        '&.is-selected': {};
         '&.is-disabled': {
             bg: string;
             opacity: number;

package/lib/cjs/components/TableBase/TableBase.styles.js

@@ -25,6 +25,7 @@ var defaultFocus = {
 };
 var container = {
   width: '100%',
+  height: '100%',
   borderSpacing: '0',
   borderCollapse: 'collapse',
   position: 'relative'
@@ -43,7 +44,8 @@ var thead = {
   '&.is-sticky': {
     position: 'sticky',
     top: 0,
-    zIndex: 1
+    zIndex: 1,
+    boxShadow: '0 1px 0 #68747f'
   }
 };
 var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
@@ -59,7 +61,8 @@ var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
 var tbody = {
   borderBottom: '1px solid',
   borderBottomColor: 'neutral.80',
-  overflow: 'auto'
+  overflowX: 'auto',
+  scrollPaddingBottom: '20px'
 };
 var row = {
   '&:nth-of-type(odd) ': {
@@ -72,7 +75,9 @@ var row = {
   '&.is-hovered': {
     // This is the hover state for the row
   },
-  '&.is-selected': _objectSpread({}, defaultFocus),
+  '&.is-selected': {
+    // This is the selected state for the row
+  },
   '&.is-disabled': {
     bg: 'neutral.90',
     opacity: 0.5,

package/lib/cjs/components/TableBase/stories/NextGenTableBase.js

@@ -42,7 +42,10 @@ var NextGenTableBase = function NextGenTableBase() {
     additional_grant: '+25,000',
     total_grant: '75,000'
   }];
-  return (0, _react2.jsx)(_.TableBase, {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper",
+    overflow: "unset"
+  }, (0, _react2.jsx)(_.TableBase, {
     caption: "Lorem ipsum",
     "aria-label": "table"
   }, (0, _react2.jsx)(_.THead, {
@@ -59,7 +62,7 @@ var NextGenTableBase = function NextGenTableBase() {
     }, function (columnKey) {
       return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
     });
-  }));
+  })));
 };
 var _default = NextGenTableBase;
 exports["default"] = _default;

package/lib/cjs/components/Tabs/Tabs.stories.js

@@ -59,13 +59,25 @@ var _default = {
 };
 exports["default"] = _default;
 var tabs = [{
-  name: 'Tab 1',
-  children: (0, _react2.jsx)(_index.Text, null, "Tab 1 body")
+  name: 'Overview',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }, {
-  name: 'Tab 2',
-  children: (0, _react2.jsx)(_index.Text, null, "Tab 2 body")
+  name: 'Configuration',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Resources',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Policies',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Attribute Mappings',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
+}, {
+  name: 'Access',
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }, {
-  name: 'Tab 3',
+  name: 'Integration',
   children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }];
 var customTabs = [{
@@ -96,7 +108,11 @@ var Controlled = function Controlled() {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     currentTab = _useState2[0],
     setCurrentTab = _useState2[1];
-  return (0, _react2.jsx)(_index.Tabs, {
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      maxWidth: '500px'
+    }
+  }, (0, _react2.jsx)(_index.Tabs, {
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab,
     items: tabs
@@ -106,7 +122,7 @@ var Controlled = function Controlled() {
       title: item.name,
       textValue: item.name
     }, item.children);
-  });
+  }));
 };
 exports.Controlled = Controlled;
 var Centered = function Centered() {

package/lib/cjs/components/Text/Text.stories.d.ts

@@ -3,5 +3,6 @@ import { TextProps } from '../../types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<TextProps>;
+export declare const Onyx: StoryFn<TextProps>;
 export declare const CustomWidth: StoryFn;
 export declare const CustomStyle: StoryFn;