@pingux/astro 2.109.0 → 2.110.0-alpha.0

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

@@ -2,13 +2,12 @@ import { StoryFn } from '@storybook/react';
 import { TabsProps } 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 Uncontrolled: StoryFn<TabsProps>;
+export declare const Default: StoryFn<TabsProps>;
 export declare const Controlled: StoryFn;
-export declare const WithTooltips: StoryFn;
 export declare const Centered: StoryFn;
 export declare const DisabledSingleTab: StoryFn;
 export declare const DisabledAllTabs: StoryFn;
-export declare const CustomTabLine: StoryFn;
-export declare const TabPanelProps: StoryFn;
 export declare const ContentSlots: StoryFn;
 export declare const WithList: StoryFn;
+export declare const CustomTabLine: StoryFn;
+export declare const CustomPanelProps: StoryFn;

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithTooltips = exports.WithList = exports.Uncontrolled = exports.TabPanelProps = exports.DisabledSingleTab = exports.DisabledAllTabs = exports.CustomTabLine = exports.Controlled = exports.ContentSlots = exports.Centered = void 0;
+exports["default"] = exports.WithList = exports.DisabledSingleTab = exports.DisabledAllTabs = exports.Default = exports.CustomTabLine = exports.CustomPanelProps = exports.Controlled = exports.ContentSlots = exports.Centered = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -71,7 +71,7 @@ var tabs = [{
   name: 'Tab 3',
   children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }];
-var Uncontrolled = function Uncontrolled(args) {
+var Default = function Default(args) {
   return (0, _react2.jsx)(_index.Tabs, (0, _extends2["default"])({
     items: tabs
   }, args), (0, _react2.jsx)(_index.Tab, {
@@ -82,7 +82,7 @@ var Uncontrolled = function Uncontrolled(args) {
     title: "Tab 2"
   }, (0, _react2.jsx)(_index.Text, null, "This is content for Tab 2")));
 };
-exports.Uncontrolled = Uncontrolled;
+exports.Default = Default;
 var Controlled = function Controlled() {
   var _useState = (0, _react.useState)(tabs[0].name),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -101,19 +101,6 @@ var Controlled = function Controlled() {
   });
 };
 exports.Controlled = Controlled;
-var WithTooltips = function WithTooltips() {
-  return (0, _react2.jsx)(_index.Tabs, {
-    mode: "tooltip",
-    items: tabs
-  }, function (item) {
-    return (0, _react2.jsx)(_index.Tab, {
-      key: item.name,
-      title: item.name,
-      textValue: item.name
-    }, item.children);
-  });
-};
-exports.WithTooltips = WithTooltips;
 var Centered = function Centered() {
   return (0, _react2.jsx)(_index.Tabs, {
     tabListProps: {
@@ -152,35 +139,6 @@ var DisabledAllTabs = function DisabledAllTabs() {
   });
 };
 exports.DisabledAllTabs = DisabledAllTabs;
-var CustomTabLine = function CustomTabLine() {
-  return (0, _react2.jsx)(_index.Tabs, {
-    items: tabs
-  }, function (item) {
-    return (0, _react2.jsx)(_index.Tab, {
-      key: item.name,
-      title: item.name,
-      tabLineProps: {
-        bg: 'red'
-      }
-    }, item.children);
-  });
-};
-exports.CustomTabLine = CustomTabLine;
-var TabPanelProps = function TabPanelProps() {
-  return (0, _react2.jsx)(_index.Tabs, {
-    tabPanelProps: {
-      color: 'green',
-      fontWeight: 500
-    },
-    items: tabs
-  }, function (item) {
-    return (0, _react2.jsx)(_index.Tab, {
-      key: item.name,
-      title: item.name
-    }, item.children);
-  });
-};
-exports.TabPanelProps = TabPanelProps;
 var ContentSlots = function ContentSlots() {
   var beforeTabNode = (0, _react2.jsx)(_index.Icon, {
     icon: _LockIcon["default"],
@@ -193,7 +151,7 @@ var ContentSlots = function ContentSlots() {
     }
   });
   var nodeSx = {
-    marginLeft: 6,
+    marginLeft: 5,
     marginTop: 10
   };
   var afterTabNode = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, {
@@ -255,4 +213,33 @@ var WithList = function WithList() {
     }, item), item.children);
   });
 };
-exports.WithList = WithList;
+exports.WithList = WithList;
+var CustomTabLine = function CustomTabLine() {
+  return (0, _react2.jsx)(_index.Tabs, {
+    items: tabs
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Tab, {
+      key: item.name,
+      title: item.name,
+      tabLineProps: {
+        bg: 'red'
+      }
+    }, item.children);
+  });
+};
+exports.CustomTabLine = CustomTabLine;
+var CustomPanelProps = function CustomPanelProps() {
+  return (0, _react2.jsx)(_index.Tabs, {
+    tabPanelProps: {
+      color: 'green',
+      fontWeight: 500
+    },
+    items: tabs
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Tab, {
+      key: item.name,
+      title: item.name
+    }, item.children);
+  });
+};
+exports.CustomPanelProps = CustomPanelProps;

package/lib/cjs/components/Tabs/Tabs.style.d.ts

@@ -7,7 +7,7 @@ export declare const tab: {
     transform: string;
     '&.is-focused': {
         '& > span': {
-            boxShadow: string;
+            borderRadius: string;
             outline: string;
             outlineColor: string;
             outlineOffset: string;

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

@@ -25,7 +25,9 @@ var tab = {
   outline: 'none',
   transform: 'translateY(1px)',
   '&.is-focused': {
-    '& > span': _objectSpread({}, _Buttons.focusWithCroppedOutline)
+    '& > span': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
+      borderRadius: '4px'
+    })
   },
   '&.is-disabled': {
     cursor: 'default'

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

@@ -57,7 +57,7 @@ var tabs = [{
   name: 'Tab 3',
   children: ___EmotionJSX(Text, null, "Tab 3 body")
 }];
-export var Uncontrolled = function Uncontrolled(args) {
+export var Default = function Default(args) {
   return ___EmotionJSX(Tabs, _extends({
     items: tabs
   }, args), ___EmotionJSX(Tab, {
@@ -85,18 +85,6 @@ export var Controlled = function Controlled() {
     }, item.children);
   });
 };
-export var WithTooltips = function WithTooltips() {
-  return ___EmotionJSX(Tabs, {
-    mode: "tooltip",
-    items: tabs
-  }, function (item) {
-    return ___EmotionJSX(Tab, {
-      key: item.name,
-      title: item.name,
-      textValue: item.name
-    }, item.children);
-  });
-};
 export var Centered = function Centered() {
   return ___EmotionJSX(Tabs, {
     tabListProps: {
@@ -132,33 +120,6 @@ export var DisabledAllTabs = function DisabledAllTabs() {
     }, item.children);
   });
 };
-export var CustomTabLine = function CustomTabLine() {
-  return ___EmotionJSX(Tabs, {
-    items: tabs
-  }, function (item) {
-    return ___EmotionJSX(Tab, {
-      key: item.name,
-      title: item.name,
-      tabLineProps: {
-        bg: 'red'
-      }
-    }, item.children);
-  });
-};
-export var TabPanelProps = function TabPanelProps() {
-  return ___EmotionJSX(Tabs, {
-    tabPanelProps: {
-      color: 'green',
-      fontWeight: 500
-    },
-    items: tabs
-  }, function (item) {
-    return ___EmotionJSX(Tab, {
-      key: item.name,
-      title: item.name
-    }, item.children);
-  });
-};
 export var ContentSlots = function ContentSlots() {
   var beforeTabNode = ___EmotionJSX(Icon, {
     icon: LockIcon,
@@ -171,7 +132,7 @@ export var ContentSlots = function ContentSlots() {
     }
   });
   var nodeSx = {
-    marginLeft: 6,
+    marginLeft: 5,
     marginTop: 10
   };
   var afterTabNode = ___EmotionJSX(Box, null, ___EmotionJSX(Badge, {
@@ -231,4 +192,31 @@ export var WithList = function WithList() {
       title: item.name
     }, item), item.children);
   });
+};
+export var CustomTabLine = function CustomTabLine() {
+  return ___EmotionJSX(Tabs, {
+    items: tabs
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name,
+      tabLineProps: {
+        bg: 'red'
+      }
+    }, item.children);
+  });
+};
+export var CustomPanelProps = function CustomPanelProps() {
+  return ___EmotionJSX(Tabs, {
+    tabPanelProps: {
+      color: 'green',
+      fontWeight: 500
+    },
+    items: tabs
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name
+    }, item.children);
+  });
 };

package/lib/components/Tabs/Tabs.style.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { focusWithCroppedOutline, quiet } from '../Button/Buttons.styles';
+import { defaultFocus, quiet } from '../Button/Buttons.styles';
 export var tab = {
   pt: 10,
   cursor: 'pointer',
@@ -18,7 +18,9 @@ export var tab = {
   outline: 'none',
   transform: 'translateY(1px)',
   '&.is-focused': {
-    '& > span': _objectSpread({}, focusWithCroppedOutline)
+    '& > span': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+      borderRadius: '4px'
+    })
   },
   '&.is-disabled': {
     cursor: 'default'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.109.0",
+  "version": "2.110.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",