@pingux/astro 2.132.0-alpha.2 → 2.132.0-alpha.3

package/lib/cjs/components/Modal/Modal.js

@@ -28,7 +28,7 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps"];
 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; }
@@ -53,6 +53,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     children = props.children,
     propsContentProps = props.contentProps,
     containerProps = props.containerProps,
+    headerContainerProps = props.headerContainerProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var contentProps = _objectSpread({
     id: id,
@@ -117,9 +118,9 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), (0, _react2.jsx)(_Box["default"], {
+  }), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.headingContainer"
-  }, hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
+  }, headerContainerProps), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
     variant: "modalCloseButton",

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

@@ -120,7 +120,8 @@ var Default = function Default(args) {
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.open,
-      "aria-label": "Open modal"
+      "aria-label": "Open modal",
+      tabIndex: state.isOpen ? -1 : 0
     }, "Open Modal"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
       isOpen: state.isOpen,
       onClose: state.close,
@@ -134,14 +135,6 @@ Default.parameters = {
   design: {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.modal["default"]
-  },
-  a11y: {
-    config: {
-      rules: [{
-        id: 'aria-hidden-focus',
-        enabled: false
-      }]
-    }
   }
 };
 var LargeContent = function LargeContent(args) {
@@ -151,10 +144,12 @@ var LargeContent = function LargeContent(args) {
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.open,
-      "aria-label": "Open modal"
+      "aria-label": "Open modal",
+      tabIndex: state.isOpen ? -1 : 0
     }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, (0, _extends2["default"])({}, args, {
       isOpen: state.isOpen,
-      onClose: state.close
+      onClose: state.close,
+      title: "Lorem Ipsum"
     }), (0, _react2.jsx)(_index.Box, {
       gap: "lg"
     }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, null, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, null, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), (0, _react2.jsx)(_index.Text, null, "Eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Text, null, "Excepteur sint occaecat cupidatat non proident."), (0, _react2.jsx)(_index.Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), (0, _react2.jsx)(_index.Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), (0, _react2.jsx)(_index.Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), (0, _react2.jsx)(_index.Text, null, "Nisi ut aliquip ex ea commodo consequat."), (0, _react2.jsx)(_index.Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.")), (0, _react2.jsx)(_index.Box, {

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

@@ -109,6 +109,7 @@ export declare const text: {
         fontWeight: number;
         color: string;
         fontFamily: string;
+        width: string;
         display: string;
         overflowWrap: overflowWrap;
         maxWidth: string;

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

@@ -220,7 +220,8 @@ var text = _objectSpread(_objectSpread(_objectSpread({
     fontSize: '20px',
     fontWeight: 2,
     color: 'text.primary',
-    fontFamily: 'standard'
+    fontFamily: 'standard',
+    width: 'calc(100% - 22px)'
   }),
   placeholder: {
     fontWeight: -1,

package/lib/cjs/types/Modal.d.ts

@@ -57,4 +57,5 @@ export interface ModalProps extends DOMAttributes, TestingAttributes {
     contentProps?: object;
     /** Props object spread directly into the modal container Box. */
     containerProps?: object;
+    headerContainerProps?: object;
 }

package/lib/components/Modal/Modal.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps"];
 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 React, { forwardRef } from 'react';
@@ -42,6 +42,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     children = props.children,
     propsContentProps = props.contentProps,
     containerProps = props.containerProps,
+    headerContainerProps = props.headerContainerProps,
     others = _objectWithoutProperties(props, _excluded);
   var contentProps = _objectSpread({
     id: id,
@@ -106,9 +107,9 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), ___EmotionJSX(Box, {
+  }), ___EmotionJSX(Box, _extends({
     variant: "modal.headingContainer"
-  }, hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
+  }, headerContainerProps), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
     variant: "modalCloseButton",

package/lib/components/Modal/Modal.stories.js

@@ -111,7 +111,8 @@ export var Default = function Default(args) {
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
       onPress: state.open,
-      "aria-label": "Open modal"
+      "aria-label": "Open modal",
+      tabIndex: state.isOpen ? -1 : 0
     }, "Open Modal"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(Modal, _extends({}, args, {
       isOpen: state.isOpen,
       onClose: state.close,
@@ -124,14 +125,6 @@ Default.parameters = {
   design: {
     type: 'figma',
     url: FIGMA_LINKS.modal["default"]
-  },
-  a11y: {
-    config: {
-      rules: [{
-        id: 'aria-hidden-focus',
-        enabled: false
-      }]
-    }
   }
 };
 export var LargeContent = function LargeContent(args) {
@@ -141,10 +134,12 @@ export var LargeContent = function LargeContent(args) {
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
       onPress: state.open,
-      "aria-label": "Open modal"
+      "aria-label": "Open modal",
+      tabIndex: state.isOpen ? -1 : 0
     }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, _extends({}, args, {
       isOpen: state.isOpen,
-      onClose: state.close
+      onClose: state.close,
+      title: "Lorem Ipsum"
     }), ___EmotionJSX(Box, {
       gap: "lg"
     }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, null, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, null, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore."), ___EmotionJSX(Text, null, "Eu fugiat nulla pariatur."), ___EmotionJSX(Text, null, "Excepteur sint occaecat cupidatat non proident."), ___EmotionJSX(Text, null, "Sunt in culpa qui officia deserunt mollit anim id est laborum."), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), ___EmotionJSX(Text, null, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), ___EmotionJSX(Text, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), ___EmotionJSX(Text, null, "Nisi ut aliquip ex ea commodo consequat."), ___EmotionJSX(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.")), ___EmotionJSX(Box, {

package/lib/components/Text/Text.styles.js

@@ -211,7 +211,8 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
     fontSize: '20px',
     fontWeight: 2,
     color: 'text.primary',
-    fontFamily: 'standard'
+    fontFamily: 'standard',
+    width: 'calc(100% - 22px)'
   }),
   placeholder: {
     fontWeight: -1,

package/package.json

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