@pingux/astro 2.149.2-alpha.1 → 2.150.0-alpha.0

package/lib/cjs/components/Icon/Icon.js

@@ -29,15 +29,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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) { (0, _defineProperty2["default"])(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; }
 var Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var theme = (0, _hooks.useGetTheme)();
   var color = props.color,
     IconComponent = props.icon,
     sx = props.sx,
     _props$size = props.size,
-    size = _props$size === void 0 ? 'sm' : _props$size,
+    size = _props$size === void 0 ? theme.defaultIconSize : _props$size,
     variant = props.variant,
     title = props.title,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var theme = (0, _hooks.useGetTheme)();
   var _useTShirtSize = (0, _hooks.useTShirtSize)({
       size: size,
       sizes: theme.tShirtSizes

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

@@ -15,6 +15,7 @@ var _PencilIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilIcon")
 var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _IconButton = _interopRequireDefault(require("./IconButton.mdx"));
@@ -77,7 +78,6 @@ var WithTooltip = function WithTooltip(args) {
     title: "Edit"
   }, args), (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
-    size: "sm",
     title: {
       name: 'Create Icon'
     }
@@ -109,6 +109,8 @@ Disabled.parameters = {
   }
 };
 var Sizes = function Sizes() {
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
     key: "head"
   }, (0, _react2.jsx)(_index.TableCell, {
@@ -126,47 +128,41 @@ var Sizes = function Sizes() {
     bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, {
     width: "40%"
-  }, (0, _react2.jsx)(_index.Text, null, "XXS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_index.Text, null, "XXS |", ' ', isOnyx ? '18px' : '15px')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
   }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='xxs'/>"), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
+  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "create button",
-    variant: "inverted",
-    sx: {
-      width: 'unset'
-    }
+    variant: "inverted"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
     size: "xxs",
     title: {
       name: 'Create Icon'
     }
-  })))), (0, _react2.jsx)(_index.TableRow, {
+  }))))), (0, _react2.jsx)(_index.TableRow, {
     bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, {
     width: "40%"
-  }, (0, _react2.jsx)(_index.Text, null, "XS | 21px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_index.Text, null, "XS |", ' ', isOnyx ? '22px' : '21px')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
   }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='xs'/>"), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
+  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "create button",
-    variant: "inverted",
-    sx: {
-      width: 'unset'
-    }
+    variant: "inverted"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
     size: "xs",
     title: {
       name: 'Create Icon'
     }
-  })))), (0, _react2.jsx)(_index.TableRow, {
+  }))))), (0, _react2.jsx)(_index.TableRow, {
     bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, {
     width: "40%"
@@ -176,41 +172,35 @@ var Sizes = function Sizes() {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='sm'/>"), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
+  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "create button",
-    variant: "inverted",
-    sx: {
-      width: 'unset'
-    }
+    variant: "inverted"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
     size: "sm",
     title: {
       name: 'Create Icon'
     }
-  })))), (0, _react2.jsx)(_index.TableRow, {
+  }))))), (0, _react2.jsx)(_index.TableRow, {
     bg: "transparent !important"
   }, (0, _react2.jsx)(_index.TableCell, {
     width: "40%"
-  }, (0, _react2.jsx)(_index.Text, null, "MD | 31px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_index.Text, null, "MD |", ' ', isOnyx ? '32px' : '31px')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
   }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='md'/>"), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
+  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "create button",
-    variant: "inverted",
-    sx: {
-      width: 'unset'
-    }
+    variant: "inverted"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
     size: "md",
     title: {
       name: 'Create Icon'
     }
-  }))))));
+  })))))));
 };
 exports.Sizes = Sizes;
 Sizes.parameters = {

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -56,6 +56,7 @@ declare const useGetTheme: () => {
     accordionItemDefaultLabelTag: string;
     iFrameContentDivBackgroundColor: string;
     rockerButtonGap: string;
+    defaultIconSize: import("../..").IconSize;
     buttonLoaderSize: import("../..").LoaderSize;
     themeState: {
         isOnyx: boolean;
@@ -106,6 +107,7 @@ declare const useGetTheme: () => {
     accordionItemMarginLeft: string;
     defaultLoaderSize: number;
     defaultIconColor: string;
+    defaultIconSize: import("../..").IconSize;
     buttonLoaderSize: import("../..").LoaderSize;
     name: string;
     themeState: {

package/lib/cjs/hooks/useTShirtSize/useTShirtSize.test.js

@@ -62,7 +62,7 @@ test('returns size value if size is a t-shirt value', function () {
     result = _renderHook2.result;
   var obj = {
     sizeProps: {
-      size: '3rem'
+      size: '48px'
     }
   };
   expect(result.current).toEqual(obj);
@@ -112,4 +112,54 @@ test('using custom sizes, returns size value if size is a string value', functio
     }
   };
   expect(result.current).toEqual(obj);
+});
+test('returns size directly if size key is not found in sizes', function () {
+  var props = {
+    size: 'unknown-size'
+  };
+  var _renderHook6 = (0, _react.renderHook)(function () {
+      return (0, _useTShirtSize["default"])(props);
+    }),
+    result = _renderHook6.result;
+  expect(result.current).toEqual({
+    sizeProps: {
+      size: 'unknown-size'
+    }
+  });
+});
+test('returns value if size value includes rem', function () {
+  var customSizes = {
+    sm: '1.5rem'
+  };
+  var props = {
+    size: 'sm',
+    sizes: customSizes
+  };
+  var _renderHook7 = (0, _react.renderHook)(function () {
+      return (0, _useTShirtSize["default"])(props);
+    }),
+    result = _renderHook7.result;
+  expect(result.current).toEqual({
+    sizeProps: {
+      size: '1.5rem'
+    }
+  });
+});
+test('returns size with px when numeric value found in sizes', function () {
+  var customSizes = {
+    sm: 8
+  };
+  var props = {
+    size: 'sm',
+    sizes: customSizes
+  };
+  var _renderHook8 = (0, _react.renderHook)(function () {
+      return (0, _useTShirtSize["default"])(props);
+    }),
+    result = _renderHook8.result;
+  expect(result.current).toEqual({
+    sizeProps: {
+      size: '8px'
+    }
+  });
 });

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -49,5 +49,6 @@ export declare const nextGenDarkThemeValues: {
     };
     accordionItemDefaultLabelTag: string;
     rockerButtonGap: string;
+    defaultIconSize: import("../../../..").IconSize;
     buttonLoaderSize: import("../../../..").LoaderSize;
 };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts

@@ -194,11 +194,6 @@ declare const buttons: {
             path: {
                 fill: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             '&.is-hovered': {
                 path: {
                     fill: string;
@@ -214,34 +209,28 @@ declare const buttons: {
             };
         };
         inverted: {
-            borderColor: string;
             path: {
                 fill: string;
             };
             '&.is-pressed': {
                 backgroundColor: string;
-                borderColor: string;
             };
             '&.is-hovered': {
-                border: string;
-                borderColor: string;
                 backgroundColor: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
+        };
+        searchClearButton: {
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
             };
         };
         hintButton: {
             path: {
                 fill: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             '&.is-hovered': {
                 path: {
                     fill: string;
@@ -256,18 +245,6 @@ declare const buttons: {
                 };
             };
         };
-        nextGen: {
-            '&.is-hovered': {
-                path: {
-                    fill: string;
-                };
-            };
-            '&.is-pressed': {
-                path: {
-                    fill: string;
-                };
-            };
-        };
         deleteAttachment: {
             backgroundColor: string;
             borderColor: string;
@@ -282,11 +259,6 @@ declare const buttons: {
             path: {
                 fill: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             '&.is-pressed': {
                 backgroundColor: string;
                 borderColor: string;
@@ -299,11 +271,6 @@ declare const buttons: {
             path: {
                 fill: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             '&.is-hovered': {
                 path: {
                     fill: string;
@@ -325,11 +292,6 @@ declare const buttons: {
             path: {
                 fill: string;
             };
-            '&.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
-            };
             '&.is-pressed': {
                 backgroundColor: string;
                 borderColor: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -22,56 +22,43 @@ var baseIconButton = {
   path: {
     fill: 'dark'
   },
-  '&.is-focused': {
-    outline: '2px solid',
-    outlineColor: 'primary',
-    outlineOffset: '3px'
-  },
   '&.is-hovered': {
     path: {
-      fill: _chromaJs["default"].mix(_colorTokens.nextGenColors['gray-400'], 'black', 0.15, 'rgb').hex()
+      fill: 'gray-400'
     },
-    backgroundColor: 'transparent'
+    backgroundColor: 'background.secondary'
   },
   '&.is-pressed': {
     backgroundColor: 'gray-800',
     borderColor: 'gray-900',
     path: {
-      fill: _chromaJs["default"].mix(_colorTokens.nextGenColors['gray-400'], 'black', 0.15, 'rgb').hex()
+      fill: 'gray-400'
     }
   }
 };
 var hintButton = _objectSpread({}, baseIconButton);
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
-  inverted: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    borderColor: 'transparent !important',
+  inverted: {
     path: {
       fill: 'black'
     },
     '&.is-pressed': {
-      backgroundColor: _chromaJs["default"].mix('white', 'black', 0.125, 'rgb').hex(),
-      borderColor: _chromaJs["default"].mix('white', 'black', 0.125, 'rgb').hex()
+      backgroundColor: _chromaJs["default"].mix('white', 'black', 0.125, 'rgb').hex()
     },
     '&.is-hovered': {
-      border: 'none !important',
-      borderColor: 'none !important',
       backgroundColor: 'white'
     }
-  }),
-  hintButton: hintButton,
-  nextGen: {
+  },
+  searchClearButton: {
     '&.is-hovered': {
-      path: {
-        fill: 'black'
-      }
+      backgroundColor: 'background.secondary'
     },
     '&.is-pressed': {
-      path: {
-        fill: 'black'
-      }
+      backgroundColor: 'background.secondary'
     }
   },
+  hintButton: hintButton,
   deleteAttachment: {
     backgroundColor: 'background.secondary',
     borderColor: 'border.attachment',

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -42,5 +42,6 @@ export declare const astroThemeValues: {
     accordionItemMarginLeft: string;
     defaultLoaderSize: number;
     defaultIconColor: string;
+    defaultIconSize: IconSize;
     buttonLoaderSize: LoaderSize;
 };

package/lib/cjs/styles/themes/astro/customProperties/index.js

@@ -28,6 +28,7 @@ var defaultLoaderSize = 16;
 var buttonLoaderSize = '0.5em';
 var iFrameContentDivBackgroundColor = '#F7F8FD';
 var defaultIconColor = 'currentColor';
+var defaultIconSize = 'sm';
 var astroThemeValues = {
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   activeColor: activeColor,
@@ -46,6 +47,7 @@ var astroThemeValues = {
   accordionItemMarginLeft: accordionItemMarginLeft,
   defaultLoaderSize: defaultLoaderSize,
   defaultIconColor: defaultIconColor,
+  defaultIconSize: defaultIconSize,
   buttonLoaderSize: buttonLoaderSize
 };
 exports.astroThemeValues = astroThemeValues;

package/lib/cjs/styles/themes/next-gen/colors/colors.js

@@ -128,7 +128,7 @@ var badge = {
   textColor: _colorTokens.nextGenColors.font.base,
   background: _colorTokens.nextGenColors['gray-100']
 };
-var tooltip = _colorTokens.nextGenColors['gray-900'];
+var tooltip = 'black';
 var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColors), _colorTokens.nextGenColors), overrides), {}, {
   badge: badge,
   card: card,

package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import type { IconSize } from '../../../../types';
 import { LoaderSize } from '../../../../types';
 export declare const nextGenThemeValues: {
-    copyButtonSize: import("../../../../types").IconSize;
-    breadcrumbIconSize: import("../../../../types").IconSize;
+    copyButtonSize: IconSize;
+    breadcrumbIconSize: IconSize;
     breadcrumbIconMargin: string;
     accordionItemMarginLeft: string;
     pageHeaderTitleMargin: string;
@@ -51,5 +52,6 @@ export declare const nextGenThemeValues: {
     accordionItemDefaultLabelTag: string;
     iFrameContentDivBackgroundColor: string;
     rockerButtonGap: string;
+    defaultIconSize: IconSize;
     buttonLoaderSize: LoaderSize;
 };

package/lib/cjs/styles/themes/next-gen/customProperties/index.js

@@ -30,6 +30,7 @@ var activeColor = '#1a73e8';
 var backgroundBaseColor = 'white';
 var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
+var defaultIconSize = 'md';
 var buttonLoaderSize = 'sm';
 var nextGenThemeValues = _objectSpread({
   activeColor: activeColor,
@@ -43,6 +44,7 @@ var nextGenThemeValues = _objectSpread({
   accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   rockerButtonGap: '0px',
+  defaultIconSize: defaultIconSize,
   buttonLoaderSize: buttonLoaderSize
 }, _customSizes["default"]);
 exports.nextGenThemeValues = nextGenThemeValues;

package/lib/cjs/styles/themes/next-gen/customProperties/tShirtSizes.js

@@ -6,19 +6,19 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.iconWrapperSizes = exports["default"] = void 0;
 var _default = {
-  xxs: '8px',
-  'icon-100': '.875rem',
-  xs: '15px',
-  'icon-200': '1.125rem',
-  sm: '20px',
-  'icon-300': '1.5rem',
-  md: '25px',
-  'icon-400': '2.25rem',
-  'icon-500': '3rem',
-  'icon-600': '3.75rem',
-  'icon-700': '4.5rem',
-  'icon-800': '5.25rem',
-  'icon-900': '6rem'
+  xxs: '10px',
+  'icon-100': '14px',
+  xs: '14px',
+  'icon-200': '18px',
+  sm: '18px',
+  'icon-300': '24px',
+  md: '24px',
+  'icon-400': '36px',
+  'icon-500': '48px',
+  'icon-600': '60px',
+  'icon-700': '72px',
+  'icon-800': '84px',
+  'icon-900': '96px'
 };
 exports["default"] = _default;
 var iconWrapperSizes = {