@pingux/astro 1.15.0-alpha.2 → 1.15.0-alpha.5

package/lib/cjs/components/Button/Button.js

@@ -133,9 +133,9 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       alignItems: 'center'
     },
     variant: variant
-  }, others, (0, _utils.mergeProps)(hoverProps, focusProps, _objectSpread(_objectSpread({}, buttonProps), {}, {
+  }, others, (0, _utils.mergeProps)(_objectSpread(_objectSpread({}, buttonProps), {}, {
     tabIndex: tabIndex
-  }))), isLoading ? (0, _react2.jsx)("span", {
+  }), hoverProps, focusProps)), isLoading ? (0, _react2.jsx)("span", {
     style: {
       visibility: 'hidden'
     }

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

@@ -127,7 +127,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         fill: chipBg
       }
     }
-  }, (0, _utils.mergeProps)(hoverProps, focusProps, buttonProps, others)), children);
+  }, (0, _utils.mergeProps)(buttonProps, others, hoverProps, focusProps)), children);
 
   if (title) {
     return (0, _react2.jsx)(_TooltipTrigger["default"], {

package/lib/cjs/recipes/TrialExperienceIndustryButtons.stories.js

@@ -18,6 +18,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _index = require("../index");
 
+var _useModalState = _interopRequireDefault(require("../hooks/useModalState"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -615,7 +617,7 @@ var realtySVG = function realtySVG(props) {
   }))));
 };
 
-var Buttons = [{
+var buttons = [{
   name: 'Retail',
   icon: retailSVG
 }, {
@@ -648,8 +650,13 @@ var Buttons = [{
 }];
 
 var Default = function Default() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, {
-    isOpen: true,
+  var state = (0, _useModalState["default"])();
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+    onPress: state.open,
+    "aria-label": "Open modal"
+  }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
+    isOpen: state.isOpen,
+    onClose: state.close,
     hasCloseButton: true,
     contentProps: {
       maxWidth: '880px',
@@ -666,7 +673,7 @@ var Default = function Default() {
   }, "To further customize your experience, choose an industry that most resembles your own."), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: gridContainerStyles
-  }, (0, _map["default"])(Buttons).call(Buttons, function (button) {
+  }, (0, _map["default"])(buttons).call(buttons, function (button) {
     return (0, _react2.jsx)(_index.Button, {
       sx: buttonStyle,
       key: button.name

package/lib/components/Button/Button.js

@@ -95,9 +95,9 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       alignItems: 'center'
     },
     variant: variant
-  }, others, mergeProps(hoverProps, focusProps, _objectSpread(_objectSpread({}, buttonProps), {}, {
+  }, others, mergeProps(_objectSpread(_objectSpread({}, buttonProps), {}, {
     tabIndex: tabIndex
-  }))), isLoading ? ___EmotionJSX("span", {
+  }), hoverProps, focusProps)), isLoading ? ___EmotionJSX("span", {
     style: {
       visibility: 'hidden'
     }

package/lib/components/IconButton/IconButton.js

@@ -90,7 +90,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
         fill: chipBg
       }
     }
-  }, mergeProps(hoverProps, focusProps, buttonProps, others)), children);
+  }, mergeProps(buttonProps, others, hoverProps, focusProps)), children);
 
   if (title) {
     return ___EmotionJSX(TooltipTrigger, {

package/lib/recipes/TrialExperienceIndustryButtons.stories.js

@@ -2,6 +2,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Box, Button, HelpHint, Icon, Modal, OverlayProvider, Text } from '../index';
+import useModalState from '../hooks/useModalState';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/TrialExperienceButtons'
@@ -597,7 +598,7 @@ var realtySVG = function realtySVG(props) {
   }))));
 };
 
-var Buttons = [{
+var buttons = [{
   name: 'Retail',
   icon: retailSVG
 }, {
@@ -629,8 +630,13 @@ var Buttons = [{
   icon: hotelSVG
 }];
 export var Default = function Default() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Modal, {
-    isOpen: true,
+  var state = useModalState();
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+    onPress: state.open,
+    "aria-label": "Open modal"
+  }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
+    isOpen: state.isOpen,
+    onClose: state.close,
     hasCloseButton: true,
     contentProps: {
       maxWidth: '880px',
@@ -647,7 +653,7 @@ export var Default = function Default() {
   }, "To further customize your experience, choose an industry that most resembles your own."), ___EmotionJSX(Box, {
     isRow: true,
     sx: gridContainerStyles
-  }, _mapInstanceProperty(Buttons).call(Buttons, function (button) {
+  }, _mapInstanceProperty(buttons).call(buttons, function (button) {
     return ___EmotionJSX(Button, {
       sx: buttonStyle,
       key: button.name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.15.0-alpha.2",
+  "version": "1.15.0-alpha.5",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",