@pingux/astro 2.43.0 → 2.44.0-alpha.1

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

@@ -1,15 +1,22 @@
 "use strict";
 
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Sizes = exports.SVGIcons = exports.Default = exports.CommonlyUsed = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _AccountGroupIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountGroupIcon"));
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
@@ -22,9 +29,11 @@ var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/s
 var _index = require("../../index");
 var _colors = require("../../styles/colors");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks");
-var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
+var _iconSizeProps = require("../../utils/docUtils/iconSizeProps");
 var _Icon = _interopRequireDefault(require("./Icon.mdx"));
 var _react2 = require("@emotion/react");
+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 _default = {
   title: 'Components/Icon',
   component: _index.Icon,
@@ -39,20 +48,14 @@ var _default = {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread(_objectSpread({
     icon: {
       control: {
         type: 'none'
       },
       description: 'The icon to render. List of icons at https://materialdesignicons.com/'
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: (0, _keys["default"])(_tShirtSizes.tShirtSizes)
-      },
-      description: 'The size of the icon container. If given a number value, it will be converted to pixels. ' + 'Tshirt sizing is recommended and can be passed to the size prop as "xs", "sm" , "md" ' + 'rendering 15, 20, and 25 pixel svg containers.'
-    },
+    }
+  }, _iconSizeProps.sizeArgTypes), {}, {
     color: {
       control: {
         type: 'select',
@@ -63,10 +66,11 @@ var _default = {
         })
       }
     }
-  },
+  }),
   args: {
+    color: 'active',
     icon: _SearchIcon["default"],
-    color: 'active'
+    size: 'sm'
   }
 };
 exports["default"] = _default;

package/lib/cjs/components/IconButton/IconButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconButtonProps } from '../../types';
+declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

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

@@ -25,9 +25,8 @@ var _themeUi = require("theme-ui");
 var _BadgeContext = require("../../context/BadgeContext");
 var _hooks = require("../../hooks");
 var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
-var _iconButtonAttributes = require("./iconButtonAttributes");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "title", "variant", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
+var _excluded = ["children", "className", "title", "variant", "onBlur", "onFocus", "onHoverChange", "onHoverEnd", "onHoverStart", "onKeyDown", "onKeyUp", "onPress", "onPressEnd", "onPressStart", "onPressChange", "onPressUp", "isDisabled"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -37,26 +36,51 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className = props.className,
     title = props.title,
     variant = props.variant,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onHoverChange = props.onHoverChange,
+    onHoverEnd = props.onHoverEnd,
+    onHoverStart = props.onHoverStart,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
     onPress = props.onPress,
-    onPressStart = props.onPressStart,
     onPressEnd = props.onPressEnd,
+    onPressStart = props.onPressStart,
     onPressChange = props.onPressChange,
     onPressUp = props.onPressUp,
     isDisabled = props.isDisabled,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var buttonRef = (0, _react.useRef)();
+  var buttonRef = (0, _react.useRef)(null);
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return buttonRef.current;
   });
-  var _usePress = (0, _interactions.usePress)(buttonRef),
+  var _usePress = (0, _interactions.usePress)({
+      ref: buttonRef
+    }),
     isPressedFromContext = _usePress.isPressed;
-  var _useButton = (0, _reactAria.useButton)(_objectSpread({}, props), buttonRef),
+  var _useButton = (0, _reactAria.useButton)(_objectSpread({
+      elementType: 'button',
+      isDisabled: isDisabled,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      onPress: onPress,
+      onPressChange: onPressChange,
+      onPressEnd: onPressEnd,
+      onPressStart: onPressStart,
+      onPressUp: onPressUp
+    }, others), buttonRef),
     buttonProps = _useButton.buttonProps,
     isPressed = _useButton.isPressed;
-  var _useContext = (0, _react.useContext)(_BadgeContext.BadgeContext),
-    badgeBg = _useContext.bg;
-  var _useHover = (0, _interactions.useHover)(props),
+  var _ref = (0, _react.useContext)(_BadgeContext.BadgeContext),
+    badgeBg = _ref.bg;
+  var _useHover = (0, _interactions.useHover)({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var _useFocusRing = (0, _reactAria.useFocusRing)(),
@@ -77,11 +101,11 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: 0,
     className: classNames,
     "aria-label": ariaLabel,
-    sx: badgeBg && isHovered && {
+    sx: badgeBg && isHovered ? {
       'path': {
         fill: badgeBg
       }
-    },
+    } : undefined,
     variant: "iconButtons.".concat(variant),
     onPointerOver: hoverProps.onPointerEnter
   }, children));
@@ -92,11 +116,10 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
   return button;
 });
-IconButton.propTypes = _iconButtonAttributes.iconButtonPropTypes;
 IconButton.defaultProps = {
   variant: 'base',
   isDisabled: false
 };
-IconButton.displayName = 'Icon Button';
+IconButton.displayName = 'IconButton';
 var _default = IconButton;
 exports["default"] = _default;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { IconButtonProps } 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<IconButtonProps>;
+export declare const WithTooltip: () => React.JSX.Element;
+export declare const Disabled: () => React.JSX.Element;
+export declare const Sizes: () => React.JSX.Element;
+export declare const CommonlyUsed: () => React.JSX.Element;

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

@@ -16,7 +16,7 @@ var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _IconButton = _interopRequireDefault(require("./IconButton.mdx"));
 var _iconButtonAttributes = require("./iconButtonAttributes");
 var _react2 = require("@emotion/react");
@@ -43,7 +43,6 @@ var Default = function Default(args) {
     "aria-label": "default icon button"
   }, args), (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
-    size: args.size,
     title: {
       name: 'Create Icon'
     }

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

@@ -0,0 +1,417 @@
+export declare const base: {
+    justifyContent: string;
+    appearance: string;
+    alignItems: string;
+    alignSelf: string;
+    display: string;
+    flexGrow: number;
+    flexShrink: number;
+    borderRadius: string;
+    cursor: string;
+    bg: string;
+    p: string;
+    width: string;
+    height: string;
+    path: {
+        fill: string;
+    };
+    outline: string;
+    '&.is-focused': {
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    '&.is-hovered': {
+        bg: string;
+    };
+    '&.is-pressed': {
+        path: {
+            fill: string;
+        };
+        bg: string;
+    };
+};
+export declare const square: {
+    borderRadius: string;
+    justifyContent: string;
+    appearance: string;
+    alignItems: string;
+    alignSelf: string;
+    display: string;
+    flexGrow: number;
+    flexShrink: number;
+    cursor: string;
+    bg: string;
+    p: string;
+    width: string;
+    height: string;
+    path: {
+        fill: string;
+    };
+    outline: string;
+    '&.is-focused': {
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    '&.is-hovered': {
+        bg: string;
+    };
+    '&.is-pressed': {
+        path: {
+            fill: string;
+        };
+        bg: string;
+    };
+};
+declare const _default: {
+    base: {
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        bg: string;
+        p: string;
+        width: string;
+        height: string;
+        path: {
+            fill: string;
+        };
+        outline: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+            bg: string;
+        };
+    };
+    bidirectional: {
+        border: string;
+        outline: string;
+        height: string;
+        width: string;
+        color: string;
+        borderRadius: string;
+        borderColor: string;
+        '&.is-hovered': {
+            color: string;
+            borderColor: string;
+        };
+        '&.is-pressed': {
+            color: string;
+            borderColor: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+    };
+    badge: {
+        deleteButton: {
+            borderRadius: string;
+            cursor: string;
+            height: number;
+            p: number;
+            width: number;
+            mx: string;
+            '&.is-focused': {
+                bg: string;
+                boxShadow: string;
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
+    };
+    badgeDeleteButton: {
+        outline: string;
+        path: {
+            fill: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+            bg: string;
+        };
+        borderRadius: string;
+        cursor: string;
+        height: number;
+        p: number;
+        width: number;
+        mx: string;
+    };
+    copyButton: any;
+    datePicker: {
+        containedIcon: any;
+    };
+    hintButton: any;
+    inverted: {
+        bg: string;
+        borderColor: string;
+        path: {
+            fill: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            borderColor: string;
+            color: string;
+            boxShadow: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+            borderColor: string;
+            color: string;
+        };
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        p: string;
+        width: string;
+        height: string;
+        outline: string;
+    };
+    messageCloseButton: any;
+    modalCloseButton: any;
+    invertedBadgeDeleteButton: {
+        path: {
+            fill: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        outline: string;
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+            bg: string;
+        };
+        borderRadius: string;
+        cursor: string;
+        height: number;
+        p: number;
+        width: number;
+        mx: string;
+    };
+    invertedSquare: {
+        borderRadius: string;
+        bg: string;
+        borderColor: string;
+        path: {
+            fill: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            borderColor: string;
+            color: string;
+            boxShadow: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+            borderColor: string;
+            color: string;
+        };
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        cursor: string;
+        p: string;
+        width: string;
+        height: string;
+        outline: string;
+    };
+    square: {
+        borderRadius: string;
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        cursor: string;
+        bg: string;
+        p: string;
+        width: string;
+        height: string;
+        path: {
+            fill: string;
+        };
+        outline: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+            bg: string;
+        };
+    };
+    svgIconButton: {
+        path: {
+            fill: string;
+        };
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        bg: string;
+        p: string;
+        width: string;
+        height: string;
+        outline: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+            bg: string;
+        };
+    };
+    toggle: any;
+    tooltip: {
+        button: any;
+    };
+    applicationPortal: {
+        background: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+        };
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        bg: string;
+        p: string;
+        width: string;
+        height: string;
+        path: {
+            fill: string;
+        };
+        outline: string;
+    };
+    applicationPortalPinned: {
+        path: {
+            fill: string;
+        };
+        background: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+        };
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        bg: string;
+        p: string;
+        width: string;
+        height: string;
+        outline: string;
+    };
+};
+export default _default;

package/lib/cjs/components/IconButton/IconButton.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -128,7 +128,8 @@ test('tooltip is not shown on hover or focus when prop is not passed', function
 test('the button should be getting aria label attribute', function () {
   var testLabel = defaultProps['aria-label'];
   getComponent();
-  expect(_testWrapper.screen.getByLabelText(testLabel)).toBeInTheDocument();
+  var button = _testWrapper.screen.getByRole('button');
+  expect(button).toHaveAttribute('aria-label', testLabel);
 });
 test('show button isDisabled status', function () {
   var onPress = jest.fn();

package/lib/cjs/components/IconButton/iconButtonAttributes.d.ts

@@ -0,0 +1,48 @@
+export declare const iconButtonArgTypes: {
+    icon: {
+        control: {
+            type: string;
+        };
+        description: string;
+    };
+    title: {
+        control: {
+            type: string;
+        };
+        description: string;
+    };
+    'aria-label': {
+        control: {
+            type: string;
+        };
+        description: string;
+    };
+    isDisabled: any;
+    variant: {
+        control: {
+            type: string;
+            options: string[];
+        };
+        description: string;
+    };
+    onPress: any;
+    onPressStart: any;
+    onPressEnd: any;
+    onPressChange: any;
+    onPressUp: any;
+};
+export declare const iconButtonArgs: {
+    icon: import("@pingux/mdi-react").MdiReactIconComponentType;
+    variant: string;
+};
+export declare const iconButtonPropTypes: {
+    variant: any;
+    'aria-label': any;
+    title: any;
+    onPress: any;
+    onPressStart: any;
+    onPressEnd: any;
+    onPressChange: any;
+    onPressUp: any;
+    isDisabled: any;
+};